/* premium.css — YallaTonight Premium Pack (assembled, ordered) */

/* ###### Signature Visual Identity (gradient / glow / depth / duotone / rhythm) ###### */
/* ============================================================
   === SIGNATURE VISUAL IDENTITY ===
   YallaTonight — premium gradient / glow / depth / duotone / rhythm
   Additive enhancement. Loaded LAST in /assets/premium.css.
   Light theme + RTL + reduced-motion safe. No global resets.
   Brand: violet #7C3AED  ->  signature magenta #D6206E
   ============================================================ */

/* ---- Signature tokens (scoped additions, do NOT redefine theme) ---- */
:root,
html[lang="ar"] {
  --yt-violet:        #7C3AED;
  --yt-violet-light:  #8B5CF6;
  --yt-violet-soft:   #A78BFA;
  --yt-magenta:       #D6206E;
  --yt-pink:          #EC4899;

  /* The signature gradient — used for text, fills & accents */
  --yt-grad: linear-gradient(100deg, var(--yt-violet) 0%, #9333EA 45%, var(--yt-magenta) 100%);
  --yt-grad-soft: linear-gradient(100deg, var(--yt-violet-light) 0%, var(--yt-pink) 100%);

  /* Premium shadow scale — soft, layered, low-spread (luxury, not heavy) */
  --shadow-premium-sm: 0 1px 2px rgba(17, 12, 34, 0.04),
                       0 4px 12px rgba(17, 12, 34, 0.06);
  --shadow-premium:    0 2px 6px rgba(17, 12, 34, 0.05),
                       0 12px 28px rgba(17, 12, 34, 0.09);
  --shadow-premium-lg: 0 6px 16px rgba(17, 12, 34, 0.06),
                       0 24px 56px rgba(17, 12, 34, 0.12);
  /* Hover lift carries a faint violet bloom for brand warmth */
  --shadow-premium-hover: 0 10px 24px rgba(17, 12, 34, 0.10),
                          0 28px 64px rgba(124, 58, 237, 0.16);
}

/* ============================================================
   1. SIGNATURE GRADIENT UTILITIES
   ============================================================ */

/* Gradient-clipped text. .yt-grad-text is the safe namespaced class;
   .grad-text is the public alias requested by the brief. The solid
   `color` fallback keeps text legible if background-clip is unsupported. */
.grad-text,
.yt-grad-text {
  background: var(--yt-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--yt-violet);
}

/* Gradient background blocks (opt-in: cards, ribbons, CTAs) */
.grad-bg,
.yt-grad-bg {
  background: var(--yt-grad);
  color: #ffffff;
}
.grad-bg-soft,
.yt-grad-bg-soft {
  background: var(--yt-grad-soft);
  color: #ffffff;
}

/* Apply the signature gradient to the section eyebrow label.
   theme-light.css forces .section-label to solid violet with !important,
   so we override here (premium.css loads last). Solid-violet fallback via
   `color` so the text never vanishes if background-clip fails. */
.section-label,
.section-eyebrow,
.eyebrow,
.section-tag {
  background: var(--yt-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--yt-violet) !important; /* fallback */
}

/* Key numbers — hero stats & counters get the gradient treatment */
.hero-stat-num,
.stat-num,
.counter-stat,
.pricing-amount,
.price-amount {
  background: var(--yt-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--yt-violet); /* fallback */
}

/* ============================================================
   2. AMBIENT GLOW — soft blurred violet/magenta blobs
   Sit BEHIND content, pointer-events:none, low opacity.
   Tasteful, never neon.
   ============================================================ */

/* Reusable utility: drop <span class="yt-glow"></span> in any
   position:relative container, or rely on the auto-glows below. */
.yt-glow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
              rgba(124, 58, 237, 0.55) 0%,
              rgba(214, 32, 110, 0.35) 45%,
              transparent 72%);
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
/* RTL: flip the translateX sign so the blob stays centered */
html[lang="ar"] .yt-glow,
[dir="rtl"] .yt-glow {
  transform: translate(50%, -50%);
}

/* Hero: a wide ambient bloom behind the headline. The hero already has
   position:relative + overflow:hidden, so the blob is clipped cleanly.
   z-index 1 sits above the dark image overlay but BELOW .hero-content (2). */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: 38%;
  inset-inline-start: 50%;
  width: min(900px, 95%);
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgba(124, 58, 237, 0.30) 0%,
              rgba(214, 32, 110, 0.18) 45%,
              transparent 70%);
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
html[lang="ar"] .hero::before,
[dir="rtl"] .hero::before {
  transform: translate(50%, -50%);
}

/* Section headers: a faint glow rising behind the eyebrow + title. */
.section-header {
  position: relative;
}
.section-header::before {
  content: "";
  position: absolute;
  inset-block-start: -40px;
  inset-inline-start: 50%;
  width: 360px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(124, 58, 237, 0.16) 0%,
              rgba(236, 72, 153, 0.10) 50%,
              transparent 72%);
  filter: blur(46px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
html[lang="ar"] .section-header::before,
[dir="rtl"] .section-header::before {
  transform: translateX(50%);
}
/* Keep the actual eyebrow + title above their glow */
.section-header > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   3. DEPTH — refined premium shadows
   ============================================================ */
.event-card,
.venue-card,
.why-card,
.pricing-card,
.testimonial-card,
.bento-item {
  box-shadow: var(--shadow-premium) !important;
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.event-card:hover,
.venue-card:hover,
.why-card:hover,
.pricing-card:hover {
  box-shadow: var(--shadow-premium-hover) !important;
  transform: translateY(-4px);
}

/* The hero search card is the centrepiece — strongest depth */
.hero-search-form {
  box-shadow: var(--shadow-premium-lg) !important;
}

/* Utility hooks for any element that opts in */
.yt-shadow-sm { box-shadow: var(--shadow-premium-sm); }
.yt-shadow    { box-shadow: var(--shadow-premium); }
.yt-shadow-lg { box-shadow: var(--shadow-premium-lg); }

/* ============================================================
   4. DUOTONE IMAGE HELPER — subtle violet tint, image stays clear
   ============================================================ */

/* Bare-image variant: gentle hue/saturation push, fully recognizable. */
img.duotone {
  filter: saturate(1.08) contrast(1.03);
}

/* Wrapper variant for a stronger duotone over hero/category imagery.
   Wrap the <img> in <span class="duotone-wrap"> (the ::after overlay
   multiply-blends a violet->magenta tint without obscuring the photo). */
.duotone-wrap {
  position: relative;
  display: block;
  overflow: hidden;
}
.duotone-wrap > img { display: block; width: 100%; }
.duotone-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
              rgba(124, 58, 237, 0.22) 0%,
              rgba(214, 32, 110, 0.18) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.7;
}

/* ============================================================
   5. SECTION RHYTHM — generous vertical spacing + refined eyebrow
   ============================================================ */

/* A touch more breathing room between sections (additive, capped) */
.section {
  padding-block: clamp(72px, 8vw, 112px);
}

/* Refined section label: uppercase, tracked, with a small gradient
   bar lead-in. The pseudo-element bar carries the gradient even though
   the label text itself is clipped. */
.section-label,
.section-eyebrow,
.eyebrow,
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-size: 0.78rem;
}
.section-label::before,
.section-eyebrow::before,
.eyebrow::before,
.section-tag::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--yt-grad);
  flex: 0 0 auto;
}
/* Centered headers get a matching trailing bar so the eyebrow reads as a
   balanced, framed accent. */
.section-header[style*="center"] .section-label::after,
.section-header.text-center .section-label::after {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--yt-grad);
  flex: 0 0 auto;
}

/* ============================================================
   REDUCED MOTION — disable lift transitions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .event-card,
  .venue-card,
  .why-card,
  .pricing-card,
  .testimonial-card,
  .bento-item {
    transition: none !important;
  }
  .event-card:hover,
  .venue-card:hover,
  .why-card:hover,
  .pricing-card:hover {
    transform: none;
  }
}

/* ###### trust-conversion-components ###### */
/* =============================================================
   TRUST & CONVERSION COMPONENTS
   Verified badge, star rating, instant/secure chips,
   trust row, and value tiles. Additive, RTL- & a11y-safe.
   Targets the light theme; relies on --gold / violet vars.
   ============================================================= */

/* --- shared scoped tokens (no globals leaked) --- */
.badge-verified,
.star-rating,
.chip-instant,
.chip-secure,
.trust-row,
.value-tile {
    --tc-violet: var(--gold, #7C3AED);
    --tc-violet-soft: rgba(124, 58, 237, 0.10);
    --tc-violet-line: rgba(124, 58, 237, 0.22);
    --tc-green: #0E9F6E;
    --tc-green-soft: rgba(14, 159, 110, 0.10);
    --tc-green-line: rgba(14, 159, 110, 0.24);
    --tc-star: #F5A623;
    --tc-ink: #1c1c1c;
    --tc-muted: #6a6a6a;
    font-family: var(--font-body, 'Inter', sans-serif);
    box-sizing: border-box;
}

/* === 1. VERIFIED VENUE BADGE === */
.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-full, 9999px);
    background: var(--tc-violet-soft);
    border: 1px solid var(--tc-violet-line);
    color: var(--tc-violet);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
}
.badge-verified i {
    font-size: 12px;
    line-height: 1;
}
/* solid pill variant for use over imagery / card corners */
.badge-verified.is-solid {
    background: var(--tc-violet);
    border-color: var(--tc-violet);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.30);
}

/* === 2. STAR RATING === */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
    vertical-align: middle;
}
.star-rating .stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--tc-star);
    font-size: 13px;
}
.star-rating .stars i { line-height: 1; }
.star-rating .stars .star-empty { color: rgba(28, 28, 28, 0.16); }
.star-rating .rating-value {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--tc-ink);
}
.star-rating .rating-count {
    font-size: 12.5px;
    color: var(--tc-muted);
    font-weight: 500;
}
/* compact variant (e.g. inside dense card meta rows) */
.star-rating.is-sm .stars { font-size: 11px; }
.star-rating.is-sm .rating-value { font-size: 12.5px; }
.star-rating.is-sm .rating-count { font-size: 11.5px; }

/* === 3. CONVERSION CHIPS (instant / secure) === */
.chip-instant,
.chip-secure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--radius-full, 9999px);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}
.chip-instant i,
.chip-secure i { font-size: 12px; line-height: 1; }

.chip-instant {
    background: var(--tc-green-soft);
    border: 1px solid var(--tc-green-line);
    color: var(--tc-green);
}
.chip-secure {
    background: var(--tc-violet-soft);
    border: 1px solid var(--tc-violet-line);
    color: var(--tc-violet);
}

/* === 4. TRUST ROW (under hero / on cards) === */
.trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.trust-row .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tc-ink);
    line-height: 1.3;
}
.trust-row .trust-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--radius-full, 9999px);
    background: var(--tc-violet-soft);
    color: var(--tc-violet);
    font-size: 13px;
}
.trust-row .trust-item small {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--tc-muted);
}
/* thin divider variant — single dotted separator between items */
.trust-row.is-divided .trust-item:not(:first-child) {
    border-inline-start: 1px solid var(--border, #e9e9ec);
    padding-inline-start: 22px;
}
/* light-on-dark variant for placing over the hero image */
.trust-row.on-dark .trust-item { color: #fff; }
.trust-row.on-dark .trust-item small { color: rgba(255, 255, 255, 0.78); }
.trust-row.on-dark .trust-item i {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* === 5. VALUE TILE (upgrades .why-card) === */
.value-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 6px;
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    will-change: transform;
}
.value-tile:hover {
    transform: translateY(-4px);
    border-color: var(--tc-violet-line);
    box-shadow: 0 14px 36px rgba(124, 58, 237, 0.14);
}
.value-tile .value-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: var(--radius-full, 9999px);
    background: var(--tc-violet-soft);
    color: var(--tc-violet);
    font-size: 21px;
    transition: transform 0.28s ease, background 0.28s ease;
}
.value-tile:hover .value-tile-icon {
    transform: scale(1.06);
    background: rgba(124, 58, 237, 0.16);
}
.value-tile h3,
.value-tile h4 {
    margin: 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--tc-ink);
    line-height: 1.3;
}
.value-tile p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tc-muted);
}

/* === RTL: flip FA icons that imply direction; logical props handle layout === */
html[lang="ar"] .badge-verified i,
html[lang="ar"] .chip-instant i,
html[lang="ar"] .chip-secure i,
[dir="rtl"] .badge-verified i,
[dir="rtl"] .chip-instant i,
[dir="rtl"] .chip-secure i {
    transform: scaleX(-1);
}
/* stars are symmetric — never mirror them */
html[lang="ar"] .star-rating .stars i,
[dir="rtl"] .star-rating .stars i { transform: none; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .trust-row { gap: 10px 16px; }
    .trust-row.is-divided .trust-item:not(:first-child) {
        border-inline-start: none;
        padding-inline-start: 0;
    }
    .value-tile { padding: 22px 18px; }
    .value-tile .value-tile-icon { width: 46px; height: 46px; font-size: 19px; }
    .value-tile h3, .value-tile h4 { font-size: 16px; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .value-tile,
    .value-tile:hover,
    .value-tile .value-tile-icon,
    .value-tile:hover .value-tile-icon {
        transition: none;
        transform: none;
    }
}

/* ###### Motion & Micro-Interactions ###### */
/* === MOTION & MICRO-INTERACTIONS === */

/* ---- 1. Scroll reveal ----
   Default = fully visible. The hidden pre-state only applies AFTER the JS adds
   .premium-motion-ready to <html>, so content is never stuck hidden if JS
   fails, is blocked, or reduced-motion is on. premium.css loads LAST, so this
   opacity:1 default also overrides the legacy .reveal{opacity:0} in style.css
   and the home page's inline rule for the JS-off case. */
.reveal {
  opacity: 1;
}

html.premium-motion-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--pm-reveal-stagger, 0ms);
  will-change: opacity, transform;
}

/* Cooperate with every reveal system already on the site:
   .is-visible (this component), .active (home.php), .visible (legacy style.css). */
html.premium-motion-ready .reveal.is-visible,
html.premium-motion-ready .reveal.active,
html.premium-motion-ready .reveal.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Author-controlled stagger via data-reveal-delay="1..6" */
html.premium-motion-ready .reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
html.premium-motion-ready .reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
html.premium-motion-ready .reveal[data-reveal-delay="3"] { transition-delay: 240ms; }
html.premium-motion-ready .reveal[data-reveal-delay="4"] { transition-delay: 320ms; }
html.premium-motion-ready .reveal[data-reveal-delay="5"] { transition-delay: 400ms; }
html.premium-motion-ready .reveal[data-reveal-delay="6"] { transition-delay: 480ms; }

/* ---- 2. Card hover: lift + soft violet shadow + image zoom ---- */
.event-card,
.venue-card,
.category-card,
.why-card,
.pricing-card,
.featured-night-card {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card:hover,
.venue-card:hover,
.why-card:hover,
.pricing-card:hover,
.featured-night-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px -18px rgba(124, 58, 237, 0.45),
    0 6px 18px -10px rgba(0, 0, 0, 0.18);
}

/* Category tiles already self-translate in theme-light; only add the violet glow
   so we don't double up the transform. */
.category-card:hover {
  box-shadow:
    0 18px 44px -18px rgba(124, 58, 237, 0.48),
    0 6px 18px -10px rgba(0, 0, 0, 0.18);
}

/* Image wrappers must clip the zoom. (Existing wrappers; we just enforce clip.) */
.event-card-img,
.featured-card-img-wrap,
.venue-card .card-media,
.venue-card figure,
.venue-card .venue-card-img {
  overflow: hidden;
}

/* Smooth zoom on the inner image for any card that has one. */
.event-card-img img,
.featured-card-img-wrap img,
.venue-card img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1);
}

.event-card:hover .event-card-img img,
.featured-night-card:hover .featured-card-img-wrap img,
.venue-card:hover img {
  transform: scale(1.07);
}

/* ---- 3. Magnetic / shiny buttons: press-scale + moving sheen ---- */
.nav-cta-btn,
.hero-search-btn,
.btn-search {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease;
}

/* The sheen: a soft diagonal highlight that sweeps across on hover.
   It is purely decorative and never intercepts clicks. */
.nav-cta-btn::after,
.hero-search-btn::after,
.btn-search::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -150%;
  inline-size: 60%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}

.nav-cta-btn:hover::after,
.hero-search-btn:hover::after,
.btn-search:hover::after {
  animation: pm-sheen 0.85s ease-out;
}

@keyframes pm-sheen {
  to { inset-inline-start: 160%; }
}

/* Press feedback (class added by JS) + accessible pointer/keyboard active state. */
.nav-cta-btn:active,
.hero-search-btn:active,
.btn-search:active,
.nav-cta-btn.pm-pressed,
.hero-search-btn.pm-pressed,
.btn-search.pm-pressed {
  transform: scale(0.96);
}

/* RTL: mirror the sheen skew so the highlight angle reads correctly. */
html[dir="rtl"] .nav-cta-btn::after,
html[dir="rtl"] .hero-search-btn::after,
html[dir="rtl"] .btn-search::after {
  transform: skewX(18deg);
}

/* ---- 4. Scroll progress bar (violet -> magenta) ---- */
.pm-scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 2147483000; /* above sticky navbar */
  pointer-events: none;
  background: transparent;
}

.pm-scroll-progress__fill {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #7C3AED 0%, #A78BFA 45%, #EC4899 100%);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.45);
  will-change: transform;
}

/* RTL: grow from the right edge. */
html[dir="rtl"] .pm-scroll-progress__fill {
  transform-origin: right center;
  background: linear-gradient(270deg, #7C3AED 0%, #A78BFA 45%, #EC4899 100%);
}

/* ---- 5. Smooth anchor scrolling (CSS fallback; JS handles offset cases) ---- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---- Reduced motion: disable everything motion-related ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  html.premium-motion-ready .reveal,
  html.premium-motion-ready .reveal.is-visible,
  html.premium-motion-ready .reveal.active,
  html.premium-motion-ready .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .event-card,
  .venue-card,
  .category-card,
  .why-card,
  .pricing-card,
  .featured-night-card,
  .event-card-img img,
  .featured-card-img-wrap img,
  .venue-card img,
  .nav-cta-btn,
  .hero-search-btn,
  .btn-search {
    transition: none !important;
  }

  .event-card:hover,
  .venue-card:hover,
  .why-card:hover,
  .pricing-card:hover,
  .featured-night-card:hover,
  .category-card:hover {
    transform: none !important;
  }

  .event-card:hover .event-card-img img,
  .featured-night-card:hover .featured-card-img-wrap img,
  .venue-card:hover img {
    transform: none !important;
  }

  .nav-cta-btn:hover::after,
  .hero-search-btn:hover::after,
  .btn-search:hover::after {
    animation: none !important;
  }

  .nav-cta-btn:active,
  .hero-search-btn:active,
  .btn-search:active,
  .nav-cta-btn.pm-pressed,
  .hero-search-btn.pm-pressed,
  .btn-search.pm-pressed {
    transform: none !important;
  }

  html { scroll-behavior: auto !important; }
}

/* ###### cinematic-event-venue-cards ###### */
/* === CINEMATIC EVENT & VENUE CARDS (Fever / Dice / RA level) ===
   Additive enhancement layer. Loaded LAST after style.css + theme-light.css.
   Turns the existing .event-card (.events-grid) into an image-forward,
   full-bleed cover card with a gradient scrim, floating date badge,
   glass save-heart, violet price pill, category tag, and social-proof
   / urgency badges. RTL-safe (logical properties) + reduced-motion safe.
   Nothing depends on JS to remain visible. */

/* ---- Card shell: keep it a clean rounded media surface ---- */
.events-grid .event-card.is-cinematic,
.event-card.is-cinematic {
    position: relative;
    isolation: isolate;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--color-border, #e9e9ec);
    background: var(--color-surface, #fff);
    box-shadow: 0 2px 10px rgba(20, 14, 40, 0.05);
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease;
    will-change: transform;
}
.events-grid .event-card.is-cinematic:hover,
.event-card.is-cinematic:hover {
    transform: translateY(-6px);
    border-color: var(--color-gold, #7C3AED);
    box-shadow:
        0 18px 44px rgba(124, 58, 237, 0.18),
        0 6px 16px rgba(20, 14, 40, 0.10);
}
.events-grid .event-card.is-cinematic:focus-visible,
.event-card.is-cinematic:focus-visible {
    outline: 2px solid var(--color-gold, #7C3AED);
    outline-offset: 3px;
}

/* ---- Media / cover image: taller, cinematic 4:5-ish frame ---- */
.events-grid .event-card.is-cinematic .event-img-wrap,
.event-card.is-cinematic .event-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #14101e;
    border-radius: 0; /* shell already clips */
}
.events-grid .event-card.is-cinematic .event-img-wrap img,
.event-card.is-cinematic .event-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.events-grid .event-card.is-cinematic:hover .event-img-wrap img,
.event-card.is-cinematic:hover .event-img-wrap img {
    transform: scale(1.08);
}

/* ---- Gradient scrim for bottom-text legibility ---- */
.events-grid .event-card.is-cinematic .event-img-wrap::after,
.event-card.is-cinematic .event-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(12, 8, 24, 0.92) 0%,
            rgba(12, 8, 24, 0.62) 26%,
            rgba(12, 8, 24, 0.10) 52%,
            rgba(12, 8, 24, 0) 70%
        );
    pointer-events: none;
    z-index: 1;
}

/* ---- Floating DATE badge (top inline-start) — white pill ---- */
.events-grid .event-card.is-cinematic .event-date-badge,
.event-card.is-cinematic .event-date-badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    inset-inline-end: auto;
    right: auto;
    left: auto;
    z-index: 4;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    padding: 7px 11px;
    min-width: 46px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(20, 14, 40, 0.22);
}
.events-grid .event-card.is-cinematic .event-date-badge .edb-day,
.event-card.is-cinematic .event-date-badge .edb-day {
    display: block;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 21px;
    font-weight: 800;
    color: #1c1c1c;
    letter-spacing: -0.5px;
}
.events-grid .event-card.is-cinematic .event-date-badge .edb-month,
.event-card.is-cinematic .event-date-badge .edb-month {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-gold, #7C3AED);
}

/* ---- SAVE heart (top inline-end) — circular glass button ---- */
.event-save-btn {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    inset-inline-start: auto;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(18, 12, 30, 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    color: #fff;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(12, 8, 24, 0.28);
    transition:
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.25s ease,
        color 0.2s ease,
        border-color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.event-save-btn:hover {
    background: rgba(18, 12, 30, 0.62);
    transform: scale(1.08);
}
.event-save-btn:active { transform: scale(0.92); }
.event-save-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.event-save-btn i { pointer-events: none; transition: transform 0.2s ease; }
/* The heart icon: outline by default, filled magenta when saved */
.event-save-btn .fa-solid { display: none; }
.event-save-btn .fa-regular { display: inline-block; }
.event-save-btn.saved {
    background: rgba(255, 255, 255, 0.96);
    border-color: #fff;
    color: var(--magenta, #EC4899);
}
.event-save-btn.saved .fa-regular { display: none; }
.event-save-btn.saved .fa-solid { display: inline-block; }
.event-save-btn.just-saved i { animation: ytSavedPop 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ytSavedPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ---- Category TAG chip (sits above the date on media, inline-start lower) ---- */
.events-grid .event-card.is-cinematic .event-category-badge,
.event-card.is-cinematic .event-category-badge {
    position: absolute;
    z-index: 4;
    top: auto;
    bottom: 132px; /* floats just above the title block; cushioned for badges */
    inset-inline-start: 14px;
    inset-inline-end: auto;
    left: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(18, 12, 30, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
}

/* ---- Overlaid content block: title + meta + price, sitting on the scrim ---- */
.events-grid .event-card.is-cinematic .event-card-content,
.event-card.is-cinematic .event-card-content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 3;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    border: 0;
    pointer-events: none; /* let hover/zoom flow to card; re-enable interactive bits */
}
.events-grid .event-card.is-cinematic .event-card-content a,
.events-grid .event-card.is-cinematic .event-card-content button,
.event-card.is-cinematic .event-card-content a,
.event-card.is-cinematic .event-card-content button {
    pointer-events: auto;
}
.events-grid .event-card.is-cinematic .event-card-content h3,
.event-card.is-cinematic .event-card-content h3 {
    margin: 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* meta row (time, venue) — light on dark */
.events-grid .event-card.is-cinematic .event-card-meta,
.event-card.is-cinematic .event-card-meta {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.events-grid .event-card.is-cinematic .event-card-meta span,
.event-card.is-cinematic .event-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.events-grid .event-card.is-cinematic .event-card-meta i,
.event-card.is-cinematic .event-card-meta i {
    color: var(--color-gold-light, #A78BFA);
    font-size: 11px;
}

/* ---- Footer row: violet price pill + Book CTA ---- */
.events-grid .event-card.is-cinematic .event-card-footer,
.event-card.is-cinematic .event-card-footer {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.events-grid .event-card.is-cinematic .event-card-footer > div:first-child,
.event-card.is-cinematic .event-card-footer > div:first-child {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
/* hide the now-redundant "From" caption on the cinematic overlay */
.events-grid .event-card.is-cinematic .event-price-label,
.event-card.is-cinematic .event-price-label {
    display: none;
}
/* violet PRICE pill */
.events-grid .event-card.is-cinematic .event-price-val,
.event-card.is-cinematic .event-price-val {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: linear-gradient(135deg, var(--color-gold, #7C3AED), var(--magenta, #D6206E));
    color: #fff;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 14px;
    font-weight: 800;
    padding: 6px 13px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.40);
    white-space: nowrap;
}
.events-grid .event-card.is-cinematic .event-price-val .price-original,
.event-card.is-cinematic .event-price-val .price-original {
    font-size: 11px;
    font-weight: 600;
    text-decoration: line-through;
    opacity: 0.7;
}
/* Book CTA → glass round-ish chip */
.events-grid .event-card.is-cinematic .event-btn-go,
.event-card.is-cinematic .event-btn-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.94);
    color: #1c1c1c;
    font-weight: 700;
    font-size: 12.5px;
    padding: 7px 13px;
    border-radius: 999px;
    transition: background-color 0.25s ease, gap 0.2s ease, color 0.2s ease;
}
.events-grid .event-card.is-cinematic:hover .event-btn-go,
.event-card.is-cinematic:hover .event-btn-go {
    background: var(--color-gold, #7C3AED);
    color: #fff;
    gap: 9px;
}
.events-grid .event-card.is-cinematic .event-btn-go i,
.event-card.is-cinematic .event-btn-go i { font-size: 11px; }
[dir="rtl"] .events-grid .event-card.is-cinematic .event-btn-go i,
[dir="rtl"] .event-card.is-cinematic .event-btn-go i {
    transform: scaleX(-1); /* arrow points correctly in RTL */
}

/* ---- Status / Pay-at-door badges row (above footer on the scrim) ---- */
.events-grid .event-card.is-cinematic .event-status-badge,
.events-grid .event-card.is-cinematic .pad-badge,
.event-card.is-cinematic .event-status-badge,
.event-card.is-cinematic .pad-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ---- Social-proof + URGENCY badges (.badge-going / .badge-fast / .badge-new) ----
   Designed to sit in an overlay strip near the bottom of the media,
   OR inline in the content block. Small, colored, legible, glassy. */
.event-badges {
    position: absolute;
    z-index: 4;
    inset-inline-start: 14px;
    inset-inline-end: 14px;
    bottom: 116px; /* just above the title; clears the content block */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}
.event-badge,
.badge-going,
.badge-fast,
.badge-new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 3px 10px rgba(12, 8, 24, 0.28);
    white-space: nowrap;
}
.badge-going {
    background: rgba(16, 185, 129, 0.92); /* emerald — social proof */
}
.badge-fast {
    background: rgba(239, 68, 68, 0.92);  /* red — urgency */
    animation: ytFastPulse 2.2s ease-in-out infinite;
}
.badge-new {
    background: linear-gradient(135deg, var(--color-gold, #7C3AED), var(--magenta, #EC4899));
}
@keyframes ytFastPulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(239, 68, 68, 0.28); }
    50%      { box-shadow: 0 3px 18px rgba(239, 68, 68, 0.62); }
}

/* ---- Reduced motion: kill all movement, keep states static ---- */
@media (prefers-reduced-motion: reduce) {
    .events-grid .event-card.is-cinematic,
    .event-card.is-cinematic,
    .events-grid .event-card.is-cinematic .event-img-wrap img,
    .event-card.is-cinematic .event-img-wrap img,
    .event-save-btn,
    .event-save-btn i,
    .events-grid .event-card.is-cinematic .event-btn-go,
    .event-card.is-cinematic .event-btn-go {
        transition: none !important;
    }
    .events-grid .event-card.is-cinematic:hover,
    .event-card.is-cinematic:hover { transform: none; }
    .events-grid .event-card.is-cinematic:hover .event-img-wrap img,
    .event-card.is-cinematic:hover .event-img-wrap img { transform: scale(1.01); }
    .event-save-btn.just-saved i { animation: none; }
    .badge-fast { animation: none; }
}

/* ---- Small screens: a touch shorter so titles never clip ---- */
@media (max-width: 540px) {
    .events-grid .event-card.is-cinematic .event-img-wrap,
    .event-card.is-cinematic .event-img-wrap { aspect-ratio: 3 / 4; }
}

/* ###### hero-upgrade ###### */
/* === HERO UPGRADE — Aurora + Rotating Word + Countdown === */
/* Additive enhancement of .hero / .hero-content on the dark cinematic hero.
   Stacks: video bg (lowest) < .hero-aurora (z 0) < .hero-grain-overlay (z 1)
   < .hero-content (z 2). All decorative layers are pointer-events:none and
   reduced-motion safe. RTL-safe via logical properties. */

/* --- Aurora glow + floating particles (behind content) --- */
.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;            /* above the dark video, behind grain + content */
  overflow: hidden;
  pointer-events: none;
  /* never hides content: purely decorative, low opacity */
}
/* Two slow-drifting colored blobs = the "aurora" */
.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.28;
  will-change: transform;
}
.hero-aurora::before {
  /* violet */
  background: radial-gradient(circle at center,
              rgba(124, 58, 237, 0.9) 0%, rgba(124, 58, 237, 0) 70%);
  inset-block-start: -22vmax;
  inset-inline-start: -16vmax;
  animation: heroAuroraA 22s ease-in-out infinite alternate;
}
.hero-aurora::after {
  /* signature magenta */
  background: radial-gradient(circle at center,
              rgba(214, 32, 110, 0.85) 0%, rgba(214, 32, 110, 0) 70%);
  inset-block-end: -24vmax;
  inset-inline-end: -18vmax;
  animation: heroAuroraB 26s ease-in-out infinite alternate;
}
@keyframes heroAuroraA {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    }
  50%  { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); }
  100% { transform: translate3d(2vmax, 12vmax, 0) scale(1.05); }
}
@keyframes heroAuroraB {
  0%   { transform: translate3d(0, 0, 0)          scale(1.05); }
  50%  { transform: translate3d(-7vmax, -5vmax, 0) scale(1);    }
  100% { transform: translate3d(-3vmax, -11vmax, 0) scale(1.2); }
}

/* Slow-floating particles layer (JS injects .hero-particle dots) */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-particle {
  position: absolute;
  inset-block-end: -12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
              rgba(255, 255, 255, 0.95), rgba(167, 139, 250, 0.55) 60%,
              rgba(167, 139, 250, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
  animation: heroFloat linear infinite;
}
@keyframes heroFloat {
  0%   { opacity: 0;   transform: translateY(0)       scale(0.6); }
  12%  { opacity: 0.9;                                            }
  85%  { opacity: 0.55;                                           }
  100% { opacity: 0;   transform: translateY(-78vh)   scale(1);   }
}

/* --- Rotating word (inside the h1) --- */
.rotating-word {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  text-align: start;
  /* violet -> magenta gradient text */
  background: linear-gradient(95deg, var(--gold, #7C3AED) 0%, #A78BFA 45%, #D6206E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  /* graceful base if JS never runs: the data-words first item is shown by JS,
     but the inline fallback text in the span keeps the headline complete */
  will-change: transform, opacity;
}
.rotating-word .rw-item {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.rotating-word.is-swapping .rw-item {
  opacity: 0;
  transform: translateY(0.4em);
}

/* --- Countdown chip (glass on dark hero) --- */
.hero-countdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 28px;
  padding: 8px 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  /* hidden until JS confirms a valid future date */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-countdown.is-ready {
  opacity: 1;
  transform: translateY(0);
}
.hero-countdown .hc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D6206E;
  box-shadow: 0 0 10px rgba(214, 32, 110, 0.9);
  animation: hcPulse 1.6s ease-in-out infinite;
  flex: none;
}
.hero-countdown .hc-label {
  color: rgba(255, 255, 255, 0.78);
}
.hero-countdown .hc-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  /* gradient digits to match the brand accent */
  background: linear-gradient(90deg, #A78BFA, #D6206E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* RTL: keep the time string left-to-right (digits + units read naturally) */
  direction: ltr;
  unicode-bidi: isolate;
}
@keyframes hcPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.5); opacity: 0.5; }
}

/* --- Reduced motion: kill all hero motion, keep everything visible --- */
@media (prefers-reduced-motion: reduce) {
  .hero-aurora::before,
  .hero-aurora::after { animation: none; }
  .hero-particles { display: none; }
  .rotating-word .rw-item { transition: none; }
  .hero-countdown { transition: none; opacity: 1; transform: none; }
  .hero-countdown .hc-dot { animation: none; }
}

/* --- Small screens: tighten the countdown chip --- */
@media (max-width: 480px) {
  .hero-countdown { font-size: 13px; padding: 7px 13px; margin-bottom: 22px; }
}

/* ###### micro-polish-finish ###### */
/* ============================================================
   === MICRO-POLISH & FINISH (cursor, skeleton, empty-state,
   === scroll-top, 404) — YallaTonight premium layer
   === Additive only. Light theme. RTL + reduced-motion safe.
   ============================================================ */

/* --- local tokens (fallbacks so this block is self-contained) --- */
.yt-mp-scope, :root {
  --mp-violet: var(--gold, #7C3AED);
  --mp-violet-light: var(--gold-light, #8B5CF6);
  --mp-violet-lighter: #A78BFA;
  --mp-magenta: #D6206E;
  --mp-ink: #1c1c1c;
  --mp-muted: #6a6a6a;
  --mp-border: #ececec;
  --mp-surface: #ffffff;
}

/* ============================================================
   1) CUSTOM CURSOR  (DESKTOP, fine pointer, >=1024px only)
   A violet glow dot trailing the mouse; grows over interactives.
   Injected element: #mp-cursor (+ #mp-cursor-ring).
   Hidden everywhere by default; only the media query reveals it.
   ============================================================ */
#mp-cursor,
#mp-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483000;       /* above modals/toasts */
  opacity: 0;
  will-change: transform, opacity;
  /* default = no native-cursor override; see media query */
}

/* The bright core dot */
#mp-cursor {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;     /* center on pointer */
  background: var(--mp-violet);
  box-shadow: 0 0 12px 2px rgba(124, 58, 237, 0.55);
  transition: opacity .25s ease,
              width .2s cubic-bezier(.16,1,.3,1),
              height .2s cubic-bezier(.16,1,.3,1),
              background .2s ease;
}

/* The soft trailing ring */
#mp-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  background: radial-gradient(circle at center, rgba(124,58,237,.10), rgba(124,58,237,0) 70%);
  transition: opacity .3s ease,
              width .25s cubic-bezier(.16,1,.3,1),
              height .25s cubic-bezier(.16,1,.3,1),
              border-color .25s ease,
              background .25s ease;
}

/* Grow + brighten over links / buttons (toggled via .mp-hover by JS) */
#mp-cursor.mp-hover {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--mp-magenta);
}
#mp-cursor-ring.mp-hover {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(214, 32, 110, 0.45);
  background: radial-gradient(circle at center, rgba(214,32,110,.12), rgba(214,32,110,0) 70%);
}

/* Click pulse */
#mp-cursor.mp-down { transform: scale(.6); }
#mp-cursor-ring.mp-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* Reveal ONLY on true desktop pointers (no touch, wide screen) */
@media (pointer: fine) and (min-width: 1024px) {
  html.mp-cursor-on,
  html.mp-cursor-on a,
  html.mp-cursor-on button,
  html.mp-cursor-on [role="button"],
  html.mp-cursor-on .nav-cta-btn,
  html.mp-cursor-on .hero-search-btn,
  html.mp-cursor-on .btn-search {
    cursor: none;            /* hide native cursor only when our cursor is active */
  }
  html.mp-cursor-on #mp-cursor,
  html.mp-cursor-on #mp-cursor-ring { opacity: 1; }
}

/* Never show on touch / coarse pointers, and respect reduced motion */
@media (pointer: coarse), (max-width: 1023.98px) {
  #mp-cursor, #mp-cursor-ring { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  /* keep it static-feeling: drop the trailing/scale transitions */
  #mp-cursor, #mp-cursor-ring { transition: opacity .2s ease !important; }
  #mp-cursor.mp-down, #mp-cursor-ring.mp-down { transform: none; }
}

/* ============================================================
   2) LOADING SKELETON SHIMMER
   Add class .skeleton (optionally with .skeleton-text / -title /
   -img / -circle) to any placeholder element.
   ============================================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: #eef0f2;
  background-image: linear-gradient(
    90deg,
    rgba(124, 58, 237, 0)   0%,
    rgba(124, 58, 237, 0.08) 20%,
    rgba(124, 58, 237, 0.14) 50%,
    rgba(124, 58, 237, 0.08) 80%,
    rgba(124, 58, 237, 0)  100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0;
  border-radius: var(--radius-md, 10px);
  animation: mp-shimmer 1.4s ease-in-out infinite;
  /* hide any real content/text while loading */
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.skeleton * { visibility: hidden; }

/* Shimmer direction flips automatically in RTL */
@keyframes mp-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position:  250% 0; }
}
html[dir="rtl"] .skeleton { animation-name: mp-shimmer-rtl; }
@keyframes mp-shimmer-rtl {
  0%   { background-position:  250% 0; }
  100% { background-position: -150% 0; }
}

/* Handy shape helpers */
.skeleton-img    { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg, 16px); }
.skeleton-title  { height: 18px; width: 70%;  border-radius: 6px; margin-bottom: 10px; }
.skeleton-text   { height: 12px; width: 100%; border-radius: 6px; margin-bottom: 8px; }
.skeleton-text.short { width: 45%; }
.skeleton-circle { width: 44px; height: 44px; border-radius: 50%; }
.skeleton-btn    { height: 40px; width: 120px; border-radius: var(--radius-full, 9999px); }

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background-image: none;
    background-color: #eef0f2;
  }
}

/* ============================================================
   3) REFINED EMPTY STATE
   Enhances existing .empty-state blocks (e.g. "No events").
   Wrap icon in <span class="empty-state-icon"> for the soft
   violet circle; works even with the legacy inline-styled icon.
   ============================================================ */
.empty-state {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: clamp(40px, 6vw, 72px) 20px;
  max-width: 520px;
  margin-inline: auto;
}

/* Soft violet circle around the icon (new wrapper) */
.empty-state .empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%,
              rgba(139, 92, 246, 0.18),
              rgba(124, 58, 237, 0.10) 70%);
  border: 1px solid rgba(124, 58, 237, 0.16);
  box-shadow: 0 10px 30px -12px rgba(124, 58, 237, 0.45);
  margin: 0 auto 4px;
  animation: mp-emptyfloat 4.5s ease-in-out infinite;
}
.empty-state .empty-state-icon i,
.empty-state > i {                  /* legacy: bare <i> inside empty-state */
  font-size: 2.2rem;
  color: var(--mp-violet) !important;
  opacity: 1 !important;
  line-height: 1;
}

/* Friendly copy styling */
.empty-state h3,
.empty-state h4 {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  color: var(--mp-ink) !important;
  margin: 4px 0 0;
}
.empty-state p {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--mp-muted) !important;
  max-width: 420px;
  margin: 0 auto;
}

/* Optional CTA inside an empty state */
.empty-state .empty-state-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--radius-full, 9999px);
  background: var(--mp-violet);
  color: #fff !important;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease;
}
.empty-state .empty-state-cta:hover {
  background: var(--mp-violet-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(124, 58, 237, 0.55);
}

@keyframes mp-emptyfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-state .empty-state-icon { animation: none; }
}

/* ============================================================
   4) SCROLL-TO-TOP FAB  (polish existing .premium-scroll-top
   for the light theme; JS that creates it already exists)
   ============================================================ */
.premium-scroll-top {
  /* re-theme for light bg — keep existing positioning from premium-ui.css */
  background: var(--mp-violet) !important;
  border: none !important;
  color: #fff !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 1.05rem !important;
  box-shadow: 0 8px 24px -6px rgba(124, 58, 237, 0.55) !important;
}
.premium-scroll-top:hover {
  background: var(--mp-violet-light) !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 14px 32px -8px rgba(124, 58, 237, 0.6) !important;
}
.premium-scroll-top:active { transform: translateY(-1px) scale(.98) !important; }
.premium-scroll-top:focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.35);
  outline-offset: 3px;
}

/* RTL: anchor to the inline-start side instead of hard right */
html[dir="rtl"] .premium-scroll-top {
  right: auto !important;
  left: 30px;
}
@media (max-width: 768px) {
  html[dir="rtl"] .premium-scroll-top { left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-scroll-top { transition: opacity .3s ease, visibility .3s ease !important; }
  .premium-scroll-top:hover { transform: none !important; }
}

/* ============================================================
   5) 404 / ERROR PAGE POLISH
   The shipped 404 (app/Views/frontend/404.php) is dark + inline.
   These rules gently lift it toward the violet brand and also
   provide a generic .error-page / .not-found light layout for
   any other error view that adopts those classes.
   ============================================================ */

/* a) Light glow accent on the existing 404 markup */
.error-code {
  background-image: linear-gradient(135deg, var(--mp-violet-light) 0%, var(--mp-violet) 55%, var(--mp-magenta) 100%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
  filter: drop-shadow(0 12px 30px rgba(124, 58, 237, 0.25));
}

/* b) Generic light error layout (use class .error-page or .not-found) */
.error-page,
.not-found {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: clamp(48px, 9vw, 110px) 20px;
  background:
    radial-gradient(700px 360px at 50% 12%, rgba(124, 58, 237, 0.08), transparent 70%),
    var(--mp-surface);
}
.error-page .error-badge,
.not-found .error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(139,92,246,.18), rgba(124,58,237,.10) 70%);
  border: 1px solid rgba(124, 58, 237, 0.16);
  color: var(--mp-violet);
  font-size: 2.6rem;
  box-shadow: 0 14px 36px -14px rgba(124, 58, 237, 0.5);
}
.error-page .error-num,
.not-found .error-num {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: clamp(4.5rem, 16vw, 8.5rem);
  font-weight: 700;
  line-height: 1;
  background-image: linear-gradient(135deg, var(--mp-violet-light), var(--mp-violet) 55%, var(--mp-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-page h1,
.not-found h1 {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 600;
  color: var(--mp-ink);
  margin: 0;
}
.error-page p,
.not-found p {
  color: var(--mp-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 440px;
  margin: 0 auto;
}
.error-page .btn-home,
.not-found .btn-home {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border-radius: var(--radius-full, 9999px);
  background: var(--mp-violet);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-weight: 600;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease;
  box-shadow: 0 10px 28px -8px rgba(124, 58, 237, 0.5);
}
.error-page .btn-home:hover,
.not-found .btn-home:hover {
  background: var(--mp-violet-light);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(124, 58, 237, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .error-code { filter: none !important; }
  .error-page .btn-home:hover,
  .not-found .btn-home:hover { transform: none; }
}

/* ###### Time-Aware Night Mode ###### */
/* ============================================================
   === TIME-AWARE NIGHT MODE — signature "YallaTonight" feature ===
   A complete dark theme + violet-neon glow, applied via html.night.
   Overrides the same custom properties theme-light.css sets, plus the
   hard !important light rules it forces (navbar, cards, footer, hero
   search, search-header, inputs, auth panels, headings).
   RTL-safe (logical properties, no left/right-only). Reduced-motion safe.
   ============================================================ */

/* ── 1. Theme tokens: flip the light palette to elegant dark ──
   html.night beats theme-light.css :root / html[lang="ar"] by being
   later in source order at equal-or-higher specificity. */
html.night,
html.night[lang="ar"] {
    /* style.css tokens */
    --bg: #0a0a12;
    --surface: #15131f;
    --surface-2: #1b1828;
    --glass: rgba(21, 19, 31, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);
    --secondary: #1b1828;
    --text: #f4f4f6;
    --text-muted: #9aa0b4;
    --text-dim: #6f7488;
    --border: rgba(255, 255, 255, 0.08);

    /* design-tokens.css */
    --color-black: #0a0a12;
    --color-surface: #15131f;
    --color-surface-2: #1b1828;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-text-primary: #f4f4f6;
    --color-text-muted: rgba(244, 244, 246, 0.62);
    --color-white: #f4f4f6;

    /* brand accent stays violet, brightened for dark + neon glow */
    --color-gold: #8B5CF6;
    --color-gold-light: #A78BFA;
    --color-gold-dim: rgba(139, 92, 246, 0.18);
    --gold: #8B5CF6;
    --primary: #8B5CF6;
    --primary-glow: rgba(139, 92, 246, 0.55);
    --accent: #8B5CF6;
    --theme-accent: #8B5CF6;
    --theme-accent-secondary: #7C3AED;
    --theme-accent-light: #C4B5FD;
    --neon-purple: #8B5CF6;
    --neon-blue: #7C3AED;
    --neon-pink: #EC4899;
    --gradient-main: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
    --gradient-hot: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --gradient-fire: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%);
    --cta-glow: 0 4px 22px rgba(139, 92, 246, 0.45);

    /* night-only helpers used by rules below */
    --yt-night-neon: 0 0 22px rgba(139, 92, 246, 0.45);
    --yt-night-card-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

/* ── 2. Page background ── */
html.night body {
    background: #0a0a12 !important;
    background-image:
        radial-gradient(1100px 540px at 78% -8%, rgba(139, 92, 246, 0.14), transparent 60%),
        radial-gradient(900px 520px at 10% 4%, rgba(214, 32, 110, 0.08), transparent 62%) !important;
    background-attachment: fixed !important;
    color: var(--text) !important;
}

/* ── 3. Navbar: dark glass with a hairline violet underline ── */
html.night .site-navbar,
html.night .site-navbar.scrolled {
    background: rgba(12, 10, 20, 0.82) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 0 rgba(139, 92, 246, 0.22), 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}
html.night .logo-text-cyber { color: #f4f4f6 !important; }
html.night .nav-pill-menu {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.night .nav-pill-menu a,
html.night .nav-menu a:not(.nav-cta-btn) { color: #c3c6d4 !important; }
html.night .nav-pill-menu a:hover,
html.night .nav-pill-menu a.active,
html.night .nav-menu a:not(.nav-cta-btn):hover {
    color: #C4B5FD !important;
    background: rgba(139, 92, 246, 0.16) !important;
}
html.night .mobile-toggle { color: #f4f4f6 !important; }
html.night .mobile-nav-overlay { background: rgba(10, 10, 18, 0.98) !important; }
html.night .mobile-nav-overlay a { color: #f4f4f6 !important; }
html.night .mobile-nav-close { color: #f4f4f6 !important; }

/* Language switcher → dark */
html.night .lang-toggle-btn,
html.night .lang-select {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e7e8ef !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
html.night .lang-dropdown-menu {
    background: #15131f !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
}
html.night .lang-dropdown-menu a { color: #d8dae4 !important; }
html.night .lang-dropdown-menu a:hover,
html.night .lang-dropdown-menu a.active {
    background: rgba(139, 92, 246, 0.16) !important;
    color: #C4B5FD !important;
}

/* CTA: white text + premium neon halo */
html.night .nav-cta-btn {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.5), 0 0 0 1px rgba(196, 181, 253, 0.25) inset !important;
}
html.night .nav-cta-btn:hover {
    box-shadow: 0 0 26px rgba(139, 92, 246, 0.7), 0 0 52px rgba(139, 92, 246, 0.35) !important;
}

/* ── 4. Cards & surfaces: dark with subtle violet edge-glow on hover ── */
html.night .card,
html.night .glass-card,
html.night .event-card,
html.night .venue-card,
html.night .why-card,
html.night .testimonial-card,
html.night .bento-item,
html.night .mock-event-card,
html.night .pricing-card,
html.night [class*="glass"],
html.night .panel,
html.night .modal-content,
html.night .auth-card,
html.night .dash-card,
html.night .checkout-card,
html.night .summary-card,
html.night .info-card,
html.night .stat-card,
html.night .ticket-row {
    background: #15131f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--yt-night-card-shadow) !important;
    color: var(--text) !important;
}
/* Lift cards toward the neon on hover — purely additive */
html.night .event-card:hover,
html.night .venue-card:hover,
html.night .pricing-card:hover,
html.night .why-card:hover {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(139, 92, 246, 0.28) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* ── 5. Footer ── */
html.night .site-footer {
    background: #0c0a14 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
html.night .site-footer .footer-social a {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #c3c6d4 !important;
}
html.night .site-footer a { color: #b7bac6 !important; }
html.night .site-footer a:hover { color: #C4B5FD !important; }

/* ── 6. Hero search card ── */
html.night .hero-search-form {
    background: rgba(21, 19, 31, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.10) !important;
}
html.night .search-field { border-color: rgba(255, 255, 255, 0.10) !important; }
html.night .search-field label { color: #9aa0b4 !important; }
html.night .search-field select,
html.night .search-field input {
    color: #f4f4f6 !important;
    color-scheme: dark;
}
/* Hero headline already white over the image — keep it, add gentle glow */
html.night .hero-content h1 {
    text-shadow: 0 2px 26px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.25) !important;
}

/* ── 7. Inner-page header bands → dark ── */
html.night .search-header,
html.night .page-header,
html.night .page-hero,
html.night .auth-hero,
html.night .dashboard-header,
html.night .profile-header,
html.night .portfolio-header,
html.night .listing-header {
    background: #110f1b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
html.night .search-header h1,
html.night .page-header h1,
html.night .page-hero h1 { color: #f4f4f6 !important; }

/* ── 8. Section alternating background ── */
html.night .section:nth-of-type(even) { background: #0d0b15 !important; }

/* ── 9. Headings & body text back to light-on-dark ──
   (theme-light forced these dark; we must beat it under night) */
html.night .section-title,
html.night .section-header h2,
html.night .section-heading,
html.night .why-card h3,
html.night .why-card h4,
html.night .testimonial-name,
html.night .bento-title,
html.night .mock-detail-col h4,
html.night h2,
html.night h3,
html.night h4,
html.night h5 { color: #f4f4f6 !important; }

html.night .section-label,
html.night .eyebrow,
html.night .section-eyebrow,
html.night .section-tag {
    color: #C4B5FD !important;
    opacity: 1 !important;
}
html.night .section-subtitle,
html.night .why-card p,
html.night .testimonial-text,
html.night .testimonial-role,
html.night .empty-state,
html.night .empty-state p,
html.night .muted,
html.night .text-muted { color: #aeb2c2 !important; }

/* Gradient text titles → restore the violet gradient fill on dark */
html.night .text-gradient,
html.night .gradient-text,
html.night .shimmer-text {
    background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #C4B5FD !important;
}
/* …but the hero headline stays white over its image */
html.night .hero-content h1,
html.night .hero-content h1.shimmer-text {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}
html.night .empty-state-icon,
html.night .empty-state i { color: #3a3850 !important; }

/* ── 10. Form fields site-wide → dark ── */
html.night input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=color]),
html.night select,
html.night textarea {
    background: #1b1828 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f4f4f6 !important;
    color-scheme: dark;
}
html.night input:focus,
html.night select:focus,
html.night textarea:focus {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.30), 0 0 16px rgba(139, 92, 246, 0.25) !important;
    outline: none;
}
html.night input::placeholder,
html.night textarea::placeholder { color: #6f7488 !important; }
html.night .btn-clear-filters {
    color: #C4B5FD !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

/* ── 11. Auth pages → dark form side ── */
html.night .auth-split,
html.night .auth-form-panel { background: #0e0c17 !important; }
html.night .auth-form-header h2 {
    color: #f4f4f6 !important;
    -webkit-text-fill-color: #f4f4f6 !important;
    background: none !important;
}
html.night .auth-form-header p { color: #9aa0b4 !important; }
html.night .auth-form label,
html.night .auth-form-inner label { color: #c3c6d4 !important; }
html.night .auth-divider-text { color: #6f7488 !important; }
html.night .auth-divider-line { background: rgba(255, 255, 255, 0.10) !important; }
html.night .auth-form-footer,
html.night .auth-form-footer p { color: #9aa0b4 !important; }

/* ── 12. Solid violet buttons keep white text + neon ── */
html.night .btn-search,
html.night .hero-search-btn,
html.night .btn-solid,
html.night .btn-primary,
html.night button.primary {
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.45) !important;
}

/* ============================================================
   === NIGHT-MODE TOGGLE BUTTON (moon / sun) ===
   Lives in the navbar. Styled for BOTH light and night.
   ============================================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid #e6e6e6;
    background: #f6f6f6;
    color: #444;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.theme-toggle:hover {
    color: #7C3AED;
    border-color: #d9ccfb;
    background: #f1ebff;
    transform: translateY(-1px);
}
.theme-toggle:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}
.theme-toggle i { pointer-events: none; transition: transform 0.4s ease; }

/* Toggle in night mode: glowing violet moon */
html.night .theme-toggle {
    background: rgba(139, 92, 246, 0.14) !important;
    border: 1px solid rgba(139, 92, 246, 0.45) !important;
    color: #C4B5FD !important;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.4) !important;
}
html.night .theme-toggle:hover {
    background: rgba(139, 92, 246, 0.24) !important;
    box-shadow: 0 0 26px rgba(139, 92, 246, 0.6) !important;
    transform: translateY(-1px);
}
/* Subtle spin when the icon swaps */
html.night .theme-toggle i { transform: rotate(360deg); }

/* Mobile-drawer variant of the toggle (larger tap target) */
.mobile-nav-overlay .theme-toggle { width: 48px; height: 48px; font-size: 1.15rem; }

@media (max-width: 992px) {
    /* Keep the toggle visible next to the hamburger on small screens */
    .nav-right-wrap .theme-toggle { display: inline-flex; }
}

/* ── Reduced motion: kill all night-mode motion/transitions ── */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle i,
    html.night .theme-toggle i,
    html.night .event-card:hover,
    html.night .venue-card:hover,
    html.night .pricing-card:hover,
    html.night .why-card:hover {
        transition: none !important;
        transform: none !important;
    }
}

/* === FINAL SAFETY OVERRIDES (integration layer) === */
/* B2: reveal content must be visible if JS never runs / reduced-motion */
html:not(.premium-motion-ready) .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }
/* I8: empty-state heading was white-on-white via inline color:#fff */
.empty-state h3 { color: #1c1c1c !important; }
.empty-state p  { color: #5a5a5a !important; }
html.night .empty-state h3 { color: #f4f4f6 !important; }
html.night .empty-state p  { color: #9aa0ad !important; }

/* === FIX: rotating-word gradient on the actual text node (.rw-item) ===
   The JS wraps the word in a child .rw-item; background-clip:text on the
   parent then clips to no direct text and renders invisible. Put the gradient
   on .rw-item itself so it always shows (and beats theme-light's h1 fills). */
.hero-content h1 .rotating-word .rw-item,
.rotating-word .rw-item {
  background: linear-gradient(95deg, #8B5CF6 0%, #A78BFA 45%, #D6206E 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #A78BFA; /* solid fallback if clip unsupported */
}

/* === FIX: night-mode headings must be light (beat theme-light's
   h2..h5 / .section-title color:#1c1c1c !important) === */
html.night h1, html.night h2, html.night h3, html.night h4, html.night h5,
html.night .section-title, html.night .section-heading, html.night .section-header h2,
html.night .why-card h3, html.night .why-card h4, html.night .value-tile h3,
html.night .testimonial-name, html.night .bento-title {
  color: #f4f4f6 !important;
  -webkit-text-fill-color: #f4f4f6 !important;
}
/* keep the gradient accents in night mode */
html.night .rotating-word .rw-item {
  -webkit-text-fill-color: transparent !important;
}
html.night .section-subtitle, html.night .why-card p, html.night .empty-state p {
  color: #9aa0ad !important;
}

/* === Custom cursor removed per request — guarantee the native cursor === */
#mp-cursor, #mp-cursor-ring { display: none !important; }
html.mp-cursor-on, html.mp-cursor-on * { cursor: auto !important; }
html.mp-cursor-on a, html.mp-cursor-on button, html.mp-cursor-on [role="button"],
html.mp-cursor-on .nav-cta-btn, html.mp-cursor-on .hero-search-btn { cursor: pointer !important; }