/* ============================================================
   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) */
    --color-gold: #7C3AED;
    --color-gold-light: #8B5CF6;
    --color-gold-dim: rgba(124, 58, 237, 0.10);
    --gold: #7C3AED;
    --primary: #7C3AED;
    --primary-glow: rgba(124, 58, 237, 0.28);
    --accent: #7C3AED;
    --theme-accent: #7C3AED;
    --theme-accent-secondary: #6D28D9;
    --theme-accent-light: #A78BFA;
    --neon-purple: #7C3AED;
    --neon-blue: #6D28D9;
    --neon-pink: #A78BFA;
    --gradient-main: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --gradient-hot: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --gradient-fire: linear-gradient(135deg, #A78BFA 0%, #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: clean white, no dark gradient / noise ── */
body {
    background: #ffffff !important;
    background-image: none !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(199,154,46,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: #1c1c1c !important; box-shadow: 0 4px 14px rgba(199,154,46,0.3) !important; }

/* ── Cards & surfaces ── */
.card, .glass-card, .event-card, .venue-card, .why-card,
.testimonial-card, .bento-item, .mock-event-card, .pricing-card {
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
    color: var(--text);
}

/* ── Footer: light ── */
.site-footer { background: #f7f7f7 !important; border-top: 1px solid #ececec; }
.site-footer .footer-social a { background: #ffffff !important; border: 1px solid #e6e6e6 !important; color: #555 !important; }
.site-footer a { color: #555 !important; }
.site-footer a:hover { color: var(--gold) !important; }

/* ── Hero search box: clean white card (Airbnb-style) ── */
.hero-search-form {
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}
.search-field { border-color: #ececec !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 simplification — hide noisy/redundant sections ──
   so visitors focus on: search → events → categories → how it works.
   Reversible: delete this block to bring them back. */
.social-proof-strip,
.sponsor-banner-section,
.top5-section, #top5SliderSection { display: none !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; }