/* ===================================================================
 * Indicateur d'étapes Gravity Forms — [attps_uni_gform_steps]
 *
 * Tout est pilotable par variables : surcharger `--atb-gfsteps-*` sur le
 * conteneur (ou plus haut) suffit à retailler / recolorer l'ensemble.
 * ================================================================ */

.atb-gfsteps {
    --atb-gfsteps-size: 2.25rem;
    --atb-gfsteps-active: var(--atb-primary, #0099dd);
    /* Étape validée en cours de parcours : même bleu que l'étape active. */
    --atb-gfsteps-done: var(--atb-gfsteps-active);
    /* Parcours terminé (confirmation) : tous les dots passent au vert. */
    --atb-gfsteps-success: #4a9d3f;
    /* Étape portant une erreur de validation. */
    --atb-gfsteps-wrong: var(--atb-danger, #f04957);
    --atb-gfsteps-surface: var(--atb-light, #ffffff);
    --atb-gfsteps-pending-bg: color-mix(in srgb, var(--atb-gfsteps-active) 10%, var(--atb-gfsteps-surface));
    --atb-gfsteps-pending-color: color-mix(in srgb, var(--atb-gfsteps-active) 55%, var(--atb-gfsteps-surface));
    --atb-gfsteps-line: color-mix(in srgb, var(--atb-gfsteps-active) 22%, var(--atb-gfsteps-surface));
    --atb-gfsteps-connector: 2.5rem;
    --atb-gfsteps-gap: 0.5rem;
    --atb-gfsteps-max-width: 30rem;

    max-width: var(--atb-gfsteps-max-width);
}

/* Parcours terminé : `state="success"`, ou confirmation atteinte en `ongoing`. */
.atb-gfsteps.is-complete {
    --atb-gfsteps-done: var(--atb-gfsteps-success);
}

.atb-gfsteps__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.atb-gfsteps__list>li::before,
.atb-gfsteps__list>li::marker {
    content: none;
}

.atb-gfsteps__step {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Connecteur : occupe l'espace restant entre deux dots. */
.atb-gfsteps__step+.atb-gfsteps__step {
    flex: 1 1 var(--atb-gfsteps-connector);
}

.atb-gfsteps__step+.atb-gfsteps__step::before {
    content: "";
    flex: 1 1 auto;
    min-width: 1rem;
    margin: 0 var(--atb-gfsteps-gap);
    border-top: 2px solid var(--atb-gfsteps-line);
}

.atb-gfsteps__dot {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--atb-gfsteps-size);
    height: var(--atb-gfsteps-size);
    border-radius: 50%;
    font-family: var(--atb-font-body, inherit);
    font-size: calc(var(--atb-gfsteps-size) * 0.4);
    font-weight: 700;
    line-height: 1;
    background: var(--atb-gfsteps-pending-bg);
    color: var(--atb-gfsteps-pending-color);
    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}

.atb-gfsteps__check {
    display: none;
    width: 55%;
    height: 55%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- États ------------------------------------------------------- */

.atb-gfsteps__step.is-active .atb-gfsteps__dot {
    background: var(--atb-gfsteps-active);
    color: var(--atb-light, #ffffff);
}

.atb-gfsteps__step.is-done .atb-gfsteps__dot {
    background: var(--atb-gfsteps-done);
    color: var(--atb-light, #ffffff);
}

.atb-gfsteps__step.is-done .atb-gfsteps__num {
    display: none;
}

.atb-gfsteps__step.is-done .atb-gfsteps__check {
    display: block;
}

/* L'erreur prime sur les autres états : dot rouge, numéro conservé. */
.atb-gfsteps__step.is-wrong .atb-gfsteps__dot {
    background: var(--atb-gfsteps-wrong);
    color: var(--atb-light, #ffffff);
}

.atb-gfsteps__step.is-wrong .atb-gfsteps__num {
    display: block;
}

.atb-gfsteps__step.is-wrong .atb-gfsteps__check {
    display: none;
}

/* --- Accessibilité ----------------------------------------------- */

.atb-gfsteps__sr--error {
    display: none;
}

.atb-gfsteps__step.is-wrong .atb-gfsteps__sr--error {
    display: inline;
}

.atb-gfsteps__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .atb-gfsteps__dot {
        transition: none;
    }
}