/* =========================================================
   Soca J'Ouvert Booking - Frontend Styles
   Matches existing site palette (black/magenta/gold/cream).
   ========================================================= */

:root {
    --sjb-black: #0a0a0a;
    --sjb-deep: #111111;
    --sjb-gold: #D4A017;
    --sjb-gold-light: #F5C842;
    --sjb-magenta: #C41E5E;
    --sjb-cream: #F9F3E8;
    --sjb-white: #FFFFFF;
    --sjb-text-muted: #999;
    --sjb-border: rgba(212, 160, 23, 0.2);
}

/* ====== OVERLAY ====== */
.sjb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Allow overlay scrolling as a fallback for very tall modals,
       but the modal itself will fit so this rarely engages. */
    overflow-y: auto;
}

.sjb-overlay.sjb-open {
    display: flex;
}

/* ====== MODAL ====== */
.sjb-modal {
    background: var(--sjb-deep);
    border: 1px solid var(--sjb-border);
    border-radius: 3px;
    padding: 2.5rem;
    width: 100%;
    max-width: 460px;
    position: relative;
    color: var(--sjb-cream);
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 20px 60px rgba(196, 30, 94, 0.15);
    max-height: 92vh;
    overflow-y: auto;
}

.sjb-modal-wide {
    max-width: 880px;
}

/* ============================================================
   FIX: Force any step modal with [hidden] attribute to stay hidden.
   The #sjb-step-waiver rule below sets display:flex, and an ID
   selector beats the browser's default [hidden]{display:none},
   so without this rule the waiver renders alongside whichever
   step is actually active. !important guarantees it wins.
   ============================================================ */
.sjb-overlay .sjb-modal[hidden] {
    display: none !important;
}

/* Waiver panel: don't scroll the panel itself — only the inner waiver
   content scrolls. In the new flow this lives as a side panel inside the
   combined Auth+Waiver modal (see .sjb-auth-layout below), and in any
   legacy fallback it can still render as its own modal too.
   Scoped to :not([hidden]) so it can't re-show a hidden panel. */
#sjb-step-waiver:not([hidden]) {
    display: flex;
    flex-direction: column;
    /* Fill the parent height (auth-side flex item). The 92vh cap was a
       hangover from when this was a top-level modal. */
    min-height: 0;
    overflow: hidden;
}

#sjb-step-waiver .sjb-modal-header {
    flex: 0 0 auto;
}

#sjb-step-waiver .sjb-waiver-actions,
#sjb-step-waiver .sjb-waiver-scroll-hint,
#sjb-step-waiver .sjb-error-msg {
    flex: 0 0 auto;
}

#sjb-step-waiver .sjb-waiver-content {
    flex: 1 1 auto;
    min-height: 0; /* critical for flex children to allow inner scroll */
}

.sjb-modal-header {
    margin-bottom: 1.5rem;
}

.sjb-modal h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.06em;
    color: var(--sjb-cream);
    margin: 0 0 0.5rem;
}

.sjb-modal p {
    color: var(--sjb-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.sjb-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--sjb-text-muted);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s;
}

.sjb-close:hover {
    color: var(--sjb-magenta);
}

/* ====== FORM ====== */
.sjb-form-row {
    margin-bottom: 1.1rem;
}

.sjb-form-row label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sjb-cream);
    margin-bottom: 0.4rem;
}

.sjb-form-row .req {
    color: var(--sjb-magenta);
}

.sjb-form-row input,
.sjb-overlay input[type="text"],
.sjb-overlay input[type="email"],
.sjb-overlay input[type="tel"],
.sjb-overlay input[type="password"],
.sjb-overlay input[type="number"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    caret-color: #FFFFFF;
    padding: 0.85rem 1.1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    border-radius: 2px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sjb-form-row input:focus,
.sjb-overlay input:focus {
    border-color: var(--sjb-gold);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Kill browser autofill yellow / dark text */
.sjb-overlay input:-webkit-autofill,
.sjb-overlay input:-webkit-autofill:hover,
.sjb-overlay input:-webkit-autofill:focus,
.sjb-overlay input:-webkit-autofill:active {
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 15, 15, 0.95) inset !important;
    caret-color: #FFFFFF !important;
    transition: background-color 9999s ease-in-out 0s;
}

.sjb-overlay input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.sjb-form-row small {
    display: block;
    font-size: 0.72rem;
    color: var(--sjb-text-muted);
    margin-top: 0.3rem;
}

/* ====== BUTTONS ====== */
.sjb-btn-primary,
.sjb-btn-outline {
    display: inline-block;
    padding: 0.9rem 2rem;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid transparent;
    line-height: 1.2;
}

.sjb-btn-primary {
    background: var(--sjb-magenta);
    color: var(--sjb-white);
    border-color: var(--sjb-magenta);
    width: 100%;
}

.sjb-btn-primary:hover {
    background: #a81950;
    border-color: #a81950;
    color: var(--sjb-white);
}

.sjb-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sjb-btn-outline {
    background: transparent;
    color: var(--sjb-cream);
    border-color: rgba(249, 243, 232, 0.3);
}

.sjb-btn-outline:hover {
    background: var(--sjb-magenta);
    border-color: var(--sjb-magenta);
    color: var(--sjb-white);
}

.sjb-btn-loader {
    letter-spacing: 0.2em;
}

/* ====== ERROR MESSAGE ====== */
.sjb-error-msg {
    color: var(--sjb-magenta);
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem;
    min-height: 1.2em;
    line-height: 1.4;
}

.sjb-error-msg:empty {
    margin: 0;
    min-height: 0;
}

/* ====== FOOTNOTE ====== */
.sjb-footnote {
    text-align: center;
    font-size: 0.82rem;
    color: var(--sjb-text-muted);
    margin-top: 1.25rem;
}

.sjb-footnote a {
    color: var(--sjb-magenta);
    text-decoration: underline;
}

/* ====== WAIVER ====== */
.sjb-waiver-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    padding: 1.5rem;
    overflow-y: auto;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(249, 243, 232, 0.85);
    /* When the parent (#sjb-step-waiver) is flex with max-height, this child
       grows to fill available space and scrolls internally. A fallback
       max-height applies if the parent isn't flex (legacy contexts). */
    max-height: 60vh;
}

.sjb-waiver-content h3 {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--sjb-gold);
    letter-spacing: 0.05em;
    font-size: 1.4rem;
    margin: 0 0 1rem;
}

.sjb-waiver-content h4 {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--sjb-magenta);
    letter-spacing: 0.05em;
    font-size: 1.05rem;
    margin: 1.25rem 0 0.5rem;
}

.sjb-waiver-content p {
    color: rgba(249, 243, 232, 0.8);
    font-size: 0.88rem;
    margin: 0 0 0.75rem;
}

.sjb-waiver-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.sjb-waiver-actions .sjb-btn-primary,
.sjb-waiver-actions .sjb-btn-outline {
    width: auto;
    flex: 0 1 auto;
    min-width: 140px;
}

/* ====== PACKAGES ====== */
.sjb-packages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.sjb-package-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
}

.sjb-package-card:hover {
    border-color: var(--sjb-gold);
    transform: translateY(-3px);
}

.sjb-package-featured {
    border-color: rgba(196, 30, 94, 0.4);
    background: rgba(196, 30, 94, 0.06);
}

.sjb-package-badge {
    display: inline-block;
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid var(--sjb-magenta);
    color: var(--sjb-cream);
    padding: 0.35rem 1rem;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 20px;
    margin-bottom: 1.25rem;
    align-self: center;
}

.sjb-package-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    color: var(--sjb-magenta);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.sjb-package-price span {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    color: var(--sjb-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.4rem;
}

.sjb-package-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
    font-size: 0.85rem;
    color: rgba(249, 243, 232, 0.85);
    flex-grow: 1;
}

.sjb-package-features li {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sjb-package-features li:last-child {
    border-bottom: none;
}

.sjb-quantity-row {
    margin-bottom: 1rem;
    text-align: left;
}

.sjb-quantity-row label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sjb-text-muted);
    margin-bottom: 0.4rem;
}

.sjb-quantity-row input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--sjb-cream);
    padding: 0.6rem 0.8rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    border-radius: 2px;
    outline: none;
}

.sjb-quantity-row input:focus {
    border-color: var(--sjb-gold);
}

/* ====== STEP TRANSITIONS ====== */
.sjb-modal {
    animation: sjb-step-in 0.25s ease-out;
}

@keyframes sjb-step-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====== AUTH TABS (Register / Login) ====== */
.sjb-auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sjb-auth-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--sjb-text-muted);
    padding: 0.75rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}

.sjb-auth-tab:hover {
    color: var(--sjb-cream);
}

.sjb-auth-tab.sjb-auth-tab-active {
    color: var(--sjb-magenta);
    border-bottom-color: var(--sjb-magenta);
}

.sjb-auth-panel { display: block; }
.sjb-auth-panel[hidden] { display: none !important; }

/* ====== WAIVER SCROLL HINT ====== */
.sjb-waiver-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--sjb-gold);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin: 0.5rem 0 1rem;
    padding: 0.5rem;
    background: rgba(212, 160, 23, 0.08);
    border-radius: 2px;
    transition: all 0.3s;
}

.sjb-waiver-scroll-hint .sjb-scroll-icon {
    font-size: 1rem;
    animation: sjb-bounce 1.5s infinite;
}

.sjb-waiver-scroll-hint.sjb-hint-done {
    color: #6ed46e;
    background: rgba(0, 150, 0, 0.08);
}

.sjb-waiver-scroll-hint.sjb-hint-done .sjb-scroll-icon {
    animation: none;
}

@keyframes sjb-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

#sjb-waiver-accept {
    transition: opacity 0.25s, background 0.25s;
}

#sjb-waiver-accept:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

#sjb-waiver-accept:not(:disabled) {
    animation: sjb-fade-in-pulse 0.6s ease 1;
}

@keyframes sjb-fade-in-pulse {
    0% { transform: scale(0.98); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

/* ====== SLOT PICKER ====== */
.sjb-slots-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    background: rgba(196, 30, 94, 0.1);
    border: 1px solid rgba(196, 30, 94, 0.3);
    border-radius: 3px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sjb-slots-selected-info {
    font-size: 0.88rem;
    color: var(--sjb-cream);
}

.sjb-slots-count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    color: var(--sjb-magenta);
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
}

.sjb-slots-min-hint {
    color: var(--sjb-text-muted);
    margin-left: 0.5rem;
    font-size: 0.78rem;
}

.sjb-slots-total {
    font-size: 0.92rem;
    color: var(--sjb-cream);
}

.sjb-slots-total strong {
    color: var(--sjb-gold);
    font-size: 1.15rem;
    margin-left: 0.25rem;
}

.sjb-slots-total small {
    color: var(--sjb-text-muted);
    margin-left: 0.25rem;
    font-size: 0.72rem;
}

.sjb-slots-loading {
    text-align: center;
    color: var(--sjb-text-muted);
    padding: 2rem 1rem;
    font-size: 0.88rem;
}

.sjb-slots-container {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 0.5rem;
    margin-bottom: 1rem;
}

/* ====== CLASS PICKER: WEEK STRIP ====== */
.sjb-cal-strip {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.35rem;
}

.sjb-cal-arrow {
    flex: 0 0 auto;
    align-self: center;
    background: none;
    border: none;
    color: var(--sjb-cream);
    font-size: 1.9rem;
    line-height: 1;
    padding: 0 0.45rem 0.2rem;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s;
}

.sjb-cal-arrow:hover:not([disabled]) {
    color: var(--sjb-white);
    background: var(--sjb-magenta);
    border-radius: 4px;
}

.sjb-cal-arrow[disabled] {
    opacity: 0.22;
    cursor: default;
}

.sjb-cal-days {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 0.15rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.sjb-cal-days::-webkit-scrollbar {
    display: none;
}

.sjb-cal-day {
    flex: 1 1 0;
    min-width: 56px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--sjb-text-muted);
    padding: 0.35rem 0.2rem 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    transition: color 0.15s, border-color 0.15s;
}

.sjb-cal-day:hover {
    color: var(--sjb-white);
    background: var(--sjb-magenta);
}

.sjb-cal-day:hover .sjb-cal-day-date,
.sjb-cal-day:hover .sjb-cal-day-name {
    color: var(--sjb-white);
}

.sjb-cal-day-date {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sjb-cal-day-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    line-height: 1;
}

.sjb-cal-day-active {
    color: var(--sjb-cream);
    border-bottom-color: var(--sjb-gold);
}

.sjb-cal-day-active .sjb-cal-day-date {
    color: var(--sjb-gold-light);
}

.sjb-cal-day-today:not(.sjb-cal-day-active) .sjb-cal-day-date {
    color: var(--sjb-magenta);
}

/* ====== CLASS PICKER: DATE BAR ====== */
.sjb-cal-datebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.sjb-cal-datebar-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sjb-cream);
}

/* ====== CLASS PICKER: CLASS ROWS ====== */
.sjb-class-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.15s;
}

.sjb-class-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.sjb-class-row-selected {
    background: rgba(196, 30, 94, 0.08);
}

.sjb-class-row-full {
    opacity: 0.5;
}

.sjb-class-time {
    flex: 0 0 92px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sjb-class-start {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sjb-cream);
}

.sjb-class-duration {
    font-size: 0.72rem;
    color: var(--sjb-text-muted);
}

.sjb-class-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sjb-class-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sjb-cream);
    text-decoration: underline;
    text-decoration-color: rgba(212, 160, 23, 0.55);
    text-underline-offset: 3px;
}

.sjb-class-sub {
    font-size: 0.75rem;
    color: var(--sjb-text-muted);
}

.sjb-reserve-btn {
    flex: 0 0 auto;
    min-width: 112px;
    background: transparent;
    border: 1px solid var(--sjb-gold);
    border-radius: 2px;
    color: var(--sjb-gold-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sjb-reserve-btn:hover:not([disabled]):not(.sjb-reserved) {
    background: var(--sjb-magenta);
    border-color: var(--sjb-magenta);
    color: var(--sjb-white);
}

.sjb-reserve-btn.sjb-reserved {
    background: var(--sjb-magenta);
    border-color: var(--sjb-magenta);
    color: var(--sjb-white);
}

.sjb-reserve-btn.sjb-reserved:hover {
    background: #a81950;
    border-color: #a81950;
}

.sjb-reserve-btn[disabled] {
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--sjb-text-muted);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .sjb-cal-day { min-width: 44px; padding: 0.3rem 0.1rem 0.45rem; }
    .sjb-cal-day-name { font-size: 1.05rem; }
    .sjb-cal-day-date { font-size: 0.56rem; }
    .sjb-cal-arrow { font-size: 1.5rem; padding: 0 0.3rem 0.15rem; }
    .sjb-cal-datebar-label { font-size: 0.8rem; }
    .sjb-class-row { gap: 0.6rem; }
    .sjb-class-time { flex-basis: 72px; }
    .sjb-class-sub { display: none; }
    .sjb-reserve-btn { min-width: 88px; padding: 0.5rem 0.6rem; letter-spacing: 0.1em; }
}

.sjb-empty-slots {
    text-align: center;
    color: var(--sjb-text-muted);
    padding: 2rem 1rem;
    font-style: italic;
}

.sjb-slots-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.sjb-slots-actions .sjb-btn-primary,
.sjb-slots-actions .sjb-btn-outline {
    width: auto;
    flex: 0 1 auto;
    min-width: 160px;
}

/* ====== SUCCESS ====== */
.sjb-success-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--sjb-magenta);
    color: var(--sjb-white);
    font-size: 2.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    line-height: 1;
}

.sjb-success-count {
    color: var(--sjb-gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4em;
    letter-spacing: 0.04em;
}

/* ====== SPINNER ====== */
.sjb-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--sjb-magenta);
    border-radius: 50%;
    animation: sjb-spin 0.8s linear infinite;
    margin: 1.5rem auto 0;
}

@keyframes sjb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ====== DASHBOARD ====== */
.sjb-dashboard {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    background: var(--sjb-deep);
    border: 1px solid var(--sjb-border);
    border-radius: 4px;
    color: var(--sjb-cream);
    font-family: 'DM Sans', sans-serif;
    min-height: calc(100vh - 4rem);
    box-sizing: border-box;
}

/* When the host page is narrow (theme container), expand. */
.sjb-dashboard-fullwidth-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: var(--sjb-black);
    padding: 2rem 0;
}

.sjb-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(212, 160, 23, 0.15);
}

.sjb-dash-header h2 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.06em;
    margin: 0 0 0.25rem;
    font-size: 2rem;
    color: var(--sjb-cream);
}

.sjb-dash-greeting {
    color: var(--sjb-text-muted);
    font-size: 0.88rem;
    margin: 0;
}

/* Dashboard header actions (logout button etc.) */
.sjb-dash-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sjb-dash-logout-btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: transparent;
    color: var(--sjb-cream);
    border: 1px solid rgba(212, 160, 23, 0.5);
    border-radius: 3px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sjb-dash-logout-btn:hover,
.sjb-dash-logout-btn:focus {
    background: var(--sjb-magenta);
    color: #fff;
    border-color: var(--sjb-magenta);
    text-decoration: none;
}

.sjb-classes-count {
    text-align: center;
    padding: 0.85rem 1.75rem;
    background: rgba(196, 30, 94, 0.15);
    border: 1px solid var(--sjb-magenta);
    border-radius: 3px;
    min-width: 130px;
}

.sjb-count-num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--sjb-magenta);
}

.sjb-count-label {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sjb-text-muted);
}

.sjb-dash-section {
    margin-bottom: 2.5rem;
}

.sjb-dash-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    color: var(--sjb-gold);
    text-transform: uppercase;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.sjb-section-count {
    background: rgba(196, 30, 94, 0.18);
    color: var(--sjb-magenta);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    padding: 0.1rem 0.55rem;
    border-radius: 10px;
    letter-spacing: 0.05em;
}

/* ====== DETAIL GRID ====== */
.sjb-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.sjb-detail-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sjb-detail-label {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sjb-text-muted);
}

.sjb-detail-value {
    font-size: 0.95rem;
    color: var(--sjb-cream);
    word-break: break-word;
}

/* ====== BOOKING CARDS ====== */
.sjb-bookings-list {
    display: grid;
    gap: 0.75rem;
}

.sjb-booking-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--sjb-magenta);
    border-radius: 3px;
    padding: 1rem 1.25rem;
}

.sjb-booking-date {
    flex-shrink: 0;
    width: 70px;
    text-align: center;
    padding: 0.4rem;
    background: rgba(212, 160, 23, 0.06);
    border-radius: 3px;
}

.sjb-booking-day {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--sjb-gold);
    text-transform: uppercase;
}

.sjb-booking-num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.65rem;
    line-height: 1;
    color: var(--sjb-cream);
    margin: 0.15rem 0;
}

.sjb-booking-month {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--sjb-text-muted);
    text-transform: uppercase;
}

.sjb-booking-info {
    flex: 1;
    min-width: 0;
}

.sjb-booking-class {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    color: var(--sjb-cream);
    margin-bottom: 0.2rem;
}

.sjb-booking-time {
    font-size: 0.85rem;
    color: var(--sjb-cream);
    margin-bottom: 0.15rem;
}

.sjb-booking-instructor {
    font-size: 0.75rem;
    color: var(--sjb-text-muted);
    font-style: italic;
}

.sjb-booking-status {
    flex-shrink: 0;
}

.sjb-status-pill {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.25rem 0.75rem;
    border-radius: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sjb-status-confirmed {
    background: rgba(0, 150, 0, 0.12);
    color: #6ed46e;
}

.sjb-status-cancelled {
    background: rgba(180, 30, 30, 0.12);
    color: #ff8b8b;
}

.sjb-status-attended {
    background: rgba(212, 160, 23, 0.12);
    color: var(--sjb-gold-light);
}

/* ====== TABLE ====== */
.sjb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.sjb-table th,
.sjb-table td {
    padding: 0.75rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sjb-table th {
    color: var(--sjb-gold);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}

.sjb-empty-state {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--sjb-text-muted);
    font-style: italic;
}

.sjb-dash-empty,
.sjb-dash-note {
    text-align: center;
    color: var(--sjb-text-muted);
}

/* ============================================================
   v1.5: COMBINED AUTH + WAIVER STEP
   The "Sign Up / Log In" form lives on the left side and the
   Liability Waiver lives on the right. When the Log In tab is
   active, the modal carries .sjb-auth-mode-login and the waiver
   side collapses away — login users go straight to dashboard.
   ============================================================ */
.sjb-modal-auth {
    /* Wider than .sjb-modal-wide because we have two columns. */
    max-width: 1100px;
    /* Override the default modal padding so each side can manage
       its own padding cleanly. */
    padding: 0;
    overflow: hidden;
}

.sjb-modal-auth .sjb-close {
    /* Lift the close button above the two-column layout. */
    z-index: 2;
}

.sjb-auth-layout {
    display: flex;
    align-items: stretch;
    min-height: 540px;
    max-height: 88vh;
    /* FIX (v1.6.1): allow the layout to scroll when content overflows on
       short viewports (e.g. small laptops at 100% zoom). Previously only
       the mobile breakpoint set overflow, so on desktop fields could clip
       below the visible area with no scrollbar. */
    overflow-y: auto;
}

.sjb-auth-side {
    flex: 1 1 0;
    padding: 2.5rem;
    min-width: 0; /* allow children to shrink */
    display: flex;
    flex-direction: column;
    /* Also let each column scroll its own content if it overflows the
       row height (catches the case where the form is taller than the
       waiver). */
    overflow-y: auto;
}

.sjb-auth-side + .sjb-auth-side {
    /* Vertical divider between the two columns. */
    border-left: 1px solid var(--sjb-border);
}

/* Login-mode: collapse the waiver side entirely. */
.sjb-modal-auth.sjb-auth-mode-login .sjb-waiver-side {
    display: none !important;
}
.sjb-modal-auth.sjb-auth-mode-login .sjb-auth-layout {
    /* In login mode the form is the only column, so let the modal
       shrink naturally rather than keep a two-column min-height. */
    min-height: auto;
}
.sjb-modal-auth.sjb-auth-mode-login {
    max-width: 460px;
}

/* ============================================================
   v1.6.1: LOGIN-ONLY MODE
   When user opens the auth step via "Already have an account?" from
   the Packages step, we hide the Sign Up tab entirely and show a
   Back-to-Packages button at the top. The user can either log in
   or go back — they can't accidentally switch to Sign Up here.
   ============================================================ */
.sjb-modal-auth.sjb-auth-mode-login-only .sjb-auth-tab[data-auth-tab="register"] {
    display: none;
}
/* When only the Login tab exists, the tab strip looks better with no
   row of just one button. Hide it entirely. */
.sjb-modal-auth.sjb-auth-mode-login-only .sjb-auth-tabs {
    display: none;
}
.sjb-modal-auth.sjb-auth-mode-login-only #sjb-auth-back-to-packages {
    display: inline-flex;
}

/* Back-to-Packages button — hidden by default, shown only in login-only
   mode (above). Sits at the top of the auth modal. */
.sjb-btn-back {
    display: none;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: none;
    color: var(--sjb-text-muted, #999);
    font-family: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 1rem 1.5rem 0;
    transition: color 0.2s;
}
.sjb-btn-back:hover {
    color: var(--sjb-magenta, #C41E5E);
}

/* ============================================================
   v1.6.1: THEMED CONFIRM / ALERT MODAL
   Replaces browser confirm() / alert() so prompts match the site
   theme. Driven by JS helpers showConfirm() / showAlert().
   ============================================================ */
.sjb-confirm-overlay {
    /* Same dark backdrop as the booking flow overlay but with a
       higher z-index so it can appear ON TOP of any other modal
       (e.g. layered confirm during dashboard interaction). */
    z-index: 100000;
}

.sjb-confirm-modal {
    max-width: 460px;
    width: calc(100% - 2rem);
    padding: 2rem;
    text-align: left;
}

.sjb-confirm-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    color: var(--sjb-cream, #F9F3E8);
    margin: 0 0 1rem;
}

.sjb-confirm-body {
    color: rgba(249, 243, 232, 0.8);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.sjb-confirm-body ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}
.sjb-confirm-body li {
    margin-bottom: 0.35rem;
}

.sjb-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.sjb-confirm-actions button {
    /* Cap button width inside the confirm modal so a single button
       doesn't stretch full-width like the form-submit buttons do. */
    width: auto;
    padding: 0.7rem 1.5rem;
}

/* Alert variant: hide the Cancel button so the modal becomes a
   single-button informational dialog. Applied via JS by adding
   the .sjb-confirm-alert class to the overlay. */
.sjb-confirm-overlay.sjb-confirm-alert #sjb-confirm-cancel {
    display: none;
}

/* ============================================================
   v1.6.1: WAIVER PRE-ACCEPTED STATE
   When the user clicks "I Accept" BEFORE signing up, the button
   visually locks into an accepted state ("✓ Waiver Accepted")
   instead of looking disabled. Once signup completes the actual
   AJAX accept fires automatically.
   ============================================================ */
.sjb-btn-primary.sjb-waiver-accepted {
    background: rgba(34, 139, 34, 0.25);
    color: #6ad36a;
    border: 1px solid rgba(34, 139, 34, 0.55);
    cursor: default;
    opacity: 1;
}
.sjb-btn-primary.sjb-waiver-accepted:hover {
    /* Don't show hover treatment on an accepted button. */
    background: rgba(34, 139, 34, 0.25);
    color: #6ad36a;
}

/* The waiver-side container fills its column. The inner
   #sjb-step-waiver flex rules (declared earlier) handle the
   inner content scroll. */
.sjb-waiver-side {
    background: rgba(0, 0, 0, 0.18);
}

@media (max-width: 600px) {
    .sjb-booking-card {
        flex-wrap: wrap;
    }
    .sjb-booking-status {
        width: 100%;
        text-align: right;
    }
}

/* Auth+Waiver responsive: on narrow viewports, stack the two
   columns. The waiver still hides cleanly in login mode. */
@media (max-width: 860px) {
    .sjb-modal-auth {
        max-width: 520px;
    }
    .sjb-auth-layout {
        flex-direction: column;
        min-height: auto;
        max-height: 92vh;
        overflow-y: auto;
    }
    .sjb-auth-side + .sjb-auth-side {
        border-left: none;
        border-top: 1px solid var(--sjb-border);
    }
    .sjb-auth-side {
        padding: 1.75rem 1.5rem;
    }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 640px) {
    .sjb-modal {
        padding: 1.75rem 1.25rem;
    }

    .sjb-modal h2 {
        font-size: 1.6rem;
    }

    .sjb-packages-grid {
        grid-template-columns: 1fr;
    }

    .sjb-waiver-actions {
        flex-direction: column;
    }

    .sjb-waiver-actions .sjb-btn-primary,
    .sjb-waiver-actions .sjb-btn-outline {
        width: 100%;
    }
}

/* ============================================================
   v1.6: Already-have-account link + dashboard cancel subscription
   ============================================================ */

/* "Already have an account? Log in" link — used below Packages step
   and below the Sign Up form. */
.sjb-have-account {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--sjb-text-muted, #999);
}
.sjb-have-account .sjb-go-to-login {
    color: var(--sjb-pink, #C41E5E);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 0.35rem;
    cursor: pointer;
}
.sjb-have-account .sjb-go-to-login:hover {
    color: var(--sjb-pink-hover, #e23a7a);
}

/* Dashboard: Cancel Subscription button on each active package row. */
.sjb-cancel-subscription {
    background: transparent;
    border: 1px solid rgba(196, 30, 94, 0.5);
    color: #C41E5E;
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    font-family: inherit;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sjb-cancel-subscription:hover:not(:disabled) {
    background: #C41E5E;
    color: #fff;
    border-color: #C41E5E;
}
.sjb-cancel-subscription:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The "no refunds" disclaimer that sits below the My Packages table. */
.sjb-cancel-disclaimer {
    margin-top: 0.85rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    line-height: 1.5;
}

/* Status badge for cancelled rows so they're visually muted. */
.sjb-package-row-cancelled td {
    opacity: 0.55;
}
.sjb-status-pill.sjb-status-cancelled {
    background: rgba(196, 30, 94, 0.15);
    color: #C41E5E;
    border: 1px solid rgba(196, 30, 94, 0.35);
}

/* =========================================================
   Payment confirmation banner (dashboard, post-checkout)
   ========================================================= */
.sjb-payment-confirming {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(212, 160, 23, 0.08);
    border: 1px solid rgba(212, 160, 23, 0.45);
    border-radius: 4px;
    padding: 0.9rem 1.2rem;
    margin: 0 0 1.5rem 0;
    color: var(--sjb-cream, #f5ecd7);
    font-size: 0.92rem;
}

.sjb-payment-confirming.sjb-confirming-failed {
    background: rgba(220, 50, 50, 0.08);
    border-color: rgba(220, 50, 50, 0.5);
}

.sjb-confirming-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid rgba(212, 160, 23, 0.35);
    border-top-color: var(--sjb-gold, #d4a017);
    border-radius: 50%;
    animation: sjb-spin 0.9s linear infinite;
}

.sjb-confirming-failed .sjb-confirming-spinner {
    animation: none;
    border-color: rgba(220, 50, 50, 0.6);
    border-top-color: rgba(220, 50, 50, 0.6);
}

@keyframes sjb-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   Past packages (cancelled / expired) history
   ========================================================= */
.sjb-dash-subsection-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.1em;
    color: var(--sjb-text-muted, #8a8578);
    font-size: 1rem;
    margin: 1.75rem 0 0.6rem 0;
    text-transform: uppercase;
}

.sjb-table-muted {
    opacity: 0.75;
}

.sjb-table-muted td,
.sjb-table-muted th {
    color: var(--sjb-text-muted, #8a8578);
}

.sjb-status-expired {
    background: rgba(138, 133, 120, 0.18);
    color: #8a8578;
    border: 1px solid rgba(138, 133, 120, 0.4);
}

/* =========================================================
   Terms panel "nudge" when user tries to skip acceptance
   ========================================================= */
.sjb-terms-nudge {
    animation: sjb-nudge 0.45s ease 2;
}

@keyframes sjb-nudge {
    0%, 100% { transform: translateX(0); }
    30%      { transform: translateX(-7px); }
    60%      { transform: translateX(7px); }
}

/* =========================================================
   Terms-only mode: logged-in repurchaser needs to accept
   ========================================================= */
#sjb-step-auth.sjb-terms-only .sjb-auth-side:not(.sjb-waiver-side) {
    display: none !important;
}

#sjb-step-auth.sjb-terms-only .sjb-auth-tabs {
    display: none !important;
}

#sjb-step-auth.sjb-terms-only .sjb-waiver-side {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}


/* ====== DASHBOARD: BUY PACKAGES BUTTON ====== */
.sjb-dash-buy-btn {
    background: var(--sjb-gold);
    color: var(--sjb-black);
    border: 1px solid var(--sjb-gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55rem 1.5rem;
    margin-right: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sjb-dash-buy-btn:hover,
.sjb-dash-buy-btn:focus-visible {
    background: var(--sjb-magenta);
    border-color: var(--sjb-magenta);
    color: var(--sjb-white);
}

/* ====== THEME-BLEED HOVER GUARD ======
   Some themes / Elementor kits ship a global `button:hover { background:
   <blue> }` that leaks into our modal (seen on the day tabs and the
   Change Package button). These rules pin every interactive control
   inside the booking flow to the brand magenta on hover, and pin the
   outline button's resting state, so no theme color can ever bleed in. */
body .sjb-overlay .sjb-btn-outline {
    background-color: transparent !important;
    border: 1px solid rgba(249, 243, 232, 0.35) !important;
    color: var(--sjb-cream) !important;
}

body .sjb-overlay button:not([disabled]):hover,
body .sjb-overlay button:not([disabled]):focus-visible,
body .sjb-overlay input[type="submit"]:not([disabled]):hover {
    background-color: var(--sjb-magenta) !important;
    border-color: var(--sjb-magenta) !important;
    color: var(--sjb-white) !important;
}

body .sjb-overlay .sjb-cal-day:not([disabled]):hover .sjb-cal-day-date,
body .sjb-overlay .sjb-cal-day:not([disabled]):hover .sjb-cal-day-name,
body .sjb-overlay .sjb-cal-day:not([disabled]):focus-visible .sjb-cal-day-date,
body .sjb-overlay .sjb-cal-day:not([disabled]):focus-visible .sjb-cal-day-name {
    color: var(--sjb-white) !important;
}

body .sjb-overlay a:hover {
    color: var(--sjb-gold-light) !important;
}

body .sjb-overlay input:focus-visible,
body .sjb-overlay select:focus-visible,
body .sjb-overlay textarea:focus-visible {
    outline: 2px solid var(--sjb-magenta);
    outline-offset: 1px;
}


/* ====== CLASS PICKER: PAST-DAY TABS ====== */
.sjb-cal-day.sjb-cal-day-past,
.sjb-cal-day.sjb-cal-day-past .sjb-cal-day-date,
.sjb-cal-day.sjb-cal-day-past .sjb-cal-day-name {
    opacity: 0.75;
    color: rgba(249, 243, 232, 0.35);
    cursor: default;
}


/* ================================================================
   v1.10.5 — FULL MOBILE RESPONSIVE LAYER (booking flow)
   Pure CSS. No markup or JS changes; functionality untouched.
   On phones the flow becomes a full-screen sheet; the day strip
   swipes horizontally; class rows stack with a full-width Reserve
   button; footer actions stack full-width.
   ================================================================ */
@media (max-width: 640px) {

    /* --- Full-screen sheet -------------------------------------- */
    body .sjb-overlay {
        padding: 0;
        align-items: stretch;
    }

    body .sjb-overlay .sjb-modal {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 1.4rem 1rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }

    /* The small confirm dialog stays a floating dialog, not a sheet. */
    body .sjb-confirm-overlay {
        padding: 1rem;
        align-items: center;
    }

    body .sjb-confirm-overlay .sjb-modal {
        min-height: 0;
        max-height: 90vh;
        border-radius: 3px;
        border: 1px solid var(--sjb-border);
    }

    .sjb-modal h2 {
        font-size: 1.55rem;
    }

    .sjb-modal > p {
        font-size: 0.92rem;
    }

    .sjb-close {
        top: 0.45rem;
        right: 0.45rem;
        font-size: 1.7rem;
        padding: 0.35rem 0.6rem;
        line-height: 1;
    }

    /* --- Summary bar --------------------------------------------- */
    .sjb-slots-summary {
        padding: 0.7rem 0.8rem;
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    /* --- Day strip: swipeable, snap to tabs ----------------------- */
    .sjb-cal-strip {
        gap: 0.1rem;
    }

    .sjb-cal-days {
        justify-content: flex-start;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .sjb-cal-day {
        scroll-snap-align: center;
        min-width: 47px;
        padding: 0.3rem 0.1rem 0.45rem;
    }

    .sjb-cal-day-name {
        font-size: 1rem;
    }

    .sjb-cal-day-date {
        font-size: 0.55rem;
    }

    .sjb-cal-arrow {
        font-size: 1.45rem;
        padding: 0 0.25rem 0.1rem;
    }

    .sjb-cal-datebar-label {
        font-size: 0.82rem;
    }

    /* --- Class rows: info wraps, Reserve goes full width ---------- */
    .sjb-class-row {
        flex-wrap: wrap;
        gap: 0.35rem 0.75rem;
        padding: 0.85rem 0;
    }

    .sjb-class-time {
        flex: 0 0 62px;
    }

    .sjb-class-start {
        font-size: 0.95rem;
    }

    .sjb-class-duration {
        font-size: 0.68rem;
    }

    .sjb-class-info {
        flex: 1 1 0;
        min-width: 0;
    }

    .sjb-class-title {
        font-size: 0.95rem;
    }

    /* Re-show the time-range + spots line the old 600px rule hid. */
    .sjb-class-sub {
        display: block;
        font-size: 0.72rem;
    }

    .sjb-class-row .sjb-reserve-btn {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        margin-top: 0.1rem;
        padding: 0.7rem 0.5rem;
    }

    /* --- Footer actions: stacked, full width ---------------------- */
    .sjb-slots-actions {
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 1rem;
    }

    .sjb-slots-actions .sjb-btn-primary,
    .sjb-slots-actions .sjb-btn-outline {
        width: 100%;
        min-width: 0;
    }

    /* --- Packages / auth / waiver -------------------------------- */
    .sjb-packages-grid {
        gap: 0.9rem;
    }

    .sjb-package-card {
        padding: 1.4rem 1rem;
    }

    .sjb-modal-auth,
    .sjb-modal-wide {
        max-width: 100%;
    }

    .sjb-auth-layout {
        max-height: none;
        overflow: visible;
    }

    .sjb-waiver-content {
        max-height: 34vh;
    }

    /* 16px inputs stop iOS Safari's focus auto-zoom. */
    body .sjb-overlay input[type="text"],
    body .sjb-overlay input[type="email"],
    body .sjb-overlay input[type="password"],
    body .sjb-overlay input[type="tel"],
    body .sjb-overlay select,
    body .sjb-overlay textarea {
        font-size: 16px;
    }
}

/* Extra-small phones */
@media (max-width: 380px) {
    body .sjb-overlay .sjb-modal {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .sjb-cal-day {
        min-width: 43px;
    }

    .sjb-cal-day-name {
        font-size: 0.92rem;
    }

    .sjb-slots-summary {
        font-size: 0.8rem;
    }
}


/* ================================================================
   v1.10.6 — MOBILE FIX: Sign Up / Log In step
   On phones the auth modal previously kept its desktop height
   tricks (overflow:hidden + fixed viewport height + flex columns
   with 0 basis), which collapsed/clipped the form so only the tabs
   and the waiver heading were visible. On small screens we drop ALL
   of that: plain block flow, natural heights, and the modal itself
   scrolls. Desktop is untouched.
   ================================================================ */
@media (max-width: 640px) {

    body .sjb-overlay .sjb-modal-auth {
        display: block;
        overflow-y: auto;                 /* beat .sjb-modal-auth{overflow:hidden} */
        -webkit-overflow-scrolling: touch;
        padding: 0 0 calc(1.75rem + env(safe-area-inset-bottom, 0px));
    }

    body .sjb-overlay .sjb-modal-auth .sjb-auth-layout {
        display: block;                   /* no flex on phones */
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    body .sjb-overlay .sjb-modal-auth .sjb-auth-side {
        display: block;                   /* natural document flow */
        flex: none;
        width: 100%;
        min-height: 0;
        max-height: none;
        overflow: visible;
        padding: 1.4rem 1rem;
    }

    body .sjb-overlay .sjb-modal-auth .sjb-auth-side + .sjb-auth-side {
        border-left: none;
        border-top: 1px solid var(--sjb-border);
    }

    /* Room for the × button above the first side's content. */
    body .sjb-overlay .sjb-modal-auth .sjb-auth-side:first-child {
        padding-top: 2.6rem;
    }

    .sjb-modal-auth .sjb-auth-tabs {
        margin-bottom: 1rem;
    }

    .sjb-auth-tab {
        font-size: 0.95rem;
        padding: 0.55rem 0.9rem;
    }

    .sjb-form-row {
        margin-bottom: 0.85rem;
    }

    body .sjb-overlay .sjb-modal-auth .sjb-form input,
    body .sjb-overlay .sjb-modal-auth .sjb-form select {
        width: 100%;
    }

    /* Waiver panel: keep its own internal scroll (the scroll-to-accept
       logic depends on it) but never taller than half the screen. */
    .sjb-waiver-content {
        max-height: 42vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Terms-only mode (logged-in repurchase): full width on phones. */
    #sjb-step-auth.sjb-terms-only .sjb-waiver-side {
        max-width: 100%;
    }

    /* Back-to-Packages link (login-only mode) sits inside the padded
       area instead of the modal's stripped padding. */
    .sjb-modal-auth .sjb-btn-back {
        margin: 0.9rem 1rem 0;
    }
}


/* ================================================================
   v1.10.7 — USER DASHBOARD: FULL MOBILE RESPONSIVE
   Pure CSS. On phones: compact header with side-by-side small
   buttons, single/two-column detail grid, and every table becomes
   stacked label:value cards (no sideways overflow, no page zoom).
   Desktop untouched. Functionality untouched.
   ================================================================ */
@media (max-width: 640px) {

    .sjb-dashboard-fullwidth-wrap {
        padding: 0.75rem 0;
    }

    .sjb-dashboard {
        padding: 1.35rem 0.95rem;
    }

    /* --- Header: title on top, two compact buttons under it ------ */
    .sjb-dash-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
        padding-bottom: 1.1rem;
    }

    .sjb-dash-header h2 {
        font-size: 1.5rem;
    }

    .sjb-dash-greeting {
        font-size: 0.82rem;
    }

    .sjb-dash-header-actions {
        width: 100%;
        gap: 0.5rem;
    }

    .sjb-dash-buy-btn,
    .sjb-dash-logout-btn {
        flex: 1 1 0;
        margin: 0;
        text-align: center;
        font-size: 0.82rem;
        letter-spacing: 0.07em;
        padding: 0.55rem 0.4rem;
        white-space: nowrap;
    }

    .sjb-dash-section-title {
        font-size: 1.05rem;
    }

    /* --- My Details: tidy two-per-row cards ---------------------- */
    .sjb-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .sjb-detail-item {
        padding: 0.7rem 0.75rem;
    }

    .sjb-detail-value {
        font-size: 0.88rem;
        word-break: break-word;
    }

    /* --- Upcoming class cards ------------------------------------ */
    .sjb-booking-card {
        padding: 0.75rem;
        gap: 0.7rem;
    }

    .sjb-booking-num {
        font-size: 1.35rem;
    }

    .sjb-booking-class {
        font-size: 0.95rem;
    }

    .sjb-booking-time,
    .sjb-booking-instructor {
        font-size: 0.78rem;
    }

    /* --- Tables → stacked cards ----------------------------------
       Each row becomes a bordered card; each cell shows its column
       label on the left (via ::before) and the value on the right.
       Nothing can overflow sideways anymore. */
    .sjb-dashboard .sjb-table {
        display: block;
        width: 100%;
        border: 0;
    }

    .sjb-dashboard .sjb-table thead {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    .sjb-dashboard .sjb-table tbody {
        display: block;
    }

    .sjb-dashboard .sjb-table tr {
        display: block;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        padding: 0.3rem 0.85rem;
        margin-bottom: 0.75rem;
    }

    .sjb-dashboard .sjb-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0;
        border: 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
        text-align: right;
        font-size: 0.88rem;
    }

    .sjb-dashboard .sjb-table td:last-child {
        border-bottom: 0;
    }

    .sjb-dashboard .sjb-table td::before {
        flex: 0 0 auto;
        font-size: 0.66rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--sjb-text-muted);
        text-align: left;
    }

    /* Active packages table */
    #sjb-packages-table td:nth-child(1)::before { content: "Package"; }
    #sjb-packages-table td:nth-child(2)::before { content: "Total"; }
    #sjb-packages-table td:nth-child(3)::before { content: "Remaining"; }
    #sjb-packages-table td:nth-child(4)::before { content: "Purchased"; }
    #sjb-packages-table td:nth-child(5)::before { content: "Expires"; }

    #sjb-packages-table td:nth-child(6) {
        display: block;
        text-align: center;
        padding-top: 0.65rem;
    }

    .sjb-dashboard .sjb-cancel-subscription {
        width: 100%;
        padding: 0.6rem 0.5rem;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
    }

    /* Past packages table */
    .sjb-table-muted td:nth-child(1)::before { content: "Package"; }
    .sjb-table-muted td:nth-child(2)::before { content: "Total"; }
    .sjb-table-muted td:nth-child(3)::before { content: "Purchased"; }
    .sjb-table-muted td:nth-child(4)::before { content: "Status"; }

    /* Past classes table (the remaining plain .sjb-table) */
    .sjb-table:not(#sjb-packages-table):not(.sjb-table-muted) td:nth-child(1)::before { content: "Date"; }
    .sjb-table:not(#sjb-packages-table):not(.sjb-table-muted) td:nth-child(2)::before { content: "Class"; }
    .sjb-table:not(#sjb-packages-table):not(.sjb-table-muted) td:nth-child(3)::before { content: "Time"; }
    .sjb-table:not(#sjb-packages-table):not(.sjb-table-muted) td:nth-child(4)::before { content: "Status"; }

    .sjb-cancel-disclaimer {
        font-size: 0.72rem;
        line-height: 1.5;
    }

    .sjb-status-pill {
        font-size: 0.68rem;
    }

    .sjb-payment-confirming {
        font-size: 0.82rem;
    }
}

/* Extra-small phones: details go single column */
@media (max-width: 380px) {
    .sjb-detail-grid {
        grid-template-columns: 1fr;
    }

    .sjb-dash-header h2 {
        font-size: 1.35rem;
    }
}

/* ====== CLASS PICKER: PAST (STARTED) CLASS ROWS ====== */
.sjb-class-row.sjb-class-row-past {
    opacity: 0.55;
}

.sjb-class-row.sjb-class-row-past .sjb-reserve-btn[disabled] {
    border-color: rgba(249, 243, 232, 0.25);
    color: rgba(249, 243, 232, 0.5);
    background: transparent;
    cursor: not-allowed;
}