/* ================================================================
   HIG DESIGN SYSTEM — v4.2
   ملف واحد شامل — Bootstrap 5 CDN هو الأساس فقط
   ================================================================
   INDEX
   1.  Design Tokens (Light + Dark)
   2.  Global Resets & Shared Utilities  ← glass-layer مدمجة هنا
   3.  Layout Shell (Sidebar · Header · Main · Footer)
   4.  Header Components (Pills · Account · Dropdown · Toggle)
   5.  Guest Layout (Navbar · Footer)
   6.  Metric Cards
   7.  Segmented Control
   8.  Spotlight Search
   9.  Status Badges
   10. Shared Page Components
   11. Page: New Order
   12. Page: Mass Order
   13. Page: Services
   14. Pages: Tickets · Account · Misc
   15. Currency Switcher
   16. Utility & Animation
   17. Responsive
   18. PLUGIN: SELECT2
   ================================================================
   التغييرات عن v4.1
   ─ glass-layer مُوحَّدة: إزالة 6 تكرارات لـ @supports backdrop-filter
     واستبدالها بـ selector مجمَّع واحد (§2).
   ─ tooltip font-family: إزالة قاعدتَي dir وتوحيدهما في قاعدة واحدة
     تعتمد على --bs-body-font-family (§10).
   ─ RTL footer flex-direction: إزالة كتلة html[dir="rtl"] بالكامل (§17)
     بعد تحويل footer إلى logical gap بدلاً من row-reverse.
   ─ dropdown::after margin: تحويل margin-left/right → margin-inline (§4).
   ─ hig-toggle translateX: توحيد القاعدتين في متغير --toggle-x (§4).
   ================================================================ */

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */

:root,
[data-bs-theme="light"] {

  /* Typography */
  --bs-body-font-family:   'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif;
  --bs-body-font-weight:   300;
  --bs-body-line-height:   1.7;
  --hig-font:              var(--bs-body-font-family);
  --hig-mono:              'IBM Plex Mono', ui-monospace, monospace;

  /* Border radius */
  --bs-border-radius:      8px;
  --bs-border-radius-sm:   4px;
  --bs-border-radius-lg:   10px;
  --bs-border-radius-pill: 50px;

  /* Brand colors */
  --bs-primary:            #009ef7;
  --bs-primary-rgb:        0, 158, 247;
  --bs-secondary:          #FA5A7D;
  --bs-secondary-rgb:      250, 90, 125;
  --bs-purple:             #8950FC;
  --bs-purple-rgb:         137, 80, 252;
  --bs-success:            #34C759;
  --bs-success-rgb:        52, 199, 89;
  --bs-warning:            #FF9500;
  --bs-warning-rgb:        255, 149, 0;

  /* Subtle backgrounds */
  --bs-primary-bg-subtle:       #e6f5fe;
  --bs-primary-border-subtle:   #b3e1fd;
  --bs-primary-text-emphasis:   #003f63;
  --bs-secondary-bg-subtle:     #fef0f3;
  --bs-secondary-border-subtle: #fcd5de;
  --bs-secondary-text-emphasis: #642432;
  --bs-focus-ring-color:        rgba(var(--bs-primary-rgb), 0.25);

  /* Ink */
  --ink-primary:      #1d1d1f;
  --ink-secondary:    #6e6e73;
  --ink-tertiary:     #aeaeb2;
  --ink-accent:       var(--bs-primary);
  --ink-accent-hover: #0095e8;

  /* Surfaces */
  --surface-0: #F2F2F7;
  --surface-1: rgba(255, 255, 255, 0.88);
  --surface-2: rgba(255, 255, 255, 0.64);

  /* Bootstrap surface overrides */
  --bs-body-bg:      #F2F2F7;
  --bs-secondary-bg: #F7F7FA;
  --bs-tertiary-bg:  #FCFCFD;
  --bs-border-color: rgba(0, 0, 0, 0.08);

  /* Glass */
  --glass-bg:          rgba(255, 255, 255, 0.70);
  --glass-bg-fallback: rgba(255, 255, 255, 0.96);
  --glass-border:      rgba(0, 0, 0, 0.06);
  --glass-blur:        saturate(180%) blur(20px);

  /* Pills */
  --pill-balance-bg:  rgba(52, 199, 89, 0.12);
  --pill-balance-ink: #248A3D;
  --pill-orders-bg:   rgba(var(--bs-primary-rgb), 0.10);
  --pill-orders-ink:  #0058b5;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-float: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

  /* Layout */
  --sidebar-w: 280px;
  --header-h:  56px;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;

  /* Focus */
  --d3f-focus-outline: 2px solid var(--bs-primary);

  /* Shared hover backgrounds */
  --hover-dark-bg:  rgba(255, 255, 255, 0.07);
  --hover-light-bg: rgba(0, 0, 0, 0.05);

  /* ─── Toggle direction: يتغير تلقائيًا مع dir (§4) ─── */
  --toggle-x: 14px;
}

/* RTL: يكفي تغيير المتغير والخط — لا قواعد اتجاه أخرى مطلوبة */
html[dir="rtl"] {
  --bs-body-font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  --toggle-x: -14px;
}

[data-bs-theme="dark"] {

  --bs-primary:     #33aef8;
  --bs-primary-rgb: 51, 174, 248;
  --bs-purple:      #9d6bfa;
  --bs-purple-rgb:  157, 107, 250;
  --bs-success:     #34C759;
  --bs-warning:     #FF9F0A;
  --bs-warning-rgb: 255, 159, 10;

  --bs-primary-bg-subtle:       rgba(51, 174, 248, 0.15);
  --bs-primary-border-subtle:   rgba(51, 174, 248, 0.25);
  --bs-primary-text-emphasis:   #80cdfa;
  --bs-secondary-bg-subtle:     rgba(250, 90, 125, 0.15);
  --bs-secondary-border-subtle: rgba(250, 90, 125, 0.25);
  --bs-secondary-text-emphasis: #fcaebf;

  --ink-primary:      #F5F5F7;
  --ink-secondary:    #98989D;
  --ink-tertiary:     #48484A;
  --ink-accent:       var(--bs-primary);
  --ink-accent-hover: #47a6ff;

  --surface-0: #1C1C1E;
  --surface-1: rgba(28, 28, 30, 0.92);
  --surface-2: rgba(44, 44, 46, 0.80);

  --bs-body-bg:      #1C1C1E;
  --bs-secondary-bg: #2C2C2E;
  --bs-tertiary-bg:  #3A3A3C;
  --bs-border-color: rgba(255, 255, 255, 0.08);

  --glass-bg:          rgba(28, 28, 30, 0.80);
  --glass-bg-fallback: rgba(28, 28, 30, 0.98);
  --glass-border:      rgba(255, 255, 255, 0.08);

  --pill-balance-bg:  rgba(52, 199, 89, 0.15);
  --pill-balance-ink: #34C759;
  --pill-orders-bg:   rgba(var(--bs-primary-rgb), 0.15);
  --pill-orders-ink:  var(--bs-primary);

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3),  0 0 0 0.5px rgba(255,255,255,0.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-float: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
}

/* ================================================================
   2. GLOBAL RESETS & SHARED UTILITIES
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family:             var(--hig-font);
  background-color:        var(--surface-0);
  color:                   var(--ink-primary);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing:          -0.01em;
}

*:focus { outline: none; }

/* ── Glass layer ──────────────────────────────────────────────────
   selector مجمَّع واحد يغطي كل العناصر التي كانت تكرر @supports
   بشكل منفصل (sidebar · header · footer · guest-nav · guest-footer
   · spotlight · account-dropdown).
   الـ fallback مُعرَّف مباشرة على كل عنصر ضمن قواعده الخاصة
   (لأن بعض العناصر قد تظهر قبل تحليل هذا الـ selector).
   ─────────────────────────────────────────────────────────────── */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #app-sidebar,
  #app-header,
  #app-footer,
  #guest-nav,
  #guest-footer,
  .d3m-spotlight,
  .account-dropdown {
    background:              var(--glass-bg);
    backdrop-filter:         var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}

/* ── Eyebrow label ── */
.d3m-eyebrow,
.d3m-order-eyebrow,
.d3m-massorder-format-label,
.d3m-service-stat-cell h6,
.d3m-service-description-wrap h6 {
  font-size:      clamp(0.6875rem, 0.6rem + 0.3vw, 0.75rem);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-tertiary);
}
.d3m-order-eyebrow            { margin-bottom: 0.5rem; }
.d3m-massorder-format-label   { margin-bottom: 0.5rem; }
.d3m-service-stat-cell h6     { margin: 0 0 6px; overflow-wrap: anywhere; }
.d3m-service-description-wrap h6 { margin: 0 0 10px; }

/* ── Icon box ── */
.item-icon,
.currency-item-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   7px;
  background:      var(--surface-2);
  font-size:       12px;
  box-shadow:      var(--shadow-sm);
  flex-shrink:     0;
  transition:      background-color var(--dur-fast), color var(--dur-fast);
}

/* ── Text wrap ── */
.d3m-wrap,
.d3m-service-name,
.d3m-service-stat-value,
.d3m-service-description,
.d3m-side-info-content,
.d3m-ticket-bubble,
.d3m-ticket-file-link,
.d3m-ticket-title,
.d3m-affiliate-link-cell,
.d3m-updates-service-name,
.d3m-massorder-format-code {
  overflow-wrap: anywhere;
  word-break:    break-word;
}

/* ── Link reset ── */
.d3m-link-reset,
.d3m-table-card td a,
.d3m-ticket-file-link,
.d3m-affiliate-link-cell a { text-decoration: none; }

.d3m-link-reset:hover,
.d3m-table-card td a:hover,
.d3m-ticket-file-link:hover,
.d3m-affiliate-link-cell a:hover { text-decoration: underline; }

/* ── Thin scrollbar ── */
.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-tertiary) transparent;
}
.thin-scrollbar::-webkit-scrollbar-track { background: transparent; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: var(--ink-tertiary); border-radius: 2px; }

/* ================================================================
   3. LAYOUT SHELL
   ================================================================ */

/* ── Sidebar ── */
#app-sidebar {
  width:               var(--sidebar-w);
  position:            fixed;
  top:                 0;
  inset-inline-start:  0;
  height:              100vh;
  overflow-y:          auto;
  overflow-x:          hidden;
  z-index:             1030;
  transition:          transform var(--dur-slow) var(--ease-smooth);
  border-inline-end:   1px solid var(--glass-border);
  transform:           translateZ(0);
  will-change:         transform;
  overscroll-behavior: contain;
  /* glass fallback */
  background: var(--glass-bg-fallback);
}
/* Scrollbar */
#app-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-tertiary) transparent;
}
#app-sidebar::-webkit-scrollbar       { width: 4px; }
#app-sidebar::-webkit-scrollbar-track { background: transparent; }
#app-sidebar::-webkit-scrollbar-thumb { background: var(--ink-tertiary); border-radius: 2px; }

/* ── Sidebar Brand ── */
.sidebar-brand {
  height:        var(--header-h);
  padding:       0 16px;
  border-bottom: 1px solid var(--glass-border);
}
.sidebar-brand a {
  color:           var(--ink-primary);
  text-decoration: none;
  font-weight:     700;
  font-size:       15px;
  letter-spacing:  -0.02em;
}
.sidebar-brand a img { border-radius: 8px; }

/* ── Sidebar Balance Gradient Card ── */
.d3m-balance-gradient-card {
  background:    linear-gradient(140deg, var(--bs-primary) 0%, #34aadc 100%);
  border-radius: 14px;
  padding:       14px 16px 16px;
  margin:        8px 0;
  position:      relative;
  overflow:      hidden;
}
.d3m-balance-gradient-card::before,
.d3m-balance-gradient-card::after {
  content:        '';
  position:       absolute;
  border-radius:  50%;
  pointer-events: none;
}
.d3m-balance-gradient-card::before {
  top:              -30px;
  inset-inline-end: -30px;
  width:            100px;
  height:           100px;
  background:       rgba(255,255,255,0.12);
}
.d3m-balance-gradient-card::after {
  bottom:             -20px;
  inset-inline-start: 20px;
  width:              70px;
  height:             70px;
  background:         rgba(255,255,255,0.07);
}
.d3m-balance-gradient-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.7);
  margin-bottom:  4px;
  position:       relative;
  z-index:        1;
}
.d3m-balance-gradient-amount {
  font-size:      22px;
  font-weight:    700;
  letter-spacing: -0.04em;
  color:          white;
  line-height:    1.2;
  position:       relative;
  z-index:        1;
}

/* ── Sidebar Section Label ── */
.sidebar-section-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-tertiary);
  padding:        20px 16px 6px;
  user-select:    none;
}

/* ── Sidebar Balance Toggle ── */
.sidebar-balance-toggle {
  width:         26px;
  height:        26px;
  border-radius: 7px;
  background:    transparent;
  border:        1px solid var(--glass-border);
  color:         var(--ink-tertiary);
  font-size:     11px;
  cursor:        pointer;
  transition:    background-color var(--dur-fast), color var(--dur-fast);
}
.sidebar-balance-toggle:hover { background: var(--hover-light-bg); color: var(--ink-primary); }
[data-bs-theme="dark"] .sidebar-balance-toggle:hover { background: var(--hover-dark-bg); }

.sidebar-balance-amount.is-hidden,
.is-hidden { filter: blur(6px); user-select: none; }

/* ── Sidebar Nav Links ── */
#app-sidebar .nav-link {
  color:          var(--ink-secondary);
  font-size:      13.5px;
  font-weight:    500;
  letter-spacing: -0.01em;
  border-radius:  10px;
  margin:         1px 8px;
  padding:        8px 10px;
  display:        flex;
  align-items:    center;
  gap:            10px;
  overflow:       hidden;
  position:       relative;
  min-width:      0;
  transition:
    background-color var(--dur-base) var(--ease-smooth),
    color            var(--dur-base) var(--ease-smooth),
    box-shadow       var(--dur-base) var(--ease-smooth),
    transform        var(--dur-fast) var(--ease-spring);
}

#app-sidebar .nav-link::before {
  content:            '';
  position:           absolute;
  inset-inline-start: 0;
  top:                20%;
  width:              3px;
  height:             60%;
  /* LTR radius */
  border-radius:      0 3px 3px 0;
  background:         var(--ink-accent);
  opacity:            0;
  /* translateX سلبي في LTR، منطقي في RTL بفضل --toggle-x لو أردنا
     لكن هنا القيمة ثابتة لأن inset-inline-start يتكفل بالاتجاه */
  transform:          translateX(-3px);
  transition:
    transform var(--dur-base) var(--ease-spring),
    opacity   var(--dur-base) var(--ease-smooth);
}
/* RTL: border-radius وtranslateX فقط */
html[dir="rtl"] #app-sidebar .nav-link::before {
  border-radius: 3px 0 0 3px;
  transform:     translateX(3px);
}
#app-sidebar .nav-link.active::before              { transform: translateX(0); opacity: 1; }
html[dir="rtl"] #app-sidebar .nav-link.active::before { transform: translateX(0); }

#app-sidebar .nav-link > span {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  min-width:     0;
  flex:          1;
}
#app-sidebar .nav-link i {
  width:       18px;
  text-align:  center;
  font-size:   13px;
  flex-shrink: 0;
  opacity:     0.6;
  transition:
    opacity   var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-spring);
}

#app-sidebar .nav-link:hover        { background-color: var(--hover-light-bg); color: var(--ink-primary); }
#app-sidebar .nav-link:hover i      { opacity: 1; transform: scale(1.1); }
#app-sidebar .nav-link:active       { transform: scale(0.97); }
[data-bs-theme="dark"] #app-sidebar .nav-link:hover { background-color: rgba(255,255,255,0.06); }

#app-sidebar .nav-link.active {
  background-color: var(--surface-1);
  color:            var(--ink-accent);
  font-weight:      600;
  box-shadow:       var(--shadow-sm);
}
[data-bs-theme="dark"] #app-sidebar .nav-link.active {
  background-color: var(--bs-primary-bg-subtle);
  box-shadow:       none;
}
#app-sidebar .nav-link.active i { opacity: 1; color: var(--ink-accent); }

/* ── Main Column ── */
#app-main {
  margin-inline-start: var(--sidebar-w);
  min-width:           0;
  background-color:    var(--surface-0);
  isolation:           isolate;
}

/* ── Header ── */
#app-header {
  height:        var(--header-h);
  position:      sticky;
  top:           0;
  z-index:       1020;
  padding:       0 20px;
  border-bottom: 1px solid var(--glass-border);
  transform:     translateZ(0);
  will-change:   transform;
  /* glass fallback */
  background: var(--glass-bg-fallback);
}

.header-start { min-width: 0; }

.header-page-title {
  font-size:      14px;
  font-weight:    600;
  color:          var(--ink-primary);
  letter-spacing: -0.02em;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  min-width:      0;
  max-width:      min(300px, calc(100vw - 220px));
}

.header-greeting { line-height: 1.2; margin-inline-end: 4px; }

.header-greeting-label {
  font-size:      10px;
  font-weight:    400;
  color:          var(--ink-tertiary);
  letter-spacing: 0.01em;
}
.header-greeting-name {
  font-size:      13px;
  font-weight:    600;
  color:          var(--ink-primary);
  letter-spacing: -0.02em;
  max-width:      120px;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.header-divider {
  width:      1px;
  height:     20px;
  background: var(--glass-border);
}

/* ── Page Content ── */
#app-content {
  padding:             28px 24px;
  transform:           translateZ(0);
  backface-visibility: hidden;
}

/* ── Authenticated Footer ── */
#app-footer {
  padding:    20px 24px;
  border-top: 1px solid var(--glass-border);
  transform:  translateZ(0);
  /* glass fallback */
  background: var(--glass-bg-fallback);
}

.footer-brand-name { font-size: 12px; font-weight: 700; color: var(--ink-primary); letter-spacing: -0.02em; }
.footer-copy       { font-size: 11px; color: var(--ink-tertiary); letter-spacing: -0.01em; white-space: nowrap; }
.footer-link       { font-size: 11px; font-weight: 500; color: var(--ink-tertiary); text-decoration: none; letter-spacing: -0.01em; transition: color var(--dur-fast); }
.footer-link:hover { color: var(--ink-accent); }
.footer-dot        { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-tertiary); opacity: 0.4; }
.footer-scripts    { display: none; }

/* ================================================================
   4. HEADER COMPONENTS
   ================================================================ */

/* ── Status Pills ── */
.status-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  height:         28px;
  padding:        0 10px;
  border-radius:  100px;
  font-size:      12px;
  font-weight:    600;
  letter-spacing: -0.01em;
  white-space:    nowrap;
  cursor:         default;
  user-select:    none;
  transition:     background-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.status-pill:active             { transform: scale(0.95); }
.status-pill .pill-icon         { font-size: 10px; opacity: 0.8; }
.status-pill.pill-balance       { background: var(--pill-balance-bg); color: var(--pill-balance-ink); }
.status-pill.pill-orders        { background: var(--pill-orders-bg);  color: var(--pill-orders-ink); }
.status-pill.pill-clickable     { cursor: pointer; text-decoration: none; }
.status-pill.pill-clickable:hover                        { filter: brightness(0.94); }
[data-bs-theme="dark"] .status-pill.pill-clickable:hover { filter: brightness(1.15); }
#header-balance-pill            { cursor: default; }

/* ── Account Button ── */
.account-btn.dropdown-toggle::after { display: none !important; }

.account-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  border:          none;
  background:      var(--ink-accent);
  color:           #fff;
  font-size:       12px;
  font-weight:     700;
  font-family:     var(--hig-font);
  letter-spacing:  -0.01em;
  cursor:          pointer;
  padding:         0;
  overflow:        hidden;
  box-shadow:      0 2px 8px rgba(var(--bs-primary-rgb), 0.30);
  transition:
    background-color var(--dur-fast),
    transform        var(--dur-fast) var(--ease-spring),
    box-shadow       var(--dur-fast);
}
.account-btn:hover  { background: var(--ink-accent-hover); transform: scale(1.05); }
.account-btn:active { transform: scale(0.93); }

/* ── Account Dropdown ── */
.account-dropdown {
  min-width:     220px;
  padding:       6px;
  border-radius: 14px;
  border:        1px solid var(--glass-border);
  box-shadow:    var(--shadow-float);
  margin-top:    6px !important;
  /* glass fallback */
  background: var(--glass-bg-fallback);
}

.account-dropdown-identity {
  padding:       8px 10px 10px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 4px;
}
.account-dropdown-name  { font-size: 13px; font-weight: 600; color: var(--ink-primary); letter-spacing: -0.02em; }
.account-dropdown-email { font-size: 11px; color: var(--ink-tertiary); margin-top: 1px; }

.account-dropdown .dropdown-header {
  padding:        8px 10px 6px;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--ink-tertiary);
}

.account-dropdown .dropdown-item {
  padding:        8px 10px;
  border-radius:  8px;
  font-size:      13.5px;
  font-weight:    500;
  color:          var(--ink-primary);
  letter-spacing: -0.01em;
  transition:     background-color var(--dur-fast), color var(--dur-fast);
}
.account-dropdown .dropdown-item:hover         { background: var(--hover-light-bg); }
.account-dropdown .dropdown-item:active        { background: rgba(0,0,0,0.08); }
[data-bs-theme="dark"] .account-dropdown .dropdown-item:hover { background: var(--hover-dark-bg); }

.account-dropdown .dropdown-item.item-destructive       { color: #FF3B30; }
[data-bs-theme="dark"] .account-dropdown .dropdown-item.item-destructive { color: #FF453A; }
.account-dropdown .dropdown-item.item-destructive .item-icon {
  background: rgba(255,59,48,0.10); color: #FF3B30;
}
[data-bs-theme="dark"] .account-dropdown .dropdown-item.item-destructive .item-icon {
  background: rgba(255,69,58,0.15); color: #FF453A;
}

.account-dropdown .dropdown-divider { margin: 4px 0; border-color: var(--glass-border); }

/* ── Theme Toggle Row ── */
.theme-toggle-row { padding: 6px 10px; }

.theme-toggle-label {
  font-size:      13.5px;
  font-weight:    500;
  color:          var(--ink-primary);
  letter-spacing: -0.01em;
}

.hig-toggle { position: relative; width: 36px; height: 22px; }
.hig-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.hig-toggle-track {
  position:      absolute;
  inset:         0;
  border-radius: 100px;
  background:    var(--ink-tertiary);
  cursor:        pointer;
  transition:    background-color var(--dur-base) var(--ease-smooth);
}
.hig-toggle input:checked + .hig-toggle-track { background: var(--ink-accent); }
.hig-toggle-track::after {
  content:            '';
  position:           absolute;
  top:                3px;
  inset-inline-start: 3px;
  width:              16px;
  height:             16px;
  border-radius:      50%;
  background:         white;
  box-shadow:         0 1px 3px rgba(0,0,0,0.25);
  transition:         transform var(--dur-base) var(--ease-spring);
}
/* متغير --toggle-x يعكس الإشارة تلقائيًا في RTL (§1) */
.hig-toggle input:checked + .hig-toggle-track::after {
  transform: translateX(var(--toggle-x));
}

/* ── dropdown::after — logical margin بدلاً من dir ── */
.dropdown-toggle::after {
  vertical-align:   baseline;
  content:          "\f078";
  font-size:        10px;
  font-family:      "Font Awesome 5 Pro";
  font-weight:      500;
  border:           0;
  margin-inline-start: 8px;   /* يعمل في LTR وRTL معاً */
}

/* ── Mobile Sidebar Toggle ── */
#sidebar-toggle {
  display:         none;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   8px;
  background:      transparent;
  border:          1px solid var(--glass-border);
  color:           var(--ink-secondary);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background-color var(--dur-fast), color var(--dur-fast);
}
#sidebar-toggle:hover                        { background: var(--hover-light-bg); color: var(--ink-primary); }
[data-bs-theme="dark"] #sidebar-toggle:hover { background: var(--hover-dark-bg); }

/* ================================================================
   5. GUEST LAYOUT
   ================================================================ */

#guest-nav {
  min-height: 52px;
  border-bottom: 1px solid var(--glass-border);
  /* glass fallback */
  background: var(--glass-bg-fallback);
}

#guest-nav .navbar-brand  { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--ink-primary); }
#guest-nav .nav-link      { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-secondary); padding: 0.4rem 0.75rem; border-radius: 8px; transition: color 120ms, background-color 120ms; }
#guest-nav .nav-link:hover                        { color: var(--ink-primary); background: rgba(0,0,0,0.04); }
[data-bs-theme="dark"] #guest-nav .nav-link:hover { background: rgba(255,255,255,0.06); }
#guest-nav .nav-link.active { color: var(--ink-accent); font-weight: 600; }

#guest-nav .navbar-toggler {
  --bs-navbar-toggler-border-color:  transparent;
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width:   0;
  --bs-navbar-color:                 var(--ink-secondary);
  transition:                        background-color var(--dur-fast);
}
#guest-nav .navbar-toggler:hover                        { background-color: rgba(0,0,0,0.05); }
[data-bs-theme="dark"] #guest-nav .navbar-toggler:hover { background-color: rgba(255,255,255,0.08); }
#guest-nav .navbar-toggler:focus { box-shadow: none; outline: 2px solid rgba(var(--bs-primary-rgb), 0.4); outline-offset: 2px; }

[data-bs-theme="light"] #guest-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236e6e73' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"]  #guest-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2398989d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

#guest-nav .navbar-toggler:has(.toggler-icon) .navbar-toggler-icon { display: none; }
#guest-nav .navbar-toggler .toggler-icon { position: relative; display: block; width: 22px; height: 16px; margin: auto; }
#guest-nav .navbar-toggler .toggler-icon::before,
#guest-nav .navbar-toggler .toggler-icon .toggler-line,
#guest-nav .navbar-toggler .toggler-icon::after {
  content:       '';
  display:       block;
  position:      absolute;
  left:          0;
  width:         100%;
  height:        2px;
  border-radius: 2px;
  background:    var(--ink-secondary);
  transition:    top var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth), opacity var(--dur-fast) linear;
}
#guest-nav .navbar-toggler .toggler-icon::before    { top: 0; }
#guest-nav .navbar-toggler .toggler-icon .toggler-line { top: 7px; }
#guest-nav .navbar-toggler .toggler-icon::after     { top: 14px; }
#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon::before    { top: 7px; transform: rotate(45deg);  background: var(--ink-primary); }
#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon .toggler-line { opacity: 0; transform: scaleX(0); }
#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon::after     { top: 7px; transform: rotate(-45deg); background: var(--ink-primary); }

/* ── Guest Footer ── */
#guest-footer {
  border-top: 1px solid var(--glass-border);
  padding:    24px 0;
  /* glass fallback */
  background: var(--glass-bg-fallback);
}
.gf-brand-name { font-size: 12px; font-weight: 700; color: var(--ink-primary); letter-spacing: -0.02em; }
.gf-link       { font-size: 11px; font-weight: 500; color: var(--ink-tertiary); text-decoration: none; letter-spacing: -0.01em; transition: color 120ms; }
.gf-link:hover { color: var(--ink-accent); }
.gf-dot        { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-tertiary); opacity: 0.4; }
.gf-copy       { font-size: 11px; color: var(--ink-tertiary); white-space: nowrap; letter-spacing: -0.01em; }
#guest-footer .footer-scripts { display: none; }

/* ================================================================
   6. METRIC CARDS
   ================================================================ */

.d3m-metric-card {
  background:    var(--bs-tertiary-bg);
  border:        1px solid var(--glass-border);
  border-radius: 20px;
  padding:       18px 18px 16px;
  position:      relative;
  overflow:      hidden;
  cursor:        default;
  transition:
    transform  var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-smooth);
}
.d3m-metric-card::after {
  content:        '';
  position:       absolute;
  top:            0; left: 0; right: 0;
  height:         0.5px;
  background:     rgba(255,255,255,0.7);
  pointer-events: none;
}
[data-bs-theme="dark"] .d3m-metric-card::after { background: rgba(255,255,255,0.06); }
.d3m-metric-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.d3m-metric-card:active { transform: scale(0.98) translateY(0); }

.d3m-metric-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   10px;
  font-size:       15px;
  margin-bottom:   14px;
  flex-shrink:     0;
}
.d3m-metric-icon--blue   { background: rgba(var(--bs-primary-rgb), 0.10); color: var(--bs-primary); }
.d3m-metric-icon--green  { background: rgba(52,199,89,0.12);  color: #1a7f3c; }
.d3m-metric-icon--purple { background: rgba(137,80,252,0.12); color: #7337EE; }
.d3m-metric-icon--orange { background: rgba(255,149,0,0.12);  color: #c47500; }
.d3m-metric-icon--red    { background: rgba(255,59,48,0.10);  color: #cc2a22; }
.d3m-metric-icon--teal   { background: rgba(50,173,230,0.12); color: #1a7f9f; }
[data-bs-theme="dark"] .d3m-metric-icon--green  { color: #34C759; }
[data-bs-theme="dark"] .d3m-metric-icon--purple { color: #9d6bfa; }
[data-bs-theme="dark"] .d3m-metric-icon--orange { color: #FF9F0A; }
[data-bs-theme="dark"] .d3m-metric-icon--red    { color: #FF453A; }
[data-bs-theme="dark"] .d3m-metric-icon--teal   { color: #5ac8fa; }

.d3m-metric-label {
  font-size:      11px;
  font-weight:    500;
  color:          var(--ink-tertiary);
  letter-spacing: 0.01em;
  margin-bottom:  4px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.d3m-metric-value {
  font-size:      26px;
  font-weight:    700;
  letter-spacing: -0.04em;
  color:          var(--ink-primary);
  line-height:    1.1;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.d3m-metric-delta {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  font-size:      11px;
  font-weight:    600;
  margin-top:     8px;
  padding:        2px 8px;
  border-radius:  100px;
  letter-spacing: -0.01em;
}
.d3m-metric-delta--up      { background: rgba(52,199,89,0.12);  color: #1a7f3c; }
.d3m-metric-delta--down    { background: rgba(255,59,48,0.10);  color: #cc2a22; }
.d3m-metric-delta--neutral { background: var(--surface-2);      color: var(--ink-secondary); }
[data-bs-theme="dark"] .d3m-metric-delta--up   { color: #34C759; background: rgba(52,199,89,0.18); }
[data-bs-theme="dark"] .d3m-metric-delta--down { color: #FF453A; background: rgba(255,69,58,0.18); }

/* ================================================================
   7. SEGMENTED CONTROL
   ================================================================ */

.d3m-segmented {
  display:       inline-flex;
  background:    rgba(0,0,0,0.06);
  border-radius: 10px;
  padding:       2px;
  gap:           2px;
}
[data-bs-theme="dark"] .d3m-segmented { background: rgba(255,255,255,0.08); }

.d3m-seg-item {
  padding:        5px 16px;
  border-radius:  8px;
  border:         none;
  background:     transparent;
  font-family:    var(--hig-font);
  font-size:      12px;
  font-weight:    600;
  color:          var(--ink-secondary);
  letter-spacing: -0.01em;
  cursor:         pointer;
  white-space:    nowrap;
  min-height:     unset;
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    color            var(--dur-fast) var(--ease-smooth),
    box-shadow       var(--dur-fast) var(--ease-smooth);
}
.d3m-seg-item.active,
.d3m-seg-item[aria-selected="true"]                          { background: var(--bs-tertiary-bg); color: var(--ink-primary); box-shadow: var(--shadow-sm); }
.d3m-seg-item:hover:not(.active):not([aria-selected="true"]) { color: var(--ink-primary); }

/* ================================================================
   8. SPOTLIGHT SEARCH
   ================================================================ */

.d3m-spotlight-trigger {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  height:         32px;
  padding:        0 12px;
  border-radius:  100px;
  border:         1px solid var(--glass-border);
  background:     var(--surface-2);
  color:          var(--ink-tertiary);
  font-family:    var(--hig-font);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: -0.01em;
  cursor:         pointer;
  white-space:    nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    color            var(--dur-fast) var(--ease-smooth),
    border-color     var(--dur-fast) var(--ease-smooth);
}
.d3m-spotlight-trigger:hover {
  background:   rgba(var(--bs-primary-rgb), 0.06);
  border-color: rgba(var(--bs-primary-rgb), 0.14);
  color:        var(--ink-primary);
}
.d3m-spotlight-trigger kbd {
  font-size:      9px;
  font-weight:    600;
  background:     rgba(0,0,0,0.06);
  color:          var(--ink-tertiary);
  padding:        1px 5px;
  border-radius:  4px;
  border:         none;
  letter-spacing: 0.02em;
}
[data-bs-theme="dark"] .d3m-spotlight-trigger kbd { background: rgba(255,255,255,0.08); }

.d3m-spotlight-dialog { max-width: 520px; margin-top: 80px; }

.d3m-spotlight {
  border-radius: 20px !important;
  border:        1px solid var(--glass-border) !important;
  box-shadow:    var(--shadow-float) !important;
  overflow:      hidden;
  /* glass fallback */
  background: var(--glass-bg-fallback) !important;
}
/* backdrop-filter لـ spotlight أقوى من الـ default */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .d3m-spotlight {
    backdrop-filter:         blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  }
}

.d3m-spotlight-input-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       14px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.d3m-spotlight-search-icon { font-size: 16px; color: var(--ink-tertiary); flex-shrink: 0; }
.d3m-spotlight-input {
  flex:           1;
  border:         none;
  background:     transparent;
  outline:        none;
  font-family:    var(--hig-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--ink-primary);
  letter-spacing: -0.02em;
  min-width:      0;
  -webkit-appearance: none;
  appearance:         none;
}
.d3m-spotlight-input::placeholder            { color: var(--ink-tertiary); }
.d3m-spotlight-input::-webkit-search-cancel-button { display: none; }

.d3m-spotlight-esc,
.d3m-spotlight-kbd {
  font-family:    var(--hig-font);
  font-size:      10px;
  font-weight:    600;
  background:     rgba(0,0,0,0.06);
  color:          var(--ink-secondary);
  padding:        2px 7px;
  border-radius:  5px;
  border:         none;
  letter-spacing: 0.02em;
  flex-shrink:    0;
  white-space:    nowrap;
}
[data-bs-theme="dark"] .d3m-spotlight-esc,
[data-bs-theme="dark"] .d3m-spotlight-kbd { background: rgba(255,255,255,0.08); }
.d3m-spotlight-esc { cursor: pointer; }

.d3m-spotlight-results { padding: 6px; max-height: 380px; overflow-y: auto; overscroll-behavior: contain; }

.d3m-spotlight-section-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--ink-tertiary);
  padding:        8px 12px 4px;
  user-select:    none;
}
.d3m-spotlight-result {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         10px 12px;
  border-radius:   10px;
  text-decoration: none;
  color:           var(--ink-primary);
  cursor:          pointer;
  transition:      background-color var(--dur-fast);
}
.d3m-spotlight-result:hover,
.d3m-spotlight-result.active,
.d3m-spotlight-result:focus-visible { background: rgba(var(--bs-primary-rgb), 0.08); color: var(--ink-primary); outline: none; }

.d3m-spotlight-result-icon {
  width:           32px;
  height:          32px;
  border-radius:   8px;
  background:      rgba(var(--bs-primary-rgb), 0.10);
  color:           var(--bs-primary);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  flex-shrink:     0;
}

.d3m-spotlight-result-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.d3m-spotlight-result-name { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d3m-spotlight-result-type { font-size: 11px; color: var(--ink-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================
   9. STATUS BADGES
   ================================================================ */

.d3m-status-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  height:         24px;
  padding:        0 9px;
  border-radius:  100px;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: -0.01em;
  white-space:    nowrap;
  user-select:    none;
}
.d3m-status-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.d3m-status-badge--paid       { background: rgba(52,199,89,0.12);              color: #1a7f3c; }
.d3m-status-badge--pending    { background: rgba(255,149,0,0.12);              color: #c47500; }
.d3m-status-badge--processing { background: rgba(var(--bs-primary-rgb),0.10); color: var(--bs-primary); }
.d3m-status-badge--refunded   { background: rgba(255,59,48,0.10);              color: #cc2a22; }
.d3m-status-badge--cancelled  { background: rgba(0,0,0,0.06);                  color: var(--ink-secondary); }
.d3m-status-badge--partial    { background: rgba(137,80,252,0.10);             color: #7337EE; }

.d3m-status-badge--paid .d3m-status-dot       { background: #30d158; box-shadow: 0 0 0 2px rgba(48,209,88,0.25); }
.d3m-status-badge--pending .d3m-status-dot    { background: #ff9500; }
.d3m-status-badge--processing .d3m-status-dot { background: var(--bs-primary); }
.d3m-status-badge--refunded .d3m-status-dot   { background: #ff3b30; }
.d3m-status-badge--cancelled .d3m-status-dot  { background: var(--ink-tertiary); }

[data-bs-theme="dark"] .d3m-status-badge--paid       { color: #34C759; background: rgba(52,199,89,0.18); }
[data-bs-theme="dark"] .d3m-status-badge--pending    { color: #FF9F0A; background: rgba(255,159,10,0.18); }
[data-bs-theme="dark"] .d3m-status-badge--refunded   { color: #FF453A; background: rgba(255,69,58,0.18); }
[data-bs-theme="dark"] .d3m-status-badge--processing { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),0.18); }
[data-bs-theme="dark"] .d3m-status-badge--partial    { color: #9d6bfa; background: rgba(137,80,252,0.18); }
[data-bs-theme="dark"] .d3m-status-badge--cancelled  { color: var(--ink-secondary); background: rgba(255,255,255,0.08); }

/* ================================================================
   10. BOOTSTRAP OVERRIDES + SHARED PAGE COMPONENTS
   ================================================================ */

.dropdown-menu {
  --bs-dropdown-link-active-bg:    var(--bs-primary);
  --bs-dropdown-link-active-color: #fff;
  background-color: var(--bs-tertiary-bg);
  border-color:     var(--bs-border-color);
}

.pagination {
  --bs-pagination-active-bg:           var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-focus-box-shadow:    0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.pagination > li         { margin: 0 2px; }
.pagination > li a       { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--bs-body-color); font-weight: 700; }
.pagination > li.active a { color: var(--bs-primary); }

.list-group {
  --bs-list-group-active-bg:           var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  --bs-list-group-active-color:        #fff;
}

.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }

.nav-pills {
  --bs-nav-pills-link-active-bg:    var(--bs-primary);
  --bs-nav-pills-link-active-color: #fff;
}
.nav-pills .nav-link { color: var(--bs-body-color); font-weight: 600; transition: all 0.2s ease-in-out; }

.accordion {
  --bs-accordion-active-color:         var(--bs-primary);
  --bs-accordion-active-bg:            rgba(var(--bs-primary-rgb), 0.08);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.accordion-item                          { border: 0; overflow: hidden; background-color: var(--bs-tertiary-bg); }
.accordion-button                        { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border-radius: var(--bs-border-radius) !important; font-weight: 500; }
.accordion-button:not(.collapsed)        { color: var(--bs-primary); box-shadow: none; }
.accordion-button:focus                  { box-shadow: none; }
.accordion-body                          { font-size: 14px; }
.accordion-button::after                 { width: 1rem; height: 1rem; background-size: 1rem; }
[data-bs-theme="dark"] .accordion-button.collapsed::after { filter: brightness(0) invert(1); }

.card, .modal-content { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.card                  { box-shadow: var(--bs-box-shadow-sm); }
.card-header           { border-bottom: var(--bs-border-width) solid var(--bs-border-color); padding: 16px 20px; }

.alert   { border: 0; font-size: 14px; margin-bottom: 10px; }

/* tooltip: قاعدة واحدة تعتمد على --bs-body-font-family الذي يتغير مع dir (§1) */
.tooltip {
  font-size:   12px !important;
  font-family: var(--bs-body-font-family) !important;
}

/* ── Buttons ── */
.btn                      { --bs-btn-font-weight: 500; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease-in-out; }
.btn.btn-icon, .btn-icon  { min-height: unset; width: auto; height: auto; padding: 0; }

.btn-primary         { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: #0095e8; --bs-btn-hover-border-color: #0095e8; --bs-btn-active-bg: #0095e8; --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
.btn-secondary        { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: #fc456a; --bs-btn-hover-border-color: #fc456a; --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); }
.btn-outline-secondary{ --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); }
.btn-purple           { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-purple); --bs-btn-border-color: var(--bs-purple); --bs-btn-hover-bg: #7337EE; --bs-btn-focus-shadow-rgb: var(--bs-purple-rgb); }
.btn-outline-purple   { --bs-btn-color: var(--bs-purple); --bs-btn-border-color: var(--bs-purple); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-purple); --bs-btn-focus-shadow-rgb: var(--bs-purple-rgb); }

/* ── Forms ── */
.form-label, .control-label                     { font-weight: 600; font-size: 14px; }
.form-control, .form-select                     { font-size: 14px; }
.form-control:not(textarea), .form-select       { height: 50px; }
.form-control:focus, .form-select:focus         { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.form-control:disabled, .form-control[readonly] { background-color: var(--bs-body-bg); }

.form-check-input:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); }
.form-control.is-warning, .form-select.is-warning { border-color: var(--bs-warning) !important; box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25); }
.warning-feedback { display: block; color: var(--bs-warning); font-size: 12px; margin-top: 4px; }

[data-bs-theme="light"] .form-select { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgNUw4IDExTDE0IDUiIHN0cm9rZT0iIzE4MUMzMiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="); }
[data-bs-theme="dark"]  .form-select { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgNUw4IDExTDE0IDUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="); }

.form-check .form-check-input                  { border-color: var(--bs-border-color); background-color: transparent; }
.form-check .form-check-input[type="checkbox"] { width: 20px; height: 20px; border-radius: 3px; }
.form-check .form-check-label                  { padding: 0 10px; }
.form-check-input:checked                      { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:checked[type="checkbox"]     { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23ffffff'/%3e%3c/svg%3e"); background-size: 10px; }

.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb      { background-color: var(--bs-primary); border-color: var(--bs-primary); }

/* ── Tables ── */
.table { vertical-align: middle; }
html[dir="rtl"] .table { font-size: 12px; }
html[dir="ltr"] .table { font-size: 14px; }
.table th, .table td { border-bottom: 0; }
.table tbody tr:not(.category-name) td              { background-color: var(--bs-secondary-bg); }
.table tbody tr:not(.category-name, :last-of-type) td { border-bottom: 4px solid var(--bs-body-bg); }
.table tbody td:first-of-type { border-start-start-radius: var(--bs-border-radius-lg); border-end-start-radius: var(--bs-border-radius-lg); }
.table tbody td:last-of-type  { border-start-end-radius:   var(--bs-border-radius-lg); border-end-end-radius:   var(--bs-border-radius-lg); }
.table td .link        { width: 200px; display: block; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.table td span.service { width: 240px; display: block; }
.category-name strong  { background-color: var(--bs-primary); border-radius: var(--bs-border-radius-lg); display: block; width: 100%; padding: 16px; font-weight: 500; color: #fff; }

/* ── Shared cards & pills ── */
.d3m-filter-wrap,
.d3m-table-card { background: var(--bs-tertiary-bg); border: 1px solid var(--glass-border); border-radius: 18px; }

.d3m-table-card .table-responsive { overflow-x: auto; overflow-y: visible; }
.d3m-table-card tbody td:last-child { overflow: visible; position: relative; }

.d3m-history-pill { border-radius: 999px; font-weight: 600; padding-inline: 14px; min-height: 40px; }
.d3m-history-pill:not(.active)       { background: var(--surface-1); color: var(--ink-secondary); border: 1px solid var(--glass-border); }
.d3m-history-pill:not(.active):hover { background: rgba(var(--bs-primary-rgb),0.06); color: var(--ink-primary); border-color: rgba(var(--bs-primary-rgb),0.14); }

.d3m-table-card .table { margin-bottom: 0; }
.d3m-table-card thead th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); background: transparent; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
.d3m-table-card tbody td { vertical-align: middle; }
.d3m-table-card tbody tr:not(.d3m-services-category-row):not(:last-child) td { border-bottom: 1px solid rgba(127,127,127,0.10); }
.d3m-table-card tbody tr:not(.d3m-services-category-row):hover td { background: rgba(var(--bs-primary-rgb),0.025); }

.d3m-page-title   { font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink-primary); }

.d3m-details-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--glass-border); color: var(--ink-secondary); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth); }
.d3m-details-link:hover { color: var(--ink-primary); background: rgba(var(--bs-primary-rgb),0.06); border-color: rgba(var(--bs-primary-rgb),0.14); }

.d3m-table-card .form-check-input { float: none; margin-top: 0; }
.d3m-table-card td.text-center    { vertical-align: middle; }

/* ================================================================
   11. PAGE: NEW ORDER
   ================================================================ */

.d3m-order-card, .d3m-side-card { background: var(--bs-tertiary-bg); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--shadow-md); }

.d3m-search-spotlight, .d3m-support-note { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 18px; padding: 16px; }
.d3m-search .input-group-text, .d3m-search .form-control { border-color: var(--glass-border); background: transparent; }
.d3m-search .input-group-text { border-inline-end: 0; }
.d3m-search .form-control     { border-inline-start: 0; }

.d3m-chip {
  min-height:    3.125rem;
  padding:       0.625rem 0.875rem;
  border-radius: 1rem;
  border:        1px solid var(--glass-border);
  background:    var(--surface-1);
  color:         var(--ink-secondary);
  font-size:     0.8125rem;
  font-weight:   600;
  line-height:   1.2;
  text-align:    center;
  box-shadow:    none;
  transition:    background-color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring);
}
[data-bs-theme="light"] .d3m-chip { background: var(--surface-1); border-color: rgba(0,0,0,0.06); }
[data-bs-theme="dark"]  .d3m-chip { background: var(--surface-2); border-color: rgba(255,255,255,0.06); }
.d3m-chip i    { font-size: 0.95rem; opacity: 0.88; line-height: 1; flex: 0 0 auto; }
.d3m-chip span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.d3m-chip:hover, .d3m-chip:focus-visible         { background: rgba(var(--bs-primary-rgb),0.06); border-color: rgba(var(--bs-primary-rgb),0.14); color: var(--ink-primary); transform: translateY(-1px); }
.d3m-chip.is-active, .d3m-chip[aria-checked="true"] { background: rgba(var(--bs-primary-rgb),0.09); border-color: rgba(var(--bs-primary-rgb),0.18); color: var(--bs-primary); }

.d3m-form-section + .d3m-form-section { border-top: 1px solid var(--glass-border); margin-top: 22px; padding-top: 22px; }
.d3m-submit-btn { border-radius: 16px; }
.d3m-service-card, .d3m-side-info-card { overflow: hidden; }
.d3m-service-card-header { background: transparent; border-bottom: 1px solid var(--glass-border); padding: 18px 20px 12px; }
.d3m-service-card-body   { padding: 18px 20px 20px; }

.d3m-service-price-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink-primary); font-size: 12px; font-weight: 700; letter-spacing: -0.01em; border: 1px solid var(--glass-border); max-width: 100%; }

.d3m-service-name  { font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem); line-height: 1.8; color: var(--ink-primary); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0; }

.d3m-service-stat-cell { padding-top: 14px; border-top: 1px solid var(--glass-border); }
.d3m-service-stat:nth-child(1) .d3m-service-stat-cell,
.d3m-service-stat:nth-child(2) .d3m-service-stat-cell { padding-top: 0; border-top: 0; }

.d3m-service-stat-value { font-size: clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem); font-weight: 600; color: var(--ink-primary); line-height: 1.6; letter-spacing: -0.01em; }

.d3m-service-description-wrap { width: 100%; border-top: 1px solid var(--glass-border); padding-top: 18px; background: transparent; border-radius: 0; padding-inline: 0; padding-bottom: 0; }
.d3m-service-description      { font-size: clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem); line-height: 1.9; color: var(--ink-primary); }
.d3m-side-info-content        { line-height: 1.9; }
.d3m-side-info-content h1, .d3m-side-info-content h2, .d3m-side-info-content h3,
.d3m-side-info-content h4, .d3m-side-info-content h5, .d3m-side-info-content h6 { margin-top: 1.25rem; margin-bottom: 0.75rem; }
.d3m-side-info-content p:last-child { margin-bottom: 0; }

.d3m-service-snapshot-card {
  overflow: hidden;
}

.d3m-service-snapshot-card .d3m-service-card-header {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
}

.d3m-service-snapshot-card .d3m-service-card-body {
  padding-top: 0;
}

.d3m-service-snapshot-card .d3m-service-summary-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  min-width: 0;
}

.d3m-service-snapshot-card .d3m-service-summary-media {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}

.d3m-service-snapshot-card .d3m-service-summary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.d3m-service-snapshot-card .d3m-service-summary-content {
  min-width: 0;
  flex: 1;
}

.d3m-service-snapshot-card .d3m-service-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-primary);
  margin-bottom: 0;
}

.d3m-service-snapshot-card .d3m-service-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.d3m-service-snapshot-card .d3m-service-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-primary);
}

.d3m-service-snapshot-card .d3m-service-trust-pill-label {
  color: var(--ink-tertiary);
  font-weight: 500;
}

.d3m-service-snapshot-card .d3m-service-stats {
  margin-bottom: 16px;
}

.d3m-service-snapshot-card .d3m-service-stat-cell {
  height: 100%;
  border: 1px solid var(--glass-border);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px;
}

.d3m-service-snapshot-card .d3m-service-stat-value {
  color: var(--ink-primary);
}

.d3m-service-snapshot-card .d3m-service-description-wrap {
  border: 1px solid var(--glass-border);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px;
}

.d3m-service-snapshot-card .d3m-service-description-wrap h6 {
  margin-bottom: 8px;
}

.d3m-service-snapshot-card .d3m-service-description {
  color: var(--ink-secondary);
  line-height: 1.75;
  font-size: 13px;
}

@media (max-width: 575.98px) {
  .d3m-service-snapshot-card .d3m-service-summary-head {
    align-items: flex-start;
  }

  .d3m-service-snapshot-card .d3m-service-summary-media {
    width: 64px;
    height: 64px;
  }
}

/* ================================================================
   12. PAGE: MASS ORDER
   ================================================================ */

.d3m-massorder-format-code { display: inline-block; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: var(--surface-1); border: 1px solid var(--glass-border); color: var(--ink-primary); font-size: 0.8125rem; line-height: 1.4; }
.d3m-massorder-textarea    { min-height: 320px; resize: vertical; line-height: 1.8; }
.d3m-massorder-card        { min-width: 0; overflow: hidden; }

.d3m-ticket-uploader { width: 100%; }

/* ================================================================
   13. PAGE: SERVICES
   ================================================================ */

.d3m-services-fav-col    { width: 42px; }
.d3m-services-icon-image { max-width: calc(1em + 6px); max-height: calc(1em + 6px); }

.d3m-services-category-row td     { background: transparent !important; border-bottom: 0 !important; }
.d3m-services-category-row strong { display: inline-flex; align-items: center; gap: 8px; padding: 0.75rem 1rem; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--glass-border); color: var(--ink-primary); font-weight: 600; }

.d3m-favorite-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--glass-border); color: var(--ink-tertiary); transition: color var(--dur-fast) var(--ease-smooth), background-color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring); }
.d3m-favorite-toggle:hover         { color: #f5b301; border-color: rgba(245,179,1,0.24); background: rgba(245,179,1,0.08); }
.d3m-favorite-toggle.favorite-active { color: #f5b301; background: rgba(245,179,1,0.10); border-color: rgba(245,179,1,0.22); }
.d3m-services-mobile-description  { color: var(--ink-secondary); font-size: 0.875rem; line-height: 1.8; background: var(--surface-1); }

/* ================================================================
   14. PAGES: TICKETS · ACCOUNT · MISC
   ================================================================ */

.d3m-invoice-link { width: auto; height: auto; min-height: 32px; padding: 0 12px; border-radius: 999px; text-decoration: none; font-size: 0.75rem; font-weight: 600; }

.d3m-ticket-textarea    { min-height: 180px; resize: vertical; line-height: 1.8; }
.d3m-ticket-thread-head { padding-bottom: 0.5rem; border-bottom: 1px solid var(--glass-border); }
.d3m-ticket-title       { color: var(--ink-primary); letter-spacing: -0.02em; }
.d3m-ticket-bubble      { width: 100%; padding: 1rem; border-radius: 18px; border: 1px solid var(--glass-border); }
.d3m-ticket-bubble-user    { background: rgba(var(--bs-primary-rgb),0.05); }
.d3m-ticket-bubble-support { background: var(--bs-tertiary-bg); }
.d3m-ticket-meta        { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-secondary); }
.d3m-ticket-file-link   { text-decoration: none; }

.g-recaptcha { max-width: 100%; overflow: hidden; }

#code             { letter-spacing: 0.08em; }
#password_new, #password_confirm { letter-spacing: 0.01em; }

.d3m-api-section + .d3m-api-section { padding-top: 1.5rem; border-top: 1px solid var(--glass-border); }
.d3m-api-table code { font-family: var(--hig-mono); font-size: 0.8125rem; color: var(--ink-primary); background: transparent; padding: 0; }
.d3m-api-pre        { margin: 0; padding: 1rem; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--bs-tertiary-bg); color: var(--ink-primary); overflow: auto; white-space: pre-wrap; word-break: break-word; }
.d3m-api-pre code   { font-family: var(--hig-mono); font-size: 0.8125rem; line-height: 1.8; color: inherit; }

#api_key, #username, #email, #current-email { font-family: var(--bs-body-font-family); }
#changeEmailModal .modal-content { border: 1px solid var(--glass-border); box-shadow: var(--shadow-float); }
#changeEmailError:empty, #confirmEmailSuccess:empty, #confirmEmailError:empty { display: none !important; }

#price[readonly]                   { font-weight: 600; }
.d3m-confirm-email-description     { line-height: 1.9; color: var(--ink-primary); }

/* ================================================================
   15. CURRENCY SWITCHER
   ================================================================ */

.currency-active-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 100px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

#currencies-list {
  max-height:          220px;
  overflow-y:          auto;
  padding:             0;
  margin:              0;
  list-style:          none;
  overscroll-behavior: contain;
  scrollbar-width:     thin;
  scrollbar-color:     var(--ink-tertiary) transparent;
}
#currencies-list::-webkit-scrollbar       { width: 3px; }
#currencies-list::-webkit-scrollbar-track { background: transparent; }
#currencies-list::-webkit-scrollbar-thumb { background: var(--ink-tertiary); border-radius: 2px; }

.currency-item.active              { color: var(--bs-primary); font-weight: 600; }
.currency-item.active .currency-item-icon { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
[data-bs-theme="dark"] .currency-item.active .currency-item-icon { background: rgba(var(--bs-primary-rgb),0.18); }
.currency-item:hover .currency-item-icon  { background: rgba(var(--bs-primary-rgb),0.08); color: var(--bs-primary); }
.currency-symbol-badge { font-size: 11px; font-weight: 700; color: var(--ink-secondary); line-height: 1; font-family: var(--hig-mono); }
.currency-item-label   { font-size: 13.5px; font-weight: 500; color: inherit; letter-spacing: -0.01em; }

/* ================================================================
   16. UTILITY & ANIMATION
   ================================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#sidebar-overlay {
  display:                 none;
  position:                fixed;
  inset:                   0;
  background:              rgba(0,0,0,0.35);
  backdrop-filter:         blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index:                 1029;
}
#sidebar-overlay.active { display: block; }

/* Focus styles */
.btn:focus-visible, a:focus-visible, [role="button"]:focus-visible,
[role="tab"]:focus-visible, [role="menuitem"]:focus-visible,
[role="option"]:focus-visible, [role="checkbox"]:focus-visible,
[role="radio"]:focus-visible, [role="switch"]:focus-visible,
[role="link"]:focus-visible, summary:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus-visible, .nav-link:focus-visible,
.dropdown-item:focus-visible, .list-group-item:focus-visible,
.page-link:focus-visible, .accordion-button:focus-visible,
select:focus-visible, input:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline:        var(--d3f-focus-outline);
  outline-offset: 3px;
  box-shadow:     none !important;
}

/* ================================================================
   17. RESPONSIVE
   ─ تمت إزالة كتلة html[dir="rtl"] للـ footer بالكامل.
     الـ flex-direction لم يعد بحاجة لـ row-reverse لأن
     HTML يستخدم gap + margin-inline بدلاً من الاتجاه.
     إن احتجت لعكس ترتيب العناصر في RTL استخدم
     flex-direction: row-reverse مباشرةً في HTML أو عبر
     [dir="rtl"] selector محدد إن لزم.
   ================================================================ */

@media (max-width: 991.98px) and (min-width: 768px) {
  .status-pill { padding: 0 8px; font-size: 11px; }
  .pill-icon   { font-size: 9px; }
}

@media (max-width: 991.98px) {

  #app-sidebar { transform: translateX(-280px); }
  html[dir="rtl"] #app-sidebar { transform: translateX(280px); }
  #app-sidebar.sidebar-open { transform: translateX(0) !important; }
  #app-main { margin-inline-start: 0 !important; }
  #sidebar-toggle { display: flex !important; }

  .status-pill { font-size: 11px; padding: 0 8px; height: 26px; }

  #guest-nav { background: var(--glass-bg-fallback); }
  #guest-nav #guest-navbar { background: var(--glass-bg-fallback); border-top: 0.5px solid var(--glass-border); margin-top: 4px; padding: 8px 0 12px; }
  #guest-nav .navbar-nav { gap: 2px; }
  #guest-nav .nav-link { padding: 10px 12px !important; border-radius: 8px; margin: 0 4px; }

  .header-page-title { max-width: min(220px, calc(100vw - 200px)); }

  .d3m-spotlight-dialog { margin-top: 56px; max-width: calc(100vw - 24px); }
  .d3m-spotlight        { border-radius: 16px !important; }

  .d3m-filter-wrap, .d3m-table-card    { border-radius: 16px; }
  .d3m-history-pill                    { min-height: 38px; padding-inline: 12px; font-size: 0.8125rem; }
  .d3m-order-card, .d3m-side-card      { border-radius: 20px; }
  .d3m-search-spotlight, .d3m-support-note, .d3m-service-description-wrap { border-radius: 16px; }
  .d3m-chip                            { font-size: 0.75rem; }
  .d3m-service-card-header, .d3m-service-card-body { padding-inline: 18px; }
  .d3m-massorder-format-code           { width: 100%; }
  .d3m-massorder-textarea              { min-height: 280px; }
  .d3m-invoice-link                    { padding-inline: 10px; }
  .d3m-ticket-bubble                   { border-radius: 16px; }
  .d3m-ticket-meta                     { font-size: 0.75rem; flex-wrap: wrap; }
  .d3m-api-pre                         { border-radius: 14px; }
  .d3m-balance-gradient-card           { border-radius: 12px; }
  .d3m-updates-service-name            { min-width: 220px; }
  .d3m-metric-card                     { padding: 14px 14px 12px; border-radius: 16px; }
  .d3m-metric-value                    { font-size: 22px; }
  .d3m-metric-icon                     { width: 32px; height: 32px; font-size: 13px; margin-bottom: 10px; }
}

@media (max-width: 575.98px) {
  .status-pill.pill-orders  { display: none !important; }
  .header-greeting          { display: none !important; }
  .header-page-title        { max-width: calc(100vw - 160px); }

  .d3m-spotlight-trigger span,
  .d3m-spotlight-trigger kbd { display: none; }
  .d3m-spotlight-trigger     { width: 32px; justify-content: center; padding: 0; }

  .d3m-segmented { flex-wrap: wrap; }
  .d3m-seg-item  { flex: 1; text-align: center; }

  .d3m-service-stat:nth-child(2) .d3m-service-stat-cell { padding-top: 14px; border-top: 1px solid var(--glass-border); }

  .d3m-chip      { min-height: 3.375rem; padding: 0.5rem 0.375rem; gap: 0.25rem !important; border-radius: 0.875rem; }
  .d3m-chip i    { font-size: 0.9375rem; }
  .d3m-chip span { font-size: 0.6875rem; -webkit-line-clamp: 2; }
  .d3m-service-price-badge { min-height: 28px; padding-inline: 10px; font-size: 11px; }

  .g-recaptcha { transform: scale(0.94); transform-origin: 0 0; }
  html[dir="rtl"] .g-recaptcha { transform-origin: 100% 0; }
}

@media (max-width: 600px) {
  #app-footer .footer-inner { flex-direction: column; align-items: flex-start; }
  #guest-footer .gf-inner   { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   18. PLUGIN: SELECT2 — HIG NATIVE INTEGRATION
   ================================================================ */
/* ================================================================
   18. PLUGIN: SELECT2 — CLEAN OVERRIDE
   يفترض أن select2.min.css يُحمّل قبل ملف التصميم
   ================================================================ */

/* 1) Base container */
html body .select2-container {
  width: 100% !important;
  display: block !important;
  font-family: var(--bs-body-font-family) !important;
}

/* 2) Single select */
html body .select2-container .select2-selection--single {
  background-color: var(--bs-body-bg) !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important;
  min-height: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-smooth) !important;
}

/* 3) Focus / open state */
html body .select2-container--focus .select2-selection--single,
html body .select2-container--open .select2-selection--single {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* 4) Selected text */
html body .select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--ink-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 48px !important;
  padding-inline-start: 0.875rem !important;
  padding-inline-end: 2.5rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--ink-tertiary) !important;
}

/* 5) Arrow */
html body .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  width: 1.25rem !important;
  inset-inline-end: 0.75rem !important;
  top: 0 !important;
}

html body .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

html body .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 2px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-tertiary);
  border-bottom: 1.5px solid var(--ink-tertiary);
  transform: translateY(-65%) rotate(45deg);
  transition:
    transform var(--dur-base) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth);
}

html body .select2-container--open .select2-selection--single .select2-selection__arrow::after {
  transform: translateY(-35%) rotate(-135deg);
  border-color: var(--bs-primary);
}

/* 6) Clear button */
html body .select2-container--default .select2-selection--single .select2-selection__clear {
  color: var(--ink-tertiary) !important;
  font-size: 1rem !important;
  margin-inline-end: 0.5rem !important;
}

html body .select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--ink-primary) !important;
}

/* 7) Disabled */
html body .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--ink-tertiary) !important;
  cursor: not-allowed !important;
  opacity: 0.9;
}

/* 8) Dropdown shell */
html body .select2-dropdown {
  background-color: var(--surface-1) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-float) !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  margin-top: 10px !important;
}

/* 9) Search wrapper inside dropdown */
html body .select2-search--dropdown {
  padding: 12px !important;
  background-color: var(--surface-1) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* 10) Search input */
html body .select2-search--dropdown .select2-search__field {
  min-height: 42px !important;
  padding: 0.625rem 0.875rem !important;
  background-color: var(--bs-body-bg) !important;
  color: var(--ink-primary) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

html body .select2-search--dropdown .select2-search__field::placeholder {
  color: var(--ink-tertiary) !important;
}

html body .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
  outline: 0 !important;
}

/* 11) Results area */
html body .select2-results {
  background-color: var(--surface-1) !important;
}

html body .select2-results > .select2-results__options {
  max-height: 320px !important;
  padding: 8px !important;
  background-color: var(--surface-1) !important;
}

/* 12) Base option style */
html body .select2-results__option,
html body .select2-results__option a {
  display: block !important;
  padding: 0.75rem 0.875rem !important;
  color: var(--ink-primary) !important;
  background-color: transparent !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth);
}

/* 13) Selected option */
html body .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(var(--bs-primary-rgb), 0.06) !important;
  color: var(--ink-primary) !important;
}

/* 14) Hover / highlighted */
html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted[aria-selected] a {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* 15) Icons inside options */
html body .select2-results__option i,
html body .select2-results__option .fal,
html body .select2-results__option .far,
html body .select2-results__option .fas,
html body .select2-results__option .fab {
  color: var(--bs-primary) !important;
  margin-inline-end: 0.5rem !important;
}

/* 16) Icons turn white on hover */
html body .select2-container--default .select2-results__option--highlighted[aria-selected] i,
html body .select2-container--default .select2-results__option--highlighted[aria-selected] .fal,
html body .select2-container--default .select2-results__option--highlighted[aria-selected] .far,
html body .select2-container--default .select2-results__option--highlighted[aria-selected] .fas,
html body .select2-container--default .select2-results__option--highlighted[aria-selected] .fab {
  color: #fff !important;
}

/* 17) Badges / IDs */
html body .select2-container .badge,
html body .select2-container .select2-selection__id {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
  border: 1px solid var(--bs-primary-border-subtle) !important;
  border-radius: 999px !important;
}

/* 18) Keep badge colors on hover */
html body .select2-container--default .select2-results__option--highlighted[aria-selected] .badge,
html body .select2-container--default .select2-results__option--highlighted[aria-selected] .select2-selection__id {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
  border: 1px solid var(--bs-primary-border-subtle) !important;
}

html body .select2-container--default .select2-results__option--highlighted[aria-selected] .badge *,
html body .select2-container--default .select2-results__option--highlighted[aria-selected] .select2-selection__id * {
  color: inherit !important;
}

/* 19) Group headers */
html body .select2-container--default .select2-results__group {
  padding: 0.5rem 0.875rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink-tertiary) !important;
  background-color: transparent !important;
}

/* 20) Empty / status messages */
html body .select2-results__message {
  color: var(--ink-secondary) !important;
  background-color: transparent !important;
  padding: 0.75rem 0.875rem !important;
}

/* 21) RTL */
html[dir="rtl"] body .select2-results__option,
html[dir="rtl"] body .select2-container .select2-selection--single .select2-selection__rendered,
html[dir="rtl"] body .select2-search--dropdown .select2-search__field {
  text-align: right !important;
}

html[dir="rtl"] body .select2-container .select2-selection--single .select2-selection__rendered {
  padding-inline-start: 0.875rem !important;
  padding-inline-end: 2.5rem !important;
}

/* 22) Multiple select */
html body .select2-container .select2-selection--multiple {
  background-color: var(--bs-body-bg) !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important;
  min-height: 50px !important;
  box-shadow: none !important;
  padding: 6px 8px !important;
}

html body .select2-container--focus .select2-selection--multiple,
html body .select2-container--open .select2-selection--multiple {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

html body .select2-container .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 !important;
}

html body .select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
  border: 1px solid var(--bs-primary-border-subtle) !important;
  border-radius: 999px !important;
  padding: 0.2rem 0.6rem !important;
  margin: 0 !important;
}

html body .select2-container .select2-selection--multiple .select2-selection__choice__remove {
  color: inherit !important;
  margin-inline-end: 0.35rem !important;
}

/* 23) Small screens */
@media (max-width: 575.98px) {
  html body .select2-container .select2-selection--single {
    min-height: 48px !important;
    height: 48px !important;
  }

  html body .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
  }

  html body .select2-dropdown {
    border-radius: 14px !important;
  }

  html body .select2-results__option,
  html body .select2-results__option a {
    padding: 0.6875rem 0.75rem !important;
  }
}

#fields .hidden {
  display: none !important;
}