/* ========== GOOGLE FONT (Rajdhani Gaming) ========== */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&display=swap");

/* ========== THEME VARIABLES ========== */
:root {
  --color-bg: #05010d;
  --color-bg-soft: #120025;
  --color-bg-glass: rgba(12, 4, 30, 0.85);
  --color-primary: #3C096C;
  --color-primary-light: #7B2CBF;
  --color-primary-neon: #C77DFF;
  --color-accent-blue: #4cc9f0;
  --color-accent-pink: #ff4d9a;
  --color-text-main: #f5edff;
  --color-text-muted: #b9a9ff;
}

/* ========== GLOBAL RESET ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ========== BODY & GLOBAL BACKGROUND ========== */
html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg) !important;
  background: var(--color-bg) !important;
  color: var(--color-text-main);
  font-family: "Rajdhani", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* كل الحاويات الأساسية تبقى داكنة */
body > div,
#root,
.app,
.main-wrapper,
.page,
.page-wrapper,
.page-content,
section,
.container,
div[class*="section"],
div[class*="page"],
div[class*="wrapper"] {
  background-color: var(--color-bg) !important;
  background: var(--color-bg) !important;
}

/* إزالة أي سكاشن بيضا */
div[class*="bg-light"],
section[class*="bg-light"],
div[class*="light"],
section[class*="light"],
div[style*="background-color: rgb(250"],
div[style*="background-color: #fff"],
div[style*="background:#fff"],
div[style*="background: #fff"],
[class*="bg-[#f8fafc]"],
[class*="bg-gray-50"],
[class*="bg-white/95"],
[class*="bg-white"],
[class*="bg-slate-50"],
[class*="bg-slate-100"] {
  background: transparent !important;
}

/* ========== BACKGROUND ART + ANIMATION ========== */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    radial-gradient(circle at 20% 10%, rgba(199, 125, 255, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 80% 15%, rgba(255, 0, 60, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(255, 0, 120, 0.25) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(199, 125, 255, 0.08) 40%, transparent 100%);
  filter: blur(8px);
  animation: bgShift 22s ease-in-out infinite alternate;
}

body::after {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 0, 80, 0.04) 0px,
      rgba(255, 0, 80, 0.04) 2px,
      transparent 2px,
      transparent 12px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(199, 125, 255, 0.05) 0px,
      rgba(199, 125, 255, 0.05) 1px,
      transparent 1px,
      transparent 10px
    );
  opacity: 0.6;
}

/* حركة خفيفة للخلفية */
@keyframes bgShift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-3%, 2%, 0) scale(1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ========== HEADER GAMING STYLE ========== */
header,
.sticky-header,
.top-0.z-30,
.navbar,
.site-header,
.top-nav {
  background: rgba(10, 0, 25, 0.72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(199, 125, 255, 0.25) !important;
  box-shadow: 0 0 25px rgba(60, 9, 108, 0.55) !important;
  z-index: 999 !important;
}

/* اللوجو */
header img,
header .logo img {
  height: 46px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px rgba(199, 125, 255, 0.8));
}

/* الروابط في الهيدر */
header a,
.header a,
.navbar a,
.top-nav a {
  color: #ffffff !important;
}

/* أيقونات الهيدر (بحث – قلب – قائمة) */
header svg,
header i,
.top-nav svg,
.navbar svg {
  width: 28px !important;
  height: 28px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 6px rgba(199, 125, 255, 0.8));
}

/* صندوق البحث في الهيدر */
header input[type="search"],
header input[type="text"] {
  background: rgba(5, 1, 13, 0.9) !important;
  border: 1px solid var(--color-primary-light) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

header input::placeholder {
  color: #c8b0ff !important;
}

/* ========== HERO / BANNERS ========== */
.hero,
.hero-section,
.banner,
.banner-main,
.main-slider,
.slider-hero,
.section-hero {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(199, 125, 255, 0.35) 0, transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(76, 201, 240, 0.35) 0, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(255, 77, 154, 0.5) 0, transparent 60%),
    linear-gradient(140deg, #05010d 0%, #120025 45%, #05010d 100%);
}

.hero img,
.hero-section img,
.banner img,
.banner-main img,
.main-slider img,
.slider-hero img,
.section-hero img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block !important;
}

/* نخلي كل الـ overlays دي ما تمنعش الكليك */
.hero::before,
.hero::after,
.banner::before,
.banner::after,
.main-slider::before,
.main-slider::after,
.section-hero::before,
.section-hero::after {
  pointer-events: none !important;
}

/* ========== TYPOGRAPHY (عناوين و نصوص) ========== */
h1,
h2,
h3,
h4,
.section-title,
[class*="section-title"],
[class*="SectionTitle"],
[class*="text-3xl"],
[class*="text-4xl"] {
  color: var(--color-text-main) !important;
  letter-spacing: 0.08em;
  font-weight: 700 !important;
  text-shadow: 0 0 16px rgba(199, 125, 255, 0.9);
  position: relative;
}

/* خط تحت العناوين الكبيرة */
h2::after,
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, #ff4d9a, #4cc9f0);
  box-shadow: 0 0 18px rgba(199, 125, 255, 0.9);
  border-radius: 999px;
}

/* النصوص اللي كانت غامقة */
a,
[class*="text-gray-900"],
[class*="text-slate-900"],
[class*="text-gray-800"],
[class*="text-slate-800"] {
  color: var(--color-text-main) !important;
}

/* ========== PRODUCT CARDS ========== */
.card,
.product-card,
.product-item,
.product-box,
.product,
.collection-card,
.category-card,
.swiper-slide > div {
  background: rgba(5, 1, 13, 0.96) !important;
  border: 1px solid rgba(199, 125, 255, 0.28) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(16px);
  overflow: hidden;
  color: #fff !important;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}

/* نيون على الهوفر */
.card:hover,
.product-card:hover,
.product-item:hover,
.product-box:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(76, 201, 240, 0.75) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.95),
    0 0 26px rgba(76, 201, 240, 0.8),
    0 0 32px rgba(199, 125, 255, 0.85);
}

/* الصور داخل الكرت */
.card img,
.product-card img,
.product-item img,
.product-box img,
.product img,
.collection-card img,
.category-card img,
.swiper-slide img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.25s ease-out, filter 0.25s ease-out;
}

.card:hover img,
.product-card:hover img,
.product-item:hover img,
.product-box:hover img {
  transform: scale(1.06);
  filter: saturate(1.1) contrast(1.05);
}

/* عناوين وأسعار المنتجات */
.product-title,
.card-title,
.card .title,
.product-name {
  color: var(--color-text-main) !important;
  font-weight: 700 !important;
}

.price,
.product-price,
.card .price,
.product-card [class*="price"],
.product-card [class*="amount"] {
  color: var(--color-accent-blue) !important;
  font-weight: 800 !important;
}

/* خط نيون تحت السعر */
.product-card .price::after,
.product-item .price::after,
.card .price::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 20px;
  background: linear-gradient(90deg, #c77dff, #ff4d9a, #4cc9f0);
  box-shadow: 0 0 12px rgba(199, 125, 255, 0.9);
}

/* السماح بالضغط على المنتجات */
.product-card a,
.product-item a,
.product-box a,
.collection-card a,
.category-card a,
a[href*="/products"],
a[href*="/product"],
a[href*="/collections"],
a[href*="/collection"] {
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
}

/* ========== BUTTONS ========== */

/* أزرار تحت الكرت (تحديد الخيارات مثلاً) */
.product-card button,
.product-card .btn,
.product-card [class*="button"],
.product-card [class*="btn"] {
  background: rgba(10, 0, 30, 0.95) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: "Rajdhani", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  border-radius: 999px !important;
  border: 1px solid rgba(199, 125, 255, 0.7) !important;
  box-shadow:
    0 0 10px rgba(199, 125, 255, 0.5),
    0 0 18px rgba(76, 201, 240, 0.35) !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, filter 0.15s ease-out;
}

.product-card button:hover,
.product-card .btn:hover,
.product-card [class*="button"]:hover,
.product-card [class*="btn"]:hover {
  background: linear-gradient(90deg, #c77dff, #ff4d9a, #4cc9f0) !important;
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.05);
}

/* أيقونة القلب تحت الكرت */
.product-card svg,
.product-item svg,
.card svg {
  stroke: #c77dff !important;
  color: #c77dff !important;
  fill: transparent !important;
}

.product-card button:hover svg,
.product-item button:hover svg,
.card button:hover svg {
  stroke: #ff4d9a !important;
  color: #ff4d9a !important;
}

/* زر اضغط هنا للشراء في صفحة المنتج */
#product-id button,
.product-page button,
.product-details button {
  background: linear-gradient(90deg, #c77dff, #ff4d9a, #4cc9f0) !important;
  color: #f5edff !important;
  border-radius: 999px !important;
  border: 1px solid rgba(199, 125, 255, 0.9) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px #c77dff, 0 0 14px #ff4d9a !important;
  box-shadow:
    0 0 18px rgba(199, 125, 255, 0.8),
    0 0 30px rgba(255, 77, 154, 0.6) !important;
}

#product-id button:hover,
.product-page button:hover,
.product-details button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px) scale(1.02);
}

/* ========== PRODUCT PAGE EXTRA STYLING ========== */
#product-id,
#product-id * {
  color: var(--color-text-main) !important;
}

#product-id div[class*="rounded-full"],
#product-id div[class*="rounded-3xl"] {
  background: var(--color-bg-glass) !important;
  border: 1px solid rgba(199, 125, 255, 0.6) !important;
  border-radius: 16px !important;
}

#product-id h1,
#product-id h2,
#product-id h3 {
  color: var(--color-primary-neon) !important;
  font-weight: 800 !important;
}

#product-id [class*="price"],
#product-id [class*="amount"] {
  color: var(--color-accent-blue) !important;
  font-weight: 800 !important;
}

#product-id span[class*="Color"],
#product-id span[class*="color"],
#product-id span[class*="Size"],
#product-id span[class*="size"] {
  color: var(--color-primary-neon) !important;
  font-weight: 600 !important;
}
/* ==============================
   1) تهدئة النيون بتاع الأزرار
   ============================== */

.product-card button,
.product-card .btn,
.product-card [class*="button"],
.product-card [class*="btn"],
button,
#product-id button {
    box-shadow: 0 0 10px rgba(199, 125, 255, 0.35), 
                0 0 16px rgba(76, 201, 240, 0.25) !important;
    background: linear-gradient(90deg, #8c3adf, #c96bff) !important;
    opacity: 0.92 !important;
}

/* Hover أخف وأرق */
.product-card button:hover,
#product-id button:hover {
    box-shadow: 0 0 14px rgba(199, 125, 255, 0.55), 
                0 0 24px rgba(76, 201, 240, 0.45) !important;
    transform: scale(1.02) !important;
}


/* ==================================
   2) إظهار كلمة (القائمة) بوضوح
   ================================== */
header a,
.top-nav a,
.navbar a,
.site-header a,
header span,
.top-nav span {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(199, 125, 255, 0.6);
    font-weight: 600 !important;
}

/* ==============================
   3) إظهار كلمة (تحديد الخيارات)
   ============================== */

.product-card button span,
.product-card .btn span,
.product-card [class*="button"] span,
.product-card [class*="btn"] span {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(199, 125, 255, 0.7);
}

/* لو النص نفسه داخل div */
.product-card [class*="options"],
.product-card [class*="select"],
.product-card [class*="choice"],
.product-card .text {
    color: #ffffff !important;
}
/* إظهار نص تحديد الخيارات */
.product-card button,
.product-card .btn,
.product-card [class*="button"],
.product-card [class*="btn"],
.product-card .add-to-cart-btn,
.product-card .variants-btn {
    color: #f5edff !important;          /* لون النص */
    text-shadow: 0 0 6px rgba(199,125,255,0.6) !important; /* توهج خفيف */
    font-weight: 700 !important;        /* تخانة النص */
}

/* لو فيه أيقونة جنب النص */
.product-card button svg,
.product-card .btn svg,
.product-card [class*="button"] svg,
.product-card [class*="btn"] svg {
    fill: #f5edff !important;
    stroke: #f5edff !important;
    opacity: 0.9 !important;
}

/* تفتيح خفيف للخلفية من غير ما تبقى منورة */
.product-card button,
.product-card .btn,
.product-card [class*="button"],
.product-card [class*="btn"] {
    background: rgba(15, 5, 35, 0.55) !important;
    border: 1px solid rgba(199,125,255,0.25) !important;
}