/* Adding styles for the 5 Passos Section */

/* --- FAIXA DE INSTRUÇÃO --- */
/* O configurador só é auto-explicativo para quem já percebeu que as fotos são
   clicáveis. Esta faixa diz em uma linha o que fazer no passo aberto, e o texto
   troca junto com a aba (handler 5). Fica *acima* das abas de propósito: a
   primeira coisa depois do título tem que ser a instrução, não mais uma fileira
   de controles. */
.step-hint {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 640px;
    margin: 0 auto var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    /* Mesma dupla dos cards: fundo tonalizado numa seção branca. */
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.step-hint-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

/* `i` e `svg`: o lucide troca o <i> por um <svg> na carga, e uma regra escrita
   só para um dos dois para de valer. */
.step-hint-icon i,
.step-hint-icon svg {
    width: 26px;
    height: 26px;
}

.step-hint-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.step-hint-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
}

.step-hint-desc {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

@media (max-width: 599px) {
    .step-hint {
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .step-hint-icon {
        width: 42px;
        height: 42px;
    }

    .step-hint-icon i,
    .step-hint-icon svg {
        width: 22px;
        height: 22px;
    }

    .step-hint-title {
        font-size: 1rem;
    }

    .step-hint-desc {
        font-size: 0.875rem;
    }
}

/* --- STEP TABS --- */
.step-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.step-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.step-tab:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.step-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

.step-tab-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    color: var(--color-bg);
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}

.step-tab.active .step-tab-number {
    background: var(--color-bg);
    color: var(--color-primary);
}

/* Visto na aba do passo que já tem escolha feita. Sem ele, quem volta para o
   passo 1 no meio do caminho perde a conta de onde parou — a barra de abas é o
   único lugar da seção que mostra o progresso. */
.step-tab-done {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.step-tab.done .step-tab-done {
    display: block;
}

.step-tab.done:not(.active) {
    border-color: var(--color-text);
    color: var(--color-text);
}

/* --- STEP PANELS --- */
.step-panel {
    display: none;
}

.step-panel.active {
    display: block;
}

/* Fileira única que anda sozinha, no lugar da grade de 12–14 cards que a seção
   tinha antes (referência mandada pelo cliente: Cris Bonés / Seu Boné). A grade
   empilhava ~4 fileiras por passo e transformava a seção no trecho mais alto da
   página; a faixa mostra os mesmos itens numa altura fixa e usa a imagem grande
   como convite para arrastar.

   O movimento é `scrollLeft` real (ver handler 11 do main.js), não uma marquee de
   `translateX` com os cards duplicados. Duplicar quebraria três coisas de uma vez
   aqui: os cards são `role="radio"` com tabindex móvel, estão ligados aos <select>
   do formulário por referência direta ao elemento, e um clone leria de novo no
   leitor de tela. Rolagem nativa mantém cada card único e ainda dá arrasto por
   toque de graça. */
/* Wrapper criado pelo JS (handler 11) só para ancorar as setas: elas são
   `position: absolute` sobre as bordas da faixa, e a faixa em si precisa
   continuar sendo o elemento que rola. */
.option-carousel {
    position: relative;
}

/* Setas de rolagem. Passar o mouse rola continuamente naquela direção; o clique
   avança uma tela, que é o que sobra para toque e teclado — nenhum dos dois tem
   hover. O JS esconde a seta ao chegar no fim da faixa e quando tudo já cabe na
   tela, então uma seta visível é sempre uma seta que faz alguma coisa. */
.option-arrow {
    position: absolute;
    top: calc(50% - var(--space-1));
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.option-arrow[hidden] {
    display: none;
}

.option-arrow svg {
    width: 22px;
    height: 22px;
}

.option-arrow:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-text-muted);
}

.option-arrow:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Metade para fora da faixa: assim a seta não cobre a foto do card, e o vão do
   .container em volta dá espaço para ela. */
.option-arrow-prev {
    left: -22px;
}

.option-arrow-next {
    right: -22px;
}

.option-track {
    display: flex;
    /* --space-3 e não --space-4: cada 8px tirados do vão voltam como largura
       para os cards, que é o que a seção precisa. */
    gap: var(--space-3);
    overflow-x: auto;
    /* Espaço para o translateY(-2px) do :hover e para o anel de foco não serem
       cortados pelo overflow. */
    padding: var(--space-1) 2px var(--space-3);
    scrollbar-width: none;
}

.option-track::-webkit-scrollbar {
    display: none;
}

/* Largura do card: fração exata da faixa, com teto.

   A parte da fração é o que faz o último card visível terminar rente à borda em
   vez de aparecer pela metade — subtrai os vãos antes de dividir pela
   quantidade. `flex-grow: 0` continua importando: sem ele os cards esticariam
   para ocupar a sobra e a faixa pararia de rolar.

   O teto de 340px é o que impede os saltos feios entre breakpoints. Só com a
   fração, passar de 4 para 3 cards em 1199px pularia de 265px para 361px de
   largura — o card triplicava de área de repente. Com o teto ele para em 340px
   e o que sobra vira uma fresta do próximo card, que é justamente o sinal de
   "tem mais coisa para o lado". É também o que garante que nunca fique gigante
   numa tela larga.

   Medidas no desktop cheio: card de 325px com foto de 277×208 e proporção
   1,07 (quase quadrado). O container desta seção é mais largo que o resto do
   site justamente para isso — ver `.models .container` no fim do arquivo. */
.option-track > .option-card {
    flex: 0 0 min(340px, calc((100% - 3 * var(--space-3)) / 4));
}

/* 3 por tela: abaixo disso um quarto da faixa deixa a foto do boné pequena
   demais para diferenciar uma modelagem da outra. */
@media (max-width: 1199px) {
    .option-track > .option-card {
        flex-basis: min(340px, calc((100% - 2 * var(--space-3)) / 3));
    }
}

/* 2 por tela em tablets. */
@media (max-width: 899px) {
    .option-track > .option-card {
        flex-basis: min(340px, calc((100% - var(--space-3)) / 2));
    }
}

/* Sem scroll-snap durante a rolagem por hover: o snap age quando a rolagem
   "assenta", e o handler 11 escreve `scrollLeft` a cada frame enquanto o mouse
   está sobre a seta — o navegador ficaria corrigindo a posição no meio do
   movimento, dando tranco. Para quem pediu menos movimento não existe rolagem
   contínua (a seta salta uma tela de uma vez), e aí o snap ajuda a parar num
   card inteiro em vez de no meio de um. */
@media (prefers-reduced-motion: reduce) {
    .option-track {
        scroll-snap-type: x proximity;
    }

    .option-track > .option-card {
        scroll-snap-align: start;
    }
}

/* Fundo tonalizado e borda visível, iguais aos `.benefit-card`: o card era branco
   com borda transparente dentro de uma seção branca, e as fotos de produto também
   têm fundo claro — não sobrava nada delimitando cada opção. */
.option-card {
    position: relative;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    cursor: pointer;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.option-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-text-muted);
}

.option-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.option-card.selected {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.option-check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
    z-index: 2;
}

.option-check-icon {
    width: 16px;
    height: 16px;
}

.option-card.selected .option-check {
    opacity: 1;
    transform: scale(1);
}

.option-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.option-image img,
.option-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.option-name {
    font-size: 1rem;
    font-weight: 700;
}

.option-composition {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.option-desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Rótulo de ação no pé do card (injetado pelo handler 12). O card inteiro já é
   o alvo do clique desde sempre, mas nada dizia isso: foto + nome parecem
   catálogo, não um controle. O pé resolve as duas metades de uma vez — antes
   diz o que o clique faz, depois confirma que a escolha entrou.
   Não é <button> e leva aria-hidden: o card é o role="radio", e um botão de
   verdade aqui dentro viraria um segundo controle aninhado no primeiro.
   O estado é feito por CSS a partir do .selected que o handler 7 já aplica —
   os dois textos ficam no DOM e a classe escolhe qual aparece, então nenhum
   clique precisa remontar ícone nenhum. */
.option-cta {
    /* Empurra o pé para baixo: os cards da faixa esticam para a mesma altura, e
       sem isto o rótulo flutuaria logo abaixo de nomes de tamanhos diferentes. */
    margin-top: auto;
    display: flex;
    padding: 0.625rem var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.option-cta-idle,
.option-cta-done {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
}

.option-cta-done {
    display: none;
    justify-content: center;
}

.option-cta i,
.option-cta svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* A seta vai para a borda direita; é ela que dá o ar de "isso leva a algo". */
.option-cta-arrow {
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.option-card:hover .option-cta {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.option-card:hover .option-cta-arrow {
    transform: translateX(2px);
}

.option-card.selected .option-cta-idle {
    display: none;
}

.option-card.selected .option-cta-done {
    display: flex;
}

/* Preenchido, não só marcado: a confirmação precisa ser o ponto mais escuro do
   card para ser achada de relance numa fileira de doze. */
.option-card.selected .option-cta {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .step-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: var(--space-2);
    }

    .step-tab {
        flex-shrink: 0;
    }

    .option-track {
        gap: var(--space-2);
    }

    /* Quadrado no lugar do 4/3: numa tela estreita o card é a foto, e a altura
       extra é o que ainda deixa a modelagem reconhecível.

       O preço disso é que o `cover` passa a mostrar só o quadrado central da
       foto — 600 dos 800px das fotos de modelagem, fora 100px de cada lado. Até
       2026-08-12 isso decepava a aba das modelagens largas (bucket, cap hat,
       visera, 3 panel, country perdiam ~40px por ponta) enquanto as estreitas
       passavam ilesas, que era o motivo de só ALGUMAS fotos parecerem cortadas.
       Quem consertou foi a arte, não esta regra: o normaliza_bones.py passou a
       encaixar o boné em 74% da largura, dentro do quadrado que sobrevive ao
       corte. Mexer neste aspect-ratio invalida aquele número — os dois descrevem
       o mesmo recorte de pontas opostas.

       Vale só para modelagem. Os outros quatro passos são macros de tecido e
       detalhe que sangram até a borda de propósito, e ali cortar não tira
       informação nenhuma. */
    .option-image {
        aspect-ratio: 1 / 1;
    }

    .option-card {
        padding: var(--space-2);
        gap: var(--space-2);
    }

    .option-name {
        font-size: 0.875rem;
    }

    .option-cta {
        padding: 0.5rem var(--space-1);
        font-size: 0.8125rem;
    }
}

/* Celular: aqui a largura deixa de ser fração e vira vw, de propósito. A fração
   faria o card ocupar quase a tela inteira e a faixa perderia o sinal de que
   rola — a fresta do próximo card é o que convida a arrastar, e no toque não há
   hover para as setas ajudarem. */
@media (max-width: 599px) {
    .option-track > .option-card {
        flex-basis: min(72vw, 270px);
    }

    /* As setas ficariam por cima das fotos numa faixa dessa largura; no toque o
       arrasto já resolve a navegação. */
    .option-arrow {
        display: none;
    }
}

/* Esta regra era o que fazia a seção ser mais larga que os 1200px do resto do
   site — é o que permite 4 cards de 325px em vez de 4 de 265px; no container
   antigo a faixa só cabia 4 cards pequenos ou 3 grandes, nunca os dois.

   Desde 2026-08-12 o `.container` global também é 1440, então ela deixou de
   alargar coisa alguma. Fica de propósito, agora como trava: a matemática do
   carrossel (fração da faixa, gap, teto de 340px) foi calibrada nesses 1440
   exatos, e o dia em que alguém mexer no container global esta linha impede
   que os cards mudem de tamanho junto, sem ninguém perceber. */
.models .container {
    max-width: 1440px;
}

/* --- FECHO DA SEÇÃO --- */
/* Catálogo e orçamento juntos no fim dos 5 Passos: o link do catálogo ficava
   no topo, competindo com o próprio configurador logo abaixo. Aqui ele pega
   quem já rolou as opções e quer ver tudo de uma vez.
   Empilhados e centralizados a pedido do cliente (2026-08-12): lado a lado, o
   link do catálogo tinha a mesma presença horizontal do CTA de orçamento e os
   dois disputavam o mesmo eixo de leitura. Em coluna, o orçamento vem primeiro
   e o catálogo fica claramente como segunda opção. */
.steps-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

@media (max-width: 480px) {
    .steps-actions {
        align-items: stretch;
    }

    /* A faixa de abas já rola desde 768px, mas em 360px o passo 1 sozinho comia
       a tela inteira e do passo 2 aparecia um fio — quem não arrasta não
       descobre que existem cinco passos. Encolhendo o recuo e o corpo cabe a
       aba 2 inteira mais uma fresta da 3, que é o mesmo sinal de "tem mais para
       o lado" usado nos cards do carrossel. */
    .step-tab {
        padding: var(--space-2) var(--space-3);
        font-size: 0.9375rem;
    }
}