:root {
  /* Dark Editorial System */
  --bg-dark: #070707;
  --bg-card: #111111;
  --text-main: #f5f5f5;
  --gold: #c5a059;
  --champ: #e6dab5;
}


/* =========================
   Base
========================= */

html,
body {
  touch-action: pan-x pan-y;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
}

@media (max-width: 767px) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  input,
  textarea,
  select,
  button,
  a {
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-touch-callout: auto;
  }
}

.playfair {
  font-family: 'Playfair Display', serif;
}

.arabic {
  font-family: 'Cairo', sans-serif;
}

::selection {
  background: rgba(197, 160, 89, 0.35);
  color: #fff;
}


/* =========================
   Background FX
========================= */

.bg-aurora {
  position: fixed;
  inset: -20%;
  z-index: -40;
  pointer-events: none;
  background:
    radial-gradient(
      42% 38% at 74% 34%,
      rgba(197, 160, 89, 0.16) 0%,
      rgba(197, 160, 89, 0.05) 30%,
      transparent 62%
    ),
    radial-gradient(
      30% 26% at 18% 14%,
      rgba(197, 160, 89, 0.08) 0%,
      transparent 58%
    ),
    radial-gradient(
      34% 30% at 50% 82%,
      rgba(197, 160, 89, 0.06) 0%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(3, 3, 3, 0.2) 0%,
      rgba(5, 5, 5, 0.72) 55%,
      rgba(2, 2, 2, 1) 100%
    );

  filter: blur(40px) saturate(110%);
  transform: translate3d(0, 0, 0);
  animation: auroraShift 20s ease-in-out infinite alternate;
  opacity: 0.85;
}

@keyframes auroraShift {
  0% {
    transform: translate3d(-2%, -2%, 0) scale(1.02);
  }
  50% {
    transform: translate3d(2%, 1%, 0) scale(1.03);
  }
  100% {
    transform: translate3d(1%, 3%, 0) scale(1.01);
  }
}

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.12;
  mask-image: radial-gradient(
    circle at 50% 30%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0) 78%
  );
  -webkit-mask-image: radial-gradient(
    circle at 50% 30%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0) 78%
  );
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: -17;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.015),
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.20;
  mix-blend-mode: overlay;
}

.film-grain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 50;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}


/* =========================
   Shared Components
========================= */

.glass {
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header-stuck {
  background: rgba(7, 7, 7, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn-gold {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  transition: all 0.4s ease;
}

.btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-gold:hover {
  color: var(--bg-dark);
}

.btn-gold:hover::before {
  transform: scaleY(1);
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.floating-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.floating-btn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/* =========================
   Shared Typography Helpers
========================= */

.se-section-title {
  font-family: 'Playfair Display', serif;
  color: #fff;
  text-wrap: balance;
}

.se-section-body {
  text-wrap: pretty;
}

.se-kicker {
  color: var(--gold);
  text-transform: uppercase;
}

.se-link-underline {
  border-bottom: 1px solid transparent;
  padding-bottom: 0.25rem;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}


/* =========================
   RTL Adjustments
========================= */

[dir="rtl"] .tracking-widest {
  letter-spacing: 0;
}

[dir="rtl"] .tracking-[0.2em] {
  letter-spacing: 0;
}

[dir="rtl"] .tracking-[0.3em] {
  letter-spacing: 0;
}
/* =========================
   THEME UPGRADE — Atmosphere / Depth / Smoked Glass
========================= */

:root {
  --bg-dark: #050505;
  --bg-dark-2: #080808;
  --bg-card: rgba(12, 12, 12, 0.78);
  --bg-card-strong: rgba(10, 10, 10, 0.9);

  --text-main: #f3efe7;
  --text-soft: rgba(243, 239, 231, 0.68);

  --gold: #c5a059;
  --gold-hot: #e0bf7a;
  --gold-deep: #8f6a2f;
  --gold-glow: rgba(197, 160, 89, 0.24);
  --gold-glow-strong: rgba(224, 191, 122, 0.34);
}

/* Base body feel */
body {
  background:
    radial-gradient(circle at 18% 16%, rgba(197, 160, 89, 0.11), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(197, 160, 89, 0.08), transparent 22%),
    radial-gradient(circle at 50% 78%, rgba(197, 160, 89, 0.06), transparent 28%),
    linear-gradient(180deg, #040404 0%, #070707 42%, #030303 100%);
  color: var(--text-main);
}

/* Stronger atmosphere */
.bg-aurora {
  inset: -18%;
  background:
    radial-gradient(
      52% 46% at 18% 15%,
      rgba(197, 160, 89, 0.18) 0%,
      rgba(197, 160, 89, 0.05) 30%,
      transparent 62%
    ),
    radial-gradient(
      45% 42% at 84% 20%,
      rgba(224, 191, 122, 0.14) 0%,
      rgba(224, 191, 122, 0.04) 28%,
      transparent 60%
    ),
    radial-gradient(
      42% 38% at 50% 82%,
      rgba(197, 160, 89, 0.10) 0%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(3, 3, 3, 0.2) 0%,
      rgba(5, 5, 5, 0.72) 55%,
      rgba(2, 2, 2, 1) 100%
    );
  filter: blur(58px) saturate(118%);
  opacity: 1;
  animation: auroraShift 22s ease-in-out infinite alternate;
}

/* Make grid less tech-demo, more hidden structure */
.grid-overlay {
  opacity: 0.06;
  background-size: 72px 72px;
  mask-image: radial-gradient(
    circle at 50% 28%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 0) 78%
  );
  -webkit-mask-image: radial-gradient(
    circle at 50% 28%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 0) 78%
  );
}

/* Scanlines quieter */
.scanlines {
  opacity: 0.09;
}

/* Grain slightly richer */
.film-grain {
  opacity: 0.05;
  mix-blend-mode: soft-light;
  animation: grainDrift 10s steps(2) infinite;
}

@keyframes grainDrift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-0.5%, 0.3%); }
  50% { transform: translate(0.4%, -0.4%); }
  75% { transform: translate(0.2%, 0.5%); }
  100% { transform: translate(0, 0); }
}

/* Smoked glass instead of normal glass */
.glass {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.012) 18%,
      rgba(0, 0, 0, 0) 38%
    ),
    linear-gradient(
      180deg,
      rgba(16, 16, 16, 0.94) 0%,
      rgba(10, 10, 10, 0.90) 100%
    );
  border: 1px solid rgba(197, 160, 89, 0.12);
  box-shadow:
    0 28px 120px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

/* Header feels more expensive when sticky */
.header-stuck {
  background:
    linear-gradient(
      180deg,
      rgba(7, 7, 7, 0.92) 0%,
      rgba(7, 7, 7, 0.80) 100%
    );
  border-bottom: 1px solid rgba(197, 160, 89, 0.10);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

/* Gold button becomes lit object */
.btn-gold {
  border: 1px solid rgba(197, 160, 89, 0.72);
  color: var(--gold-hot);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 0 rgba(0, 0, 0, 0);
}

.btn-gold::before {
  background:
    linear-gradient(
      180deg,
      rgba(224, 191, 122, 1) 0%,
      rgba(197, 160, 89, 1) 62%,
      rgba(143, 106, 47, 1) 100%
    );
}

.btn-gold::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 18%,
    transparent 38%
  );
  transform: translateX(-130%);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.btn-gold:hover {
  color: #070707;
  box-shadow:
    0 10px 30px rgba(197, 160, 89, 0.16),
    0 0 60px rgba(197, 160, 89, 0.14);
}

.btn-gold:hover::after {
  transform: translateX(130%);
}

/* More luxurious underline links */
.se-link-underline {
  border-bottom: 1px solid rgba(197, 160, 89, 0.18);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    text-shadow 0.25s ease;
}

.se-link-underline:hover {
  text-shadow: 0 0 18px rgba(197, 160, 89, 0.18);
}

/* Floating buttons match upgraded system */
.floating-btn {
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ui-shell {
  background: var(--bg-dark);
  color: var(--text-main);
}

.pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.counter-text {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.menu-glass {
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-strong {
  background: rgba(17, 17, 17, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    800px circle at var(--x, 0) var(--y, 0),
    rgba(197, 160, 89, 0.12),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.spotlight-card:hover::after {
  opacity: 1;
}

.package-content {
  position: relative;
  z-index: 2;
}

:root {
  --glow: 0 0 1.1rem rgba(197, 160, 89, 0.16), 0 0 2.6rem rgba(230, 218, 181, 0.08);
}

.glass-strong {
  background: rgba(17, 17, 17, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    800px circle at var(--x, 0) var(--y, 0),
    rgba(197, 160, 89, 0.12),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.spotlight-card:hover::after {
  opacity: 1;
}

.package-content {
  position: relative;
  z-index: 2;
}