/* 🌙 Dark Mode – كامل النسخة المعدّلة */

/* ✅ إعدادات أساسية (Dark Mode) */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1f2223; /* كان #f7f8fa */
  color: #e5e7eb;            /* كان #101828 */
  font-family: 'Tajawal', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

html {
  overflow-y: scroll;
  overflow-x: hidden; /* يمنع السكرول العرضي */
}

html::-webkit-scrollbar {
  width: 6px; /* شوي أوسع لليت */
}

html::-webkit-scrollbar-thumb {
  background-color: #334155; /* أغمق ومتلائم مع الدارك */
  border-radius: 4px;
}

/* ✅ السايدبار */
#sidebar {
  width: 280px;
  min-height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1040;
  transition: all 0.3s ease;
  background: #181a1b;              /* داكن */
  border-left: 1px solid #1f2937;   /* حد غامق ناعم */
  color: #e5e7eb;
}

/* ✅ المحتوى */
#mainContent {
  transition: all 0.3s ease;
  margin-top: 64px;
  margin-right: 280px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #e5e7eb;
}

/* ✅ إخفاء السايدبار على الشاشات العريضة */
.sidebar-hidden #sidebar {
  display: none;
}
.sidebar-hidden #mainContent {
  margin-right: 0 !important;
  width: 100% !important;
}

/* ✅ مربع البحث */
.search-wrapper {
  width: 100%;
  max-width: 100%;
  background: #181a1b;               /* كان #f1f5f9 */
  border: 1px solid #1f2937;
  border-radius: 40px;
  padding: 0.6rem 1.2rem;
  margin-bottom: 30px;
}
.search-wrapper input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  text-align: right;
  font-size: 15px;
  color: #e5e7eb;  /* كان #181a1b */
}

/* ✅ تنسيق البطاقة */
.category-box a.card {
 display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.3s ease;
  height: 100%;
  background: transparent !important;
  box-shadow: none !important;
}
.category-box a.card:hover {
  transform: scale(1.02);
}

.category-box .card-img-top {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 0.5rem 0.5rem;
}

.category-box .card-body {
  padding: 10px 5px 5px 5px;
  margin: 0;
  text-align: center;
  background: transparent !important;
}

.category-box .card-title {
  color: #ffffff; /* بديل أزرق فاتح للدارك */
  font-size: 1rem;
  font-weight: bold;
  margin: 0;
  text-shadow: none;
  background: transparent !important;
}

.category-box {
  height: auto;
}

.product-box .card-title, .card-price {
    color: #ffffff !important;
}
/* ✅ الموبايل */
@media (max-width: 768px) {
  #sidebar {
    right: -280px;
  }

  .sidebar-visible #sidebar {
    right: 0;
  }

  #mainContent {
    margin-right: 0 !important;
  }

  /* الهيدر */
  .bg-dark {
    right: 0 !important;
  }
}


/* ✅ محتوى الصفحة (تكرار مقصود لضبط الداكن) */
#mainContent {
  transition: all 0.3s ease;
  margin-top: 64px;
  margin-right: 280px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sidebar-hidden #mainContent {
  margin-right: 0 !important;
  width: 100% !important;
}

.card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow .2s ease;
  background: #181a1b;
  border: 1px solid #1f2937;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}

img { max-width: 100%; height: auto; }

/* ✅ الأزرار */
.btn-light {
  color: #e2e8f0;
  font-weight: bold;
  background: #181a1b;
  border: 1px solid #1f2937;
}

.btn-success {
  background-color: #16a34a !important;   /* أخضر مناسب للدارك */
  border-color: #16a34a !important;
  color: #051b10 !important;
  font-weight: bold;
}

.btn-success:hover {
  background-color: #22c55e !important;
  border-color: #22c55e !important;
  color: #07180f !important;
}

.btn-success:focus,
.btn-success:active,
.btn-success:focus:active {
  background-color: #16a34a !important;
  color: #051b10 !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25) !important;
  outline: none !important;
}

/* ✅ التنقل */
#sidebar .nav-link {
  text-align: right;
  direction: rtl;
  color: #e5e7eb;
}
#sidebar .nav-link:hover {
  background-color: #181a1b;
  border-radius: 6px;
}
.nav-link.active {
  background-color: #1f2937;
  border-radius: 10px;
}

.logout-hover:hover {
  background-color: #3f1a1a !important;
  transition: background-color 0.2s;
}

hr {
  border-color: #1f2937;
  opacity: 0.9;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #cbd5e1;
  transition: background-color 0.3s, transform 0.2s, box-shadow .2s;
  text-decoration: none;
  background-color: #181a1b;
  border: 1px solid #1f2937;
}
.icon-btn:hover {
  background-color: #181a1b;
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.icon-btn.text-danger { color: #fca5a5; }

.logout-hover:hover { background-color: #421b1b !important; }

/* ✅ الموبايل */
@media (max-width: 768px) {
  #sidebar {
    right: -280px;
    left: auto;
    top: 0;
    position: fixed;
    z-index: 1050;
    height: 100%;
  }
  .sidebar-visible #sidebar { right: 0; }
  .bg-dark { right: 0; }
  #mainContent { margin-right: 0 !important; }
}

/* ✅ الفوتر دائمًا أسفل الصفحة */
footer .footer-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex-direction: row;
  color: #94a3b8;
}

@media (max-width: 576px) {
  footer .footer-flex {
    flex-wrap: wrap;
    text-align: center;
    gap: 2px;
  }
}

/* ✅ اللودر (داكن) */
#loader-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
background: rgba(31, 34, 35, 0.75); /* قريب من #1f2223 مع شفافية */
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-wrapper { position: relative; width: 100px; height: 100px; }

.loader-logo {
  width: 60px; height: 60px;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.spinner-ring {
  width: 100px; height: 100px;
  border: 6px solid #2563eb;  /* أزرق واضح */
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-sizing: border-box;
}

@keyframes spin { to { transform: rotate(360deg); } }

#sidebar {
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;           /* فايرفوكس */
  -ms-overflow-style: none;        /* إنترنت إكسبلورر/إيدج القديم */
}
#sidebar::-webkit-scrollbar { display: none; }

body.sidebar-visible { overflow: hidden; } /* يمنع تمرير الصفحة */
body.sidebar-visible #sidebar {
  overflow-y: auto; /* يسمح بتمرير داخل السايدبار فقط */
  -webkit-overflow-scrolling: touch; /* تحسين السلاسة على iOS */
}

/* منع سحب صورة السلايدر بالماوس */
#homeHero .carousel-item img{ user-select:none; -webkit-user-drag:none; }

/* إخفاء أي أزرار/مؤشرات إن وُجدت */
#homeHero .carousel-control-prev,
#homeHero .carousel-control-next,
#homeHero .carousel-indicators { display: none !important; }

/* وعاء الشريط */
.ticker-shell{
  position: relative;
  background: #181a1b;
  border: 1px solid rgba(148,163,184,.18);
  height: var(--ticker-h, 48px);
  overflow: hidden;
  padding-inline: 12px;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 100%;
  border-radius: 40px;
  color:#e5e7eb;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.category-box .card-img-top {
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  display: block;
  border-radius: 0.5rem 0.5rem;
}

.ticker-track{ /* مثل ما هي عندك، بس خفّفنا القيود */
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
}

.ticker-item{
  position: absolute;
  top: 0;
  height: 100%;
  line-height: var(--ticker-h, 48px);   /* يمشي مع ارتفاع الشريط */
  font-size: var(--ticker-font, 16px);  /* حجم الخط المتحكَّم فيه */
  display: inline-block;
  padding: 0 12px;                      /* فيك تكبّرها إذا بدك */
  box-sizing: border-box;
}

/* سحب السلايدر يكون سهل */
#homeHero .carousel-inner{ cursor: grab; }
#homeHero .carousel-inner:active{ cursor: grabbing; }

/* تنسيقات المودال – Dark */
.wh-modal .modal-content{
  border: 1px solid #1f2937;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background:
    radial-gradient(1200px circle at 10% -20%, #25D36622, transparent 40%),
    radial-gradient(800px circle at 120% 30%, #0ABAB522, transparent 35%),
    #181a1b;
  color: #e5e7eb;
}
.wh-modal .modal-header{ border: 0; padding-bottom: 0; }
.wh-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.95rem;
  background: #181a1b;
  padding:.5rem .9rem;border-radius:999px;
  backdrop-filter: blur(6px);
  color:#e5e7eb;
}
.wh-title{ font-weight:800; margin:.5rem 0 0; line-height:1.4; color:#e5e7eb; }
.wh-sub{ color:#cbd5e1;opacity:.95; }
.wh-btn { font-weight: 800; letter-spacing: .2px; padding: .85rem 1.1rem; border-radius: .9rem; border: 0; background: linear-gradient(135deg, #25D366, #1EBE5D); color: #062a1f; transition: transform .08s ease, filter .2s ease; text-decoration: none; display: inline-block; }
.wh-btn:hover { filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; }
.wh-btn-center { display: flex; justify-content: center; }
.wh-muted{ color:#94a3b8;opacity:.95;font-size:.92rem; }
.orders-shell{ background:#1f2223; }
.orders-card{ background:#181a1b; border:1px solid #1f2937; border-radius:14px; padding:14px; }
.shadowz{ box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.h3title{ margin-bottom:1.25rem; color:#e5e7eb; }

/* شريط أدوات أعلى القائمة */
.toolbar-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px;}
.vfield{
  position:relative; background:#181a1b; border:1px solid #1f2937;
  border-radius:12px; padding:6px 10px; min-width:180px;
}
.vfield label{ position:absolute; top:-10px; right:10px; background:#1f2223; padding:0 6px; font-size:12px; color:#94a3b8; }
.vfield input{
  width:100%; background:transparent; border:0; outline:0; color:#e5e7eb;
}

/* Chips */
.chips{ display:flex; overflow:auto; gap:8px; padding:8px 0; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background:#181a1b; border:1px solid #1f2937; color:#e5e7eb; cursor:pointer; white-space:nowrap;
  transition:.15s;
}
.chip small.badge{ background:transparent; border:1px dashed #334155; border-radius:999px; padding:0 6px; font-size:11px; color:#94a3b8; }
.chip.active{ background:#1f2937; border-color:#334155; }
.chip.success svg{ color:#22c55e; }
.chip.warning svg{ color:#f59e0b; }
.chip.error   svg{ color:#ef4444; }

/* أزرار */
.btn-plain{
  background:#181a1b; border:1px solid #334155; color:#e5e7eb;
  border-radius:12px; padding:8px 12px; cursor:pointer;
}
.btn-primary{
  background:#7f83ff; border:1px solid transparent; color:#0b0b0b; font-weight:700; border-radius:12px; padding:8px 14px;
}
.btn-icon{
  background:#181a1b; border:1px solid #334155; color:#e5e7eb; border-radius:999px; width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* عنصر الطلب */
.order-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#181a1b;
  border:1px solid #1f2937; border-radius:14px; padding:10px 12px; transition:.12s; text-decoration:none; color:inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.order-item:hover{ border-color:#334155; transform:translateY(-1px); }
.order-left h6{ margin:0 0 2px 0; font-weight:800; color:#e5e7eb; }
.order-left .subtitle{ color:#94a3b8; font-size:12px; }
.order-center{ display:flex; gap:14px; align-items:center; }
.state-dot svg{ width:18px; height:18px; }
.state-dot.success svg{ color:#22c55e; }
.state-dot.warning svg{ color:#f59e0b; }
.state-dot.error   svg{ color:#ef4444; }
.order-center small{ color:#94a3b8; display:block; }
.order-right h3{ margin:0; width:80px; text-align:center; color:#e5e7eb; }
.order-right small{ color:#94a3b8; display:block; text-align:center; }

/* شارة الحالة (للتفاصيل) */
.badge-state{
  border-radius:999px; padding:6px 10px; font-weight:700; min-width:86px; text-align:center;
}
.badge-state.pending{ background:#4c2e03; color:#fdba74; border:1px solid #b45309; }
.badge-state.processing{ background:#3b2a01; color:#fde68a; border:1px solid #a16207; }
.badge-state.completed{ background:#052e1a; color:#34d399; border:1px solid #065f46; }
.badge-state.rejected{ background:#3a0d0d; color:#fca5a5; border:1px solid #ef4444; }

/* عرض التفاصيل داخل الصفحة */
#ordersListView{ display:block; padding-top: 2rem;}
#orderDetailsView{ display:none; }
.details-card{ background:#181a1b; border:1px solid #1f2937; border-radius:16px; }
.details-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #1f2937; padding:12px 14px; }
.details-body{ padding:14px; }
.row-field{
  background:#181a1b; border:1px solid #1f2937; border-radius:12px;
  padding:12px 14px; margin-bottom:10px; display:flex; justify-content:space-between; gap:10px;
}
.row-field .label{ color:#94a3b8; }
.copy-btn{
  border:1px solid #334155; background:#181a1b; color:#e5e7eb;
  border-radius:8px; font-size:13px; padding:6px 10px; cursor:pointer;
}
.pill{ display:inline-flex; align-items:center; gap:8px; background:#181a1b; border:1px solid #1f2937; border-radius:999px; padding:6px 10px; font-size:12px; color:#e5e7eb }

/* مودالات الاعتراض (Dark) */
.modal-dark .modal-content{ background:#181a1b; color:#e5e7eb; border:1px solid #1f2937; border-radius:16px; }
.modal-dark .modal-header{ border-bottom:1px solid #1f2937; }
.modal-dark .btn-close{ filter: invert(1); }
.modal-dark .form-label{ color:#e5e7eb; }
.modal-dark .form-control{ background:#1f2223; border:1px solid #1f2937; color:#e5e7eb; }
.modal-dark .form-control:focus{ color:#e5e7eb; background:#1f2223; border-color:#7f83ff; box-shadow:none; }
.modal-dark .chat-scroll{ background:#1f2223; border:1px solid #1f2937; border-radius:12px; padding:10px; }
.bubble-user{ background:#181a1b; border:1px solid #1f2937; border-radius:12px; padding:8px 10px; }
.bubble-admin{ background:#052e1a; border:1px solid #065f46; color:#d1fae5; border-radius:12px; padding:8px 10px; }
.modal-dark .btn-secondary{ background:#181a1b; border-color:#1f2937; color:#e5e7eb; }
.modal-dark .btn-danger{ background:#ef4444; border-color:#ef4444; }
.modal-dark .btn-danger:hover{ background:#dc2626; }

@media (max-width: 768px){
  .order-right h3{ width:65px; }
}

/* صفّان ثابتان داخل شريط الأدوات */
.toolbar-row{ display: flex; flex-direction: column; gap: 10px; }
.toolbar-group{ display: flex; align-items: center; gap: 10px; width: 100%; }
.flex-spacer{ flex: 1; }
#searchRow .vfield{ flex: 1 1 auto; }

/* زر يشبه Vuetify FAB الصغير */
.v-btn-like-fab{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:#7f83ff; color:#111; border:0; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition: transform .12s ease, box-shadow .12s ease;
}
.v-btn-like-fab:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.6); }
.v-btn-like-fab:active{ transform: translateY(0); }
.v-btn-like-fab .v-icon__svg{ width:20px; height:20px; fill:#111; }

#searchRow{ display:flex; align-items:center; gap:10px; }
#searchRow .vfield input{ height:40px; line-height:40px; }

/* دِسك توب: "من/إلى" */
@media (min-width: 992px){
  #datesRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  #datesRow .vfield{ max-width: none !important; width: 100%; flex: 1 1 auto; }
  #datesRow .vfield input{ height: 40px; line-height: 40px; }
}

/* —— موبايل —— */
@media (max-width: 600px){
  .orders-shell.container{ padding-right: 10px; padding-left: 10px; }
  .order-item{ flex-wrap: nowrap; overflow: hidden; gap: 8px; padding: 8px 10px; }
  .order-left, .order-center, .order-right{ min-width: 0; }
  body, .orders-shell{ font-size: 13px; }
  .order-left h6{ font-size: 14px; line-height: 1.2; }
  .order-left .subtitle{ font-size: 11px; }
  .order-center{ gap: 10px; }
  .state-dot svg{ width: 14px; height: 14px; }
  .status-text{ font-size: 12px; font-weight: 700; }
  .status-row small.ltr{ font-size: 11px; direction:ltr; unicode-bidi:plaintext; }
  .order-right .price-big{ font-size: 14px; font-weight: 700; }
  .order-right small{ font-size: 11px; }
  .order-right{ margin-inline-start: auto; text-align: end; }
  .chips{ gap: 6px; }
  .chip{ padding: 4px 8px; font-size: 12px; }
  .chip small.badge{ font-size: 10px; padding: 0 6px; }
  .vfield{ padding: 4px 8px; border-radius: 10px; }
  .vfield label{ font-size: 11px; right: 8px; }
  #searchRow .vfield input{ height: 36px; line-height: 36px; }
  .v-btn-like-fab{ width: 36px; height: 36px; }
  .row-field{ padding:10px 12px; gap:8px; }
  .badge-state{ padding: 4px 10px; font-size: 12px; min-width: 72px; }
  #datesRow .vfield, #searchRow .vfield{ max-width: none !important; width: 100%; }
  html, body{ max-width:100%; overflow-x:hidden; }
}

/* شاشات أصغر كتير */
@media (max-width: 380px){
  body, .orders-shell{ font-size: 12px; }
  .order-left h6{ font-size: 13px; }
  .order-right .price-big{ font-size: 13px; }
  .status-row small.ltr{ font-size: 10px; }
  .v-btn-like-fab{ width: 34px; height: 34px; }
}

/* صفحة البروفايل – Dark */
.profile-page .section-wrap{ background:#1f2223 !important; box-shadow:none !important; color:#e5e7eb; }
.profile-page .card-wrap{ color:#e5e7eb; padding:18px; background:#181a1b; border:1px solid #1f2937; border-radius:12px; }
.profile-page h4{ color:#e5e7eb; }

/* حقول الإدخال الداكنة */
.profile-page .input-box{
  background:#1f2223; border:1px solid #1f2937; border-radius:12px;
  padding:12px 14px; width:100%; text-align:right; font-size:14px; color:#e5e7eb;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.profile-page .input-box:focus{
  outline:none; border-color:#7f83ff; box-shadow:0 0 0 2px rgba(127,131,255,.2);
}
.profile-page label{ font-weight:600; font-size:13px; color:#cbd5e1; margin-bottom:6px; }

/* زر الحفظ */
.profile-page .btn-save{
  background:#2563eb; border:1px solid #1d4ed8; color:#fff;
  border-radius:12px; padding:12px; font-weight:700; width:100%;
  transition:background .15s ease, transform .05s ease;
}
.profile-page .btn-save:hover{ background:#1d4ed8; }
.profile-page .btn-save:active{ transform:translateY(1px); }

/* صورة البروفايل */
.profile-page .pic-wrapper{ position:relative; display:inline-block; }
.profile-page .profile-pic{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:3px solid #1f2223; box-shadow:0 6px 24px rgba(0,0,0,.55);
  background:#1f2223;
}

/* زر الكاميرا */
.profile-page .camera-icon{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  background:#181a1b; border:1px solid #1f2937; color:#e5e7eb;
  padding:6px 8px; border-radius:999px; cursor:pointer; line-height:0;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.profile-page .camera-icon svg{ width:18px; height:18px; }

/* تنسيقات عامة */
.profile-page .form-wrapper{ padding:10px 0 24px; }
.profile-page .alert{
  border-radius:12px; font-weight:700;
}

/* تنسيق صفين الحقول على الشاشات الصغيرة */
@media (max-width: 576px){
  .profile-page .col-6{ width:100%; }
}

/* API Card – Dark */
#api-card{
  background:#181a1b !important;
  color:#e5e7eb !important;
  border:1px solid #1f2937 !important;
}
#api-card .card-body{ color:#e5e7eb !important; }
#api-card h3,#api-card h5,#api-card label{ color:#e5e7eb !important; }
#api-card .text-muted{ color:#94a3b8 !important; }

#api-card hr{ border-color:#1f2937 !important; opacity:.8; }
#api-card .form-control,
#api-card .form-select,
#api-card .input-group-text{
  background:#1f2223 !important;
  color:#e5e7eb !important;
  border:1px solid #1f2937 !important;
}
#api-card .form-control::placeholder{ color:#64748b !important; }
#api-card .form-control:focus,
#api-card .form-select:focus{
  border-color:#28cb69 !important;
  box-shadow:0 0 0 .2rem rgba(40,203,105,.15) !important;
  outline:none !important;
}
#api-card .form-check-input{
  background-color:#1f2223 !important;
  border:1px solid #334155 !important;
}
#api-card .form-check-input:checked{
  background-color:#28cb69 !important;
  border-color:#28cb69 !important;
}
#api-card .btn{ border-radius:.6rem !important; border:1px solid #334155 !important; }
#api-card .btn-outline-secondary{ color:#e5e7eb !important; background:transparent !important; }
#api-card .btn-outline-secondary:hover{ background:#181a1b !important; }
#api-card .btn-outline-primary{ color:#e5e7eb !important; border-color:#28cb69 !important; }
#api-card .btn-outline-primary:hover{ background:rgba(40,203,105,.08) !important; }
#api-card .btn-outline-success{ color:#d1fae5 !important; border-color:#10b981 !important; }
#api-card .btn-outline-success:hover{ background:rgba(16,185,129,.12) !important; }
#api-card .btn-warning{ color:#181a1b !important; background:#f59e0b !important; border-color:#f59e0b !important; }
#api-card .alert{
  border:1px solid #334155 !important;
  color:#e5e7eb !important;
  background:#1f2223 !important;
}
#api-card .alert-success{ border-color:rgba(16,185,129,.35) !important; background:#052e1a !important; }
#api-card .alert-danger{  border-color:rgba(239,68,68,.35) !important; background:#3a0d0d !important; }
#api-card .alert-info{    border-color:rgba(59,130,246,.35) !important; background:#0a1a33 !important; }
#api-card .border{ border-color:#1f2937 !important; }
#api-card .rounded{ border-radius:1rem !important; }
#api-card a{ color:#28cb69 !important; }
#api-card a:hover{ opacity:.9; }

/* Agents page – Dark */
.agents-page .section-wrap{ background:#1f2223  !important; box-shadow:none !important; color:#e5e7eb; }
.agents-page h4{ color:#e5e7eb; }
.agents-page .agent-card{
  background:#181a1b; color:#e5e7eb; border:1px solid #1f2937; border-radius:16px;
  padding:14px 16px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.agents-page .agent-card:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.55); border-color:#334155; }
.agents-page .agent-main{ flex:1 1 260px; min-width:240px; }
.agents-page .actions{ display:flex; align-items:center; gap:10px; }
.agents-page .agent-name{ font-weight:700; font-size:16px; display:flex; align-items:center; gap:10px; }
.agents-page .verified-badge{
  border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700;
  background:#052e1a; color:#34d399; border:1px solid #065f46;
}
.agents-page .info-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.agents-page .pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#181a1b; border:1px solid #1f2937; border-radius:999px;
  padding:6px 10px; font-size:12px; color:#e5e7eb; text-decoration:none;
}
.agents-page .btn-soft{
  border:1px solid #334155; background:#181a1b; color:#e5e7eb;
  border-radius:10px; padding:8px 12px; font-size:13px; text-decoration:none;
}
.agents-page .btn-soft:hover{ background:#181a1b; }
.agents-page .btn-wa{ border-color:#14532d; }
.agents-page .btn-call{ border-color:#334155; }
.agents-page .wa-ico{ width:18px; height:18px; vertical-align:-3px; }
.agents-page .agent-card { justify-content: space-between; }
.agents-page .agent-main { order: 1; }
.agents-page .actions    { order: 2; }
@media (max-width: 576px) {
  .agents-page .actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 6px;
  }
}
@media (min-width: 992px){
  .agents-page .rounded{ border-radius:16px !important; }
}

/* Wallet dashboard – Dark */
.wallet-dashboard { background: transparent; padding-top: 0; }
.wallet-dashboard .page-title{margin:16px 0 10px 0; color:#e5e7eb;}
.wallet-dashboard .stats-wrap{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:12px}
.wallet-dashboard .stat-card{min-width:210px; background:#181a1b; border:1px solid #1f2937; border-radius:14px; padding:10px 16px; text-align:center; color:#e5e7eb; box-shadow:0 10px 25px rgba(0,0,0,.5)}
.wallet-dashboard .stat-card .val{font-size:24px; font-weight:800; line-height:1}
.wallet-dashboard .stat-card .sub{opacity:.9; margin-top:4px; font-weight:600; color:#94a3b8}
.wallet-dashboard .stat-teal{background:linear-gradient(180deg, #134e4a 0, #115e59 100%); color:#d1fae5 }
.wallet-dashboard .stat-red{background:linear-gradient(180deg, #7f1d1d 0, #991b1b 100%); color:#fee2e2 }
.wallet-dashboard .stat-purple{background:linear-gradient(180deg, #4c1d95 0, #5b21b6 100%); color:#ede9fe }
.wallet-dashboard .stat-green{background:linear-gradient(180deg, #065f46 0, #047857 100%); color:#dcfce7 }

.wallet-dashboard .filters{display:flex; flex-direction:column; gap:10px; align-items:center; margin:8px 0 4px}
.wallet-dashboard .dates-row{display:flex; gap:10px; align-items:center; width:100%; max-width:860px; justify-content:center}
.wallet-dashboard .date-pill{position:relative; display:flex; align-items:center; background:#181a1b; border:1px solid #334155; color:#e5e7eb; border-radius:999px; padding:10px 16px; min-width:330px}
.wallet-dashboard .date-pill label{position:absolute; top:-12px; right:14px; background:#1f2223; color:#94a3b8; font-size:12px; padding:0 6px}
.wallet-dashboard .date-pill input{background:transparent; border:0; outline:0; color:#e5e7eb; width:100%; text-align: right;}
.wallet-dashboard .fab-search{width:42px; height:42px; border-radius:50%; background:#7f83ff; color:#111; border:0; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,.5); margin-top:-26px}
.wallet-dashboard .fab-search svg{width:20px; height:20px; fill:#111}
.wallet-dashboard .chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:6px 0 10px}
.wallet-dashboard .chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#181a1b; border:1px solid #334155; color:#e5e7eb; text-decoration:none}
.wallet-dashboard .chip.active{background:#1f2937; border-color:#334155}
.wallet-dashboard .chip small{border:1px dashed #334155; border-radius:999px; padding:0 6px; font-size:11px; color:#94a3b8}
.wallet-dashboard .total-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #f59e0b; color:#fde68a; border-radius:999px; background:#3b2a01; margin:2px 0 14px}
.wallet-dashboard .logs{margin-top:6px}
.wallet-dashboard .log-item{display:flex; align-items:center; gap:14px; justify-content:space-between; background:#181a1b; border:1px solid #1f2937; border-radius:14px; padding:12px 16px; margin-bottom:10px; box-shadow:0 2px 10px rgba(0,0,0,.45)}
.wallet-dashboard .log-left{display:flex; align-items:center; gap:12px}
.wallet-dashboard .badge-round{width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(0,0,0,.5)}
.wallet-dashboard .badge-red{background:#7f1d1d; color:#fee2e2}
.wallet-dashboard .badge-green{background:#065f46; color:#dcfce7}
.wallet-dashboard .log-title{font-weight:800}
.wallet-dashboard .log-date{font-size:12px; color:#94a3b8; margin-top:3px}
.wallet-dashboard .log-right{text-align:left; min-width:210px}
.wallet-dashboard .log-amount{font-weight:800}
.wallet-dashboard .log-balance{font-size:12px; margin-top:6px}
.wallet-dashboard .log-balance s{color:#fca5a5}
.wallet-dashboard .log-balance span{color:#34d399}
@media (max-width: 576px){
  .wallet-dashboard .date-pill{min-width:100%}
  .wallet-dashboard .log-right{min-width:auto}
}
.wallet-dashboard .stats-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 992px) { .wallet-dashboard .stats-wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .wallet-dashboard .stats-wrap { grid-template-columns: 1fr; } }
.wallet-dashboard .date-pill { min-width: 330px; }
@media (max-width: 576px) { .wallet-dashboard .date-pill { min-width: 0; width: 100%; } }
.wallet-dashboard .log-item,
.wallet-dashboard .chips,
.wallet-dashboard .filters,
.wallet-dashboard .stats-wrap { max-width: 100%; overflow: hidden; }

/* Payments page – Dark */
.payments-page .section-wrap{ background:#1f2223  !important; box-shadow:none !important; color:#e5e7eb; }
.payments-page h4{ color:#e5e7eb; }
.payments-page .topup-card{
  background:#181a1b; color:#e5e7eb; border:1px solid #1f2937; border-radius:16px;
  padding:14px 16px; display:flex; flex-wrap:wrap; gap:14px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.payments-page .topup-card:hover{
  transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.55); border-color:#334155;
}
.payments-page .amount-box{ min-width:150px; text-align:start; }
.payments-page .amount-box .main{ font-weight:700; font-size:16px; color:#e5e7eb;}
.payments-page .amount-box .sub { font-size:12px; opacity:.85; color:#94a3b8; }
.payments-page .meta{ flex:1 1 280px; min-width:260px; }
.payments-page .meta .title{ font-weight:600; color:#e5e7eb;}
.payments-page .meta .desc { font-size:12px; opacity:.85; margin-top:2px; white-space:pre-wrap; color:#cbd5e1;}
.payments-page .meta .tiny { font-size:12px; opacity:.75; color:#94a3b8;}
.payments-page .state-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.payments-page .badge-soft{
  border-radius:999px; padding:6px 10px; font-weight:700; min-width:110px; text-align:center;
}
.payments-page .pending  { background:#4c2e03; color:#fdba74; border:1px solid #b45309; }
.payments-page .approved { background:#052e1a; color:#34d399; border:1px solid #065f46; }
.payments-page .rejected { background:#3a0d0d; color:#fca5a5; border:1px solid #ef4444; }
.payments-page .neutral  { background:#181a1b; color:#e5e7eb; border:1px solid #1f2937; }
.payments-page .pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#181a1b; border:1px solid #1f2937; border-radius:999px;
  padding:6px 10px; font-size:12px; color:#e5e7eb;
}
@media (min-width: 992px){ .payments-page .rounded{ border-radius:16px !important; } }

/* Order modal – Dark */
#orderModal .modal-content{
  background:#181a1b;
  border:1px solid #1f2937;
  border-radius:22px;
  color:#e5e7eb;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
#orderModal .modal-body{ padding:24px; }
#orderModal .btn-close{ filter: invert(1); }

/* شارة السعر العلوية */
#orderModal .badge.bg-darks{
  position:absolute; top:16px; right:20px;
  background:linear-gradient(180deg,#1f2937 0%,#334155 100%) !important;
  color:#e5e7eb; font-weight:800;
  border-radius:999px; border:1px solid rgba(148,163,184,.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.5);
  padding:8px 14px;
}

/* زر المفضلة */
#orderModal .favorite-btn{
  background:#181a1b; border:1px solid #334155; color:#cbd5e1;
  border-radius:999px; padding:6px 12px; line-height:1;
}
#orderModal .favorite-btn:hover{ background:#181a1b; }

/* العنوان */
#orderModal #modalProductName{
  color:#e5e7eb; font-weight:800; margin-top:28px;
}

/* الحقول */
#orderModal .form-control,
#orderModal .form-select{
  background:#1f2223;
  border:1px solid #1f2937;
  color:#e5e7eb;
  border-radius:22px;
  padding:12px 16px;
  box-shadow:none !important;
}
#orderModal .form-control::placeholder{ color:#64748b; }
#orderModal .form-control:focus,
#orderModal .form-select:focus{
  outline:none; border-color:#5f63ff; box-shadow:0 0 0 3px rgba(95,99,255,.18) !important;
}

/* الكمية */
#orderModal #quantityWrapper{ text-align:center; }
#orderModal #quantityWrapper .form-label{
  color:#94a3b8; font-size:12px; margin:0 8px 8px; display:inline-block; float:right;
}
#orderModal #quantityWrapper .d-flex{
  justify-content:space-between !important; align-items:center !important; gap:12px;
}
#orderModal #decreaseQty,
#orderModal #increaseQty{
  width:44px; height:44px; border-radius:50%;
  background:#f59e0b; border:0; color:#111; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
#orderModal #orderQty{
  flex:1 1 auto; max-width:260px;
  height:44px; text-align:center; font-weight:700;
  background:#1f2223; border:1px solid #1f2937; color:#e5e7eb;
  border-radius:22px; width:100% !important;
}
#orderModal #amountRangeText{ color:#94a3b8 !important; margin-top:8px; display:block; }

/* بطاقات الإجمالي */
#orderModal .pill-row{ display:flex; gap:16px; margin-bottom:12px; }
#orderModal .pill{
  flex:1; background:#181a1b; border:1px solid #1f2937; border-radius:22px;
  padding:12px 16px; text-align:center; box-shadow:inset 0 0 0 1px rgba(2,6,23,.15);
}
#orderModal .pill-caption{ color:#94a3b8; font-size:12px; margin-bottom:4px; }
#orderModal .pill-value{ color:#e5e7eb; font-weight:800; font-size:16px; }

/* الأزرار السفلية */
#orderModal .btn-outline-danger{
  background:transparent; color:#fca5a5; border:1px solid #ef4444;
  border-radius:22px; padding:12px 0; font-weight:700;
}
#orderModal .btn-outline-danger:hover{ background:#3a0d0d; color:#fecaca; }
#orderModal .btn-success{
  border:0; border-radius:22px; padding:12px 0; font-weight:800;
  background:linear-gradient(135deg,#1f2937 0%,#334155 100%);
  color:#e5e7eb; box-shadow:inset 0 6px 18px rgba(0,0,0,.35);
}
#orderModal .btn-success:hover{ filter:brightness(1.06); }

/* صندوق الوصف */
#orderModal #modalProductDesc{
  background:#181a1b !important; color:#e5e7eb !important;
  border:1px solid #1f2937; border-radius:10px; padding:10px 12px; font-size:13.5px;
}

/* تحسينات للجوال */
@media (max-width:420px){
  #orderModal .modal-body{ padding:20px; }
  #orderModal #orderQty{ max-width:none; }
  #orderModal .pill-row{ gap:10px; }
}

/* ترتيب العنوان وزر المفضلة */
#orderModal .om-head{ flex-direction: row-reverse; }
#orderModal #modalProductName{ text-align: right; margin: 0; flex: 1; color:#e5e7eb; font-weight:800; }
#orderModal .favorite-btn{
  background:#181a1b; border:1px solid #334155; color:#cbd5e1;
  border-radius:999px; padding:6px 14px; font-size:16px; transition:.2s;
}
#orderModal .favorite-btn:hover{ background:#181a1b; color:#e5e7eb; }
#orderModal .badge.bg-darks{
  position:absolute; top:16px; left:20px !important; right:auto !important;
  background:linear-gradient(180deg,#1f2937 0%,#334155 100%) !important;
  color:#e5e7eb; border:1px solid rgba(148,163,184,.25); border-radius:999px; padding:8px 14px; font-weight:800;
  box-shadow:0 2px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
}
#orderModal .om-head{
  display:flex; justify-content:flex-end; align-items:center; width:100%; padding-right:2px; gap:10px; direction:rtl;
}
#orderModal .om-title{ display:flex; align-items:center; gap:10px; margin:0; color:#e5e7eb; font-weight:800; text-align:right; }
#orderModal .om-heart{
  display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px;
  border-radius:50%; border:0; background:#181a1b; color:#94a3b8; padding:0; cursor:pointer;
  transition:filter .15s ease, transform .05s ease, background .2s ease, color .2s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.45); border:1px solid #334155;
}
#orderModal .om-heart:hover{ filter:brightness(1.02); }
#orderModal .om-heart:active{ transform:scale(.97); }
#orderModal .om-heart.is-fav{ background:#1f2937; color:#e5e7eb; }

/* صور المنتجات */
.product-box .card-img-top { width: 100%; aspect-ratio: 1 / 1 !important; border-radius: 0.5rem 0.5rem; }

/* Category Hero */
.category-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
  background:#181a1b;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.category-hero img{ width: 100%; height: clamp(180px, 28vw, 320px); display: block;}
.category-hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%);
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 18px 22px;
}
.category-hero__overlay h2{
  color: #fff; font-weight: 800; letter-spacing: .2px; text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

/* vip-oranos – Dark palette */
.vip-oranos{ --primary:#7f83ff; --secondary:#181a1b; --text:#e5e7eb; --muted:#94a3b8; --divider:#1f2937; --card:#181a1b; --chip:#f59e0b; }
.vip-oranos, .vip-oranos *{ box-sizing:border-box; }
.vip-oranos{ direction: rtl; color: var(--text); }
.vip-oranos .container{ max-width: 980px; margin: 0 auto; }
.vip-oranos .v-card{ background: var(--card); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.45); border:1px solid var(--divider); }
.vip-oranos .v-card__title{ padding: 18px 0 6px; color:#e5e7eb; }
.vip-oranos .v-card__text{ padding: 10px 0; color: var(--muted); }
.vip-oranos .v-divider{ border: 0; border-top: 1px solid var(--divider); margin: 8px 0; }
.vip-oranos .title-row{ display:flex; align-items:center; gap:14px; }
.vip-oranos .title-row .v-image{ width:80px; height:80px; border-radius:12px; overflow:hidden; background:#181a1b; display:flex; align-items:center; justify-content:center; border:1px solid #1f2937; }
.vip-oranos h2{ margin:0; font-size:28px; font-weight:800; letter-spacing:.3px; color:#e5e7eb; }
.vip-oranos .desc{ color:#cbd5e1; font-size:14.5px; }
.vip-oranos .v-list-item{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; }
.vip-oranos .v-list-item__avatar{ width:50px; min-width:50px; height:50px; border-radius:8px; overflow:hidden; background:#181a1b; display:flex; align-items:center; justify-content:center; border:1px solid #1f2937; }
.vip-oranos .v-list-item__content{ flex:1; min-width:0; }
.vip-oranos .v-list-item__title{ font-weight:700; color:#e5e7eb; }
.vip-oranos .v-list-item__subtitle{ margin-top:8px; color:#cbd5e1; }
.vip-oranos .v-list-item--disabled{ opacity:.7; filter:grayscale(.05); }
.vip-oranos .lock{ display:inline-flex; align-items:center; gap:6px; color:#94a3b8; font-size:13px; }
.vip-oranos .v-progress-linear{ position:relative; height:12px; border-radius:8px; overflow:hidden; background:#1f2937; }
.vip-oranos .v-progress-linear__track{ position:absolute; inset:0; background:#1f2937; }
.vip-oranos .v-progress-linear__bar{
  position:absolute; top:0; bottom:0; right:0; width:0%;
  background: linear-gradient(90deg, #3b2a01, #a16207 45%, #f59e0b);
  box-shadow: 0 0 12px #f59e0b33 inset; transition: width .6s cubic-bezier(.4,0,.2,1);
}
.vip-oranos .numbers{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.vip-oranos .numbers small{ color:#cbd5e1; }
.vip-oranos .numbers .spacer{ flex:1; }
.vip-oranos .chip{ background:#3b2a01; color:#fde68a; border:1px solid #b45309; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800; }
.vip-oranos .levels-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:18px; }
.vip-oranos .lvl-card{ background:#181a1b; border:1px solid #1f2937; border-radius:10px; padding:10px; }
.vip-oranos .lvl-card .name{ font-weight:700; color:#f59e0b; }
.vip-oranos .lvl-card .meta{ color:#94a3b8; font-size:12px; margin-top:6px; }
@media (min-width: 768px){ .vip-oranos .levels-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.vip-oranos .my-outer{ padding: 0 20px 200px; }

/* Favorites page – Dark */
.favorites-page .section-wrap{ background:#181a1b !important; color:#e5e7eb; box-shadow:none !important; }
.favorites-page h3{ color:#e5e7eb; }
.favorites-page .search-wrapper{
  width:100%; max-width:100%;
  background:#181a1b; border:1px solid #1f2937; color:#e5e7eb;
  border-radius:40px; padding:.6rem 1.2rem; margin-bottom:22px;
}
.favorites-page .search-wrapper input{
  border:none; background:transparent; outline:none; width:100%;
  text-align:right; font-size:15px; color:#e5e7eb;
}
.favorites-page .product-box .card{
  background:#181a1b; color:#e5e7eb; border:1px solid #1f2937;
  border-radius:16px; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.favorites-page .product-box .card:hover{
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.55); border-color:#334155;
}
.favorites-page .card-img-top{ width:100%; height:200px; object-fit:cover; display:block; }
.favorites-page .card-body{ padding:12px 12px 14px; text-align:center; }
.favorites-page .card-title{ color:#e5e7eb; font-size:1.05rem; font-weight:700; margin:0 0 6px 0; }
.favorites-page .card-price{ color:#34d399; font-weight:700; margin:0 0 6px 0; }
.favorites-page .soft-pill{
  display:inline-flex; align-items:center; gap:8px; font-size:12px;
  background:#181a1b; border:1px solid #1f2937; color:#e5e7eb;
  border-radius:999px; padding:6px 10px;
}
#modalProductDesc{ background: #3b2a01; color: #fde68a; border-radius: 8px; padding: 8px 12px; border:1px solid #b45309; }
.favorites-page .btn-remove-fav{
  position:absolute; top:8px; left:10px; z-index:2;
  border:1px solid #b91c1c; background:#ef4444; color:#fff;
  border-radius:999px; padding:6px 10px; font-size:13px; line-height:1;
  transition:background .15s ease;
}
.favorites-page .btn-remove-fav:hover{ background:#dc2626; }
.favorites-page .modal-content{ background:#181a1b; color:#e5e7eb; border:1px solid #1f2937; border-radius:16px; }
.favorites-page .btn-close{ filter: invert(1); }
.favorites-page .form-control{ background:#1f2223; border:1px solid #1f2937; color:#e5e7eb; }
.favorites-page .form-control:focus{ color:#e5e7eb; background:#1f2223; border-color:#7f83ff; box-shadow:none; }
.favorites-page .btn-outline-danger{ border-color:#ef4444; color:#fca5a5; }
.favorites-page .btn-outline-danger:hover{ background:#3a0d0d; color:#fecaca; }
.favorites-page .btn-success{ background:#16a34a; border-color:#16a34a; color:#062a1f; }
.favorites-page .btn-success:hover{ background:#15803d; color:#041b12; }

/* Notifications – Dark */
.notifs-page .section-wrap{ background:#181a1b !important; box-shadow:none !important; color:#e5e7eb; }
.notifs-page h4{ color:#e5e7eb; }
.notifs-page .notif-card{
  background:#181a1b; color:#e5e7eb; border:1px solid #1f2937; border-radius:16px;
  padding:14px 16px; display:flex; align-items:center; gap:14px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.notifs-page .notif-card:hover{
  transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.55); border-color:#334155;
}
.notifs-page .thumb{
  width:64px; height:64px; border-radius:10px; object-fit:cover; flex:0 0 auto;
  background:#1f2223; border:1px solid #1f2937;
}
.notifs-page .meta{ flex:1 1 auto; min-width:0; }
.notifs-page .title{ font-weight:700; font-size:15px; margin:0 0 6px; color:#e5e7eb; }
.notifs-page .msg{ margin:0; color:#cbd5e1; line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.notifs-page .date{ font-size:12px; opacity:.85; margin-top:6px; color:#94a3b8; }
.notifs-page .actions{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:210px; }
.notifs-page .badge-soft{
  border-radius:999px; padding:6px 10px; font-weight:700; min-width:110px; text-align:center;
  background:#181a1b; border:1px solid #1f2937; color:#e5e7eb;
}
.notifs-page .badge-unread{ background:#3b2a01; color:#fde68a; border-color:#b45309; }
.notifs-page .badge-read{ background:#052e1a; color:#34d399; border-color:#065f46; }
.notifs-page .btn-toggle{
  border:1px solid #334155; background:#181a1b; color:#e5e7eb;
  border-radius:10px; padding:8px 12px; font-size:13px;
}
.notifs-page .btn-toggle:hover{ background:#181a1b; }
.notifs-page .btn-toggle.read{ border-color:#14532d; }
.modal-dark .modal-footer{ border-top:1px solid #1f2937; }
@media (max-width: 576px){ .notifs-page .actions{ align-items:stretch; min-width:0; } }

/* Topup – Dark */
.topup-page .bg-white.rounded.shadow-sm{ background:#1f2223 !important; }
.topup-page h5, .topup-page h3, .topup-page h4{ color:#e5e7eb; }
.topup-page{ direction: rtl; }

/* بطاقات اختيار الطريقة */
.method-option{
  background:#181a1b !important;
  border:1px solid #1f2937 !important;
  border-radius:16px !important;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
  box-shadow:0 2px 10px rgba(0,0,0,.45) !important;
}
.method-option:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.55) !important; border-color:#334155 !important; }
.method-option img{ background:#181a1b !important; }
.method-option > div[style*="position: absolute; bottom: 0;"]{
  background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%) !important;
  padding: 12px 10px 10px !important;
}
.method-option > div[style*="position: absolute; bottom: 0;"] strong{
  color:#e5e7eb !important; font-weight:700; letter-spacing:.2px;
}

/* كرت النموذج + زرار */
.card{ background:#181a1b; border:1px solid #1f2937; border-radius:16px; }
.card.shadow-sm{ box-shadow:0 12px 40px rgba(0,0,0,.5) !important; }

/* Payeer-like skin – Dark */
.payeer-ui .form-label{ color:#e5e7eb !important; }
.pf-pill, .pf-pill-plain, .payeer-ui .form-control, .payeer-ui .form-select{
  background:#1f2223 !important; border:1px solid #1f2937 !important; color:#e5e7eb !important;
  border-radius:28px !important; padding:14px 18px !important; box-shadow:none !important; caret-color:#e5e7eb;
}
.payeer-ui .form-control::placeholder{ color:#64748b !important; }
.payeer-ui .form-control:focus, .payeer-ui .form-select:focus{
  border-color:#7f83ff !important; box-shadow:0 0 0 3px rgba(127,131,255,.18) !important; outline:none !important;
}
[data-copy] { cursor: pointer; }
.copied-twinkle { outline: 2px solid #7f83ff; box-shadow: 0 0 0 3px rgba(127,131,255,.18); transition: box-shadow .15s ease, outline-color .15s ease; }
.pf-pill{ position:relative; padding-left:58px !important; direction: rtl; }
.pf-pill::before{
  content: attr(data-prefix);
  position:absolute; left:10px; top:50%; transform: translateY(-50%);
  width:36px; height:36px; border-radius:999px; background:#181a1b; border:1px solid #1f2937;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#e5e7eb;
}
.pf-pill-plain{ padding-left:18px !important; }
#discount-output .form-control{ background:#052e1a !important; border-color:#14532d !important; color:#d1fae5 !important; border-radius:28px !important; }
#selected-method-notes,
#wallet-info-box .input-group .form-control.bg-light,
#min-amount-display,
#discount-info-box,
#converted-usd-box {
  background:#181a1b !important; color:#e5e7eb !important; border:1px solid #1f2937 !important; border-radius:14px !important;
}
#wallet-addresses-list .input-group .form-control.bg-light{
  background:#1f2223 !important; border-color:#1f2937 !important; color:#e5e7eb !important; border-radius:16px !important;
}
#wallet-addresses-list .btn{ border-color:#334155 !important; color:#e5e7eb !important; border-radius:12px !important; }
#wallet-addresses-list .btn:hover{ background:#181a1b !important; }
.pf-file{ position:relative; }
.pf-file::after{ content:"📎"; position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.9; }
.payeer-ui .btn[type="submit"]{
  background:#e5e7eb !important; border:0 !important; color:#1f2223 !important; border-radius:28px !important; padding:14px 0 !important; font-weight:800 !important;
}
.payeer-ui .btn[type="submit"]:hover{ filter:brightness(0.98); }
.payeer-ui .btn.btn-outline-secondary{ border-color:#334155 !important; color:#e5e7eb !important; border-radius:999px !important; }
.payeer-ui .btn.btn-outline-secondary:hover{ background:#181a1b !important; }
.alert-info{ background:#0a1a33; color:#93c5fd; border:1px solid #1d4ed8; }
.row.g-3{ --bs-gutter-x:1rem; --bs-gutter-y:1rem; }
@media (max-width:576px){
  .payeer-ui{ padding:18px !important; }
  .method-option{ height:180px !important; }
}

/* Vuetify-like dark rounded file input -> Dark */
.vu-file{ position:relative; direction:rtl; }
.vu-file.theme-dark .vu-file__control{
  background:#1f2223; border:1px solid #1f2937; height:56px; border-radius:28px;
  display:flex; align-items:center; padding:0 16px; box-shadow:none; transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.vu-file.theme-dark .vu-file__control:focus{ outline:none; }
.vu-file.theme-dark.focus .vu-file__control{ border-color:#7f83ff; box-shadow:0 0 0 3px rgba(127,131,255,.18); }
.vu-file__native{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.vu-file__icon{ background:transparent; border:0; padding:0; margin-inline-start:4px; margin-inline-end:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:none; }
.vu-file__svg{ width:22px; height:22px; fill:#cbd5e1; opacity:.9; }
.vu-file__label{ position:absolute; right:20px; left:auto; color:#94a3b8; font-size:14px; transition: transform .15s ease, font-size .15s ease, opacity .15s ease; pointer-events:none; margin: 2rem; }
html[dir="ltr"] .vu-file__label{ left:20px; right:auto; }
.vu-file__text{ flex:1; text-align:center; color:#e5e7eb; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.copy-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #e5e7eb;
  color: #1f2223;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  z-index: 9999;
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.vu-file.has-file .vu-file__label,
.vu-file.focus .vu-file__label{ transform: translateY(-18px); font-size:12px; opacity:.95; }
.vu-file.theme-dark .vu-file__control:hover{ background:#181a1b; }
.vu-file.error .vu-file__control{ border-color:#e57373; box-shadow:0 0 0 3px rgba(229,115,115,.12); }

/* بطاقات الطريقة على الموبايل */
@media (max-width: 576px) {
  .method-option {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 140px;
    overflow: hidden;
  }
  .method-option img,
  .method-option > div[style*="width: 100%; height: 100%"] {
    width: 100% !important;
    height: 100px !important;
  }
  .method-option > div[style*="position: absolute; bottom: 0;"] {
    position: relative !important;
    padding: 10px !important;
    text-align: center !important;
  }
  .method-option > div[style*="position: absolute; bottom: 0;"] strong {
    display: block;
    color: #e5e7eb !important;
    font-size: 1rem !important;
  }
}

/* Theme switch – Dark */
.theme-wrapper{ display: inline-flex; align-items: center; gap: 6px; }
.theme-switch{ position: relative; inline-size: 62px; block-size: 32px; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 9999px; outline: none; }
.theme-switch__track{ position: absolute; inset: 0; background: #334155; border-radius: 9999px; transition: background .25s ease; }
.theme-switch__knob{
  position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  inline-size: 28px; block-size: 28px; background: #e5e7eb; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .25s ease, background .25s ease;
}
.theme-switch.is-dark .theme-switch__track{ background: #64748b; }
.theme-switch.is-dark .theme-switch__knob{ background: #cbd5e1; }
html[dir="rtl"] .theme-switch.is-dark .theme-switch__knob{ transform: translateX(-30px); }
html:not([dir="rtl"]) .theme-switch.is-dark .theme-switch__knob{ transform: translateX(30px); }
.text-end { text-align: center !important; }
.fa-moon { color: #e5e7eb; }

/* Sidebar (Dark) */
#sidebar{
  width:280px; max-width:100%;
  height:100vh;
  background:#181a1b;
  border-inline-end:1px solid #1f2937;
  padding:18px 14px; direction:rtl; color:#e5e7eb;
  box-shadow:0 14px 28px rgba(0,0,0,.55);
}

.sb-center{text-align:center}
.sb-hr{border:0;border-top:1px solid #1f2937;margin:14px 0}

.sb-logo{height:38px; object-fit:contain; display:block; margin:0 auto 6px; filter:brightness(.9)}
.sb-avatar{
  width:70px;height:70px;border-radius:50%;object-fit:cover;
  border:1px solid #1f2937;
  box-shadow:0 8px 22px rgba(0,0,0,.55)
}
.sb-name{font-weight:800;margin:8px 0 0;color:#e5e7eb}
.sb-id{font-size:.85rem; color:#94a3b8}
.vip-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  background:#3b2a01;border:1px solid #b45309;
  font-weight:700;font-size:.8rem;margin-top:8px;color:#fde68a
}
.vip-chip i{color:#f59e0b}

.sb-balance{color:#e5e7eb;font-weight:800;margin:8px 0 0;font-size:1.15rem}
.sb-balance small{color:#94a3b8}

.icon-row{display:flex;justify-content:center;gap:22px;margin:12px 0 6px}
.icon-btn{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;background:#181a1b;border:1px solid #334155;
  transition:.15s;font-size:18px;color:#e5e7eb;
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.55);background:#181a1b}
.icon-btn.text-danger{color:#fca5a5}

.curr-speed { position: relative; display:flex; justify-content:center; }
.pill-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#3b2a01; border:1px solid #f59e0b; color:#fde68a;
  padding:8px 14px; border-radius:999px; font-weight:800; font-size:.85rem;
  cursor:pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.pill-btn i{ font-size:14px }

.curr-menu{
  position:absolute; bottom:calc(100% + 8px); right:4px; left:4px;
  background:#181a1b; border:1px solid #1f2937; border-radius:12px;
  padding:12px; width:auto; max-width:260px; color:#e5e7eb;
  display:none; box-shadow:0 14px 32px rgba(0,0,0,.6);
}
.curr-menu.open{ display:block; }
.curr-chip{
  display:inline-block; margin:6px 6px; padding:7px 12px; border-radius:999px;
  background:#052e1a; color:#d1fae5; font-weight:700; border:1px solid #14532d;
  cursor:pointer; font-size:.85rem;
}
.curr-chip:hover{filter:brightness(1.02)}
.curr-chip.active{ background:#064e3b; border-color:#16a34a; color:#d1fae5; }

.side-nav{list-style:none;padding:0;margin:12px 0}
.side-nav li{margin-bottom:8px}
.side-link{
  display:flex;align-items:center;justify-content:flex-start; gap:12px;
  padding:14px 16px;border-radius:14px;margin:4px;background:#181a1b;border:1px solid transparent;
  font-weight:800;text-decoration:none;color:#e5e7eb;transition:.12s
}
.side-link:hover{background:#181a1b;border-color:#1f2937}
.side-link.active{background:#1f2937;border-color:#334155}
.side-link .ico{ font-size:18px; width:20px; text-align:center; }
.ico-home{color:#34d399}
.ico-topup{color:#60a5fa}
.ico-bills{color:#93c5fd}
.ico-wallet{color:#f59e0b}
.ico-orders{color:#fca5a5}
.ico-agents{color:#60a5fa}
.ico-shield{color:#10b981}
.ico-info{color:#60a5fa}

.socials{display:flex;justify-content:center;gap:26px;margin:14px 0 6px}
.socials a{font-size:22px;color:#cbd5e1}
.socials .wa{color:#25d366}.socials .ig{color:#e1306c}.socials .tg{color:#229ED9}

@media (max-height:720px){
  .sb-center{ zoom: .95; }
}

/* Guest drawer – Dark */
.guest-drawer{
  width:280px; max-width:100%;
  height:100vh;
  background:#181a1b;
  border-inline-end:1px solid #1f2937;
  padding:18px 14px; direction:rtl; color:#e5e7eb;
  box-shadow:0 14px 28px rgba(0,0,0,.55);
}

/* بطاقة تسجيل الدخول */
.login-card{
  background:#181a1b;
  border:1px solid #1f2937;
  border-radius:16px; padding:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.55);
}
.login-title{ color:#e5e7eb; font-weight:800; margin:0 0 6px; font-size:1.15rem; }
.login-sub{ color:#cbd5e1; margin:0 0 12px; line-height:1.6 }

/* الأزرار */
.btn-blue, .btn-green{
  display:block; width:100%; text-align:center; text-decoration:none;
  padding:9px 14px; border-radius:999px; margin-bottom:8px;
  font-weight:800; transition:.15s; border:1px solid transparent;
}
.btn-blue{
  background:#271e97; color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);
}
.btn-blue:hover{ filter:brightness(0.95) }
.btn-green{
  background:#28cb69; color:#0b2917;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);
}
.btn-green:hover{ filter:brightness(0.95) }

.btn-google{
  position:relative; display:block; width:100%;
  background:#1f2223; border:1px solid #1f2937; border-radius:999px;
  padding:8px 14px; text-decoration:none; font-weight:800; color:#e5e7eb;
}
.btn-google__text{ display:block; text-align:center; }
.btn-google__g{
  position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:#1f2223; border:1px solid #1f2937;
  display:flex; align-items:center; justify-content:center; color:#e5e7eb;
}

.v-divider{ border:0; border-top:1px solid #1f2937; margin:14px 0 }
.v-list{ list-style:none; padding:0; margin:0 }
.v-item{
  display:flex; align-items:center; margin: 4px; justify-content:flex-start; gap:10px;
  padding:14px; border-radius:14px;
  font-weight:800; color:#e5e7eb; text-decoration:none;
  background:#181a1b; border:1px solid transparent; transition:.12s;
}
.v-item:hover{ background:#181a1b; border-color:#1f2937 }
.v-item.is-active{ background:#1f2937; border-color:#334155 }
.v-title{ flex:1; text-align:right; color:#e5e7eb }
.v-ico{ font-size:16px; width:20px; text-align:center; color:inherit }
.v-ico--success{ color:#34d399 }
.v-ico--info{ color:#60a5fa }
.v-ico--shield{ color:#10b981 }
.v-ico--doc{ color:#93c5fd }
.socials{ display:flex; justify-content:center; gap:24px; margin:14px 0 0 }
.s{ font-size:22px; color:#94a3b8; transition:.15s }
.s:hover{ color:#e5e7eb }
.s-fb{ color:#1877F2 } .s-ig{ color:#E1306C } .s-tg{ color:#229ED9 }
@media (max-height:720px){ .login-card{ padding:12px } .v-item{ padding:12px } }

/* Auth Card – Dark */
.rounded-xl{ border-radius: 18px; }
.elevation-0{ box-shadow:none; }
.theme-dark{ color:#e5e7eb; }
.outlined{ border:1px solid rgba(255,255,255,.06); }
.vu-auth-card{
  background:#1f2223;
  border:1px solid rgba(148,163,184,.18);
  padding:16px 16px 14px;
  direction:rtl;
}
.vu-auth-card__title h3{
  margin:0; font-weight:800; color:#e5e7eb; text-shadow:none;
}
.vu-auth-card__text{ margin:8px 0 12px; }
.vu-auth-card__text p{ margin:0; color:#cbd5e1; line-height:1.6; }
.vu-auth-card__actions .v-btn{
  display:block; width:100%; border-radius:999px; font-weight:800; text-decoration:none; border:0; height:40px; line-height:40px;
  transition:filter .12s ease, transform .06s ease;
}
.vu-auth-card__actions .v-btn:hover{ filter:brightness(.98) }
.vu-auth-card__actions .v-btn:active{ transform:translateY(1px) }
.v-btn--block{ width:100% } .v-btn--rounded{ border-radius:999px } .v-btn--has-bg{ background:#000 }
.v-btn.success{ background:#28cb69; color:#0b2917; box-shadow:inset 0 -2px 0 rgba(0,0,0,.25); }
.v-btn.white{ background:#e5e7eb; color:#111; border:1px solid rgba(255,255,255,.12); }
.black--text{ color:#111 !important }
.v-btn__content{ display:flex; align-items:center; justify-content:center; gap:10px; height:100%; }
.v-image{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.v-image img{ width:100%; height:100%; object-fit:cover }
.guest-drawer .vu-auth-card{ margin-top:4px; }
.guest-drawer .vu-auth-card .mb-3{ margin-bottom:.75rem !important; }
.v-card, .v-sheet{ border-radius:18px; }

/* غلاف عام مثل صفحة الطلبات */
.auth-page .bg-white.rounded.shadow-sm{
  background:#070410 !important;
  box-shadow:none !important;
}

/* صندوق تسجيل الدخول = نفس كرت صفحة الطلبات */
.login-box{
  color:#e7e7ee;
  padding:28px;
  width:100%;
  max-width:90%;
  text-align:center;
  position:relative;
}

/* اللوجو */
.login-box img.logo{
  max-width:140px; margin-bottom:16px;
  filter: drop-shadow(0 2px 20px #005685);
  transition: transform .25s ease, filter .25s ease;
}
.login-box img.logo:hover{
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

/* العناوين بنفس نبرة صفحة الطلبات */
.login-box h2{
  margin-bottom:14px; font-weight:800; color:#f2f2f7; letter-spacing:.2px;
}

/* الحقول */
.form-control{
  background:#0e0f15;
  border:1px solid #2b2b35;
  color:#e7e7ee;
  border-radius:10px;
}
.form-control::placeholder{ color:#9b9bb2; }
.form-control:focus{
  background:#0e0f15; color:#fff;
  border-color:#4b4bff;
  box-shadow:none;
}

/* زر الدخول — متوافق مع كلاس الأزرار بصفحة الطلبات */
.btn-login{
  background:#005685;
  border-color:#005685;
  border-radius:10px;
  font-weight:800;
  color:#fff;
}
.btn-login:hover{ background:#074b6f; color:#fff; }

/* رسالة الخطأ/الفلاش بنفس روح التنبيهات الداكنة */
.error, .alert-info{
  text-align:center; direction:rtl;
  border-radius:12px; margin-bottom:15px;
  border:1px solid #2a5e3c;
}
.error{
  background:#3d1c1c; color:#ffbcbc; border-color:#7c2a2a;
}
.alert-info{
  background:#0e2237; color:#cfe9ff; border-color:#244a6b;
}

/* رابط الإغلاق */

/* روابط التسجيل */
.register-link{ margin-top:18px; font-weight:700; }
.register-link a{ text-decoration:none; color:#cfd0e6; }
.register-link a span{ color:#41de8b; } /* لمسة خضرا مثل الpill الناجحة */
.register-link a:hover span{ text-decoration:underline; }

/* أيقونة إظهار كلمة المرور */
.toggle-password{ color:#9b9bb2 !important; }
.toggle-password:hover{ color:#e7e7ee !important; }

/* دعم RTL كامل */
[dir="rtl"] .text-start{ text-align:right !important; }



/* غلاف عام */
.register-page .bg-white.rounded.shadow-sm{
  background:#070410 !important; box-shadow:none !important;
}

/* صندوق التسجيل = نفس كرت الطلبات/الدخول */
.register-box{
  color:#e7e7ee;
  width:100%; max-width:90%; text-align:center; position:relative;
}

/* اللوجو */
.register-box img.logo{
  max-width:140px; margin-bottom:16px;
  filter: drop-shadow(0 2px 20px #005685);
  transition: transform .25s ease, filter .25s ease;
}
.register-box img.logo:hover{ transform:scale(1.05); filter:drop-shadow(0 4px 8px rgba(0,0,0,.3)); }

/* العناوين */
.register-box h2{
  margin-bottom:14px; font-weight:800; color:#f2f2f7; letter-spacing:.2px;
}

/* الحقول */
.form-control{
  background:#0e0f15; border:1px solid #2b2b35; color:#e7e7ee; border-radius:10px;
}
.form-control::placeholder{ color:#9b9bb2; }
.form-control:focus{ background:#0e0f15; color:#fff; border-color:#4b4bff; box-shadow:none; }

/* زر التسجيل */
.btn-success{
  background:#005685; border-color:#005685; border-radius:10px; font-weight:800; color:#fff;
}
.btn-success:hover{ background:#074b6f; color:#fff; }

/* رسائل */
.message.error{
  text-align:center; direction:rtl; border-radius:12px; margin-bottom:15px;
  background:#3d1c1c; color:#ffbcbc; border:1px solid #7c2a2a; padding:10px;
}

/* رابط الإغلاق */
.close-btn{
  position:absolute; top:14px; left:14px; font-size:20px; color:#bcbcd1; text-decoration:none;
  transition: color .2s ease;
}
.close-btn:hover{ color:#fff; }

/* روابط تسجيل الدخول */
.login-link{ margin-top:18px; font-weight:700; }
.login-link a{ text-decoration:none; color:#cfd0e6 !important; }
.login-link a span{ color:#41de8b; }
.login-link a:hover span{ text-decoration:underline; }

/* أيقونة إظهار كلمة المرور */
.toggle-password{ color:#9b9bb2 !important; }
.toggle-password:hover{ color:#e7e7ee !important; }

/* دعم RTL */
[dir="rtl"] .text-start{ text-align:right !important; }

/* الغلاف */
#orderModal .modal-content{
  background:#0b0a12;
  border:1px solid #1c1b22;
  border-radius:22px;
  color:#e9e9f2;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
#orderModal .modal-body{ padding:24px; }
#orderModal .btn-close{ filter:invert(90%); }

/* شارة السعر العلوية (مثل الصور) */
#orderModal .badge.bg-darks{
  position:absolute; top:16px; right:20px;
  background:linear-gradient(180deg,#cdd2ec 0%,#9aa0ba 100%) !important;
  color:#0b0a12; font-weight:800;
  border-radius:999px; border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 14px rgba(0,0,0,.25);
  padding:8px 14px;
}

/* زر المفضلة */
#orderModal .favorite-btn{
  background:#1b1a24; border:1px solid #2a2934; color:#d9d9d9;
  border-radius:999px; padding:6px 12px; line-height:1;
}
#orderModal .favorite-btn:hover{ filter:brightness(1.07); }

/* العنوان */
#orderModal #modalProductName{
  color:#eaeaf5; font-weight:800; margin-top:28px;
}

/* الحقول (الكابسولة الداكنة) */
#orderModal .form-control,
#orderModal .form-select{
  background:#191822;
  border:1px solid #2a2934;
  color:#eaeaf5;
  border-radius:22px;
  padding:12px 16px;
  box-shadow:none !important;
}
#orderModal .form-control::placeholder{ color:#9da0b5; }
#orderModal .form-control:focus,
#orderModal .form-select:focus{
  outline:none; border-color:#5f63ff; box-shadow:0 0 0 3px rgba(95,99,255,.15) !important;
}

/* ===== الكمية: نفس شكل الصور بالضبط ===== */
#orderModal #quantityWrapper{ text-align:center; }
#orderModal #quantityWrapper .form-label{
  color:#aeb0c4; font-size:12px; margin:0 8px 8px; display:inline-block;
  float:right; /* لصقها يميناً كما بالصورة */
}
#orderModal #quantityWrapper .d-flex{
  justify-content:space-between !important; align-items:center !important;
  gap:12px;
}
#orderModal #decreaseQty,
#orderModal #increaseQty{
  width:44px; height:44px; border-radius:50%;
  background:#ffc531; border:0; color:#222; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
#orderModal #orderQty{
  flex:1 1 auto; max-width:260px;
  height:44px; text-align:center; font-weight:700;
  background:#1d1c26; border:1px solid #2a2934; color:#fff;
  border-radius:22px; width:100% !important;
}
#orderModal #amountRangeText{
  color:#9da0b5 !important; margin-top:8px; display:block;
}

/* بطاقات “الإجمالي/العدد” المصمّمة مثل الصورة
   (عندما تريد إظهارها لاحقاً يمكنك توليدها داخل #dynamicFields؛
   هنا نضبط الشكل في حال ظهرت كعناصر .pill) */
#orderModal .pill-row{ display:flex; gap:16px; margin-bottom:12px; }
#orderModal .pill{
  flex:1; background:#14141d; border:1px solid #2a2934; border-radius:22px;
  padding:12px 16px; text-align:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
#orderModal .pill-caption{ color:#a9a9bc; font-size:12px; margin-bottom:4px; }
#orderModal .pill-value{ color:#fff; font-weight:800; font-size:16px; }

/* الأزرار السفلية */
#orderModal .btn-outline-danger{
  background:transparent; color:#ff6b6b; border:1px solid #ff6b6b;
  border-radius:22px; padding:12px 0; font-weight:700;
}
#orderModal .btn-outline-danger:hover{ background:#8a2c2c; color:#fff; }

#orderModal .btn-success{
  border:0; border-radius:22px; padding:12px 0; font-weight:800;
  background:linear-gradient(135deg,#c4c7dd 0%,#8f90b0 100%);
  color:#0e0e15; box-shadow:inset 0 6px 18px rgba(141,141,198,.25);
}
#orderModal .btn-success:hover{ filter:brightness(1.06); }

/* صندوق الوصف أسفل */
#orderModal #modalProductDesc{
  background:#1a1923 !important;
  color:#d6d7ee !important;
  border:1px solid #2a2934;
  border-radius:10px;
  padding:10px 12px;
  font-size:13.5px;
}

/* تحسينات صغيرة للجوال */
@media (max-width:420px){
  #orderModal .modal-body{ padding:20px; }
  #orderModal #orderQty{ max-width:none; }
  #orderModal .pill-row{ gap:10px; }
}
/* === هيكل المودال العام === */
#orderModal .modal-content{
  background:#0b0a12; border:1px solid #1c1b22; border-radius:22px;
  color:#e9e9f2; overflow:hidden;
}
#orderModal .modal-body{ padding:22px; }
#orderModal .btn-close{ filter:invert(90%); }

/* شارة السعر أعلى اليسار (RTL) */
#orderModal #modalProductPrice{
  position:absolute; top:16px; left:20px; right:auto;
  background:linear-gradient(180deg,#aeb3ce 0%,#8d90a9 100%) !important;
  color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:8px 14px; font-weight:800;
  box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.15);
}

/* عنوان المنتج (كما بالصورة) */
#orderModal #modalProductName{ color:#eaeaf5; font-weight:800; margin-top:28px; }

/* كبسولات الإجمالي/العدد */
.om-pill-row{ display:flex; gap:16px; margin:12px 0 14px; }
.om-pill{
  flex:1; background:#14141d; border:1px solid #2a2934; border-radius:22px;
  padding:12px 16px; text-align:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.om-pill-cap{ color:#a9a9bc; font-size:12px; margin-bottom:4px; }
.om-pill-val{ color:#ffffff; font-weight:800; font-size:16px; }

/* عدّاد الكمية (الأصفر + الحقل الغامق) */
.om-qty-label{ text-align:right; color:#9ea1b8; font-size:12px; margin:8px 10px 6px; }
.om-qty-box{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.om-qty-btn{
  width:44px; height:44px; border-radius:50%;
  background:#ffc531; border:none; color:#222; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25); cursor:pointer;
}
.om-qty-input{
  flex:1; height:44px; text-align:center; border-radius:22px;
  background:#1d1c26; border:1px solid #2a2934; color:#fff; font-weight:700; outline:none;
}
.om-qty-input::-webkit-outer-spin-button,
.om-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.om-range{ color:#9da0b5 !important; display:block; margin-top:6px; }

/* الحقول الديناميكية كبسولات */
#orderModal .form-control,#orderModal .form-select{
  background:#191822; border:1px solid #2a2934; color:#eaeaf5;
  border-radius:999px; padding:14px 18px; box-shadow:none !important;
}
#orderModal .form-control::placeholder{ color:#9da0b5; }
#orderModal .form-control:focus,#orderModal .form-select:focus{
  outline:none; border-color:#5f63ff; box-shadow:0 0 0 3px rgba(95,99,255,.15) !important;
}

/* الأزرار السفلية */
#orderModal .btn-outline-danger{
  background:transparent; color:#ff6f6f; border:1px solid #ff6f6f;
  border-radius:22px; padding:12px 0; font-weight:700;
}
#orderModal .btn-outline-danger:hover{ background:#8a2c2c; color:#fff; }
#orderModal .btn-success{
  border:0; border-radius:22px; padding:12px 0; font-weight:800;
  background:linear-gradient(135deg,#c4c7dd 0%,#8f90b0 100%); color:#0e0e15;
  box-shadow:inset 0 6px 18px rgba(141,141,198,.25);
}
#orderModal .btn-success:hover{ filter:brightness(1.05); }

/* وصف المنتج (الصندوق البنفسجي الغامق) */
#orderModal #modalProductDesc{
  background:#1a1923 !important; color:#d6d7ee !important;
  border:1px solid #2a2934; border-radius:10px; padding:10px 12px; font-size:13.5px;
}

/* تجاوب */
@media (max-width:420px){ .om-pill-row{ gap:10px; } }
/* إجبار ترتيب العنوان يمين وزر المفضلة يسار */
#orderModal .om-head{ flex-direction: row-reverse; }

/* العنوان: محاذاة يمين ومن دون هوامش زائدة */
#orderModal #modalProductName{
  text-align: right;
  margin: 0;              /* يلغي margin-top القديمة */
  flex: 1;
  color:#eaeaf5;
  font-weight:800;
}

/* زر المفضلة رمادي أنيق */
#orderModal .favorite-btn{
  background:#2a2934;
  border:1px solid #3a3945;
  color:#cfcfcf;
  border-radius:999px;
  padding:6px 14px;
  font-size:16px;
  transition:.2s;
}
#orderModal .favorite-btn:hover{ background:#3a3945; color:#fff; }

/* تثبيت كبسولة السعر على اليسار كما في الصور وحسم التعارض */
#orderModal .badge.bg-darks{
  position:absolute;
  top:16px;
  left:20px !important;
  right:auto !important;
  background:linear-gradient(180deg,#aeb3ce 0%,#8d90a9 100%) !important;
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:8px 14px;
  font-weight:800;
  box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.15);
}
/* رأس المودال: كل المجموعة على يمين المودال */
#orderModal .om-head{
  display:flex;
  justify-content:flex-end;   /* يمين */
  align-items:center;
  width:100%;
  padding-right:2px;
  gap:10px;
  direction:rtl;              /* يبقي القلب ملاصقًا لاسم المنتج كما بالصورة */
}

/* العنوان + القلب */
#orderModal .om-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  color:#eaeaf5;
  font-weight:800;
  text-align:right;
}

/* القلب الرمادي الافتراضي */
#orderModal .om-heart{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:36px; height:36px;
  border-radius:50%;
  border:0;
  background:#2a2934;   /* رمادي داكن */
  color:#bdbec7;        /* لون الأيقونة */
  padding:0;
  cursor:pointer;
  transition:filter .15s ease, transform .05s ease, background .2s ease, color .2s ease;
}
#orderModal .om-heart:hover{ filter:brightness(1.08); }
#orderModal .om-heart:active{ transform:scale(.97); }

/* الحالة بعد الإضافة للمفضلة (يتغير المظهر فقط بعد نجاح الطلب) */
#orderModal .om-heart.is-fav{
  background:#595b75;   /* تدرج/رمادي أغمق مثل الصورة */
  color:#ffffff;
}
.product-box .card-img-top {
  width: 100%;
  aspect-ratio: 1 / 1 !important; /* مستطيل أفقي */
  border-radius: 0.5rem 0.5rem;
}
/* === Category Hero (بنر الفئة) === */
.category-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(12,48,91,.12);
}
.category-hero img{
  width: 100%;
  height: clamp(180px, 28vw, 320px);
  display: block;
}
.category-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 18px 22px;
}
.category-hero__overlay h2{
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.fw-bold{
  color: #ffffff;
}

.bg-light {
background-color: rgb(11 18 32) !important;
}
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* تمام */
}

/* ▼ لا تعملها 100vh هون */
#mainContent {
  transition: all 0.3s ease;
  margin-top: 64px;
  margin-right: 280px;
  flex: 1 0 auto;    /* بتمدّد وبدفع الفوتر لتحت */
  display: flex;
  flex-direction: column;
  /* min-height: 100vh;  ← احذفها */
}

/* وقت السايدبار مخفية */
.sidebar-hidden #mainContent {
  margin-right: 0 !important;
  width: 100% !important;
}

/* الفوتر */
footer {
  /* ستايلك المعتاد */
  padding: 15px;
  text-align: center;
  /* margin-top: auto;  ← اختياري؛ بيساعد لو ما عندك main بـ flex:1 */
}

.bg-white{
    background-color: #1f2223 !important;
}
.text-dark{color:#fff !important;}