/* Frontend visual-effect classes — FE-18 migration: replaces repeated inline
 * style="" gradients/effects on frontend views with named classes so the
 * styling is centralised and consistent. Page-scoped to frontend pages
 * (linked from layouts/main.php); NOT used by dashboard/admin views.
 */

/* Dark hero background glow (page hero / section backgrounds) */
.fx-hero-glow {
    background: radial-gradient(ellipse at 50% 30%, #18182a 0%, #06060e 70%);
}

.fx-hero-glow-soft {
    background: radial-gradient(ellipse at 50% 30%, #1b1b23 0%, #0b0b0f 70%);
}

/* Gold ambient glow (radial, behind content) */
.fx-gold-glow {
    background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(212, 167, 74, 0.06) 0%, transparent 70%);
}

.fx-gold-glow-08 {
    background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(212, 167, 74, 0.08) 0%, transparent 70%);
}

.fx-gold-glow-alt {
    background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(155, 122, 51, 0.08) 0%, transparent 70%);
}

/* Gold hairline divider */
.fx-gold-divider {
    background: linear-gradient(to right, transparent, var(--gold-soft), var(--gold), transparent);
}

/* Decorative diagonal gold wash (rotated bands behind hero content) */
.fx-gold-band {
    background: linear-gradient(to bottom, rgba(212, 167, 74, 0.06) 0%, transparent 65%);
    transform-origin: top center;
    transform: rotate(10deg);
}

.fx-gold-band-reverse {
    background: linear-gradient(to bottom, rgba(212, 167, 74, 0.06) 0%, transparent 65%);
    transform-origin: top center;
    transform: rotate(-10deg);
}

/* Translucent dark scrim (overlays) */
.fx-scrim {
    background: rgba(0, 0, 0, 0.12);
}

/* Header: sticky glass blur over the page background */
.fx-header {
    background: var(--bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Mobile menu panel background */
.fx-menu-bg {
    background: var(--bg-soft);
}

/* Primary CTA button (solid accent) */
.fx-cta {
    background: var(--cta);
    color: #fff;
}

/* Footer background */
.fx-footer-bg {
    background: var(--bg);
}

/* Footer logo treatment (invert dark logos on dark bg) */
.fx-logo-invert {
    filter: invert(1) brightness(2);
    opacity: 0.85;
    max-width: 7rem;
}

.fx-logo {
    max-width: 7rem;
}

/* Hero base gradient (stronger, page-specific hero backgrounds) */
.fx-hero-base {
    background: linear-gradient(160deg, #08080f 0%, #0c0b14 55%, #0b0a10 100%);
}

/* Dark overlay gradient over hero imagery (bottom-weighted) */
.fx-overlay-dark {
    background: linear-gradient(to bottom, rgba(8, 8, 15, 0.6) 0%, rgba(8, 8, 15, 0.3) 40%, rgba(8, 8, 15, 0.7) 100%);
}

/* Hero background image treatment (grayscale for brand-consistent imagery) */
.fx-hero-img {
    filter: grayscale(0.85) contrast(1.08) brightness(0.65);
}

/* Section tint backgrounds (subtle elevated panels) */
.fx-section-tint {
    background: rgba(42, 42, 52, 0.25);
}

.fx-section-tint-soft {
    background: rgba(42, 42, 52, 0.15);
}

/* Vertical gold rule (timeline/divider accent) */
.fx-gold-rule-v {
    background: linear-gradient(to bottom, rgba(155, 122, 51, 0.4), rgba(194, 163, 93, 0.6), rgba(155, 122, 51, 0.4));
}

/* Callout left-border accent */
.fx-callout-gold {
    border-left-color: var(--gold);
}

/* Important payment note — gold-tinted so it reads as a notice, not a
   plain paragraph. */
.fx-important-note {
    background: linear-gradient(135deg, rgba(212, 167, 74, 0.10), rgba(212, 167, 74, 0.03));
    border: 1px solid rgba(212, 167, 74, 0.35);
}

/* Booking grid container — fills ~90% of the viewport on wide screens so the
   form uses the available width (the owner's target proportion), capped so
   ultra-wide monitors don't stretch unreasonably. */
.booking-grid {
    width: 100%;
    max-width: 1280px;
}

@media (min-width: 1400px) {
    .booking-grid {
        width: 90%;
        max-width: 1720px;
    }
}

/* Booking note column — sticky left aside mirroring the order summary on the
   right; keeps the payment Important Note in view while scrolling. */
[data-booking-note-col] {
    position: sticky;
    top: 6rem;
    align-self: start;
}

@media (max-width: 1023px) {
    /* Below the lg grid breakpoint the columns stack — no side column to pin
       against; keep the note static in flow (renders above the form). */
    [data-booking-note-col] {
        position: static;
    }
}

/* Booking summary column — sticky so the order summary + progress stay in
   view while scrolling the form. Requires section overflow-x:clip (not
   hidden) — hidden creates a scroll container that breaks sticky; clip clips
   without creating one, so sticky engages naturally at every viewport. */
[data-booking-summary-col] {
    position: sticky;
    top: 6rem;
    align-self: start;
}

/* Opaque background for the sticky column so content scrolling underneath
   does not show through the translucent operational-panel cards. */
[data-booking-summary-col] .operational-panel {
    background-color: var(--bg-soft, #0c0c11);
}

/* Booking progress indicator — inline chip above the order summary */
[data-booking-progress][data-booking-progress-inline] {
    border: 1px solid rgba(212, 167, 74, 0.35);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

[data-booking-progress] [data-booking-progress-label] {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

[data-booking-progress] [data-booking-progress-pct] {
    font-size: 0.75rem;
    font-weight: 700;
}

[data-booking-progress] [data-booking-progress-track] {
    height: 0.5rem;
    margin-top: 0.4rem;
}

@media (max-width: 1023px) {
    /* Below the lg grid breakpoint the columns stack — no right column to
       pin against; keep the summary static in flow. */
    [data-booking-summary-col] {
        position: static;
        width: auto;
    }
}