/*
  SmartSorte – Mobile hardening fixes
  Objetivo: eliminar quebras de layout no celular e melhorar usabilidade.
*/

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
}

/*
  Evite cortar UI no desktop (dropdowns, modais, tooltips, etc.).
  Mantemos o bloqueio de overflow-x apenas em telas menores, onde o
  "scroll horizontal fantasma" é mais comum.
*/
@media (max-width: 991.98px) {
  html,
  body {
    overflow-x: hidden;
  }
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

@media (max-width: 576px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive > table {
    min-width: 600px;
  }
}

/* Carrossel: remover setas (solicitado) e manter swipe */
.carousel-control-prev,
.carousel-control-next {
  display: none !important;
}

@media (max-width: 768px) {
  .carousel {
    touch-action: pan-y;
  }
}

@media (max-width: 576px) {
  .carousel-indicators {
    margin-bottom: calc(1rem + var(--safe-bottom));
  }
}

/* Botão flutuante de compartilhar – garantir clique/visibilidade */
div[class*="sorteioShare"],
.sorteio_sorteioShare__247_t {
  z-index: 1050;
}

@media (max-width: 576px) {
  div[class*="sorteioShare"],
  .sorteio_sorteioShare__247_t {
    bottom: calc(80px + var(--safe-bottom)) !important;
    right: 12px !important;
  }
}

/* Cards de compradores – evitar overflow lateral */
.top-compradores {
  gap: 8px;
}

@media (max-width: 576px) {
  .comprador {
    min-width: calc(50% - 8px) !important;
    margin-left: 0 !important;
    padding: 14px !important;
  }
}

/* Modal: evitar recorte em telas pequenas (sem quebrar centralização no desktop) */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.75rem;
  }
}

/* Desktop: força centralização do modal (alguns estilos do tema zeravam margin no .modal-dialog) */
@media (min-width: 576px) {
  .modal-dialog {
    margin: 1.75rem auto !important;
  }
}


.modal-content {
  max-width: 100%;
}