/* =========================================================
   Design Tokens (global)
   ========================================================= */
:root{
  /* Brand */
  --brand:#0c305b;
  --accent:#28cb69;
  --blue:#2b6fff; /* أزرار خاصة (سحب/CTA) */

  /* Surfaces & Text */
  --surface:#ffffff;
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;

  /* Effects */
  --shadow:0 10px 25px rgba(0,0,0,.06);
  --radius:14px;
  --font-sans: "Tajawal", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Header/Footer sizes */
  --header-h:60px;

  /* Status */
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#b91c1c;

  /* Focus ring */
  --brand-ink:#0c305b;
  --primary: var(--brand);
  --ring: rgba(12,48,91,.15);

  /* Layout helpers */
  --container:1440px;

  /* Fixed topbar system */
  --topbar-h: 68px;        /* desktop */
  --topbar-h-sm: 60px;     /* mobile */
  --z-topbar: 1000;
  --z-mmenu:  1100;
  --z-backdrop: 1090;
}

/* Dark mode – مريح وغير غامق زيادة */
:root[data-theme="dark"], [data-theme="dark"]{
  --surface:#1f2223;
  --bg:#171a1b;
  --text:#e7eaec;
  --line:#2c3133;
  --muted:#a9b0b4;
  --brand-ink:#9cc1ff;
  --shadow:0 8px 22px rgba(0,0,0,.35);
  --ring: rgba(40,203,105,.22);
}

/* =========================================================
   Reset & Base
   ========================================================= */
*{ box-sizing:border-box }
html,body{ height:100% }
html,body{ overflow-x:hidden } /* منع سكرول عرضي عام */

body{
  margin:0;
  font-family: var(--font-sans);
  background:var(--bg);
  color:var(--text);
  display:flex; flex-direction:column; min-height:100vh;

  /* مساحة فوق لثبيت cg-topbar */
  padding-top: var(--topbar-h);
}
@media (max-width:640px){
  body{ padding-top: var(--topbar-h-sm); }
}

img,svg{ max-width:100%; height:auto; display:block }

/* روابط */
a{
  color: var(--brand-ink);
  text-decoration: none;
}
a:hover,
a:focus{
  text-decoration: none;
}
.muted a,
.muted2 a{ color: var(--brand-ink); }


/* حاوية عامة */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-inline:clamp(12px,4vw,16px);
  padding-block:16px;
}
.container.narrow{ max-width:640px }

/* عناوين */
:root[data-theme="dark"] .page-title{ color:#f3f4f6 }

/* نص مخفي للقارئات */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================
   Grids, Cards, Callouts
   ========================================================= */
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
@media (max-width:640px){ .grid{ grid-template-columns:1fr } }

.card-link{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line);
  padding:12px; border-radius:12px; transition:.15s ease; box-shadow:var(--shadow)
}
.card-link:hover{ transform:translateY(-1px) }
.card-link .icon{ width:28px; height:28px; display:grid; place-items:center }
:root[data-theme="dark"] .card-link{ background:var(--surface); border-color:var(--line) }

.callout{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow)
}
.callout-title{ font-weight:800; margin-bottom:8px }
.callout-actions .btn{ margin-inline-end:8px }
:root[data-theme="dark"] .callout{ background:var(--surface); border-color:var(--line) }

/* =========================================================
   Buttons & Badges
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; text-decoration:none; border:1px solid var(--line);
  padding:10px 14px; border-radius:12px; background:#fff; cursor:pointer;
}
.btn:hover{ box-shadow:var(--shadow) }
.btn.primary{ background:#57bf77; border-color:#57bf77; color:#fff }
.btn.success{ background:var(--accent); border-color:var(--accent); color:#fff }
.btn.danger{ background:#fee2e2; border-color:#fecaca; color:var(--err) }
button.btn-green{ padding:10px 14px; border:0; border-radius:10px; background:var(--accent); color:#fff }

:root[data-theme="dark"] .btn{ background:var(--surface); border-color:var(--line); color:var(--text) }
:root[data-theme="dark"] .btn.danger{ background:#2a1f20; border-color:#5b2b2b; color:#fca5a5 }

.badge{
  display:inline-block; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; font-size:13px; box-shadow:var(--shadow)
}
:root[data-theme="dark"] .badge{ background:var(--surface); border-color:var(--line) }

/* =========================================================
   Topbar (generic) & Navigation
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:100;
  height:var(--header-h); min-height:var(--header-h); max-height:var(--header-h);
  display:flex; align-items:center; gap:12px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:0 14px;
  overflow-x:clip;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--brand-ink); font-weight:700 }
.brand .brand-mark{ color:var(--brand-ink) }

.iconbtn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:#fff; display:grid; place-items:center; color:var(--brand-ink); cursor:pointer;
}
.iconbtn:hover{ box-shadow:var(--shadow) }
:root[data-theme="dark"] .iconbtn{ background:var(--surface); border-color:var(--line); color:#c7d2fe }

.topnav{ display:flex; gap:10px; margin-inline-start:12px }
.topnav-link{
  color:#334155; padding:8px 10px; border-radius:10px; border:1px solid transparent;
}
.topnav-link:hover{ background:#f8fafc; border-color:#e5e7eb }
:root[data-theme="dark"] .topnav-link{ color:#d4dade }
:root[data-theme="dark"] .topnav-link:hover{ background:#232627; border-color:var(--line) }

.topbar-actions{ margin-inline-start:auto; display:flex; align-items:center; gap:10px }
.topbtn{
  font-size:14px; color:var(--brand-ink);
  border:1px solid var(--line); padding:8px 12px; border-radius:10px; background:#fff; display:inline-flex; align-items:center; gap:8px;
}
.topbtn.primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.topbtn.danger{ color:#b91c1c }
:root[data-theme="dark"] .topbtn{ background:var(--surface); border-color:var(--line); color:var(--text) }
:root[data-theme="dark"] .topbtn.primary{ background:var(--brand) }

.wallet-badge{
  display:flex; align-items:center; gap:8px; font-size:14px;
  padding:8px 10px; border:1px dashed var(--line); border-radius:10px; background:#fff;
}
:root[data-theme="dark"] .wallet-badge{ background:var(--surface); border-color:var(--line) }

/* =========================================================
   Mobile Drawer Sidebar
   ========================================================= */
.mobile-menu{
  position:fixed;
  top:var(--header-h);
  bottom:0;
  inset-inline-start:0; left:0; right:auto;
  width:280px; max-width:85%;
  background:#fff; border-inline-end:1px solid var(--line);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  padding:12px 10px; overflow:auto;

  --drawer-x:-100%;
  transform: translateX(var(--drawer-x));
  transition: transform .22s ease;
  opacity:1; z-index:99;

  contain:paint; overscroll-behavior:contain; touch-action:pan-y;
}
:root[data-theme="dark"] .mobile-menu{ background:var(--surface); border-color:var(--line) }

html[dir="rtl"] .mobile-menu{
  inset-inline-start:auto; inset-inline-end:0;
  left:auto; right:0;
  border-inline-end:0; border-inline-start:1px solid var(--line);
  --drawer-x:100%;
}

.mobile-menu.open{ --drawer-x:0; transform: translateX(var(--drawer-x)); }
html[dir="rtl"] .mobile-menu.open{ --drawer-x:0; }

.mobile-menu ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.mm-sep{ border-top:1px dashed var(--line); margin:8px 2px 0; padding-top:8px }
.mm-link{
  display:flex; align-items:center; gap:10px;
  color:#111827; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px;
}
.mm-link.primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.mm-link.danger{ color:#b91c1c }
.mm-link i{ width:18px; text-align:center }
:root[data-theme="dark"] .mm-link{ background:var(--surface); color:var(--text); border-color:var(--line) }

.mobile-backdrop{
  position:fixed; inset:var(--header-h) 0 0 0;
  background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  z-index:89; overscroll-behavior:contain;
}
.mobile-backdrop.show{ opacity:1; pointer-events:auto; }

/* =========================================================
   Dropdown (لغة)
   ========================================================= */
.action-dd{ position:relative; }

.dropdown{
  position:absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 120;
}
.dropdown-item{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; color:#111827; text-decoration:none; white-space:nowrap;
}
.dropdown-item:hover,
.dropdown-item:focus{ background:#f8fafc; outline:none; }

:root[data-theme="dark"] .dropdown{ background: var(--surface); border-color:var(--line); }
:root[data-theme="dark"] .dropdown-item{ color:var(--text); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus{ background:#262a2b; }

/* =========================================================
   Main & Sections
   ========================================================= */
.main{ padding:18px; flex:1 0 auto; }

/* =========================================================
   Tables
   ========================================================= */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
 border-radius:12px; overflow:hidden
}
.table th,.table td{ padding:12px; border-bottom:1px solid var(--line); text-align:start }
.table thead th{ background:#f8fafc; font-weight:700 }
.table tr:last-child td{ border-bottom:0 }
.table-wrap{ width:100%; overflow:auto; }
:root[data-theme="dark"] .table thead th{ background:#232627 }

/* =========================================================
   Forms
   ========================================================= */
label{ display:block; margin-bottom:8px; font-size:13px; color:#475569; font-weight:700 }
input,textarea,select{
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; background:#fff; color:#0f172a;
}
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring) }
fieldset{ border:1px dashed #ddd; border-radius:10px; margin-top:10px }
legend{ padding:0 6px; color:#333 }
.small{ font-size:13px; color:#666 }

option{ color:#0f172a }
select, option{ -webkit-text-fill-color: currentColor }

:root[data-theme="dark"] label{ color:#d7dce0 }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{ background:var(--surface); border-color:var(--line); color:var(--text) }
:root[data-theme="dark"] fieldset{ border-color:var(--line) }
:root[data-theme="dark"] legend{ color:#d7dce0 }
:root[data-theme="dark"] .small{ color:#a9b0b4 }
:root:not([data-theme="dark"]) option:disabled { color:#6b7280; }
:root[data-theme="dark"] option:disabled { color:#a9b0b4 }

/* =========================================================
   Helpers & Utilities
   ========================================================= */
.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px }
.col-4{ grid-column:span 4 }
@media(max-width:900px){ .col-4{ grid-column:span 12 } }

.item-box{ border:1px solid #eee; border-radius:10px; padding:12px; margin:10px 0;}
.item-title{ font-weight:700; margin-bottom:6px }

.row{ display:flex; flex-direction:column; gap:10px }
.row-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line) }
.row-item:last-child{ border-bottom:0 }
.row-item .k{ font-size:13px }
.row-item .v{ font-weight:800 }
.row-item.highlight{ background:#f0fff7; padding:12px; border-radius:10px; border:1px solid #d8faea }
.row-item.highlight .v{ color:#065f46 }

.muted{ color:var(--muted); font-size:13px }
.muted2{ font-size:12px }

.tag{ display:inline-block; font-size:11px; background:#eef6ff; border:1px solid #cfe3ff; color:#0c305b; padding:2px 6px; border-radius:999px }
.err{ background:#fff; border:1px solid #fecaca; color:#b91c1c; padding:12px; border-radius:12px; margin-bottom:12px }
.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.note{ background:#e8f8ee; border:1px solid #cdeedd; padding:10px; border-radius:10px; margin-bottom: 1rem; }

:root[data-theme="dark"] .item-box{ background:var(--surface); border-color:var(--line) }
:root[data-theme="dark"] .row-item.highlight{ background:#1b2320; border-color:#2d4e3a }
:root[data-theme="dark"] .tag{ background:#23282a; border-color:#314047; color:#cfe3ff }
:root[data-theme="dark"] .err{ background:#2a1f20; border-color:#5b2b2b; color:#fecaca }
:root[data-theme="dark"] .note{ background:#17261e; border-color:#2a4e3a }

.hide{ display:none !important }
.mobile-only{ display:none !important }




/* =========================================================
   Footer
   ========================================================= */

.site-footer{
  background:var(--surface);
  margin-top:auto;
  border-top:1px solid var(--line);
  display:flex; align-items:center;
  padding:1rem 1rem;
  color:var(--text);
  position: relative;           /* 👍 يمنع أي “دفن” تحت طبقات تانية */
  z-index: 1;                   /* فوق أي stacking context محلي */
}

.footer-inner{
  max-width:var(--container);
  margin:0 auto; padding:0 14px; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}

.footer-left, .footer-right{ display:flex; align-items:center; gap:8px; }
.footer-right .foot-copy{ color:var(--text); font-weight:500; }

.footer-nav{ display:flex; align-items:center; gap:22px; font-weight:600; }
.footer-nav a{ color:var(--text); text-decoration:none; }
.footer-nav a:hover{ color:#28cb69; }

/* أيقونات */
.foot-social-inline{ display:inline-flex; align-items:center; gap:10px; }
.footer-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:4px;
  text-decoration:none; color:var(--text); background:transparent;
  border:1px solid transparent;                 /* ✅ حتى يبين انتقال لون البوردر */
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}

/* ✅ استبدال قواعد الـSVG بقواعد للـ<i> */
.footer-social-link i{
  font-size:20px;               /* حجم الأيقونة */
  line-height:1;
  display:inline-block;
}

/* هفر */
.footer-social-link:hover{
  transform:translateY(-1px);
  border-color:#28cb69;
  color:#28cb69;
}

/* ===== موبايل — نسخة وحيدة مرتبة ===== */
@media (max-width:1023.98px){
  .footer-inner{
    flex-direction: column;      /* ستاك عامودي */
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
  }

  .footer-left  { order:1; }
  .footer-nav   { 
    order:2; 
    justify-content:center; 
    flex-wrap:nowrap;        /* ✅ ما يلفّ */
    gap:20px; 
    margin-top:4px; 
    overflow-x:auto;         /* ✅ سكرول أفقي إذا كتروا */
    white-space:nowrap;      /* ✅ إبقاء الكل بنفس السطر */
    -webkit-overflow-scrolling: touch; /* ناعم على iOS */
  }

  .footer-nav a{
    display:inline-block;    /* ✅ تأكيد العرض بالسطر */
    flex-shrink:0;           /* يمنع ضغط العناصر */
    font-size:12px;
      
  }

  .footer-right { order:3; }

  .foot-social-inline{ gap:14px; }
  .footer-social-link{
    width:34px; height:34px; border-radius:6px;
    border-color:rgba(255,255,255,.85);
  }


  .footer-right .foot-copy{ font-weight:600; margin-top:6px; }
}


/* =========================================================
   Sell Page — Brands & Fields
   ========================================================= */
.brand-head{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px }

/* شبكة البراندات */
.brand-grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
}
@media (max-width:1200px){ .brand-grid{ grid-template-columns:repeat(5,1fr) } }
@media (max-width:992px){  .brand-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:768px){  .brand-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:520px){  .brand-grid{ grid-template-columns:repeat(2,1fr) } }

.brand-tile{
  background:#fff; border:1px solid var(--line); border-radius:12px; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  overflow:hidden; display:flex; flex-direction:column;
}
.brand-tile:hover{ transform:translateY(-2px); border-color:#cfe3ff }
:root[data-theme="dark"] .brand-tile{ background:var(--surface); border-color:var(--line) }

.brand-thumb{ width:100%; aspect-ratio:4/3; background:#fff; display:block; overflow:hidden }
.brand-thumb img{ width:100%; height:100%; display:block }
.brand-ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:#f8fafc; color:#64748b; font-weight:800; font-size:22px; border:0;
}
.brand-title{
  padding:10px 10px 12px; font-size:13px; font-weight:700; color:#0f172a; line-height:1.2; text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px;
}
:root[data-theme="dark"] .brand-title{ color:#e7eaec }

/* حقل اختيار البراند (نسخة كروت مصغّرة) */
.brand-field{ margin:8px 0 12px }
.brand-field .label{ margin-bottom:6px }

.brand-field-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; box-shadow:var(--shadow)
}
:root[data-theme="dark"] .brand-field-row{ background:var(--surface); border-color:var(--line) }

.brand-field-row .left-info{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 }

.brand-mini{
  width:64px; height:64px; flex:0 0 64px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); overflow:hidden; position:relative; display:block;
}
:root[data-theme="dark"] .brand-mini{ background:var(--surface); border-color:var(--line) }
.brand-mini img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; border:0 }
.brand-mini .ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px; background:#f8fafc; color:#64748b;
}
:root[data-theme="dark"] .brand-mini .ph{ background:#23282a; color:#a9b0b4 }

.brand-name-strong{
  font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; font-size:15px;
  color:#0f172a;
}
:root[data-theme="dark"] .brand-name-strong{ color:#e7eaec }

.brand-change-btn{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; border:1px solid var(--line);
  background:#fff; color:var(--brand-ink); padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.brand-change-btn:hover{ box-shadow:var(--shadow) }
.brand-change-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }
:root[data-theme="dark"] .brand-change-btn{ background:var(--surface); border-color:var(--line); color:var(--text) }

.brand-field-row .right-actions{ flex:0 0 auto }

/* =========================================================
   Orders / Tags
   ========================================================= */
.tag.pend  { background:#fff9db; border-color:#ffe8a3; color:#8a6d00 }
.tag.paid  { background:#e7f8ee; border-color:#c8f0d7; color:#0b6b3a }
.tag.rej   { background:#ffe8e8; border-color:#ffcaca; color:#b91c1c }
.tag.draft { background:#eef6ff; border-color:#cfe3ff; color:#0c305b }
.tag.canc  { background:#f3f4f6; border-color:#e5e7eb; color:#6b7280 }

:root[data-theme="dark"] .tag.pend  { background:#2a260d; border-color:#7a6410; color:#ffe8a3 }
:root[data-theme="dark"] .tag.paid  { background:#1a2a22; border-color:#2d4e3a; color:#c8f0d7 }
:root[data-theme="dark"] .tag.rej   { background:#2a1f20; border-color:#5b2b2b; color:#ffcaca }
:root[data-theme="dark"] .tag.draft { background:#23282a; border-color:#314047; color:#cfe3ff }
:root[data-theme="dark"] .tag.canc  { background:#1c2023; border-color:#313a44; color:#a9b0b4 }

.type-badge{ background:#f0f9ff; border-color:#dbeafe; color:#1e3a8a }
:root[data-theme="dark"] .type-badge{ background:#23282a; border-color:#314047; color:#9cc1ff }

/* =========================================================
   Order View
   ========================================================= */
.meta{ width:100%; border-collapse:separate; border-spacing:0 }
.meta td{ padding:8px 0; vertical-align:top }
.meta td:first-child{ width:160px }

.kv, .file-row{
  display:grid; grid-template-columns:180px 1fr; gap:10px;
  padding:8px 0; border-bottom:1px dashed var(--line);
}
.kv:last-child, .file-row:last-child{ border-bottom:0 }
.kv .k, .file-row .k{ color:#475569 }
.kv .v, .file-row .v{ word-break:break-word }

@media (max-width:700px){
  .kv, .file-row{ grid-template-columns:1fr }
  .meta td:first-child{ width:auto }
}

.tag.appr{ background:#ecfeff; border-color:#bae6fd; color:#0369a1 }
:root[data-theme="dark"] .tag.appr{ background:#1a2327; border-color:#2a4a60; color:#9bd3ff }

/* =========================================================
   Withdraw Page
   ========================================================= */
.col-6{ grid-column:span 6 }
@media(max-width:900px){ .col-6{ grid-column:span 12 } }

.calc{
  margin-top:10px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px; box-shadow:var(--shadow);
}
.calc .hint{ font-size:12px; color:#cdcdcd; margin-inline-start:6px }
.small-extra{ font-size:12px; margin-top:6px }
.help{ font-size:12px; color:#cdcdcd; margin-top:6px }

.dyn-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px }
.dyn-field{ display:flex; flex-direction:column; gap:6px }
@media(max-width:700px){ .dyn-grid{ grid-template-columns:1fr } }

:root[data-theme="dark"] .calc{ background:var(--surface); border-color:var(--line) }

/* =========================================================
   Profile
   ========================================================= */
.input-ref{
  width:100%; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:#f9fafb; font-size:13px; color:#111827;
}
.input-ref:focus{ outline:2px solid var(--brand-ink) }
.links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
:root[data-theme="dark"] .input-ref{ background:var(--surface); border-color:var(--line); color:var(--text) }

/* =========================================================
   Wallet
   ========================================================= */
.balances{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.credit{ color:#0b6b3a; font-weight:700 }
.debit{  color:#b91c1c; font-weight:700 }

/* =========================================================
   Pro Custom Select (.ui-select)
   ========================================================= */
.ui-select{ position:relative }

.ui-select__button{
  display:flex; align-items:center; justify-content:space-between;
  min-height:44px; width:100%; padding:10px 12px;
  border:1px solid var(--line); background:#fff; color:#0f172a;
  border-radius:12px; box-shadow:var(--shadow); cursor:pointer; font-weight:700;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ui-select__button:hover{ border-color:#cfe3ff }
.ui-select__button:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }

.ui-select__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ui-select__chev{ font-size:16px; color:#64748b; margin-inline-start:8px }

.ui-select__list{
  position:absolute; inset-inline:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:6px; z-index:40; max-height:280px; overflow:auto; display:none;
}
.ui-select.open .ui-select__list{ display:block }

.ui-select__option{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:10px; cursor:pointer; color:#111827; text-decoration:none;
  transition:background-color .12s ease;
}
.ui-select__option:hover,
.ui-select__option[aria-selected="true"],
.ui-select__option[aria-current="true"]{ background:#f8fafc }
.ui-select__option .meta{ font-size:12px; color:#6b7280; margin-inline-start:8px }

.ui-select.disabled .ui-select__button{ opacity:.6; cursor:not-allowed }

.ui-select select{
  position:absolute; left:0; top:0; width:100%; height:100%;
  opacity:0; pointer-events:none;
}

:root[data-theme="dark"] .ui-select__button{ background:var(--surface); border-color:var(--line); color:var(--text) }
:root[data-theme="dark"] .ui-select__list{ background:var(--surface); border-color:var(--line) }
:root[data-theme="dark"] .ui-select__option{ color:var(--text) }
:root[data-theme="dark"] .ui-select__option:hover,
:root[data-theme="dark"] .ui-select__option[aria-selected="true"],
:root[data-theme="dark"] .ui-select__option[aria-current="true"]{ background:#262a2b }
[dir="rtl"] .ui-select__chev{ margin-inline-start:0; margin-inline-end:8px }

/* سيلكت أصلي (اختياري) */
.select-wrap{ position:relative; display:block }
.select-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; height:44px; border:1px solid var(--line); background:#fff; border-radius:12px;
  padding:10px 44px 10px 12px; font-weight:700; color:#0f172a; box-shadow:var(--shadow);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.select-wrap select:hover{ border-color:#cfe3ff }
.select-wrap select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring) }
.select-wrap .chev{
  position:absolute; inset-inline-end:10px; inset-block:0; width:28px; display:grid; place-items:center; pointer-events:none; color:#64748b; font-size:16px;
}
:root[data-theme="dark"] .select-wrap select{ background:var(--surface); border-color:var(--line); color:var(--text) }
:root[data-theme="dark"] .select-wrap .chev{ color:#a9b0b4 }
[dir="rtl"] .select-wrap select{ padding-inline:12px 44px }
[dir="rtl"] .select-wrap .chev{ inset-inline-start:10px; inset-inline-end:auto }

/* =========================================================
   Receipt Summary (Pro)
   ========================================================= */
.receipt-card{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden; margin-top:14px;
}
.receipt-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px;
  background:linear-gradient(180deg,#f9fbff,#ffffff);
  border-bottom:1px solid var(--line);
}
.receipt-title{ margin:0; font-size:16px; font-weight:800; color:#0f172a }
.receipt-sub{ font-size:12px }
.receipt-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#eef6ff; color:#0c305b; border:1px solid #cfe3ff;
  padding:6px 10px; border-radius:999px; font-size:12px; white-space:nowrap;
}
.receipt-body{ padding:12px 16px; display:flex; flex-direction:column; gap:12px }
.receipt-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0 }
.receipt-row .k{ color:#475569; font-size:13px; font-weight:700 }
.receipt-row .v{ font-weight:800 }
.receipt-divider{ border-top:1px dashed var(--line); margin:2px 0 }
.mono{ font-variant-numeric:tabular-nums }

.receipt-total{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background:#f7fffb; border:1px solid #d8faea; border-radius:12px;
}
.receipt-total .tt{ font-weight:900; color:#065f46 }
.receipt-total .amount{ font-weight:900; font-size:18px }
.receipt-total .amount .amt{ font-variant-numeric:tabular-nums }

:root[data-theme="dark"] .receipt-card{ background:var(--surface); border-color:var(--line) }
:root[data-theme="dark"] .receipt-header{ background:linear-gradient(180deg,#1f2326,#1f2326); border-bottom-color:var(--line) }
:root[data-theme="dark"] .receipt-title{ color:var(--text) }
:root[data-theme="dark"] .receipt-badge{ background:#23282a; border-color:#314047; color:#cfe3ff }
:root[data-theme="dark"] .receipt-row .k{ color:#d7dce0 }
:root[data-theme="dark"] .receipt-total{ background:#1b2320; border-color:#2d4e3a }
:root[data-theme="dark"] .receipt-total .tt{ color:#9ae6b4 }

/* =========================================================
   Sell Page — unified styling (scoped to #create_section)
   ========================================================= */
#create_section .split{
  display:grid; grid-template-columns:1fr 360px; gap:16px; align-items:start;
}
@media (max-width:960px){ #create_section .split{ grid-template-columns:1fr } }

#create_section .left-wrap{
  background:#f2f4fb; border-radius:var(--radius); padding:25px;
}
:root[data-theme="dark"] #create_section .left-wrap{ background:var(--surface) }
:root[data-theme="dark"] #create_section .dropzone{ background:var(--surface) }

#create_section .grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px }
#create_section .col-4{ grid-column:span 12 }
@media (min-width:880px){ #create_section .col-4{ grid-column:span 6 } }

#create_section .label{ font-weight:700; color:#475569; margin-bottom:10px }
:root[data-theme="dark"] #create_section .label{ color:#d7dce0 }

#create_section select,
#create_section .input,
#create_section .textarea{
  width:100%; border:1px solid var(--line); background:var(--surface); border-radius:12px;
  min-height:44px; padding:10px 12px; font-size:14px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#create_section .textarea{ min-height:120px; resize:none }
#create_section select:focus,
#create_section .input:focus,
#create_section .textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px var(--ring);
}

/* SmartSelect */
#create_section .smart-select{ position:relative; font-size:14px }
#create_section .ss-trigger{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; min-height:44px; padding:0 12px;
  background:var(--surface); color:inherit; border:1px solid var(--line); border-radius:12px;
  cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#create_section .ss-trigger:hover{ border-color:#cfe3ff }
#create_section .ss-trigger:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring) }

#create_section .ss-left{ display:flex; align-items:center; gap:10px; min-width:0 }
#create_section .ss-icon{
  width:32px; height:32px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#eef6ff; border:1px solid #cfe3ff; flex:0 0 auto;
}
:root[data-theme="dark"] #create_section .ss-icon{ background:#23282a; border-color:#314047 }
#create_section .ss-icon img{ width:100%; height:100%; object-fit:cover; display:block }
#create_section .ss-emoji{ font-size:18px; line-height:1 }
#create_section .ss-letter{ font-weight:800; color:#334155; font-size:13px }
:root[data-theme="dark"] #create_section .ss-letter{ color:#e7eaec }

#create_section .ss-meta{ display:flex; flex-direction:column; min-width:0 }
#create_section .ss-label{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#create_section .ss-sublabel{ display:none; margin-top:2px; font-size:12px; color:var(--muted); line-height:1.35 }
#create_section .ss-chev{ font-size:16px; color:#64748b }
:root[data-theme="dark"] #create_section .ss-chev{ color:#a9b0b4 }

#create_section .ss-menu{
  position:absolute; inset-inline:0; top:calc(100% + 8px); z-index:120;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  overflow:hidden; display:none;
}
#create_section .smart-select.open .ss-menu{ display:block; animation:ss-pop .12s ease-out }
@keyframes ss-pop{ from{ transform:translateY(4px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

#create_section .ss-search{ padding:8px; border-bottom:1px dashed var(--line); background:var(--surface) }
#create_section .ss-input{
  width:100%; height:38px; padding:0 10px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); color:inherit; outline:none;
}
#create_section .ss-input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--ring) }

#create_section .ss-list{ max-height:320px; overflow:auto }
#create_section .ss-list::-webkit-scrollbar{ width:8px }
#create_section .ss-list::-webkit-scrollbar-thumb{ background:#d8def0; border-radius:8px }
:root[data-theme="dark"] #create_section .ss-list::-webkit-scrollbar-thumb{ background:#3b4044 }

#create_section .ss-opt{
  display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer; min-height:44px;
  transition:background .08s ease, color .08s ease;
}
#create_section .ss-opt:hover{ background:#f8fafc }
:root[data-theme="dark"] #create_section .ss-opt:hover{ background:#262a2b }
#create_section .ss-opt.active{ background:#eef6ff }
:root[data-theme="dark"] #create_section .ss-opt.active{ background:#262a2b }

#create_section .ss-o-icon{
  width:30px; height:30px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#eef6ff; border:1px solid #cfe3ff; font-size:18px; line-height:1;
}
:root[data-theme="dark"] #create_section .ss-o-icon{ background:#23282a; border-color:#314047 }
#create_section .ss-o-icon img{ width:100%; height:100%; object-fit:cover; display:block }
#create_section .ss-o-meta{ display:flex; flex-direction:column; min-width:0 }
#create_section .ss-o-name{ font-weight:800; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
:root[data-theme="dark"] #create_section .ss-o-name{ color:#e7eaec }
#create_section .ss-o-sub{ font-size:12px; color:var(--muted); line-height:1.35; white-space:normal }

#create_section .smart-select.compact .ss-search{ display:none }

/* Summary (بطاقة ملخّص) */
#create_section .summary,  .order-head{
  background:var(--surface); border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden; position:relative;
}
#create_section .summary-inner{ padding:25px; display:block }
#create_section .section{ margin-bottom:20px }
#create_section .l-sm{ font-weight:700; margin-bottom:10px }

#create_section .fees-row,
#create_section .total-row{
  display:flex; align-items:center; gap:10px; margin:20px 0; font-weight:700;
}
#create_section .dots{
  flex:1; height:1px;
  background:linear-gradient(90deg, var(--line) 33%, rgba(0,0,0,0) 0);
  background-size:10px 1px; background-repeat:repeat-x; margin:0 6px;
}
#create_section .amount{ font-weight:900; font-size:18px; color:var(--accent) }
#create_section .currency{ font-size:12px; color:var(--muted) }

#create_section .btn.primary.full{
  width:100%; border:1px solid #57bf77; background:#57bf77; color:#fff;
  border-radius:12px; height:48px; font-weight:800; margin-bottom:9px;
}

#create_section .summary::after{
  content:""; position:absolute; top:-1px; right:-1px; width:40px; height:40px; aspect-ratio:1/1;
  background: url('/assets/images/sell/decor-1.svg') no-repeat center / cover; pointer-events:none; z-index:1;
}
html[dir="rtl"] #create_section .summary::after{ left:-1px; right:auto; transform:scaleX(-1) }
:root[data-theme="dark"] #create_section .summary::after{
  background: url('/assets/images/sell/decor-1--dark.svg') no-repeat center / cover;
}

/* Dynamic Fields & Hints + Dropzone */
.ml-field{ border-radius:8px !important; padding:10px 14px !important; outline:none !important }
#create_section .form-row{ margin-bottom:12px }
#create_section .ml-hint{ font-size:12px; color:var(--muted); margin-top:6px }

#create_section .dropzone-wrap{ position:relative; display:block }
#create_section .dropzone{
  display:block; width:100%; min-height:120px; border:2px dashed var(--line); border-radius:14px;
  background:#f2f4fb; box-shadow:var(--shadow); padding:0; cursor:pointer;
}
#create_section .dropzone:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }
#create_section .dropzone-ui{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; pointer-events:none;
}
#create_section .dropzone-ui .dz-ic{ width:36px; height:36px; fill:#6b7280 }
:root[data-theme="dark"] #create_section .dropzone-ui .dz-ic{ fill:#a9b0b4 }
#create_section .dropzone-ui .dz-text{ font-weight:700; font-size:14px; color:var(--muted); text-align:center }

#create_section input.dropzone{ font-size:0; line-height:0; color:transparent }
#create_section input.dropzone::-webkit-file-upload-button{ visibility:hidden }
#create_section input.dropzone::file-selector-button{ visibility:hidden }

/* ===== Thumbs Layout (صور المرفقات) ===== */

/* الكونتينر الأساسي لكل الصور */
#create_section .thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); /* ديسكتوب: أعمدة ديناميكية */
  gap:8px;
  margin-top:8px;
}

/* موبايل: بالضبط صورتين بكل سطر */
@media (max-width: 767px){
  #create_section .thumbs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* مهم: خليه ما يأثر على الـ grid، يخلي .thumb نفسها هي عنصر الشبكة */
#create_section .thumb-group{
  display:contents;
}

/* شكل كل عنصر (الصورة + الاسم + زر X) */
#create_section .thumbs .thumb{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:12px;
  color:#374151;
  
  /* لا تحط لا max-width ولا max-height هون */
}

/* ضبط الصورة جوّا الثمبنيل */
#create_section .thumbs .thumb img{
  width:36px;
  height:36px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
}

/* النص (اسم الملف) يخضع للـ overflow بشكل مرتب */
/* النص (اسم الملف) يخضع للـ overflow بس بياخد كل المساحة المتاحة */
#create_section .thumbs .thumb span{
  flex:1;              /* 👈 خليه يتمدّد ويعبّي بين الصورة و زر X */
  min-width:0;         /* ضروري مع flex + overflow */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


:root[data-theme="dark"] #create_section .err{ background:#2a1f20; border-color:#5b2b2b; color:#fecaca }

[dir="rtl"] #create_section .ss-chev{ transform:none }
[dir="rtl"] #create_section .thumbs .thumb{ margin-inline:0 }
[dir="rtl"] #create_section .dropzone-ui .dz-text{ direction:rtl }

:root[data-theme="dark"] #create_section .ss-o-name,
:root[data-theme="dark"] #create_section .ss-label{ color:#e7eaec }

/* =========================================================
   Quantity Control
   ========================================================= */
.qty-control{
  display:inline-flex; align-items:center; gap:0; border:1px solid var(--line);
  background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; width:max-content;
}
/* ================= Buttons (دائرة بلا خلفية + ومضة خضراء أوضح) ================= */
.qty-control .qty-btn{
  width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  font-weight:900; font-size:18px; color:var(--text); line-height:1;
  display:grid; place-items:center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s ease, opacity .15s ease;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  will-change: transform;
}

/* هوفر */
@media (hover:hover){
  .qty-control .qty-btn::before{
    content:""; position:absolute; inset:0; border-radius:50%;
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
    transition: box-shadow .18s ease, opacity .18s ease;
    opacity: 0;
  }
  .qty-control .qty-btn:hover::before{
    opacity: 1; box-shadow: inset 0 0 0 2px var(--ring);
  }
}

/* ضغط */
.qty-control .qty-btn:active{
  transform: scale(.92);
}

/* ومضة خضراء أكبر وأوضح */
.qty-control .qty-btn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:20px; height:20px;                /* 👈 أكبر من قبل */
  border-radius:50%;
  background:#28cb69;
  opacity:0;
  transform: translate(-50%, -50%) scale(.2);
  transition: transform .38s ease, opacity .38s ease;
}
.qty-control .qty-btn:active::after{
  opacity:.45;
  transform: translate(-50%, -50%) scale(2.6); /* 👈 تنتشر أكثر */
}

/* نلغي الخلفية القديمة */
.qty-control .qty-btn:hover{ background: transparent; }
:root[data-theme="dark"] .qty-control .qty-btn:hover{ background: transparent; }

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .qty-control .qty-btn,
  .qty-control .qty-btn::after{
    transition: none;
  }
}


.qty-control .qty-input{
  width:80px; height:40px; text-align:center; border:0; outline:none; background:transparent;
  font-weight:800; font-size:15px; color:inherit; -moz-appearance:textfield;
}
.qty-control .qty-input:focus{ box-shadow:inset 0 0 0 2px var(--ring); border-radius:8px }
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
@media (max-width:520px){ .qty-control .qty-input{ width:64px } }

/* تحسين لون سهم السليكتور عند الهوفر ضمن #create_section */
#create_section .ss-chev{
  display:grid; place-items:center; width:24px; height:24px; color:#64748b;
}
#create_section .ss-chev-ic{ width:20px; height:20px }
#create_section .ss-trigger:hover .ss-chev{ color:var(--brand-ink) }
:root[data-theme="dark"] #create_section .ss-chev{ color:#a9b0b4 }

/* نطبّقها على عناصر عندك أصلاً */
.table-wrap,
#create_section .ss-list,
.cg-mmenu,
.mobile-menu{
  -webkit-overflow-scrolling: touch; /* سلاسة iOS */
}
.table-wrap::-webkit-scrollbar,
#create_section .ss-list::-webkit-scrollbar{
  height: 8px; width: 8px;
}

/* 4) لمسات إضافية: إبراز خفيف عند التركيز ضمن عناصر قابلة للسكرول */
.nice-scroll:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: var(--radius);
}

/* 5) تحسين تجربة القفز للعناوين مع التوب بار المثبّت */
:where(h1,h2,h3,h4,[id]){
  scroll-margin-top: calc(var(--topbar-h) + 8px);
}
@media (max-width:640px){
  :where(h1,h2,h3,h4,[id]){
    scroll-margin-top: calc(var(--topbar-h-sm) + 8px);
  }
}
.smart-select .ss-trigger{
  display:flex; align-items:flex-start; /* النص لمّاع لفوق */
  gap:10px; line-height:1.3; padding-block:10px; /* راحة للسطور */
  height:auto; white-space:normal;
}
/* ============================
   Brand Description (no flicker) — FIXED
   ============================ */
#create_section .brand-desc{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f2f4fb;
  overflow: hidden;
}


#create_section .brand-desc summary{
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  color: #475569;
  font-weight: 700;
  outline: none;
  user-select: none;
  background:#f2f4fb;
  transition: background-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
#create_section .brand-desc summary::-webkit-details-marker{ display:none }


#create_section .brand-desc[open] summary:hover{
  background: #f2f4fb;
}

:root[data-theme="dark"] #create_section .brand-desc[open] summary:hover{
  background: var(--surface);
}
:root[data-theme="dark"] #create_section .brand-desc summary{
  background: var(--surface);
}
:root[data-theme="dark"] #create_section .brand-desc{
  background: var(--surface);
}
:root[data-theme="dark"] #create_section .brand-desc:not([open]) summary:hover{
  background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
}
:root[data-theme="dark"] #create_section .brand-desc summary{
  color: var(--text);
}
#create_section .brand-desc summary:focus-visible{
  box-shadow: 0 0 0 4px var(--ring) inset;
  border-radius: calc(var(--radius) - 1px);
}

#create_section .brand-desc .bd-content{
  padding: 12px 14px;
  color: var(--muted);
  line-height: 1.7;
  white-space: pre-line;
  will-change: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#create_section .brand-desc summary::after{
  content: "";
  width: 20px; height: 20px; flex: 0 0 20px;
  margin-inline-start: auto;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="none" fill="%23000" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>') no-repeat center / 18px 18px;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="none" fill="%23000" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>') no-repeat center / 18px 18px;
  background: color-mix(in srgb, var(--text) 65%, transparent);
  transition: transform .18s ease;     /* دوران فقط */
  transform: translateZ(0);            /* سلاسة */
  backface-visibility: hidden;
}
#create_section .brand-desc[open] summary::after{
  transform: rotate(180deg) translateZ(0);
}

@media (prefers-reduced-motion: reduce){
  #create_section .brand-desc summary::after{ transition: none; }
}

/* =========================================================
   Header (cg-*) – Topbar fixed + Subheader
   ========================================================= */
.header-wrap{
  position:relative; /* مو sticky */
  z-index:var(--z-topbar);
  background:var(--bg);
}

.cg-topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-topbar);
  background:#fff; border-bottom:1px solid var(--line);
}
:root[data-theme="dark"] .cg-topbar{ background:#171a1b }

.cg-topbar-row{ display:flex; align-items:center; gap:18px; height:68px }
.cg-burger{ display:none; flex-direction:column; gap:4px; background:transparent; border:0; cursor:pointer; padding:8px; border-radius:10px }
.cg-burger span{ display:block; width:22px; height:2px; background:#334155 }
:root[data-theme="dark"] .cg-burger span{ background:#e5e7eb }

.cg-brand{ display:flex; align-items:center }
.cg-logo{ font-weight:900; letter-spacing:.2px; font-size:22px; color:#1f2937 }
:root[data-theme="dark"] .cg-logo{ color:#e5e7eb }

.cg-nav{ display:flex; align-items:center; gap:26px; flex:1 }
.cg-link{ padding:6px 2px; color:#0f172a; opacity:.9; transition:opacity .15s ease }
.cg-link:hover{ opacity:1 }
:root[data-theme="dark"] .cg-link{ color:#e5e7eb; opacity:.85 }

.cg-dd{ position:relative }
.cg-dd-toggle{ display:inline-flex; align-items:center; gap:6px }
.cg-caret{ opacity:.6 }
.cg-dd-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-start:0; background:var(--bg);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); min-width:190px; padding:6px;
}
.cg-dd-item{ display:block; padding:10px 12px; border-radius:10px; color:var(--text) }
.cg-dd-item:hover{ background:#f3f4f6 }
:root[data-theme="dark"] .cg-dd-item:hover{ background:#0f172a }

.cg-actions{ display:flex; align-items:center; gap:16px }

/* سويتش ثيم */
.cg-switch{ position:relative; width:48px; height:26px; display:inline-block; margin:0; }
.cg-switch input{ display:none }
.cg-slider{ position:absolute; inset:0; background:#d1d5db; border-radius:999px; transition:.2s }

.cg-switch input:checked + .cg-slider{ background:#334155 }
:root {
  --theme-icon: url('/assets/images/ic-light.svg');
  --af-bg:#fff;
}
html[data-theme="dark"] {
  --theme-icon: url('/assets/images/ic-dark.svg');
    --af-bg:#60a5fa;
}

/* الأيقونة جوّا الدائرة */
.cg-slider::after {
  content: "";
  position: absolute;
     background: var(--af-bg); 
  border-radius:50%;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  background-image: var(--theme-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px; /* عدّل إذا بدك */
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* لما يكون مُفعّل (دارك مثلاً) حرّك الدائرة والأيقونة لليمين */
.cg-switch input:checked + .cg-slider::before,
.cg-switch input[aria-checked="true"] + .cg-slider::before {
  transform: translateX(20px);
}
.cg-switch input:checked + .cg-slider::after,
.cg-switch input[aria-checked="true"] + .cg-slider::after {
  transform: translateX(20px);
}
/* حساب */
.cg-account-pill{
  display:flex; flex-direction:column; justify-content:center;
  padding:8px 14px; border-radius:999px; background:rgba(2,8,23,.04);
  border:1px solid var(--line);
}
:root[data-theme="dark"] .cg-account-pill{ background:rgba(255,255,255,.05) }
.cg-account-title{ font-weight:800; font-size:.95rem }
.cg-account-sub{ font-size:.85rem; color:var(--muted) }
.cg-auth .cg-btn{ margin-inline-start:6px }

.cg-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--line); background:#f3f4f6; font-weight:700; color:#111827
}
.cg-btn.primary{ background:var(--blue); border-color:transparent; color:#fff }
.cg-btn.ghost{ background:transparent }

/* Subheader */
.cg-subheader{
  position:static;
  background: url('/assets/images/cg-subheader.png') no-repeat center center / cover;
  color:#fff; padding:24px 0;
}
.cg-subgrid{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.cg-subleft{ min-width:0 }
.cg-breadcrumb, .cg-crumb{ display:flex; align-items:center; gap:8px; color:#b8c1d1; font-size:.95rem; flex-wrap:wrap }
.cg-sep{ opacity:.5 }
.cg-title{ margin:8px 0 0; font-size:34px; font-weight:900; letter-spacing:.2px }

.cg-subright{ display:flex; align-items:center; gap:12px; flex-shrink:0 }
.cg-balance{
  display:inline-flex; align-items:center; gap:8px; background:rgba(2,8,23,.25);
  border:1px solid rgba(255,255,255,.12); padding:10px 12px; border-radius:12px
}
.cg-balance .lbl{ opacity:.85 }
.cg-balance .val{ color:#22c55e; font-weight:900 }
.cg-balance .cur{ opacity:.9 }
.cg-withdraw{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 6px 20px rgba(43,111,255,.35); font-weight:800
}
.cg-withdraw:hover{ transform:translateY(-1px) }
@media (max-width:640px){
 .cg-subgrid{ display:block;}
 .cg-subleft {padding-bottom:15px;}
}
/* Mobile menu (off-canvas) */
.cg-mmenu{
  position:fixed;
  top:var(--topbar-h);
  bottom:0;
  /* افتراضي LTR: من اليسار */
  left:0; right:auto;
  width:min(76vw,360px);
  /* ارتفاع كامل الشاشة تحت التوب بار (مع دعم svh/dvh) */
  height:calc(100svh - var(--topbar-h));
  height:calc(100dvh - var(--topbar-h));
  background:var(--bg);
  border-inline-end:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:auto;
  z-index:var(--z-mmenu);

  /* حالة مغلقة: مخفية برا الشاشة لليسار */
  transform:translateX(-100%);
  transition:transform .24s ease;
  /* راحة للأجهزة الجديدة */
  padding-bottom:env(safe-area-inset-bottom, 0);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:640px){
  .cg-mmenu{ top:0; height:100%}
}
[dir="rtl"] .cg-mmenu{
  right:0; left:auto;
  border-inline-end:0;
  border-inline-start:1px solid var(--line);
  transform:translateX(100%);
}
.cg-mmenu.is-open{ transform:translateX(0) }
[dir="rtl"] .cg-mmenu.is-open{ transform:translateX(0) }

.cg-mmenu[hidden]{ display:block }
.cg-mmenu.is-open{ transform:translateX(0) }
.cg-backdrop{
  position:fixed; inset:0; background:rgba(2,8,23,.45);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:.2s; z-index:var(--z-backdrop)
}
.cg-backdrop.is-open{ opacity:1; pointer-events:auto }
.cg-mmenu-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line) }
.cg-mclose{ background:transparent; border:0; font-size:18px; cursor:pointer }
.cg-mnav{ padding:8px 10px; overflow:auto }
.cg-mitem{ display:block; padding:12px; border-radius:10px; color:var(--text); text-decoration:none }
.cg-mitem:hover{ background:#f3f4f6 }
:root[data-theme="dark"] .cg-mitem:hover{ background:#0f172a }
.cg-mgroup{ margin:6px 0 }
.cg-mgroup-title{ opacity:.8; font-weight:800; margin:8px 2px }
.cg-msep{ border:0; height:1px; background:var(--line); margin:10px 0 }

/* Language switcher (desktop) */
.cg-lang{ position:relative }
.cg-lang-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:.18s ease; color:var(--text)
}
.cg-lang-btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px) }
.cg-lang-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); min-width:170px; padding:6px; z-index:5
}
.cg-lang-item{ display:block; padding:10px 12px; border-radius:10px; color:var(--text); text-decoration:none }
.cg-lang-item:hover{ background:#f3f4f6 }
:root[data-theme="dark"] .cg-lang-item:hover{ background:#0f172a }

/* =========================================================
   Account Layout & Sidebar
   ========================================================= */
.account-layout{
  display:grid;
  grid-template-columns:270px 1fr;
  grid-template-areas:"sidebar content";
  gap:22px; align-items:start; margin-top:18px;
}
.acc-sidebar{ grid-area:sidebar; align-self:start; padding:14px; top:calc(var(--topbar-h) + 12px) }

.acc-sidebar__head{ font-weight:900; font-size:1.05rem; margin:4px 8px 10px; color:var(--text) }
.acc-sidebar__nav{ display:flex; flex-direction:column; gap:6px }
.acc-sidebar__link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:var(--text);
  text-decoration:none; border:1px solid transparent; opacity:.95;
}
.acc-sidebar__link:hover{ background:#f8fafc; border-color:var(--line); opacity:1 }
:root[data-theme="dark"] .acc-sidebar__link:hover{ background:#0f172a }
.acc-sidebar__link i{ font-size:18px; width:22px; text-align:center; color:#6690ff }
.acc-sidebar__link.is-active{ background:#eef2ff; border-color:#c7d2fe; font-weight:800 }
:root[data-theme="dark"] .acc-sidebar__link.is-active{ background:#101a34; border-color:#1f2a44 }

[dir="rtl"] .account-layout{ direction:rtl }
[dir="rtl"] .acc-sidebar__link i{ margin-inline-start:0 }

@media (max-width:992px){
  .cg-burger{ display:inline-flex }
  .cg-nav{ display:none }
  .cg-account-pill{ display:none }
  .cg-auth .cg-btn{ padding:8px 12px }

  .account-layout{
              place-content: center;
    grid-template-columns:1fr;
    grid-template-areas:
      "content"
      "sidebar";
  }
  .acc-sidebar{
    display:none !important;
  }
  .acc-sidebar__nav{ display:flex; flex-direction:column; gap:8px }
  .acc-sidebar__link{ display:flex; align-items:center; justify-content:flex-start; text-align:left }
}

/* =========================================================
   Minor helpers
   ========================================================= */
.helper{ font-size:12px; color:#6b7280; margin-top:6px }
:root[data-theme="dark"] .summary{ background:var(--surface); border-color:var(--line) }
/* =========================================
   Dashboard (User) — Styles only, theme-safe
   يعتمد حصراً على التوكنز العامة:
   --surface, --bg, --text, --muted, --line, --shadow, --radius
   ========================================= */



/* ===== Titles ===== */
.db-title{

  margin:0px 0 2px;
}
.db-sub{
  color:var(--muted);
  font-weight:600;
}

/* ===== KPI Grid ===== */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
@media (max-width:1024px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){  .kpi-grid{ grid-template-columns:1fr; } }

.kpi-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  gap:14px;
  align-items:center;
  min-height:96px;
}
.kpi-ico{
  width:48px;
  height:48px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eef4ff;            /* ديكور خفيف، ما بيكسر الثيم */
  color:#4169e1;
  font-size:20px;
  flex:0 0 auto;
}
:root[data-theme="dark"] .kpi-ico{ background:#101a34; }

.kpi-content{ min-width:0; }
.kpi-title{ color:var(--muted); font-weight:800; font-size:13px; }
.kpi-value{ font-weight:900; font-size:26px; color:var(--text); }

/* ===== Trend Section (اختياري لاحقاً) ===== */
.section-title{
  font-size:24px;
  font-weight:900;
  margin-top:28px;
  color:var(--text);
}
.trend-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:12px;
}
@media (max-width:840px){ .trend-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
}
.card h4{
  margin:0 0 8px 0;
  font-size:16px;
  font-weight:900;
  color:var(--text);
}

.empty{
  margin:auto 0;
  text-align:center;
  color:var(--muted);
  font-weight:800;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.empty .big{ font-size:40px; font-weight:900; color:var(--text); }
.empty .small{ font-size:13px; }
.empty .ico{ font-size:26px; color:#4169e1; }

/* RTL touch */
[dir="rtl"] .db-sub{ direction:rtl; }

.cg-topbar-row{ justify-content:stretch; }
.cg-actions{ margin-inline-start:auto; } /* بتشتغل RTL/LTR */
.cg-brand{ min-width:0; }                /* منع overflow لو الاسم طويل */

/* =========================
   Home Page (scoped to .home)
   ========================= */

.home .hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
  padding-block:38px;
}
@media (max-width:980px){
  .home .hero{ grid-template-columns:1fr }
}

/* Illustration */
.home .hero .right{ display:grid; justify-items:center }
.home .hero-illus{
  width:min(480px,100%);
  aspect-ratio:1/1;

  position:relative;

}

/* Floating brand icons */
.home .gift-icon{
  position:absolute;
  font-size:34px;
  will-change:transform;
  animation:home-floatY 6s ease-in-out infinite alternate;
  color:var(--text);
}
.home .gift-icon.sm{ font-size:28px; padding:12px; border-radius:16px; animation-duration:5.5s }
.home .gift-icon.xs{ font-size:22px; padding:10px; border-radius:14px; animation-duration:5s }

/* positions */
.home .gift-icon.i1{ top:16%; left:10%;  transform:rotate(-10deg) }
.home .gift-icon.i2{ top:8%;  right:8%;  transform:rotate(12deg) }
.home .gift-icon.i3{ bottom:12%; left:14%; transform:rotate(8deg) }
.home .gift-icon.i4{ bottom:8%;  right:12%; transform:rotate(-8deg) }
.home .gift-icon.i5{ top:22%; left:42% }
.home .gift-icon.i6{ top:58%; right:40% }
.home .gift-icon.i7{ top:40%; right:6%  }
.home .gift-icon.i8{ top:40%; left:6%   }
.home .gift-icon.i9{ top:2%;  left:40%  }
.home .gift-icon.i10{ bottom:2%; right:40% }
.home .gift-icon.i11{ top:60%; left:66% }
.home .gift-icon.i12{ top:30%; right:60% }

@keyframes home-floatY{
  0%{ transform:translateY(0) rotate(0deg) }
  100%{ transform:translateY(-10px) rotate(2deg) }
}
@media (prefers-reduced-motion:reduce){
  .home .gift-icon{ animation:none }
}
/* إخفاء الأسهم داخل حقل الأرقام في Chrome وEdge وSafari */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* إخفاء الأسهم في Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* لمسة جمالية إضافية (اختياري) */
input[type=number] {
  appearance: textfield;
}
.h2,h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0px 0 4px;
}
/* =========================================================
   Scrollbars — clean & smooth
   ========================================================= */

/* 0) ثبات مساحة السكرول لتفادي “نطّة” المحتوى */
html{
  scrollbar-gutter: auto;
  scroll-behavior: smooth;              /* سكرول ناعم للـ anchor & wheel */
  scroll-padding-top: var(--topbar-h);  /* احترام التوب بار المثبّت */
}

/* احترام تفضيل المستخدم بإلغاء السموث */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* 1) ألوان افتراضية للسكرول (فايرفوكس) */
*{
  scrollbar-width: thin; /* رفيع وحلو */
  scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent)
                   color-mix(in srgb, var(--surface) 86%, transparent);
}
/* دارك مود (فايرفوكس) */
:root[data-theme="dark"] *{
  scrollbar-color: color-mix(in srgb, var(--text) 30%, transparent)
                   color-mix(in srgb, var(--bg) 86%, transparent);
}

/* 2) WebKit (Chrome/Safari/Edge) — ستايل موحّد */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background: transparent; /* لتأثير “auto-hide” اللطيف */
}
::-webkit-scrollbar-track{
  background: transparent; /* نخلي التراك شفاف قدر الإمكان */
}
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;            /* “padding” بصري للثَمب */
  background-clip: padding-box;             /* يخلي الحواف ناعمة */
  transition: background .15s ease;
}
::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--text) 28%, transparent);
}
::-webkit-scrollbar-thumb:active{
  background: color-mix(in srgb, var(--accent) 70%, var(--text) 10%);
}

/* دارك مود (WebKit) */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 28%, transparent);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--text) 36%, transparent);
}

/* 3) نسخة أنحف لعناصر سكرول داخلية (قوائم، جداول،…)
      حط class="nice-scroll" على أي كونتينر طويل */
.nice-scroll{
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; /* سلاسة بالهواتف */
}
.nice-scroll::-webkit-scrollbar{
  width: 8px; height: 8px;
}
.nice-scroll::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border: 2px solid transparent;
  border-radius: 999px;
}

/******** slider *********/

.sell-hero{ margin:22px 0; }
.gallery{
  --slide-gap: 16px;
  border-radius: 14px;
  overflow: hidden;
  margin-inline: calc(var(--slide-gap) * -0.5);
}
.gallery .gallery-cell{
  width: calc(90% - var(--slide-gap));
  margin-inline: calc(var(--slide-gap) * 0.5);
  height: 134px;
  position: relative;
  user-select: none;
}
@media (min-width:1024px){ .gallery .gallery-cell{ width: calc((100% / 3) - var(--slide-gap)); } }
@media (min-width:768px) and (max-width:1023.98px){ .gallery .gallery-cell{ width: calc((100% / 2) - var(--slide-gap)); } }
.gallery .gallery-cell img{
  width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05);
  display: block; pointer-events: none; border-radius: 14px;
}
.flickity-button{ background: rgba(0,0,0,.35); transition: opacity .2s,visibility .2s; }
.flickity-button:hover{ background: rgba(0,0,0,.48); }
.flickity-prev-next-button{ width:36px; height:36px; border-radius:50%; color:#fff; opacity:0; visibility:hidden; pointer-events:none; }
.gallery:hover .flickity-prev-next-button{ opacity:1; visibility:visible; pointer-events:auto; }
.flickity-page-dots .dot{ background: rgba(0,0,0,.25); }
.flickity-page-dots .dot.is-selected{ background: #0c305b; }
@media (max-width:768px){ .flickity-prev-next-button{ display:none !important; } }
.gallery .flickity-viewport{ overflow: visible; }
@media (max-width: 767.98px){
  .gallery{ --slide-gap: 14px; margin-inline: 0; padding-inline: 0; }
  .gallery .gallery-cell{ width: 100%; margin: 0; padding-inline: calc(var(--slide-gap) / 2); box-sizing: border-box; height: 134px; }
  .gallery .gallery-cell > a, .gallery .gallery-cell img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; }
  .gallery .flickity-viewport{ overflow: hidden; }
}
@media (max-width: 767.98px){ .gallery .gallery-cell img{ border-radius:10px; } }
.gallery{
  --nav-size: 26px; --icon-size: 12px; --nav-bg: rgba(255,255,255,0.7); --nav-bg-hover: #fff; --nav-border: rgba(0,0,0,.08);
}
.flickity-prev-next-button{
  width: var(--nav-size); height: var(--nav-size); border-radius:999px; background: var(--nav-bg);
  border:1px solid var(--nav-border); color:#000; box-shadow:0 4px 14px rgba(0,0,0,.10);
  transition: background .2s, box-shadow .2s; position:absolute; top:50%; transform:translateY(-50%);
}
.flickity-prev-next-button .flickity-button-icon{ width:var(--icon-size); height:var(--icon-size); fill: currentColor; }
.flickity-prev-next-button:hover{ background: var(--nav-bg-hover); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.flickity-prev-next-button:focus-visible{ outline:2px solid #0c305b; outline-offset:2px; }
.flickity-prev-next-button.previous{ left: 22px; }
.flickity-prev-next-button.next{ right: 22px; }
@media (max-width:768px){ .flickity-prev-next-button{ display:none !important; } }

/******** slider end *********/
/* ===========================
   Notifications - Styled for site theme (fixed mobile focus)
   =========================== */


.cg-notif-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent; /* يمنع الوميض الأزرق في الموبايل */
  outline: none; /* يمنع الإطار الأزرق الثابت */
}

.cg-notif-btn i {
  color: var(--text);
  font-size: 1.1rem;
}

.cg-notif-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 12px;
  display: grid;
  place-items: center;
  background: #e11;
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.85);
}
.cg-notif-badge[hidden] {
  display: none !important;
}

/* القائمة */
.cg-notif-menu {
  position: fixed;
  top: 56px;
  left: auto;
  right: 8px;
  width: 360px;
  max-height: 420px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 2000;
  scrollbar-width: none;
  -ms-overflow-style: none;
  animation: cg-notif-fade .15s ease;
}
.cg-notif-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
}
@keyframes cg-notif-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .cg-notif-menu {
    max-height: min(70vh, 520px);
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }
}

.cg-notif-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--line);
  z-index: 5;
}
.cg-notif-head strong {
  color: var(--text);
  font-weight: 800;
}

.cg-notif-list {
  display: block;
  padding: 0;
  margin: 0;
}

/* عناصر الإشعارات */
.cg-notif-item {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border: 0;
  appearance: none;
  background-color: transparent;
  text-align: start;
  color: var(--text);
  text-decoration: none;
  box-sizing: border-box;
  border-inline-start: 2px solid var(--blue);
  border-block-end: 0.5px solid var(--line);
  width: 100%;
  min-height: 60px;
  padding: 12px;
  padding-inline-start: 14px;
  padding-inline-end: 14px;
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  transition: background .15s ease, border-color .15s ease;
}
.cg-notif-item:hover {
  background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
}
.cg-notif-item.unread {
  border-inline-start-color: var(--accent);
}

/* التاريخ + الأيقونة */
.cg-notif-item .t {
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}
.cg-notif-item .t::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: var(--blue);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 9h.01"/><path d="M11 12h1v4h1"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 9h.01"/><path d="M11 12h1v4h1"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* نص الإشعار */
.cg-notif-item .b {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
/* ============================================
   Global Focus Handling for All Buttons/Links
   - removes ugly mobile blue/tap highlight
   - keeps an accessible ring for keyboard users
   ============================================ */

/* 1) شيل وميض اللمس الأزرق عالأجهزة اللمسية */
:where(button, [type="button"], [type="submit"], [type="reset"],
       [role="button"], a, select, summary,
       .btn, .iconbtn, .topbtn, .cg-btn, .cg-notif-btn, .qty-btn,
       .cg-lang-btn, .dropdown-item, .ui-select__button, .brand-change-btn,
       .mm-link, .cg-withdraw){
  -webkit-tap-highlight-color: transparent;
}

/* 2) شيل الـoutline الافتراضي بكل الأحوال */
:where(button, [type="button"], [type="submit"], [type="reset"],
       [role="button"], a, select, summary,
       .btn, .iconbtn, .topbtn, .cg-btn, .cg-notif-btn, .qty-btn,
       .cg-lang-btn, .dropdown-item, .ui-select__button, .brand-change-btn,
       .mm-link, .cg-withdraw):focus{
  outline: none;
  box-shadow: none;
}

/* 3) ورجّع حلقة تركيز بس للي عم يتنقّل بالكيبورد (accessibility) */
:where(button, [type="button"], [type="submit"], [type="reset"],
       [role="button"], a, select, summary,
       .btn, .iconbtn, .topbtn, .cg-btn, .cg-notif-btn, .qty-btn,
       .cg-lang-btn, .dropdown-item, .ui-select__button, .brand-change-btn,
       .mm-link, .cg-withdraw):focus-visible{
  outline: none;
  /* استخدم توكن الثيم الموجود عندك */
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: var(--radius);
}

/* 4) تحسينات فايرفوكس القديمة عالأزرار */
button::-moz-focus-inner{ border:0; }
button:-moz-focusring{ outline: none; }

/* 5) يوتيليتي اختياري: لتعطيل الحلقة بمكان معيّن */
.ring-0:focus-visible{ box-shadow: none !important; }
/* ===== Unified header icon buttons (notif/theme/lang) ===== */
.cg-actions { display:flex; align-items:center; gap:10px; } /* تأكيد */

.cg-action-btn{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.cg-action-btn i{
  font-size: 1.1rem;
  color: currentColor;
}
.cg-action-btn:hover{ background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); box-shadow: var(--shadow); }
.cg-action-btn:active{ transform: scale(.98); }
.cg-action-btn:focus-visible{ box-shadow: 0 0 0 3px var(--ring); }

/* بادج الإشعارات يبقى كما هو */
.cg-notif-badge{
  position:absolute; top:-4px; inset-inline-end:-4px;
  min-width:18px; height:18px; padding:0 4px; border-radius:9px; font-size:12px;
  display:grid; place-items:center; background:#e11; color:#fff; font-weight:700;
  border:1px solid rgba(255,255,255,.85);
}
.cg-notif-badge[hidden]{ display:none !important; }

/* زر اللغة كزر ممتد بالنص */
.cg-lang-btn{
  display: inline-flex;           /* بدل inline-grid */
  align-items: center;
  gap: 6px;
  width: auto;                    /* مو ثابت 40px */
  padding-inline: 10px;           /* مساحة للنص */
  height: 40px;                   /* نفس ارتفاع بقية الأزرار */
  text-decoration: none;
  color: inherit;
}
@media (max-width: 768px){
  .cg-lang-label{ display: none; }
  .cg-lang-btn{ 
    width: 40px;                  /* يرجع مربّع مثل الباقي */
    padding-inline: 0;
    justify-content: center;
  }
}
  .cg-mitem {
    display: flex;
    align-items: center;
    gap: 10px; /* بالعربي بتصير يسار/يمين حسب الاتجاه تلقائياً */
    padding-inline: 10px;
  }
  .cg-mitem i {
    width: 20px;           /* ثبات عرض الأيقونة لاصطفاف مرتب */
    text-align: center;
    font-size: 14px;
    opacity: .9;
  }
  /* دعم RTL: ما في داعي نعمل شي إضافي، gap كافي */
.cg-mitem i {
  color: #6690ff;
}