/* ================================================================
   FSK THEME v2 — تصميم احترافي كامل
   الخط: IBM Plex Sans Arabic (فقط)
   الأيقونات: Flaticon UIcons
   اللون الأساسي: #EA1E63
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/2.5.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-brands/css/uicons-brands.css');

/* ================================================================
   متغيرات اللون — وضع فاتح
   ================================================================ */
html {
  --fsk-50:  #f9fafb;
  --fsk-100: #ebecee;
  --fsk-200: #dcdfe3;
  --fsk-300: #c7cbd0;
  --fsk-400: #b9bfc4;
  --fsk-500: #3d3d43;
  --fsk-600: #343438;
  --fsk-700: #2b2b2f;
  --fsk-800: #202024;
  --fsk-900: #1a1a1d;
  --fsk-blue-100: #dbeafe;
  --fsk-code-color-1: #687282;
  --fsk-code-color-2: #47987b;

  /* اللون الأساسي */
  --p:       #EA1E63;
  --p-dark:  #c0134f;
  --p-light: #ff4081;
  --p-05:    rgba(234,30,99,0.05);
  --p-10:    rgba(234,30,99,0.10);
  --p-20:    rgba(234,30,99,0.20);

  /* سطوح */
  --bg:         var(--fsk-50);
  --surface:    #ffffff;
  --surface-2:  var(--fsk-100);
  --border:     var(--fsk-200);
  --border-2:   var(--fsk-300);
  --text-1:     var(--fsk-900);
  --text-2:     var(--fsk-500);
  --text-3:     var(--fsk-400);

  /* sidebar */
  --sidebar-bg:       #13141a;
  --sidebar-surface:  rgba(255,255,255,0.05);
  --sidebar-border:   rgba(255,255,255,0.06);
  --sidebar-text:     rgba(255,255,255,0.55);
  --sidebar-text-2:   rgba(255,255,255,0.25);
  --sidebar-hover:    rgba(255,255,255,0.07);
  --sidebar-active:   rgba(234,30,99,0.15);

  /* ظلال */
  --sh-xs: 0 1px 3px rgba(0,0,0,0.05);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.07);
  --sh:    0 4px 16px rgba(0,0,0,0.09);
  --sh-lg: 0 8px 32px rgba(0,0,0,0.13);
  --sh-xl: 0 16px 56px rgba(0,0,0,0.18);

  /* radii */
  --r-xs:   6px;
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* انتقال */
  --ease:  cubic-bezier(0.4,0,0.2,1);
  --t:     0.18s var(--ease);
  --t-lg:  0.32s var(--ease);

  /* ابعاد */
  --sidebar-w: 252px;
  --header-h:  58px;
}

/* وضع داكن */
html.dark {
  --fsk-50:  #14161d;
  --fsk-100: #1a1e26;
  --fsk-200: #222a38;
  --fsk-300: #2b3445;
  --fsk-400: #3a4458;
  --fsk-500: #7d8da6;
  --fsk-600: #c7cbd0;
  --fsk-700: #dcdfe3;
  --fsk-800: #ebecee;
  --fsk-900: #f9fafb;
  --fsk-blue-100: #c6d8f7;
  --fsk-code-color-1: #8fa3c5;
  --fsk-code-color-2: #6dbfa7;

  --bg:         #0d0f14;
  --surface:    var(--fsk-50);
  --surface-2:  var(--fsk-100);
  --border:     var(--fsk-200);
  --border-2:   var(--fsk-300);
  --text-1:     var(--fsk-900);
  --text-2:     var(--fsk-500);
  --text-3:     var(--fsk-400);

  --sh-xs: 0 1px 3px rgba(0,0,0,0.25);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.35);
  --sh:    0 4px 16px rgba(0,0,0,0.45);
  --sh-lg: 0 8px 32px rgba(0,0,0,0.55);
  --sh-xl: 0 16px 56px rgba(0,0,0,0.65);
}

/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text-1);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-lg), color var(--t-lg);
}

/* تطبيق الخط على الكل */
*, *::before, *::after {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}

a { color: var(--p); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--p-dark); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: 'IBM Plex Sans Arabic', sans-serif; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--p); }
::selection { background: var(--p-20); color: var(--p-dark); }

/* ================================================================
   LAYOUT
   ================================================================ */
.page-container { display: flex; min-height: 100vh; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform var(--t-lg);
  border-left: 1px solid rgba(255,255,255,0.04);
}

.sidebar-content {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 199;
}

/* منطقة التمرير */
.sidebar-top {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}
.sidebar-top::-webkit-scrollbar { display: none; }

/* الشعار */
.sidebar-top > a.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 6px;
  transition: opacity var(--t);
}
.sidebar-top > a.logo-link:hover { opacity: 0.8; }
.sidebar-top .logo {
  height: 30px; width: auto; max-width: 145px;
  font-size: 1.2rem; font-weight: 700;
  color: #fff; letter-spacing: -0.02em;
}

/* عناصر القائمة */
.sidebar-menu { padding: 4px 10px; display: flex; flex-direction: column; gap: 1px; }

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r);
  color: var(--sidebar-text);
  font-size: 0.86rem;
  font-weight: 500;
  transition: all var(--t);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-menu-item:hover {
  background: var(--sidebar-hover);
  color: rgba(255,255,255,0.85);
}
.sidebar-menu-item.active {
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 600;
}
.sidebar-menu-item.active::before {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--p);
  border-radius: 2px 0 0 2px;
}
.sidebar-menu-item i {
  font-size: 1rem; width: 18px;
  text-align: center; flex-shrink: 0;
  opacity: 0.65;
  /* Flaticon UIcons */
}
.sidebar-menu-item.active i { opacity: 1; color: var(--p-light); }
.sidebar-menu-title { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* أسفل الشريط الجانبي */
.sidebar-bottom {
  flex-shrink: 0;
  padding: 10px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-scroll {
  display: flex; align-items: center; justify-content: center;
  padding: 5px; cursor: pointer;
  color: var(--sidebar-text-2); font-size: 0.75rem;
  border-radius: var(--r-sm); transition: color var(--t);
}
.sidebar-scroll:hover { color: var(--p-light); }

/* أزرار الثيم */
.color-change-box { display: flex; gap: 4px; }
.color-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 8px 4px 7px;
  border-radius: var(--r); cursor: pointer;
  background: var(--sidebar-surface);
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-text-2);
  font-size: 0.68rem; font-weight: 600;
  transition: all var(--t);
}
.color-btn img { width: 20px; height: 20px; opacity: 0.45; transition: opacity var(--t); }
.color-btn .fa-check-circle, .color-btn .fi { display: none; font-size: 0.65rem; color: var(--p); }
.color-btn:hover {
  background: var(--sidebar-hover);
  color: rgba(255,255,255,0.65);
}
.color-btn:hover img { opacity: 0.75; }

html.dark .dark-btn  .fa-check-circle,
html.light .light-btn .fa-check-circle { display: inline-block; }
html.dark .dark-btn,
html.light .light-btn {
  background: var(--sidebar-active);
  border-color: rgba(234,30,99,0.25);
  color: rgba(255,255,255,0.75);
}
html.dark .dark-btn img,
html.light .light-btn img { opacity: 1; }

/* بيانات المستخدم */
.sidebar-user-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--sidebar-surface);
  border: 1px solid var(--sidebar-border);
  text-decoration: none; cursor: pointer;
  transition: all var(--t);
}
.sidebar-user-box:hover {
  background: var(--sidebar-active);
  border-color: rgba(234,30,99,0.25);
}
.user-box-left { flex: 1; overflow: hidden; }
.user-box-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600;
  color: rgba(255,255,255,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-box-username {
  display: block; font-size: 0.7rem;
  color: var(--sidebar-text-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-box-right { color: var(--sidebar-text-2); font-size: 0.8rem; }

.red-btn {
  display: flex !important;
  align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r);
  background: rgba(234,30,99,0.07) !important;
  border: 1px solid rgba(234,30,99,0.16) !important;
  color: var(--p-light) !important;
  font-size: 0.8rem; font-weight: 600;
  transition: all var(--t) !important; cursor: pointer;
}
.red-btn:hover {
  background: var(--p) !important;
  border-color: var(--p) !important;
  color: #fff !important;
}

/* ================================================================
   PAGE CONTENT
   ================================================================ */
.page-content {
  flex: 1;
  margin-right: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin var(--t-lg);
}

/* ================================================================
   HEADER
   ================================================================ */
.page-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--sh-xs);
  gap: 14px;
}

.header-left { display: flex; align-items: center; gap: 10px; }
.header-left .logo {
  height: 26px; width: auto; max-width: 130px;
  font-size: 0.95rem; font-weight: 700; color: var(--text-1);
}

.header-right { display: flex; align-items: center; gap: 6px; }
.header-btn-box { display: flex; align-items: center; gap: 4px; }

/* icon buttons في الهيدر */
.header-btn-box > i.far,
.header-btn-box > i.fas,
.header-btn-box > i.fad,
.header-btn-box > i.fi {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r);
  font-size: 1rem;
  color: var(--text-2); cursor: pointer;
  transition: all var(--t);
  padding: 7px;
}
.header-btn-box > i:hover {
  background: var(--surface-2);
  color: var(--p);
}

.sidebar-btn {
  display: none; width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border-radius: var(--r); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer; font-size: 1rem;
  transition: all var(--t); background: transparent;
}
.sidebar-btn:hover { border-color: var(--p); color: var(--p); }

/* ================================================================
   الرصيد والعملة
   ================================================================ */
.user-balance { position: relative; }

.balance-box {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--p-05);
  border: 1px solid var(--p-10);
  color: var(--p); font-weight: 700; font-size: 0.85rem;
  cursor: pointer; transition: all var(--t); white-space: nowrap;
}
.balance-box:hover, .balance-box.active {
  background: var(--p); color: #fff;
  border-color: var(--p);
  box-shadow: 0 4px 16px rgba(234,30,99,0.35);
}
.balance-info { font-size: 0.85rem; }

.currency-bg {
  display: none; position: fixed;
  inset: 0; z-index: 149;
}
.currency-bg.active { display: block; }

.currency-list {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  min-width: 290px; z-index: 150;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top left;
  transition: all var(--t);
  overflow: hidden;
}
.currency-list.active {
  opacity: 1; pointer-events: all;
  transform: translateY(0) scale(1);
}

.currency-top {
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  justify-content: space-between;
  font-weight: 700; font-size: 0.83rem; color: var(--text-1);
}
.currency-top i { cursor: pointer; color: var(--text-3); transition: color var(--t); font-size: 1rem; }
.currency-top i:hover { color: var(--p); }

.currencies-box {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 5px; padding: 11px;
}
.currency-box {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 9px 6px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid transparent;
  cursor: pointer; transition: all var(--t); text-decoration: none;
}
.currency-box:hover { border-color: var(--p); background: var(--p-05); }
.currency-box span { font-size: 0.76rem; font-weight: 700; color: var(--text-1); }
.currency-box b { font-size: 0.66rem; color: var(--text-3); font-weight: 400; }

.curency-pagination {
  display: flex; gap: 4px; justify-content: center;
  padding: 8px 11px; border-top: 1px solid var(--border);
}
.curency-pagination button {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 0.7rem; cursor: pointer; color: var(--text-2);
  transition: all var(--t);
}
.curency-pagination button.active { background: var(--p); border-color: var(--p); color: #fff; }
.curency-pagination.hidden { display: none; }

/* ================================================================
   اللغة
   ================================================================ */
.language-box { position: relative; }

.language-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-2); font-size: 0.82rem; cursor: pointer;
  transition: all var(--t);
}
.language-btn:hover, .language-btn.active {
  border-color: var(--p); color: var(--p);
}

.language-dropdown {
  position: absolute; top: calc(100% + 7px); left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-xl);
  min-width: 155px; z-index: 200; overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left; transition: all var(--t);
}
.language-dropdown.active {
  opacity: 1; pointer-events: all;
  transform: translateY(0) scale(1);
}
.language-list { padding: 5px; }
.language-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px; border-radius: var(--r-sm);
  font-size: 0.83rem; color: var(--text-1); transition: all var(--t); text-decoration: none;
}
.language-item:hover { background: var(--surface-2); color: var(--p); }
.language-item.selected { color: var(--p); font-weight: 600; }
.language-item b { font-size: 0.66rem; color: var(--text-3); text-transform: uppercase; }

.language-bg { display: none; position: fixed; inset: 0; z-index: 199; }
.language-bg.active { display: block; }

/* ================================================================
   صندوق الإعلانات
   ================================================================ */
.announcements-box {
  position: absolute;
  top: calc(100% + 8px); left: 20px;
  width: 330px; background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-xl);
  z-index: 150; overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top left; transition: all var(--t);
}
.announcements-box.active {
  opacity: 1; pointer-events: all;
  transform: translateY(0) scale(1);
}
.announcements-top {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 0.86rem;
}
.announcements-top i { cursor: pointer; color: var(--text-3); transition: color var(--t); font-size: 1rem; }
.announcements-top i:hover { color: var(--p); }
.notify-list { max-height: 310px; overflow-y: auto; }
.announcements-item {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
.announcements-item:last-child { border-bottom: none; }
.announcements-item:hover { background: var(--surface-2); }
.announcements-title { display: block; font-weight: 600; font-size: 0.83rem; color: var(--text-1); margin-bottom: 3px; }
.announcements-content { display: block; font-size: 0.78rem; color: var(--text-2); line-height: 1.5; }
.announcements-bottom {
  display: flex; justify-content: space-between;
  margin-top: 5px; font-size: 0.7rem; color: var(--text-3);
}

/* ================================================================
   شريط موبايل السفلي
   ================================================================ */
.bottom-navigaiton {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 90; padding: 6px 0 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  display: none;
}
.bottom-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 4px 8px;
  color: var(--text-3); font-size: 0.62rem; font-weight: 500;
  transition: color var(--t); text-decoration: none;
}
.bottom-item i { font-size: 1.2rem; }
.bottom-item.active, .bottom-item:hover { color: var(--p); }

/* ================================================================
   صوت AI
   ================================================================ */
.voice-animation {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%); z-index: 80;
  pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
.voice-animation.active { opacity: 1; }
.voice-animation-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.voice-text {
  font-size: 0.86rem; color: var(--text-1);
  background: var(--surface); padding: 6px 14px;
  border-radius: var(--r-full); border: 1px solid var(--border);
  box-shadow: var(--sh);
}

/* ================================================================
   MODAL
   ================================================================ */
.modal, .modal.disable { }
.modal.disable {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500; display: flex;
  align-items: center; justify-content: center; padding: 16px;
}
/* hack: الـ "disable" يعني مخفي في الثيم الأصلي */
#popupModal.disable, #servicesDescription.disable, .disable {
  opacity: 0; pointer-events: none;
}
#popupModal:not(.disable), #servicesDescription:not(.disable), .modal:not(.disable) {
  opacity: 1; pointer-events: all;
}

/* تنسيق نافذة الـ modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  transition: opacity var(--t);
}
.modal.disable { opacity: 0; pointer-events: none; }

.modal-content {
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xl);
  width: 100%; max-width: 500px;
  overflow: hidden;
  animation: modal-in 0.25s var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-top {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 0.95rem; font-weight: 700; color: var(--text-1); }
.modal-close {
  cursor: pointer; color: var(--text-3);
  transition: color var(--t); font-size: 1rem; line-height: 1;
}
.modal-close:hover { color: var(--p); }
.modal-center { padding: 20px; }
.modal-bottom {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}
.popupaciklama { font-size: 0.88rem; color: var(--text-2); line-height: 1.7; }
.popupimg { width: 100%; border-radius: var(--r); margin-top: 12px; }

/* إشعار عائم */
#notification {
  position: fixed; bottom: -80px; left: 50%;
  transform: translateX(-50%); z-index: 9999;
}
.notify-box {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px;
  background: var(--fsk-900); color: #fff;
  border-radius: var(--r-full); font-size: 0.85rem; font-weight: 500;
  box-shadow: var(--sh-xl); white-space: nowrap;
}
@keyframes fade-in-up   { from { opacity:0; bottom:20px; } to { opacity:1; bottom:36px; } }
@keyframes fade-out-down { from { opacity:1; bottom:36px; } to { opacity:0; bottom:20px; } }

/* ================================================================
   GRID
   ================================================================ */
.container-fluid { padding: 22px; flex: 1; }
.container {
  width: 100%; max-width: 560px;
  margin: 0 auto; padding: 0 18px;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.col-span-12 { grid-column: span 12; }
.col-span-7  { grid-column: span 7; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-4  { grid-column: span 4; }

/* ================================================================
   عنوان الصفحة
   ================================================================ */
.page-title {
  display: flex; align-items: center;
  gap: 11px; margin-bottom: 20px;
}
.page-title > i {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); background: var(--p-10);
  color: var(--p); font-size: 1rem; flex-shrink: 0;
}
.page-title > span {
  font-size: 1.2rem; font-weight: 700; color: var(--text-1);
  letter-spacing: -0.015em;
}

/* ================================================================
   CARDS / WELL
   ================================================================ */
.well, .user-well {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.well { padding: 18px; }
.user-well { padding: 20px; }

.user-well-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.875rem; font-weight: 700;
  color: var(--text-1); margin-bottom: 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--border);
}
.user-well-title i { color: var(--p); }

.tfa-span {
  display: block; font-size: 0.82rem; color: var(--text-2);
  line-height: 1.6; margin-bottom: 14px;
}

/* ================================================================
   STATS
   ================================================================ */
.stats-box-list {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 12px; margin-bottom: 18px;
}
.stats-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px;
  transition: all var(--t); position: relative; overflow: hidden;
}
.stats-box::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--p), var(--p-light));
  opacity: 0; transition: opacity var(--t);
}
.stats-box:hover { box-shadow: var(--sh); transform: translateY(-1px); }
.stats-box:hover::after { opacity: 1; }
.stats-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.stats-name { font-size: 0.75rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.stats-top > i {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--p-10);
  color: var(--p); font-size: 0.9rem;
}
.stats-text { font-size: 1.55rem; font-weight: 700; color: var(--text-1); line-height: 1.1; letter-spacing: -0.02em; }

/* ================================================================
   FORMS
   ================================================================ */
.form-group { margin-bottom: 14px; }

.control-label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--text-2); margin-bottom: 5px; letter-spacing: 0.02em;
}

.form-control {
  width: 100%; padding: 8px 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text-1);
  font-size: 0.875rem; outline: none;
  transition: all var(--t); direction: rtl; appearance: none;
}
.form-control:focus {
  border-color: var(--p); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(234,30,99,0.1);
}
.form-control::placeholder { color: var(--text-3); }
textarea.form-control { min-height: 96px; resize: vertical; }
select.form-control { cursor: pointer; }

.input-group { display: flex; gap: 6px; }
.input-group .form-control { flex: 1; }
.input-group-btn .btn-default { border-radius: var(--r); }

input[type="checkbox"] { accent-color: var(--p); width: 14px; height: 14px; cursor: pointer; }
input[type="radio"] { accent-color: var(--p); cursor: pointer; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex; align-items: center;
  justify-content: center; gap: 7px;
  padding: 8px 18px;
  border-radius: var(--r); font-size: 0.86rem; font-weight: 600;
  cursor: pointer; border: none; outline: none;
  transition: all var(--t); white-space: nowrap; text-decoration: none;
  letter-spacing: 0.01em;
}
.btn-main {
  background: var(--p); color: #fff;
  box-shadow: 0 3px 12px rgba(234,30,99,0.3);
}
.btn-main:hover {
  background: var(--p-dark); color: #fff;
  box-shadow: 0 5px 18px rgba(234,30,99,0.4);
  transform: translateY(-1px);
}
.btn-main:active { transform: translateY(0); box-shadow: none; }

.btn-border {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
}
.btn-border:hover { border-color: var(--p); color: var(--p); background: var(--p-05); }

.btn-default { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.btn-default:hover { border-color: var(--p); color: var(--p); }

.btn-apikey {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--p-10); border: 1px solid var(--p-20);
  color: var(--p); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all var(--t);
}
.btn-apikey:hover { background: var(--p); color: #fff; border-color: var(--p); }

.btn-block { width: 100%; }
.btn-min   { padding: 7px 16px; }
.btn-sm    { padding: 5px 12px; font-size: 0.8rem; }
.btn-xs    { padding: 3px 9px;  font-size: 0.72rem; }
.btn-lg    { padding: 11px 26px; font-size: 0.95rem; }
.border-10 { border-radius: 10px !important; }

/* ================================================================
   ALERTS
   ================================================================ */
.alert {
  padding: 12px 15px; border-radius: var(--r);
  font-size: 0.86rem; margin-bottom: 14px;
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid transparent; line-height: 1.55;
}
.alert-success { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.22); color: #065f46; }
.alert-danger  { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.22);  color: #991b1b; }
.alert-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.22); color: #92400e; }
.alert-info    { background: var(--p-05); border-color: var(--p-10); color: var(--p-dark); }

html.dark .alert-success { color: #6ee7b7; }
html.dark .alert-danger  { color: #fca5a5; }
html.dark .alert-warning { color: #fcd34d; }

.close {
  background: none; border: none; cursor: pointer;
  font-size: 1.05rem; color: inherit; opacity: 0.45;
  margin-right: auto; line-height: 1; transition: opacity var(--t);
}
.close:hover { opacity: 1; }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination {
  display: flex; align-items: center; gap: 4px;
  list-style: none; padding: 14px 0; flex-wrap: wrap;
}
.pagination li a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r);
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border); transition: all var(--t); text-decoration: none;
}
.pagination li a:hover { border-color: var(--p); color: var(--p); background: var(--p-05); }
.pagination li.active a {
  background: var(--p); border-color: var(--p);
  color: #fff; box-shadow: 0 3px 10px rgba(234,30,99,0.3);
}

/* ================================================================
   NEWORDER
   ================================================================ */
.neworder-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.settings-btn {
  width: 34px; height: 34px; border-radius: var(--r);
  border: 1px solid var(--border); display: flex;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2);
  transition: all var(--t); background: var(--surface);
}
.settings-btn:hover { border-color: var(--p); color: var(--p); }

.service-search-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 13px;
  margin-bottom: 13px; position: relative; box-shadow: var(--sh-xs);
}
.search-service-list { display: none; }
.search-service-list.active { display: block; }
.search-service-box {
  position: absolute; top: 100%; right: 0; left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-xl);
  z-index: 60; max-height: 380px; overflow-y: auto; margin-top: 4px;
}

.neworder-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-xs); position: relative;
}

.dropdwon-box { position: relative; margin-bottom: 4px; }
.dropdown-select-box {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  font-size: 0.86rem; color: var(--text-1); gap: 8px;
  transition: all var(--t);
}
.dropdown-select-box:hover { border-color: var(--border-2); }
.dropdown-select-box:focus, .dropdown-select-box.active { border-color: var(--p); box-shadow: 0 0 0 3px rgba(234,30,99,0.1); }
.dropdown-select-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 20px; }

/* dropdown panels */
.category-dropdown,
.service-dropdown,
.payment-dropdown {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); box-shadow: var(--sh-xl);
  width: 500px; max-width: 96vw; max-height: 84vh;
  overflow: hidden; display: flex; flex-direction: column;
  z-index: 300; opacity: 0; pointer-events: none; transition: all var(--t);
}
.category-dropdown.active,
.service-dropdown.active,
.payment-dropdown.active {
  opacity: 1; pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.category-dropdown-header,
.service-dropdown-header,
.payment-dropdown-header {
  padding: 15px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.service-dropdown-title { font-size: 0.95rem; font-weight: 700; color: var(--text-1); }
.category-dropdown-header i,
.service-dropdown-header i,
.payment-dropdown-header i {
  cursor: pointer; color: var(--text-3);
  transition: color var(--t); font-size: 1.05rem;
}
.category-dropdown-header i:hover,
.service-dropdown-header i:hover,
.payment-dropdown-header i:hover { color: var(--p); }

.category-dropdown-box,
.service-dropdown-box,
.payment-dropdown-box { overflow-y: auto; flex: 1; padding: 7px; }
.service-list { display: flex; flex-direction: column; gap: 2px; }

.category-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--r);
  cursor: pointer; font-size: 0.86rem; color: var(--text-1);
  transition: all var(--t);
}
.category-dropdown-item:hover { background: var(--surface-2); }
.category-dropdown-item.active { background: var(--p-10); color: var(--p); font-weight: 600; }

.service-dropdown-item {
  padding: 11px 13px; border-radius: var(--r);
  cursor: pointer; transition: all var(--t);
  border: 1px solid transparent;
}
.service-dropdown-item:hover { background: var(--surface-2); }
.service-dropdown-item.active { background: var(--p-10); border-color: rgba(234,30,99,0.15); }

.service-dropdown-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 7px; gap: 8px;
}
.service-dropdown-name { flex: 1; }
.s-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.86rem; font-weight: 500; color: var(--text-1); line-height: 1.4;
}
.service-dropdown-price {
  font-weight: 700; color: var(--p); font-size: 0.9rem;
  white-space: nowrap; flex-shrink: 0;
}
.service-dropdown-price small { font-weight: 400; font-size: 0.66rem; color: var(--text-3); margin-right: 2px; }

.serivce-dropdown-bottom {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 5px;
}
.service-dropdown-info { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.service-dropdown-info-item {
  display: flex; align-items: center; gap: 3px;
  font-size: 0.74rem; color: var(--text-2);
}
.service-dropdown-info-item b { color: var(--text-1); font-weight: 600; }
.service-dropdown-info-item i { font-size: 0.7rem; color: var(--p); }
.service-dropdown-minmax { display: flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--text-2); }

.service-features { display: flex; flex-wrap: wrap; gap: 3px; }
.service-features-item {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: var(--r-full);
  font-size: 0.68rem; font-weight: 600; border: 1px solid;
}
.service-features-item.guaranteed  { background:rgba(16,185,129,.08);  color:#059669; border-color:rgba(16,185,129,.22); }
.service-features-item.recommended { background:rgba(245,158,11,.08);  color:#d97706; border-color:rgba(245,158,11,.22); }
.service-features-item.faster       { background:rgba(59,130,246,.08);  color:#2563eb; border-color:rgba(59,130,246,.22); }
.service-features-item.discounted   { background:var(--p-10);           color:var(--p); border-color:var(--p-20); }
.service-features-item.canceled     { background:rgba(239,68,68,.08);   color:#dc2626; border-color:rgba(239,68,68,.22); }
.service-features-item.timed        { background:rgba(107,114,128,.08); color:#6b7280; border-color:rgba(107,114,128,.22); }
.service-features-item.slow         { background:rgba(239,68,68,.08);   color:#dc2626; border-color:rgba(239,68,68,.22); }
.service-features-item.newservice   { background:var(--p-10);           color:var(--p); border-color:var(--p-20); }

.category-dropdown-bg,
.service-dropdown-bg,
.payment-dropdown-bg {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 299;
}
.category-dropdown-bg.active,
.service-dropdown-bg.active,
.payment-dropdown-bg.active { display: block; }

/* تفاصيل الخدمة */
.select-service-detail-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-xs);
  position: sticky; top: calc(var(--header-h) + 14px);
}
.select-service-title {
  display: block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-3); margin: 12px 0 7px;
}
.select-service-title:first-child { margin-top: 0; }
.select-service-name { display: block; font-size: 0.95rem; font-weight: 700; color: var(--text-1); line-height: 1.4; margin-bottom: 11px; }
.select-service-feature-item { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.select-id, .select-price, .select-avg, .select-minmax {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px; background: var(--surface-2);
  border-radius: var(--r); font-size: 0.78rem; color: var(--text-2);
  border: 1px solid var(--border);
}
.select-id b, .select-price b, .select-avg b, .select-minmax b { color: var(--p); font-weight: 700; }
.select-service-description { font-size: 0.83rem; color: var(--text-2); line-height: 1.7; margin-top: 3px; }

.master-select { display: none; }
.neworder-form.masterBox .master-select { display: block; }

/* إعدادات الصفحة */
.settings-content {
  position: fixed; top: 0; right: -310px; width: 295px;
  height: 100vh; background: var(--surface); border-left: 1px solid var(--border);
  z-index: 400; padding: 20px; overflow-y: auto;
  transition: right var(--t-lg); box-shadow: var(--sh-xl);
}
.settings-content.active { right: 0; }
.settings-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 399; }
.settings-bg.active { display: block; }
.neworder-settings-box { display: flex; flex-direction: column; gap: 16px; }
.close-settings { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 0.95rem; }
.close-settings i { cursor: pointer; color: var(--text-3); transition: color var(--t); }
.close-settings i:hover { color: var(--p); }
.settings-title { display: block; font-size: 0.7rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; }
.neworder-size { display: flex; gap: 8px; }
.size-select-box { flex: 1; padding: 11px; border: 2px solid var(--border); border-radius: var(--r); cursor: pointer; text-align: center; transition: all var(--t); }
.size-select-box.active, .size-select-box:hover { border-color: var(--p); }
.size-img img { width: 100%; border-radius: var(--r-sm); }
.size-text { font-size: 0.7rem; color: var(--text-2); margin-top: 4px; }
.theme-type { display: flex; gap: 7px; }
.theme-select-btn { flex: 1; padding: 9px; border: 2px solid var(--border); border-radius: var(--r); text-align: center; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--text-2); transition: all var(--t); }
.theme-select-btn.active, .theme-select-btn:hover { border-color: var(--p); color: var(--p); }

/* buy btn */
.buy-btn { position: fixed; bottom: 22px; left: 22px; display: none; flex-direction: column; gap: 8px; z-index: 80; }
.buy-btn:not(.hidden) { display: flex; }
.buy-btn-item {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 5px 18px rgba(234,30,99,0.4); transition: all var(--t);
}
.buy-btn-item:hover { transform: scale(1.08); box-shadow: 0 7px 24px rgba(234,30,99,0.55); }

/* تنبيه الطلب */
.order-alert-content {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 500;
}
.order-alert-box {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); box-shadow: var(--sh-xl);
  padding: 26px; width: 420px; max-width: 95vw;
  z-index: 501; text-align: center; animation: modal-in 0.25s var(--ease);
}
.order-alert-box.close, .order-alert-content.close { display: none; }
.alert-close { position: absolute; top: 12px; left: 12px; background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 1rem; transition: color var(--t); }
.alert-close:hover { color: var(--p); }
.alert-box-top { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.alert-box-top > span { font-size: 1.05rem; font-weight: 700; color: var(--text-1); }
.alert-box-bottom { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.alert-box-bottom > span { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; background: var(--surface-2); border-radius: var(--r); font-size: 0.82rem; color: var(--text-2); }
.alert-box-bottom b { color: var(--p); font-weight: 700; }

/* ================================================================
   ORDERS
   ================================================================ */
.services-top-box { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.services-top-box .form-control, .services-top-box select.form-control { width: auto; min-width: 165px; }
.services-top-box form { flex: 1; min-width: 200px; }

.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 15px 17px; transition: all var(--t);
}
.order-box:hover { border-color: var(--border-2); box-shadow: var(--sh); }

.order-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; gap: 9px; }
.order-top-left { display: flex; align-items: center; gap: 7px; }

.order-id {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.76rem; font-weight: 700; color: var(--p);
  padding: 3px 9px; background: var(--p-05);
  border-radius: var(--r-full); cursor: pointer;
  transition: all var(--t); border: 1px solid var(--p-10);
}
.order-id:hover { background: var(--p); color: #fff; }

.re-order-btn, .report-order-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 0.76rem; cursor: pointer;
  transition: all var(--t); text-decoration: none;
}
.re-order-btn:hover { border-color: var(--p); color: var(--p); background: var(--p-05); }
.report-order-btn:hover { border-color: rgba(239,68,68,.3); color: #dc2626; background: rgba(239,68,68,.06); }

.o-tooltip { position: relative; }
.order-tooltip {
  position: absolute; bottom: calc(100% + 5px); left: 50%;
  transform: translateX(-50%); background: var(--fsk-900); color: #fff;
  padding: 4px 9px; border-radius: var(--r); font-size: 0.7rem;
  white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity var(--t); z-index: 20;
}
.o-tooltip:hover .order-tooltip { opacity: 1; }

/* حالات الطلب */
.order-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 0.73rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.order-status.completed { background:rgba(16,185,129,.08); color:#059669; border-color:rgba(16,185,129,.22); }
.order-status.partial   { background:rgba(245,158,11,.08); color:#d97706; border-color:rgba(245,158,11,.22); }
.order-status.canceled  { background:rgba(239,68,68,.08);  color:#dc2626; border-color:rgba(239,68,68,.22); }
.order-status.pending   { background:rgba(107,114,128,.08);color:#6b7280; border-color:rgba(107,114,128,.22); }
html.dark .order-status.completed { color:#6ee7b7; }
html.dark .order-status.partial   { color:#fcd34d; }
html.dark .order-status.canceled  { color:#fca5a5; }

.order-status.progress { background: none; border: none; padding: 0; min-width: 140px; }
.progress {
  position: relative; height: 22px;
  background: var(--surface-2); border-radius: var(--r-full);
  overflow: hidden; width: 160px; border: 1px solid var(--border);
}
.progress-value {
  height: 100%;
  background: linear-gradient(90deg, var(--p), var(--p-light));
  border-radius: var(--r-full); transition: width 0.6s var(--ease); min-width: 4px;
}
.progress > span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; color: var(--text-1);
}

.order-center { display: flex; flex-direction: column; gap: 4px; }
.order-service { font-size: 0.86rem; font-weight: 600; color: var(--text-1); }
.order-date, .order-remains { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--text-2); }
.order-link { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--p); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.order-link:hover { text-decoration: underline; }

.order-center-bottom { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.order-center-bottom > span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; background: var(--surface-2);
  border-radius: var(--r); font-size: 0.76rem; color: var(--text-2);
  border: 1px solid var(--border);
}
.order-center-bottom b { color: var(--text-1); font-weight: 600; }

.order-btn { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); }
.order-modal-bottom { display: flex; gap: 7px; }
.cancel-btn .btn-main { background:rgba(239,68,68,.09)!important; color:#dc2626!important; border:1px solid rgba(239,68,68,.22)!important; box-shadow:none!important; }
.cancel-btn .btn-main:hover { background:#dc2626!important; color:#fff!important; }

/* ================================================================
   SERVICES
   ================================================================ */
.services-category-box {
  padding: 9px 13px; margin-bottom: 3px;
  border-radius: var(--r); background: var(--surface-2);
  border: 1px solid var(--border); font-weight: 700;
  font-size: 0.8rem; color: var(--text-2);
  display: flex; align-items: center; gap: 7px;
}
.category-name { flex: 1; }
.services-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.services-list-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 12px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); transition: all var(--t);
}
.services-list-item:hover { border-color: var(--border-2); background: var(--surface-2); }
.services-list-left { flex: 1; min-width: 0; }
.services-item-top {
  font-size: 0.86rem; font-weight: 600; color: var(--text-1);
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.services-item-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.services-item-feature { display: inline-flex; align-items: center; gap: 3px; font-size: 0.76rem; color: var(--text-2); }
.services-item-feature i { color: var(--p); font-size: 0.68rem; }
.services-item-feature b { color: var(--text-1); font-weight: 600; }
.services-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.services-item-price { font-size: 1rem; font-weight: 700; color: var(--p); }
.favbox { cursor: pointer; color: var(--text-3); transition: color var(--t); font-size: 0.88rem; }
.favbox:hover, .favbox.favorite-active { color: #f59e0b; }

/* ================================================================
   ADDFUNDS
   ================================================================ */
.addfunds-page { }
.addfunds-bg { position: relative; }
.addfunds-bg-img {
  position: absolute; inset: 0; height: 200px;
  background: linear-gradient(135deg, var(--p-dark), var(--p));
  opacity: 0.05; pointer-events: none;
}
.payment-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--sh-xs); }
.payment-title { display: block; font-size: 0.88rem; font-weight: 700; color: var(--text-1); margin-bottom: 14px; }
.select-amount { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.amount-item {
  padding: 5px 14px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  transition: all var(--t); color: var(--text-1);
}
.amount-item:hover { background: var(--p-10); border-color: var(--p); color: var(--p); }

.payment-history { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xs); }
.history-box { padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background var(--t); }
.history-box:last-child { border-bottom: none; }
.history-box:hover { background: var(--surface-2); }
.history-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.history-payment-name { font-size: 0.86rem; font-weight: 600; color: var(--text-1); }
.history-amount { font-size: 0.88rem; font-weight: 700; }
.history-amount.color-green { color: #059669; }
.history-amount.color-red   { color: #dc2626; }
.history-bottom { font-size: 0.72rem; color: var(--text-3); display: flex; gap: 3px; }

/* payment dropdown */
.payment-method { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: var(--r); cursor: pointer; border: 1px solid transparent; transition: all var(--t); margin-bottom: 2px; }
.payment-method:hover { background: var(--surface-2); }
.payment-method.active { background: var(--p-10); border-color: rgba(234,30,99,0.15); }
.payment-name-container { display: flex; align-items: center; gap: 9px; }
.payment-text { font-size: 0.86rem; font-weight: 600; color: var(--text-1); flex: 1; }
.payment-description { font-size: 0.76rem; color: var(--text-2); padding-right: 34px; }
.payment-type-badge { padding: 2px 7px; border-radius: var(--r-full); font-size: 0.66rem; font-weight: 700; }
.payment-type-badge.auto   { background:rgba(16,185,129,.1); color:#059669; }
.payment-type-badge.manual { background:rgba(245,158,11,.1); color:#d97706; }
.most-used { font-size: 0.66rem; padding: 2px 7px; background: var(--p-10); color: var(--p); border-radius: var(--r-full); font-weight: 700; }
.payment-search-wrapper { position: relative; margin-bottom: 9px; padding: 0 7px; }
.payment-search-wrapper i { position: absolute; right: 21px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 0.82rem; }
.payment-search-input { width: 100%; padding: 8px 34px 8px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); font-size: 0.83rem; color: var(--text-1); outline: none; direction: rtl; transition: border-color var(--t); }
.payment-search-input:focus { border-color: var(--p); }
.payment-categories-tabs { display: flex; gap: 4px; padding: 9px 9px 3px; flex-wrap: wrap; align-items: center; }
.category-tab { padding: 4px 11px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface-2); font-size: 0.76rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--t); display: inline-flex; align-items: center; gap: 4px; }
.category-tab.active, .category-tab:hover { background: var(--p-10); border-color: var(--p-20); color: var(--p); }
.category-content { display: none; }
.category-content.active { display: block; }
#payment-dropdown-select { display: flex; align-items: center; gap: 7px; }
.selected-payment-name { font-size: 0.86rem; font-weight: 600; color: var(--text-1); }

/* ================================================================
   ACCOUNT
   ================================================================ */
.user-info-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 20px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 18px;
  margin-bottom: 16px; box-shadow: var(--sh-xs);
}
.user-box-info { display: flex; align-items: center; gap: 14px; }
.user-image {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--p) 0%, var(--p-light) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 5px 16px rgba(234,30,99,0.3);
}
.userbox-username { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.userbox-username i { color: var(--p); font-size: 0.82rem; }
.userbox-mail { font-size: 0.78rem; color: var(--text-2); }

/* ================================================================
   AUTH / 2FA
   ================================================================ */
.auth-screen-container { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 80px); padding: 22px; }
.auth-screen {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); box-shadow: var(--sh-xl);
  padding: 32px; width: 100%; max-width: 440px;
}
.auth-screen.signup { max-width: 480px; }
.auth-screen-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.25rem; font-weight: 700; color: var(--text-1);
  margin-bottom: 22px; letter-spacing: -0.015em;
}
.auth-screen-title i { color: var(--p); }
.auth-screen-form { display: flex; flex-direction: column; gap: 2px; }
.signup-alt-text { font-size: 0.82rem; color: var(--text-2); text-align: center; margin-top: 10px; }
.signup-alt-text a { color: var(--p); font-weight: 600; }

.sms-verify {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 32px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl); width: 100%; max-width: 415px; text-align: center;
}
.verify-icon { width: 90px; height: 90px; }
.verify-title { font-size: 1.2rem; font-weight: 700; color: var(--text-1); letter-spacing: -0.015em; }
.verify-small-text { font-size: 0.86rem; color: var(--text-2); }
.verify-form { width: 100%; }
.verify-input-box { display: flex; gap: 7px; justify-content: center; margin-bottom: 16px; }
.verify-input {
  width: 42px !important; height: 50px !important;
  text-align: center; font-size: 1.25rem !important;
  font-weight: 700; padding: 0 !important;
  border-radius: var(--r) !important;
  -moz-appearance: textfield;
}
.verify-input::-webkit-outer-spin-button,
.verify-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ================================================================
   TICKETS
   ================================================================ */
.ticket-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--sh-xs); }
.subject-list { display: flex; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.subject-item {
  flex: 1; min-width: 86px; display: flex;
  align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: var(--r);
  border: 2px solid var(--border); cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--text-2);
  transition: all var(--t); background: var(--surface);
}
.subject-item:hover { border-color: var(--p); color: var(--p); background: var(--p-05); }
.subject-item.active { border-color: var(--p); background: var(--p-10); color: var(--p); }
.subject-item input[type="radio"] { display: none; }
.subject-item label { cursor: pointer; font-size: 0.82rem; font-weight: 600; }

.ticket-title { display: block; font-size: 0.86rem; font-weight: 700; color: var(--text-1); margin-bottom: 11px; }
.ticket-list { display: flex; flex-direction: column; gap: 7px; }
.ticket-box {
  display: block; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 15px; transition: all var(--t); text-decoration: none;
}
.ticket-box:hover { border-color: var(--border-2); box-shadow: var(--sh); }
.ticket-box.active { border-color: var(--p); background: var(--p-05); }
.ticket-box-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 11px; margin-bottom: 7px; }
.ticket-top-content { flex: 1; min-width: 0; }
.ticket-id { display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--p); background: var(--p-10); padding: 2px 7px; border-radius: var(--r-full); margin-bottom: 3px; }
.ticket-subject { font-size: 0.86rem; font-weight: 600; color: var(--text-1); display: block; }
.ticket-status { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; flex-shrink: 0; }
.ticket-date { font-size: 0.72rem; color: var(--text-3); }

/* ================================================================
   VIEWTICKET
   ================================================================ */
.ticket-view-page { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xs); }
.ticket-view-top { padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; gap: 11px; }
.ticket-view-id { font-size: 0.76rem; font-weight: 700; color: var(--p); background: var(--p-10); padding: 3px 11px; border-radius: var(--r-full); border: 1px solid var(--p-20); }
.ticket-view-subject { font-size: 0.88rem; font-weight: 600; color: var(--text-1); }
.ticket-view-message-list { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 520px; overflow-y: auto; }

.message-right, .message-left { max-width: 68%; display: flex; flex-direction: column; gap: 4px; }
.message-right { align-self: flex-start; }
.message-left  { align-self: flex-end; }

.ticket-image { width: 100%; max-width: 240px; border-radius: var(--r); cursor: zoom-in; transition: transform var(--t); border: 1px solid var(--border); }
.ticket-image.enlarged { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%)!important; max-width: 92vw; max-height: 92vh; width: auto; height: auto; z-index: 9999; cursor: zoom-out; box-shadow: var(--sh-xl); border-radius: var(--r-lg); }

.message-text { display: block; padding: 11px 14px; border-radius: var(--r-lg); font-size: 0.86rem; line-height: 1.62; }
.message-right .message-text { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-1); }
.message-left  .message-text { background: var(--p); color: #fff; }
.message-bottom { display: flex; align-items: center; gap: 7px; font-size: 0.7rem; color: var(--text-3); }
.message-author { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-2); }
.message-author i { font-size: 0.68rem; color: var(--p); }
.ticket-view-bottom { padding: 16px 20px; border-top: 1px solid var(--border); }

/* ================================================================
   AFFILIATES
   ================================================================ */
.affiliate-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  margin-bottom: 16px; box-shadow: var(--sh-xs); position: relative; overflow: hidden;
}
.affiliate-box::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--p), var(--p-light)); }
.affiliate-left { flex: 1; }
.affiliate-title { font-size: 1.1rem; font-weight: 700; color: var(--text-1); margin-bottom: 12px; letter-spacing: -0.015em; }
.affiliate-url { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--p); font-size: 0.82rem; cursor: pointer; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all var(--t); }
.affiliate-url:hover { border-color: var(--p); background: var(--p-05); }
.affiliate-right { flex-shrink: 0; }
.unpaid-progress { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.unpaid-progress svg { width: 85px; height: 85px; transform: rotate(-90deg); }
.affiliate-bar-bg { fill: none; stroke: var(--border); stroke-width: 2.5; }
.affiliate-bar { fill: none; stroke: var(--p); stroke-width: 2.5; stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease); }
.unpaid-amount-text { font-size: 0.28em; font-weight: 700; fill: var(--text-1); }

.affiliate-stats-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; margin-bottom: 18px; }
.affiliate-stats-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: all var(--t); }
.affiliate-stats-box:hover { border-color: var(--p-20); box-shadow: var(--sh); }
.affiliate-stats-top { padding: 9px 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 0.7rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.affiliate-stats-bottom { padding: 13px; font-size: 1.2rem; font-weight: 700; color: var(--p); }

.affiliate-pay-list { }
.payout-box { display: flex; background: var(--surface); border: 1px solid var(--border); margin-bottom: -1px; }
.payout-box:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.payout-box:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.payout-item { flex: 1; padding: 10px 15px; }
.payout-top { font-size: 0.7rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.payout-bottom { font-size: 0.86rem; font-weight: 600; color: var(--text-1); margin-top: 2px; }

/* ================================================================
   BLOG
   ================================================================ */
.blog-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xs); display: flex; flex-direction: column; transition: all var(--t); }
.blog-box:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: var(--border-2); }
.blog-image img { width: 100%; height: 170px; object-fit: cover; }
.blog-title { display: block; font-size: 0.95rem; font-weight: 700; color: var(--text-1); padding: 14px 14px 5px; }
.blog-text { display: block; font-size: 0.82rem; color: var(--text-2); padding: 0 14px 13px; flex: 1; line-height: 1.6; }
.blog-box .btn { margin: 0 14px 14px; }
.blog-top { margin-bottom: 20px; }
.blog-view-image img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--r-xl); margin-bottom: 20px; }
.blog-view-title { font-size: 1.8rem; font-weight: 700; color: var(--text-1); margin-bottom: 20px; letter-spacing: -0.02em; line-height: 1.25; }
.blog-content { font-size: 0.93rem; color: var(--text-2); line-height: 1.82; margin-bottom: 20px; }

/* ================================================================
   CHILD PANEL
   ================================================================ */
.panel-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 14px; }
.panel-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xs); transition: all var(--t); }
.panel-content:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.panel-img-box { position: relative; height: 160px; background: var(--surface-2); }
.panel-img { width: 100%; height: 100%; object-fit: cover; }
.loading-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 1.4rem; }
.panel-content-top { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.panel-date { display: flex; gap: 5px; font-size: 0.76rem; color: var(--text-2); margin-bottom: 2px; }
.panel-date b { color: var(--text-1); }
.panel-content-bottom { padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; }
.panel-title { font-weight: 700; font-size: 0.88rem; color: var(--text-1); }

.child-order-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--sh-xs); }
.child-name-servers { margin-bottom: 14px; }
.name-servers-top { font-size: 0.78rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.name-servers-list { display: flex; flex-direction: column; gap: 5px; }
.name-servers-item { display: flex; align-items: center; gap: 7px; padding: 7px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); font-size: 0.82rem; font-family: monospace; color: var(--text-1); cursor: pointer; transition: all var(--t); }
.name-servers-item:hover { border-color: var(--p); color: var(--p); background: var(--p-05); }
.child-price-box { padding: 11px 14px; background: var(--p-10); border: 1px solid var(--p-20); border-radius: var(--r); color: var(--p); font-size: 1.05rem; font-weight: 700; text-align: center; margin-bottom: 14px; }

/* ================================================================
   UPDATES
   ================================================================ */
.update-list { display: flex; flex-direction: column; gap: 7px; }
.update-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 16px; transition: all var(--t); }
.update-box:hover { border-color: var(--border-2); box-shadow: var(--sh); }
.update-top { display: flex; align-items: center; justify-content: space-between; gap: 11px; margin-bottom: 5px; }
.update-service-name { font-size: 0.86rem; font-weight: 600; color: var(--text-1); }
.update-date { font-size: 0.73rem; color: var(--text-3); white-space: nowrap; }
.update-bottom { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.update-text { font-size: 0.82rem; color: var(--text-2); }
.update-icon { font-size: 0.88rem; }

/* ================================================================
   MISC
   ================================================================ */
.term-and-faq { line-height: 1.82; font-size: 0.88rem; color: var(--text-2); }
.noneAuth { padding-top: 76px; }
.hidden { display: none !important; }
.pb-0 { padding-bottom: 0 !important; }
.m-0  { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt10 { margin-top: 10px; }

/* API */
.api-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 22px; }
.code-block-top { display: flex; align-items: center; justify-content: space-between; padding: 9px 15px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 0.7rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.code-block-right { padding: 2px 7px; background: var(--p-10); color: var(--p); border-radius: var(--r-full); font-size: 0.64rem; }
.api-container pre { margin: 0; padding: 16px; font-size: 0.79rem; overflow-x: auto; direction: ltr; text-align: left; color: var(--fsk-code-color-1); line-height: 1.7; }
code { font-family: 'Cascadia Code','Fira Code',monospace; }

/* select2 */
.select2-container--default .select2-selection--single { background: var(--surface-2); border: 1px solid var(--border)!important; border-radius: var(--r)!important; height: 36px!important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-1); line-height: 34px!important; padding: 0 13px!important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px!important; }
.select2-dropdown { background: var(--surface)!important; border: 1px solid var(--border)!important; border-radius: var(--r-lg)!important; box-shadow: var(--sh-xl)!important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--p-10)!important; color: var(--p)!important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--surface-2)!important; }
.select2-results__option { font-size: 0.86rem!important; }

/* header الزوار */
.main-header { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--sh-xs); position: sticky; top: 0; z-index: 50; }
.main-header-content { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; }
.main-header-logo .logo { height: 28px; max-width: 135px; }
.main-header-right { display: flex; align-items: center; gap: 14px; }
.main-header-link { display: flex; align-items: center; gap: 5px; }
.main-header-link-item { padding: 5px 13px; border-radius: var(--r); font-size: 0.82rem; color: var(--text-2); transition: all var(--t); }
.main-header-link-item:hover { color: var(--p); background: var(--p-05); }
.main-header-btn-item { padding: 7px 18px; border-radius: var(--r-full); background: var(--p); color: #fff; font-size: 0.82rem; font-weight: 700; transition: all var(--t); box-shadow: 0 3px 12px rgba(234,30,99,0.3); }
.main-header-btn-item:hover { background: var(--p-dark); color: #fff; }
.main-header-btn-mobile-group { display: none; gap: 5px; }
.main-header-mobile-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); transition: all var(--t); }
.main-header-mobile-btn:hover { border-color: var(--p); color: var(--p); }
.main-header-mobile { display: none; flex-direction: column; gap: 11px; padding: 14px 0; border-top: 1px solid var(--border); }
.main-header-mobile.active { display: flex; }
.main-header-mobile-top { display: flex; align-items: center; justify-content: space-between; }
.main-header-mobile-link { display: flex; flex-direction: column; gap: 3px; }
.main-header-mobile-link-item { padding: 8px 13px; border-radius: var(--r); font-size: 0.86rem; color: var(--text-1); transition: all var(--t); }
.main-header-mobile-link-item:hover { background: var(--p-10); color: var(--p); }

footer { background: var(--surface); border-top: 1px solid var(--border); padding: 26px 0; }
.footer-list { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.footer-logo { font-weight: 700; color: var(--text-1); }
.footer-link { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-link-item a { padding: 4px 9px; border-radius: var(--r); font-size: 0.82rem; color: var(--text-2); transition: all var(--t); }
.footer-link-item a:hover { color: var(--p); background: var(--p-05); }

/* ================================================================
   متغيرات للـ updates
   ================================================================ */
:root {
  --tp-green: #22c55e;
  --tp-red:   #ef4444;
  --tp-blue:  #3b82f6;
  --tp-yellow:#f59e0b;
}

/* ================================================================
   Animations
   ================================================================ */
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fa-spinner-third { animation: spin 0.8s linear infinite; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1200px) {
  .stats-box-list { grid-template-columns: repeat(2,1fr); }
  .affiliate-stats-list { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(100%); }
  .sidebar.active { transform: translateX(0); box-shadow: var(--sh-xl); }
  .sidebar-content.active { display: block; }
  .page-content { margin-right: 0; }
  .sidebar-btn { display: flex; }
  .header-btn-box .language-box,
  .header-btn-box .user-balance { display: none; }
  .bottom-navigaiton { display: flex; }
  .grid-container { grid-template-columns: 1fr; gap: 13px; }
  .col-span-12,.col-span-7,.col-span-5,
  .col-span-6,.col-span-4 { grid-column: span 1; }
  #size-1, #size-2 { grid-column: span 1; }
  .affiliate-box { flex-direction: column; }
  .select-service-detail-box { position: static; }
}

@media (max-width: 600px) {
  .container-fluid { padding: 13px; }
  .page-header { padding: 0 13px; }
  .stats-box-list { grid-template-columns: 1fr 1fr; gap: 9px; }
  .affiliate-stats-list { grid-template-columns: 1fr 1fr; }
  .main-header-btn-mobile-group { display: flex; }
  .main-header-right > .main-header-link,
  .main-header-right > .main-header-btn { display: none; }
  .category-dropdown,.service-dropdown,.payment-dropdown { width: 98vw; max-height: 88vh; }
}