/* =========================================================
   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: 720px;
}

/* ============================================================
   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: var(--sjb-gold);
    border-color: var(--sjb-gold);
    color: var(--sjb-black);
}

.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 {
    border-color: var(--sjb-text-muted);
    color: var(--sjb-text-muted);
}

.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 DATE LABEL ====== */
.sjb-slot-date-label {
    font-size: 0.7rem;
    color: var(--sjb-gold-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.sjb-slot-btn.sjb-slot-selected .sjb-slot-date-label {
    color: rgba(255, 255, 255, 0.85);
}

/* ====== 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;
}

.sjb-day-block {
    margin-bottom: 1.25rem;
}

.sjb-day-header {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.08em;
    color: var(--sjb-gold);
    font-size: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(212, 160, 23, 0.2);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

.sjb-day-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.sjb-slot-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    padding: 0.65rem 0.5rem;
    color: var(--sjb-cream);
    cursor: pointer;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.18s;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
}

.sjb-slot-btn:hover:not([disabled]) {
    border-color: var(--sjb-gold);
    background: rgba(212, 160, 23, 0.08);
}

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

.sjb-slot-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.sjb-slot-time {
    font-weight: 600;
    font-size: 0.9rem;
}

.sjb-slot-meta {
    font-size: 0.7rem;
    color: var(--sjb-text-muted);
}

.sjb-slot-btn.sjb-slot-selected .sjb-slot-meta {
    color: rgba(255, 255, 255, 0.75);
}

.sjb-slot-full {
    position: absolute;
    top: 4px;
    right: 6px;
    background: rgba(180, 30, 30, 0.18);
    color: #ff8b8b;
    font-size: 0.6rem;
    padding: 0.05rem 0.4rem;
    border-radius: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.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;
}

.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);
}

/* Time range inside slot buttons: give it a little room to breathe
   so labels like "7:00 - 7:45 pm" don't crowd against the date. */
.sjb-slot-btn .sjb-slot-time {
    white-space: nowrap;
}

@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);
}