/* ============================================================
   theme-light.css — Clean LIGHT theme (Booking / Airbnb style)
   Loaded LAST so it overrides the legacy dark design system.
   Reversible: remove the <link> in header.php to revert to dark.
   ============================================================ */

:root,
html[lang="ar"] {
    /* --- style.css tokens → light --- */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f7f7f7;
    --glass: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(0, 0, 0, 0.08);
    --secondary: #f7f7f7;
    --text: #1c1c1c;
    --text-muted: #6a6a6a;
    --text-dim: #9a9a9a;
    --border: #e9e9ec;

    /* --- design-tokens.css → light --- */
    --color-black: #1c1c1c;
    --color-surface: #ffffff;
    --color-surface-2: #f7f7f7;
    --color-border: #e9e9ec;
    --color-text-primary: #1c1c1c;
    --color-text-muted: #6a6a6a;
    --color-white: #ffffff;

    /* brand accent → Violet (nightlife / premium). Aliases the single source of
       truth (design-tokens.css :root --brand); fallbacks preserve the exact
       violet if design-tokens.css is ever absent — values are byte-identical. */
    --color-gold: var(--brand, #7C3AED);
    --color-gold-light: var(--brand-light, #8B5CF6);
    --color-gold-dim: rgba(124, 58, 237, 0.10);
    --gold: var(--brand, #7C3AED);
    --primary: var(--brand, #7C3AED);
    --primary-glow: rgba(124, 58, 237, 0.28);
    --accent: var(--brand, #7C3AED);
    --theme-accent: var(--brand, #7C3AED);
    --theme-accent-secondary: var(--brand-strong, #6D28D9);
    --theme-accent-light: var(--brand-soft, #A78BFA);
    --neon-purple: var(--brand, #7C3AED);
    --neon-blue: var(--brand-strong, #6D28D9);
    --neon-pink: var(--brand-soft, #A78BFA);
    --gradient-main: linear-gradient(135deg, var(--brand-light, #8B5CF6) 0%, var(--brand, #7C3AED) 100%);
    --gradient-hot: linear-gradient(135deg, var(--brand-light, #8B5CF6) 0%, var(--brand, #7C3AED) 100%);
    --gradient-fire: linear-gradient(135deg, var(--brand-soft, #A78BFA) 0%, var(--brand, #7C3AED) 100%);
    --cta-glow: 0 4px 18px rgba(124, 58, 237, 0.30);
}

/* Buttons that sit on the violet accent → white text for contrast */
.nav-cta-btn, .hero-search-btn,
.btn-solid, .btn-primary, button.primary {
    color: #ffffff !important;
}
/* Common hard-coded gold hexes → violet (catches inline styles) */
[style*="#7C3AED"], [style*="#7C3AED"],
[style*="rgb(124, 58, 237)"], [style*="rgba(124, 58, 237"] {
    --color-gold: #7C3AED;
}

/* ── Page background: soft champagne/platinum with subtle ambient mesh ── */
body {
    background-color: #f6f5fa !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.035) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.02) 0%, transparent 45%) !important;
    background-attachment: fixed !important;
    color: var(--text) !important;
}

/* ── Navbar: ALWAYS solid white with dark text (Booking-style) ── */
.site-navbar,
.site-navbar.scrolled {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #ececec !important;
    box-shadow: 0 1px 14px rgba(0, 0, 0, 0.06) !important;
}
.logo-text-cyber { color: #1c1c1c !important; }
.nav-pill-menu { background: #f6f6f6 !important; border-color: #e6e6e6 !important; }
.nav-pill-menu a,
.nav-menu a:not(.nav-cta-btn) { color: #444 !important; }
.nav-pill-menu a:hover, .nav-pill-menu a.active,
.nav-menu a:not(.nav-cta-btn):hover { color: var(--gold) !important; background: rgba(124,58,237,0.10) !important; }
/* Language switcher → light */
.lang-toggle-btn, .lang-select { background: #f6f6f6 !important; color: #333 !important; border: 1px solid #e6e6e6 !important; }
.lang-dropdown-menu { background: #ffffff !important; border: 1px solid #e6e6e6 !important; box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important; }
.lang-dropdown-menu a { color: #333 !important; }
.lang-dropdown-menu a:hover, .lang-dropdown-menu a.active { background: #f6f6f6 !important; color: var(--gold) !important; }
/* Hamburger icon dark on white */
.mobile-toggle { color: #1c1c1c !important; }
/* Mobile drawer */
.mobile-nav-overlay { background: rgba(255, 255, 255, 0.99) !important; }
.mobile-nav-overlay a { color: #1c1c1c !important; }
.mobile-nav-close { color: #1c1c1c !important; }
/* "Book Now" CTA keeps gold */
.nav-cta-btn { background: var(--gold) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(124,58,237,0.3) !important; }

/* ── Cards & surfaces: Frosted Champagne Glassmorphism ── */
.card, .glass-card, .event-card, .venue-card, .why-card,
.testimonial-card, .bento-item, .mock-event-card, .pricing-card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(124, 58, 237, 0.08) !important;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    color: var(--text);
}

/* ── Footer: light ── */
.site-footer {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(124, 58, 237, 0.08) !important;
}
.site-footer .footer-social a { background: rgba(255, 255, 255, 0.72) !important; border: 1px solid rgba(124, 58, 237, 0.08) !important; color: #555 !important; }
.site-footer a { color: #555 !important; }
.site-footer a:hover { color: var(--gold) !important; }

/* ── Hero search box: premium frosted glass capsule ── */
.hero-search-form {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(124, 58, 237, 0.15) !important;
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.08) !important;
}
.search-field { border-color: rgba(124, 58, 237, 0.12) !important; }
.search-field label { color: #717171 !important; }
.search-field select,
.search-field input { color: #1c1c1c !important; color-scheme: light; }

/* ── Hero stays cinematic (image) but text readable over it ── */
.hero-content h1 { color: #ffffff !important; text-shadow: 0 2px 24px rgba(0,0,0,0.55); }
.hero-content p  { color: rgba(255,255,255,0.95) !important; }

/* ── Generic dark-surface helpers used inline across views ── */
[style*="background: rgba(15, 15, 15"],
[style*="background:rgba(15,15,15"],
[style*="background: #0a0a0a"],
[style*="background:#0a0a0a"] {
    background: #ffffff !important;
    border: 1px solid #ececec !important;
}

/* ── Inputs/selects on light ── */
input, select, textarea {
    color: #1c1c1c;
}
input::placeholder, textarea::placeholder { color: #9a9a9a; }

/* ── Section alternating background ── */
.section:nth-of-type(even) { background: #fafafa; }

/* ── Headings & section text: dark on light ──
   (many headings used var(--color-white) → would be invisible now) */
.section-title, .section-header h2, .section-heading,
.why-card h3, .why-card h4, .testimonial-name,
.bento-title, .mock-detail-col h4,
h2, h3, h4, h5 { color: #1c1c1c !important; }

.section-label, .eyebrow, .section-eyebrow, .section-tag {
    color: var(--gold) !important; opacity: 1 !important;
}
.section-subtitle, .why-card p, .testimonial-text, .testimonial-role,
.empty-state, .empty-state p, .muted, .text-muted {
    color: #5a5a5a !important;
}

/* Gradient/shimmer text titles → solid dark (gradient fill is invisible on white) */
.text-gradient, .gradient-text, .shimmer-text {
    background: none !important;
    -webkit-text-fill-color: #1c1c1c !important;
    color: #1c1c1c !important;
}
/* …but the hero headline sits over a dark image, keep it white */
.hero-content h1, .hero-content h1.shimmer-text {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* Empty-state icon/box on light */
.empty-state-icon, .empty-state i { color: #c9c9c9 !important; }

/* ── Homepage Spotlight & Top 5 Slider Day-Mode Contrast ── */
html:not(.night) .sponsor-banner-inner {
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}
html:not(.night) .sponsor-banner-inner h4 {
    color: #1c1c1c !important;
}
html:not(.night) .sponsor-banner-inner p {
    color: #5a5a5a !important;
}
html:not(.night) .top5-card {
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}
html:not(.night) .top5-card-title {
    color: #1c1c1c !important;
}
html:not(.night) .top5-card-desc {
    color: #5a5a5a !important;
}
html:not(.night) .top5-card-meta {
    color: #5a5a5a !important;
}
html:not(.night) .top5-card-meta i {
    color: #7c3aed !important;
}
html:not(.night) .top5-price-val {
    color: #1c1c1c !important;
}
html:not(.night) .top5-nav-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #ececec !important;
    color: #1c1c1c !important;
}
html:not(.night) .top5-nav-btn:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
}

/* ── Inner-page dark header bands → light (search, dashboards, etc.) ── */
.search-header, .page-header, .page-hero, .auth-hero,
.dashboard-header, .profile-header, .portfolio-header, .listing-header {
    background: #f7f7f7 !important;
    border-bottom: 1px solid #ececec !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.search-header h1, .page-header h1, .page-hero h1 { color: #1c1c1c !important; }

/* ── All form fields → clean light, site-wide ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=color]),
select, textarea {
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    color: #1c1c1c !important;
    color-scheme: light;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18) !important;
    outline: none;
}
input::placeholder, textarea::placeholder { color: #9a9a9a !important; }

/* ── Generic dark panels/cards used across views → light ── */
[class*="glass"], .panel, .modal-content, .auth-card, .dash-card,
.checkout-card, .summary-card, .info-card, .stat-card, .ticket-row {
    background: #ffffff !important;
    border-color: #ececec !important;
}

/* ── Status/sort chips on light ── */
.btn-clear-filters { color: var(--gold) !important; border-color: #e0d6fb !important; }

/* ── Auth pages (login / register / forgot / reset) ──
   Keep the left image-brand panel; make the right form side clean white. */
.auth-split { background: #ffffff !important; }
.auth-form-panel { background: #ffffff !important; }
.auth-form-header h2 {
    color: #1c1c1c !important;
    -webkit-text-fill-color: #1c1c1c !important;
    background: none !important;
}
.auth-form-header p { color: #6a6a6a !important; }
.auth-form label, .auth-form-inner label { color: #444 !important; }
.auth-divider-text { color: #9a9a9a !important; }
.auth-divider-line { background: #e6e6e6 !important; }
.auth-form-footer, .auth-form-footer p { color: #6a6a6a !important; }

/* ============================================================
   LIGHT-MODE CONTRAST FIXES
   (reported: faint / invisible text when switching to day mode)
   ============================================================ */

/* Hero — keep a dark cinematic band so the white headline, subtitle and trust
   badges stay readable while the rest of the page is light/Airbnb-style. */
.hero {
    background:
      radial-gradient(circle at 50% -10%, rgba(124,58,237,0.30), transparent 55%),
      linear-gradient(160deg, #15102b 0%, #0b0a18 100%) !important;
}
/* Fix slideshow white cover bug in day mode: fade to dark hero color instead of body white bg */
html:not(.night) .hero-bg::after {
    background: linear-gradient(180deg, rgba(3,2,13,0.2) 0%, rgba(3,2,13,0.55) 55%, #0b0a18 100%) !important;
}
.hero-content h1, .hero-content h1.shimmer-text {
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
.hero-content p { color: rgba(255,255,255,0.94) !important; }
.hero-countdown, .hero-countdown * { color: #ffffff !important; }
.trust-badge { color: rgba(255,255,255,0.92) !important; }
.trust-badge i { color: #c4b5fd !important; }
.hero-stat-num { color: #ffffff !important; -webkit-text-fill-color:#ffffff !important; }
.hero-stat-label { color: rgba(255,255,255,0.72) !important; }

/* Event-card price — base style is var(--color-white) (for the dark night card),
   which is invisible on the white day card. Re-colour for day mode ONLY: these
   were previously bare !important rules that leaked into night mode and turned
   the price dark-on-dark (invisible on mobile + desktop night). */
html:not(.night) .event-price-val { color: #1c1c1c !important; -webkit-text-fill-color: #1c1c1c !important; }
html:not(.night) .event-price-label { color: #6a6a6a !important; }
html:not(.night) .price-original { color: #9a9a9a !important; }

/* Category cards sit over photos → force white text + shadow so titles are
   readable (the global dark-heading rule made them disappear over the images). */
.category-card h3, .category-card h3 * {
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.78) !important;
}
.category-card p {
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.65) !important;
}
.category-card .cat-explore { color: #ffffff !important; }

/* Featured-event cards (.event-card-premium) — home.php ships an inline <style>
   that pins these to a dark glass surface (background: rgba(15,15,29,.4)
   !important) for night mode. In day mode that left a muddy card whose meta row
   and status badges (designed light-on-dark) sank into it / read as empty pills.
   Re-skin to a clean white card with dark-on-light text. Scoped to day mode
   (html:not(.night)) so night mode is untouched; the extra selector weight is
   what lets it win over the inline !important rule. */
html:not(.night) .event-card-premium {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(124, 58, 237, 0.08) !important;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.04) !important;
}
html:not(.night) .event-card-premium .event-card-inner {
    background: transparent !important;
}
html:not(.night) .event-card-premium .event-card-meta,
html:not(.night) .event-card-premium .event-card-meta span { color: #4a4a4a !important; }
html:not(.night) .event-card-premium .event-card-meta i { color: #7c3aed !important; }
/* Status / pay-at-door badges: keep each hue, darken the text so it reads on white. */
html:not(.night) .event-card-premium .esb-new    { color: #2563eb !important; }
html:not(.night) .event-card-premium .esb-open    { color: #047857 !important; }
html:not(.night) .event-card-premium .esb-fast    { color: #b45309 !important; }
html:not(.night) .event-card-premium .esb-soldout { color: #dc2626 !important; }
html:not(.night) .event-card-premium .pad-badge   { color: #047857 !important; }

/* Interactive-map section (.map-card) — upgraded to champagne glassmorphism */
html:not(.night) .map-card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(124, 58, 237, 0.08) !important;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.04) !important;
}
html:not(.night) .map-filter-chip {
    background: rgba(124,58,237,0.06) !important;
    border-color: rgba(124,58,237,0.18) !important;
    color: #4a4a4a !important;
}
html:not(.night) .map-filter-chip.is-active {
    color: #ffffff !important; /* keep the active chip's gradient pill legible */
}

/* ============================================================
   Checkout Page Day-Mode (Light Theme) Contrast Overrides
   ============================================================ */
html:not(.night) .mock-ticket {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(124, 58, 237, 0.1) !important;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.05) !important;
}
html:not(.night) .mock-ticket-header {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.02)) !important;
    border-bottom: 2px dashed rgba(124, 58, 237, 0.15) !important;
}
html:not(.night) .mock-ticket-header::before,
html:not(.night) .mock-ticket-header::after {
    background-color: #f6f5fa !important; /* Blends with body background */
}
html:not(.night) .mock-ticket-title {
    color: #1c1c1c !important;
}
html:not(.night) .mock-ticket-date {
    color: #6a6a6a !important;
}
html:not(.night) .mock-ticket-qr-placeholder {
    background: #f8fafc !important;
    border: 2px dashed #e2e8f0 !important;
    color: #64748b !important;
}
html:not(.night) .mock-ticket-details {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
html:not(.night) .mock-detail-col p {
    color: #64748b !important;
}
html:not(.night) .mock-detail-col h4 {
    color: #1c1c1c !important;
}
html:not(.night) #previewDiscountDetails {
    border-top: 1px dashed rgba(0,0,0,0.1) !important;
}

/* WhatsApp Mock Container - Light Theme */
html:not(.night) .whatsapp-mock-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
html:not(.night) .whatsapp-mock-container span {
    color: #111b21 !important;
}
/* WhatsApp Chat Wallpaper and Bubble Overrides */
html:not(.night) .whatsapp-mock-container [style*="background: url('/assets/auth_bg.png')"] {
    background-color: #efeae2 !important;
}
html:not(.night) .whatsapp-mock-container [style*="position: absolute; inset: 0; background: rgba(11, 20, 26, 0.9)"] {
    background: rgba(239, 234, 226, 0.96) !important;
}
html:not(.night) .wa-bubble {
    background: #d9fdd3 !important; /* WhatsApp outgoing bubble color */
    color: #111b21 !important;
    border-right: 3px solid #00a884 !important;
    box-shadow: 0 1px 0.5px rgba(11,20,26,.13) !important;
}
html:not(.night) .wa-bubble div {
    color: #111b21 !important;
}
html:not(.night) .wa-bubble div[style*="color: #53bdeb"] {
    color: #008069 !important; /* WhatsApp light green for contact name */
}
html:not(.night) .wa-bubble div[style*="color: rgba(255,255,255,0.5)"] {
    color: #667781 !important; /* Timestamp */
}
html:not(.night) .wa-bubble span {
    color: #111b21 !important;
}

/* Day-Mode Auth Sidebar Overrides (keeps step titles white on the dark branding panel) */
html:not(.night) .auth-brand-panel h4 {
    color: #ffffff !important;
}