body {
    background: #f4f6f8;
}

/* progress‑tracker */
.stepper {
    width: 100%;
    max-width: 420px;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 8px;
}

.step-confirm {
    background: #fff;
    border: 2px solid #28a745;
    color: #28a745;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.step {
    background: #fff;
    border: 2px solid #c0c0c0;
    color: #c0c0c0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.step-label {
    font-size: .7rem;
    margin-top: 6px;
    text-align: center;
    width: 80px;
}

/* barra com progresso - você pode sobrescrever via JS */
.stepper.completed::before {
    background: #28a745;
    /* verde */
}

/* passo concluído */
.step-complete {
    border-color: #28a745;
    color: #28a745;
}

/* passo atual */
.step-active {
    border-color: #007bff;
    color: #007bff;
    font-weight: bold;
}

/* card de sucesso */
.check-circle {
    background: #28a745;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
}

/* linha cinza de fundo  (sempre 100 %) */
.stepper::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 10%;
    right: 0;
    height: 2px;
    background: #c0c0c0;
    width: 80%;
    z-index: 0;
}

/* linha verde que “cresce” */
.f {
    position: absolute;
    top: 18px;
    left: 10px;
    height: 2px;
    background: #28a745;
    width: 0%;
    /* começa em 0 % */
    transition: width .4s ease;
    /* animação suave */
    z-index: 0;
    /* fica atrás dos círculos */
}

.progress-line {
    position: absolute;
    top: 18px;
    left: 10%;
    height: 2px;
    background: #28a745;
    width: 0%;
    /* começa em 0 % */
    transition: width .4s ease;
    /* animação suave */
    z-index: 0;
    /* fica atrás dos círculos */
}

/* círculos (mantém o z‑index maior para aparecer sobre a linha) */
.step {
    /* futuro */
    background: #fff;
    border: 2px solid #c0c0c0;
    color: #c0c0c0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 1;
}

.step-complete {
    /* concluído */
    border-color: #28a745;
    color: #28a745;
}

.step-active {
    /* atual */
    border-color: #007bff;
    color: #007bff;
    font-weight: bold;
}

/* 1. Contêiner vertical para cada passo */
.step-item {
    flex: 1;
    /* cada item ocupa o mesmo espaço */
    display: flex;
    flex-direction: column;
    /* bolinha em cima, texto embaixo */
    align-items: center;
    /* alinha ambos ao centro do eixo X */
}

/* 2. Rótulo agora herda a largura do próprio item,
      então não precisa travar em 80 px – ele fica centralizado sozinho */
.step-label {
    font-size: .7rem;
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
    /* evita quebrar em duas linhas, se quiser */
}

/* 3. A linha de fundo passa bem no meio da bolinha: */