/**
 * ByBee Booking Stepper
 * ─────────────────────────────────────────────────────────────
 * Reusable stepper untuk semua halaman booking flow (Tahap 1-4).
 * Theme-agnostic: pakai CSS variable yang adaptif ke light/dark.
 *
 * Mode:
 *   - Desktop (>=720px): horizontal track 4-step penuh dengan label
 *   - Mobile  (<720px):  compact "Langkah X dari 4: <label>" + progress bar
 *
 * Usage di partial: kedua mode di-render bersamaan, CSS toggle visibility
 * via media query → no JS needed, no flash on initial paint.
 *
 * Pemakaian: <?php $bookingStep = 2; include 'partials/booking-progress.php'; ?>
 */

/* ── Wrapper: in-flow (NOT sticky), tapi push below fixed site-header
       di booking-summary/payment/success pages (body.bg-mist).
       Booking.php (Tahap 1) pakai bk-topbar sticky in-flow → no margin needed. ── */
.bprogress {
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    background: var(--surface-translucent, rgba(255, 255, 255, 0.78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.7rem 0;
    position: relative;
}

/* Page-specific offset: compensate for fixed site-header on Tahap 2-4 pages.
   Booking.php (bk-light + bk-topbar sticky) tidak butuh — bk-topbar di flow normal. */
body.bg-mist .bprogress {
    margin-top: 76px;  /* site-header desktop height */
}
@media (max-width: 720px) {
    body.bg-mist .bprogress {
        margin-top: 116px;  /* site-header mobile height (text wrap = lebih tinggi) */
    }
}

/* Dark theme override (booking.php Tahap 1 saat ini) */
.bk-dark .bprogress,
body.bk-dark .bprogress {
    background: rgba(20, 17, 13, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ── DESKTOP TRACK: 4 chip horizontal dengan connector ──────────── */
.bprogress__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.bprogress__step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    opacity: 0.45;
    transition: opacity 0.22s ease;
}
.bprogress__step.is-done   { opacity: 0.85; }
.bprogress__step.is-active { opacity: 1; }

.bprogress__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid var(--line-strong, rgba(0, 0, 0, 0.15));
    background: var(--surface, #ffffff);
    color: var(--text-soft, #6c7086);
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.22s;
}

.bprogress__step.is-done .bprogress__bubble {
    background: var(--text, #1f2330);
    border-color: var(--text, #1f2330);
    color: #fff8ed;
}

.bprogress__step.is-active .bprogress__bubble {
    background: var(--amber, #b9873d);
    border-color: var(--amber, #b9873d);
    color: #ffffff;
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(185, 135, 61, 0.35);
}

.bprogress__num {
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Check icon only visible saat step done; number only saat tidak done.
   Kedua elemen selalu di DOM supaya JS bisa toggle .is-done tanpa innerHTML mutation. */
.bprogress__check { display: none; }
.bprogress__step.is-done .bprogress__check { display: block; }
.bprogress__step.is-done .bprogress__num   { display: none; }

.bprogress__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-soft, #6c7086);
    white-space: nowrap;
}
.bprogress__step.is-done .bprogress__label   { color: var(--text, #1f2330); }
.bprogress__step.is-active .bprogress__label { color: var(--amber-deep, #8a6225); }

/* Dark theme color overrides */
.bk-dark .bprogress__bubble {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.7);
}
.bk-dark .bprogress__step.is-done .bprogress__bubble {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.95);
    color: #14110d;
}
.bk-dark .bprogress__step.is-active .bprogress__bubble {
    background: var(--amber, #d4af37);
    border-color: var(--amber, #d4af37);
    color: #14110d;
}
.bk-dark .bprogress__label                       { color: rgba(255, 255, 255, 0.7); }
.bk-dark .bprogress__step.is-done .bprogress__label { color: rgba(255, 255, 255, 0.95); }
.bk-dark .bprogress__step.is-active .bprogress__label { color: #f4d77a; }

.bprogress__connector {
    flex: 1;
    min-width: 24px;
    height: 2px;
    background: var(--line-strong, rgba(0, 0, 0, 0.15));
    border-radius: 999px;
    margin: 0 0.7rem;
    transition: background 0.3s ease;
}
.bprogress__connector.is-done,
.bprogress__connector.is-filled { background: var(--amber, #b9873d); }
.bk-dark .bprogress__connector { background: rgba(255, 255, 255, 0.18); }
.bk-dark .bprogress__connector.is-done,
.bk-dark .bprogress__connector.is-filled { background: var(--amber, #d4af37); }

/* ── MOBILE COMPACT MODE ─────────────────────────────────────────── */
.bprogress__compact { display: none; }

.bprogress__compact-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.bprogress__compact-counter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-soft, #6c7086);
    letter-spacing: 0.01em;
}
.bprogress__compact-counter strong {
    font-weight: 800;
    color: var(--amber-deep, #8a6225);
    font-variant-numeric: tabular-nums;
}
.bprogress__compact-label {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text, #1f2330);
    letter-spacing: -0.01em;
}

/* Native <progress> element — semantic + a11y winner */
.bprogress__compact-bar {
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--line, rgba(0, 0, 0, 0.08));
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
}
.bprogress__compact-bar::-webkit-progress-bar {
    background: var(--line, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
}
.bprogress__compact-bar::-webkit-progress-value {
    background: var(--amber, #b9873d);
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bprogress__compact-bar::-moz-progress-bar {
    background: var(--amber, #b9873d);
    border-radius: 999px;
}

/* Dark theme compact */
.bk-dark .bprogress__compact-counter        { color: rgba(255, 255, 255, 0.7); }
.bk-dark .bprogress__compact-counter strong { color: #f4d77a; }
.bk-dark .bprogress__compact-label          { color: #ffffff; }
.bk-dark .bprogress__compact-bar            { background: rgba(255, 255, 255, 0.12); }
.bk-dark .bprogress__compact-bar::-webkit-progress-bar { background: rgba(255, 255, 255, 0.12); }
.bk-dark .bprogress__compact-bar::-webkit-progress-value { background: #f4d77a; }
.bk-dark .bprogress__compact-bar::-moz-progress-bar      { background: #f4d77a; }

/* ── SWITCH: desktop track ↔ mobile compact ─────────────────────── */
@media (max-width: 720px) {
    .bprogress__track   { display: none; }
    .bprogress__compact { display: block; }
}

/* Reduce motion: matikan scaling+transition utk users yg sensitive */
@media (prefers-reduced-motion: reduce) {
    .bprogress__bubble,
    .bprogress__step,
    .bprogress__connector,
    .bprogress__compact-bar::-webkit-progress-value {
        transition: none;
    }
    .bprogress__step.is-active .bprogress__bubble {
        transform: none;
    }
}