/* ==========================================================================
   THEME.CSS — AT STUDIO
   ▸ This is the ONLY file you edit per client.
   ▸ Change the values below to match their wedding theme.
   ▸ Never touch style.css for color changes.

   Active Client : RAPP & JESELLE
   Theme         : SPRING GARDEN — Pastel Floral Palette
   Accent        : Dusty Rose (#C97B8A) — warm, readable, never washes out
   Secondary     : Sage Green (#8BAF8A) — garden foliage complement
   Backgrounds   : Soft ivory + petal white for light sections
                   Deep garden-dusk (#080f09) for dark sections
   ========================================================================== */

:root {

    /* ------------------------------------------------------------------
       01. ACCENT COLOR — Dusty Rose
    ------------------------------------------------------------------ */
    --accent:               #C97B8A;
    --accent-light:         #EAB8C3;
    --accent-dark:          #A85A6A;
    --accent-glow:          rgba(201, 123, 138, 0.35);
    --accent-glow-soft:     rgba(201, 123, 138, 0.18);
    --accent-glow-faint:    rgba(201, 123, 138, 0.06);
    --accent-border:        rgba(201, 123, 138, 0.22);
    --accent-border-mid:    rgba(201, 123, 138, 0.38);
    --accent-border-strong: rgba(201, 123, 138, 0.60);
    --accent-bg:            rgba(201, 123, 138, 0.10);

    /* ------------------------------------------------------------------
       02. SECONDARY COLOR — Sage Green
    ------------------------------------------------------------------ */
    --secondary:            #8BAF8A;

    /* ------------------------------------------------------------------
       03. HERO & GATE NUMBER
       Soft lavender — visible on the dark garden photo overlay.
    ------------------------------------------------------------------ */
    --hero-gate-color:      #D4BFEA;
    --hero-gate-glow:       rgba(184, 164, 212, 0.50);

    /* ------------------------------------------------------------------
       04. AMPERSAND COLOR
    ------------------------------------------------------------------ */
    --ampersand-color:      #EAB8C3;

    /* ------------------------------------------------------------------
       05. BACKGROUND COLORS — DARK SECTIONS
    ------------------------------------------------------------------ */
    --bg-darkest:           #080f09;
    --bg-dark:              #0f1a10;
    --bg-dark-2:            #fdf0f2;   /* CRITICAL: matches .rsvp-section bg */
    --bg-dark-3:            #0d1a0e;

    /* ------------------------------------------------------------------
       06. BACKGROUND COLORS — LIGHT SECTIONS
    ------------------------------------------------------------------ */
    --bg-light:             #fdf8f4;
    --bg-light-overlay:     #fff9f6;

    /* ------------------------------------------------------------------
       07. BACKGROUND IMAGES
       --bg-gate-overlay: slightly stronger so hero white text stays crisp
    ------------------------------------------------------------------ */
    --bg-cinema-image:      url('assets/images/std-garden.webp');
    --bg-schedule-image:    url('assets/images/flap-board.webp');

    --bg-gate-overlay:      linear-gradient(rgba(8, 15, 9, 0.42), rgba(8, 15, 9, 0.60));
    --bg-gate-image:        url('https://images.unsplash.com/photo-1534190760961-74e8c1c5c3da?auto=format&fit=max&q=80&w=1440');

    /* ------------------------------------------------------------------
       08. SECTION HEADER DECORATORS — ❀ ❀ ❀ ornament
    ------------------------------------------------------------------ */
    --section-decorator-color: #C97B8A;

    /* ------------------------------------------------------------------
       09. FUNCTIONAL COLORS
    ------------------------------------------------------------------ */
    --success:              #1a8a56;
    --error:                #cc3333;

}


/* ==========================================================================
   SECTION BACKGROUNDS — Rapp & Jeselle (Spring Garden)
   ========================================================================== */

/* ------------------------------------------------------------------
   OUR FLIGHT PATH — warm ivory
------------------------------------------------------------------ */
.flight-path-section {
    background-color: #fdf6f2;
    background-image:
        radial-gradient(ellipse at 15% 40%, rgba(201, 123, 138, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 25%, rgba(139, 175, 138, 0.07) 0%, transparent 55%),
        linear-gradient(rgba(201, 123, 138, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 123, 138, 0.05) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
}

/* ------------------------------------------------------------------
   DEPARTURE SCHEDULE — dusty periwinkle / soft lavender.
   Intentionally different from In-Flight Magazine (warm ivory/white)
   so the two back-to-back light sections feel visually distinct.
------------------------------------------------------------------ */
.logistics-section {
    background-color: #ede8f5;
    background-image:
        radial-gradient(ellipse at 25% 30%, rgba(184, 164, 212, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(201, 123, 138, 0.10) 0%, transparent 55%),
        linear-gradient(rgba(184, 164, 212, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 164, 212, 0.07) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    background-attachment: scroll;
}

/* ------------------------------------------------------------------
   PORT OF ENTRY / CUSTOMS & IMMIGRATION — blush gradient
   --bg-dark-2 is set to #fdf0f2 above so notch circles match exactly.
------------------------------------------------------------------ */
.rsvp-section {
    background-color: #fdf0f2;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(201, 123, 138, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 100%, rgba(184, 164, 212, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse at 90% 100%, rgba(139, 175, 138, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #fdf0f2 0%, #fff8f9 55%, #fdf0f2 100%);
}


/* ==========================================================================
   FIX 1 — HERO: "NOW BOARDING" row readability
   The entire .terminal-header row (GATE 01 · NOW BOARDING · name) sits in
   the bright peach/sky band of the photo. We back the whole row with a
   frosted dark pill so every element in it is always legible.
   ========================================================================== */

/* Wrap the whole terminal-header row in a dark frosted capsule */
.terminal-header {
    background: rgba(8, 15, 9, 0.58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(201, 123, 138, 0.45) !important;
    border-radius: 50px !important;
    padding: 5px 16px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 90vw !important;
    white-space: nowrap !important;
}

/* Shrink font on small screens so everything fits on one line */
@media (max-width: 480px) {
    .terminal-header {
        font-size: 0.6rem !important;
        letter-spacing: 2px !important;
        padding: 5px 12px !important;
        gap: 6px !important;
    }
    .gate-number {
        margin-right: 0 !important;
        letter-spacing: 1px !important;
    }
    .status-badge {
        padding: 3px 8px !important;
        font-size: 0.6rem !important;
        letter-spacing: 1.5px !important;
    }
}

/* GATE 01 text — bright lavender with strong shadow */
.gate-number {
    color: var(--hero-gate-color) !important;
    text-shadow:
        0 0 10px var(--hero-gate-glow),
        0 1px 6px rgba(0, 0, 0, 0.90) !important;
}

/* "NOW BOARDING: RAPP" badge — white text on transparent (inside dark pill) */
.status-badge {
    background: rgba(201, 123, 138, 0.28) !important;
    border-color: rgba(201, 123, 138, 0.70) !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.70) !important;
}


/* ==========================================================================
   FIX 2 — CINEMA: "Love is on the Horizon" seatbelt sign readability
   This element sits in the bright top-of-photo sky area. It uses
   var(--gold)/var(--accent) border+colour which is rose — nearly invisible
   against peach sky. Give it a dark frosted background + white text.
   ========================================================================== */

.seatbelt-sign {
    background: rgba(8, 15, 9, 0.60) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-color: rgba(201, 123, 138, 0.65) !important;
    color: #fff !important;
    box-shadow:
        0 0 16px var(--accent-glow),
        0 2px 12px rgba(0, 0, 0, 0.60) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.80) !important;
}

/* Keep the blinking dot red — it's already high contrast */
.seatbelt-sign .blinking-dot {
    color: #ff4b4b !important;
}


/* ==========================================================================
   FIX 3 — DEPARTURE SCHEDULE: dark text on periwinkle background
   Only the header (badge, title, subtitle) sits on the light bg.
   The split-flap boards are dark — no changes needed inside them.
   ========================================================================== */

.logistics-section .section-badge {
    color: #5a3f72 !important;
    border-color: rgba(138, 110, 180, 0.45) !important;
    background: rgba(184, 164, 212, 0.20) !important;
}

.logistics-section .section-title {
    color: #1e1428 !important;
    text-shadow: none !important;
}

.logistics-section h2 {
    color: #1e1428 !important;
    text-shadow: none !important;
}

.logistics-section h2::after {
    color: var(--accent) !important;
}

.logistics-section .section-subtitle {
    color: #4a3860 !important;
}


/* ==========================================================================
   FIX 4 — CUSTOMS & IMMIGRATION (RSVP): restore the boarding-pass look
   Background is blush #fdf0f2. All the original styles assume dark bg,
   so every white/transparent value becomes invisible. This block overrides
   each layer of the boarding pass to be legible on a light background.
   ========================================================================== */

/* ── Section headings ── */
.rsvp-section .section-title,
.rsvp-section h2 {
    color: #2a1a1f !important;
    text-shadow: none !important;
}

.rsvp-section h2::after {
    color: var(--accent) !important;
}

.rsvp-section .section-subtitle {
    color: #5a4a50 !important;
}

.rsvp-section .section-badge {
    color: var(--accent-dark) !important;
    border-color: var(--accent-border-mid) !important;
    background: var(--accent-bg) !important;
}

/* ── Card shell — solid white so it lifts off the blush background ── */
.rsvp-section .boarding-pass {
    background: #ffffff !important;
    border: 1px solid rgba(201, 123, 138, 0.35) !important;
    box-shadow:
        0 8px 32px rgba(168, 90, 106, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: none !important;
}

.rsvp-section .boarding-pass.active-pass {
    border-color: var(--accent) !important;
    box-shadow:
        0 0 0 2px var(--accent),
        0 12px 40px rgba(201, 123, 138, 0.22) !important;
}

/* ── Header strip — rose-tinted, readable dark text ── */
.rsvp-section .pass-header {
    background: rgba(201, 123, 138, 0.12) !important;
    border-bottom: 1px solid rgba(201, 123, 138, 0.30) !important;
}

.rsvp-section .airline-name {
    color: var(--accent-dark) !important;
}

.rsvp-section .flight-class {
    color: #5a4a50 !important;
    opacity: 1 !important;
}

/* ── Route: city codes, city names, plane icon ── */
.rsvp-section .city-code {
    color: #1e1215 !important;
}

.rsvp-section .city-name {
    color: #9a7a82 !important;
}

.rsvp-section .flight-icon {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 6px var(--accent-glow)) !important;
}

/* ── Meta grid: labels and values ── */
.rsvp-section .meta-label {
    color: #9a7a82 !important;
}

.rsvp-section .meta-value {
    color: #1e1215 !important;
}

/* ── Tear-line / divider ── */
.rsvp-section .dotted-line {
    border-top-color: rgba(201, 123, 138, 0.35) !important;
}

/* Notches MUST match the exact section bg to create the punched-hole illusion */
.rsvp-section .notch {
    background: #fdf0f2 !important;
    box-shadow: inset 0 0 6px rgba(168, 90, 106, 0.12) !important;
}

/* ── Form / footer ── */
.rsvp-section .pass-footer {
    background: rgba(201, 123, 138, 0.05) !important;
    border-top: 1px solid rgba(201, 123, 138, 0.18) !important;
}

.rsvp-section .form-title {
    color: #2a1a1f !important;
}

.rsvp-section .form-group label {
    color: #7a5a62 !important;
}

.rsvp-section .form-group input,
.rsvp-section .form-group select,
.rsvp-section .form-group textarea {
    background: #fdf6f7 !important;
    border-color: rgba(201, 123, 138, 0.30) !important;
    color: #1e1215 !important;
}

.rsvp-section .form-group input:focus,
.rsvp-section .form-group select:focus,
.rsvp-section .form-group textarea:focus {
    border-color: var(--accent) !important;
    background: #ffffff !important;
}

.rsvp-section .form-group input::placeholder,
.rsvp-section .form-group textarea::placeholder {
    color: #c9a8b0 !important;
}

/* ── Action buttons ── */
.rsvp-section .btn-confirm,
.rsvp-section .submit-btn:not(.decline) {
    background: var(--accent) !important;
    color: #fff !important;
}

.rsvp-section .btn-confirm:hover,
.rsvp-section .submit-btn:not(.decline):hover {
    background: var(--accent-dark) !important;
    box-shadow: 0 6px 20px var(--accent-glow) !important;
}

.rsvp-section .btn-decline,
.rsvp-section .submit-btn.decline {
    background: rgba(201, 123, 138, 0.08) !important;
    color: #7a5a62 !important;
    border: 1px solid rgba(201, 123, 138, 0.25) !important;
}

.rsvp-section .btn-decline:hover,
.rsvp-section .submit-btn.decline:hover {
    background: rgba(201, 123, 138, 0.16) !important;
}

.rsvp-section .btn-edit-tiny {
    border-color: rgba(201, 123, 138, 0.35) !important;
    color: #7a5a62 !important;
}

/* ── Status messages ── */
.rsvp-section .status-confirmed {
    color: #1a6a44 !important;
    text-shadow: none !important;
}

.rsvp-section .status-declined {
    color: #aa2222 !important;
}

.rsvp-section .loading-status {
    color: var(--accent) !important;
}

.rsvp-section .manifest-label {
    color: var(--accent-dark) !important;
}


/* ==========================================================================
   OUR FLIGHT PATH — all text dark on ivory background
   ========================================================================== */

.flight-path-section h2,
.flight-path-section .section-title {
    color: #2a1a1f !important;
    text-shadow: none !important;
}

.flight-path-section .section-badge {
    color: var(--accent-dark) !important;
    border-color: var(--accent-border-mid) !important;
    background: var(--accent-bg) !important;
}

.flight-path-section .section-subtitle {
    color: #5a4a50 !important;
}

.flight-path-section .milestone-date {
    color: var(--accent-dark) !important;
}

.flight-path-section .milestone-title {
    color: #1e1215 !important;
}

.flight-path-section .milestone-text {
    color: #5a4a50 !important;
}

.flight-path-section .milestone-content {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(201, 123, 138, 0.22) !important;
    backdrop-filter: blur(12px);
}

.flight-path-section .milestone:hover .milestone-content {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: var(--accent-border-mid) !important;
}

.flight-path-section .flight-line {
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--accent) 50%,
        transparent 100%) !important;
    box-shadow: 0 0 10px var(--accent-glow) !important;
}

.flight-path-section .radar-node {
    background: #fff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 8px var(--accent-glow) !important;
}

.flight-path-section .milestone:hover .radar-node {
    background: var(--accent) !important;
    box-shadow: 0 0 16px var(--accent-glow) !important;
}

.flight-path-section .stamp-gold {
    border-color: var(--accent) !important;
    color: var(--accent-dark) !important;
}

.flight-path-section .stamp-rose {
    border-color: var(--secondary) !important;
    color: #3d6b3c !important;
}


/* ==========================================================================
   RESTORE NOTES
   ==========================================================================

   TO RESTORE ALEX & ELOI (Gold Aviation):
   Replace :root with the Gold block from the QUICK REFERENCE below,
   remove all section background overrides AND readability fix blocks above,
   and delete the --bg-dark-2 reassignment.

   TO RESTORE SAIRAN & MARIEN (Marine + Vibrant Sunset):
   --accent: #E8756A; --secondary: #E8934A; --bg-dark-2: #fdf0ee;
   .flight-path-section bg: #fdf6f4
   .logistics-section   bg: #fdf4f0
   .rsvp-section        bg: #fdf0ee

   ========================================================================== */


/* ==========================================================================
   QUICK REFERENCE — HOW TO RETHEME PER CLIENT
   ==========================================================================

   CLIENT: Alex & Eloi (Gold / Aviation — DEFAULT)
   :root {
       --accent:               #d4af37;
       --accent-light:         #f1d592;
       --accent-dark:          #b08d2b;
       --accent-glow:          rgba(212, 175, 55, 0.3);
       --accent-glow-soft:     rgba(212, 175, 55, 0.15);
       --accent-glow-faint:    rgba(212, 175, 55, 0.05);
       --accent-border:        rgba(212, 175, 55, 0.2);
       --accent-border-mid:    rgba(212, 175, 55, 0.3);
       --accent-border-strong: rgba(212, 175, 55, 0.5);
       --accent-bg:            rgba(212, 175, 55, 0.1);
       --secondary:            #f6b6c1;
       --hero-gate-color:      #f6b6c1;
       --hero-gate-glow:       rgba(157, 124, 253, 0.3);
       --ampersand-color:      #f6b6c1;
       --bg-darkest:           #000000;
       --bg-dark:              #0e0e0e;
       --bg-dark-2:            #050505;
       --bg-dark-3:            #0a0a0a;
       --bg-light:             #f9f9f7;
       --bg-light-overlay:     #fdfdfb;
       --bg-cinema-image:      url('assets/images/std-section-fullwidth.png');
       --bg-schedule-image:    url('assets/images/flap-board.webp');
       --bg-gate-overlay:      linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85));
       --bg-gate-image:        url('https://images.unsplash.com/photo-1436491865332-7a61a109c0f3?auto=format&fit=max&q=80&w=1440');
       --section-decorator-color: #f6b6c1;
       --success:              #00ff88;
       --error:                #ff4b4b;
   }

   ========================================================================== */

/* ─────────────────────────────────────────────────────────────
   ADMIN DASHBOARD — Studio Branding Link
───────────────────────────────────────────────────────────── */

.studio-branding {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.studio-branding:hover {
    opacity: 0.8;
}