/* ===================================================================
   RÉGUA DE STEPS DO CHECKOUT  (SP20-043 / SP20-044)
   -------------------------------------------------------------------
   Complementa as regras base de .checkout-steps/.step/.step-icon/
   .step-label que vivem em light.css e dark.css. Este arquivo é
   carregado DEPOIS do tema, para poder sobrepô-lo quando necessário.

   SP20-043: steps já percorridos são links (<a class="step__link">) e
   precisam de cursor, foco visível e hover — sem herdar o sublinhado e a
   cor de link padrão.
   SP20-044: os traços entre os steps não existiam em nenhum tema; são
   desenhados aqui com ::after, e escondidos quando a régua quebra em
   várias linhas no mobile (um traço cruzando linhas fica errado).
   =================================================================== */

/* O <a>/<span> interno assume o empilhamento ícone + rótulo que antes era
   feito pelos divs soltos. */
.checkout-steps .step__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: inherit;
}

.checkout-steps .step__link:hover,
.checkout-steps .step__link:focus {
    text-decoration: none;
    color: inherit;
}

/* Step atual/futuro: sem afordância de clique. */
.checkout-steps .step__link--static {
    cursor: default;
}

/* ---------- SP20-043: step já percorrido é navegável ---------- */
.checkout-steps .step--clickable .step__link {
    cursor: pointer;
    border-radius: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.checkout-steps .step--clickable .step__link:hover .step-icon {
    transform: scale(1.08);
}

.checkout-steps .step--clickable .step__link:hover .step-label {
    text-decoration: underline;
}

/* Foco por teclado visível — os steps agora são alcançáveis via Tab. */
.checkout-steps .step--clickable .step__link:focus-visible {
    outline: 2px solid #0b93f2;
    outline-offset: 2px;
}

.checkout-steps .step-icon {
    transition: transform 0.2s ease;
}

/* ---------- SP20-044: traços entre os steps ---------- */
.checkout-steps .step {
    position: relative;
}

.checkout-steps .step:not(:last-child)::after {
    content: "";
    position: absolute;
    /* alinha na altura do centro do ícone (40px de altura) */
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    /* começa depois do ícone e termina antes do próximo */
    margin-left: 24px;
    background-color: #ccc;
    z-index: 0;
}

/* O traço até o step alcançado acompanha a cor de "concluído". */
.checkout-steps .step.completed:not(:last-child)::after {
    background-color: #0b93f2;
}

/* O ícone fica acima do traço. */
.checkout-steps .step-icon,
.checkout-steps .step-label {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    /* A régua vira uma linha só com rolagem horizontal (styleResponsiveBase).
       Os traços continuam válidos — o que muda é a margem, porque o ícone é
       menor no celular (32px em vez de 40px). */
    .checkout-steps .step:not(:last-child)::after {
        top: 16px;
        margin-left: 20px;
    }
}

/* ===================================================================
   Caixa da régua: mesma medida e mesmo respiro em TODAS as telas
   -------------------------------------------------------------------
   O fragmento é único, mas o contexto em volta dele não era, e a régua
   saía diferente de tela para tela:

   - em cartAddress e cartDelivery a régua está dentro de um <form>
     extra (main.all-cart-content > form > .checkout-steps), enquanto em
     cartPayment o próprio <form> é o container (form.all-cart-content).
     Esse nível a mais mudava o espaço até o header;
   - em cartReview a régua saía mais estreita que os 900px das outras,
     por encolher como item de um pai flex.

   As duas coisas se resolvem fixando a caixa aqui: esta folha é
   carregada DEPOIS do tema e do CSS da página, então é o último a falar.
   `flex: none` impede o encolhimento quando o pai é flex; `width: 100%`
   com `max-width` garante os mesmos 900px em qualquer container.

   A medida de referência é a de cartPayment, a menor das telas.
   Para mudar o respiro de todas, mexa só no `margin` abaixo.
   =================================================================== */
.checkout-steps {
    width: 100%;
    max-width: 900px;
    margin: 30px auto;
    flex: none;
}

/* -------------------------------------------------------------------
   O respiro do topo tem de ser SEMPRE os 30px acima, e não às vezes
   150px.
   -------------------------------------------------------------------
   A régua é o primeiro filho do container em todas as telas, e a margem
   de topo do primeiro filho COLAPSA com a do pai quando o pai não
   estabelece contexto de formatação próprio. Se ela colapsa, sobe e vira
   espaço acima do container; se não colapsa, fica dentro. Quem decide
   isso hoje é o acaso da estrutura de cada tela:

   - cartPayment: o próprio <form> é o container, a margem colapsa e sai
     o respiro curto (é a tela de referência);
   - cartAddress/cartDelivery: existe um <form> a mais entre o container
     e a régua;
   - orderSuccess: `main { flex: 1 }` faz do main um flex item, e flex
     item não colapsa margem com os filhos.

   `flow-root` dá a todos os containers o mesmo contexto de formatação:
   a margem nunca mais escapa, e as 7 telas passam a medir igual.
   ------------------------------------------------------------------- */
.all-cart-content,
.all-cart-content-page,
.all-cart-content > form:first-child {
    display: flow-root;
}