/* ==========================================================
   SOBEK LUXURY SPACE — Complete CSS for DropSaaS
   - Orange marquee banner on top
   - Centered logo header
   - Deep space background
   - Glassmorphism cards
   ========================================================== */

:root {
  --primary: #D9DDE4;
  --primary-hover: #FFFFFF;
  --accent: #E5E8EE;
  --secondary: #10131A;
  --bg: #050608;
  --surface: rgba(255, 255, 255, 0.05);
  --text: #FFFFFF;
  --text-muted: #C8CDD5;
  --border: rgba(255, 255, 255, 0.08);
  --cta-bg: #D9DDE4;
  --cta-text: #050608;
}

/* === GLOBAL === */
body {
  background: #050608 !important;
  color: #C8CDD5 !important;
  font-family: "Cairo", "IBM Plex Sans Arabic", "Tajawal", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  padding-top: 110px !important;
}

/* === DEEP SPACE === */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(40,70,130,0.20), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 35%, rgba(60,90,140,0.15), transparent 65%),
    radial-gradient(ellipse 70% 55% at 50% 95%, rgba(30,60,110,0.18), transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(217,221,228,0.05), transparent 50%),
    linear-gradient(180deg, #050608 0%, #07090d 50%, #050608 100%);
  pointer-events: none;
  animation: soekNebula 80s ease-in-out infinite;
}

body::after {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 50% 20%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 85%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 30% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 60% 90%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 15% 15%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 75% 25%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 45% 45%, rgba(255,255,255,0.5), transparent);
  background-size: 600px 600px;
  pointer-events: none;
  animation: soekStars 240s linear infinite;
}

@keyframes soekStars { from { background-position: 0 0; } to { background-position: -600px 600px; } }
@keyframes soekNebula { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-15px) scale(1.04); } }
@keyframes soekFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes soekFloatSlow { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-12px,-20px); } }
@keyframes soekMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* === ORANGE MARQUEE BANNER (fixed at top) === */
header::before {
  content: "✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ✓  احصل على كاش باك 5% من كل طلب      ";
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9999 !important;
  background: linear-gradient(90deg, #FF6B00 0%, #FF8C00 50%, #FF6B00 100%) !important;
  color: #FFFFFF !important;
  padding: 11px 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 12px rgba(255,107,0,0.35), 0 4px 16px rgba(0,0,0,0.3) !important;
  direction: ltr !important;
  animation: soekMarquee 35s linear infinite !important;
}

/* === HEADER (fixed below marquee) === */
header {
  position: fixed !important;
  top: 40px !important; left: 0 !important; right: 0 !important;
  z-index: 100 !important;
  background: rgba(5, 6, 8, 0.55) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 16px !important;
  overflow: visible !important;
}

header > div {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 50px !important;
}

/* Logo centered absolutely */
header > div > a:first-child {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  margin: 0 !important;
}

header .text-charcoal { color: #FFFFFF !important; }
header .text-muted { color: #C8CDD5 !important; }
header .text-primary { color: #D9DDE4 !important; }
header .hover\:text-primary:hover { color: #FFFFFF !important; }

/* Hide compare, wishlist, cart from header (they're in bottom nav) */
header a[title="المقارنة"],
header a[title="المفضلة"],
header button[class*="bg-gradient-to-r"][class*="rounded-full"] { display: none !important; }

/* === TEXT COLORS === */
.text-charcoal { color: #FFFFFF !important; }
.text-muted { color: #C8CDD5 !important; }
.text-primary { color: #D9DDE4 !important; }
.text-slate-400 { color: #C8CDD5 !important; }
.text-slate-500 { color: rgba(200,205,213,0.55) !important; }
.text-white { color: #FFFFFF !important; }
.text-rose-500 { color: #C8CDD5 !important; }
.text-amber-400 { color: #D9DDE4 !important; }

/* === BACKGROUNDS === */
.bg-soft { background-color: #050608 !important; }
.bg-surface { background: rgba(255, 255, 255, 0.05) !important; }
.bg-surface\/80 { background: rgba(5, 6, 8, 0.55) !important; }
.bg-secondary { background: linear-gradient(180deg, rgba(217,221,228,0.95), rgba(180,186,196,0.9)) !important; color: #050608 !important; }
.bg-slate-950 { background: linear-gradient(180deg, transparent 0%, rgba(16,19,26,0.6) 100%) !important; }
.bg-gray-100 { background: rgba(255,255,255,0.08) !important; }

/* === GRADIENTS === */
.bg-gradient-to-r,
.from-primary, .to-primary, .to-accent, .from-accent, .via-primary {
  --tw-gradient-from: #D9DDE4 !important;
  --tw-gradient-to: #D9DDE4 !important;
  --tw-gradient-stops: #D9DDE4, #D9DDE4 !important;
}
.bg-primary\/10 { background-color: rgba(217, 221, 228, 0.1) !important; }
.bg-primary\/20 { background-color: rgba(217, 221, 228, 0.15) !important; }
.bg-rose-500 { background: #C8CDD5 !important; color: #050608 !important; }
.bg-amber-400 { background: #D9DDE4 !important; }

/* === BORDERS === */
.border-line, .border-line\/60 { border-color: rgba(255, 255, 255, 0.08) !important; }
.border-slate-800 { border-color: rgba(255, 255, 255, 0.08) !important; }
.border-primary { border-color: #D9DDE4 !important; }
.border-primary\/4 { border-color: rgba(217, 221, 228, 0.25) !important; }
.border-primary\/20 { border-color: rgba(217, 221, 228, 0.2) !important; }

/* === SHADOWS === */
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.shadow-primary\/5, .shadow-primary\/10, .shadow-primary\/20 {
  --tw-shadow-color: rgba(217, 221, 228, 0.15) !important;
}

/* === HOVER === */
.hover\:text-primary:hover { color: #FFFFFF !important; }
.hover\:bg-primary:hover { background: #FFFFFF !important; color: #050608 !important; }
.hover\:bg-gray-100:hover { background: rgba(255,255,255,0.08) !important; }
.hover\:border-primary:hover { border-color: rgba(217, 221, 228, 0.45) !important; }
.hover\:shadow-md:hover, .hover\:shadow-lg:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(217,221,228,0.12) !important;
}

/* === HERO === */
main#main-content > section:first-of-type {
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

main#main-content > section:first-of-type::before {
  content: ""; position: absolute; top: 12%; right: 6%;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(217,221,228,0.18), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(40,70,130,0.6), rgba(5,6,8,0.9) 75%);
  box-shadow: inset 20px -10px 40px rgba(0,0,0,0.6),
              0 0 80px rgba(217,221,228,0.12),
              0 0 160px rgba(40,70,130,0.3);
  animation: soekFloat 14s ease-in-out infinite;
  z-index: 0; pointer-events: none;
}

main#main-content > section:first-of-type::after {
  content: ""; position: absolute; bottom: 16%; left: 5%;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(217,221,228,0.14), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(50,80,130,0.55), rgba(5,6,8,0.92) 75%);
  box-shadow: inset 16px -8px 32px rgba(0,0,0,0.6),
              0 0 60px rgba(217,221,228,0.1),
              0 0 120px rgba(50,80,130,0.25);
  animation: soekFloatSlow 18s ease-in-out infinite;
  z-index: 0; pointer-events: none;
}

main#main-content > section:first-of-type > * { position: relative; z-index: 2; }

main#main-content h1 {
  background: linear-gradient(180deg, #FFFFFF 0%, #C8CDD5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === CARDS === */
.bg-surface.rounded-2xl,
.bg-surface.rounded-3xl,
article.bg-surface {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.bg-surface.rounded-2xl:hover,
.bg-surface.rounded-3xl:hover,
article.bg-surface:hover {
  transform: translateY(-6px) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(217, 221, 228, 0.25) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(217, 221, 228, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* === BUTTONS === */
button, a.bg-secondary, a.bg-gradient-to-r { transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important; }

button.bg-secondary, .bg-secondary {
  background: linear-gradient(180deg, rgba(217,221,228,0.95), rgba(180,186,196,0.9)) !important;
  color: #050608 !important;
  border: 1px solid rgba(217, 221, 228, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 24px rgba(217,221,228,0.25), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

button.bg-secondary:hover, .bg-secondary:hover {
  background: linear-gradient(180deg, #FFFFFF, #D9DDE4) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), 0 0 40px rgba(217,221,228,0.45), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  transform: translateY(-2px) !important;
}

/* === FAQ === */
.bg-surface.overflow-hidden .fa-chevron-down { color: #D9DDE4 !important; }

/* === CTA === */
.bg-gradient-to-r.from-primary.via-primary.to-accent {
  background: linear-gradient(180deg, rgba(217,221,228,0.95), rgba(180,186,196,0.9)) !important;
  color: #050608 !important;
}

/* === FOOTER === */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(16,19,26,0.6) 100%) !important;
}
footer .bg-slate-800 { background-color: rgba(255, 255, 255, 0.08) !important; }
footer .hover\:text-white:hover { color: #FFFFFF !important; }
footer .text-slate-500 { color: rgba(200,205,213,0.5) !important; }

/* === MOBILE BOTTOM NAV === */
nav.fixed.bottom-0 {
  background: rgba(5, 6, 8, 0.85) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
nav.fixed.bottom-0 .bg-white\/95 { background: rgba(5, 6, 8, 0.85) !important; }
nav.fixed.bottom-0 .ring-white { --tw-ring-color: rgba(255,255,255,0.1) !important; }
nav.fixed.bottom-0 .bg-secondary { background: linear-gradient(180deg, rgba(217,221,228,0.95), rgba(180,186,196,0.9)) !important; color: #050608 !important; }

/* === CART DRAWER === */
.sf-cart-drawer__panel { background: #10131A !important; color: #C8CDD5 !important; }
.sf-cart-drawer__head { background: rgba(5, 6, 8, 0.5) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
.sf-cart-drawer__head h3 { color: #FFFFFF !important; }
.sf-cart-drawer__head button { color: #C8CDD5 !important; }
.sf-cart-drawer__overlay { background: rgba(0, 0, 0, 0.7) !important; backdrop-filter: blur(4px) !important; }
.sf-cart-line { background: rgba(255, 255, 255, 0.04) !important; border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; }
.sf-cart-line__name, .sf-cart-line__price, .sf-cart-drawer__total span:last-child { color: #FFFFFF !important; }
.sf-cart-drawer__total { color: #C8CDD5 !important; }
.sf-qty-btn { background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
.sf-btn--primary { background: linear-gradient(180deg, rgba(217,221,228,0.95), rgba(180,186,196,0.9)) !important; color: #050608 !important; }
.sf-empty { color: #C8CDD5 !important; }

/* === TOAST === */
#toast-wrapper .bg-slate-900 { background: rgba(5, 6, 8, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; }
#toast-wrapper .bg-primary { background: rgba(217, 221, 228, 0.2) !important; }

/* === SPLASH === */
#splash-screen { background: #050608 !important; }
#splash-screen h1, #splash-screen p, #splash-screen span, #splash-screen div { color: #D9DDE4 !important; }
#splash-screen .border-primary\/30 { border-color: rgba(217,221,228,0.3) !important; }
#splash-screen .from-accent, #splash-screen .to-primary, #splash-screen .via-primary {
  --tw-gradient-from: #D9DDE4 !important;
  --tw-gradient-to: #D9DDE4 !important;
  --tw-gradient-stops: #D9DDE4, #D9DDE4 !important;
}
#splash-screen .bg-gray-800\/80 { background-color: rgba(255,255,255,0.1) !important; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050608; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(217, 221, 228, 0.3); }
::selection { background: rgba(217, 221, 228, 0.3); color: #FFFFFF; }