/* =========================================================
   Progress Nav (Bootstrap-ish class API)
========================================================= */

.prog-nav {
    --prog-track-h: 14px;
    --prog-dot-size: 14px;
    --prog-track-bg: #eaf3fb; /* base track */
    --prog-fill-done: #78b3e6; /* dark = completed */
    --prog-fill-active: #b9dbf6; /* light = current segment */

    --prog-dot-border: #78b3e6;
    --prog-text-muted: #c7ced6;
    --prog-text-active: #1c2a39;
    --prog-track-top: 12px;
    --prog-complete-px: 0px;
    --prog-active-px: 0px;
    --prog-track-inset: 10px;
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 20px auto;
    padding: 0 var(--prog-track-inset);
    box-sizing: border-box;
}

    /* Track background (bottom layer) */
    .prog-nav::before {
        content: "";
        position: absolute;
        left: var(--prog-track-inset);
        right: var(--prog-track-inset);
        top: var(--prog-track-top);
        height: var(--prog-track-h);
        border-radius: 999px;
        background: var(--prog-track-bg);
        pointer-events: none;
        z-index: 0;
    }

    /* Overlay fill (middle layer) */
    .prog-nav::after {
        content: "";
        position: absolute;
        left: var(--prog-track-inset);
        right: var(--prog-track-inset);
        top: var(--prog-track-top);
        height: var(--prog-track-h);
        border-radius: 999px;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient( to right, var(--prog-fill-done) 0px, var(--prog-fill-done) var(--prog-complete-px), var(--prog-fill-active) var(--prog-complete-px), var(--prog-fill-active) var(--prog-active-px), transparent var(--prog-active-px), transparent 100% );
    }

.prog-nav-list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.prog-nav-tab {
    flex: 1 1 0;
    text-align: center;
}

.prog-nav-btn {
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    padding-top: calc(var(--prog-track-top) + var(--prog-track-h) + 10px);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: inherit;
}

/* Default: nav tabs are NOT clickable */
.prog-nav:not(.clickable):not(.clickable-reverse) .prog-nav-btn {
    cursor: default;
}

/* Fully clickable */
.prog-nav.clickable .prog-nav-btn {
    cursor: pointer;
}

/* Reverse-clickable: default to non-clickable */
.prog-nav.clickable-reverse .prog-nav-btn {
    cursor: default;
}

/* Reverse-clickable: ONLY completed steps are clickable */
.prog-nav.clickable-reverse .prog-nav-tab.is-complete .prog-nav-btn {
    cursor: pointer;
}

.prog-nav-dot {
    position: absolute;
    top: calc(var(--prog-track-top) + (var(--prog-track-h) / 2));
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--prog-dot-size);
    height: var(--prog-dot-size);
    border-radius: 999px;
    box-sizing: border-box;
    background: #fff;
    border: 3px solid var(--prog-dot-border);
    z-index: 2;
}

.prog-nav-label {
    display: inline-block;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--prog-text-muted);
    user-select: none;
    font-size: 10px;
}

.prog-nav-tab.is-active .prog-nav-label {
    color: var(--prog-text-active);
    font-weight: 700;
}

/* =========================================================
   Per-instance theming
   You can override these vars on any .prog-nav element.
========================================================= */

/* Optional theme presets */
.prog-nav.theme-default {
    --prog-track-bg: #eaf3fb;
    --prog-fill-done: #78b3e6;
    --prog-fill-active: #b9dbf6;
    --prog-dot-border: #78b3e6;
    --prog-dot-upcoming: #cfe4f7;
    --prog-text-muted: #c7ced6;
    --prog-text-active: #1c2a39;
}

/* Example “strength” theme (matches your red -> grey style better) */
.prog-nav.theme-strength {
    --prog-fill-done: #e74c3c; /* red fill */
    --prog-fill-active: #e74c3c; /* same for indicator */
    --prog-dot-border: #e74c3c;
    --prog-dot-upcoming: #d7dee7; /* pale grey-blue dots */
    --prog-track-bg: #eef2f6;
    --prog-text-muted: #b8c0cc;
    --prog-text-active: #1c2a39;
    /* default strength color (overridden by JS) */
    --prog-strength-color: #e74c3c;
}

/* Make upcoming dot color themeable */
.prog-nav-tab.is-upcoming .prog-nav-dot {
    background: var(--prog-dot-upcoming, #cfe4f7);
    border-color: var(--prog-dot-upcoming, #cfe4f7);
}

.prog-nav-tab.is-complete .prog-nav-dot,
.prog-nav-tab.is-active .prog-nav-dot {
    background: #fff;
    border-color: var(--prog-dot-border);
}

.prog-nav-btn:focus-visible .prog-nav-dot {
    outline: 3px solid rgba(120, 179, 230, 0.35);
    outline-offset: 3px;
}

/* Override the fill rendering for strength bars:
   - single-color fill from 0 -> --prog-active-px
   - no "active segment" two-tone */
.prog-nav.theme-strength.strength::after {
    background: linear-gradient( to right, var(--prog-strength-color) 0px, var(--prog-strength-color) var(--prog-active-px), transparent var(--prog-active-px), transparent 100% );
}

/* =========================================================
   Variant: no dots (for indicators like password strength)
   Add class: .prog-nav.no-dots
========================================================= */

.prog-nav.no-dots {
    /* optional: bring labels closer since dots are gone */
    --prog-no-dots-label-gap: 6px;
}

    /* Hide dots completely */
    .prog-nav.no-dots .prog-nav-dot {
        display: none !important;
    }

    /* Reduce top padding so labels sit closer to the bar */
    .prog-nav.no-dots .prog-nav-btn {
        padding-top: calc(var(--prog-track-top) + var(--prog-track-h) + var(--prog-no-dots-label-gap));
        gap: 0;
        cursor: default !important;
    }

    /* Tiny alignment polish */
    .prog-nav.no-dots .prog-nav-label {
        margin-top: 0;
    }

    /* Since it's an indicator, usually no pointer cursor */
    .prog-nav.no-dots .prog-nav-btn {
        cursor: default !important;
    }

/* =========================================================
   Strength variant: show ONLY the active dot
========================================================= */

.prog-nav.theme-strength.strength .prog-nav-dot {
    display: none; /* hide all by default */
}

.prog-nav.theme-strength.strength .prog-nav-tab.is-active .prog-nav-dot {
    display: block; /* show only active */
}

/* Optional: make the active dot white with colored border */
.prog-nav.theme-strength.strength .prog-nav-tab.is-active .prog-nav-dot {
    background: #fff;
    border-color: var(--prog-strength-color, #e74c3c);
}

/* =========================================================
   Panels (DEFAULT snap mode)
========================================================= */

.prog-tabs .prog-tab-pane {
    display: none;
}

    .prog-tabs .prog-tab-pane.is-active {
        display: block;
    }

/* =========================================================
   Panels (FADE mode)
   NOTE: We still use display:none/block to avoid stacking.
   JS handles fade-out then swap then fade-in.
========================================================= */

.prog-tabs.prog-fade .prog-tab-pane {
    /* transition is used by JS (opacity changes) */
    transition: opacity 180ms ease;
}

    /* Optional helper classes JS uses during fade */
    .prog-tabs.prog-fade .prog-tab-pane.is-fading-out {
        opacity: 0;
    }

    .prog-tabs.prog-fade .prog-tab-pane.is-fading-in {
        opacity: 1;
    }

/* Optional small-screen tightening */
@media (max-width: 520px) {
    .prog-nav-label {
        font-size: 9px;
        letter-spacing: 0.06em;
    }
}