/* ========================= */
/* الإعدادات العامة + الصفحة الرئيسية كاملة */
/* ========================= */

/* Reset شامل */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:
    'Tajawal',
    'Noto Sans Arabic',
    'Roboto',
    'Segoe UI',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Noto Color Emoji',
    'Arial',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* ========================= */
/* تحسين الألوان للموقع */
/* ========================= */
html {
  height: 100%;
  filter: contrast(1.03) saturate(1.05) brightness(1.03);
  overscroll-behavior: auto;
}

/* تحسين أقوى للشاشات الكبيرة */
@media (min-width: 1024px) {
  html {
    filter: contrast(1.03) saturate(1.05) brightness(1.03);
  }
}

/* ========================= */
/* إعدادات الصور والفيديو والكانفاس */
/* ========================= */
img, picture, video, canvas {
  filter: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ========================= */
/* إعدادات Body كاملة */
/* ========================= */
body {
  display: flex;
  flex-direction: column;
  direction: rtl;

  height: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;

  line-height: 1.6;
  background-color: #241d64;
  color: #ffffff;

  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ========================= */
/* الحقول (Inputs) */
/* ========================= */
input,
textarea,
select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;

  color: #ffffff;
  caret-color: #ffffff;
  background: transparent;
  border: none;
  outline: none;
}

/* Placeholder */
::placeholder {
  color: #ffffffaa;
  opacity: 1;
}

/* إزالة التحديد */
*:focus {
  outline: none !important;
}

/* ========================= */
/* النصوص العادية (يحافظ على التصميم القديم) */
/* ========================= */
input[type="text"],
textarea {
  text-align: center;   /* 👈 هذا يرجع "ادخل ID / السعر" للمنتصف */
  direction: ltr;       /* يمنع انقلاب الشكل */
  unicode-bidi: plaintext;
}

/* ========================= */
/* الأرقام */
/* ========================= */
input[type="number"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* Placeholder للأرقام */
input[type="number"]::placeholder {
  direction: rtl;
  text-align: right;
}

/* ========================= */
/* الأزرار والروابط */
/* ========================= */
button, a {
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ========================= */
/* عناصر البطاقات (balance-option) */
/* ========================= */
.balance-option {
  text-decoration: none; /* إزالة الخط */
  color: inherit;        /* نفس لون النص */
  display: inline-block; /* يحافظ على الشكل */
}

/* ========================= */
/* Responsive ديناميكي لكل الشاشات */
/* ========================= */

/* موبايل صغير */
@media (max-width: 480px) {
  body {
    font-size: 0.85rem;
  }
}

/* تابلت */
@media (min-width: 481px) and (max-width: 1024px) {
  body {
    font-size: 0.9rem;
  }
}

/* لابتوب وشاشات كبيرة */
@media (min-width: 1025px) {
  body {
    font-size: 1rem;
  }
}

/* =========================
   💥 FINAL INPUT COLOR LOCK
========================= */

.form-box input {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  caret-color: #fff;
}

/* وقت التركيز */
.form-box input:focus,
.form-box input:active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 🔥 autofill + keyboard suggestion + internal chrome */
.form-box input:-webkit-autofill,
.form-box input:-webkit-autofill:hover,
.form-box input:-webkit-autofill:focus,
.form-box input:-internal-autofill-selected,
.form-box input:-internal-autofill-previewed {

  /* 💣 أهم سطر (يغطي اللون الأبيض نهائياً) */
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.1) inset !important;

  /* تثبيت النص */
  -webkit-text-fill-color: #fff !important;

  /* منع التلاعب */
  background-color: transparent !important;

  caret-color: #fff;

  /* يلغي الفلاش */
  transition: background-color 9999s ease-in-out 0s;
}

/* 💥 حركة صغيرة تجبر إعادة رسم العنصر */
@keyframes inputFix {
  from {}
  to {}
}

.form-box input:focus {
  animation: inputFix 0.01s;
}

/* =========================
   شاشة الانتظار
========================= */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background: #241d64;
  z-index: 99999;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* اللوجو */
.loader-logo {
  position: relative;
  width: clamp(60px, 15vw, 120px);
  height: clamp(60px, 15vw, 120px);

  animation: spin 2s linear infinite;
  filter: none;
}

/* دوران اللوجو */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* لمعة بسيطة على اللوجو */
.loader-logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 2s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ========================= */
/* تصميم صفحة تسجيل الدخول   */
/* ========================= */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #241d64;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
}

/* ===== صفحة تسجيل الدخول - الخلفية ===== */
.login-body {
  background-color: #241d64; /* لون أساسي أثناء تحميل الصورة */
  background-image: url("images/backgrounds/background-desktop.webp"); /* نسخة الديسكتوب */
  background-position: center center;
  background-size: cover; /* يغطي كامل الشاشة */
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  transition: background-image 0.3s ease-in-out; /* انتقال سلس عند تغيير الصورة */
}

/* ===== نسخة التابلت ===== */
@media (max-width: 1024px) {
  .login-body {
    background-image: url("images/backgrounds/background-tablet.webp");
  }
}

/* ===== نسخة الموبايل ===== */
@media (max-width: 600px) {
  .login-body {
    background-image: url("images/backgrounds/background-mobile.webp");
    background-position: top center; /* لضبط الصورة على رأس الشاشة */
  }
}

/* ========================= */
/*  الحاوية الرئيسية        */
/* ========================= */
.container {
  width: clamp(280px, 50%, 450px);
  max-height: 90vh;
  background: rgba(0, 0, 0, 0.55);
  padding: clamp(2vh, 2vw, 3vh) clamp(2vw, 3vw, 4vw);
  border-radius: clamp(12px, 1.5vw, 16px);
  box-shadow: 0 0 clamp(12px, 1vw, 16px) rgba(0, 0, 0, 0.7);
  text-align: center;

  position: relative;
  overflow-y: auto;
  z-index: 9999;
  margin: clamp(5vh, 10vw, 10vh) auto;
}

/* ========================= */
/*  أزرار البداية             */
/* ========================= */
#initial-buttons {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 2vh, 1.2rem);
  margin-bottom: 1vh;
}

#initial-buttons button {
  width: 100%;
  padding: clamp(1rem, 2vh, 1.4rem) 0;
  border: none;
  border-radius: clamp(6px, 1vw, 8px);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
}

#initial-buttons button:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#initial-buttons button:active {
  transform: scale(0.98);
}

/* ========================= */
/*  نماذج الدخول والتسجيل   */
/* ========================= */
#initial-buttons,
.form-box {
  display: none;
  text-align: center;
}

#initial-buttons.active,
.form-box.active {
  display: block;
}

/* عناوين النماذج */
.form-box h2 {
  margin-bottom: clamp(1vh, 2vw, 2.5vh);
  font-size: clamp(1.2rem, 4vw, 2rem);
}

/* العناوين (Labels) داخل النماذج فقط */
.form-box label {
  display: block;
  text-align: right;
  color: #fff;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  margin: clamp(0.5vh, 1.5vw, 0.7vh) 0 clamp(0.3vh, 1vw, 0.5vh);
}

/* الحقول داخل النماذج فقط */
.form-box input {
  width: 100%;
  padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(0.8rem, 1.5vw, 1.2rem);
  margin-bottom: clamp(0.8vh, 1.5vw, 1vh);
  border: none;
  border-radius: clamp(6px, 1vw, 8px);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  outline: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Placeholder داخل النماذج فقط */
.form-box input::placeholder {
  color: #ccc;
  font-size: clamp(0.8rem, 1.5vw, 1.1rem);
}

/* ========================= */
/* أزرار النماذج العامة (Login / Register / Back) */
/* ========================= */
.form-box button,
.form-box .forgot-password-btn {
  width: 100%;
  padding: clamp(1rem, 2vh, 1.4rem);
  border: none;
  border-radius: clamp(6px, 1vw, 8px);
  background: rgba(255, 255, 255, 0.12); /* نفس أزرار البداية */
  color: #fff;
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  margin-top: clamp(4px, 1vh, 6px);
}

/* Hover نفس البداية */
.form-box button:hover,
.form-box .forgot-password-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Active */
.form-box button:active {
  transform: scale(0.98);
}

/* ========================= */
/*  Responsive - جميع الشاشات */
/* ========================= */
@media (max-width: 480px) { /* موبايل صغير */
  .container {
    width: 90%;
    padding: 2vh 4vw;
    margin: 5vh auto;
  }
  #initial-buttons button,
  .form-box button,
  .form-box .forgot-password-btn {
    font-size: 0.9rem;
    padding: 0.9rem 0;
  }
}

@media (min-width: 481px) and (max-width: 768px) { /* موبايل كبير / تاب صغير */
  .container {
    width: 80%;
    padding: 2.5vh 4vw;
    margin: 5vh auto;
  }
  #initial-buttons button,
  .form-box button,
  .form-box .forgot-password-btn {
    font-size: 1rem;
    padding: 1rem 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) { /* تاب كبير / لابتوب صغير */
  .container {
    width: clamp(400px, 50%, 500px);
    padding: 3vh 4vw;
    margin: 6vh auto;
  }
  #initial-buttons button,
  .form-box button,
  .form-box .forgot-password-btn {
    font-size: 1.05rem;
    padding: 1.05rem 0;
  }
}

@media (min-width: 1025px) { /* لابتوب / شاشات كبيرة */
  .container {
    width: clamp(450px, 45%, 600px);
    padding: 3vh 4vw;
    margin: 8vh auto;
  }
  #initial-buttons button,
  .form-box button,
  .form-box .forgot-password-btn {
    font-size: 1.1rem;
    padding: 1.1rem 0;
  }
}

/* =========================
   🧼 Fix hover sticking on mobile
========================= */
#initial-buttons button,
.form-box button,
.form-box .forgot-password-btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  /* حركة ناعمة للضغط */
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* ❌ إلغاء hover بالكامل */
#initial-buttons button:hover,
.form-box button:hover,
.form-box .forgot-password-btn:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.12);
}

/* 💥 بروز لبرا (3D pop خفيف) */
#initial-buttons button:active,
.form-box button:active,
.form-box .forgot-password-btn:active {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ========================= */
/* أيقونة عرض / إخفاء كلمة المرور */
/* ========================= */
.password-wrapper {
  position: relative;
  width: 100%;
}

.password-wrapper input {
  width: 100%;
  padding-left: clamp(2.5rem, 6vw, 3rem); /* مساحة العين */
  padding-right: clamp(0.8rem, 1.5vw, 1.2rem); /* مساحة النص */
  box-sizing: border-box;
}

/* أيقونة العين */
.password-wrapper .toggle-password {
  position: absolute;
  left: clamp(0.5rem, 1vw, 0.8rem);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7); /* لون ثابت */
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  user-select: none;
  z-index: 2;
  transition: none; /* منع أي حركة أو تغيير */
}

/* منع أي تأثير hover أو active */
.password-wrapper .toggle-password:hover,
.password-wrapper .toggle-password:active {
  color: rgba(255, 255, 255, 0.7); /* نفس اللون دائماً */
  transform: translateY(-50%);
}

/* ========================= */
/* Responsive - أيقونة العين */
/* ========================= */
@media (max-width: 768px) {
  .password-wrapper input {
    padding-left: clamp(2rem, 5vw, 2.5rem);
    padding-right: clamp(0.7rem, 1.2vw, 1rem);
  }
  .password-wrapper .toggle-password {
    font-size: clamp(1rem, 4vw, 1.3rem);
    left: clamp(0.4rem, 1vw, 0.6rem);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .password-wrapper input {
    padding-left: clamp(2.2rem, 5.5vw, 2.8rem);
    padding-right: clamp(0.75rem, 1.3vw, 1.1rem);
  }
  .password-wrapper .toggle-password {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    left: clamp(0.45rem, 1vw, 0.7rem);
  }
}

@media (min-width: 1025px) {
  .password-wrapper input {
    padding-left: clamp(2.5rem, 6vw, 3rem);
    padding-right: clamp(0.8rem, 1.5vw, 1.2rem);
  }
  .password-wrapper .toggle-password {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    left: clamp(0.5rem, 1vw, 0.8rem);
  }
}

/* ========================= */
/*  شعار الموقع النيون      */
/* ========================= */

#siteNameWrapper {
  position: fixed;
  top: 5px; /* رفع للشاشة كاملة */

  left: 0;
  right: 0;
  margin: 0 auto; /* توسيط أفقي حقيقي */

  padding: clamp(4px, 1vw, 8px) clamp(6px, 2vw, 14px);
  background: rgba(255, 255, 255, 0.15);

  border-radius: clamp(8px, 1.5vw, 12px);
  backdrop-filter: blur(10px);

  box-shadow: 
    0 clamp(2px, 0.5vw, 4px) 
    clamp(12px, 1vw, 16px) 
    rgba(255, 255, 255, 0.1);

  display: flex;
  justify-content: center;
  align-items: center;

  width: max-content;
  max-width: 90vw;
  height: fit-content;

  text-align: center;
  z-index: 2000;
}

/* نص الشعار */
#siteName {
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 700;

  line-height: 1.2; /* توازن عمودي أفضل للنص الإنجليزي */
  transform: translateY(1px); /* تصحيح بصري بسيط */

  color: #ffffff;

  text-shadow:
    0 0 0.25vw #ffd700,
    0 0 0.5vw  #ffd700,
    0 0 1vw    #ff33cc,
    0 0 1.4vw  #ff33cc;

  animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
  0% {
    text-shadow:
      0 0 0.25vw #ffd700,
      0 0 0.5vw  #ffd700,
      0 0 1vw    #ff33cc,
      0 0 1.4vw  #ff33cc;
  }

  100% {
    text-shadow:
      0 0 0.5vw  #ffffff,
      0 0 1vw    #ff66ff,
      0 0 1.5vw  #00ffff,
      0 0 1.8vw  #00ffff;
  }
}

/* =============================
   تنسيق رسائل الأخطاء
============================= */
.error-message {
  color: #ff5c5c;
  margin-bottom: 8px;
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  line-height: 1.2;
}

/* رسالة الخطأ تحت حقل كلمة المرور */
.password-wrapper + .error-message {
  display: block;
  margin-top: clamp(0.3rem, 0.8vw, 0.5rem);
  width: 100%;
}

/* ========================= */
/* تأثير الاهتزاز (لفيدباك) */
/* ========================= */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.3s;
}

/* ========================= */
/*      Toast مثل شريط البحث */
/* ========================= */

.full-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);

  width: 100%;
  max-width: 600px;

  text-align: center;

  padding: 12px 20px;

  font-size: 15px;
  font-weight: 500;

  color: #fff;

  border-radius: 25px;
  overflow: hidden;

  /* 🧊 خلفية افتراضية (fallback) */
  background: rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow: 0 6px 18px rgba(0,0,0,0.25);

  z-index: 9999;

  opacity: 0;

  transition:
    transform 0.5s cubic-bezier(.16,1,.3,1),
    opacity 0.4s ease,
    background 0.3s ease;
}

/* ===== ظهور ===== */
.full-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========================= */
/* 🎯 الحالات (ألوان حديثة جميلة) */
/* ========================= */

/* ✅ نجاح (أخضر ناعم) */
.full-toast.success {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  border: 1px solid rgba(46, 204, 113, 0.4);
}

/* ❌ خطأ (أحمر قوي نظيف) */
.full-toast.error {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  border: 1px solid rgba(231, 76, 60, 0.4);
}

/* ⚠️ تحذير (برتقالي دافئ) */
.full-toast.warning {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border: 1px solid rgba(243, 156, 18, 0.4);
}

/* ℹ️ معلومات (أزرق حديث) */
.full-toast.info {
  background: linear-gradient(135deg, #3498db, #2980b9);
  border: 1px solid rgba(52, 152, 219, 0.4);
}

/* ===== خروج ===== */
.full-toast.removing {
  opacity: 0;
  transform: translateX(-50%) translateY(-80%);
}

/* ========================= */
/*  الجسم الرئيسي            */
/* ========================= */

.main-body {
  position: relative;

  flex: 1 1 auto;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: visible;
  padding-top: clamp(50px, 6vh, 80px);
}

/* ========================= */
/*  المحتوى الرئيسي          */
/* ========================= */

#mainContent {
  position: relative;
  z-index: 100;

  width: 100%;
  min-height: 100%;

  padding-top: clamp(60px, 8vh, 80px);

  background-color: #241d64;
  color: #e0d6ff;

  font-size: clamp(1rem, 2vw, 1.2rem);
  text-align: center;
}

/* ========================= */
/* العملات (Ultra Stable Final) */
/* ========================= */

.coin-emoji {
  position: absolute;
  top: -20vh;

  pointer-events: none;

  /* 💡 تثبيت الإيموجي 100% */
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
  font-family: system-ui, emoji;

  /* 🚀 أداء عالي */
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;

  /* ❌ لا شفافية ولا تغيّر لون */
  opacity: 1 !important;
  filter: none !important;

  /* 🧠 تحسين أداء إضافي */
  contain: layout paint;

  animation: fall-coins linear forwards;
}

/* ========================= */
/* الحركة */
/* ========================= */

@keyframes fall-coins {
  0% {
    transform: translate3d(0, -25vh, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(var(--drift, 0px), 120vh, 0) rotate(360deg);
  }
}

/* ========================= */
/* الحاوية */
/* ========================= */

.decoration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

/* ========================= */
/* ===== الشريط العلوي ===== */
/* ========================= */

#topBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: clamp(48px, 6vh, 64px);
  padding: 0 clamp(8px, 2vw, 20px);

  background: rgba(36, 29, 100, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(180, 160, 220, 0.2);

  color: #e0d6ff;

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 3000;
}

/* ========================= */
/* ===== أزرار الشريط ===== */
/* ========================= */

#topBar button {
  background: transparent;
  border: none;

  width: clamp(36px, 7vw, 50px);
  height: clamp(36px, 7vw, 50px);

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: clamp(18px, 3vw, 24px);
  color: #FFFFFF;

  cursor: pointer;
  border-radius: clamp(6px, 2vw, 10px);

  transition: all 0.3s ease;
  margin-top: -2px;
}

/* ========================= */
/* ===== الشعار ===== */
/* ========================= */

#topBar h1 {
  margin: 0 auto;
  font-weight: 500;
  font-size: clamp(0.85rem, 3vw, 1.3rem);
  text-align: center;

  cursor: pointer;
  user-select: none;

  text-shadow: 0 0 8px #6f5bffaa;
  transition: transform 0.3s ease, text-shadow 0.3s ease, color 0.3s ease;
}

#topBar h1:hover {
  color: #9f6fff;
  text-shadow:
    0 0 5px #6f5bff,
    0 0 10px #6f5bff,
    0 0 20px #9f6fff,
    0 0 30px #9f6fff;
  transform: scale(1.08);
}

#topBar h1:active {
  transform: scale(0.95);
}

/* ========================= */
/* ===== الرصيد ===== */
/* ========================= */

#topBar #balance {
  font-weight: 600;
  font-size: clamp(0.75rem, 2.5vw, 1rem);

  padding: clamp(5px, 1vw, 10px) clamp(8px, 2vw, 18px);
  border-radius: clamp(6px, 1vw, 12px);

  background: transparent;
  border: 1px solid transparent;

  white-space: nowrap;

  box-shadow: 0 0 clamp(6px, 1vw, 12px) rgba(122, 78, 255, 0.3);
  text-shadow: 0 0 6px #6f5bffaa;
}

/* ========================= */
/* ===== زر الرجوع ===== */
/* ========================= */

#backBtn {
  display: none; /* التحكم عبر JS */

  width: clamp(36px, 7vw, 50px);
  height: clamp(36px, 7vw, 50px);

  font-size: clamp(18px, 3vw, 24px);
  color: #6f5bffaa;

  border-radius: clamp(6px, 2vw, 10px);
  margin-right: clamp(6px, 2vw, 12px);
  margin-top: -2px;

  cursor: pointer;
  transition: all 0.3s ease;
}

/* ========================= */
/* ===== استجابة ديناميكية ===== */
/* ========================= */

/* موبايل صغير */
@media (max-width: 480px) {
  #topBar {
    height: 52px;
    padding: 0 10px;
  }

  #topBar button {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  #topBar #balance {
    font-size: 0.8rem;
    padding: 4px 8px;
  }
}

/* تابلت */
@media (min-width: 481px) and (max-width: 1024px) {
  #topBar {
    height: clamp(50px, 6vh, 60px);
    padding: 0 clamp(10px, 3vw, 16px);
  }

  #topBar button {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  #topBar #balance {
    font-size: 0.9rem;
    padding: 5px 10px;
  }
}

/* لابتوب وشاشات كبيرة */
@media (min-width: 1025px) {
  #topBar {
    height: clamp(56px, 5vh, 70px);
    padding: 0 clamp(12px, 3vw, 24px);
  }

  #topBar button {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  #topBar #balance {
    font-size: 1rem;
    padding: 6px 12px;
  }
}

/* ========================= */
/* متغير ارتفاع الشريط العلوي لكل الشاشات */
/* ========================= */
:root {
  --topbar-height: 52px; /* الحجم الافتراضي للموبايل */
}

/* ===== التاب (مثلاً من 481px إلى 1023px) ===== */
@media (min-width: 481px) and (max-width: 1023px) {
  :root {
    --topbar-height: 50px; /* ارتفاع متوسط للشريط على التاب */
  }
}

/* ===== اللابتوب ===== */
@media (min-width: 1024px) {
  :root {
    --topbar-height: 58px; /* الشريط الأكبر على اللابتوب */
  }
}

/* ========================= */
/* القائمة الجانبية (المنيو) */
/* ========================= */
/* ===== الجسم الرئيسي للمنيو ===== */
#menuContainer {
  position: fixed;
  top: var(--topbar-height);
  right: 0;
  width: 250px;
  height: calc(100vh - 53px);

  background: #241d64;
  color: #e0d9ff;
  display: flex;
  flex-direction: column;
  padding: 20px;
  z-index: 3500;
  overflow-y: auto;
  border-radius: 0;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);

  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;

  will-change: transform;
  isolation: isolate;

  scrollbar-width: thin;
  scrollbar-color: rgba(110, 68, 255, 0.27) transparent;

  border-top: 2px solid #6f5bff;
  border-left: 2px solid #6f5bff;
}

  /* Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 68, 255, 0.27) transparent;

  border-top: 2px solid #6f5bff;
  border-left: 2px solid #6f5bff;
}

/* ===== سكربار ويبكيت ===== */
#menuContainer::-webkit-scrollbar {
  width: 8px;
}
#menuContainer::-webkit-scrollbar-track {
  background: transparent;
}
#menuContainer::-webkit-scrollbar-thumb {
  background: rgba(110, 68, 255, 0.5);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ===== الحالة المفتوحة للمنيو ===== */
#menuContainer.active {
  transform: translateX(0); /* تظهر ثابتة على يمين الشاشة بدون أي حركة إضافية */
  transition: transform 0.3s ease-in-out; /* فقط حركة الفتح */
}

/* ========================= */
/* روابط المنيو ديناميكية للشاشات */
/* ========================= */

#menuContainer .menu-item {
  position: relative;
  display: flex;
  align-items: center;
  direction: rtl;

  padding:
    clamp(10px,1.2vw,14px)
    clamp(24px,2vw,30px)
    clamp(10px,1.2vw,14px)
    clamp(14px,1.5vw,18px);

  margin-bottom: clamp(8px,1vw,12px);

  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 18px);

  border-radius: 8px;
  white-space: nowrap;

  cursor: pointer;
  transition: transform 0.2s ease;
}

/* ===== بروز خفيف عند hover (فقط للأجهزة التي تدعم الماوس) ===== */
@media (hover: hover) {
  #menuContainer .menu-item:hover {
    transform: scale(1.02);
  }
}

/* ===== عند الضغط ===== */
#menuContainer .menu-item:active {
  transform: scale(0.98);
}

/* النص داخل العنصر */
#menuContainer .menu-item .menu-text {
  flex: 1;
  padding-right: clamp(8px,1vw,12px);
  text-align: right;
  font-size: inherit;
  white-space: nowrap;
}

/* الأيقونات */
#menuContainer .menu-item .icon {
  position: absolute;
  right: 0;

  min-width: clamp(26px,2vw,30px);
  margin-left: clamp(12px,1.5vw,20px);

  text-align: center;
  font-size: clamp(20px, 2vw, 24px);

  transition: color 0.3s ease;
}

/* ========================= */
/* ديناميكية حسب حجم الشاشة */
/* ========================= */

/* شاشات صغيرة – موبايل */
@media (max-width: 480px) {
  #menuContainer {
    width: 60vw; /* 60% من الشاشة */
  }

  #menuContainer .menu-item {
    padding:
      clamp(8px,2vw,10px)
      clamp(16px,4vw,20px)
      clamp(8px,2vw,10px)
      clamp(10px,3vw,14px);
    font-size: clamp(12px,4vw,16px);
  }

  #menuContainer .menu-item .icon {
    min-width: clamp(20px,4vw,24px);
    font-size: clamp(18px,4vw,22px);
    margin-left: clamp(8px,3vw,12px);
  }
}

/* شاشات متوسطة – تاب */
@media (min-width: 481px) and (max-width: 1023px) {
  #menuContainer {
    width: 30vw; /* 60% من الشاشة */
  }

  #menuContainer .menu-item {
    padding:
      clamp(10px,1.5vw,14px)
      clamp(22px,3vw,28px)
      clamp(10px,1.5vw,14px)
      clamp(14px,2vw,18px);
    font-size: clamp(14px,2vw,20px); /* تكبير نص مناسب للتاب */
  }

  #menuContainer .menu-item .icon {
    min-width: clamp(26px,2.5vw,32px);
    font-size: clamp(20px,2.2vw,26px);
    margin-left: clamp(12px,2vw,20px);
  }
}

/* ========================= */
/* شاشات كبيرة – لابتوب */
@media (min-width: 1024px) {
  #menuContainer {
    width: 350px; /* توسيع المنيو */
  }

  #menuContainer .menu-item {
    padding:
      clamp(12px,1.5vw,16px)
      clamp(28px,2.5vw,36px)
      clamp(12px,1.5vw,16px)
      clamp(18px,2vw,24px);
    font-size: clamp(16px, 1.8vw, 22px); /* تكبير النص */
  }

  #menuContainer .menu-item .icon {
    min-width: clamp(30px,2.5vw,36px); /* تكبير أيقونات */
    font-size: clamp(24px, 2.5vw, 28px);
    margin-left: clamp(14px,2vw,24px);
  }
}

/* ========================= */
/* ألوان العناصر */
/* ========================= */
#clientsBtn .icon,
#clientsBtn .menu-text {
  color: rgba(59, 130, 255, 1);
}


#addBalance .icon,
#addBalance .menu-text {
  color: rgba(255, 214, 0, 1);
}

#balanceLog .icon,
#balanceLog .menu-text {
  color: rgba(255, 152, 0, 1);
}

#purchaseLog .icon,
#purchaseLog .menu-text {
  color: rgba(79, 195, 247, 1);
}

#contactAdmin .icon,
#contactAdmin .menu-text {
  color: rgba(76, 175, 80, 1);
}

#changePassword .icon,
#changePassword .menu-text {
  color: rgba(255, 50, 50, 1);
}

#signOutBtn .icon,
#signOutBtn .menu-text {
  color: rgba(0, 0, 0, 1);
}

  font-weight: bold;
}

/* ===== أسفل القائمة ===== */

.menu-bottom {
  flex-shrink: 0;
  width: 100%;
}

/* ===== الفاصل ===== */

.menu-bottom .menu-divider {
  height: 0.5px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 12px -20px 0 -20px;
  width: calc(100% + 40px);
  border-radius: 2px;
}

/* ===== نص المتابعة ===== */

.menu-bottom .menu-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 0 0;

  font-size: clamp(16px, 2vw, 20px);

  direction: rtl;

  background: linear-gradient(
    270deg,
    #FFD600,
    #FF9800,
    #4FC3F7,
    #FF6EC4,
    #7873F5
  );

  background-size: 800% 800%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: rainbowText 10s ease infinite;
}

/* حركة النص */

@keyframes rainbowText {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}

/* ========================= */
/* أيقونة التلغرام */
/* ========================= */

.menu-follow .telegram-link {
  position: relative;
  display: inline-block; /* مهم للتفاعل */
  margin-top: 0px;
  margin-left: auto;

  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform 0.25s ease; /* نفس الفوتر */
}

.menu-follow .telegram-icon {
  width: clamp(28px,3vw,35px);
  height: clamp(28px,3vw,35px);

  cursor: pointer;
}

/* hover فقط للماوس */
@media (hover: hover) {
  .menu-follow .telegram-link:hover {
    transform: scale(1.05);
  }
}

/* عند الضغط */
.menu-follow .telegram-link:active {
  transform: scale(0.95);
}

/* خط تحت التلغرام */

.menu-bottom .telegram-divider {
  height: 0.5px;
  background-color: rgba(255, 255, 255, 0.3);

  margin: 1px -20px 0 -20px;

  width: calc(100% + 40px);

  border-radius: 2px;
}

/* ========================= */
/* أيقونة التصميم والبرمجة   */
/* ========================= */
.menu-footer-icon {
  text-align: center;
  /* مسافة متناسبة أعلى وأسفل اللوغو */
  margin: clamp(100px, 15vw, 200px) 0 clamp(100px, 15vw, 200px);
}

.footer-icon-img {
  width: clamp(120px, 20vw, 180px); /* حجم اللوغو متناسب */
  height: auto;
  cursor: pointer;
  transition: transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.footer-icon-img:hover {
  transform: scale(1.2); /* تكبير عند المرور */
}

.footer-icon-img:active {
  transform: scale(1.15); /* تكبير عند الضغط */
}

/* ========================= */
/*          الفوتر           */
/* ========================= */
.menu-footer-text {
  display: flex;
  justify-content: center;
  direction: rtl;

  margin-top: 10px;
  font-weight: bold;
  font-size: clamp(14px, 1.5vw, 16px);
  color: #fff;
}

/* ========================= */
/* روابط الفوتر التفاعلية */
/* ========================= */
.menu-footer-extra a {
  display: inline-block; /* حتى الرابط كله يلتقط الحركة */
  transition: transform 0.25s ease;
}

/* hover فقط للأجهزة التي تدعم الماوس */
@media (hover: hover) {
  .menu-footer-extra a:hover {
    transform: scale(1.05);
  }
}

/* عند الضغط */
.menu-footer-extra a:active {
  transform: scale(0.95);
}

/* ========================= */
/* خط أنيق تحت اللوجو        */
/* ========================= */
.menu-bottom .logo-divider {
  height: 0.5px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 5px -20px 10px -20px;
  width: calc(100% + 40px);
  border-radius: 2px;
}

/* ========================= */
/* نصوص الفوتر السفلية       */
/* ========================= */
.footer-text {
  text-align: center;
  color: #fff;

  margin: 0 0 20px;
  line-height: 2.4;
  font-size: clamp(12px, 1.2vw, 14px);
}

/* خط أبيض رقيق تحت نص حقوق الطبع */
.menu-bottom .footer-hr {
  height: 0.5px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: -15px -20px 0 -20px;
  width: calc(100% + 40px);
  border-radius: 2px;
}

/* نص الفيرجن */
.menu-version {
  text-align: center;
  color: #ff0000;
  font-size: clamp(12px, 1.1vw, 13px);
  margin: 5px 0 10px 0;
  font-weight: 500;
  user-select: none;
  cursor: default;
}

/* ===============================
الصفحة العامة
=============================== */
#clientsBtn {
  display: none !important;
}

#clientsPage {
  padding: 20px;
  color: #eaeaea;
  font-family: Arial, sans-serif;
  background: transparent;
}

.clients-dashboard {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===============================
الكروت (Bright Gradient Theme)
=============================== */

.clients-stats {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* الكرت الأساسي */
.clients-card {
  min-width: 170px;
  flex-shrink: 0;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  color: #fff;

  border: none;
  backdrop-filter: blur(10px);

  box-shadow: 0 0 14px rgba(122, 78, 255, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ===============================
🔗 توسيط كرت رابط الدعوة
=============================== */
.clients-invite-card {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 👈 توسيط عمودي */
  align-items: center;      /* 👈 توسيط أفقي */
  text-align: center;

  min-height: 90px;
}

/* ===============================
الألوان (كل زر لحالو)
=============================== */

/* 👤 المستخدمين (أزرق) */
#clients_users_count {
  background: linear-gradient(135deg, #3b82ff, #7a4eff);
}

/* 💰 المبلغ الكلي (أصفر) */
#clients_total_price {
  background: linear-gradient(135deg, #ffd000, #ffb300);
}

/* 📈 نسبة الربح (أخضر) */
#clients_profit_rate {
  background: linear-gradient(135deg, #00d38b, #38f27a);
}

/* 🔗 الدعوة (بنفسجي) */
.clients-invite-card {
  background: linear-gradient(135deg, #6a5cff, #7a4eff);
}

/* ===============================
🔥 التفاعل (مشترك بدون لمس الألوان)
=============================== */

.clients-invite-card,
#clients_users_count {
  border: none;

  box-shadow: 0 0 18px rgba(122, 78, 255, 0.20);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

  cursor: pointer;
}

/* Hover */
@media (hover: hover) {
  .clients-invite-card:hover,
  #clients_users_count:hover {
    transform: scale(1.08);
    box-shadow: 0 0 28px rgba(122, 78, 255, 0.35);
  }
}

/* Active */
.clients-invite-card:active,
#clients_users_count:active {
  transform: scale(0.97);
}

/* ===============================
الفلاتر (كلهم نفس الارتفاع)
=============================== */

.clients-filters {
display: flex;
gap: 10px;
align-items: flex-end;
flex-wrap: wrap;
}

/* كل عنصر */
.filter-item {
display: flex;
flex-direction: column;
flex: 1;
min-width: 150px;
}

/* العنوان فوق الحقل */
.filter-item label {
font-size: 12px;
margin-bottom: 6px;
color: rgba(255,255,255,0.75);
text-align: center;
}

/* ===============================
الفلاتر (حل مضبوط نهائي)
=============================== */

.clients-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: stretch;
}

/* كل عنصر (حقل أو زر) */
.filter-item,
#clients_search_btn {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}

/* ===============================
labels
=============================== */

.filter-item label {
font-size: 12px;
margin-bottom: 5px;
color: rgba(255,255,255,0.75);
text-align: center;
}

/* ===============================
inputs
=============================== */

.filter-item input {
height: 42px;
width: 100%;

padding: 0 10px;

border: 1px solid #6f5bff;
border-radius: 12px;

background: transparent;
color: #fff;

text-align: center;
outline: none;
}

/* ===============================
زر البحث (نفس ارتفاع الحقول تمامًا)
=============================== */

#clients_search_btn {
height: 42px; /* 🔥 مهم جدًا /
margin-top: 22px; / 🔥 يعوّض مكان الـ label */

border: 1px solid #6f5bff;
border-radius: 12px;

background: transparent;
color: #fff;

cursor: pointer;

display: flex;
align-items: center;
justify-content: center;

transition: 0.2s;
}

/* ===============================
📱 موبايل (2 + 2 بدون كسر)
=============================== */

@media (max-width: 768px) {

.clients-filters {
flex-wrap: wrap;
}

.filter-item,
#clients_search_btn {
flex: 0 0 calc(50% - 5px);
}

/* نخلي زر البحث ينزل تحت label بشكل متوازن */
#clients_search_btn {
margin-top: 22px;
}
}

/* ===============================
الجدول
=============================== */

.clients-table-wrapper {
width: 100%;
overflow: auto;
border: 2px solid #6f5bff;
background: transparent;
}

.clients-table {
width: 100%;
min-width: 800px;
border-collapse: collapse;
text-align: center;
font-size: 12px;
}

.clients-table thead {
position: sticky;
top: 0;
background: #241d64;
border-bottom: 2px solid #6f5bff;
}

.clients-table th,
.clients-table td {
border: 1px solid #6f5bff;
padding: 8px;
color: #fff;
}

.clients-table tbody tr:hover td {
background: rgba(122, 78, 255, 0.25);
}

/* حالات */
.status-approved { color: #4caf50; font-weight: bold; }
.status-pending  { color: #ff9800; font-weight: bold; }
.status-rejected { color: #f44336; font-weight: bold; }

/* إخفاء السكرول */
.clients-table-wrapper::-webkit-scrollbar {
display: none;
}

.clients-table-wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
}

/* =========================
   👥 Users Popup Overlay
========================= */
.users-popup-overlay {
  position: fixed;
  inset: 0;

  background: #000000cc;
  backdrop-filter: blur(6px);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;
  animation: fadeIn 0.2s ease;
}

/* =========================
   🪟 Popup Box
========================= */
.users-popup {
  width: 92%;
  max-width: 440px;
  max-height: 75vh;
  overflow: hidden;

  background: linear-gradient(135deg, #1e6bff, #1e6bff);

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.15);

  box-shadow: 0 0 25px rgba(30, 107, 255, 0.35);

  padding: 18px;
  color: #fff;

  display: flex;
  flex-direction: column;
  gap: 12px;

  animation: popIn 0.25s ease;

  isolation: isolate;
}

/* =========================
   🟣 العنوان
========================= */
.users-popup h3 {
  margin: 0;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
  letter-spacing: 1px;
}

/* =========================
   🔍 البحث
========================= */
.users-search {
  padding: 10px;
  border-radius: 10px;
  outline: none;

  background: rgba(30, 107, 255, 0.25);
  border: 1px solid rgba(255,255,255,0.15);

  color: #fff;
}

.users-search::placeholder {
  color: #e0e7ff;
}

/* =========================
   📜 قائمة المستخدمين
========================= */
.users-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;

  border-radius: 10px;

  background: rgba(30, 107, 255, 0.15);

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.users-list::-webkit-scrollbar {
  width: 6px;
}

.users-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
}

/* =========================
   👤 المستخدم
========================= */
.user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px;
  margin-bottom: 6px;

  border-radius: 10px;

  background: rgba(30, 107, 255, 0.25);
  border: 1px solid rgba(255,255,255,0.12);

  font-size: 14px;
  color: #fff;
}

/* =========================
   💰 زر إضافة رصيد
========================= */
.add-balance-btn {
  padding: 6px 10px;
  border-radius: 8px;

  font-size: 12px;
  cursor: pointer;

  background: linear-gradient(135deg, #1e6bff, #1e6bff);

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: #fff;

  transition: 0.2s;
}

.add-balance-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 15px rgba(30, 107, 255, 0.5);
}

/* =========================
   ❌ زر الإغلاق
========================= */
#closeUsersPopup {
  padding: 10px;
  border-radius: 10px;

  background: rgba(30, 107, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);

  color: #fff;
  cursor: pointer;

  font-weight: bold;

  transition: 0.2s;
}

#closeUsersPopup:hover {
  transform: scale(1.05);
  background: rgba(30, 107, 255, 0.35);
  box-shadow: 0 0 10px rgba(30, 107, 255, 0.3);
}

#closeUsersPopup:active {
  transform: scale(0.97);
}

/* =========================
   ✨ Animations
========================= */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =========================
   🧼 Fix mobile tap (FINAL CLEAN)
========================= */

.add-balance-btn,
#closeUsersPopup {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.add-balance-btn:focus,
#closeUsersPopup:focus {
  outline: none;
  box-shadow: none;
}

/* =========================
   📱 Mobile interaction fix
========================= */
@media (hover: none) and (pointer: coarse) {

  .add-balance-btn:hover,
  #closeUsersPopup:hover {
    transform: none;
    box-shadow: none;
  }

  .add-balance-btn:active,
  #closeUsersPopup:active {
    transform: scale(0.96);
    opacity: 0.92;
    transition: transform 0.1s cubic-bezier(.2,.9,.2,1);
  }
}

/* ========================= */
/* 13. صفحة طلب إضافة رصيد    */
/* ========================= */

/* ===== الجسم الرئيسي ===== */
.balance-page {
  min-height: 100vh;
  background-color: #241d64;
  padding: 10px 20px 5vh 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  font-family: 'Tajawal', sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.balance-page::-webkit-scrollbar {
  display: none;
}

/* ===== عنوان الصفحة ===== */
.balance-title {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: bold;
  color: #fff;
  margin: clamp(12px, 2vw, 20px) auto;
  text-align: center;
}

/* ===== الحاوية التي تضم خيارات الرصيد ===== */
.balance-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 30%, 180px), 1fr));
  justify-content: center;
  align-items: start;
  gap: clamp(30px, 5vw, 60px);
  padding: 0 clamp(15px, 5vw, 30px);
  max-width: 1200px;
  margin: 0 auto clamp(50px, 5vw, 70px) auto;
  box-sizing: border-box;
}

/* ===== كل خيار رصيد ===== */
.balance-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: clamp(16px, 2.5vw, 26px);
  transition: transform 0.3s ease; /* حركة سلسة فقط */
  perspective: 800px;
}

/* ===== Hover + Focus (تكبير بسيط فقط) ===== */
.balance-option:hover,
.balance-option:focus {
  transform: scale(1.05);
}

/* ===== الصورة داخل الخيار ===== */
.balance-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.3s ease; /* بدون ضوء */
}

/* ===== النص ===== */
.option-label {
  margin-top: clamp(6px, 1.5vw, 10px);
  font-weight: bold;
  font-size: clamp(0.95rem, 2.5vw, 1.3rem);
  color: #fff;
  text-align: center;
  background: transparent;
  transition: transform 0.3s ease; /* حركة بسيطة */
}

/* ===== استجابة الموبايل ===== */
@media (max-width: 600px) {
  .balance-options {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(40px, 10vw, 60px);
    padding: 0 20px;
    justify-items: center;
  }

  .balance-option {
    width: clamp(120px, 35vw, 140px);
  }

  .option-label {
    font-size: clamp(0.95rem, 3vw, 1rem);
  }

  .balance-page {
    padding-bottom: 10vh;
  }
}

/* ===== شاشات كبيرة ===== */
@media (min-width: 1024px) {
  .balance-options {
    grid-template-columns: repeat(5, 1fr); /* 5 عناصر بالصف */
    gap: 50px; /* نخلي المسافة ثابتة بدون زيادة */
  }

  .balance-option {
    width: clamp(140px, 20vw, 200px); /* حجم أكبر وأكثر ديناميكية */
    max-width: 200px;
    aspect-ratio: 1/1;
  }

  .option-label {
    font-size: clamp(1.2rem, 1.8vw, 1.3rem); /* تكبير النص بشكل ديناميكي */
  }

  .balance-option img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
  }
}

/* ========================= */
/* صفحة MTN لطلب الرصيد     */
/* ========================= */
#mtnCashPage {
  position: fixed;
  top: clamp(50px, 6vh, 60px);
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(16px, 6vh, 40px);
  background-color: #241d64;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  color: #e0d6ff;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
}

#mtnCashPage::-webkit-scrollbar {
  display: none;
}

/* صندوق طلب الرصيد */
#mtnCashPage .balance-request-box {
  width: 100%;
  max-width: clamp(300px, 40vw, 400px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vw, 15px);
  text-align: center;
  background: transparent !important;
  box-shadow: none !important;
}

/* البريد الإلكتروني */
#mtnCashPage .user-email {
  width: 100%;
  margin-top: clamp(10px, 2vw, 20px); /* 👈 أضفنا مسافة فوق البريد */
  margin-bottom: clamp(6px, 1.5vw, 10px);
  font-weight: 700;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: #d9cffb;
  text-align: center;
}

/* تنبيه التحويل */
#transferNoticeMTN {
  width: 100%;
  margin-bottom: clamp(8px, 2vw, 10px);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.2vw, 1rem);
  color: #ff0000;
  text-align: center;
}

#transferNoticeMTN .white-text {
  color: #ffffff !important;
}

/* ========================= */
/* أكواد النسخ - ضبط الرقم مع الزر عمودياً */
#mtnCashPage .copy-box {
  width: 100%;
  max-width: clamp(220px, 45vw, 300px);
  display: flex;
  flex-direction: row-reverse; /* زر النسخ يمين */
  align-items: center; /* وسط الرقم وزر النسخ عمودي */
  justify-content: center; /* الرقم وزر النسخ في المنتصف */
  gap: clamp(6px, 1.5vw, 10px);
  padding: clamp(8px, 2vw, 12px) clamp(10px, 3vw, 16px);
  margin: 0 auto clamp(8px, 2vw, 10px);
  border-radius: clamp(12px, 2vw, 16px);
  background: rgba(122, 78, 255, 0.15);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.3s ease;
}

#mtnCashPage .copy-box:hover {
  background: rgba(122, 78, 255, 0.35);
}

#mtnCashPage .copy-box span {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: #ffffff !important;
  display: flex;
  align-items: center;       /* وسط الرقم عمودي */
  justify-content: center;   /* وسط الرقم أفقياً */
  line-height: 1;
  vertical-align: middle;
  user-select: text;
  margin-top: clamp(2px, 1vh, 4px);
}

/* زر النسخ ثابت بدون تأثير */
#mtnCashPage .copy-box button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1vw, 6px) clamp(12px, 2.8vw, 16px);
  margin: 0;
  line-height: 1;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
  background: linear-gradient(135deg, #6f5bff, #9f86ff);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 6px 18px rgba(122, 78, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition: none !important;
}

#mtnCashPage .copy-box button:hover,
#mtnCashPage .copy-box button:active,
#mtnCashPage .copy-box button:focus-visible {
  transform: none !important;
  filter: none !important;
  box-shadow: 0 6px 18px rgba(122, 78, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

/* الحقول */
#mtnCashPage label {
  width: 100%;
  margin-bottom: clamp(4px, 1vw, 6px);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  color: #d9cffb;
  text-align: center;
}

#mtnCashPage input[type="number"] {
  width: 100%;
  max-width: clamp(280px, 40vw, 320px);
  margin: 0 auto clamp(10px, 2vw, 15px);
  padding: clamp(8px, 1.5vw, 12px);
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  color: #e6dbff;
  background: transparent;
  border: 1.8px solid #6f5bff;
  border-radius: clamp(8px, 1.5vw, 10px);
  outline: none;
  transition: border-color 0.3s ease;
}

#mtnCashPage input[type="number"]:focus {
  border-color: #c0c0c0;
}

/* ========================= */
/*      زر إرسال MTN        */
/* ========================= */
#mtnCashPage #submitRequestBtnMTN {
  width: 100%;
  max-width: clamp(280px, 45vw, 340px);
  margin: clamp(8px, 2vw, 10px) auto 0;
  padding: clamp(8px, 2vw, 10px) 0;
  font-size: clamp(0.95rem, 2.2vw, 1rem);
  color: #4caf50;
  background: transparent;
  border: 1px solid #6f5bff;
  border-radius: clamp(12px, 2vw, 14px);
  cursor: pointer;
  box-shadow: none !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* hover و focus */
#mtnCashPage #submitRequestBtnMTN:hover,
#mtnCashPage #submitRequestBtnMTN:focus {
  color: #4caf50;
  border-color: #6f5bff;
  outline: none;
}

/* الضغط أو أثناء التحميل */
#mtnCashPage #submitRequestBtnMTN:active,
#mtnCashPage #submitRequestBtnMTN.loading {
  color: #ccc;
  border-color: #ccc;
}

/* ===== تعطيل الزر ===== */
#mtnCashPage #submitRequestBtnMTN:disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: #666;
  border-color: #666;
}

/* استجابة الموبايل */
@media (max-width: 600px) {
  #mtnCashPage {
    padding: clamp(6px, 2vw, 15px);
  }

  #mtnCashPage .balance-request-box {
    max-width: 100%;
    gap: clamp(8px, 2vw, 12px);
  }

/* ضبط حجم زر الإرسال على الموبايل */
  #mtnCashPage #submitRequestBtnMTN {
    max-width: clamp(280px, 45vw, 340px);
    padding: clamp(8px, 2vw, 10px) 0;
    font-size: clamp(0.95rem, 2.2vw, 1rem);
  }
}

/* ========================= */
/* صفحة Syriatel لطلب الرصيد */
/* ========================= */
#syriatelCashPage {
  position: fixed;
  top: clamp(50px, 6vh, 60px);
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(8px, 2vw, 20px);
  padding-bottom: clamp(16px, 6vh, 40px);
  background-color: #241d64;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  color: #e0d6ff;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
}

#syriatelCashPage::-webkit-scrollbar {
  display: none;
}

/* صندوق طلب الرصيد */
#syriatelCashPage .balance-request-box {
  width: 100%;
  max-width: clamp(300px, 40vw, 400px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vw, 15px);
  text-align: center;
  background: transparent !important;
  box-shadow: none !important;
}

/* البريد الإلكتروني */
#syriatelCashPage .user-email {
  width: 100%;
  margin-top: clamp(10px, 2vw, 20px); /* 👈 أضفنا مسافة فوق البريد */
  margin-bottom: clamp(6px, 1.5vw, 10px);
  font-weight: 700;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: #d9cffb;
  text-align: center;
}

/* تنبيه التحويل */
#transferNoticeSyriatel {
  width: 100%;
  margin-bottom: clamp(8px, 2vw, 10px);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.2vw, 1rem);
  color: #ff0000;
  text-align: center;
}

#transferNoticeSyriatel .white-text {
  color: #ffffff !important;
}

/* ========================= */
/* أكواد النسخ - ضبط الرقم مع الزر عمودياً */
#syriatelCashPage .copy-box {
  width: 100%;
  max-width: clamp(220px, 45vw, 300px);
  display: flex;
  flex-direction: row-reverse; /* زر النسخ يمين */
  align-items: center; /* وسط الرقم وزر النسخ عمودي */
  justify-content: center; /* الرقم وزر النسخ في المنتصف */
  gap: clamp(6px, 1.5vw, 10px);
  padding: clamp(8px, 2vw, 12px) clamp(10px, 3vw, 16px);
  margin: 0 auto clamp(8px, 2vw, 10px);
  border-radius: clamp(12px, 2vw, 16px);
  background: rgba(122, 78, 255, 0.15);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.3s ease;
}

#syriatelCashPage .copy-box:hover {
  background: rgba(122, 78, 255, 0.35);
}

#syriatelCashPage .copy-box span {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: #ffffff !important;
  display: flex;
  align-items: center;       /* وسط الرقم عمودي */
  justify-content: center;   /* وسط الرقم أفقياً */
  line-height: 1;
  vertical-align: middle;
  user-select: text;
  margin-top: clamp(2px, 1vh, 4px); /* نزول الرقم شوي لتناسب الزر */
}

/* زر النسخ ثابت بدون تأثير */
#syriatelCashPage .copy-box button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1vw, 6px) clamp(12px, 2.8vw, 16px);
  margin: 0;
  line-height: 1;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
  background: linear-gradient(135deg, #6f5bff, #9f86ff);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 6px 18px rgba(122, 78, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition: none !important;
}

#syriatelCashPage .copy-box button:hover,
#syriatelCashPage .copy-box button:active,
#syriatelCashPage .copy-box button:focus-visible {
  transform: none !important;
  filter: none !important;
  box-shadow: 0 6px 18px rgba(122, 78, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

/* الحقول */
#syriatelCashPage label {
  width: 100%;
  margin-bottom: clamp(4px, 1vw, 6px);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  color: #d9cffb;
  text-align: center;
}

#syriatelCashPage input[type="number"] {
  width: 100%;
  max-width: clamp(280px, 40vw, 320px);
  margin: 0 auto clamp(10px, 2vw, 15px);
  padding: clamp(8px, 1.5vw, 12px);
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  color: #e6dbff;
  background: transparent;
  border: 1.8px solid #6f5bff;
  border-radius: clamp(8px, 1.5vw, 10px);
  outline: none;
  transition: border-color 0.3s ease;
}

#syriatelCashPage input[type="number"]:focus {
  border-color: #c0c0c0;
}

/* ========================= */
/*      زر إرسال Syriatel   */
/* ========================= */
#syriatelCashPage #submitRequestBtnSyriatel {
  width: 100%;
  max-width: clamp(280px, 45vw, 340px);
  margin: clamp(8px, 2vw, 10px) auto 0;
  padding: clamp(8px, 2vw, 10px) 0;
  font-size: clamp(0.95rem, 2.2vw, 1rem);
  color: #4caf50;
  background: transparent;
  border: 1px solid #6f5bff;
  border-radius: clamp(12px, 2vw, 14px);
  cursor: pointer;
  box-shadow: none !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* hover و focus */
#syriatelCashPage #submitRequestBtnSyriatel:hover,
#syriatelCashPage #submitRequestBtnSyriatel:focus {
  color: #4caf50;
  border-color: #6f5bff;
  outline: none;
}

/* الضغط أو أثناء التحميل */
#syriatelCashPage #submitRequestBtnSyriatel:active,
#syriatelCashPage #submitRequestBtnSyriatel.loading {
  color: #ccc;
  border-color: #ccc;
}

/* ===== تعطيل الزر ===== */
#syriatelCashPage #submitRequestBtnSyriatel:disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: #666;
  border-color: #666;
}

#syriatelCashPage #submitRequestBtnSyriatel:disabled {
  cursor: not-allowed;
  color: #666666 !important; /* يبقى رمادي إذا معطل */
  border-color: #666666 !important;
}

/* استجابة الموبايل */
@media (max-width: 600px) {
  #syriatelCashPage {
    padding: clamp(6px, 2vw, 15px);
  }

  #syriatelCashPage .balance-request-box {
    max-width: 100%;
    gap: clamp(8px, 2vw, 12px);
  }

/* ضبط حجم زر الإرسال على الموبايل */
  #syriatelCashPage #submitRequestBtnSyriatel {
    max-width: clamp(280px, 45vw, 340px);
    padding: clamp(8px, 2vw, 10px) 0;
    font-size: clamp(0.95rem, 2.2vw, 1rem);
  }
}

/* ===============================
   الصفحة العامة
=============================== */

#chargeLogSection,
#requestLogPage {
  padding: 20px;
  color: #eaeaea;
  font-family: Arial, sans-serif;
  background: transparent;
}

.charge-page,
.balance-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===============================
   الفلاتر
=============================== */

.charge-filters,
#requestLogPage .date-filter-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0; /* 🔥 حذف البادينغ القديم */
}

/* الحقول */
.charge-filters .filter-item,
#requestLogPage .filter-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* label */
.charge-filters .filter-item label,
#requestLogPage .filter-item label {
  font-size: 12px;
  margin-bottom: 5px;
  color: rgba(255,255,255,0.75);
  text-align: center;
}

/* input + select */
.charge-filters .filter-item input,
.charge-filters .filter-item select,
#requestLogPage .filter-item input,
#requestLogPage .filter-item select {
  height: 42px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid #6f5bff;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  text-align: center;
  outline: none;
}

/* ===============================
   زر البحث
=============================== */

#chargeLogSearchBtn,
#requestLogPage #searchBtn {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 1px solid #6f5bff;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
  margin-top: 0;
  box-sizing: border-box;
}

/* ===============================
   📱 موبايل
=============================== */

@media (max-width: 768px) {

  .charge-filters,
  #requestLogPage .date-filter-container {
    flex-wrap: wrap;
  }

  .charge-filters .filter-item,
  #chargeLogSearchBtn,
  #requestLogPage .filter-item,
  #requestLogPage #searchBtn {
    flex: 1 1 48%;
    box-sizing: border-box;
  }

  #chargeLogSearchBtn,
  #requestLogPage #searchBtn {
    width: 100%;
    height: 42px;
  }
}

/* ===============================
   الجدول
=============================== */

.charge-table-container,
#requestLogPage .table-container {
  width: 100%;
  overflow: auto;
  border: 2px solid #6f5bff;
  background: transparent;
}

.charge-table,
#requestLogPage table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  text-align: center;
  font-size: 12px;
}

.charge-table thead,
#requestLogPage thead {
  position: sticky;
  top: 0;
  background: #241d64;
  border-bottom: 2px solid #6f5bff;
}

.charge-table th,
.charge-table td,
#requestLogPage th,
#requestLogPage td {
  border: 1px solid #6f5bff;
  padding: 8px;
  color: #fff;
}

.charge-table tbody tr:hover td,
#requestLogPage tbody tr:hover td {
  background: rgba(122, 78, 255, 0.25);
}

/* ===============================
   حالات
=============================== */

.status-approved { color: #4caf50; font-weight: bold; }
.status-pending  { color: #ff9800; font-weight: bold; }
.status-rejected { color: #f44336; font-weight: bold; }

.status-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;

  direction: rtl; /* 🔥 يخلي النص عربي صح */
  flex-direction: row-reverse; /* 🔥 الأيقونة تصير يسار */
}

.status-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  font-variation-settings: 'wght' 700, 'FILL' 1;
}

.status-text {
  line-height: 1;
}

/* ===============================
   scrollbar
=============================== */

.charge-table-container::-webkit-scrollbar,
#requestLogPage .table-container::-webkit-scrollbar {
  display: none;
}

.charge-table-container,
#requestLogPage .table-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== الغطاء الخلفي للنموذج ===== */
.password-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* خلفية شفافة */
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* يمنع التفاعل قبل الإظهار */
}

.password-overlay.show {
  opacity: 1;
  pointer-events: auto; /* يصبح قابل للنقر */
}

/* ===== نافذة التوست (نافذة الخروج) ===== */
.password-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  min-width: 300px;
  max-width: 90%;
  padding: 20px;
  background: #241d64; /* لون موقعك */
  color: #fff;
  border-radius: 10px;
  border: 2px solid #6f5bff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 10000;
  text-align: center;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.25,1,0.5,1), opacity 0.5s ease;
  pointer-events: none; /* مخفية وغير قابلة للتفاعل */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.password-toast.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto; /* عند العرض تصبح قابلة للنقر */
}

/* ===== نص النافذة ===== */
.password-toast p {
  margin: 0;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
}

/* ===== حاوية الأزرار لجميع النوافذ ===== */
.password-buttons,
.logout-buttons {
  display: flex;
  justify-content: center; /* ترتيب أفقي */
  align-items: center;     /* وسط عمودي */
  gap: clamp(10px, 2vw, 20px); /* مسافة بين الأزرار */
  flex-wrap: wrap; /* لتناسب الشاشات الصغيرة */
  width: 100%;
}

/* ===== الأزرار ===== */
.password-buttons button,
.logout-buttons button {
  padding: clamp(10px, 2vw, 14px) clamp(20px, 4vw, 24px);
  border: none;
  border-radius: clamp(6px, 2vw, 10px);
  cursor: pointer;
  font-weight: bold;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: #fff;
  width: clamp(120px, 40%, 160px); /* ديناميكي حسب الشاشة */
}

/* زر التأكيد - أخضر */
.password-buttons button.confirm,
.logout-buttons button.confirm {
  background-color: #388e3c;
}

/* زر الإلغاء - أحمر */
.password-buttons button.cancel,
.logout-buttons button.cancel {
  background-color: #c62828;
}

/* ========================= */
/*  الشريط الزجاجي فوق الأقسام */
/* ========================= */
#sectionsPage .sections-header {
  position: relative;
  width: 100vw;

  /* حجم ديناميكي */
  height: clamp(40px, 5vh, 50px);
  min-height: clamp(40px, 5vh, 50px);

  margin: -15px 0 clamp(15px,3vh,30px) 0;
  padding: 0;

  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-weight: 500;
  color: #fff;

  /* تأثير الزجاج */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  border: none;
  border-radius: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  display: flex;
  align-items: center;
  justify-content: flex-start;

  box-sizing: border-box;
  overflow: hidden;
  line-height: 1;
}

/* ========================= */
/* النص المتحرك */
/* ========================= */
#sectionsHeaderTitle {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* النص نفسه */
#sectionsHeaderTitle span {
  display: inline-block;
  padding-left: 100%;

  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1;

  transform: translateX(-100%);
  animation: slideLeftToRight 14s linear infinite;
}

/* ========================= */
/* حركة النص */
/* ========================= */
@keyframes slideLeftToRight {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ========================= */
/*      الصفحة العامة للأقسام الرئيسية        */
/* ========================= */
#sectionsPage .balance-page {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  padding: 80px 20px 5vh 20px; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#sectionsPage .balance-page::-webkit-scrollbar {
  display: none;
}

/* ===== الشبكة ===== */
#sectionsPage .balance-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: start;
  gap: clamp(40px, 5vw, 60px);
  padding: 0 30px;
  max-width: 1200px;
  margin: 0 auto 30px auto;
  box-sizing: border-box;
}

/* ===== كل قسم ===== */
#sectionsPage .balance-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: clamp(20px, 2.5vw, 26px);
  transition: transform 0.3s ease; /* حركة سلسة فقط */
  perspective: 800px;
}

/* ===== Hover + Focus (تكبير بسيط فقط) ===== */
#sectionsPage .balance-option:hover,
#sectionsPage .balance-option:focus {
  transform: scale(1.05);
}

/* ===== الصورة ===== */
#sectionsPage .balance-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.3s ease; /* بدون أي ضوء */
}

/* ===== النصوص ===== */
#sectionsPage .option-label {
  margin-top: 10px;
  font-weight: bold;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  color: #fff;
  background: transparent;
  text-align: center;
  transition: transform 0.3s ease; /* حركة بسيطة */
}

/* ===== استجابة الموبايل ===== */
@media (max-width: 600px) {
  #sectionsPage .balance-page {
    padding-bottom: 10vh;
  }

  #sectionsPage .balance-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding: 0;
  }

  #sectionsPage .balance-option {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1/1;
  }

  #sectionsPage .balance-option img {
    border-radius: 12px;
  }

  #sectionsPage .option-label {
    font-size: 1rem;
  }
}

/* ===== الشاشات الكبيرة ===== */
@media (min-width: 1024px) {
  #sectionsPage .balance-page {
    padding-bottom: 5vh;
  }

  #sectionsPage .balance-options {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(40px, 5vw, 60px); /* ديناميكي عند تغير حجم الشاشة */
  }

  #sectionsPage .balance-option {
    width: clamp(140px, 18vw, 220px); /* حجم أكبر وأكثر ديناميكية */
    max-width: 220px;
    aspect-ratio: 1/1;
  }

  #sectionsPage .option-label {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem); /* أكبر شوي للنصوص */
  }

  #sectionsPage .balance-option img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ========================= */
/*  نافذة تأكيد إرسال الطلب  */
/* ========================= */
#confirmPurchasePopup.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* ===== جسم النافذة ===== */
#confirmPurchasePopup .popup {
  position: relative;
  width: clamp(280px, 35vw, 420px);
  text-align: center;
  border-radius: 12px;
  background: #241d64;
  padding: clamp(18px, 2.5vw, 28px);
  color: #fff;
  box-sizing: border-box;
  direction: rtl;
  font-size: clamp(14px, 1.5vw, 18px);

  /* إطار نيون */
  border: 2px solid transparent;
  background-clip: padding-box;
  z-index: 1;
}

#confirmPurchasePopup .popup::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(
    270deg,
    #ff0055,
    #ff9900,
    #00ffcc,
    #0055ff,
    #ff00ff,
    #ff0055
  );
  background-size: 600% 600%;
  animation: neonBorder 8s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* ===== عنوان النافذة ===== */
#confirmPurchasePopup .popup-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: bold;
  color: #fff;
  margin-bottom: clamp(15px, 2.5vw, 22px);
}

/* ===== نص السؤال ===== */
#confirmPurchasePopup p {
  color: #ff3333;
  font-size: clamp(16px, 1.6vw, 20px);
  margin-bottom: clamp(18px, 2.5vw, 22px);
  font-weight: bold;
}

/* ===== حركة الإطار النيوني ===== */
@keyframes neonBorder {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 50%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========================= */
/*  أزرار النافذة           */
/* ========================= */
#confirmPurchasePopup .popup-buttons {
  display: flex;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 16px);
}

/* زر عام */
#confirmPurchasePopup .popup-btn {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;

  font-weight: bold;
  font-size: clamp(15px, 1.6vw, 20px);
  height: clamp(44px, 5vw, 50px);
  border-radius: 12px;

  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1.8px solid #6f5bff;
  outline: none;
  box-shadow: none;

  transition: color 0.15s ease, border-color 0.15s ease;
}

/* ===== زر التأكيد ===== */
#confirmPurchasePopup .popup-send {
  color: #00ff66;
}

#confirmPurchasePopup .popup-send:hover {
  color: #00ff66;
}

#confirmPurchasePopup .popup-send:focus,
#confirmPurchasePopup .popup-send:active {
  color: #ccc;
  border-color: #ccc;
}

/* ===== زر الإلغاء ===== */
#confirmPurchasePopup .popup-cancel {
  color: #ffb347;
}

#confirmPurchasePopup .popup-cancel:hover {
  color: #ffb347;
}

#confirmPurchasePopup .popup-cancel:focus,
#confirmPurchasePopup .popup-cancel:active {
  color: #ccc;
  border-color: #ccc;
}

/* ===== تعطيل الأزرار ===== */
#confirmPurchasePopup .popup-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: #666;
  border-color: #666;
}

/* ===== حاوية البحث + لمعة ===== */
.searchContainer {
  display: block;             
  width: 100%;
  text-align: center;         
  margin: -10px auto 10px auto;
  padding-bottom: 25px;        
}

.searchContainer .inputWrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 600px;
  border-radius: 25px;
  overflow: hidden; /* ضروري لللمعة */
  background: rgba(255,255,255,0.1);
}

/* ===== شريط البحث ===== */
.searchContainer input {
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  color: #fff;
  outline: none;
  text-align: center;
  background: transparent; /* شفافية داخل wrapper */
  position: relative;
  z-index: 1; /* فوق اللمعة */
}

/* ===== نص placeholder ===== */
.searchContainer input::placeholder {
  color: #ccc;
  text-align: center;
}

/* ===== لمعة متطورة 🔥 ===== */
.searchContainer .inputWrapper::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 70%;
  height: 200%;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(185,156,255,0.15) 30%,
    rgba(255,255,255,0.6) 50%,
    rgba(185,156,255,0.15) 70%,
    rgba(255,255,255,0) 100%
  );

  transform: skewX(-25deg);
  filter: blur(8px); /* ✨ نعومة احترافية */

  animation: shine 5s ease-in-out infinite;

  pointer-events: none;
  z-index: 2;
  opacity: 0.8;
  transition: opacity 0.3s;
}

/* ===== اختفاء اللمعة عند التركيز ===== */
.searchContainer .inputWrapper:focus-within::after {
  opacity: 0;
}

/* ===== حركة ناعمة ===== */
@keyframes shine {
  0% {
    left: -100%;
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    left: 130%;
    opacity: 0;
  }
}

/* ========================= */
/*      الصفحة العامة لكل المنتجات        */
/* ========================= */
.sectionPage .balance-page {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  padding: 80px 20px 5vh 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sectionPage .balance-page::-webkit-scrollbar {
  display: none;
}

/* ===== الشبكة ===== */
.sectionPage .balance-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: start;
  gap: clamp(40px, 5vw, 60px);
  padding: 0 30px;
  max-width: 1200px;
  margin: 0 auto 30px auto;
  box-sizing: border-box;
}

/* ===== عنصر واحد ===== */
.sectionPage .balance-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: clamp(20px, 2.5vw, 26px);
  transition: transform 0.3s ease; /* بس حركة سلسة بدون ضوء */
  perspective: 800px;
}

/* ===== Hover + Focus (حركة سلسة فقط) ===== */
.sectionPage .balance-option:hover,
.sectionPage .balance-option:focus {
  transform: scale(1.05); /* حركة بسيطة تكبر العنصر */
}

/* ===== الصورة ===== */
.sectionPage .balance-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.3s ease; /* بدون ضوء */
}

/* ===== النص ===== */
.sectionPage .option-label {
  margin-top: 10px;
  font-weight: bold;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  color: #fff;
  text-align: center;
  background: transparent;
  transition: transform 0.3s ease; /* حركة بسيطة */
}

/* ===== موبايل ===== */
@media (max-width: 600px) {
  .sectionPage .balance-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px 50px;
    padding: 0 20px;
    justify-items: center;
  }

  .sectionPage .balance-option {
    aspect-ratio: 1/1;
    width: 90px;
  }

  .sectionPage .balance-option img {
    border-radius: 12px;
  }

  .sectionPage .option-label {
    font-size: 0.85rem;
    padding: 4px 0;
  }

  .sectionPage .balance-page {
    padding-bottom: 10vh;
  }
}

/* ===== شاشات كبيرة ===== */
@media (min-width: 1024px) {
  .sectionPage .balance-options {
    grid-template-columns: repeat(5, 1fr); /* 5 عناصر بالصف */
    gap: clamp(60px, 6vw, 60px);
    max-width: calc(5 * 220px + 4 * 60px); /* 5 عناصر + 4 فجوات */
    margin: 0 auto; /* يوسّط الشبكة بالصفحة */
    justify-content: center; /* تأكيد التوسيط */
  }

  .sectionPage .balance-option {
    width: 220px; /* تثبيت عرض العنصر */
    aspect-ratio: 1/1;
  }

  .sectionPage .option-label {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem); /* تكبير النص بشكل ديناميكي */
  }
}

/* ========================= */
/* المنتجات غير المتوفرة */
/* ========================= */
.balance-option.unavailable img {
  filter: grayscale(100%);
}

/* ========================= */
/*       نافذة الطلب        */
/* ========================= */
#gameRequestPopup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ===== محتوى النافذة ===== */
#gameRequestPopup .popup {
  position: relative;
  width: clamp(280px, 80%, 400px);
  text-align: center;
  border-radius: 10px;
  background: #241d64;
  padding: clamp(15px, 2vw, 25px);
  color: #fff;
  box-sizing: border-box;
  direction: rtl;
  font-size: clamp(14px, 1.5vw, 16px);
  border: 2px solid transparent;
  background-clip: padding-box;
  z-index: 1;
}

/* ===== إطار نيون للنافذة ===== */
#gameRequestPopup .popup::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(270deg, #ff0055, #ff9900, #00ffcc, #0055ff, #ff00ff, #ff0055);
  background-size: 600% 600%;
  animation: neonBorder 8s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

@keyframes neonBorder {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 50%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== عنوان النافذة ===== */
#gameRequestPopup .popup-title {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: bold;
  background: linear-gradient(270deg, #ff0055, #ff9900, #00ffcc, #0055ff, #ff00ff, #ff0055);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: neonTitle 8s ease infinite;
  margin-bottom: clamp(10px, 1.5vw, 15px);
}

@keyframes neonTitle {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 50%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== حقول الإدخال ===== */
.input-field {
  width: 100%;
  padding: clamp(8px, 1.2vw, 10px);
  margin: clamp(8px, 1.2vw, 10px) 0;
  border-radius: 10px;
  border: 1.8px solid #6f5bff;
  background: #241d64;
  color: #fff;
  caret-color: #fff; /* مؤشر الكتابة أبيض */
  text-align: center;
  box-sizing: border-box;
  transition: border 0.3s ease;
}

.input-field:focus:not([readonly]):not([disabled]) {
  border-color: #c0c0c0;
  outline: none;
}

/* ===== قائمة الفئات المنبثقة ===== */
.custom-select { position: relative; width: 100%; }

#categoryToggle {
  cursor: pointer;
  user-select: none;
  padding: clamp(6px, 1vw, 10px);
  border-radius: 10px;
  border: 1.8px solid #6f5bff;
  background: #241d64;
  color: #fff;
  text-align: center;
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  transition: border-radius 0.2s, padding 0.2s;
  font-size: clamp(13px, 1.3vw, 16px);
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}

#categoryToggle.open { border-radius: 10px 10px 0 0; }

#categoryToggle.open::after {
  content: '';
  position: absolute;
  bottom: -1.8px;
  left: 0; right: 0;
  height: 1.8px;
  background: #6f5bff;
}

.category-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 1.8px);
  right: 0; left: 0;

  /* الحد الأقصى حسب الشاشة */
  max-height: 180px; /* افتراضي للابتوب */
  overflow-y: auto;

  background: #241d64;
  border: 1.8px solid #6f5bff;
  border-top: none;
  border-radius: 0 0 10px 10px;
  z-index: 4;
  box-sizing: border-box;
  margin-top: -1.8px;
  font-size: clamp(13px, 1.3vw, 16px);
  scrollbar-width: none;
}

.category-dropdown::-webkit-scrollbar { display: none; }

.category-dropdown div {
  padding: clamp(6px, 1vw, 10px);
  cursor: pointer;
  border-bottom: 1px solid #6f5bff;
}

.category-dropdown div:last-child { border-bottom: none; }
.category-dropdown div:hover { background: #1f174f; }

/* ===== ضبط max-height لكل شاشة ===== */
/* ===== موبايل ===== */
@media (max-width: 479px) {   /* أقل من 480 */
  .category-dropdown {
    max-height: 180px; /* رقم مناسب للموبايل */
  }
}

/* ===== تاب ===== */
@media (min-width: 480px) and (max-width: 1024px) {
  .category-dropdown {
    max-height: 150px; /* رقم مناسب للتاب */
  }
}
@media (min-width: 1024px) {      /* لابتوب وفوق */
  .category-dropdown { max-height: 180px; } /* زي القديم */
}

/* ===== نصوص المعلومات داخل النافذة ===== */
#gameRequestPopup .info-text {
  margin: clamp(8px, 1vw, 10px) 0;
  font-size: clamp(12px, 1.2vw, 14px);
}

/* ========================= */
/*  أزرار النافذة */
/* ========================= */
#gameRequestPopup .popup-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(5px, 0.8vw, 10px);
  gap: clamp(5px, 1vw, 10px);
}

#gameRequestPopup .popup-buttons button {
  font-weight: bold;
  font-size: clamp(13px, 1.3vw, 16px);
  height: clamp(40px, 4vw, 45px);
  border-radius: 10px;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.8px solid #6f5bff;
  outline: none;
  box-shadow: none;
  transition: color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

/* زر شراء */
#gameRequestPopup .send-btn {
  color: #0f0;
}
#gameRequestPopup .send-btn:hover,
#gameRequestPopup .send-btn:focus { color: #0f0; border-color: #6f5bff; }
#gameRequestPopup .send-btn:active { color: #ccc; border-color: #ccc; }

/* زر إلغاء */
#gameRequestPopup .cancel-btn {
  color: red;
}
#gameRequestPopup .cancel-btn:hover,
#gameRequestPopup .cancel-btn:focus { color: red; border-color: #6f5bff; }
#gameRequestPopup .cancel-btn:active { color: #ccc; border-color: #ccc; }

/* تعطيل الأزرار */
#gameRequestPopup .popup-buttons button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: #666;
  border-color: #666;
}

/* إزالة أسهم input number على اللابتوب */
@media (min-width: 601px) {
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }
}

/* ===== إعدادات الموبايل ===== */
@media (max-width: 600px) {
  #gameRequestPopup .popup { width: 85%; padding: clamp(10px, 3vw, 15px); }
  .input-field { font-size: clamp(13px, 1.3vw, 16px); padding: clamp(8px, 2vw, 10px); }
  #categoryToggle { padding: clamp(8px, 2vw, 10px); }
  .category-dropdown { max-height: clamp(150px, 18vh, 168px); }
  .category-dropdown div { font-size: clamp(13px, 1.3vw, 16px); padding: clamp(6px, 1.5vw, 10px); }
}

/* ========================= */
/*      شاشة الصيانة        */
/* ========================= */
#maintenanceScreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: none; /* الخلفية متحكم فيها داخل .bg-blue */
}

/* 💙 الخلفية الممتدة */
#maintenanceScreen .bg-blue {
  position: fixed;
  top: -200vh;
  left: 0;
  width: 100%;
  height: 500vh;
  background: #241d64;
  z-index: 0;
}

/* 🔥 المحتوى الأساسي */
#maintenanceScreen .maintenance-content {
  display: flex;
  flex-direction: column;
  align-items: center;       /* محاذاة العناصر داخل الفليكس أفقيًا */
  justify-content: center;   /* محاذاة عمودية */
  
  width: 90%;
  max-width: 500px;
  height: 100vh;             /* يغطي كامل ارتفاع الشاشة */
  text-align: center;
  z-index: 1;
  
  transform: translateZ(0);  /* منع إعادة الرسم */
  backface-visibility: hidden;
  pointer-events: auto;
  
  margin: 0 auto;            /* يجعل العنصر مركز أفقيًا */
  position: relative;        /* يثبت داخل الشاشة بدون تعطيل السحب أو الريفرش */
}

/* ========================= */
/*          المؤقت           */
/* ========================= */
.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 15px);
  justify-content: center;
  font-size: clamp(16px, 2vw, 20px);
  margin-top: clamp(10px, 2vh, 15px);
}

.countdown div {
  min-width: clamp(45px, 6vw, 60px);
  padding: clamp(6px, 1.5vw, 12px) clamp(8px, 2vw, 14px);
  border-radius: clamp(8px, 2vw, 12px);
  background-color: #0f0f14;
  border: 2px solid #FFD700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.countdown div span {
  display: block;
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: bold;
  color: #ffffff;
  line-height: 1.1;
}

.countdown div small {
  display: block;
  font-size: clamp(9px, 1.5vw, 12px);
  margin-top: clamp(2px, 1vh, 4px);
  color: #ddd;
  text-align: center;
}

/* العناوين */
#maintenanceScreen h1 {
  font-size: clamp(20px, 4vw, 28px);
  margin-bottom: clamp(8px, 2vh, 12px);
}

#maintenanceScreen p {
  font-size: clamp(14px, 3vw, 18px);
  line-height: 1.4;
  max-width: 90%;
  margin: 0 auto;
}

/* ========================= */
/* Responsive */
/* ========================= */

@media screen and (max-width: 480px) {
  .countdown { gap: 8px; font-size: 14px; }
  .countdown div { min-width: 40px; padding: 4px 6px; }
  .countdown div span { font-size: 16px; }
  .countdown div small { font-size: 8px; }
  #maintenanceScreen h1 { font-size: 18px; }
  #maintenanceScreen p { font-size: 12px; }
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
  .countdown { gap: 10px; font-size: 16px; }
  .countdown div { min-width: 50px; padding: 6px 8px; }
  .countdown div span { font-size: 18px; }
  .countdown div small { font-size: 10px; }
  #maintenanceScreen h1 { font-size: 20px; }
  #maintenanceScreen p { font-size: 14px; }
}

@media screen and (min-width: 1025px) {
  .countdown { gap: 12px; font-size: 18px; }
  .countdown div { min-width: 60px; padding: 8px 12px; }
  .countdown div span { font-size: 22px; }
  .countdown div small { font-size: 12px; }
  #maintenanceScreen h1 { font-size: 24px; }
  #maintenanceScreen p { font-size: 16px; }
}