/* ═══════════════════════════════════════════════════════════════════
   RIHLA × PARTIFUL — Light "celebration on white marble" theme
   White canvas · black/white action system · gradient washes ·
   Cabinet Grotesk display + Inter UI. Scoped under body.partiful so it
   cleanly overrides the dark styles.css base.
   ═══════════════════════════════════════════════════════════════════ */

body.partiful {
  /* ── Colors ── */
  --ink:        #000000;
  --canvas:     #ffffff;
  --graphite:   #333333;
  --slate:      #666666;
  --ash:        #999999;
  --fog:        #b3b3b3;
  --silver:     #cccccc;
  --warm-sand:  #d9c58b;
  --party-pink: #f8c4ff;
  --periwinkle: #96c4ff;
  --spearmint:  #85dadc;
  --midnight-blue: #001666;
  --leaf:  #31c431;
  --amber: #ffae00;
  --ember: #ff0000;

  --grad-pink:  linear-gradient(135deg, rgb(248,196,255) 0%, rgb(240,182,224) 100%);
  --grad-peri:  linear-gradient(180deg, rgba(150,196,255,0.14) 0%, rgba(255,255,255,0) 78%);
  --grad-hero:  linear-gradient(135deg, rgba(248,196,255,0.55) 0%, rgba(204,193,255,0.42) 38%, rgba(150,196,255,0.30) 70%, rgba(255,255,255,0) 100%);
  --grad-spear: linear-gradient(130deg, rgb(133,218,220) 0%, rgb(192,226,226) 100%);

  /* ── Type ── */
  --font-display: 'Cabinet Grotesk', 'Clash Display', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', 'Satoshi', ui-sans-serif, system-ui, sans-serif;

  /* ── Shape & shadow ── */
  --r-btn: 8px;  --r-card: 12px;  --r-pill: 960px;  --r-modal: 16px;  --r-input: 8px;
  --sh-sm: rgba(0,0,0,0.10) 0px 0px 6px 0px;
  --sh-lg: rgba(0,0,0,0.10) 0px 0px 20px 0px;
  --sh-card: rgba(0,0,0,0.05) 0px 0.8px 2.4px -0.6px, rgba(0,0,0,0.05) 0px 2.4px 7.2px -1.25px, rgba(0,0,0,0.05) 0px 6.4px 19.1px -1.875px, rgba(0,0,0,0.05) 0px 20px 60px -2.5px;

  /* remap legacy vars used by inline styles & shared components */
  --color-rihla-blue:      #000000;
  --color-rihla-blue-dark: #000000;
  --color-graphite:        #333333;
  --color-slate:           #666666;
  --color-ash:             #999999;
  --accent:                #000000;
  --text: #000000; --text-2: #666666; --text-3: #999999;

  background: var(--canvas) !important;
  background-image: none !important;
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}

body.partiful ::selection { background: var(--party-pink); color: #3a1340; }
body.partiful ::-webkit-scrollbar-thumb { background: var(--silver); }
body.partiful :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ── Announcement marquee (pink celebration strip) ── */
body.partiful .sl-marquee-wrap {
  background: var(--grad-pink);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
body.partiful .sl-marquee-item { color: #3a1340; font-weight: 500; font-size: 13px; letter-spacing: -0.01em; }
body.partiful .sl-marquee-sep  { color: rgba(58,19,64,0.4); }

/* ════════ NAV ════════ */
body.partiful .sl-nav-outer { background: transparent; padding: 16px 24px 0; }
body.partiful .sl-nav {
  max-width: 1200px; margin: 0 auto;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  border: 1px solid var(--silver);
  box-shadow: var(--sh-sm);
  border-radius: 14px;
  padding: 9px 9px 9px 22px;
}
body.partiful .sl-nav.scrolled { box-shadow: var(--sh-lg); background: rgba(255,255,255,0.94); padding: 7px 7px 7px 20px; }
body.partiful .sl-nav-logo { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
body.partiful .sl-nav-logo::before { filter: none; }
body.partiful .sl-logo-sep { color: var(--silver); }
body.partiful .sl-logo-arabic { color: var(--ink); }
body.partiful .sl-nav-link { color: var(--graphite); font-weight: 500; border-radius: var(--r-pill); font-size: 14px; letter-spacing: -0.02em; }
body.partiful .sl-nav-link:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
body.partiful .sl-nav-link.sl-active { color: var(--ink); background: rgba(0,0,0,0.05); }
body.partiful .sl-nav-link.sl-active::after { background: var(--warm-sand); box-shadow: none; }

/* nav action buttons → black/white system */
body.partiful .sl-nav-actions .btn-primary,
body.partiful .sl-nav-actions .btn-gold {
  background: var(--ink) !important; color: #fff !important; border: 1px solid var(--ink) !important;
  border-radius: var(--r-btn) !important; font-weight: 700 !important; letter-spacing: -0.03em;
}
body.partiful .sl-nav-actions .btn-primary:hover,
body.partiful .sl-nav-actions .btn-gold:hover { opacity: 0.85; box-shadow: none; transform: none; }
body.partiful .sl-nav-actions .btn-ghost {
  background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important;
  border-radius: var(--r-btn) !important; font-weight: 500 !important;
}
body.partiful .sl-nav-actions .btn-ghost:hover { background: rgba(0,0,0,0.05) !important; }
body.partiful .nav-user-pill { color: var(--ink) !important; background: rgba(0,0,0,0.05) !important; border: 1px solid var(--silver) !important; border-radius: var(--r-pill) !important; }
body.partiful .nav-user-pill .avatar { background: var(--ink); color: #fff; }
body.partiful .sl-nav-actions .spinner { border-color: #000 transparent #000 transparent !important; }

/* ════════ BUTTONS (black/white) ════════ */
body.partiful .sl-btn,
body.partiful .hero-cta-primary,
body.partiful .hero-cta-ghost {
  font-family: var(--font-body); font-weight: 700; letter-spacing: -0.03em;
  border-radius: var(--r-btn); transition: opacity .2s ease, background .2s ease, transform .15s ease;
}
body.partiful .sl-btn-black,
body.partiful .sl-btn-yellow,
body.partiful .sl-btn-primary,
body.partiful .hero-cta-primary {
  background: var(--ink); color: #fff; border: 1px solid var(--ink); box-shadow: none; padding: 12px 24px;
}
body.partiful .sl-btn-black:hover,
body.partiful .sl-btn-yellow:hover,
body.partiful .hero-cta-primary:hover { opacity: 0.85; box-shadow: none; transform: translateY(-1px); }
body.partiful .hero-cta-primary .cta-ico { background: rgba(255,255,255,0.18); color: #fff; }
body.partiful .sl-btn-outline,
body.partiful .sl-btn-outline-blue,
body.partiful .sl-btn-outline-white,
body.partiful .hero-cta-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--ink); font-weight: 500; padding: 12px 24px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.partiful .sl-btn-outline:hover,
body.partiful .sl-btn-outline-white:hover,
body.partiful .hero-cta-ghost:hover { background: rgba(0,0,0,0.05); border-color: var(--ink); }
body.partiful .sl-btn-lg { padding: 14px 30px; font-size: 15px; }

/* ════════ LABEL PILLS / BADGES ════════ */
body.partiful .sl-label-pill {
  background: rgba(0,0,0,0.05); color: var(--ink); border: none;
  border-radius: var(--r-pill); font-weight: 700; font-size: 12px; letter-spacing: -0.01em;
  padding: 7px 14px;
}
body.partiful .sl-label-white { background: rgba(0,0,0,0.05) !important; color: var(--ink) !important; border: none !important; }
body.partiful .badge, body.partiful .badge-blue, body.partiful .badge-default {
  border-radius: var(--r-pill); background: rgba(0,0,0,0.06); color: var(--ink); border: none; font-weight: 700;
}

/* ════════ SECTIONS (white ↔ periwinkle rhythm) ════════ */
body.partiful .sl-section { padding: 80px 24px; }
body.partiful .sl-section-white   { background: var(--canvas); }
body.partiful .sl-section-concrete{ background: var(--grad-peri); }
body.partiful .sl-section-sky     { background: var(--grad-peri); }
body.partiful .partners-3d-section{ background: var(--canvas); }
body.partiful .sl-container { max-width: 1200px; }
body.partiful .sl-section-title {
  font-family: var(--font-display); color: var(--ink); font-weight: 700; letter-spacing: -0.04em;
}
body.partiful .sl-section-sub { color: var(--slate); }
body.partiful .sl-section-header-row > div .sl-section-title { letter-spacing: -0.04em; }

/* ════════ HERO ════════ */
body.partiful .sl-hero {
  background: var(--grad-hero), var(--canvas);
  min-height: auto; padding: 72px 24px 90px;
}
body.partiful .hero-orbs { display: none; }            /* drop the dark orbs */
body.partiful .sl-hero-label { background: rgba(0,0,0,0.05); color: var(--ink); border: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-weight: 700; }
body.partiful .sl-hero-label::before { background: var(--ink); box-shadow: none; }
body.partiful .sl-hero-title { font-family: var(--font-display); color: var(--ink); font-weight: 800; letter-spacing: -0.03em; }
body.partiful .hero-grad {            /* spec: black headline, no gradient text */
  background: none; -webkit-text-fill-color: var(--ink); color: var(--ink);
}
body.partiful .sl-hero-sub { color: var(--slate); }
body.partiful .hero-trust-text { color: var(--slate); }
body.partiful .hero-trust-text strong.hero-stars { color: var(--amber); }
body.partiful .hero-avatars span { background: #fff; border: 1.5px solid #fff; box-shadow: var(--sh-sm); }
body.partiful .sl-hero-stats { border-top: 1px solid var(--silver); }
body.partiful .sl-stat-num { font-family: var(--font-display); color: var(--ink); }
body.partiful .sl-stat-label { color: var(--slate); }

/* Hero ticket → light invitation card, tilted (Partiful "scattered tile") */
body.partiful .hero-ticket-card {
  background: #fff; border: 1px solid var(--silver);
  box-shadow: var(--sh-card);
  transform: rotateY(0deg) rotate(4deg); animation: pfTicketFloat 7s ease-in-out infinite;
}
@keyframes pfTicketFloat { 0%,100%{ transform: rotate(4deg) translateY(0);} 50%{ transform: rotate(4deg) translateY(-12px);} }
body.partiful .htk-brand { color: var(--ink); }
body.partiful .htk-ar { color: var(--ink); }
body.partiful .htk-admit { color: var(--ink); border-color: var(--ink); }
body.partiful .htk-event { font-family: var(--font-display); color: var(--ink); }
body.partiful .htk-ar-event { color: var(--slate); }
body.partiful .htk-meta label { color: var(--ash); }
body.partiful .htk-meta span { color: var(--ink); }
body.partiful .htk-perf { border-top-color: var(--silver); }
body.partiful .htk-perf i { background: var(--canvas); }
body.partiful .htk-stub-meta span { color: var(--slate); }
body.partiful .htk-stub-meta strong { color: var(--ink); }

/* ════════ EVENT CARDS ════════ */
body.partiful .event-card {
  background: #fff; border: 1px solid var(--silver); border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  transition: transform .28s ease, box-shadow .28s ease;
}
body.partiful .event-card:hover { transform: translateY(-4px); border-color: var(--silver); box-shadow: var(--sh-lg); }
body.partiful .card-gloss { display: none; }
body.partiful .event-card-img-placeholder {
  background: var(--grad-spear); border-bottom: 1px solid var(--silver); text-shadow: none; height: 156px;
}
body.partiful .event-card-img-placeholder::after { display: none; }
body.partiful .event-card-genre { color: var(--slate); letter-spacing: 0.06em; }
body.partiful .event-card-title { font-family: var(--font-display); color: var(--ink); }
body.partiful .event-card-arabic { color: var(--ash); }
body.partiful .event-card-meta { color: var(--slate); }
body.partiful .event-card-footer { border-top: 1px solid #eee; background: transparent; }
body.partiful .event-card-price { font-family: var(--font-display); color: var(--ink); }
body.partiful .event-card-price span { color: var(--ash); }
body.partiful .available-badge { background: var(--leaf) !important; color: #fff !important; border: none !important; border-radius: var(--r-pill) !important; }
body.partiful .sold-out-badge { background: rgba(0,0,0,0.1) !important; color: var(--ink) !important; border: none !important; border-radius: var(--r-pill) !important; }

/* ════════ PARTNERS (light tilted cards) ════════ */
body.partiful .partner-3d-card {
  background: #fff; border: 1px solid var(--silver); box-shadow: var(--sh-sm);
}
body.partiful .partner-3d-card .p3d-shine { display: none; }
body.partiful .partner-3d-card:hover { border-color: var(--silver); box-shadow: var(--sh-lg); }
body.partiful .partner-3d-card .p3d-badge {
  background: var(--grad-peri), #fff; border: 1px solid var(--silver);
  box-shadow: none; transform: none;
}
body.partiful .partner-3d-card .p3d-name { color: var(--ink); transform: none; }
body.partiful .partner-3d-card .p3d-cat { color: var(--graphite); background: rgba(0,0,0,0.05); border: none; transform: none; }
body.partiful .partner-3d-card.is-featured { background: #fff; border-color: var(--ink); }
body.partiful .partner-3d-card.is-featured .p3d-cat { color: var(--ink); background: rgba(0,0,0,0.06); }
body.partiful .partner-3d-card .p3d-star { background: var(--ink); color: #fff; transform: none; box-shadow: none; }

/* ════════ FEATURES BENTO ════════ */
body.partiful .sl-feature-card {
  background: #fff; border: 1px solid var(--silver); border-radius: var(--r-card);
  box-shadow: var(--sh-sm); color: var(--ink);
}
body.partiful .sl-feature-card:hover { transform: translateY(-4px); border-color: var(--silver); box-shadow: var(--sh-lg); }
body.partiful .sl-feature-card::before { display: none; }
body.partiful .sl-feature-icon { background: rgba(0,0,0,0.04); border: 1px solid var(--silver); }
body.partiful .sl-feature-card h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.03em; }
body.partiful .sl-feature-card p { color: var(--slate); }
body.partiful .sl-feature-card.feat-hero {
  background: var(--grad-peri), #fff; border-color: var(--silver);
}
body.partiful .sl-feature-card.feat-hero .sl-feature-icon { background: rgba(0,0,0,0.05); border-color: var(--silver); }
body.partiful .feat-chip { color: var(--ink); background: rgba(0,0,0,0.05); border: none; border-radius: var(--r-pill); }

/* ════════ REVIEWS ════════ */
body.partiful .sl-reviews-grid .review-card,
body.partiful .review-card {
  background: #fff; border: 1px solid var(--silver); border-radius: var(--r-card);
  box-shadow: var(--sh-sm); color: var(--ink);
}
body.partiful .review-stars { color: var(--amber); }
body.partiful .review-comment { color: var(--graphite); }
body.partiful .review-author { color: var(--ink); }
body.partiful .review-event, body.partiful .review-date { color: var(--ash); }

/* ════════ CTA BAND (pink wash, black CTA) ════════ */
body.partiful .sl-cta-section { background: var(--grad-pink); }
body.partiful .sl-cta-inner { color: var(--ink); }
body.partiful .sl-cta-title { font-family: var(--font-display); color: var(--ink); font-weight: 800; letter-spacing: -0.04em; }
body.partiful .sl-cta-sub { color: #4a2348; }
body.partiful .sl-cta-section .sl-label-pill { background: rgba(0,0,0,0.08); color: var(--ink); }

/* ════════ FOOTER ════════ */
body.partiful .sl-footer { background: var(--canvas); border-top: 1px solid var(--silver); color: var(--graphite); }
body.partiful .sl-footer-brand { font-family: var(--font-display); color: var(--ink); }
body.partiful .sl-footer-arabic { color: var(--ink); }
body.partiful .sl-footer-tagline { color: var(--slate); }
body.partiful .sl-footer-col-title { color: var(--fog); }
body.partiful .sl-footer-link { color: var(--graphite); }
body.partiful .sl-footer-link:hover { color: var(--ink); }
body.partiful .sl-footer-bottom { color: var(--ash); border-top: 1px solid var(--silver); }

/* ════════ MISC: loading shimmer on light ════════ */
body.partiful .loading-shimmer {
  background: linear-gradient(90deg, #f2f2f2 25%, #e9e9e9 37%, #f2f2f2 63%);
  background-size: 400% 100%;
}

@media (prefers-reduced-motion: reduce) {
  body.partiful .hero-ticket-card { animation: none; }
}

/* ════════ PARTNER CARDS — BLACK THEME ════════ */
body.partiful .partner-3d-card {
  background: #111 !important;
  border-color: #333 !important;
}
body.partiful .partner-3d-card .p3d-name {
  color: #fff !important;
}
body.partiful .partner-3d-card .p3d-cat {
  color: #aaa !important;
  background: rgba(255,255,255,0.08) !important;
}
body.partiful .partner-3d-card .p3d-badge {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body.partiful .partner-3d-card .p3d-star {
  background: #D21034 !important;
  color: #fff !important;
}
body.partiful .partner-3d-card.is-featured {
  background: #1a1a1a !important;
  border-color: #444 !important;
}

/* 2nd card — crystal clear high-contrast white-on-dark */
body.partiful .partners-3d-grid .partner-3d-card:nth-child(2) {
  background: #000 !important;
  border-color: rgba(255,255,255,0.25) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4) !important;
}
body.partiful .partners-3d-grid .partner-3d-card:nth-child(2) .p3d-name {
  color: #ffffff !important;
  letter-spacing: -0.02em;
}
body.partiful .partners-3d-grid .partner-3d-card:nth-child(2) .p3d-badge {
  background: rgba(255,255,255,0.12) !important;
  font-size: 36px !important;
}

/* 3rd card — crystal clear with subtle blue tint */
body.partiful .partners-3d-grid .partner-3d-card:nth-child(3) {
  background: #0d0d0d !important;
  border-color: rgba(42,169,224,0.3) !important;
  box-shadow: 0 0 0 1px rgba(42,169,224,0.1), 0 8px 32px rgba(0,0,0,0.4) !important;
}
body.partiful .partners-3d-grid .partner-3d-card:nth-child(3) .p3d-name {
  color: #ffffff !important;
}
body.partiful .partners-3d-grid .partner-3d-card:nth-child(3) .p3d-badge {
  background: rgba(42,169,224,0.15) !important;
  font-size: 36px !important;
}

/* 4th card — cyclic float animation + scale on hover/proximity */
@keyframes partnerCyclicFloat {
  0%   { transform: translateY(0px) rotate(0deg) scale(1); }
  20%  { transform: translateY(-10px) rotate(1.5deg) scale(1.02); }
  50%  { transform: translateY(-16px) rotate(0deg) scale(1.03); }
  80%  { transform: translateY(-10px) rotate(-1.5deg) scale(1.02); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}
body.partiful .partners-3d-grid .partner-3d-card:nth-child(4) {
  background: #0a0a0a !important;
  border-color: rgba(210,16,52,0.4) !important;
  box-shadow: 0 0 0 1px rgba(210,16,52,0.15), 0 8px 32px rgba(210,16,52,0.15) !important;
  animation: partnerCyclicFloat 3s ease-in-out infinite;
  transform-origin: center center;
  cursor: pointer;
}
body.partiful .partners-3d-grid .partner-3d-card:nth-child(4):hover {
  animation: none !important;
  transform: scale(1.18) translateY(-12px) !important;
  box-shadow: 0 0 0 2px rgba(210,16,52,0.5), 0 20px 60px rgba(210,16,52,0.3) !important;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease !important;
  z-index: 10;
  border-color: rgba(210,16,52,0.7) !important;
}
body.partiful .partners-3d-grid .partner-3d-card:nth-child(4) .p3d-name {
  color: #ffffff !important;
}
body.partiful .partners-3d-grid .partner-3d-card:nth-child(4) .p3d-badge {
  background: rgba(210,16,52,0.2) !important;
  font-size: 36px !important;
}

/* ════════ SUDANESE HEART ════════ */
body.partiful .sudan-heart {
  position: absolute;
  bottom: 32px;
  left: max(24px, calc((100% - 1200px) / 2 + 24px));
  width: 90px;
  height: 82px;
  z-index: 3;
  filter: drop-shadow(0 4px 16px rgba(210,16,52,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.2));
  animation: heartPulse 2.4s ease-in-out infinite;
  transform-origin: center bottom;
}
body.partiful .sudan-heart svg {
  width: 100%;
  height: 100%;
}
@keyframes heartPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 4px 16px rgba(210,16,52,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.2)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 6px 24px rgba(210,16,52,0.55)) drop-shadow(0 2px 8px rgba(0,0,0,0.25)); }
}
@media (prefers-reduced-motion: reduce) {
  body.partiful .partners-3d-grid .partner-3d-card:nth-child(4),
  body.partiful .sudan-heart { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Structural layout for custom components (geometry only — colors above).
   These classes were defined in noir.css which the light theme unloads,
   so their positioning/grid/flex must be re-declared here.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero shell + ticket space */
body.partiful .sl-hero { position: relative; overflow: hidden; display: flex; align-items: center; }
body.partiful .sl-hero-inner { max-width: 1200px; width: 100%; margin: 0 auto; position: relative; z-index: 2; }
@media (min-width: 1080px) { body.partiful .sl-hero-inner { padding-right: 420px; } }

/* Hero CTAs */
body.partiful .sl-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
body.partiful .hero-cta-primary { display: inline-flex; align-items: center; gap: 14px; }
body.partiful .hero-cta-primary .cta-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; font-weight: 700; }
body.partiful .hero-cta-ghost { display: inline-flex; align-items: center; }

/* Hero trust row */
body.partiful .hero-trust { display: flex; align-items: center; gap: 14px; margin: -32px 0 48px; flex-wrap: wrap; }
body.partiful .hero-avatars { display: flex; }
body.partiful .hero-avatars span { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-left: -9px; }
body.partiful .hero-avatars span:first-child { margin-left: 0; }
body.partiful .hero-trust-text { font-size: 13.5px; line-height: 1.4; }
body.partiful .hero-stars { margin-right: 8px; letter-spacing: 1px; }

/* Floating invitation ticket */
body.partiful .hero-ticket { position: absolute; top: 50%; right: max(24px, calc((100% - 1200px) / 2 + 24px)); transform: translateY(-50%); z-index: 1; perspective: 1400px; display: none; }
@media (min-width: 1080px) { body.partiful .hero-ticket { display: block; } }
body.partiful .hero-ticket-card { width: 320px; padding: 24px 24px 0; border-radius: 20px; transform-style: preserve-3d; }
body.partiful .htk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
body.partiful .htk-brand { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
body.partiful .htk-ar { font-size: 13px; font-weight: 500; }
body.partiful .htk-admit { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; border: 1px solid; padding: 4px 8px; border-radius: 6px; }
body.partiful .htk-event { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
body.partiful .htk-ar-event { font-size: 14px; margin-top: 5px; direction: rtl; }
body.partiful .htk-meta { display: flex; gap: 34px; margin: 20px 0 18px; }
body.partiful .htk-meta label { display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 3px; }
body.partiful .htk-meta span { font-size: 14px; font-weight: 600; }
body.partiful .htk-perf { position: relative; height: 0; border-top: 2px dashed; margin: 0 -24px; }
body.partiful .htk-perf i { position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; }
body.partiful .htk-perf i:first-child { left: -11px; }
body.partiful .htk-perf i:last-child { right: -11px; }
body.partiful .htk-stub { display: flex; align-items: center; gap: 16px; padding: 20px 0 24px; }
body.partiful .htk-qr { width: 74px; height: 74px; flex: none; border-radius: 8px; }
body.partiful .htk-stub-meta span { display: block; font-size: 11px; margin-bottom: 4px; }
body.partiful .htk-stub-meta strong { font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: 0.04em; }

/* Partner cards grid */
body.partiful .partners-3d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
body.partiful .partner-3d-card { position: relative; padding: 26px 22px 22px; border-radius: 16px; text-align: center; overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s ease; }
body.partiful .partner-3d-card .p3d-badge { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; }
body.partiful .partner-3d-card .p3d-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
body.partiful .partner-3d-card .p3d-cat { margin-top: 7px; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 11px; }
body.partiful .partner-3d-card .p3d-star { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; padding: 3px 9px; }

/* Bento */
body.partiful .sl-features-grid.sl-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(168px, auto); grid-auto-flow: dense; gap: 16px; }
body.partiful .sl-bento .feat-hero { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; padding: 34px; }
body.partiful .sl-bento .feat-wide { grid-column: span 2; }
body.partiful .sl-feature-card.feat-hero .sl-feature-icon { width: 64px; height: 64px; font-size: 30px; margin-bottom: 24px; }
body.partiful .sl-feature-card.feat-hero h3 { font-size: 27px; letter-spacing: -0.02em; }
body.partiful .sl-feature-card.feat-hero p { font-size: 15px; line-height: 1.72; max-width: 44ch; }
body.partiful .feat-hero-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 24px; }
body.partiful .feat-chip { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 5px 12px; }
@media (max-width: 900px) {
  body.partiful .sl-features-grid.sl-bento { grid-template-columns: repeat(2, 1fr); }
  body.partiful .sl-bento .feat-hero { grid-column: span 2; grid-row: auto; }
  body.partiful .sl-bento .feat-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  body.partiful .sl-features-grid.sl-bento { grid-template-columns: 1fr; }
  body.partiful .sl-bento .feat-hero, body.partiful .sl-bento .feat-wide { grid-column: span 1; }
}

/* Magnetic buttons keep GPU promotion */
body.partiful .magnetic { will-change: transform; }

/* ═══════════════════════════════════════════════════════════════════
   Broad page coverage — shared components on the other marketing pages
   so nothing falls back to styles.css light-on-dark (invisible on white).
   ═══════════════════════════════════════════════════════════════════ */

/* generic text safety net */
body.partiful h1, body.partiful h2, body.partiful h3, body.partiful h4 { color: var(--ink); }

/* Inner-page header band */
body.partiful .sl-page-header { background: var(--grad-peri), var(--canvas); }
body.partiful .sl-page-header-title { font-family: var(--font-display); color: var(--ink); font-weight: 800; letter-spacing: -0.04em; }
body.partiful .sl-page-header-sub { color: var(--slate); }

/* Filter tabs (events page) */
body.partiful .sl-tab {
  background: rgba(0,0,0,0.05); color: var(--graphite); border: 1px solid transparent;
  border-radius: var(--r-pill); font-weight: 600;
}
body.partiful .sl-tab:hover { background: rgba(0,0,0,0.08); color: var(--ink); }
body.partiful .sl-tab.active { background: var(--ink); color: #fff; }

/* Forms / inputs */
body.partiful .form-input, body.partiful .form-select, body.partiful .form-textarea {
  background: #fff; border: 1px solid var(--silver); color: var(--ink); border-radius: var(--r-input);
}
body.partiful .form-input::placeholder, body.partiful .form-textarea::placeholder { color: var(--ash); }
body.partiful .form-input:focus, body.partiful .form-select:focus, body.partiful .form-textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); outline: none;
}
body.partiful .form-label { color: var(--graphite); font-weight: 600; }
body.partiful .form-hint { color: var(--ash); }

/* Stat tiles (about page) */
body.partiful .sl-stat-tile { background: #fff; border: 1px solid var(--silver); box-shadow: var(--sh-sm); }
body.partiful .sl-stat-tile-num { font-family: var(--font-display); color: var(--ink); }
body.partiful .sl-stat-tile-label { color: var(--slate); }
body.partiful .sl-tile-sky, body.partiful .sl-tile-yellow, body.partiful .sl-tile-green, body.partiful .sl-tile-teal { box-shadow: var(--sh-sm); }

/* Generic cards / team / benefit cards */
body.partiful .team-card, body.partiful .benefit-card, body.partiful .mission-card,
body.partiful .partner-benefit, body.partiful .about-card {
  background: #fff; border: 1px solid var(--silver); box-shadow: var(--sh-sm); color: var(--ink);
}

/* Empty states */
body.partiful .empty-state { color: var(--slate); }
body.partiful .empty-state h3 { color: var(--ink); }

/* Tables */
body.partiful .table-wrap { border-color: var(--silver); }
body.partiful table th { color: var(--slate); border-bottom-color: var(--silver); }
body.partiful table td { color: var(--ink); border-bottom-color: #eee; }

/* Spinners on light */
body.partiful .spinner { border-color: rgba(0,0,0,0.15); border-top-color: var(--ink); }

/* Generic prose links */
body.partiful a { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   Generic buttons (site-wide) + event-detail page components
   ═══════════════════════════════════════════════════════════════════ */

/* Generic .btn system used across event-detail / bookings / admin */
body.partiful .btn-primary { background: var(--ink) !important; color: #fff !important; border: 1px solid var(--ink) !important; }
body.partiful .btn-primary:hover { opacity: 0.85; }
body.partiful .btn-gold { background: var(--ink) !important; color: #fff !important; border: 1px solid var(--ink) !important; }
body.partiful .btn-ghost, body.partiful .btn-ghost-dark, body.partiful .btn-outline-blue {
  background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important;
}
body.partiful .btn-ghost:hover, body.partiful .btn-ghost-dark:hover, body.partiful .btn-outline-blue:hover { background: rgba(0,0,0,0.05) !important; }
body.partiful .btn-danger { background: var(--ember) !important; color: #fff !important; border: 1px solid var(--ember) !important; }

/* Event-detail hero + meta */
body.partiful .event-detail-hero { background: var(--grad-hero), var(--canvas); }
body.partiful .event-detail-title { font-family: var(--font-display); color: var(--ink); font-weight: 800; letter-spacing: -0.04em; }
body.partiful .event-detail-arabic { color: var(--slate); }
body.partiful .event-detail-genre { color: var(--ink); }
body.partiful .event-detail-meta-row { color: var(--graphite); }
body.partiful .breadcrumb, body.partiful .breadcrumb a { color: var(--slate); }

/* Ticket picker */
body.partiful .ticket-picker { background: #fff; }
body.partiful .ticket-type-option {
  background: #fff; border: 1px solid var(--silver); color: var(--ink); border-radius: var(--r-card);
}
body.partiful .ticket-type-option:hover { border-color: var(--ink); }
body.partiful .ticket-type-option.is-selected, body.partiful .ticket-type-option.selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
body.partiful .ticket-type-name { color: var(--ink); }
body.partiful .ticket-type-price { font-family: var(--font-display); color: var(--ink); }
body.partiful .ticket-type-avail { color: var(--slate); }

/* Quantity picker */
body.partiful .qty-btn { background: #fff; border: 1px solid var(--silver); color: var(--ink); }
body.partiful .qty-btn:hover { background: rgba(0,0,0,0.05); }
body.partiful .qty-num { color: var(--ink); }

/* Progress bars */
body.partiful .progress-bar-wrap { background: rgba(0,0,0,0.08); }
body.partiful .progress-bar { background: var(--ink); }
body.partiful .progress-bar.near { background: var(--amber); }
body.partiful .progress-bar.full { background: var(--ember); }

/* ── Final invisible-text fixes (about / partnerships / reviews) ── */
body.partiful h1, body.partiful h2, body.partiful h3, body.partiful h4 { color: var(--ink) !important; }
body.partiful .team-name { color: var(--ink); }
body.partiful .team-role { color: var(--slate); }
body.partiful .partner-card-name { color: var(--ink); }
body.partiful .partner-card-category, body.partiful .partner-card-desc { color: var(--slate); }
body.partiful .star-btn { color: var(--silver); transition: color .15s ease; }
body.partiful .star-btn.active { color: var(--amber); }

/* ═══════════════════════════════════════════════════════════════════
   RIHLA CINEMATIC DARK REDESIGN
   A concert platform lives in darkness. The venue is dark, the stage
   lights are the only source. Every design decision reflects that.
   Canvas: #060609. Signal: #2AA9E0. Zero pastels.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Core variable flip ── */
body.partiful {
  --ink:        #f0f0f4;
  --canvas:     #060609;
  --graphite:   rgba(240,240,244,0.85);
  --slate:      rgba(240,240,244,0.50);
  --ash:        rgba(240,240,244,0.32);
  --fog:        rgba(240,240,244,0.18);
  --silver:     rgba(255,255,255,0.07);
  --warm-sand:  #2AA9E0;
  --grad-hero:  radial-gradient(ellipse 100% 70% at 20% 100%, rgba(42,169,224,0.10) 0%, transparent 65%),
                radial-gradient(ellipse 60% 80% at 85% 20%, rgba(42,80,200,0.07) 0%, transparent 65%);
  --grad-pink:  linear-gradient(160deg, #08080e 0%, #0c0c14 100%);
  --grad-peri:  linear-gradient(180deg, rgba(42,169,224,0.04) 0%, transparent 80%);
  --grad-spear: linear-gradient(145deg, #090910 0%, #0d0d16 100%);
  --sh-sm:  0 0 0 1px rgba(255,255,255,0.05), 0 2px 8px rgba(0,0,0,0.45);
  --sh-lg:  0 0 0 1px rgba(255,255,255,0.07), 0 8px 32px rgba(0,0,0,0.65);
  --sh-card:0 0 0 1px rgba(255,255,255,0.05), 0 2px 8px rgba(0,0,0,0.4), 0 14px 48px rgba(0,0,0,0.5);
  background: #060609 !important;
  color: #f0f0f4;
}

/* ── 2. Marquee ── */
body.partiful .sl-marquee-wrap {
  background: rgba(42,169,224,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
body.partiful .sl-marquee-item { color: rgba(240,240,244,0.48) !important; font-weight: 500; }
body.partiful .sl-marquee-sep  { color: rgba(255,255,255,0.14) !important; }

/* ── 3. Nav ── */
body.partiful .sl-nav-outer { background: transparent !important; }
body.partiful .sl-nav {
  background: rgba(6,6,9,0.78) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.5) !important;
  backdrop-filter: saturate(1.3) blur(24px) !important;
  -webkit-backdrop-filter: saturate(1.3) blur(24px) !important;
}
body.partiful .sl-nav.scrolled {
  background: rgba(6,6,9,0.92) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 12px 40px rgba(0,0,0,0.65) !important;
}
body.partiful .sl-nav-logo { color: #f0f0f4 !important; }
body.partiful .sl-logo-sep { color: rgba(255,255,255,0.15) !important; }
body.partiful .sl-logo-arabic { color: #2AA9E0 !important; }
body.partiful .sl-nav-link { color: rgba(240,240,244,0.55) !important; }
body.partiful .sl-nav-link:hover { color: #f0f0f4 !important; background: rgba(255,255,255,0.05) !important; }
body.partiful .sl-nav-link.sl-active { color: #f0f0f4 !important; background: rgba(255,255,255,0.06) !important; }
body.partiful .sl-nav-link.sl-active::after { background: #2AA9E0 !important; }
body.partiful .sl-nav-actions .btn-primary,
body.partiful .sl-nav-actions .btn-gold {
  background: #2AA9E0 !important; color: #fff !important; border-color: #2AA9E0 !important;
}
body.partiful .sl-nav-actions .btn-primary:hover,
body.partiful .sl-nav-actions .btn-gold:hover { background: #1b87c0 !important; border-color: #1b87c0 !important; }
body.partiful .sl-nav-actions .btn-ghost {
  background: transparent !important; color: rgba(240,240,244,0.7) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
body.partiful .sl-nav-actions .btn-ghost:hover { background: rgba(255,255,255,0.06) !important; color: #f0f0f4 !important; }
body.partiful .nav-user-pill {
  color: #f0f0f4 !important; background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
body.partiful .nav-user-pill .avatar { background: #2AA9E0 !important; color: #fff !important; }
body.partiful .sl-nav-actions .spinner { border-color: rgba(255,255,255,0.15) transparent rgba(255,255,255,0.15) transparent !important; }

/* ── 4. Section skeleton ── */
body.partiful .sl-section-white   { background: #060609 !important; }
body.partiful .sl-section-concrete{ background: #09090e !important; }
body.partiful .sl-section-sky     { background: #09090e !important; }
body.partiful .partners-3d-section{ background: #060609 !important; }
body.partiful .sl-section-title   { color: #f0f0f4 !important; letter-spacing: -0.04em; }
body.partiful .sl-section-sub     { color: rgba(240,240,244,0.50) !important; }
body.partiful h1, body.partiful h2, body.partiful h3, body.partiful h4 { color: #f0f0f4 !important; }

/* Label pills — refined minimal tag, no emoji backdrop */
body.partiful .sl-label-pill {
  background: transparent !important;
  color: rgba(240,240,244,0.42) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
body.partiful .sl-label-white {
  background: transparent !important; color: rgba(255,255,255,0.48) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* ── 5. Hero ── */
body.partiful .sl-hero {
  background:
    radial-gradient(ellipse 90% 60% at 10% 100%, rgba(42,169,224,0.11) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 90% 10%,  rgba(42,80,200,0.07)  0%, transparent 65%),
    #060609 !important;
  min-height: 82vh !important;
  padding: 96px 24px 108px !important;
}
body.partiful .hero-orbs { display: block !important; }
body.partiful .hero-orbs span {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none; will-change: transform;
}
body.partiful .hero-orbs span:nth-child(1) {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,169,224,0.09) 0%, transparent 70%);
  top: -10%; left: -8%;
}
body.partiful .hero-orbs span:nth-child(2) {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(42,80,200,0.07) 0%, transparent 70%);
  bottom: 10%; right: 5%;
}
body.partiful .hero-orbs span:nth-child(3) {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(210,16,52,0.06) 0%, transparent 70%);
  top: 30%; right: 28%;
}
body.partiful .sl-hero-label {
  background: rgba(42,169,224,0.10) !important; color: #2AA9E0 !important;
  border: 1px solid rgba(42,169,224,0.20) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.partiful .sl-hero-label::before { background: #2AA9E0 !important; box-shadow: none !important; }
body.partiful .sl-hero-title {
  color: #f0f0f4 !important;
  font-size: clamp(52px, 7.4vw, 112px) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
}
body.partiful .hero-grad {
  color: #2AA9E0 !important;
  -webkit-text-fill-color: #2AA9E0 !important;
  background: none !important;
}
body.partiful .sl-hero-sub {
  color: rgba(240,240,244,0.55) !important;
  font-size: 17px !important; line-height: 1.72 !important;
}
body.partiful .hero-cta-primary,
body.partiful .sl-btn-yellow,
body.partiful .sl-btn-primary,
body.partiful .sl-btn-black {
  background: #2AA9E0 !important; color: #fff !important; border-color: #2AA9E0 !important; box-shadow: none !important;
}
body.partiful .hero-cta-primary:hover,
body.partiful .sl-btn-yellow:hover,
body.partiful .sl-btn-primary:hover { background: #1b87c0 !important; border-color: #1b87c0 !important; opacity: 1 !important; }
body.partiful .hero-cta-primary .cta-ico { background: rgba(255,255,255,0.15) !important; color: #fff !important; }
body.partiful .hero-cta-ghost,
body.partiful .sl-btn-outline,
body.partiful .sl-btn-outline-white,
body.partiful .sl-btn-outline-blue {
  color: rgba(240,240,244,0.80) !important; border-color: rgba(255,255,255,0.18) !important; background: transparent !important;
}
body.partiful .hero-cta-ghost:hover,
body.partiful .sl-btn-outline:hover,
body.partiful .sl-btn-outline-white:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.28) !important; color: #f0f0f4 !important; }
body.partiful .hero-trust-text { color: rgba(240,240,244,0.45) !important; }
body.partiful .hero-trust-text strong.hero-stars { color: #f5c318 !important; }
body.partiful .hero-avatars span { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: none !important; }

/* White ticket stays white — paper ticket on dark background */
body.partiful .hero-ticket-card {
  background: #fff !important; border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 4px 20px rgba(0,0,0,0.4) !important;
  animation: pfTicketFloat 7s ease-in-out infinite !important;
}
body.partiful .htk-brand,
body.partiful .htk-event { color: #07070c !important; -webkit-text-fill-color: #07070c !important; }
body.partiful .htk-ar    { color: #07070c !important; -webkit-text-fill-color: #07070c !important; }
body.partiful .htk-admit { color: #444 !important; border-color: #ccc !important; }
body.partiful .htk-ar-event { color: #555 !important; }
body.partiful .htk-meta label { color: #888 !important; }
body.partiful .htk-meta span  { color: #07070c !important; }
body.partiful .htk-perf { border-top-color: #ddd !important; }
body.partiful .htk-perf i { background: #fff !important; }
body.partiful .htk-stub-meta span   { color: #666 !important; }
body.partiful .htk-stub-meta strong { color: #07070c !important; }

/* ── 6. Event Cards — concert-grade spotlight art ── */
body.partiful .event-card {
  background: #0d0d14 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: var(--sh-sm) !important;
}
body.partiful .event-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: var(--sh-lg) !important;
}
body.partiful .card-gloss { display: none !important; }
body.partiful .event-card-img-placeholder {
  color: transparent !important; font-size: 0 !important;
  background: linear-gradient(145deg, #09090f 0%, #0d0d18 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  position: relative; overflow: hidden;
}
body.partiful .event-card-img-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px);
  pointer-events: none; z-index: 2;
}
body.partiful .event-card-img-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 30%), linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 50%);
  pointer-events: none; z-index: 1;
}
body.partiful .event-card-img-placeholder[data-genre="jazz"] {
  background:
    radial-gradient(ellipse 65% 90% at 70% 115%, rgba(140,80,255,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 45% 65% at 20% 105%, rgba(80,40,160,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 30% 40% at 50% -5%,  rgba(180,140,255,0.05) 0%, transparent 70%),
    linear-gradient(180deg, #080812 0%, #0e0a1e 55%, #160c30 100%) !important;
}
body.partiful .event-card-img-placeholder[data-genre="electronic"] {
  background:
    radial-gradient(ellipse 55% 90% at 50% 115%, rgba(0,220,255,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 35% 60% at 15% 85%,  rgba(0,100,220,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 35% 60% at 85% 85%,  rgba(0,200,180,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #02090c 0%, #031314 55%, #051e22 100%) !important;
}
body.partiful .event-card-img-placeholder[data-genre="arabic-classical"],
body.partiful .event-card-img-placeholder[data-genre="arabicclassical"] {
  background:
    radial-gradient(ellipse 65% 90% at 50% 115%, rgba(200,120,20,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 55% at 20% 85%,  rgba(160,80,10,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 25% 40% at 80% 70%,  rgba(220,160,40,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #0c0800 0%, #160e00 55%, #201500 100%) !important;
}
body.partiful .event-card-img-placeholder[data-genre="rock"],
body.partiful .event-card-img-placeholder[data-genre="concert"],
body.partiful .event-card-img-placeholder[data-genre="pop"] {
  background:
    radial-gradient(ellipse 60% 90% at 50% 120%, rgba(210,16,52,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 35% 55% at 25% 90%,  rgba(160,10,30,0.15) 0%, transparent 55%),
    linear-gradient(180deg, #0c0004 0%, #160008 55%, #22000e 100%) !important;
}
body.partiful .ep-genre {
  position: absolute; bottom: 11px; left: 13px; z-index: 3;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.10em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.36) !important;
}
body.partiful .event-card-genre  { color: rgba(240,240,244,0.32) !important; }
body.partiful .event-card-title  { color: #f0f0f4 !important; }
body.partiful .event-card-arabic { color: rgba(240,240,244,0.32) !important; }
body.partiful .event-card-meta   { color: rgba(240,240,244,0.45) !important; }
body.partiful .event-card-footer { border-top: 1px solid rgba(255,255,255,0.05) !important; background: transparent !important; }
body.partiful .event-card-price  { color: #f0f0f4 !important; font-weight: 700; }
body.partiful .event-card-price span { color: rgba(240,240,244,0.38) !important; }
body.partiful .available-badge { background: rgba(42,169,224,0.12) !important; color: #2AA9E0 !important; border: none !important; }
body.partiful .sold-out-badge  { background: rgba(255,255,255,0.05) !important; color: rgba(240,240,244,0.32) !important; border: none !important; }

/* ── 7. Feature Bento ── */
body.partiful .sl-feature-card {
  background: #0d0d14 !important; border: 1px solid rgba(255,255,255,0.06) !important;
  color: #f0f0f4 !important; box-shadow: var(--sh-sm) !important;
}
body.partiful .sl-feature-card:hover { transform: translateY(-4px) !important; border-color: rgba(255,255,255,0.11) !important; box-shadow: var(--sh-lg) !important; }
body.partiful .sl-feature-card::before { display: none !important; }
body.partiful .sl-feature-icon { background: rgba(42,169,224,0.08) !important; border: 1px solid rgba(42,169,224,0.15) !important; }
body.partiful .sl-feature-card h3 { color: #f0f0f4 !important; }
body.partiful .sl-feature-card p  { color: rgba(240,240,244,0.52) !important; }
body.partiful .sl-feature-card.feat-hero {
  background: linear-gradient(145deg, #0d1020 0%, #090e1a 100%) !important;
  border-color: rgba(42,169,224,0.12) !important;
}
body.partiful .feat-chip { color: rgba(240,240,244,0.65) !important; background: rgba(255,255,255,0.06) !important; border: none !important; }

/* ── 8. Reviews ── */
body.partiful .review-card,
body.partiful .sl-reviews-grid .review-card {
  background: #0d0d14 !important; border: 1px solid rgba(255,255,255,0.06) !important;
  color: #f0f0f4 !important; box-shadow: var(--sh-sm) !important;
}
body.partiful .review-stars   { color: #f5c318 !important; }
body.partiful .review-comment { color: rgba(240,240,244,0.65) !important; }
body.partiful .review-author  { color: #f0f0f4 !important; }
body.partiful .review-event, body.partiful .review-date { color: rgba(240,240,244,0.30) !important; }

/* ── 9. CTA section ── */
body.partiful .sl-cta-section {
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(42,169,224,0.08) 0%, transparent 70%),
    #08080e !important;
  border-top: 1px solid rgba(42,169,224,0.10) !important;
}
body.partiful .sl-cta-inner  { color: #f0f0f4 !important; }
body.partiful .sl-cta-title  { color: #f0f0f4 !important; }
body.partiful .sl-cta-sub    { color: rgba(240,240,244,0.52) !important; }

/* ── 10. Footer ── */
body.partiful .sl-footer { background: #040408 !important; border-top: 1px solid rgba(255,255,255,0.05) !important; }
body.partiful .sl-footer-brand    { color: #f0f0f4 !important; }
body.partiful .sl-footer-arabic   { color: #2AA9E0 !important; }
body.partiful .sl-footer-tagline  { color: rgba(240,240,244,0.32) !important; }
body.partiful .sl-footer-col-title{ color: rgba(240,240,244,0.20) !important; }
body.partiful .sl-footer-link     { color: rgba(240,240,244,0.45) !important; }
body.partiful .sl-footer-link:hover { color: #f0f0f4 !important; }
body.partiful .sl-footer-bottom   { color: rgba(240,240,244,0.22) !important; border-top-color: rgba(255,255,255,0.04) !important; }

/* ── 11. Events page ── */
body.partiful .sl-page-header { background: #060609 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
body.partiful .sl-page-header-title { color: #f0f0f4 !important; }
body.partiful .sl-page-header-sub   { color: rgba(240,240,244,0.48) !important; }
body.partiful .sl-tab {
  background: rgba(255,255,255,0.04) !important; color: rgba(240,240,244,0.48) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
body.partiful .sl-tab:hover  { background: rgba(255,255,255,0.08) !important; color: #f0f0f4 !important; }
body.partiful .sl-tab.active { background: #f0f0f4 !important; color: #060609 !important; border-color: transparent !important; }

/* ── 12. Forms ── */
body.partiful .form-input, body.partiful .form-select, body.partiful .form-textarea {
  background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.10) !important; color: #f0f0f4 !important;
}
body.partiful .form-input::placeholder, body.partiful .form-textarea::placeholder { color: rgba(240,240,244,0.26) !important; }
body.partiful .form-input:focus, body.partiful .form-select:focus, body.partiful .form-textarea:focus {
  border-color: #2AA9E0 !important; box-shadow: 0 0 0 3px rgba(42,169,224,0.14) !important;
}
body.partiful .form-label { color: rgba(240,240,244,0.72) !important; }
body.partiful .form-hint  { color: rgba(240,240,244,0.34) !important; }

/* ── 13. Generic cards ── */
body.partiful .team-card, body.partiful .benefit-card, body.partiful .mission-card,
body.partiful .partner-benefit, body.partiful .about-card,
body.partiful .stat-card, body.partiful .sl-stat-tile {
  background: #0d0d14 !important; border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: var(--sh-sm) !important; color: #f0f0f4 !important;
}
body.partiful .sl-stat-tile-num   { color: #f0f0f4 !important; }
body.partiful .sl-stat-tile-label { color: rgba(240,240,244,0.44) !important; }

/* ── 14. Misc ── */
body.partiful .empty-state    { color: rgba(240,240,244,0.42) !important; }
body.partiful .empty-state h3 { color: #f0f0f4 !important; }
body.partiful .loading-shimmer {
  background: linear-gradient(90deg, #0e0e16 25%, #141420 37%, #0e0e16 63%) !important;
  background-size: 400% 100% !important;
}
body.partiful .badge, body.partiful .badge-blue, body.partiful .badge-default {
  background: rgba(255,255,255,0.07) !important; color: rgba(240,240,244,0.68) !important; border: none !important;
}
body.partiful .spinner { border-color: rgba(255,255,255,0.12) !important; border-top-color: #f0f0f4 !important; }
body.partiful .table-wrap { border-color: rgba(255,255,255,0.05) !important; }
body.partiful table th { color: rgba(240,240,244,0.36) !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
body.partiful table td { color: #f0f0f4 !important; border-bottom-color: rgba(255,255,255,0.04) !important; }
body.partiful ::selection { background: rgba(42,169,224,0.28); color: #fff; }
body.partiful ::-webkit-scrollbar-track { background: #040408; }
body.partiful ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.13); border-radius: 4px; }
body.partiful a { color: inherit; }

/* ── 15. Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  body.partiful .partners-3d-grid .partner-3d-card:nth-child(4),
  body.partiful .sudan-heart,
  body.partiful .hero-ticket-card { animation: none !important; }
}

/* ── Ticket picker: finish the dark conversion ─────────────────────────────
   The cinematic redesign flipped --ink to #f0f0f4 but left this card white →
   near-white text on a white card (invisible). Make it a proper dark card. */
body.partiful .ticket-picker {
  background: var(--grad-spear) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--sh-card);
}
body.partiful .ticket-type-option {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
}
body.partiful .ticket-type-option:hover { border-color: rgba(255,255,255,0.35); }
body.partiful .ticket-type-option.is-selected,
body.partiful .ticket-type-option.selected { border-color: #2AA9E0; box-shadow: 0 0 0 2px #2AA9E0 inset; }
body.partiful .qty-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #f0f0f4; }
body.partiful .qty-btn:hover { background: rgba(255,255,255,0.12); }

/* Seat-map summary stays a white card (ties to the white floor plan) → dark text */
body.partiful .smap-summary { color: #111; }
body.partiful .smap-summary h3 { color: #000 !important; }
/* The pale-blue inline total box keeps dark text (its bg stays light) */
body.partiful .ticket-picker div[style*="sl-sky"] { color: #0a0a0c; }
/* Inline light-bg inset boxes (availability rows, --sl-white/--sl-concrete/--sl-sky) keep dark text */
body.partiful div[style*="sl-white"], body.partiful div[style*="sl-concrete"], body.partiful div[style*="sl-sky"] { color: #0a0a0c; }
/* Availability rows are dark now → light translucent progress track */
body.partiful .progress-bar-wrap { background: rgba(255,255,255,0.10); }