/* ========================================
   BENETRIP VAI E VEM v1.0
   Complementa voos-baratos.css (variáveis e
   componentes base vêm de lá).
   ======================================== */

/* ---------- HERO: avatar circular da Tripinha ---------- */
.hero-avatar-circle {
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 3px solid rgba(255, 255, 255, 0.9);
    background: #FFF6EC;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.hero-avatar-circle img {
    /* zoom no rosto sorridente da ilustração 1024x1024 */
    position: absolute;
    width: 190%;
    height: auto;
    left: -44%;
    top: -10%;
}

/* ---------- HERO: chips de personas ---------- */
.hero-personas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.persona-chip {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

/* ---------- FORM: chips de dias da semana ---------- */
.dias-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dia-chip {
    flex: 1;
    min-width: 40px;
    padding: 10px 4px;
    border: 2px solid var(--gray-border);
    border-radius: var(--radius-xs);
    background: var(--white);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
}

.dia-chip:hover {
    border-color: var(--orange);
    background: var(--orange-light);
}

.dia-chip.active {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--white);
}

.dias-hint {
    font-size: 13px;
    color: #666;
    background: var(--blue-light);
    border-radius: var(--radius-xs);
    padding: 10px 14px;
    margin: -6px 0 18px;
    line-height: 1.5;
}

/* ---------- FORM: chips de meses ---------- */
.meses-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mes-chip {
    /* flex-basis auto + min-width auto: o chip nunca encolhe abaixo do
       próprio texto. Com min-width fixo e white-space: nowrap o rótulo
       vazava para fora do card no mobile em vez de quebrar a linha. */
    flex: 1 1 auto;
    padding: 12px 10px;
    border: 2px solid var(--gray-border);
    border-radius: var(--radius-xs);
    background: var(--white);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    /* <button> não herda tipografia do body por padrão */
    font-family: inherit;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.mes-chip:hover {
    border-color: var(--blue);
    background: var(--blue-light);
}

.mes-chip.active {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
}

/* ---------- FORM: foco de teclado nos chips ---------- */
.dia-chip:focus-visible,
.mes-chip:focus-visible,
.currency-chip:focus-visible {
    outline: 3px solid var(--orange-dark);
    outline-offset: 2px;
}

/* ---------- RESULTADOS: badges de classificação ---------- */
.badge-classe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-barato {
    background: var(--green-light);
    color: var(--green-dark);
}

.badge-barato::before {
    content: '●';
    color: var(--green);
}

.badge-normal {
    background: var(--blue-light);
    color: var(--blue-dark);
}

.badge-normal::before {
    content: '●';
    color: var(--blue);
}

.badge-caro {
    background: #FDEDEB;
    color: var(--red);
}

.badge-caro::before {
    content: '●';
    color: var(--red);
}

/* ---------- Legenda ---------- */
.legenda-classes {
    /* Coluna: a frase de abertura tem comprimento variável e, disputando a
       mesma linha dos badges via space-between, produzia buracos aleatórios. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-xs);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #555;
}

.legenda-titulo {
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}

.legenda-titulo strong {
    color: var(--gray-dark);
}

.legenda-itens {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Tripinha: escolha ---------- */
.tripinha-escolha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--white);
    border-radius: var(--radius-xs);
    border: 1px dashed var(--orange);
}

.escolha-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.escolha-dates {
    font-size: 14px;
    font-weight: 600;
}

.escolha-preco {
    font-size: 15px;
    font-weight: 700;
    color: var(--green-dark);
}

.escolha-motivo {
    flex-basis: 100%;
    font-size: 13px;
    color: #666;
    font-style: italic;
}

.escolha-link {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}

.escolha-link:hover {
    text-decoration: underline;
}

/* ---------- Tag de feriado no winner card ---------- */
.feriado-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 4px;
}

/* ---------- Lista de semanas ---------- */
.semanas-section {
    margin-bottom: 28px;
}

.semanas-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.semanas-hint {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
}

.semanas-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.semana-card {
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-left: 5px solid var(--gray-border);
    border-radius: var(--radius-xs);
    padding: 14px 16px;
    transition: var(--transition);
}

.semana-card.classe-barato {
    border-left-color: var(--green);
}

.semana-card.classe-normal {
    border-left-color: var(--blue);
}

.semana-card.classe-caro {
    border-left-color: var(--red);
}

.semana-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 10px;
}

.semana-label {
    font-size: 15px;
    font-weight: 700;
}

.semana-feriado {
    font-size: 12px;
    font-weight: 600;
    color: var(--orange-dark);
    background: var(--orange-light);
    padding: 3px 10px;
    border-radius: 999px;
}

.semana-desde {
    margin-left: auto;
    font-size: 13px;
    color: #666;
}

.semana-desde strong {
    color: var(--green-dark);
    font-size: 15px;
}

.semana-opcoes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opcao-row {
    /* Grid com áreas nomeadas: em flex-wrap a ordem visual mudava de linha
       para linha conforme o tamanho da badge e do preço. */
    display: grid;
    /* largura mínima no preço para as badges terminarem na mesma coluna,
       já que cada linha é um grid independente */
    grid-template-columns: 1fr auto minmax(84px, auto) auto;
    grid-template-areas: "info badge preco link";
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: var(--radius-xs);
    background: var(--gray-light, #F5F7FA);
    transition: var(--transition);
}

.opcao-row:hover {
    background: var(--blue-light);
}

.opcao-row.opcao-melhor {
    outline: 2px solid var(--green);
    outline-offset: -2px;
}

.opcao-info {
    grid-area: info;
    min-width: 0;
}

.opcao-row .badge-classe {
    grid-area: badge;
    justify-self: start;
}

.opcao-dates {
    font-size: 14px;
    font-weight: 600;
}

.opcao-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.opcao-preco {
    grid-area: preco;
    justify-self: end;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.opcao-link {
    grid-area: link;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    flex-shrink: 0;
    transition: var(--transition);
}

.opcao-link:hover {
    background: var(--blue-dark);
    transform: scale(1.08);
}

.opcao-link svg {
    width: 16px;
    height: 16px;
}

/* ---------- CTA sempre alcançável no mobile ----------
   A partir de 768px o form-row vira uma coluna só e o formulário fica mais
   alto que a tela: o botão sobrava embaixo, fora da vista. Sticky mantém ele
   na base enquanto o formulário está em cena e devolve ao lugar natural no
   fim da rolagem — sem overlay fixo, que continuaria aparecendo por cima dos
   resultados. O z-index fica abaixo do dropdown do autocomplete (100). */
@media (max-width: 768px) {
    .form-section .btn-submit {
        position: sticky;
        bottom: 12px;
        z-index: 20;
        box-shadow: 0 6px 20px rgba(232, 119, 34, 0.45);
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
    .dia-chip {
        min-width: 36px;
        padding: 9px 2px;
        font-size: 12px;
    }

    .semana-desde {
        margin-left: 0;
        flex-basis: 100%;
    }

    /* base de 30% = 3 chips por linha, com as duas últimas dividindo a
       segunda linha em vez de sobrar uma sozinha ocupando a largura toda */
    .mes-chip {
        flex-basis: 30%;
        padding: 11px 8px;
        font-size: 12px;
    }

    /* Datas ocupam a linha inteira; badge, preço e link dividem a de baixo
       sempre nas mesmas posições. */
    .opcao-row {
        grid-template-columns: 1fr minmax(84px, auto) auto;
        grid-template-areas:
            "info  info  info"
            "badge preco link";
        gap: 8px 10px;
    }
}

/* Referência da classificação e avisos de viabilidade */
.legenda-contexto {
    /* o espaçamento vem do gap da .legenda-classes */
    display: block;
    font-size: 11px;
    color: #777;
    line-height: 1.45;
}

.opcao-aviso {
    font-size: 11px;
    line-height: 1.4;
    color: #7a3c0d;
    background: rgba(232, 119, 34, 0.1);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 4px;
}