/* ===========================
   Bookings Request – Premium skin
   (readability + colour boost + wine→rose logistics)
   =========================== */

/* -------- Brand-tuned CSS vars -------- */
:root {
    /* Core glass tints (darker base = easier reading without “dark text”) */
    --alg-glass-bg: linear-gradient(135deg, rgba(26,28,38,.62), rgba(255,255,255,.10));
    --alg-glass-bg-sub: linear-gradient(135deg, rgba(20,22,30,.58), rgba(255,255,255,.08));
    --alg-glass-sticky: linear-gradient(135deg, rgba(14,16,24,.70), rgba(255,255,255,.10));
    --alg-border: rgba(255,255,255,.26);
    --alg-border-sub: rgba(255,255,255,.20);
    --alg-shadow: 0 18px 50px rgba(0,0,0,.30);
    --alg-text-strong: #eef2f7;
    --alg-text-muted: rgba(238,242,247,.88);
    --alg-placeholder: rgba(238,242,247,.58);
    --alg-focus: rgba(0,200,255,.60);
    --alg-focus-ring: rgba(0,200,255,.22);
    /* Logistics (wine → rose, NO white) */
    --alg-warn-bg: linear-gradient(135deg, rgba(92, 14, 36, .72), /* wine */
    rgba(140, 34, 68, .62), /* berry */
    rgba(118, 44, 74, .52) /* rose-plum */
    );
    --alg-warn-border: rgba(200, 80, 118, .48);
    /* Info tint */
    --alg-info-bg: linear-gradient(135deg, rgba(0,200,255,.18), rgba(255,255,255,.07));
    --alg-info-border: rgba(0,200,255,.26);
}

/* Container */
.bookings-page {
    max-width: 1100px;
    margin: 0 auto;
    color: var(--alg-text-strong);
}

    /* Headings stay crisp */
    .bookings-page h1, .bookings-page h2, .bookings-page h3,
    .bookings-page h4, .bookings-page h5, .bookings-page h6 {
        color: var(--alg-text-strong);
        text-shadow: 0 1px 0 rgba(0,0,0,.35);
    }

/* ----------------------------
   Glass card shells (with overlay)
   ---------------------------- */
.bookings-card {
    position: relative;
    border-radius: 22px;
    padding: 18px;
    border: 1px solid var(--alg-border);
    background: var(--alg-glass-bg);
    box-shadow: var(--alg-shadow), inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}

    .bookings-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
        opacity: .92;
        pointer-events: none;
    }

    .bookings-card > * {
        position: relative;
        z-index: 1;
    }

/* Sub / inset panels */
.bookings-card--sub {
    position: relative;
    border-radius: 18px;
    border: 1px solid var(--alg-border-sub);
    background: var(--alg-glass-bg-sub);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    overflow: hidden;
}

    .bookings-card--sub::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.12);
        pointer-events: none;
    }

    .bookings-card--sub > * {
        position: relative;
        z-index: 1;
    }

/* Sticky helper panel */
.bookings-card--sticky {
    position: relative;
    border-radius: 18px;
    border: 1px solid var(--alg-border);
    background: var(--alg-glass-sticky);
    box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
    overflow: hidden;
}

    .bookings-card--sticky::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.18);
        pointer-events: none;
    }

    .bookings-card--sticky > * {
        position: relative;
        z-index: 1;
    }

/* ----------------------------
   Text readability (muted/help)
   ---------------------------- */
.bookings-card .text-muted,
.alg-toolbar .text-muted,
.bookings-page .form-text,
.bookings-page small,
.bookings-page .small {
    color: var(--alg-text-muted) !important;
    opacity: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.bookings-page label.form-label {
    color: var(--alg-text-strong);
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.bookings-page hr {
    border-color: rgba(255,255,255,.18);
    opacity: 1;
}

.bookings-page ul,
.bookings-page li {
    color: var(--alg-text-muted);
}

/* ----------------------------
   Infobars (Travel + What next)
   ---------------------------- */
.alg-infobar {
    position: relative;
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid var(--alg-border);
    background: var(--alg-glass-bg);
    box-shadow: 0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}

    .alg-infobar::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.12);
        pointer-events: none;
    }

    .alg-infobar > * {
        position: relative;
        z-index: 1;
    }

/* INFO bar tint (if you use .alert-info or want to reuse) */
.bookings-page .alert.alert-info {
    border-color: var(--alg-info-border);
    background: var(--alg-info-bg);
}

/* ====== IMPORTANT: Logistics (wine → rose) ======
   Use !important so it ALWAYS wins, even if other CSS exists.
*/
.alg-infobar-warn {
    border-color: var(--alg-warn-border) !important;
    background: var(--alg-warn-bg) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

    /* Add a soft “lift” (no white block) to improve line readability */
    .alg-infobar-warn::before {
        background: radial-gradient(1100px 260px at 18% 10%, rgba(255,170,200,.14), transparent 60%), radial-gradient(900px 300px at 84% 30%, rgba(255,130,170,.10), transparent 62%), rgba(0,0,0,.14);
        opacity: .92;
    }

    /* Make the logistics lines pop without changing to dark text */
    .alg-infobar-warn,
    .alg-infobar-warn .small,
    .alg-infobar-warn ul,
    .alg-infobar-warn li {
        color: #fff3f6 !important;
        text-shadow: 0 1px 0 rgba(0,0,0,.46);
    }

        .alg-infobar-warn i {
            color: #ffd1dc;
        }

        .alg-infobar-warn ul {
            margin-top: .35rem;
            margin-bottom: .35rem;
            padding-left: 1.15rem;
        }

        .alg-infobar-warn li {
            margin-bottom: .18rem;
        }

/* ----------------------------
   Inputs on glass
   ---------------------------- */
.alg-field,
.bookings-page .form-control,
.bookings-page .form-select {
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--alg-text-strong);
}

.bookings-page ::placeholder {
    color: var(--alg-placeholder) !important;
    opacity: 1;
}

.bookings-page .input-group-text {
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.18);
    color: var(--alg-text-muted);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.alg-field:focus,
.bookings-page .form-control:focus,
.bookings-page .form-select:focus {
    outline: none;
    border-color: var(--alg-focus);
    box-shadow: 0 0 0 4px var(--alg-focus-ring), inset 0 1px 0 rgba(255,255,255,.20);
    color: var(--alg-text-strong);
}

/* Required asterisk */
.bookings-page .text-danger {
    color: #ff8aa0 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.30);
}

/* ----------------------------
   Progress bar polish
   ---------------------------- */
.bookings-progress {
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    overflow: hidden;
}

    .bookings-progress .progress-bar {
        border-radius: 999px;
        background: linear-gradient(90deg,#00d1ff,#6ee7ff,#c9f0ff);
        box-shadow: 0 10px 18px rgba(0,0,0,.22);
    }

/* Step links readability */
#onboardingProgressWrap a {
    color: rgba(238,242,247,.82);
    text-shadow: 0 1px 0 rgba(0,0,0,.30);
}

    #onboardingProgressWrap a.text-success {
        color: rgba(120,255,190,.92) !important;
    }

/* ----------------------------
   Buttons (keep alg-btn system)
   ---------------------------- */
.alg-btn, .alg-btn-primary, .btn-primary {
    border-radius: 14px;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.btn-primary {
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: 0 12px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ----------------------------
   IMPORTANT FIX:
   Your JS adds `bg-light` to invoiceEmail when readonly.
   Keep it glassy so it doesn't wash out text.
   ---------------------------- */
.bookings-page .bg-light {
    background: rgba(255,255,255,.12) !important;
    color: var(--alg-text-strong) !important;
}

/* Checkbox label readability */
.bookings-page .form-check-label {
    color: var(--alg-text-muted);
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Badges (Local time badge uses bg-light text-dark) */
.bookings-page .badge {
    filter: saturate(1.05) brightness(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* ----------------------------
   Notes helper line finisher:
   Make the “Useful info includes…” line always visible.
   Markup: <textarea id="Form_Notes"></textarea><div class="form-text">...</div>
   ---------------------------- */
#Form_Notes + .form-text {
    display: inline-block;
    padding: .5rem .75rem;
    margin-top: .55rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.22);
    background: linear-gradient(135deg, rgba(0,0,0,.24), rgba(255,255,255,.08));
    box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Mobile tweaks */
@media (max-width:576px) {
    .bookings-card {
        padding: 14px;
        border-radius: 18px;
    }

    .bookings-page .input-group-text {
        border-radius: 12px 0 0 12px;
    }

    #Form_Notes + .form-text {
        display: block;
        width: 100%;
    }
}

/* Premium readonly field (no grey slab) */
.alg-field-readonly {
    opacity: .92;
    cursor: not-allowed;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

.onboarding-sticky {
    position: sticky;
    top: 10px;
    z-index: 2;
}

/* ===========================
   Cyber Premium boost (Request form)
   Add class: .bookings-card--cyber
   =========================== */

.bookings-card--cyber {
    /* a little more “night glass” */
    border-color: rgba(0, 210, 255, .30);
    box-shadow: 0 18px 55px rgba(0,0,0,.34), 0 0 0 1px rgba(0, 210, 255, .10) inset;
}

    /* animated neon edge (subtle) */
    .bookings-card--cyber::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 24px;
        padding: 2px;
        background: linear-gradient( 120deg, rgba(0,210,255,.00), rgba(0,210,255,.55), rgba(155,85,255,.35), rgba(0,210,255,.55), rgba(0,210,255,.00) );
        background-size: 260% 260%;
        animation: algNeonSweep 7.5s ease-in-out infinite;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        opacity: .85;
    }

    /* very soft “glow fog” in the corners */
    .bookings-card--cyber .bookings-card--sub,
    .bookings-card--cyber .bookings-card--sticky {
        border-color: rgba(0, 210, 255, .22);
    }

/* Make focus feel cyber: neon halo + gentle lift */
.bookings-page .form-control:focus,
.bookings-page .form-select:focus,
.alg-field:focus {
    border-color: rgba(0, 210, 255, .72);
    box-shadow: 0 0 0 4px rgba(0, 210, 255, .18), 0 0 0 1px rgba(155, 85, 255, .12) inset, 0 10px 22px rgba(0,0,0,.20);
    transform: translateY(-1px);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

/* Inputs get a tiny cyber sheen on hover */
.bookings-page .form-control:hover,
.bookings-page .form-select:hover,
.alg-field:hover {
    border-color: rgba(0, 210, 255, .28);
}

/* Progress bar = more cyber (still tasteful) */
.bookings-progress .progress-bar {
    background: linear-gradient(90deg, rgba(0,210,255,1), rgba(120,255,255,1), rgba(155,85,255,.95), rgba(0,210,255,1) );
    background-size: 220% 220%;
    animation: algNeonSweep 6.5s ease-in-out infinite;
}

/* Optional: make the “submit” button look a bit more “charged” */
.alg-btn-primary {
    box-shadow: 0 14px 30px rgba(0,0,0,.30), 0 0 0 1px rgba(0,210,255,.18) inset, 0 0 22px rgba(0,210,255,.14);
}

/* reduce motion friendliness */
@media (prefers-reduced-motion: reduce) {
    .bookings-card--cyber::after,
    .bookings-progress .progress-bar {
        animation: none !important;
    }
}

@keyframes algNeonSweep {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===== Booking Request: Cyber Premium polish ===== */
.bookings-request-page .alg-toolbar--cyber {
    position: relative;
    border-radius: 16px;
    padding: 18px 18px;
    background: linear-gradient(110deg, rgba(130,70,255,.18), rgba(0,210,255,.12), rgba(255,70,170,.10));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    backdrop-filter: blur(12px);
}

    .bookings-request-page .alg-toolbar--cyber::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        pointer-events: none;
        background: radial-gradient(800px 120px at 12% 0%, rgba(255,255,255,.14), transparent 60%), radial-gradient(700px 140px at 80% 10%, rgba(0,210,255,.14), transparent 60%);
        mix-blend-mode: screen;
    }

.alg-infobar--cyber {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0,0,0,.20);
}

.bookings-progress--cyber {
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
}

    .bookings-progress--cyber .progress-bar {
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(140,90,255,.95), rgba(0,210,255,.95), rgba(255,80,190,.95));
        box-shadow: 0 0 18px rgba(0,210,255,.25);
    }

.bookings-card--sub-cyber {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
}

.bookings-request-page .onboarding-steps a {
    padding: 2px 6px;
    border-radius: 10px;
}

    .bookings-request-page .onboarding-steps a.text-success {
        background: rgba(0,210,255,.12);
        border: 1px solid rgba(0,210,255,.22);
    }

/* readonly look used by invoice autofill */
.alg-field-readonly {
    opacity: .92;
    filter: saturate(.9);
}

/* =========================================================
   Booking Request – ULTRA CYBER (remove grey bleed-through)
   Scope: ONLY the request page (bookings-request-page)
   Paste at end of bookings.css
   ========================================================= */

/* Full-page cyber backdrop (stops the “grey” feel immediately) */
.bookings-request-page {
    position: relative;
    isolation: isolate; /* keeps ::before/::after behind content */
}

    /* Deep neon gradient wash */
    .bookings-request-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        background: radial-gradient(1200px circle at 15% 10%, rgba(0,200,255,.22), transparent 55%), radial-gradient(900px circle at 85% 0%, rgba(138,43,226,.18), transparent 55%), radial-gradient(1000px circle at 60% 115%, rgba(255,0,122,.14), transparent 60%), linear-gradient(180deg, #05060d 0%, #070a14 35%, #04050a 100%);
        filter: saturate(1.25) contrast(1.06);
        opacity: .55; /* add this */
        filter: saturate(1.10) contrast(1.02); /* soften */
    }

    /* Subtle cyber grid + scanlines */
    .bookings-request-page::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(255,255,255,.040) 0 1px, transparent 1px 48px), repeating-linear-gradient(180deg, rgba(0,0,0,.00) 0 8px, rgba(0,0,0,.10) 8px 9px);
        opacity: .6;
        mix-blend-mode: overlay;
        
    }

    /* Make the MAIN request card darker/cleaner (kills grey) */
    .bookings-request-page .bookings-card--cyber {
        background: linear-gradient(135deg, rgba(10,12,22,.88), rgba(18,20,34,.66));
        border: 1px solid rgba(255,255,255,.22);
        box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(0,200,255,.14), inset 0 1px 0 rgba(255,255,255,.14);
    }

        /* Stronger inner overlay (less “milky”) */
        .bookings-request-page .bookings-card--cyber::before {
            background: radial-gradient(900px circle at 20% 0%, rgba(0,200,255,.10), transparent 60%), radial-gradient(800px circle at 100% 30%, rgba(255,0,122,.08), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.18));
            opacity: .95;
        }

    /* Sub-cards (When / sticky etc.) – keep them dark cyber, not grey */
    .bookings-request-page .bookings-card--sub,
    .bookings-request-page .bookings-card--sub-cyber,
    .bookings-request-page .bookings-card--sticky {
        background: linear-gradient(135deg, rgba(8,10,18,.82), rgba(18,20,34,.54));
        border: 1px solid rgba(255,255,255,.18);
        box-shadow: 0 14px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
    }

    /* Inputs: slightly brighter glass so they pop on the darker surface */
    .bookings-request-page .alg-field,
    .bookings-request-page .form-control,
    .bookings-request-page .form-select,
    .bookings-request-page textarea.form-control {
        background: rgba(255,255,255,.075) !important;
        border-color: rgba(255,255,255,.18) !important;
    }

    /* Muted text: keep readable (grey was killing the premium feel) */
    .bookings-request-page .text-muted,
    .bookings-request-page .form-text {
        color: rgba(238,242,247,.86) !important;
    }

    /* Section rules: subtle neon */
    .bookings-request-page hr {
        border-color: rgba(0,200,255,.16) !important;
        opacity: 1;
    }

    /* Progress bar glow */
    .bookings-request-page .bookings-progress .progress-bar {
        box-shadow: 0 0 16px rgba(0,200,255,.40);
    }

    /* =========================================================
   Booking Request – ULTRA CYBER v2
   (restore neon edges + add colour + reduce darkness/grey)
   Paste at END of bookings.css
   ========================================================= */

    /* Page backdrop: keep it, but make it lighter + more colourful */
    .bookings-request-page::before {
        /* slightly brighter + more colour */
        opacity: .28 !important;
        filter: saturate(1.18) contrast(1.03) brightness(1.06) !important;
        background: radial-gradient(1100px circle at 14% 12%, rgba(0, 220, 255, .26), transparent 58%), radial-gradient(900px circle at 88% 6%, rgba(255, 140, 0, .14), transparent 56%), radial-gradient(1000px circle at 62% 112%, rgba(255, 0, 122, .16), transparent 62%), linear-gradient(180deg, #070816 0%, #070a14 38%, #05060d 100%) !important;
    }

    /* Grid/scanlines: this is what was “greying” everything out */
    .bookings-request-page::after {
        opacity: .38 !important; /* was .6 (too heavy) */
        mix-blend-mode: overlay;
        background: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 56px), repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 56px), repeating-linear-gradient(180deg, rgba(0,0,0,.00) 0 10px, rgba(0,0,0,.10) 10px 11px) !important;
    }

    /* Main card: lighten slightly + add cyan/orange corner glow */
    .bookings-request-page .bookings-card--cyber {
        background: linear-gradient(135deg, rgba(14,16,30,.82), rgba(26,28,46,.58)) !important;
        border-color: rgba(255,255,255,.20) !important;
        box-shadow: 0 22px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(0,210,255,.16), 0 0 26px rgba(0,210,255,.10), inset 0 1px 0 rgba(255,255,255,.12) !important;
    }

        /* Inner overlay: reduce the “black blanket” that kills colour */
        .bookings-request-page .bookings-card--cyber::before {
            opacity: .86 !important; /* was .95 */
            background: radial-gradient(900px circle at 18% 0%, rgba(0,210,255,.14), transparent 60%), radial-gradient(850px circle at 102% 28%, rgba(255,140,0,.10), transparent 62%), radial-gradient(900px circle at 70% 120%, rgba(255,0,122,.10), transparent 62%), linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.12)) !important;
        }

        /* Restore/boost the neon edge so it reads clearly again */
        .bookings-request-page .bookings-card--cyber::after {
            opacity: .95 !important; /* was .85 */
            filter: drop-shadow(0 0 10px rgba(0,210,255,.22)) drop-shadow(0 0 18px rgba(255,140,0,.10));
            background: linear-gradient(120deg, rgba(0,210,255,.00), rgba(0,210,255,.70), rgba(255,140,0,.35), rgba(155,85,255,.38), rgba(0,210,255,.70), rgba(0,210,255,.00) ) !important;
            background-size: 260% 260% !important;
        }

    /* Sub-panels: lift them a touch so they don’t go “flat grey” */
    .bookings-request-page .bookings-card--sub,
    .bookings-request-page .bookings-card--sub-cyber,
    .bookings-request-page .bookings-card--sticky {
        background: linear-gradient(135deg, rgba(12,14,26,.74), rgba(28,30,48,.50)) !important;
        border-color: rgba(255,255,255,.16) !important;
    }

    /* Inputs: slightly brighter glass + tiny cyan edge on hover */
    .bookings-request-page .alg-field,
    .bookings-request-page .form-control,
    .bookings-request-page .form-select,
    .bookings-request-page textarea.form-control {
        background: rgba(255,255,255,.09) !important;
        border-color: rgba(255,255,255,.18) !important;
    }

        .bookings-request-page .alg-field:hover,
        .bookings-request-page .form-control:hover,
        .bookings-request-page .form-select:hover {
            border-color: rgba(0,210,255,.32) !important;
        }

    /* HR lines: subtle neon (less “white/grey”) */
    .bookings-request-page hr {
        border-color: rgba(0,210,255,.14) !important;
    }