:root {
    --gold-accent: #C5A059;
    --dark-bg: #050505;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-subtle: #262626;
    --border-strong: #404040;
    --success: #4ade80;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    /* Dynamic Backgrounds */
    --bg-grad-top: rgba(10, 10, 10, 0.9);
    --bg-grad-bottom: rgba(5, 5, 5, 0.98);
    --glass-panel: rgba(10, 10, 10, 0.5);
    --modal-overlay: rgba(0, 0, 0, 0.9);
    --toast-bg: var(--text-main);
    --toast-text: var(--dark-bg);
}

/* LIGHT MODE OVERRIDES - Warm Editorial Cream Theme */
body.light-mode {
    --gold-accent: #a37c35;
    --dark-bg: #fcfbf9;
    --text-main: #1a1a1a;
    --text-muted: #757575;
    --border-subtle: #e0e0e0;
    --border-strong: #cccccc;

    --bg-grad-top: rgba(252, 251, 249, 0.85);
    --bg-grad-bottom: rgba(252, 251, 249, 0.98);
    --glass-panel: rgba(255, 255, 255, 0.65);
    --modal-overlay: rgba(252, 251, 249, 0.9);
    --toast-bg: var(--text-main);
    --toast-text: var(--dark-bg);
}

/* Global reset now lives in core.css (loaded first by base.html) */

body {
    background: linear-gradient(to bottom, var(--bg-grad-top), var(--bg-grad-bottom)), url('https://images.unsplash.com/photo-1519167758481-83f550bb49b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
    background-attachment: fixed;
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: color 0.4s ease;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--dark-bg); transition: background 0.4s ease; }
::-webkit-scrollbar-thumb { background: var(--border-strong); transition: background 0.4s ease; }

/* =========================================
    NAVIGATION
    ========================================= */
header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    padding: 40px 60px;
    border-bottom: 1px solid var(--border-subtle);
    transition: border-color 0.4s ease;
    position: relative;
    z-index: 100;
}

.logo {
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-size: 1.8rem;
    letter-spacing: 4px;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.4s ease;
    margin-right: auto;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-menu {
    display: flex;
    gap: 30px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn-text {
    background: none;
    border: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s;
    text-decoration: none;
}
.btn-text:hover { color: var(--gold-accent); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    order: 2;
}

/* Theme Toggle Button */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    color: var(--gold-accent);
    border-color: var(--gold-accent);
}

.theme-toggle .moon-icon { display: none; }
body.light-mode .theme-toggle .sun-icon { display: none; }
body.light-mode .theme-toggle .moon-icon { display: block; }

/* =========================================
    VIEW MANAGEMENT
    ========================================= */
.view-section {
    display: none;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 5%;
    flex: 1;
    animation: fadeIn 0.8s ease forwards;
}
.view-section.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
    LOGIN TERMINAL
    ========================================= */
.login-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    width: 100%;
}

.login-copy {
    flex: 1.2;
    display: none;
}

@media(min-width: 900px) {
    .login-copy {
        display: block;
    }
}

.login-copy h1 {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 1.1;
    color: var(--gold-accent);
    transition: color 0.4s ease;
}

.login-copy p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 2;
    max-width: 450px;
    transition: color 0.4s ease;
}

.login-container {
    flex: 1;
    max-width: 450px;
    padding: 40px;
    background: var(--glass-panel);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.login-header {
    margin-bottom: 40px;
    text-align: center;
}

.login-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    transition: color 0.4s ease;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.4s ease;
}

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 40px;
    transition: border-color 0.4s ease;
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 15px 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s;
}
.tab-btn.active {
    color: var(--gold-accent);
    border-bottom: 1px solid var(--gold-accent);
}

/* Forms & Utility Classes */
.form-row {
    display: flex;
    gap: 40px;
}

.form-col {
    flex: 1;
}

.form-group {
    margin-bottom: 30px;
    position: relative;
}

.form-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 10px;
    transition: color 0.4s ease;
}

.highlight-label {
    color: var(--gold-accent);
}

/* Base input control */
.form-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-strong);
    padding: 10px 0;
    color: var(--text-main);
    font-size: 1rem;
    transition: border-color 0.3s, color 0.4s ease;
}
.form-control:focus { outline: none; border-bottom-color: var(--gold-accent); }
.form-control.accent-input { border-bottom-color: var(--gold-accent); }

textarea.form-control { resize: vertical; min-height: 80px; }

/* Boxed fully enclosed inputs (for textareas/dropdowns) */
.form-control.boxed {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background-color: var(--dark-bg);
    color: var(--text-main);
    font-size: 1rem;
}
.form-control.boxed:focus {
    border-color: var(--gold-accent);
}

/* Dropdown specific */
.form-control.dropdown-select {
    width: 100%;
    padding: 12px 30px 12px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background-color: var(--dark-bg);
    color: var(--text-main);
    font-size: 1rem;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%2394a3b8" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}
.form-control.dropdown-select:focus {
    border-color: var(--gold-accent);
}

/* FIX FOR INVISIBLE DROPDOWN TEXT: Forces native OS menus to use a dark background */
.form-control.dropdown-select option {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

.form-helper {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 8px;
    display: block;
    transition: color 0.4s ease;
}

.btn-outline {
    display: inline-block;
    width: 100%;
    background: transparent;
    border: 1px solid var(--gold-accent);
    color: var(--gold-accent);
    padding: 18px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}
.btn-outline:hover { background: var(--gold-accent); color: var(--dark-bg); }

.btn-auto {
    width: auto;
    padding: 15px 40px;
}

.btn-outline.danger { border-color: var(--danger); color: var(--danger); }
.btn-outline.danger:hover { background: var(--danger); color: #fff; }

.bypass-bar {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-subtle);
    transition: border-color 0.4s ease;
}

/* =========================================
    DASHBOARD LAYOUT
    ========================================= */
.dashboard-header {
    margin-bottom: 60px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    transition: border-color 0.4s ease;
}

.dashboard-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.dashboard-header h1 span { font-weight: 600; color: var(--gold-accent); transition: color 0.4s ease; }

.status-indicator {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--success);
    min-width: max-content;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.status-indicator.is-inactive { color: var(--text-muted); }

.grid-layout {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 60px;
}
@media (max-width: 1024px) { .grid-layout { grid-template-columns: 1fr; } }

.content-section { margin-bottom: 60px; }

.section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--gold-accent);
    margin-bottom: 30px;
    transition: color 0.4s ease;
}

.section-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 30px;
    transition: color 0.4s ease;
}

/* Dynamic JS DOM Injection Classes */
.detail-list-row {
    display: block;
    min-height: 28px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    /* One line per row, always: keeps the five columns row-aligned even if a
       value outgrows its track. Full value stays available via title tooltip. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-list-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* An overnight booking runs across two dates. Rather than clip the range to an
   ellipsis, the closing date continues on a second line under the first.
   .has-multiday is set on the GRID, not on the row, so every column reserves
   the taller row height and the five columns stay in step -- otherwise the date
   column alone would grow and shear the rows out of alignment. */
.detail-grid.has-multiday .detail-list-row { min-height: 52px; }
.detail-list-row.is-multiday { white-space: normal; }
.detail-list-row.is-multiday .date-day {
    display: block;
    white-space: nowrap;   /* a single date never breaks mid-value */
    /* These spans live inside .detail-item, and `.detail-item span` is the
       COLUMN LABEL rule -- small, uppercase, letter-spaced, muted. Without
       this reset the dates get painted as if they were another "LOCKED DATE"
       heading. Reset to the value styling that .detail-item strong carries. */
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
    margin-bottom: 0;
}
/* The closing date reads as a continuation through position and the arrow, not
   through colour: it stays the same white as every other value, only a shade
   smaller. Muting it was what made it look like a label. */
.detail-list-row.is-multiday .date-day--next {
    font-size: 0.9em;
}

/* Metrics */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}
.metric-item {
    border-left: 2px solid var(--gold-accent);
    padding-left: 20px;
    transition: border-color 0.4s ease;
}
.metric-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 10px;
    transition: color 0.4s ease;
}
.metric-value {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--text-main);
    transition: color 0.4s ease;
}

/* Detail Grid */
.detail-grid {
    display: grid;
    /* Five fixed columns so Approval Code stays on the top row; minmax(0,..)
       lets long venue names wrap inside their track instead of blowing it out */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--border-subtle);
    margin-bottom: 0;
    transition: border-color 0.4s ease;
}

/* Total Quote summary line under the per-event columns */
.detail-total-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 0 24px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 40px;
    transition: border-color 0.4s ease;
}
.detail-total-row span {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    transition: color 0.4s ease;
}
.detail-total-row strong {
    font-size: 1.2rem;
    font-weight: 400;
}
.detail-item span {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 5px;
    transition: color 0.4s ease;
}
.detail-item strong {
    font-size: 1.1rem;
    font-weight: 400;
}
.detail-item strong.highlight { color: var(--gold-accent); }

/* Tables */
.table-wrapper { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th {
    padding: 15px 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--border-strong);
    font-weight: 500;
    transition: color 0.4s ease, border-color 0.4s ease;
}
.data-table td {
    padding: 25px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-subtle);
    transition: border-color 0.4s ease;
}

.text-sub { color: var(--text-muted); font-size: 0.8rem; display: block; margin-top: 4px; transition: color 0.4s ease;}

/* Status Text */
.status-text {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status-text.good { color: var(--success); }
.status-text.warn { color: var(--warning); }
.status-text.bad { color: var(--danger); }
.status-text.cancelled { color: var(--text-muted, #8a8a8a); font-style: italic; }
.row-cancelled { opacity: 0.55; }
.row-cancelled strong { text-decoration: line-through; }

/* Small Actions */
.action-links { display: flex; gap: 15px; }
.link-btn {
    background: none; border: none; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 1px; cursor: pointer; transition: color 0.3s;
}
.link-btn.primary { color: var(--gold-accent); }
.link-btn.primary:hover { color: var(--text-main); }
.link-btn.danger { color: var(--danger); }
.link-btn.danger:hover { color: var(--text-main); }

/* Modals */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--modal-overlay); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.4s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content {
    width: 90%; max-width: 800px; max-height: 80vh; overflow-y: auto;
    background: var(--dark-bg); padding: 60px; border: 1px solid var(--border-strong);
    position: relative;
    transition: background 0.4s ease, border-color 0.4s ease;
}
.close-btn {
    position: absolute; top: 30px; right: 30px;
    background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;
    transition: color 0.4s ease;
}

.modal-text-content p {
    margin-bottom: 20px;
}
.modal-text-content p:last-child {
    margin-bottom: 0;
}

/* Toast */
#toast {
    position: fixed; bottom: 40px; right: 40px; background: var(--toast-bg); color: var(--toast-text);
    padding: 20px 40px; font-family: 'Cinzel', serif; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 2px; font-weight: 600; transform: translateY(100px); opacity: 0; transition: all 0.4s;
    z-index: 2000;
}
#toast.show { transform: translateY(0); opacity: 1; }

.hidden { display: none !important; }

/* =========================================
   MOBILE OPTIMIZATION
   ========================================= */

.mobile-menu-btn, .mobile-close-btn {
    display: none;
}

/* --- Banner stack ---
   The ONE fixed element. Banners inside it are ordinary block flow, so two
   visible at once stack vertically instead of overprinting each other in the
   same strip. Nothing here should be given a height: it must be free to grow
   with its contents, because measureBannerStack() in booking.js reads that
   height back to offset the header. */
.banner-stack {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    /* The container spans the full width but only its banners should catch
       clicks -- otherwise an empty stack would sit over the header eating them. */
    pointer-events: none;
}
.banner-stack > * { pointer-events: auto; }

/* --- Countdown Banner --- */
.countdown-banner {
    background-color: var(--danger);
    color: #ffffff;
    padding: 12px 20px;
    position: relative;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.4s ease;
}

.countdown-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* The offset follows the stack's REAL height, set by booking.js on every
   render. Two banners are twice as tall as one, and a wrapped banner on a
   narrow screen is taller again -- a fixed 45px could only ever be right for
   one of those cases. The fallback covers the instant before the first
   measurement lands. */
body.has-banner header {
    margin-top: var(--bp-banner-h, 45px);
}

/* --- Payment Module --- */
.payment-module {
    border: 1px solid var(--gold-accent);
    background: linear-gradient(145deg, rgba(197, 160, 89, 0.05) 0%, transparent 100%);
    padding: 40px;
    margin-top: 40px;
}

.amount-display {
    text-align: center;
    margin: 30px 0;
}

.amount-display .currency {
    font-size: 1.5rem;
    color: var(--gold-accent);
    vertical-align: top;
}

.amount-display .amount {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    color: var(--text-main);
}

.amount-display .label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-top: 5px;
}

.payment-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}

.btn-paystack {
    background-color: #0ba4db;
    color: #ffffff;
    border: none;
    padding: 18px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-paystack:hover {
    background-color: #098bba;
}

.divider {
    text-align: center;
    position: relative;
    margin: 10px 0;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border-strong);
    z-index: 1;
}

.divider span {
    background: var(--dark-bg);
    padding: 0 15px;
    color: var(--text-muted);
    font-size: 0.7rem;
    position: relative;
    z-index: 2;
}

.manual-notice {
    text-align: center;
    color: var(--warning);
    font-size: 0.8rem;
    margin-top: 20px;
    padding: 15px;
    border: 1px dashed var(--warning);
    border-radius: 4px;
}

@media (max-width: 900px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--dark-bg);
        padding: 15px 20px;
        z-index: 1000;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border-subtle);
    }

    .view-section { padding: 100px 20px 30px 20px; }

    .logo { font-size: 1.2rem; }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
        z-index: 101;
    }

    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-main);
        cursor: pointer;
        position: relative;
        z-index: 101;
    }

    .mobile-menu-btn span {
        font-size: 0.55rem;
        margin-top: 4px;
        letter-spacing: 1px;
        font-family: 'Montserrat', sans-serif;
    }

    .nav-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--dark-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    body.menu-open .nav-container {
        opacity: 1;
        visibility: visible;
    }

    body.menu-open {
        overflow: hidden;
    }

    .mobile-close-btn {
        display: block;
        position: absolute;
        top: 30px;
        right: 30px;
        background: none;
        border: none;
        color: var(--text-main);
        font-size: 2rem;
        cursor: pointer;
    }

    .nav-menu {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .nav-menu .btn-text {
        font-size: 1.2rem;
    }

    .nav-actions {
        flex-direction: column;
    }

    .login-split {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .login-copy h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .login-container {
        width: 100%;
        padding: 30px 20px;
    }

    .grid-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 30px;
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    .detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 30px;
    }

    .dashboard-header h1 {
        font-size: 1.8rem;
    }

    .modal-content {
        width: 95%;
        padding: 30px 20px;
        max-height: 90vh;
    }

    .close-btn {
        top: 15px;
        right: 15px;
    }
}
/* =========================================================
   DE-INLINED COMPONENTS  (was inline style="" in booking.html)
   ========================================================= */

/* Small spacing utilities for one-off overrides */
.mb-0  { margin-bottom: 0 !important; }
.mb-20 { margin-bottom: 20px !important; }

/* Side-column payment module sits flush to the top */
.side-column .payment-module { margin-top: 0; margin-bottom: 60px; }

.payment-header h3 { margin-bottom: 10px; font-size: 1.1rem; }
.payment-header p  { margin-bottom: 0; }

/* Gold variant of the Paystack buttons (Mobile Money / Card-Bank) */
.btn-paystack--gold {
    background-color: var(--gold-accent);
    color: var(--dark-bg);
    font-weight: 700;
}
.btn-paystack--gold:hover { background-color: #a37c35; }

/* Manual (cheque) payment form */
.manual-form { margin-top: 20px; text-align: left; }
.manual-form .form-group { margin-bottom: 15px; }

.bank-details-box {
    background-color: rgba(197, 160, 89, 0.1);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 3px solid var(--gold-accent);
}
.bank-box-title {
    margin-bottom: 5px;
    color: var(--gold-accent);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1rem;
}

/* Dark inputs inside the manual form */
.input-dark {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--dark-bg);
    color: var(--text-main);
}
.input-dark.is-readonly {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: not-allowed;
}
.input-file {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--dark-bg);
    color: var(--text-main);
}

.form-actions { display: flex; gap: 15px; }
.btn-grow     { flex: 1; padding: 12px; font-weight: 600; }

/* Special-arrangement request form */
.field-row-wrap { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; }
.field-grow     { flex: 1; min-width: 200px; }
.btn-compact    { padding: 12px 24px; font-weight: 600; }

/* Full-terms modal sub-headings */
.terms-subhead {
    font-family: 'Cinzel', serif;
    color: var(--gold-accent);
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 1rem;
}
.terms-subhead--lg { margin-top: 40px; }

/* =========================================================
   DE-INLINED DYNAMIC PIECES  (was inline style="" in booking.js)
   ========================================================= */

/* Toast colour states (replaces t.style.backgroundColor) */
#toast.is-error   { background: var(--danger); }
#toast.is-success { background: var(--success); }

/* Detail value cells render as left-aligned blocks (was set per-render in JS) */
#detailEventName,
#detailLockedDate,
#detailCode,
#detailVenue { display: block; text-align: left; }

/* Payment breakdown rows */
.pay-breakdown-list { width: 100%; display: flex; flex-direction: column; margin-bottom: 15px; font-size: 0.85rem; font-weight: normal; color: var(--text-muted); }
.pay-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}
.pay-breakdown-code { font-weight: 600; }
.pay-breakdown-sub  { opacity: 0.6; font-size: 0.8em; margin-top: 2px; }
.pay-cleared        { color: var(--success); font-weight: 600; }
.pay-total          { margin-top: 5px; font-size: 1.8rem; font-weight: 700; color: var(--text-main); }

/* Deposit / Full-balance toggle */
.pay-toggle { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; line-height: 1.2; }
.pay-toggle-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--gold-accent);
    border-radius: 4px;
    background: transparent;
    color: var(--gold-accent);
    cursor: pointer;
    transition: 0.3s;
}
.pay-toggle-btn.is-active { background: var(--gold-accent); color: #000; }

/* Bank-instruction lines */
.bank-line  { margin-bottom: 4px; font-size: 0.9rem; color: var(--text-main); }
.bank-payee { margin-bottom: 6px; font-size: 0.95rem; font-weight: 600; color: var(--gold-accent); }
.bank-note  { margin-bottom: 0; font-size: 0.85rem; color: var(--text-muted); }

/* Countdown banner + notice state colours (replaces .style.backgroundColor / .style.color) */
.countdown-banner.is-warning { background-color: var(--warning); }
.countdown-banner.is-danger  { background-color: var(--danger); }
.countdown-banner--full { background-color: var(--gold-accent); color: #1a1a1a; }
.countdown-banner--full.is-warning { background-color: var(--warning); color: #ffffff; }
.manual-notice.is-failed     { color: var(--danger); }

/* ============================================
   RESERVATION LEDGER: Upcoming / Past segmentation + clutter control
   ============================================ */
.ledger-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ledger-seg {
    display: inline-flex;
    border: 1px solid rgba(201, 165, 92, 0.35);
    border-radius: 999px;
    overflow: hidden;
}
.ledger-seg-btn {
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 18px;
    cursor: pointer;
    opacity: 0.65;
    transition: background 0.2s, opacity 0.2s, color 0.2s;
}
.ledger-seg-btn.is-active {
    background: rgba(201, 165, 92, 0.18);
    color: var(--accent, #c9a55c);
    opacity: 1;
}
.ledger-count {
    font-size: 0.72rem;
    letter-spacing: 1px;
    opacity: 0.6;
    text-transform: uppercase;
}
.ledger-expand-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: transparent;
    border: 1px dashed rgba(201, 165, 92, 0.4);
    border-radius: 8px;
    color: var(--accent, #c9a55c);
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.ledger-expand-btn:hover {
    background: rgba(201, 165, 92, 0.1);
    border-color: var(--accent, #c9a55c);
}
.ledger-expand-btn.hidden {
    display: none;
}
.cancel-reason {
    display: block;
    font-size: 0.72rem;
    opacity: 0.75;
    margin-top: 2px;
}

/* ============================================
   BETA PATCH — MINIMIZABLE PAYMENT REMINDER
   (appended; later rules override earlier ones)
   ============================================ */
.banner-min-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    margin-left: 4px;
    flex: 0 0 auto;
}
.banner-min-btn svg { transition: transform 0.25s ease; }

/* Minimized: the full-width banner collapses to a floating pill in the top
   corner showing just the live timer, so it stops covering the page. */
/* A minimized banner leaves the stack's flow entirely (that is what makes it
   stop covering the page), so it positions against the viewport rather than
   against its container. Its height is excluded from the measured stack height
   by design -- see measureBannerStack(). */
.countdown-banner.is-minimized {
    position: fixed;
    left: auto;
    right: 12px;
    top: 12px;
    width: auto;
    max-width: none;
    border-radius: 999px;
    padding: 8px 10px 8px 16px;
}
.countdown-banner.is-minimized .countdown-content {
    gap: 8px;
    flex-wrap: nowrap;
}
/* font-size:0 hides the sentence while the <strong> timer inside stays live */
.countdown-banner.is-minimized .banner-text {
    font-size: 0;
    letter-spacing: 0;
}
.countdown-banner.is-minimized .banner-text strong {
    font-size: 0.85rem;
    letter-spacing: 1px;
}
.countdown-banner.is-minimized .banner-min-btn svg { transform: rotate(180deg); }

/* Header reclaims the banner strip once the reminder is a pill */
body.has-banner.banner-minimized header { margin-top: 0; }

/* Mobile: the expanded banner wraps to 2-3 lines, so the fixed 45px offset
   let it overlap the header/menu (beta note). Give it real room and keep the
   minimize button reachable. */
@media (max-width: 640px) {
    .countdown-content {
        flex-wrap: wrap;
        font-size: 0.78rem;
        text-align: left;
        justify-content: flex-start;
    }
    .countdown-banner:not(.is-minimized) .banner-text { flex: 1 1 200px; }
    /* No mobile-specific margin-top override any more: --bp-banner-h is
       measured from the rendered stack, so a banner that wraps to three lines
       on a narrow screen is accounted for automatically. The old fixed 96px
       was a guess that broke the moment a second banner appeared. */
}

/* Cloudflare Turnstile widget on the client sign-in form. Wrapper only --
   spacing and centring; the widget itself is rendered by Cloudflare. */
.turnstile-wrapper {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}

/* =========================================
    PORTAL REVIEWS
    Reuses the portal's existing form controls (.form-control, .btn-outline)
    so the section reads as part of the dashboard rather than a bolt-on. Only
    the pieces with no existing equivalent are defined here.
    ========================================= */
.review-single-line {
    margin-bottom: 20px;
    padding: 10px 14px;
    border-left: 2px solid var(--accent);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.form-hint {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.5;
}

.review-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--border-line);
    border-radius: 8px;
}

.review-consent-row input {
    margin-top: 3px;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.review-consent-row label {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
    cursor: pointer;
}

.form-status {
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 14px;
    min-height: 1px;
}

.form-status.is-error { color: var(--danger); }
.form-status.is-ok { color: var(--accent); }

.review-thanks-line {
    padding: 14px 16px;
    border-left: 2px solid var(--accent);
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Review reminder banner. Same shell as the payment countdowns, in a quieter
   colour: this is an invitation, not a deadline, and it must never be mistaken
   for one of the two banners that mean money is due. */
/* Review reminder. OPAQUE on purpose: at 14% alpha this let the page (or, when
   the banners overlapped, another banner) show through, which is precisely the
   unreadable smear this rework fixes. Still visually quieter than the payment
   banners -- it is an invitation, not a deadline -- but quiet by colour choice,
   not by transparency. */
.countdown-banner--review {
    background: #2a2418;
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    box-shadow: none;
}

.banner-link {
    background: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    padding: 5px 14px;
    margin-left: 14px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.banner-link:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 640px) {
    .banner-link { margin-left: 8px; padding: 4px 10px; }
}

/* --- Existing-review acknowledgment ---
   Shown above the textarea when the selected event has already been reviewed.
   Deliberately quiet: this is information, not an alert. */
.review-existing {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid var(--border-line);
    border-left: 2px solid var(--accent);
    border-radius: 8px;
}

.review-existing-head {
    color: var(--text-main);
    font-size: 0.86rem;
    margin-bottom: 10px;
}

.review-existing-quote {
    margin: 0 0 12px;
    padding-left: 12px;
    border-left: 1px solid var(--border-line);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-style: italic;
    line-height: 1.6;
    white-space: pre-wrap;
}

.review-existing-warning {
    color: var(--warning);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.review-existing-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* Until the client chooses to amend, the textarea shows their existing words
   read-only. Dimming it is what makes "this is what you said" legible at a
   glance rather than looking like an editable draft. */
#portalReviewForm.is-locked .form-control:not(.review-existing-quote) {
    opacity: 0.6;
}

#portalReviewForm.is-locked #portalReviewSubmit {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Refundable security deposit block ---------------------------------------
   Sits below the payment actions inside the payment module, visually separated
   so it never reads as part of the hire-fee total above it. Deliberately NOT
   styled like the 50%/Full toggle: those are two ways to settle one obligation,
   this is a second obligation. */
.bond-block {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid var(--gold-accent);
    border-radius: 4px;
    background: rgba(205, 168, 92, 0.06);
}

.bond-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.bond-title {
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-accent);
}

.bond-status {
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.bond-status.is-outstanding { color: var(--danger); }
.bond-status.is-held        { color: var(--gold-accent); }
.bond-status.is-returned    { color: var(--success, #4caf50); }
.bond-status.is-forfeited   { color: var(--warning); }

.bond-amount {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

/* The headline figure means "pay this" before the bond is settled and "we are
   holding this" afterwards. Same number, opposite meaning -- so it is labelled
   rather than left for the client to infer. */
.bond-amount-label {
    font-size: 0.66rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 12px;
}

.bond-note {
    font-size: 0.76rem;
    line-height: 1.6;
    opacity: 0.75;
    margin-bottom: 12px;
}

.bond-lines {
    font-size: 0.78rem;
    margin-bottom: 14px;
}

/* The booking code was breaking mid-token ("BP-" / "A08CE4") in the portal's
   narrow right-hand column: a two-column flex with no minimum on the left let
   the code column collapse to almost nothing. It now refuses to wrap and the
   value column yields instead. */
.bond-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(205, 168, 92, 0.35);
}
.bond-line:last-child { border-bottom: none; }

.bond-line .bond-line-code {
    letter-spacing: 1px;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Amount and state stack in the narrow column rather than fighting for one
   line, and the block stays right-aligned against the amount above it. */
.bond-line-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    min-width: 0;
}

.bond-line-state {
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Nothing left to pay: keep the block (the client should still see the bond is
   held on their behalf) but drop the call to action. */
.bond-block.is-settled #btnPayBond { display: none; }

@media (max-width: 640px) {
    .bond-head { flex-wrap: wrap; }
    .bond-amount { font-size: 1.35rem; }
}