/*
 * agendar.css
 * Estilos da página de agendamento de aula (agendar.php).
 *
 * Extraído do bloco <style> inline para manter separação clara entre
 * apresentação e lógica PHP, facilitando cache do navegador e manutenção.
 *
 * Organização:
 *   1. Variáveis globais e reset básico
 *   2. Layout e wrapper
 *   3. Logo e cabeçalho
 *   4. Banner promocional
 *   5. Cards de formulário (seções)
 *   6. Campos de entrada (inputs, selects, date)
 *   7. Checkbox LGPD e termo de responsabilidade
 *   8. Botões (CTA, PIX, cartão, voltar, outline)
 *   9. Cupom aplicado (widget animado)
 *  10. Turma: radio cards e chips de data
 *  11. Seção de pagamento (PIX + cartão)
 * 11b. Autocomplete de cidades brasileiras
 * 11c. Cards de intenção de pagamento turista + áreas alternativas
 *  12. Cards de status do aluno (ativo / inativo)
 *  13. Feedback inline do telefone (AJAX)
 *  14. Wizard de passos (form steps indicator)
 *  15. Saúde: pill buttons e contato de emergência
 *  16. Animações e acessibilidade (prefers-reduced-motion)
 *  17. Responsividade mobile — incluindo iPhone Pro Max (≤ 430 px)
 */

/* ==========================================================================
   1. VARIÁVEIS GLOBAIS E RESET BÁSICO
   Usamos custom properties para manter consistência de cores no tema escuro
   e facilitar eventuais ajustes de paleta sem busca-e-substituição.
   --safe-top e --nav-total garantem que o conteúdo não fique escondido
   atrás do notch/Dynamic Island em iPhones modernos.
   ========================================================================== */
:root {
    --bg:       #0a0e1a;
    --card:     #111827;
    --border:   #1f2937;
    --input-bg: #1c2333;
    --purple:   #667eea;
    --purple2:  #764ba2;
    --purple-rgb: 102, 126, 234;
    --purple-light: #c4b5fd;
    --purple-mid:   #a78bfa;
    --text:     #e5e7eb;
    --muted:    #8892ab;

    /* Dynamic Island / notch iOS — safe-area-inset-top evita sobreposição
       do conteúdo com a ilha dinâmica em iPhone 14 Pro e superiores */
    --safe-top:  env(safe-area-inset-top, 0px);
    --nav-total: calc(0px + env(safe-area-inset-top, 0px));
}

/* Tema turista: troca acentos violeta por azul-oceano */
body.turista-theme {
    --purple:       #38bdf8;
    --purple2:      #0ea5e9;
    --purple-rgb:   56, 189, 248;
    --purple-light: #bae6fd;
    --purple-mid:   #7dd3fc;
    --banner-bg:    linear-gradient(135deg, #0c1a2e 0%, #0f2847 50%, #0c1a2e 100%);
}

/* Tema avulso: troca acentos violeta por laranja/amber */
body.avulso-theme {
    --purple:       #f59e0b;
    --purple2:      #d97706;
    --purple-rgb:   245, 158, 11;
    --purple-light: #fde68a;
    --purple-mid:   #fbbf24;
    --banner-bg:    linear-gradient(135deg, #1a1400 0%, #3d2e00 50%, #1a1400 100%);
}

* { box-sizing: border-box; }

body {
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
}

/* ==========================================================================
   2. LAYOUT E WRAPPER
   Centraliza e limita a largura do formulário; padding-bottom generoso
   para não esconder o botão de envio atrás da barra de ação flutuante.
   ========================================================================== */
.page-wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 16px 88px;
}

/* Tablet e PC precisam de largura util propria. O fluxo foi desenhado
   mobile-first, mas em telas grandes 680px deixa a leitura com cara de celular
   centralizado e dificulta comparacao entre campos. */
@media (min-width: 768px) {
    .page-wrapper {
        max-width: 736px;
        padding: 28px 20px 96px;
    }
}

@media (min-width: 992px) {
    .page-wrapper {
        max-width: 960px;
        padding: 30px 24px 104px;
    }
}

/* ==========================================================================
   3. LOGO E CABEÇALHO
   ========================================================================== */
/* Área central com ícone, nome da escola e subtítulo da página */
.logo-area { text-align: center; margin-bottom: 16px; }
.logo-area .icon { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.logo-area h1 { font-size: 22px; font-weight: 700; color: #fff; margin: 6px 0 2px; }
.logo-area p { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

/* Link discreto "Já agendou?" — aparece logo abaixo do logo para
   usuários que já agendaram e querem consultar o status */
.ag-hint-link {
    text-align: center;
    margin-bottom: 20px;
}
.ag-hint-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #92713a;
    text-decoration: none;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(251,191,36,.18);
    border-radius: 20px;
    transition: color .18s, border-color .18s, background .18s;
}
.ag-hint-link a:hover {
    color: #fbbf24;
    border-color: rgba(251,191,36,.45);
    background: rgba(251,191,36,.07);
}
.ag-hint-link a i { font-size: 13px; }

/* ==========================================================================
   4. BANNER PROMOCIONAL
   Exibe preço da aula e mensagem contextual (grátis / penalidade / aluno).
   Usa position: relative + ::before para o glow radial de fundo.
   ========================================================================== */
.promo-banner {
    position: relative; overflow: hidden;
    background: var(--banner-bg, linear-gradient(135deg, #1a1040 0%, #2d1b69 50%, #1a1040 100%));
    border: 1px solid rgba(var(--purple-rgb),.35);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.promo-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(var(--purple-rgb),.18) 0%, transparent 70%);
    pointer-events: none;
}
.promo-banner .promo-tag {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--purple), var(--purple2));
    color: #fff; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 20px;
    white-space: nowrap;
}
.promo-banner .promo-icon { flex-shrink: 0; font-size: 28px; line-height: 1; }
.promo-banner .promo-body { flex: 1; min-width: 0; }
.promo-banner .promo-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 3px; }
.promo-banner .promo-desc  { font-size: 12px; color: var(--purple-light); margin: 0; line-height: 1.5; }
.promo-banner .promo-price { flex-shrink: 0; text-align: right; }
.promo-banner .promo-price .old-price {
    font-size: 12px; color: #6b7280; text-decoration: line-through; display: block;
}
.promo-banner .promo-price .new-price {
    font-size: 22px; font-weight: 800;
    background: linear-gradient(135deg, #667eea, #a78bfa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1;
}
.promo-banner .promo-price .forever {
    font-size: 12px; color: #6b7280; display: block; margin-top: 1px;
}

/* Resumo compacto de perfil: fica acima do wizard porque a categoria altera
   preço, obrigatoriedade de cidade e status inicial do lead. Deve funcionar
   como contexto, não como um segundo banner. */
.profile-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 50px;
    margin: -6px 0 16px;
    padding: 8px 10px;
    border: 1px solid rgba(var(--purple-rgb), .22);
    border-radius: 999px;
    background: rgba(17, 24, 39, .58);
}
.profile-context-main {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.profile-context-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--purple-light);
    background: rgba(var(--purple-rgb), .12);
    border: 1px solid rgba(var(--purple-rgb), .18);
}
.profile-context-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.18;
    gap: 1px;
}
/* .profile-context-line mantido para compatibilidade — se usado, empilha */
.profile-context-line {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.profile-context-kicker {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.2;
}
.profile-context-copy strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-context-copy span:last-child {
    color: var(--purple-light);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.profile-context-change {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--purple-rgb), .32);
    color: var(--purple-light);
    background: rgba(var(--purple-rgb), .08);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s, border-color .18s, color .18s, transform .18s;
}

@media (max-width: 900px) {
    .profile-context-change {
        min-height: 44px;
    }
}
.profile-context-change:hover,
.profile-context-change:focus-visible {
    background: rgba(var(--purple-rgb), .15);
    border-color: rgba(var(--purple-rgb), .52);
    color: #fff;
    transform: translateY(-1px);
}
.profile-context-avulso .profile-context-icon,
.profile-context-avulso .profile-context-change {
    color: #fde68a;
    background: rgba(251, 191, 36, .08);
    border-color: rgba(251, 191, 36, .25);
}
.profile-context-avulso .profile-context-copy span:last-child { color: #fde68a; }
.profile-context-turista .profile-context-icon,
.profile-context-turista .profile-context-change {
    color: #bae6fd;
    background: rgba(56, 189, 248, .08);
    border-color: rgba(56, 189, 248, .26);
}
.profile-context-turista .profile-context-copy span:last-child { color: #bae6fd; }

/* SweetAlert2 — modal mobile-friendly com fundo escuro consistente */
.swal-mobile-popup {
    border-radius: 18px !important;
    padding: 28px 22px 22px !important;
    max-width: 360px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
}
@media (max-width: 480px) {
    .swal-mobile-popup {
        max-width: 92vw !important;
        border-radius: 16px !important;
    }
}

/* ==========================================================================
   5. CARDS DE FORMULÁRIO
   Cada seção do form (dados, aula, saúde, termo) é um card com borda
   superior colorida por seção via variável CSS --accent.
   margin-bottom: 20px sobrepõe a regra anterior de 16px (auditoria UX).
   ========================================================================== */
.form-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 20px;    /* 20px: respiro adequado entre cards no wizard */
    overflow: hidden;
}

/* Barra de accent colorida no topo do card — diferencia seções visualmente */
.form-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent, #667eea), var(--accent2, #764ba2));
    opacity: .8;
}

/* Cores de accent por seção do formulário */
.card-dados { --accent: var(--purple); --accent2: var(--purple-mid); }
.card-aula  { --accent: #06b6d4; --accent2: #0ea5e9; }
.card-saude { --accent: #10b981; --accent2: #22c55e; }
.card-termo { --accent: #f59e0b; --accent2: #fbbf24; }

/* Ícone do título herda a cor do accent da seção */
.card-dados h2 i { color: var(--purple-mid) !important; }
.card-aula  h2 i { color: #0ea5e9 !important; }
.card-saude h2 i { color: #22c55e !important; }
.card-termo h2 i { color: #fbbf24 !important; }

.form-card h2 {
    font-size: 17px; font-weight: 700; color: #fff;
    margin-bottom: 4px; display: flex; align-items: center; gap: 10px;
}

/* subtitle: margem reduzida (16px) para ficar mais próximo do primeiro campo */
.form-card .subtitle { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

/* Feedback de erro global */
.alert-err {
    background: #1f0a0a; border: 1px solid #7f1d1d; color: #fca5a5;
    border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px;
}

/* Rodapé da página */
.page-footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 12px; }
.page-footer a { color: var(--purple); text-decoration: none; }

/* ==========================================================================
   6. CAMPOS DE ENTRADA
   font-size: 16px é fundamental — valores menores acionam zoom automático
   no iOS ao focar o campo, degradando a experiência mobile.
   ========================================================================== */
.form-label {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--muted); margin-bottom: 6px;
}

.form-control, .form-select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 16px;   /* 16px evita zoom automático no iOS ao focar */
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    background: #222d40;
    border-color: var(--purple);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--purple-rgb),.15);
    outline: none;
}
.form-control::placeholder { color: #4b5563; }
.form-select option { background: #111827; color: #fff; }
.form-control.is-invalid { border-color: #ef4444; }

/* ── Date input: fix para iOS (overflow) e placeholder cross-platform ─────
   O input date nativo do iOS tende a ultrapassar o container; overflow:
   hidden no wrapper impede isso. O span .date-ph é o placeholder customizado
   porque o atributo placeholder não funciona em input[type=date] no Safari.
   ─────────────────────────────────────────────────────────────────────────*/
.date-wrap { position: relative; width: 100%; overflow: hidden; }
.date-wrap .bi-calendar3 {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: #4b5563; font-size: 16px; line-height: 1;
}
.date-ph {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #4b5563; font-size: 16px; pointer-events: none; line-height: 1;
}
input[type="date"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; max-width: 100%; min-width: 0;
    box-sizing: border-box; padding-right: 40px;
}
/* Esconde o dd/mm/aaaa nativo do Chrome quando o campo está vazio e sem foco */
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit-text,
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit-month-field,
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit-day-field,
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit-year-field { color: transparent; }
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
/* Oculta o placeholder customizado quando focado ou com valor preenchido */
.date-wrap input:focus ~ .date-ph,
.date-wrap input.has-val ~ .date-ph { display: none; }

/* Honeypot: campo oculto para detectar bots; visualmente invisível */
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   7. CHECKBOX LGPD E TERMO DE RESPONSABILIDADE
   touch target mínimo de 44px em altura para acessibilidade mobile (WCAG 2.5.5).
   ========================================================================== */
.form-check { padding-left: 2rem; }
.form-check-input {
    width: 22px; height: 22px; margin-left: -2rem; margin-top: .15rem;
    background: var(--input-bg); border-color: var(--border); cursor: pointer;
}
.form-check-input:checked { background-color: var(--purple); border-color: var(--purple); }
.form-check-label {
    font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer;
    min-height: 44px; display: flex; align-items: center;  /* touch target 44px */
}

/* Caixa de rolagem do texto do termo — altura limitada para não ocupar a tela toda */
.termo-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 14px;
    font-size: 12px; color: var(--muted); line-height: 1.6;
    max-height: 140px; overflow-y: auto; margin-bottom: 12px;
}

/* ==========================================================================
   8. BOTÕES
   ========================================================================== */
/* Botão CTA principal (gradiente roxo) */
.btn-primary-grad {
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple2) 100%);
    color: #fff; border: none; border-radius: 8px;
    padding: 13px 28px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all .2s; width: 100%;
}
.btn-primary-grad:hover  { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--purple-rgb),.4); }
.btn-primary-grad:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Link de voltar (discreto, sem destaque) */
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--muted); text-decoration: none;
    margin-bottom: 8px; transition: color .15s;
}
.back-link:hover { color: var(--text); }

/* Botão outline para ações secundárias (voltar ao início, ver agendamento) */
.btn-outline-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; border-radius: 8px;
    border: 1px solid var(--border); color: var(--text);
    font-size: 14px; text-decoration: none; transition: all .2s;
}
.btn-outline-back:hover { border-color: var(--purple); color: #fff; }

/* Botão PIX (gradiente verde) */
.btn-pix {
    width:100%; background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff; border:none; border-radius:10px;
    padding:14px; font-size:15px; font-weight:700; font-family:inherit;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    gap:10px; transition:all .2s; min-height:50px;
}
.btn-pix:hover     { transform:translateY(-1px); box-shadow:0 8px 20px rgba(34,197,94,.35); }
.btn-pix:disabled  { opacity:.6; cursor:not-allowed; transform:none; }

/* Botão Cartão (gradiente azul) */
.btn-card {
    width:100%; background:linear-gradient(135deg,#3b82f6,#1d4ed8);
    color:#fff; border:none; border-radius:10px;
    padding:14px; font-size:15px; font-weight:700; font-family:inherit;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    gap:10px; transition:all .2s; min-height:50px;
}
.btn-card:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(59,130,246,.35); }

/* Botão Copiar PIX */
.btn-copy {
    position:absolute; top:8px; right:8px;
    background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3);
    color:#4ade80; border-radius:6px; padding:4px 8px;
    font-size:12px; cursor:pointer;
}

/* ==========================================================================
   9. CUPOM APLICADO (widget animado)
   O cupom grátis fica oculto até o usuário selecionar uma turma; então
   é revelado com animação de scale + glow para reforçar a percepção de
   valor (gatilho de reciprocidade — o usuário ganha algo tangível).
   ========================================================================== */
/* Container do cupom */
.cupom-aplicado {
    display: flex; align-items: center; gap: 10px;
    background: rgba(16,185,129,.08); border: 1.5px solid rgba(16,185,129,.35);
    border-radius: 10px; padding: 10px 14px; min-height: 44px;
}
.cupom-aplicado > .bi-tag-fill { color: #10b981; font-size: 16px; flex-shrink: 0; }
.cupom-body { flex: 1; min-width: 0; }
.cupom-code { display: block; font-size: 13px; font-weight: 700; color: #6ee7b7; letter-spacing: .04em; }
.cupom-msg  { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.cupom-badge {
    flex-shrink: 0; font-size: 12px; font-weight: 800; letter-spacing: .04em;
    background: rgba(16,185,129,.18); color: #10b981;
    border-radius: 20px; padding: 3px 9px; white-space: nowrap;
}

/* Estado inicial: cupom oculto até turma ser selecionada */
#cupomGratisCol .form-label {
    opacity: 0;
    transition: opacity .25s ease .1s;
}
#cupomGratisCol .cupom-aplicado {
    opacity: 0;
    transform: scale(.84) translateY(10px);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Animação de reveal: escala cresce com overshoot suave (spring feel) */
@keyframes cupomReveal {
    0%   { opacity: 0;  transform: scale(.82)  translateY(14px); }
    55%  { opacity: 1;  transform: scale(1.05) translateY(-3px); }
    78%  { transform: scale(.97) translateY(1px); }
    100% { opacity: 1;  transform: scale(1)    translateY(0);    }
}
/* Glow esmaece após o reveal para reforçar o destaque */
@keyframes cupomGlow {
    0%,100% { box-shadow: none; }
    45%     { box-shadow: 0 0 22px rgba(16,185,129,.52), 0 0 46px rgba(16,185,129,.18); }
}

/* Classe adicionada via JS ao selecionar a turma */
#cupomGratisCol.cupom-revealed .form-label { opacity: 1; }
#cupomGratisCol.cupom-revealed .cupom-aplicado {
    pointer-events: auto;
    animation: cupomReveal .56s cubic-bezier(.34,1.56,.64,1) both,
               cupomGlow   1.7s ease .42s;
}

/* ==========================================================================
   10. TURMA: RADIO CARDS E CHIPS DE DATA
   ========================================================================== */
/* Toggle visitante/turista */
.turista-toggle { display: flex; gap: 8px; }
/* 3 colunas em desktop quando há 3 opções (visitante/avulso/turista) */
.cat-toggle-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 500px) {
    .cat-toggle-3 { grid-template-columns: 1fr; }
    .profile-context-bar {
        min-height: 54px;
        gap: 8px;
        padding: 8px 9px;
        margin-top: -4px;
    }
    .profile-context-change {
        min-height: 44px;
        padding-inline: 11px;
    }
    .profile-context-copy strong { font-size: 13px; }
    .profile-context-copy span:last-child { font-size: 12px; }
}

@media (max-width: 340px) {
    .profile-context-icon { display: none; }
    .profile-context-bar { border-radius: 16px; }
}
.toggle-opt {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 14px; border-radius: 10px;
    border: 1.5px solid var(--border); background: var(--input-bg);
    color: var(--muted); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s; user-select: none;
    -webkit-tap-highlight-color: transparent; min-height: 44px;
}
.toggle-opt input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.toggle-opt i { font-size: 16px; }
.toggle-opt.active { border-color: var(--purple); background: rgba(var(--purple-rgb),.12); color: var(--purple-light); }
.toggle-opt:hover:not(.active) { border-color: #4b5563; color: var(--text); }

/* Perfil travado: bloqueia re-seleção sem reload; opção não-ativa fica apagada */
.turista-toggle.locked { pointer-events: none; }
.turista-toggle.locked .toggle-opt { cursor: default; transition: opacity .3s ease, filter .3s ease; }
.turista-toggle.locked .toggle-opt:not(.active) { opacity: 0.27; filter: grayscale(.45); }

/* Cards de turma (radio estilizado) — cores distintas por posição na lista */
.turma-cards { display: flex; flex-direction: column; gap: 10px; }
.turma-card-radio {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    background: var(--input-bg); border: 1.5px solid var(--border);
    border-radius: 10px; padding: 14px 14px 14px 18px;
    cursor: pointer; transition: all .15s; user-select: none;
    -webkit-tap-highlight-color: transparent; overflow: hidden;
}
/* Barra lateral colorida por turma */
.turma-card-radio::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--turma-color, #667eea); opacity: .5; transition: opacity .15s;
}
.turma-card-radio input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.turma-card-radio:hover:not(.active) { border-color: var(--turma-color, rgba(var(--purple-rgb),.4)); }
.turma-card-radio.active {
    border-color: var(--turma-color, var(--purple));
    background: var(--turma-bg, rgba(var(--purple-rgb),.1));
    box-shadow: 0 4px 14px var(--turma-shadow, rgba(var(--purple-rgb),.12));
}
.turma-card-radio.active::before { opacity: 1; }

/* Paleta distinta para as 3 primeiras turmas listadas */
.turma-card-radio:nth-child(1) { --turma-color:#06b6d4; --turma-bg:rgba(6,182,212,.1);  --turma-shadow:rgba(6,182,212,.18); }
.turma-card-radio:nth-child(2) { --turma-color:#f59e0b; --turma-bg:rgba(245,158,11,.1); --turma-shadow:rgba(245,158,11,.18); }
.turma-card-radio:nth-child(3) { --turma-color:#ec4899; --turma-bg:rgba(236,72,153,.1); --turma-shadow:rgba(236,72,153,.18); }

.tcr-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--turma-color, #667eea); color: #fff; font-size: 18px;
    box-shadow: 0 2px 6px var(--turma-shadow, rgba(var(--purple-rgb),.3));
}
.tcr-body { flex: 1; min-width: 0; }
.tcr-name { font-size: 14px; font-weight: 700; color: #fff; }
.tcr-meta {
    font-size: 12px; color: var(--muted); margin-top: 2px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tcr-meta span { display: inline-flex; align-items: center; gap: 4px; }
.turma-card-radio.active .tcr-name { color: var(--turma-color); }
.tcr-indicator {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid #374151; background: var(--card); transition: all .15s;
}
.turma-card-radio.active .tcr-indicator {
    border-color: var(--turma-color, var(--purple));
    background: var(--turma-color, var(--purple));
    box-shadow: inset 0 0 0 3px var(--card);
}

/* Chips de sugestão de datas: scroll horizontal em mobile para não quebrar linha
   mask-image cria fade lateral à direita indicando que há mais conteúdo */
.date-chips {
    display: flex;
    overflow-x: auto;
    padding-bottom: 6px;
    flex-wrap: nowrap;            /* impede quebra de linha — usa scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fade lateral direito: sinaliza ao usuário que há chips além da tela */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.date-chips::-webkit-scrollbar { display: none; }

.date-chip {
    padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--border); background: var(--input-bg);
    color: var(--muted); cursor: pointer; transition: all .15s; user-select: none;
    -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.date-chip:hover, .date-chip.selected {
    border-color: #0ea5e9; background: rgba(14,165,233,.12); color: #7dd3fc;
}

/* ==========================================================================
   11. SEÇÃO DE PAGAMENTO (PIX + CARTÃO)
   Exibida quando o lead é aluno cadastrado ou tem penalidade NC.
   ========================================================================== */
.payment-card { text-align:center; padding:8px 0 4px; }
.payment-card .pmt-icon { font-size:52px; display:block; margin-bottom:12px; }
.payment-card h3 { font-size:18px; font-weight:700; color:#fff; margin-bottom:6px; }
.payment-card .pmt-valor {
    font-size:28px; font-weight:800;
    background: linear-gradient(135deg,#667eea,#764ba2);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; margin:10px 0 4px;
}
.payment-card .pmt-desc { font-size:13px; color:var(--muted); margin-bottom:20px; }
.pmt-methods { display:flex; flex-direction:column; gap:10px; }

/* Área do QR Code PIX — visível somente após geração */
.pix-area {
    margin-top:16px; padding:20px; background:rgba(34,197,94,.07);
    border:1px solid rgba(34,197,94,.22); border-radius:12px; display:none;
}
.pix-area.show { display:block; }
.pix-area img { max-width:200px; width:100%; border-radius:8px; display:block; margin:0 auto 12px; }
.pix-code-wrap { position:relative; }
.pix-code {
    width:100%; background:rgba(0,0,0,.3); color:#86efac;
    border:1px solid rgba(34,197,94,.2); border-radius:8px;
    padding:10px 40px 10px 12px; font-size:12px; font-family:monospace;
    word-break:break-all; resize:none; min-height:60px;
}
/* Status de polling do PIX com spinner animado */
.pix-status { font-size:13px; color:#86efac; margin-top:10px; text-align:center; }
.pix-spinner {
    display:inline-block; width:14px; height:14px;
    border:2px solid rgba(134,239,172,.3); border-top-color:#86efac;
    border-radius:50%; animation:spin .7s linear infinite;
    vertical-align:middle; margin-right:5px;
}
.pmt-aviso {
    font-size:12px; color:var(--muted); text-align:center; margin-top:14px;
    padding:10px; background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06); border-radius:8px;
}

/* ── Autocomplete de cidades ───────────────────────────────────────────── */
.ac-wrap { position: relative; }
.ac-list {
    position: absolute;
    z-index: 50;
    top: 100%;
    left: 0; right: 0;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    list-style: none;
    padding: 4px 0;
}
.ac-list li {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .15s;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.ac-list li:last-child { border-bottom: none; }
.ac-list li:hover,
.ac-list li.ac-active { background: rgba(var(--purple-rgb),.12); }
.ac-list li .ac-uf {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--purple-light);
    opacity: .7;
    padding-left: 8px;
    flex-shrink: 0;
}
.ac-list .ac-empty {
    padding: 14px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    cursor: default;
}
.ac-list .ac-loading {
    padding: 14px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    cursor: default;
}
.ac-list mark {
    background: rgba(var(--purple-rgb),.25);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Cards de intenção de pagamento (turista) ──────────────────────────── */
.pagto-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
    position: relative;
    user-select: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pagto-card:hover {
    border-color: rgba(var(--purple-rgb),.4);
    background: rgba(var(--purple-rgb),.04);
}
.pagto-card.pagto-selected {
    border-color: var(--purple) !important;
    background: rgba(var(--purple-rgb),.1) !important;
    box-shadow: 0 0 0 3px rgba(var(--purple-rgb),.2);
}
.pagto-radio-indicator {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid #374151;
    background: var(--input-bg);
    margin-top: 3px;
    transition: all .2s;
}
.pagto-card.pagto-selected .pagto-radio-indicator {
    border-color: var(--purple);
    background: var(--purple);
    box-shadow: inset 0 0 0 3px var(--card);
}
.pagto-card-label { font-weight: 700; font-size: 14px; color: #e2e8f0; margin-bottom: 2px; }
.pagto-card-desc  { font-size: 12px; color: var(--muted); line-height: 1.45; }
.pagto-card.pagto-selected .pagto-card-label { color: var(--purple-light); }

/* ── Áreas alternativas de pagamento (turista) ─────────────────────────── */
.pmt-alt-area { margin-top: 16px; }
.pmt-alt-box {
    text-align: center;
    padding: 24px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
}
.pmt-alt-green { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2); }
.pmt-alt-wpp   { background: rgba(74,222,128,.06); border-color: rgba(74,222,128,.18); }

/* ==========================================================================
   12. CARDS DE STATUS DO ALUNO (ATIVO / INATIVO)
   Exibidos em vez do formulário quando o aluno já tem matrícula.
   ========================================================================== */
.success-card { text-align: center; padding: 20px 0 8px; }
.success-card .check-icon { font-size: 64px; color: #10b981; display: block; margin-bottom: 16px; }
.success-card h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.success-card p  { font-size: 14px; color: var(--muted); margin-bottom: 20px; }

.status-card { text-align: center; padding: 8px 0 4px; }
.status-card .sc-icon { font-size: 52px; display: block; margin-bottom: 12px; }
.status-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.status-card .sc-msg { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.status-card .sc-msg strong { color: var(--text); }
.status-card .sc-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; border: none; border-radius: 10px;
    font-size: 15px; font-weight: 700; font-family: inherit;
    cursor: pointer; text-decoration: none; transition: all .2s;
}
/* Verde: aluno ativo → portal do aluno */
.sc-btn-green {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.3);
}
.sc-btn-green:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,185,129,.4); color:#fff; }
/* Âmbar: aluno inativo → secretaria */
.sc-btn-amber {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,.3);
}
.sc-btn-amber:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(245,158,11,.4); color:#fff; }

/* ==========================================================================
   13. FEEDBACK INLINE DO TELEFONE (AJAX)
   Aparece logo abaixo do campo de WhatsApp após checar o status do número.
   Estados: ativo (verde), inativo (vermelho), paga/nc (âmbar), verificando (roxo).
   ========================================================================== */
.tel-feedback {
    margin-top: 6px; padding: 8px 12px;
    border-radius: 8px; font-size: 12px; line-height: 1.4;
    display: none;
}
.tel-feedback.show    { display: flex; align-items: flex-start; gap: 8px; }
.tel-feedback.tf-ativo  { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }
.tel-feedback.tf-inativo{ background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.3);  color: #fca5a5; }
.tel-feedback.tf-paga   { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); color: #fde68a; }
.tel-feedback.tf-check  { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2); color: var(--muted); }

/* ==========================================================================
   14. WIZARD DE PASSOS (FORM STEPS INDICATOR)
   Barra de progresso com 4 etapas; apenas o card do passo atual é exibido.
   .card-locked foi mantido no CSS mas não é usado ativamente no wizard atual
   (reservado para futura funcionalidade de bloqueio sequencial).
   ========================================================================== */
/* Wrapper do indicador */
.form-steps { display: flex; align-items: center; margin-bottom: 20px; }
.step-item  { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }

/* Bolinha do step */
.step-dot {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--card);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #4b5563;
    transition: all .3s ease;
    position: relative; z-index: 1;
}
.step-dot.active  { border-color: var(--purple); background: rgba(var(--purple-rgb),.15); color: var(--purple-light); }
.step-dot.done    { border-color: #10b981;       background: rgba(16,185,129,.15);  color: #6ee7b7; }
.step-dot.current {
    border-color: var(--purple); background: rgba(var(--purple-rgb),.22);
    color: var(--purple-light); box-shadow: 0 0 0 3px rgba(var(--purple-rgb),.18);
}
/* Step concluído: esconde número e exibe check */
.step-dot.done .step-num { display: none; }
.step-dot.done::after    { content: '✓'; font-size: 13px; }

/* Label do step */
.step-label {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #4b5563;
    text-align: center; line-height: 1.2; white-space: nowrap;
    transition: color .3s ease;
}
.step-item.active  .step-label { color: var(--purple-light); }
.step-item.done    .step-label { color: #6ee7b7; }
.step-item.current .step-label { color: var(--purple-light); }

/* Linha conectora entre steps */
.step-connector {
    flex: 1; height: 2px; background: var(--border);
    margin-bottom: 16px; transition: background .3s ease;
}
.step-connector.done { background: rgba(16,185,129,.45); }

/* Exibe apenas o card do passo atual */
.card-step { display: none; }
.card-step.step-active { display: block; }

/* Botão Voltar do wizard */
.btn-voltar-wizard {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; color: var(--muted);
    font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 4px 0; margin-bottom: 14px; transition: color .15s;
    font-family: inherit;
}
.btn-voltar-wizard:hover { color: var(--text); }

/* Wrapper do botão Avançar — margem superior para separar do conteúdo */
.wizard-avancar-wrap { margin-top: 20px; }

/* Erro inline por campo */
.field-error { font-size: 12px; color: #f87171; margin-top: 4px; display: block; }

/* Card bloqueado (reservado para futura funcionalidade) */
.card-locked {
    opacity: .36; pointer-events: none; user-select: none;
    filter: grayscale(.35); transition: opacity .4s ease, filter .4s ease;
}
.card-lock-hint {
    display: none; align-items: center; gap: 8px;
    padding: 9px 13px; border-radius: 8px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    font-size: 12px; color: var(--muted); margin-bottom: 14px;
}
.card-locked .card-lock-hint { display: flex; }
.card-lock-hint i { font-size: 14px; color: #6b7280; }

/* ==========================================================================
   15. SAÚDE: PILL BUTTONS E CONTATO DE EMERGÊNCIA
   Cada pergunta de saúde usa um grupo de pills (radio estilizados).
   As cores verde/âmbar/vermelho comunicam visualmente o nível de risco.
   ========================================================================== */
.health-section { margin-bottom: 16px; }
.health-lbl {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: var(--muted); margin-bottom: 8px;
}
.health-lbl .req { color: #f87171; }

/* Grid de 3 colunas por padrão */
.health-opts   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* 2 colunas para epilepsia (apenas sim/não) */
.health-opts-2 { grid-template-columns: repeat(2, 1fr); }

.health-opt { cursor: pointer; }
.health-opt input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.health-opt-inner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px;
    border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 8px;
    background: var(--input-bg); color: var(--muted);
    font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2;
    transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
    user-select: none; height: 100%;
}
.health-opt-inner i { font-size: 18px; }
.health-opt:hover .health-opt-inner { border-color: #374151; color: var(--text); }

/* Estados ativos por nível de risco — :has() com fallback .sel para Firefox antigo */
.health-opt:has(input:checked) .health-opt-inner.health-ok,
.health-opt.sel .health-opt-inner.health-ok {
    border-color: #10b981; background: rgba(16,185,129,.12);
    color: #6ee7b7; box-shadow: 0 0 0 3px rgba(16,185,129,.1);
}
.health-opt:has(input:checked) .health-opt-inner.health-warn,
.health-opt.sel .health-opt-inner.health-warn {
    border-color: #f59e0b; background: rgba(245,158,11,.12);
    color: #fcd34d; box-shadow: 0 0 0 3px rgba(245,158,11,.08);
}
.health-opt:has(input:checked) .health-opt-inner.health-danger,
.health-opt.sel .health-opt-inner.health-danger {
    border-color: #f87171; background: rgba(248,113,113,.12);
    color: #fca5a5; box-shadow: 0 0 0 3px rgba(248,113,113,.08);
}
.health-err         { font-size: 12px; color: #f87171; margin-top: 5px; display: none; }
.health-err.visible { display: block; }

/* Box de contato de emergência — destaque sutil em roxo */
.emerg-box {
    background: rgba(var(--purple-rgb),.07); border: 1px solid rgba(var(--purple-rgb),.22);
    border-radius: 12px; padding: 16px 16px 14px; margin-top: 4px;
}
.emerg-header {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--purple); margin-bottom: 12px;
}
.emerg-header i { font-size: 14px; }
.emerg-note { font-size: 12px; color: var(--muted); margin-top: 8px; margin-bottom: 0; }

/* ==========================================================================
   16. ANIMAÇÕES E ACESSIBILIDADE
   fadeUp: entrada suave dos cards ao carregar a página.
   spin: spinner de carregamento (PIX gerando, status aguardando).
   cardUnlock: reservado para unlock sequencial de cards.
   prefers-reduced-motion: desativa animações para usuários sensíveis.
   ========================================================================== */
@keyframes fadeUp {
    from { transform: translateY(10px); }
    to   { transform: translateY(0); }
}
.form-card, .promo-banner { animation: fadeUp .35s ease forwards; }

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes cardUnlock {
    0%   { opacity: .36; filter: grayscale(.35); transform: translateY(6px); }
    60%  { opacity: 1;   filter: none;           transform: translateY(-2px); }
    100% { opacity: 1;   filter: none;           transform: translateY(0); }
}
.card-unlocking { animation: cardUnlock .45s cubic-bezier(.34,1.56,.64,1) forwards; }

/* Respeita a preferência do sistema operacional por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .form-card, .promo-banner       { animation: none; }
    .form-control, .form-select, .btn-primary-grad { transition: none; }
    #cupomGratisCol .cupom-aplicado { transition: opacity .2s; }
    #cupomGratisCol.cupom-revealed .cupom-aplicado { animation: none; opacity: 1; transform: none; }
    #cupomGratisCol .form-label     { transition: opacity .2s; }
}

/* ==========================================================================
   17. RESPONSIVIDADE MOBILE
   Breakpoints:
     - ≤ 575px : logo mais compacto
     - ≤ 480px : padding do card e wrapper reduzidos
     - ≤ 430px : iPhone Pro Max — título e subtítulo menores (viewport estreito)
     - ≤ 400px : banner, steps e label menores
     - ≥ 576px : h2 ligeiramente maior
   ========================================================================== */
/* Telas grandes: h2 um pouco mais generoso */
@media (min-width: 576px) {
    .form-card h2 { font-size: 18px; }
}

/* Logo: espaçamento reduzido em telas menores que tablet */
@media (max-width: 575px) {
    .logo-area { margin-bottom: 16px; }
}

/* Padding do card e wrapper comprimidos para aumentar área útil */
@media (max-width: 480px) {
    .form-card   { padding: 20px 16px; }
    .page-wrapper { padding: 16px 12px 88px; }
}

/* iPhone Pro Max e similares (≤ 430px): reduz H1 e subtítulo do card
   para evitar que o texto quebre em 3+ linhas e empurre o formulário */
@media (max-width: 430px) {
    .logo-area h1         { font-size: 18px; }
    .logo-area p          { font-size: 12px; }
    .form-card h2         { font-size: 15px; }
    .form-card .subtitle  { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL DE SELEÇÃO DE CATEGORIA (mora em Maceió vs turista)
   Exibido quando o usuário acessa a página sem ?categoria= no GET.
   O JS em agendar.js controla a abertura e o dismiss.
   ═══════════════════════════════════════════════════════════════ */

.cat-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Respeita Dynamic Island e notch em iPhones — o modal não fica atrás da ilha */
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)) 20px;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    opacity: 0;
    transition: opacity .25s ease;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Começa oculto; JS adiciona .cat-modal-visible para animar entrada */
}

.cat-modal-overlay.cat-modal-visible { opacity: 1; }

.cat-modal {
    background: rgba(14, 26, 45, .96);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    padding: 32px 24px 28px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
    text-align: center;
}

.cat-modal-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #f0f4ff;
    margin: 0 0 8px;
    line-height: 1.3;
}

.cat-modal-sub {
    font-size: 13px;
    color: #7a92b4;
    margin: 0 0 24px;
}

.cat-modal-opts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cat-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
    color: #e2e8f0;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    min-height: 0;
}

.cat-opt i {
    font-size: 26px;
    margin-bottom: 2px;
}

/* Visitante: violeta */
.cat-opt:first-child i { color: #a78bfa; }
.cat-opt:first-child:hover,
.cat-opt:first-child:focus-visible {
    background: rgba(167, 139, 250, .12);
    border-color: rgba(167, 139, 250, .4);
    transform: translateY(-2px);
    outline: none;
}

/* Avulso (meio): laranja/amber */
.cat-opt:nth-child(2) i { color: #fbbf24; }
.cat-opt:nth-child(2):hover,
.cat-opt:nth-child(2):focus-visible {
    background: rgba(251, 191, 36, .12);
    border-color: rgba(251, 191, 36, .4);
    transform: translateY(-2px);
    outline: none;
}

/* Turista: azul claro */
.cat-opt:last-child i { color: #60a5fa; }
.cat-opt:last-child:hover,
.cat-opt:last-child:focus-visible {
    background: rgba(96, 165, 250, .12);
    border-color: rgba(96, 165, 250, .4);
    transform: translateY(-2px);
    outline: none;
}

.cat-opt-t {
    font-size: 15px;
    font-weight: 700;
    display: block;
}

.cat-opt-s {
    font-size: 12px;
    color: #7a92b4;
    display: block;
    font-weight: 400;
}

@media (min-width: 460px) {
    .cat-modal         { max-width: 780px; padding: 40px 36px 32px; }
    .cat-modal-opts    { flex-direction: row; align-items: stretch; gap: 16px; }
    .cat-opt           { flex: 1; min-width: 0; padding: 24px 20px; }
}

@media (max-width: 400px) {
    .cat-modal { padding: 24px 16px 20px; }
    .cat-modal-titulo { font-size: 16px; }
}

/* iPhone Pro Max e similares: pagto-cards e autocomplete mais compactos */
@media (max-width: 430px) {
    .pagto-card         { padding: 12px 12px; gap: 10px; }
    .pagto-card-label   { font-size: 13px; }
    .pagto-card-desc    { font-size: 12px; }
    .pagto-radio-indicator { width: 16px; height: 16px; }
    .pmt-alt-box        { padding: 20px 16px; }
    .ac-list            { max-height: 220px; }
    .ac-list li         { padding: 11px 12px; font-size: 13px; }
}

/* Telas muito estreitas: banner e step dots menores */
@media (max-width: 400px) {
    .promo-banner          { padding: 16px; gap: 12px; }
    .promo-banner .promo-icon  { font-size: 22px; }
    .promo-banner .promo-title { font-size: 14px; }
    .promo-banner .promo-desc  { font-size: 12px; }
    .promo-banner .new-price   { font-size: 18px; }
    .step-label { font-size: 12px; }
    .step-dot   { width: 26px; height: 26px; font-size: 12px; }
    .pagto-card         { padding: 10px 10px; gap: 8px; }
    .pagto-card-label   { font-size: 12px; }
}