/* mobile.css — correções mobile-first sobrepostas ao Tailwind 4 remoto
   Carregado depois do CSS do clone. Se o remoto cair, este ainda mantém o site utilizável. */

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }

/* Imagens e mídia fluidas — evita overflow horizontal em qualquer tela */
img, picture, video, canvas, svg { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* Inputs com pelo menos 16px para impedir zoom automático do iOS Safari */
input, select, textarea, button {
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
}

/* Área de toque mínima recomendada (44x44) em elementos interativos principais */
button, a[role="button"], a[href], input[type="submit"], input[type="button"] {
    min-height: 44px;
    touch-action: manipulation;
}

/* Modal de lead — fix iOS Safari (body continua scrollando sob o modal) */
html.is-modal-open,
html.is-modal-open body {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    overscroll-behavior: contain;
}

#leadModalOverlay,
.lead-modal-overlay {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Garante inputs do modal acima da safe-area do iPhone com notch */
#leadModalOverlay form input,
#leadModalOverlay form button {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
}

#leadModalOverlay form button[type="submit"] {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* Botão "Contratar Agora" do mobile (CTA fixo nos cards de plano) */
a[href*="whatsapp.com/send"].mundiale-open-whatsapp,
a[href*="whatsapp.com/send"][data-tag-manager-event="convertion"] {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

/* Hero/banner: reserva espaço para evitar layout shift (CLS) */
img[src*="hero"] {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--background, #f9fafb);
}

/* Imagens lazy abaixo da dobra */
img[loading="lazy"] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* Tabela do admin: scroll horizontal em telas pequenas + transformação em cards */
@media (max-width: 767px) {
    .admin-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0.75rem;
    }
    .admin-table-wrapper table thead {
        display: none;
    }
    .admin-table-wrapper table tbody tr {
        display: block;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.75rem;
    }
    .admin-table-wrapper table tbody td {
        display: block;
        padding: 0.25rem 0;
        text-align: left !important;
    }
    .admin-table-wrapper table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: #6b7280;
        font-size: 0.75rem;
        text-transform: uppercase;
        margin-bottom: 0.125rem;
    }
}

/* Header: cidade longa não estoura em telas estreitas */
header p.text-sm {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Modal de seleção de cidade: garante ocupar a tela toda no mobile */
@media (max-width: 767px) {
    #locations-modal > div {
        max-width: 100%;
    }
}

/* Cookie banner: respeita safe-area */
#cookieConsentBanner {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* prefers-reduced-motion: desabilita transições e animações */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* prefers-color-scheme: dark — só sobrescreve o background do body para
   evitar o "flash branco" antes do JS aplicar dark mode */
@media (prefers-color-scheme: dark) {
    body { background-color: var(--dark-background, #101010); }
}

/* Acessibilidade: foco visível consistente */
:focus-visible {
    outline: 3px solid #28BEA4;
    outline-offset: 2px;
}

/* Acessibilidade: área de skip-link (aparece ao receber foco) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #28BEA4;
    color: #fff;
    padding: 0.75rem 1.5rem;
    z-index: 999999;
    text-decoration: none;
    font-weight: 700;
}
.skip-link:focus {
    top: 0;
}

/* Pequenos ajustes tipográficos mobile (tamanhos mínimos sem perder o design) */
@media (max-width: 480px) {
    h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 5.5vw, 1.5rem); }
}