/* خلفية أعلى الصفحة - اللون الداكن المطلوب */
header, .navbar, .bg-white {
    background-color: rgb(16, 2, 47) !important; /* اللون الداكن */
    backdrop-filter: blur(4px);
    border-bottom: 2px solid #6a00ff;
}

/* نصوص الجزء العلوي مع توهج */
#main h3.text-black {
    color: #ffffff; /* خط أبيض */
    text-shadow: 
        0 0 5px #4306c6, 
        0 0 10px #6a00ff, 
        0 0 20px #8a2be2, 
        0 0 30px #4306c6, 
        0 0 40px #6a00ff;
    animation: gradientGlow 2.5s ease-in-out infinite alternate;
}

@keyframes gradientGlow {
    0% {
        text-shadow: 
            0 0 2px #4306c6, 
            0 0 5px #6a00ff, 
            0 0 10px #8a2be2, 
            0 0 15px #4306c6, 
            0 0 20px #6a00ff;
    }
    50% {
        text-shadow: 
            0 0 5px #4306c6, 
            0 0 15px #6a00ff, 
            0 0 25px #8a2be2, 
            0 0 35px #4306c6, 
            0 0 45px #6a00ff;
    }
    100% {
        text-shadow: 
            0 0 10px #4306c6, 
            0 0 20px #6a00ff, 
            0 0 30px #8a2be2, 
            0 0 40px #4306c6, 
            0 0 50px #6a00ff;
    }
}

/* توهج متدرج للنص مع خط أبيض */
#main h3.text-black {
  color: #ffffff; /* الخط أبيض */
  text-shadow: 
    0 0 5px #4306c6, 
    0 0 10px #6a00ff, 
    0 0 20px #8a2be2, 
    0 0 30px #4306c6, 
    0 0 40px #6a00ff;
  animation: gradientGlow 2.5s ease-in-out infinite alternate;
}

@keyframes gradientGlow {
  0% {
    text-shadow: 
      0 0 2px #4306c6, 
      0 0 5px #6a00ff, 
      0 0 10px #8a2be2, 
      0 0 15px #4306c6, 
      0 0 20px #6a00ff;
  }
  50% {
    text-shadow: 
      0 0 5px #4306c6, 
      0 0 15px #6a00ff, 
      0 0 25px #8a2be2, 
      0 0 35px #4306c6, 
      0 0 45px #6a00ff;
  }
  100% {
    text-shadow: 
      0 0 10px #4306c6, 
      0 0 20px #6a00ff, 
      0 0 30px #8a2be2, 
      0 0 40px #4306c6, 
      0 0 50px #6a00ff;
  }
}



/* ألوان وقيم عامة */
:root {
  /* ألوان رئيسية */
  --color-bg-dark: #0c0718;        /* خلفية داكنة عامة */
  --color-bg-dark-alt: #150028;    /* تدرج خلفية */
  --color-brand-primary: #3804b5;  /* لون رئيسي للتوهج والأزرار */
  --color-brand-secondary: #6a00ff;/* لون ثانوي للتوهج */
  --color-card-bg: #0e012d;        /* خلفية البطاقات */
  --color-text: #ffffff;           /* اللون الأساسي للنصوص */
  --color-footer-text: #aaa;       /* لون نص الفوتر */
  --wave-height: 150px;            /* ارتفاع الموجات العلوية */
  --primaryBackground: #0c0718;    /* اللون الداكن الجديد للعناصر */

  /* خلفية صفحة تسجيل الدخول */
  --login-bg: #0c0718;             /* استبدل bg-gray-100 بهذا اللون الداكن */
}

/* إذا تريد التأكد من أن .bg-gray-100 يأخذ اللون الداكن */
.bg-gray-100 {
  background-color: var(--login-bg) !important;
}

/* اجعل جميع عناصر text-gray-900 بيضاء مهما كان */
.text-gray-900 {
    color: #ffffff !important;
}


/* ========================
   الخلفية العامة والخطوط
======================== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Tajawal','Cairo',sans-serif;
  color: var(--color-text);
  background: #0c0718; /* اللون الداكن الجديد */
}


a {
  color: var(--color-brand-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--color-brand-primary);
}

/* ========================
   الهيدر / نافبار
======================== */
header, .navbar {
  position: relative;
  z-index: 1000;
  background: #0d001fd9;
  backdrop-filter: blur(4px);
  border-bottom: 2px solid var(--color-brand-primary);
  padding: 12px 20px;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 12px;
}

.navbar a {
  color: var(--color-text) !important;
  font-weight: 600;
  transition: color 0.3s ease;
}
.navbar a:hover {
  color: var(--color-brand-primary) !important;
}

/* ========================
   النصوص المتوهجة
======================== */
#main h3.text-black {
  color: var(--color-text);
  text-shadow: 
    0 0 5px var(--color-brand-primary),
    0 0 10px var(--color-brand-secondary),
    0 0 20px var(--color-brand-primary),
    0 0 30px var(--color-brand-secondary);
  animation: gradientGlow 2.5s ease-in-out infinite alternate;
}

@keyframes gradientGlow {
  0% {
    text-shadow:
      0 0 2px var(--color-brand-primary),
      0 0 5px var(--color-brand-secondary),
      0 0 10px var(--color-brand-primary),
      0 0 15px var(--color-brand-secondary);
  }
  50% {
    text-shadow:
      0 0 5px var(--color-brand-primary),
      0 0 15px var(--color-brand-secondary),
      0 0 25px var(--color-brand-primary),
      0 0 35px var(--color-brand-secondary);
  }
  100% {
    text-shadow:
      0 0 10px var(--color-brand-primary),
      0 0 20px var(--color-brand-secondary),
      0 0 30px var(--color-brand-primary),
      0 0 40px var(--color-brand-secondary);
  }
}

/* ========================
   الحقول / الإدخالات
======================== */
input, select, textarea {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid var(--color-brand-primary);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-brand-secondary);
  box-shadow: 0 0 10px rgba(155, 89, 255, 0.6);
  outline: none;
}
input::placeholder, textarea::placeholder { color: #555 !important; }

/* ========================
   الأزرار
======================== */
button, .btn {
  background: var(--color-brand-primary);
  color: var(--color-text) !important;
  border: none;
  border-radius: 30px;
  padding: 12px 25px;
  font-weight: bold;
  box-shadow: 0 0 15px var(--color-brand-primary);
  transition: all 0.3s ease;
}
button:hover, .btn:hover {
  background: var(--color-brand-secondary);
  box-shadow: 0 0 25px var(--color-brand-secondary);
  transform: translateY(-3px);
}

/* ========================
   البطاقات
======================== */
.card, .product-card, .mrw-card, .subscription-box {
  background: var(--color-card-bg) !important;
  color: var(--color-text);
  border-radius: 20px !important;
  padding: 20px;
  box-shadow: 0 0 16px rgba(56, 4, 181, 0.4); /* توهج متناسق */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover, .product-card:hover, .subscription-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 25px rgba(56, 4, 181, 0.8);
}

.mrw-card.is-in {
  transform: none;
  opacity: 1;
  animation: mrwGlow 3s infinite alternate;
}
@keyframes mrwGlow {
  0%  { box-shadow:0 0 10px rgba(56,4,181,.35); }
  100%{ box-shadow:0 0 26px rgba(56,4,181,.85); }
}

/* ========================
   العناوين
======================== */
h1, h2, h3, h4, h5, .section-title {
  color: var(--color-text);
  text-shadow: 0 0 15px rgba(56,4,181,0.6);
}

/* ========================
   الفوتر
======================== */
footer {
  background: #0c0718;
  color: var(--color-footer-text);
  padding: 40px 20px;
  text-align: center;
  border-top: 2px solid var(--color-brand-primary);
}
footer a {
  color: var(--color-brand-secondary);
  font-weight: 500;
}
footer a:hover { color: #fff; }

/* ========================
   أيقونات التواصل
======================== */
.social-icons a {
  margin: 0 8px;
  font-size: 22px;
  color: var(--color-brand-secondary);
  transition: color 0.3s ease, transform 0.3s ease;
}
.social-icons a:hover { color: #fff; transform: scale(1.2); }

/* ========================
   الموجات العلوية
======================== */
body.has-waves { padding-top: var(--wave-height); }
.mrw-waves {
  position: fixed;
  top:0; left:0;
  width:100%; height:var(--wave-height);
  pointer-events:none;
  z-index:999;
}
.mrw-waves svg {
  position:absolute;
  left:0; bottom:0;
  width:200%;
  height:100%;
}
.mrw-waves svg.layer-1 { animation: mrwWave 20s linear infinite; opacity:.8; }
.mrw-waves svg.layer-2 { animation: mrwWave 28s linear infinite; opacity:.7; }
.mrw-waves svg.layer-3 { animation: mrwWave 36s linear infinite; opacity:.9; }
@keyframes mrwWave {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}