/* ===================================================================
   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;
    }
}