/*
 * Bewaartas – "niet meer beschikbaar" state (Onderdeel B)
 *
 * Losse stylesheet, bewust buiten de SCSS-pipeline (assets/styles) gehouden
 * zodat een toekomstige gulp-build van style.css deze niet overschrijft.
 * Gekoppeld via wp_enqueue_style('bewaartas-unavailable', ...) in functions.php.
 *
 * De class .bewaartas-unavailable wordt door de inline JS (zie functions.php,
 * aero_bewaartas_init_script) op de betreffende .gchoice gezet.
 */

.bewaartas-unavailable {
    position: relative;
}

.bewaartas-unavailable img,
.bewaartas-unavailable label {
    opacity: 0.4;
}

.bewaartas-unavailable input,
.bewaartas-unavailable label {
    pointer-events: none;
    cursor: default;
}

.bewaartas-unavailable__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 0.35em 0.75em;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.35rem;
    pointer-events: none;
}

/*
 * Uitverkocht-melding: vervangt het bewaartas-formulier zodra alle tasjes
 * niet meer beschikbaar zijn (zie aero_bewaartas_uitverkocht_melding in functions.php).
 */
.bewaartas-melding {
    text-align: center;
    padding: 1.5rem 0;
}

.bewaartas-melding__tekst {
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

.bewaartas-melding .cta {
    display: inline-block;
}

/*
 * Stappen-indicator (Stap 1 t/m 5) op het nieuwsbrief- en bewaartas-formulier.
 * De HTML (<ol class="bewaartas-steps">) staat in HTML-velden bovenaan elke stap.
 */
.bewaartas-progress {
    margin: 0 0 2rem;
}

.bewaartas-progress__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #111;
}

.bewaartas-steps {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    overflow: hidden;
    background: #ddd;
}

/* Eén aaneensluitende balk: elke stap is een gelijk deel van de lijn.
   Afgeronde/huidige stappen zijn gevuld, de rest blijft grijs. */
.bewaartas-steps li {
    flex: 1 1 0;
    height: 10px;
    background: #ddd;
    font-size: 0;
}

.bewaartas-steps li.is-done,
.bewaartas-steps li.is-active {
    background: #212c56;
}

/* Nummers en labels niet tonen — alleen de doorlopende lijn */
.bewaartas-steps__num,
.bewaartas-steps__label {
    display: none;
}