/* ============================================================
   ELITE KEYS — 01-theme.css
   Design tokens & theming
     · Global focus outline
     · CSS custom properties (colors, radii, shadows, fonts)
     · Light theme overrides (data-theme="light")
     · Theme toggle button
   Load first — everything below depends on these variables.
   Fonts: Playfair Display (display) + Raleway (body)
   ============================================================ */

/* ---------- Global Focus Reset (gold theme) ---------- */
*:focus {
    outline-color: rgba(199, 162, 74, 0.6) !important;
}
input:focus, select:focus, textarea:focus, button:focus {
    outline: none !important;
    box-shadow: none !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid rgba(199, 162, 74, 0.5) !important;
    outline-offset: 2px !important;
}

/* ---------- Custom Properties ---------- */
:root {
    --bg:           #0f1113;
    --panel:        #15181b;
    --panel2:       #1b2024;
    --text:         #f2f2f2;
    --muted:        #b8bcc2;
    --gold:         #c7a24a;
    --gold-light:   #dbb960;
    --gold-dark:    #a8862e;
    --satin:        #8f939a;
    --heading:      'Playfair Display', serif;
    --border:       rgba(var(--fg-rgb),0.10);
    --shadow:       rgba(0,0,0,0.35);
    --radius:       18px;
    --radius-sm:    10px;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Raleway', 'Helvetica Neue', sans-serif;
    --header-h:     80px;
    --container:    1200px;
    --transition:   .3s cubic-bezier(.4,0,.2,1);
    /* Theme-aware foreground (used via rgba(var(--fg-rgb), X)).
       Flips to 0,0,0 in light mode so translucent text/borders/backgrounds
       invert instead of staying white-on-white. */
    --fg-rgb:       255, 255, 255;
    /* RGB triplets for translucent bg/panel fills (used via rgba(var(--bg-rgb), X)).
       Needed because rgba() can't accept a hex var directly. */
    --bg-rgb:       15, 17, 19;
    --panel2-rgb:   28, 30, 34;
}

/* ---------- Light Theme ---------- */
[data-theme="light"] {
    --bg:           #faf6ec;
    --panel:        #fdfaf2;
    --panel2:       #f1ecdd;
    --text:         #1a1a1a;
    --muted:        #5a5d65;
    --gold:         #b8942f;
    --gold-light:   #c9a63e;
    --gold-dark:    #9a7a1e;
    --satin:        #7c8089;
    --border:       rgba(0,0,0,0.10);
    --shadow:       rgba(0,0,0,0.06);
    --fg-rgb:       0, 0, 0;
    --bg-rgb:       250, 246, 236;
    --panel2-rgb:   241, 236, 221;
}

/* ---- Header ---- */
[data-theme="light"] .site-header {
    background: rgba(250,246,236,0.92);
}

/* ---- Hero ---- */
[data-theme="light"] .hero {
    background:
        linear-gradient(180deg, rgba(250,246,236,0.2) 0%, var(--bg) 100%),
        radial-gradient(ellipse at 30% 20%, rgba(184,148,47,0.08) 0%, transparent 60%),
        var(--bg);
}
[data-theme="light"] .hero::before { opacity: 0; }
[data-theme="light"] .hero::after {
    background: radial-gradient(ellipse at 50% 100%, rgba(250,246,236,0.6) 0%, transparent 50%);
}
[data-theme="light"] .ek-hero-title { color: var(--text); }
[data-theme="light"] .ek-hero-desc { color: var(--muted); }
[data-theme="light"] .ek-hero-ctas-center .btn-outline {
    border-color: rgba(0,0,0,0.15);
    color: var(--muted);
}
[data-theme="light"] .ek-hero-ctas-center .btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* ---- Page Heroes ---- */
[data-theme="light"] .pg-hero {
    background: linear-gradient(180deg, rgba(250,246,236,0.3) 0%, var(--bg) 100%);
}
[data-theme="light"] .pg-hero-h1 { color: var(--text); }
[data-theme="light"] .pg-hero-sub { color: var(--muted); }
[data-theme="light"] .pg-content p { color: var(--muted); }
[data-theme="light"] .city-hero {
    background:
        linear-gradient(180deg, rgba(250,246,236,0) 0%, var(--bg) 100%),
        radial-gradient(ellipse at 50% 30%, rgba(184,148,47,0.06) 0%, transparent 60%),
        var(--panel);
}

/* ---- CTA Section ---- */
[data-theme="light"] .ek-cta-section h2 { color: var(--text) !important; }
[data-theme="light"] .ek-cta-section p { color: var(--muted); }
[data-theme="light"] .cta-banner {
    background:
        linear-gradient(135deg, rgba(184,148,47,0.08) 0%, rgba(250,246,236,0) 60%),
        var(--panel);
}

/* ---- Booking widgets ---- */
[data-theme="light"] .ek-mini {
    box-shadow: 0 8px 32px rgba(0,0,0,0.07), 0 0 20px rgba(184,148,47,0.03);
}
[data-theme="light"] .ek {
    box-shadow: 0 0 30px rgba(184,148,47,0.05), 0 16px 48px rgba(0,0,0,0.06);
}
[data-theme="light"] .ek-input,
[data-theme="light"] .ek-mini-row {
    background: rgba(240,240,240,0.6);
}
[data-theme="light"] .ek-input input:-webkit-autofill,
[data-theme="light"] .ek-input input:-webkit-autofill:hover,
[data-theme="light"] .ek-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px rgba(240,240,240,0.7) inset;
}
[data-theme="light"] .ek-input select option,
[data-theme="light"] .ek-mini-row select option,
[data-theme="light"] .ek-mini-dur select option {
    background: var(--panel);
    color: var(--text);
}
[data-theme="light"] .ek-vcard {
    background: rgba(240,240,240,0.6);
}
[data-theme="light"] .ek-option {
    background: rgba(240,240,240,0.6);
}

/* ---- Calendars & time pickers ---- */
[data-theme="light"] .ek-cal,
[data-theme="light"] .ek-tp,
[data-theme="light"] .ek-mini-cal,
[data-theme="light"] .ek-mini-tp,
[data-theme="light"] .ek-dtu {
    background: var(--panel);
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
[data-theme="light"] .ek-cal-title,
[data-theme="light"] .ek-mini-cal-title { color: var(--text); }
[data-theme="light"] .ek-cal-day,
[data-theme="light"] .ek-mini-cal-d { color: var(--text); }
[data-theme="light"] .ek-cal-day:hover:not(.is-off):not(.is-empty),
[data-theme="light"] .ek-mini-cal-d:hover:not(.is-off):not(.is-e) { color: var(--text); }
[data-theme="light"] .ek-cal-day.is-off,
[data-theme="light"] .ek-mini-cal-d.is-off { color: rgba(0,0,0,0.18); }
[data-theme="light"] .ek-cal-nav,
[data-theme="light"] .ek-mini-cal-nav { color: var(--muted); }
[data-theme="light"] .ek-cal-ynav,
[data-theme="light"] .ek-mini-cal-ynav { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .ek-cal-wds,
[data-theme="light"] .ek-mini-cal-wds { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ek-tp-btn { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .ek-tp-btn:hover { border-color: rgba(0,0,0,0.2); color: var(--text); }
[data-theme="light"] .ek-wheel-item { color: rgba(0,0,0,0.25); }

/* ---- Autocomplete dropdown ---- */
[data-theme="light"] .ek-autocomplete {
    background: var(--panel);
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 12px 36px rgba(0,0,0,0.1);
}

/* ---- When Picker light theme ---- */
[data-theme="light"] .ek-when-picker-inner { background: #fdfaf2; border-color: rgba(184,148,47,.25); box-shadow: 0 20px 60px rgba(0,0,0,.15); }
[data-theme="light"] .ek-when-header { background: rgba(184,148,47,.05); border-color: rgba(184,148,47,.12); }
[data-theme="light"] .ek-when-calendar { background: rgba(0,0,0,.02); }
[data-theme="light"] .ek-when-day { color: var(--text); }
[data-theme="light"] .ek-when-day:hover:not(.is-disabled):not(.is-selected) { background: rgba(184,148,47,.1); }
[data-theme="light"] .ek-when-day.is-today { border-color: rgba(184,148,47,.4); }
[data-theme="light"] .ek-when-time-section { background: rgba(184,148,47,.05); }
[data-theme="light"] .ek-when-time-input { background: rgba(0,0,0,.04); border-color: rgba(184,148,47,.2); color: var(--gold); }
[data-theme="light"] .ek-when-footer { background: rgba(184,148,47,.03); border-color: rgba(184,148,47,.12); }

/* ---- Cards & shadows ---- */
[data-theme="light"] .vehicle-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
[data-theme="light"] .testi-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
[data-theme="light"] .he-why2:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.06); }
[data-theme="light"] .svc-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
[data-theme="light"] .ek-tf-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.08); }

/* ---- Subtle backgrounds (rgba white → rgba black) ---- */
[data-theme="light"] .trust-logo { background: rgba(0,0,0,0.02); }
[data-theme="light"] .concierge-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .svc-level-badge { background: rgba(0,0,0,0.04); }
[data-theme="light"] .ek-toggle { background: rgba(0,0,0,0.08); }
[data-theme="light"] .ekv2-profile-tabs { background: rgba(0,0,0,0.02); }
[data-theme="light"] .ek-success-recap { background: rgba(0,0,0,0.02); }
[data-theme="light"] .ek-field.is-locked .ek-input { background: rgba(0,0,0,0.03); }

/* ---- Subtle borders (rgba white → rgba black) ---- */
[data-theme="light"] .svc-level li { border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .he-plan li { border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .ek-recap-row { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ek-ident-sug { border-color: rgba(0,0,0,0.05); }

/* ---- Recap & Success overlays ---- */
[data-theme="light"] .ek-recap-box,
[data-theme="light"] .ek-recap-overlay .ek-recap-box {
    box-shadow: 0 24px 64px rgba(0,0,0,0.12);
}
[data-theme="light"] .ek-success-overlay { background: rgba(250,246,236,0.96); }
[data-theme="light"] .ek-recap-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* ---- Modern recap v2 ---- */
[data-theme="light"] .ek-recap-head h3 { color: var(--text); }
[data-theme="light"] .ek-recap-head p { color: var(--muted); }
[data-theme="light"] .ek-recap-row span:first-child { color: var(--muted); }
[data-theme="light"] .ek-recap-row span:last-child { color: var(--text); }
[data-theme="light"] .ek-recap-route-label { color: var(--muted); }
[data-theme="light"] .ek-recap-route-addr { color: var(--text); }
[data-theme="light"] .ek-recap-veh-name { color: var(--text); }
[data-theme="light"] .ek-recap-section-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

/* ---- v2 recap background ---- */
[data-theme="light"] [class*="ek-recap"] [style*="background:#13151a"],
[data-theme="light"] [class*="ek-recap"] [style*="background: #13151a"] {
    background: var(--panel) !important;
}

/* ---- Account / Auth pages ---- */
[data-theme="light"] .account-name { color: var(--text); }
[data-theme="light"] .account-section h2 { color: var(--text); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .account-info-item .val {
    color: var(--text);
    background: rgba(0,0,0,0.02);
}
[data-theme="light"] .trip-card { background: rgba(0,0,0,0.02); }
[data-theme="light"] .trip-card-badge { background: rgba(0,0,0,0.4); }
[data-theme="light"] .trip-card-meta { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .trip-card-meta-val { color: var(--text); }
[data-theme="light"] .trip-card-expand { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .trip-card-detail .val { color: var(--text); }
[data-theme="light"] .pay-card-number { color: var(--text); }
[data-theme="light"] .pay-card-name { color: var(--muted); }
[data-theme="light"] .auth-field input {
    background: rgba(0,0,0,0.03);
    color: var(--text);
}

/* ---- Trip details card ---- */
[data-theme="light"] .ek-trip-card { background: var(--panel); border-color: rgba(0,0,0,0.08); box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
[data-theme="light"] .ek-trip-info { background: var(--panel); }
[data-theme="light"] .ek-dot-b { background: var(--panel); }
[data-theme="light"] #ekLeafletMap { background: #e8e8e8; }

/* ---- Loader ---- */
[data-theme="light"] .ek-loader { background: var(--bg); }
[data-theme="light"] .ek-loader-bar { background: rgba(0,0,0,0.06); }

/* ---- Map ---- */
[data-theme="light"] .map-frame { filter: grayscale(0.15) brightness(1.02) contrast(1); }
[data-theme="light"] .map-frame:hover { filter: grayscale(0) brightness(1.05) contrast(1); }

/* ---- Carousel ---- */
[data-theme="light"] .carousel-btn {
    background: rgba(253,250,242,0.9);
    color: var(--text);
}

/* ---- Flash messages ---- */
[data-theme="light"] .flash-success { background: rgba(34,197,94,0.08); color: #16a34a; }
[data-theme="light"] .flash-error { background: rgba(239,68,68,0.08); color: #dc2626; }

/* ---- Logo overrides ---- */
[data-theme="light"] .logo-name { color: var(--gold); }
[data-theme="light"] .logo-sub { color: rgba(184,148,47,0.55); }
[data-theme="light"] .footer-brand-name { color: var(--gold); }
[data-theme="light"] .footer-brand-sub { color: rgba(184,148,47,0.55); }

/* ---- About ---- */
[data-theme="light"] .about-stat-label { color: rgba(0,0,0,0.4); }
[data-theme="light"] .about-engagement-text { color: var(--muted); }
[data-theme="light"] .error-help { color: rgba(0,0,0,0.35); }

/* ---- Confirm / Submit modern ---- */
[data-theme="light"] .ek-submit-modern { color: #fff; }
[data-theme="light"] .ek-confirm-addr-label{color:rgba(0,0,0,.35)}
[data-theme="light"] .ek-dot-white{border-color:rgba(0,0,0,.35)}
[data-theme="light"] .ek-route-line{background:linear-gradient(var(--gold),rgba(0,0,0,.15))}

/* ---- WhatsApp & sticky ---- */
[data-theme="light"] .ek-sticky-book { color: #fff; }

/* ---- Footer light overrides ---- */
[data-theme="light"] .footer-tagline { color: rgba(0,0,0,0.45); }
[data-theme="light"] .footer-phone,
[data-theme="light"] .footer-email { color: rgba(0,0,0,0.5); }
[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.35); }
[data-theme="light"] .footer-bottom-right { color: rgba(0,0,0,0.45); }
[data-theme="light"] .footer-social-link { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.02); color: rgba(0,0,0,0.45); }
[data-theme="light"] .footer-modify-highlight { color: rgba(0,0,0,0.55); }
[data-theme="light"] .ek-guarantee p { color: rgba(0,0,0,0.5); }

/* ---- Misc muted text fallback (rgba white → uses var) ---- */
[data-theme="light"] .ek-fine { color: var(--muted); }
[data-theme="light"] .ek-notice { color: var(--muted); }
[data-theme="light"] .ek-recap-edit:hover { border-color: rgba(0,0,0,0.15); color: var(--text); }

/* ---- Hamburger nav overlay ---- */
[data-theme="light"] .ek-nav-overlay { background: rgba(250,246,236,0.97); }
/* Theme toggle button */
.btn-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-theme:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(199,162,74,0.06);
}
.btn-theme svg {
    width: 18px;
    height: 18px;
}
.btn-theme .icon-sun { display: none; }
.btn-theme .icon-moon { display: block; }
[data-theme="light"] .btn-theme .icon-sun { display: block; }
[data-theme="light"] .btn-theme .icon-moon { display: none; }

/* ---- Contact page light-theme refinements ---- */
[data-theme="light"] .contact-card { box-shadow: 0 8px 32px rgba(0,0,0,.05); }
[data-theme="light"] .contact-mail { border-bottom-color: rgba(0,0,0,.12); }
[data-theme="light"] .ek-dd-menu { background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.12); }