/* ══════════════════════════════════════════════════════════════════════════
   محطة — ورقة الأنماط الوحيدة للمتجر.
   تحلّ محلّ حزمة daisyUI/Tailwind المُنقّاة وملفّات التصحيح التي كانت تعوّض
   ما حُذف منها. كل قاعدة هنا مسمّاة ومقصودة:
     1. إعادة ضبط + التوكِنات (ألوان العلامة، سلّم رمادي آبل، النصّ، المسافات)
     2. سلّم الأنماط النصّية
     3. المكوّنات: أزرار، حقول، شارات، حوارات/ألواح، جداول، بطاقات، إشعارات
     4. الهيكل: الصفحات العامة، صفحات الحساب، الشريط الجانبي والقائمة
     5. الصفحات: الرئيسية، المتجر، الطلبات، الحساب
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────── 1. إعادة ضبط وتوكِنات ───────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: var(--t-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); border-radius: 8px; }
::selection { background: var(--accent-soft); }
[hidden] { display: none !important; }
dialog { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; }

:root {
  color-scheme: light;
  --font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'SF Pro Display', 'SF Pro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* سلّم النصّ: مقاس/ارتفاع سطر/وزن — العربية تحتاج ارتفاع سطر أكبر قليلاً */
  --t-display: 700 40px/48px var(--font-display);
  --t-title-1: 700 28px/36px var(--font-display);
  --t-title-2: 700 22px/30px var(--font-display);
  --t-title-3: 600 17px/24px var(--font);
  --t-body: 400 15px/23px var(--font);
  --t-body-strong: 600 15px/23px var(--font);
  --t-callout: 400 13px/19px var(--font);
  --t-callout-strong: 600 13px/19px var(--font);
  --t-caption: 400 12px/17px var(--font);
  --t-caption-strong: 600 12px/17px var(--font);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 20px; --r-full: 999px;
  --control: 44px; --control-sm: 36px; --control-lg: 52px;
  --sidebar-w: 288px; --topbar-h: 56px; --content-max: 1120px;

  /* العلامة — من ملف الشعار نفسه */
  --brand-teal: #02A1A5; --brand-red: #FD655A; --brand-amber: #FCC300;
  --bc: 24% 0 0;
  --reference-page: oklch(100% 0 0);
  /* رمادي آبل */
  --gray-0: #FFFFFF; --gray-1: #F5F5F7; --gray-2: #E8E8ED; --gray-3: #D2D2D7; --gray-4: #AEAEB2; --gray-5: #8E8E93; --gray-6: #636366; --gray-10: #1C1C1E;

  --bg: var(--gray-1);
  --surface: var(--gray-0);
  --surface-2: var(--gray-1);
  --surface-3: var(--gray-2);
  --border: rgb(0 0 0 / .08);
  --border-strong: rgb(0 0 0 / .16);
  --text: #1D1D1F;
  --text-2: var(--gray-6);
  --text-3: var(--gray-5);
  --on-accent: #FFFFFF;

  --accent: #0B7F83;            /* تركواز العلامة بدرجة تحمل نصاً أبيض: 4.8:1 (#0E8F93 كان 3.9:1) */
  --accent-strong: #0A7A7E;
  --accent-soft: rgb(2 161 165 / .12);
  --accent-text: #087478;
  --danger: #D93A2F; --danger-soft: rgb(253 101 90 / .14); --danger-text: #B32A20;
  --warning-soft: rgb(252 195 0 / .2); --warning-text: #7A5A00;
  --success-soft: rgb(2 161 165 / .14); --success-text: #087478;

  --focus: 0 0 0 3px rgb(2 161 165 / .35);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .04);
  --shadow-2: 0 4px 12px rgb(0 0 0 / .08), 0 1px 3px rgb(0 0 0 / .06);
  --shadow-3: 0 16px 40px rgb(0 0 0 / .16), 0 2px 8px rgb(0 0 0 / .08);
  --material: rgb(245 245 247 / .78);
  --material-strong: rgb(255 255 255 / .82);
  --public-header-bg: oklch(97% 0 0 / .8);
  --public-footer-bg: oklch(93.5% 0 0);
  --backdrop-glow: .3;
  --scrim: rgb(0 0 0 / .42);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } }
/* ───────── الوضع الداكن: لوحة مصمّمة لا مقلوبة — أسطح دافئة متدرّجة، تركواز العلامة أفتح درجة كي
   يبلغ تباين AA على الداكن، والظلال أعمق بدل أن تختفي. يتبع النظام، ويمكن اختياره يدوياً. ───────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bc: 86% 0 0;
  --reference-page: #0C0C0E;
  --gray-0: #161618; --gray-1: #0C0C0E; --gray-2: #242427; --gray-3: #3A3A3F; --gray-4: #5B5B61; --gray-5: #8E8E94; --gray-6: #ADADB3; --gray-10: #2C2C30;
  --bg: #0C0C0E;
  --surface: #161618;
  --surface-2: #1D1D20;
  --surface-3: #2A2A2E;
  --border: rgb(255 255 255 / .09);
  --border-strong: rgb(255 255 255 / .18);
  --text: #F5F5F7;
  --text-2: #ADADB3;
  --text-3: #85858B;
  --accent: #14AFB3;
  --on-accent: #04292A;  /* the light teal of dark mode carries dark text (white was 2.7:1) */
  --accent-strong: #3CC6CA;
  --accent-soft: rgb(20 175 179 / .2);
  --accent-text: #5CD6D9;
  --danger: #FF6A5E; --danger-soft: rgb(255 106 94 / .16); --danger-text: #FF8C82;
  --warning-soft: rgb(252 195 0 / .16); --warning-text: #FFD255;
  --success-soft: rgb(20 175 179 / .18); --success-text: #5CD6D9;
  --focus: 0 0 0 3px rgb(60 198 202 / .45);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 6px 18px rgb(0 0 0 / .45), 0 1px 3px rgb(0 0 0 / .4);
  --shadow-3: 0 18px 48px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .4);
  --material: rgb(22 22 24 / .74);
  --material-strong: rgb(22 22 24 / .86);
  --public-header-bg: rgb(28 28 31 / .78);
  --public-footer-bg: #141416;
  --scrim: rgb(0 0 0 / .6);
  --backdrop-glow: .16;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bc: 86% 0 0;
    --reference-page: #0C0C0E;
    --gray-0: #161618; --gray-1: #0C0C0E; --gray-2: #242427; --gray-3: #3A3A3F; --gray-4: #5B5B61; --gray-5: #8E8E94; --gray-6: #ADADB3; --gray-10: #2C2C30;
    --bg: #0C0C0E;
    --surface: #161618;
    --surface-2: #1D1D20;
    --surface-3: #2A2A2E;
    --border: rgb(255 255 255 / .09);
    --border-strong: rgb(255 255 255 / .18);
    --text: #F5F5F7;
    --text-2: #ADADB3;
    --text-3: #85858B;
    --accent: #14AFB3;
    --on-accent: #04292A;
    --accent-strong: #3CC6CA;
    --accent-soft: rgb(20 175 179 / .2);
    --accent-text: #5CD6D9;
    --danger: #FF6A5E; --danger-soft: rgb(255 106 94 / .16); --danger-text: #FF8C82;
    --warning-soft: rgb(252 195 0 / .16); --warning-text: #FFD255;
    --success-soft: rgb(20 175 179 / .18); --success-text: #5CD6D9;
    --focus: 0 0 0 3px rgb(60 198 202 / .45);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-2: 0 6px 18px rgb(0 0 0 / .45), 0 1px 3px rgb(0 0 0 / .4);
    --shadow-3: 0 18px 48px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .4);
    --material: rgb(22 22 24 / .74);
    --material-strong: rgb(22 22 24 / .86);
    --public-header-bg: rgb(28 28 31 / .78);
    --public-footer-bg: #141416;
    --scrim: rgb(0 0 0 / .6);
    --backdrop-glow: .16;
  }
}

@media (prefers-reduced-transparency: reduce) { :root { --material: var(--gray-1); } }

/* ───────────────── 2. أنماط نصّية ───────────────── */
.t-display { font: var(--t-display); } .t-title-1 { font: var(--t-title-1); } .t-title-2 { font: var(--t-title-2); }
.t-title-3 { font: var(--t-title-3); } .t-body { font: var(--t-body); } .t-body-strong { font: var(--t-body-strong); }
.t-callout { font: var(--t-callout); } .t-callout-strong { font: var(--t-callout-strong); }
.t-caption { font: var(--t-caption); } .t-caption-strong { font: var(--t-caption-strong); }
.text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); } .text-accent { color: var(--accent-text); } .text-danger { color: var(--danger-text); }
.num, .ltr { direction: ltr; unicode-bidi: isolate; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { color: var(--accent-strong); }
.stack { display: flex; flex-direction: column; } .stack-2 { gap: var(--s-2); } .stack-3 { gap: var(--s-3); } .stack-4 { gap: var(--s-4); } .stack-6 { gap: var(--s-6); }
.row { display: flex; align-items: center; } .row-2 { gap: var(--s-2); } .row-3 { gap: var(--s-3); } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────────── 3. المكوّنات ───────────────── */
/* أزرار — التغذية الراجعة عند الضغط لا عند الإفلات */
.ui-btn {
  --h: var(--control);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--h); padding: 0 var(--s-5); border-radius: var(--r-2);
  font: var(--t-body-strong); white-space: nowrap; user-select: none; position: relative;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1);
}
.ui-btn:active:not(:disabled) { transform: scale(.97); }
.ui-btn:disabled { opacity: .5; }
.ui-btn > svg { width: 18px; height: 18px; flex: none; }
.ui-btn-sm { --h: var(--control-sm); padding: 0 var(--s-4); font: var(--t-callout-strong); border-radius: var(--r-1); }
.ui-btn-lg { --h: var(--control-lg); padding: 0 var(--s-6); font: 600 17px/1 var(--font); border-radius: var(--r-3); }
.ui-btn-block { width: 100%; }
.ui-btn-primary { background: var(--accent); color: var(--on-accent); }
.ui-btn-primary:hover:not(:disabled) { background: var(--accent-strong); }
.ui-btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.ui-btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
.ui-btn-tertiary { background: transparent; color: var(--accent-text); }
.ui-btn-tertiary:hover:not(:disabled) { background: var(--accent-soft); }
.ui-btn-ghost { background: transparent; color: var(--text-2); }
.ui-btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.ui-btn-danger-outline { background: transparent; color: var(--danger-text); border-color: var(--danger); }
.ui-btn-danger-outline:hover:not(:disabled) { background: var(--danger-soft); }
.ui-btn-danger-soft { background: var(--danger-soft); color: var(--danger-text); }
.ui-btn-danger-soft:hover:not(:disabled) { background: var(--danger); color: #fff; }
.ui-btn-loading { color: transparent !important; pointer-events: none; }
.ui-btn-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--on-accent); border-inline-end-color: transparent; animation: spin .7s linear infinite; }
.ui-btn-secondary.ui-btn-loading::after, .ui-btn-tertiary.ui-btn-loading::after, .ui-btn-ghost.ui-btn-loading::after { border-color: var(--text-2); border-inline-end-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { display: inline-grid; place-items: center; width: var(--control); height: var(--control); border-radius: var(--r-2); color: var(--text-2); transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.icon-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn > svg { width: 20px; height: 20px; }
.icon-btn-sm { width: var(--control-sm); height: var(--control-sm); }
.icon-btn-sm > svg { width: 18px; height: 18px; }

/* حقول — تسمية 13/600، ضابط 44px، تلميح 12، خطأ 12 بأيقونة */
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field-label { font: var(--t-callout-strong); color: var(--text); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.field-label .req { color: var(--danger-text); margin-inline-start: 2px; }
.field-hint { font: var(--t-caption); color: var(--text-2); }
.field-error { font: var(--t-caption-strong); color: var(--danger-text); display: flex; gap: var(--s-1); align-items: flex-start; }
.field-error::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm0 3.5a.9.9 0 0 0-.9.9v3.6a.9.9 0 0 0 1.8 0V5.4A.9.9 0 0 0 8 4.5zm0 6.3a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm0 3.5a.9.9 0 0 0-.9.9v3.6a.9.9 0 0 0 1.8 0V5.4A.9.9 0 0 0 8 4.5zm0 6.3a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.control {
  display: flex; align-items: center; gap: var(--s-2); min-height: var(--control); padding: 0 var(--s-4);
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-2);
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1);
}
.control:hover { border-color: var(--text-3); }
.control:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.control[data-invalid="true"] { border-color: var(--danger); }
.control[data-invalid="true"]:focus-within { box-shadow: 0 0 0 3px var(--danger-soft); }
.control[data-disabled="true"] { background: var(--surface-2); color: var(--text-3); }
.control > input, .control > select, .control > textarea { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; padding: 0; font: var(--t-body); color: inherit; text-align: start; }
.control > input:focus-visible, .control > select:focus-visible, .control > textarea:focus-visible { box-shadow: none; }
.control > input::placeholder { color: var(--text-3); }
/* the field fills its box, so a tap anywhere on the box focuses it (not only the 23px text line) */
.control > input, .control > select { align-self: stretch; }
.control > select { appearance: none; padding-inline-end: var(--s-6); cursor: pointer; }
.control .affix { color: var(--text-2); font: var(--t-body-strong); flex: none; display: inline-flex; align-items: center; }
.control .affix > svg { width: 18px; height: 18px; }
.control .affix-btn { color: var(--accent-text); font: var(--t-callout-strong); height: 32px; padding: 0 var(--s-2); margin-inline-end: calc(-1 * var(--s-2)); border-radius: 6px; }
.control .affix-btn:hover { background: var(--accent-soft); }
.control-select { position: relative; }
.control-select .chevron { position: absolute; inset-inline-end: var(--s-4); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.control-search { width: 100%; max-width: 384px; min-height: 48px; border-radius: var(--r-1); background: var(--surface-2); border-color: transparent; }
.control-search:hover { border-color: var(--border-strong); }
.control-search > input { font-size: 16px; }

/* OTP: ستّ خانات */
.otp { display: flex; gap: var(--s-2); direction: ltr; justify-content: center; }
.otp > input { width: 46px; height: 54px; text-align: center; font: 600 22px/1 var(--font); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-2); transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.otp > input:focus { border-color: var(--accent); box-shadow: var(--focus); outline: none; }
.otp[data-invalid="true"] > input { border-color: var(--danger); }

/* مفتاح ومربّع */
.switch { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 46px; height: 28px; padding: 3px; border-radius: var(--r-full); background: var(--gray-4); transition: background var(--dur-2) var(--ease-out); flex: none; }
.switch .track::after { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform var(--dur-2) var(--ease-out); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(-18px); }
.switch input:focus-visible + .track { box-shadow: var(--focus); }
.switch input:disabled + .track { opacity: .45; }
.switch > .stack { min-width: 0; flex: 1; }
.checkbox { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; font: var(--t-body); }
.checkbox input { appearance: none; width: 20px; height: 20px; margin-top: 2px; flex: none; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; transition: background var(--dur-1), border-color var(--dur-1); }
.checkbox input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.checkbox input[aria-invalid="true"] { border-color: var(--danger); }
.checkbox input:focus-visible { box-shadow: var(--focus); }

/* عدّاد الكمية */
.stepper { display: inline-flex; align-self: flex-start; align-items: center; height: var(--control); border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface); overflow: hidden; direction: ltr; }
.stepper > button { width: 44px; height: 100%; display: grid; place-items: center; color: var(--text-2); transition: background var(--dur-1); }
.stepper > button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.stepper > button:disabled { opacity: .35; }
.stepper > button > svg { width: 16px; height: 16px; }
.stepper > input { width: 56px; height: 100%; text-align: center; border: 0; border-inline: 1px solid var(--border); background: transparent; font: var(--t-body-strong); }

/* خيارات الفئة (radio rows) */
.options { display: flex; flex-direction: column; gap: var(--s-2); }
.option { display: flex; align-items: center; gap: var(--s-3); min-height: var(--control); padding: var(--s-2) var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface); cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1); }
.option:hover { border-color: var(--text-3); }
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option .radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; transition: border-color var(--dur-1); }
.option .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--dur-2) var(--ease-out); }
.option[data-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.option[data-checked="true"] .radio { border-color: var(--accent); }
.option[data-checked="true"] .radio::after { transform: scale(1); }
.option:has(input:focus-visible) { box-shadow: var(--focus); }
.option .opt-label { flex: 1; font: var(--t-body-strong); }
.option .opt-price { font: var(--t-body-strong); }

/* شرائح التصفية */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: var(--r-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented > button { height: 36px; padding: 0 var(--s-4); border-radius: 9px; font: var(--t-callout-strong); color: var(--text-2); white-space: nowrap; transition: background var(--dur-2) var(--ease-out), color var(--dur-1), box-shadow var(--dur-2); }
.segmented > button:hover { color: var(--text); }
.segmented > button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
@media (pointer: coarse) { .segmented > button { height: 40px; } }

/* شارات الحالة: خلفية خفيفة ونصّ داكن */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s-3); border-radius: var(--r-full); font: var(--t-caption-strong); white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-ok { background: var(--success-soft); color: var(--success-text); }
.chip-wait { background: var(--warning-soft); color: var(--warning-text); }
.chip-bad { background: var(--danger-soft); color: var(--danger-text); }
.chip-in { background: var(--success-soft); color: var(--success-text); } .chip-out { background: var(--danger-soft); color: var(--danger-text); }
.chip-plain::before { display: none; }

/* بطاقة / لوح */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-1); }
.card-pad { padding: var(--s-6); }
@media (max-width: 640px) { .card-pad { padding: var(--s-5); } }

/* حالات فارغة وهياكل */
.empty { padding: var(--s-10) var(--s-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.empty-icon { width: 48px; height: 48px; border-radius: var(--r-3); display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); margin-bottom: var(--s-2); }
.empty-icon > svg { width: 24px; height: 24px; }
.empty h3 { font: var(--t-title-3); }
.empty p { font: var(--t-callout); color: var(--text-2); max-width: 44ch; }
.empty .actions { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }

/* الجداول: أعمدة بعرض مقصود، صفوف متناسقة بلا فراغات زائدة، تحويم هادئ؛ على الجوال بطاقات */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--t-callout); }
.table th { text-align: start; padding: 6px var(--s-3); font: var(--t-caption-strong); color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 6px var(--s-3); height: 38px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .num { text-align: end; direction: ltr; }
.table td.ltr { text-align: right; }
.table td.ltr > *, .table td .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; text-align: right; }
.table td.ltr > code, .table td.ltr > .text-2 { white-space: nowrap; }
.table th.cell-date, .table td.cell-date { text-align: right; }
.table td.cell-date > * { direction: ltr; unicode-bidi: isolate; display: inline-block; text-align: right; }
.table td .kv-inline { display: flex; flex-direction: column; gap: 1px; font: var(--t-caption); }
.table td .kv-inline > div { display: flex; gap: var(--s-2); align-items: baseline; }
.table td .kv-inline dt { color: var(--text-2); white-space: nowrap; }
.table td .kv-inline dd { color: var(--text); }
.table .cell-primary { font: var(--t-callout-strong); color: var(--text); }
.table .cell-sub { font: var(--t-caption); color: var(--text-2); margin-top: 1px; }
.table .price { font: var(--t-body-strong); }
.table .thumb { width: 32px; height: 32px; border-radius: var(--r-1); object-fit: cover; background: var(--surface-3); flex: none; }
/* المُعرف كاملاً (UUID بلا بادئة) بخطّ أحادي المسافات؛ لا يلتفّ إلا عند الشرطات */
.copy { display: inline-flex; align-items: flex-start; gap: 6px; font: 400 12px/16px ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--text-2); padding: 3px 6px; margin: -3px -6px; border-radius: 6px; direction: ltr; unicode-bidi: isolate; text-align: left; max-width: 100%; }
.copy > span { overflow-wrap: normal; }
.copy > svg { flex: none; margin-top: 1px; }
.copy:hover { background: var(--surface-3); color: var(--text); }
.copy > svg { width: 13px; height: 13px; }
.rows { display: flex; flex-direction: column; }
.rowcard { display: grid; grid-template-columns: minmax(42%, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.rowcard:last-child { border-bottom: 0; }
.rowcard .rc-title { font: var(--t-body-strong); display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.rowcard .rc-title .thumb { width: 40px; height: 40px; border-radius: var(--r-2); object-fit: cover; background: var(--surface-3); flex: none; }
.rowcard .rc-title .stack { min-width: 0; }
.rowcard .rc-sub { font: var(--t-caption); color: var(--text-2); }
/* the title keeps its share; a long rejection reason in the status chip wraps instead of squeezing it */
.rowcard .rc-end { min-width: 0; text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); }
.rowcard .rc-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font: var(--t-caption); color: var(--text-2); }
.rowcard .rc-meta > span > b { font-weight: 600; color: var(--text); }

/* الحوار والورقة السفلية */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; animation: fade var(--dur-2) var(--ease-out); }
@keyframes fade { from { opacity: 0; } }
.sheet-host { position: fixed; inset: 0; z-index: 51; display: grid; place-items: center; padding: var(--s-4); pointer-events: none; }
.sheet { pointer-events: auto; width: min(100%, 480px); max-height: calc(100dvh - 32px); background: var(--surface); border-radius: var(--r-4); box-shadow: var(--shadow-3); display: flex; flex-direction: column; animation: pop var(--dur-3) var(--ease-out); will-change: transform; }
.sheet-wide { width: min(100%, 560px); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sheet-grab { display: none; }
.sheet-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-3); flex: none; }
.sheet-head .sheet-title { font: var(--t-title-3); flex: 1; min-width: 0; }
.sheet-head .sheet-title small { display: block; font: var(--t-caption); color: var(--text-2); margin-top: 2px; }
.sheet-head .thumb { width: 48px; height: 48px; border-radius: var(--r-2); object-fit: cover; background: var(--surface-3); flex: none; }
.sheet-body { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); overscroll-behavior: contain; }
.sheet-foot { flex: none; padding: var(--s-3) var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.sheet-banner { position: relative; flex: none; padding: var(--s-6) var(--s-6) var(--s-3); }
.buy-banner { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--surface-3); }
.buy-banner img { width: 100%; height: 100%; object-fit: cover; }
.buy-banner-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gray-4); }
.buy-banner-empty > svg { width: 40px; height: 40px; }
.buy-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .75), rgb(0 0 0 / .15) 45%, transparent 70%); }
.pill { position: absolute; top: 14px; z-index: 2; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-full); font: var(--t-callout-strong); box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
.pill-cat { left: 14px; background: var(--brand-teal); color: #fff; }
.pill-price { right: 14px; background: var(--surface); color: var(--text); }
.buy-banner-name { position: absolute; z-index: 2; inset-inline: 0; bottom: 16px; padding: 0 var(--s-3); text-align: center; font: 700 24px/32px var(--font-display); color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / .6); }
@media (max-width: 640px) {
  .sheet-host { align-items: end; padding: 0; }
  .sheet { width: 100%; max-height: 92dvh; border-radius: var(--r-4) var(--r-4) 0 0; animation-name: slide-up; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes slide-up { from { transform: translateY(100%); } }
  .sheet-grab { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--gray-3); margin: 8px auto 0; flex: none; }
  .sheet[data-dragging="true"] { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .scrim { animation: none; } }
.steps { display: flex; gap: var(--s-2); align-items: center; font: var(--t-caption-strong); color: var(--text-2); }
.steps > span { display: inline-flex; align-items: center; gap: var(--s-1); }
.steps > span[aria-current="step"] { color: var(--accent-text); }
.steps .dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font: var(--t-caption-strong); }
.steps > span[aria-current="step"] .dot { background: var(--accent); color: #fff; }
.steps .sep { width: 16px; height: 1px; background: var(--border-strong); }

/* تعليمات الدفع */
.instructions { display: flex; flex-direction: column; gap: var(--s-2); }
.instruction { display: flex; align-items: center; gap: var(--s-3); font: var(--t-body); line-height: 1.7; }
.instruction.code { padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--border); font: var(--t-callout); }
.instruction.code > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.instruction .copy-btn { flex: none; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-1); font: var(--t-caption-strong); color: var(--accent-text); border: 1px solid var(--accent-soft); background: var(--surface); display: inline-flex; align-items: center; gap: 4px; transition: background var(--dur-1); }
.instruction .copy-btn:hover { background: var(--accent-soft); }
.instruction .copy-btn > svg { width: 14px; height: 14px; }

/* منطقة رفع الوصل */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-5); border: 1.5px dashed var(--border-strong); border-radius: var(--r-3); cursor: pointer; color: var(--text-2); text-align: center; transition: border-color var(--dur-1), background var(--dur-1); min-height: 132px; }
.dropzone:hover, .dropzone[data-over="true"] { border-color: var(--accent); background: var(--accent-soft); }
.dropzone > svg { width: 24px; height: 24px; color: var(--text-3); }
.dropzone[data-invalid="true"] { border-color: var(--danger); }
.dropzone-file { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface-2); }
.dropzone-file img { width: 56px; height: 56px; border-radius: var(--r-2); object-fit: cover; flex: none; }
.dropzone-file .stack { min-width: 0; flex: 1; }

/* ملخّص المبلغ */
.summary { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); padding: var(--s-4); border-radius: var(--r-2); background: var(--surface-2); font: var(--t-body); }
.summary dt { color: var(--text-2); }
.summary dd { text-align: end; direction: ltr; font: var(--t-body-strong); }
.summary .total dt, .summary .total dd { font: var(--t-title-3); }
.summary .neg dd { color: var(--danger-text); }

/* الإشعارات */
/* الإشعارات بعيداً عن الشعار والقائمة: على الجوال تحت الشريط العلوي (لا تغطّي أزرار الأوراق السفلية)،
   وعلى سطح المكتب في الزاوية السفلية المقابلة للقائمة الجانبية (يسار الشاشة). */
.toast-live { position: fixed; inset-inline: 0; top: calc(env(safe-area-inset-top) + var(--topbar-h, 56px) + var(--s-2)); z-index: 60; display: flex; justify-content: center; padding: 0 var(--s-4); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); max-width: min(100%, 460px); padding: var(--s-3) var(--s-4); background: var(--gray-10); color: #fff; border-radius: var(--r-3); box-shadow: var(--shadow-3); font: var(--t-callout); animation: toast-in var(--dur-3) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }
.toast > svg { width: 18px; height: 18px; flex: none; }
.toast-ok > svg { color: var(--brand-teal); } .toast-err > svg { color: var(--brand-red); }
.toast .toast-x { margin-inline-start: auto; color: rgb(255 255 255 / .7); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.toast .toast-x:hover { color: #fff; background: rgb(255 255 255 / .12); }
/* الصفحات العامة: تحت شريطها العائم. صفحات الدخول بلا شريط: أسفل الشاشة بعيداً عن الشعار فوق البطاقة. */
body:has(.public-header) .toast-live { top: calc(env(safe-area-inset-top) + 112px); }
body:has(.auth) .toast-live { top: auto; bottom: 0; padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }
body:has(.auth) .toast { animation-name: toast-in-up; }
@keyframes toast-in-up { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (min-width: 900px) {
  .toast-live, body:has(.public-header) .toast-live, body:has(.auth) .toast-live { inset-inline: auto 0; top: auto; bottom: 0; justify-content: flex-end; padding: 0 var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom)); }
  .toast { animation-name: toast-in-up; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* الشعار */
.logo-lockup { width: auto; height: 32px; object-fit: contain; }
.logo-lockup.lockup-sm { height: 1.568rem; }
.logo-lockup.lockup-md { height: 3.137rem; }
.logo-lockup.lockup-lg { height: 3.660rem; }

/* الرابط الخافت (تخطّ) */
.skip { position: fixed; inset-inline-start: var(--s-4); top: -64px; z-index: 9999; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--accent); color: #fff; font: var(--t-body-strong); transition: top var(--dur-2) var(--ease-out); }
.skip:focus { top: var(--s-4); }

/* ───────────────── 4. الهيكل ───────────────── */
/* الصفحات العامة (الرئيسية): تدرّج العلامة خلف الترويسة فقط */
.public { min-height: 100dvh; display: flex; flex-direction: column; background: var(--gray-0); }
.hero-bg { position: absolute; inset: 0 0 auto; height: 620px; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--gray-0)); }
.public-wrap { position: relative; z-index: 1; width: 100%; max-width: var(--content-max); margin-inline: auto; padding: 0 var(--s-4); flex: 1; }
@media (min-width: 768px) { .public-wrap { padding: 0 var(--s-8); } }
.public-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: 64px; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); background: var(--material); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border); }
@media (min-width: 768px) { .public-header { margin: 0 calc(-1 * var(--s-8)); padding: 0 var(--s-8); } }
.public-main { display: flex; flex-direction: column; gap: var(--s-10); padding-bottom: var(--s-16); }
.section { display: flex; flex-direction: column; gap: var(--s-4); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.section-head h2 { font: var(--t-title-2); }
.public-footer { border-top: 1px solid var(--border); background: var(--surface-2); }
.public-footer .inner { max-width: var(--content-max); margin-inline: auto; padding: var(--s-8) var(--s-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); font: var(--t-callout); color: var(--text-2); }
.public-footer nav { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.public-footer nav a:hover { color: var(--text); }

/* صفحات الحساب (دخول/تسجيل/استعادة) */
/* صفحات الدخول بشكل صفحة دخول الإدارة نفسه: بطاقة 400px في وسط الشاشة، الشعار صغير فوق العنوان وسطر يشرح
   الخطوة، وشفق هادئ خلفها. المحتوى الأطول من الشاشة (التسجيل) يبدأ من الأعلى وينمو للأسفل، لا يُقصّ. */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6) var(--s-4); position: relative; }
.auth .hero-bg { height: 420px; }
.auth-inner { position: relative; z-index: 1; width: min(100%, 400px); display: flex; flex-direction: column; gap: var(--s-6); }
.auth-inner.wide { width: min(100%, 520px); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.auth-brand .logo-lockup { height: 40px; width: auto; }
.auth-brand h1 { font: var(--t-title-2); }  /* 22px كعنوان دخول الإدارة (--t-title-1 هناك) */
.auth-brand p { font: var(--t-callout); color: var(--text-2); max-width: 36ch; }
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-links { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); font: var(--t-callout); color: var(--text-2); text-align: center; }
.auth-links a { color: var(--accent-text); font-weight: 600; }
.wa { display: inline-flex; align-items: center; gap: 6px; }
.wa svg { width: 16px; height: 16px; flex: none; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 480px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .span-2 { grid-column: 1 / -1; }
.otp-card { display: flex; flex-direction: column; gap: var(--s-4); align-items: center; text-align: center; }
.otp-card p { font: var(--t-callout); color: var(--text-2); }
.resend { display: flex; gap: var(--s-2); align-items: center; justify-content: center; font: var(--t-callout); color: var(--text-2); }
.resend button { color: var(--accent-text); font: var(--t-callout-strong); }
.resend button:disabled { color: var(--text-3); }

/* الهيكل الداخلي: شريط جانبي لاصق + شريط علوي على الجوال */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; background: var(--bg); }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-4); background: var(--surface); border-inline-start: 1px solid var(--border); overflow-y: auto; }
.sidebar-brand { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--s-2) 0; margin-bottom: var(--s-2); min-height: 52px; }
.sidebar-brand .brand-link { display: block; }
.sidebar-brand .logo-lockup { height: 42px; }
.sidebar-brand .close { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); }
.sidebar-brand .close { display: none; }
.user-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-3); background: var(--surface-2); margin-bottom: var(--s-3); }
.user-card .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font: var(--t-callout-strong); flex: none; overflow: hidden; direction: ltr; }
.user-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-card .name { font: var(--t-body-strong); }
.user-card .balance { font: var(--t-title-3); color: var(--accent-text); direction: ltr; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { font: var(--t-caption-strong); color: var(--text-3); padding: var(--s-4) var(--s-3) var(--s-1); }
.nav-item { display: flex; align-items: center; gap: var(--s-3); height: 42px; padding: 0 var(--s-3); border-radius: var(--r-2); color: var(--text-2); font: 500 15px/1 var(--font); transition: background var(--dur-1), color var(--dur-1); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-item > svg { width: 18px; height: 18px; flex: none; }
.sidebar-foot { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.content { width: 100%; max-width: 1600px; margin-inline: auto; padding: 56px 56px var(--s-16); display: flex; flex-direction: column; gap: var(--s-6); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); min-height: 44px; }
.page-head h1 { font: var(--t-title-1); margin: 0; line-height: 1.2; }
.page-head p { font: var(--t-callout); color: var(--text-2); margin-top: var(--s-1); }
.page-head .actions { display: flex; gap: var(--s-2); align-items: center; margin-inline-start: auto; }
.crumbs { display: flex; align-items: center; gap: var(--s-2); font: var(--t-caption); color: var(--text-2); margin-bottom: var(--s-2); }
.crumbs a { color: var(--accent-text); }
.crumbs svg { width: 12px; height: 12px; }
.filters { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.filters .search { flex: 1 1 260px; max-width: 420px; }
@media (max-width: 1023.98px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-inline-start: 0; top: 0; z-index: 52; width: min(300px, 86vw); transform: translateX(100%); transition: transform var(--dur-3) var(--ease-out); }
  .sidebar[data-open="true"] { transform: none; box-shadow: var(--shadow-3); }
  .sidebar-brand .close { display: inline-grid; }
  .topbar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--s-2); height: var(--topbar-h); padding: 0 var(--s-3); background: var(--material); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border); }
  .topbar .title { text-align: center; font: var(--t-body-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .balance-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--s-3); border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font: var(--t-callout-strong); direction: ltr; }
  .content { padding: var(--s-5) var(--s-4) var(--s-12); gap: var(--s-5); }
  .page-head h1 { font: var(--t-title-2); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .content { padding: var(--s-8); } }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* الشريط كامل الارتفاع ومن لون أرضية الصفحة، وشريط المستخدم يرتب نفسه من لغة الاسم. */
.sidebar { min-height: 100dvh; background-color: var(--reference-page); overscroll-behavior: contain; }
.user-card { cursor: default; }
.user-card[data-username-script="latin"] { direction: ltr; }
.user-card[data-username-script="arabic"] { direction: rtl; }
.user-card .name { text-align: start; }
.user-card .balance { margin-inline-start: auto; }
.topbar .balance-chip { cursor: default; }

/* ───────────────── 5. الصفحات ───────────────── */
/* شبكة البطاقات */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-4) var(--s-3); animation: tiles-fade var(--dur-2) var(--ease-out); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--s-6) var(--s-5); } }
@keyframes tiles-fade { from { opacity: 0.88; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tiles { animation: none; } }
.tile { display: flex; flex-direction: column; gap: var(--s-2); text-align: center; width: 100%; color: inherit; }
.tile-img { position: relative; aspect-ratio: 1; border-radius: var(--r-3); overflow: hidden; background: var(--surface-3); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
@media (min-width: 640px) { .tile-img { border-radius: var(--r-4); } }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile-img[data-empty="true"] { display: grid; place-items: center; color: var(--gray-4); }
.tile-img[data-empty="true"] > svg { width: 32px; height: 32px; }
.tile:hover .tile-img { box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); transform: translateY(-2px); }
.tile:active .tile-img { transform: scale(.98); }
.tile[aria-disabled="true"] { cursor: not-allowed; }
.tile[aria-disabled="true"] .tile-img { opacity: .6; }
.tile[aria-disabled="true"]:hover .tile-img { box-shadow: none; transform: none; }
.tile .tile-name { font: var(--t-body-strong); min-height: 2.75rem; line-height: 22px; display: flex; align-items: flex-start; justify-content: center; }
.tile .badge { position: absolute; top: var(--s-2); inset-inline-start: var(--s-2); }
.tiles > li { width: 100%; }

/* ══════════ تطابق mahatta-react ══════════
   الخلفية، نقاطها، نسب الرئيسية وحركة المنتج من المرجع نفسه. */
#root { min-height: 100dvh; isolation: isolate; }
.site-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--reference-page); }
.site-backdrop > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--backdrop-glow); }
.site-backdrop > .dots { position: absolute; inset: 0; background-image: radial-gradient(oklch(var(--bc) / .2) .05rem, transparent 0); background-size: 2rem 2rem; }
.public, .shell, .legal { position: relative; z-index: 1; background: transparent; }
.auth { z-index: 1; background: var(--gray-1); }

.public-wrap { max-width: none; padding: 0 8px 8px; }
.public-header {
  position: sticky; top: 24px; z-index: 20; height: auto; min-height: 72px;
  margin: 0; padding: 16px 24px; border: 1px solid oklch(var(--bc) / .05);
  border-radius: 16px; background: var(--public-header-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.public-login:hover { background: var(--brand-teal); color: #fff; animation: lightning 2s ease-in-out infinite alternate; }
.public-main { gap: 56px; padding-bottom: 128px; }
.section { gap: 0; }
.section-head { margin-bottom: 0; }
.section-head h2 { font-family: var(--font-display); font-size: 22px; line-height: 30px; }
.public-footer { background: var(--public-footer-bg); }
.public-footer .inner { padding: 64px 24px; flex-direction: column; justify-content: center; gap: 24px; text-align: center; }
.public-footer nav { justify-content: center; }
@media (min-width: 768px) {
  .public-wrap { padding: 0 64px 64px; }
}
@media (min-width: 1280px) { .public-wrap { padding-inline: 128px; padding-bottom: 128px; } }
@keyframes lightning {
  0% { fill: oklch(64.354% .1092 197.924); filter: drop-shadow(0 0 .5rem oklch(64.354% .1092 197.924 / .5)) drop-shadow(0 0 .4rem oklch(64.354% .1092 197.924 / .4)); }
  to { fill: oklch(69.823% .1878 27.13); filter: drop-shadow(0 0 .2rem oklch(69.823% .1878 27.13 / .1)) drop-shadow(0 0 .1rem oklch(69.823% .1878 27.13 / .05)); }
}

/* بانر الفيديو (BannerVideo.jsx): عريض 8:3، وعلى الجوال 4:3 بنسخة مصمّمة له.
   لون الخلفية لون أول إطار في الفيديو كي لا يومض شيء قبل تحميل الغلاف. */
.banner { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 8 / 3; border-radius: 28px; background: #06282B; box-shadow: var(--shadow-2); }
.banner > canvas, .banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.banner > canvas { opacity: 0; transition: opacity .6s var(--ease-out); }
.banner > canvas[data-playing] { opacity: 1; }
.banner > img[data-hidden] { opacity: 0; }
.banner > img { transition: opacity .5s var(--ease-out); }
@media (max-width: 639.98px) { .banner { aspect-ratio: 4 / 3; border-radius: 20px; } }
.home-banner { margin: 16px 0 32px; }
@media (min-width: 768px) { .home-banner { margin: 32px 0 48px; } }

/* القيم الحرفية لحركة ProductSections.jsx المرجعية. */
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 4px; justify-items: center; align-items: start; margin: 48px 0 56px; }
.tile { gap: 0; }
.tile-img { width: 100%; border: 4px solid transparent; border-radius: 28px; transition: all 150ms cubic-bezier(.4, 0, .2, 1); }
.tile-img img { position: absolute; inset: 0; transition: all 150ms cubic-bezier(.4, 0, .2, 1); }
.tile:hover .tile-img, .tile:focus .tile-img { border-color: var(--brand-teal); box-shadow: none; transform: rotate(-1deg); }
.tile:hover .tile-img img, .tile:focus .tile-img img { transform: scale(1.05); }
.tile:active .tile-img { transform: rotate(-1deg); }
.tile .tile-name { margin-top: 8px; font-family: var(--font-display); }
.tile[aria-disabled="true"]:hover .tile-img, .tile[aria-disabled="true"]:focus .tile-img { border-color: transparent; box-shadow: none; transform: none; }
.tile[aria-disabled="true"]:hover .tile-img img, .tile[aria-disabled="true"]:focus .tile-img img { transform: none; }
@media (min-width: 640px) {
  .tiles { gap: 32px 24px; }
  .tile-img { border-radius: 40px; }
  .tile .tile-name { margin-top: 16px; font-size: 18px; }
}
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* محدد رمز البلد: الحقل الثاني هو العمود الأيسر فعلياً في واجهة RTL. */
.phone-country-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(142px, 180px); gap: var(--s-3); direction: rtl; align-items: start; }
.country-code-field { position: relative; direction: rtl; }
.country-code-trigger { min-height: var(--control); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 0 var(--s-3); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-2); }
.country-code-trigger:hover { border-color: var(--text-3); }
.country-code-trigger:focus-visible { border-color: var(--accent); box-shadow: var(--focus); }
.country-code-trigger[aria-invalid="true"] { border-color: var(--danger); }
.country-placeholder { color: var(--text-3); font-size: 13px; }
.country-chevron { margin-inline-start: auto; color: var(--text-3); }
.country-popover { position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; width: min(340px, 86vw); padding: var(--s-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-3); }
.country-search { width: 100%; height: 40px; padding: 0 var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface-2); }
.country-search:focus { border-color: var(--accent); box-shadow: var(--focus); }
.country-options { max-height: 280px; overflow-y: auto; margin-top: var(--s-2); overscroll-behavior: contain; }
.country-option { width: 100%; min-height: 44px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; padding: 7px var(--s-2); border-radius: var(--r-1); text-align: start; }
.country-option:hover, .country-option[aria-selected="true"] { background: var(--accent-soft); }
.country-option[data-active] { box-shadow: inset 0 0 0 2px var(--accent); }
.country-flag { font-size: 20px; }
.country-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-dial { color: var(--text-2); }
.country-empty { padding: var(--s-5); text-align: center; color: var(--text-2); }
.google-auth-button { text-align: center; }
@media (max-width: 479px) { .phone-country-row { grid-template-columns: minmax(0, 1fr) 132px; } }
.back-link { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-callout-strong); color: var(--accent-text); height: 36px; padding: 0 var(--s-3); border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--border); transition: background var(--dur-1), border-color var(--dur-1); }
.back-link:hover { background: var(--surface-3); border-color: var(--accent-soft); }
.back-link svg { width: 16px; height: 16px; }

/* صفحات الحساب */
.panel { display: flex; flex-direction: column; gap: var(--s-5); max-width: 820px; }
.panel-head h2 { font: var(--t-title-3); }
.panel-head p { font: var(--t-caption); color: var(--text-2); margin-top: 2px; }
.avatar-row { display: flex; align-items: center; gap: var(--s-4); }
.avatar-row .avatar-lg { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font: var(--t-title-3); flex: none; direction: ltr; }
.avatar-row .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.avatar-row .stack { gap: var(--s-1); }
.subsection { padding-top: var(--s-5); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s-4); }
.subsection h3 { font: var(--t-title-3); }
.subsection .sub-hint { font: var(--t-caption); color: var(--text-2); margin-top: calc(-1 * var(--s-3)); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.setting-row .stack { min-width: 0; }
.setting-row h3, .setting-row .lbl { font: var(--t-body-strong); }
.setting-row p { font: var(--t-caption); color: var(--text-2); }
.session-list { display: flex; flex-direction: column; }
.session { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.session:first-child { border-top: 0; }
.session .dev-icon { width: 40px; height: 40px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.session .dev-icon svg { width: 18px; height: 18px; }
.session .stack { flex: 1; min-width: 0; }
.session .dev { font: var(--t-body-strong); }
.session .meta { font: var(--t-caption); color: var(--text-2); }
.totp-setup { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; padding: var(--s-4); border-radius: var(--r-3); background: var(--surface-2); }
.totp-setup img { width: 176px; height: 176px; border-radius: var(--r-2); background: #fff; padding: 6px; }
.totp-setup code { font: var(--t-callout-strong); letter-spacing: .08em; direction: ltr; padding: 6px 10px; border-radius: 8px; background: var(--surface-3); word-break: break-all; }

/* صفحة نصّية */
.prose { max-width: 640px; font: var(--t-body); line-height: 1.8; }
.prose h2 { font: var(--t-title-2); margin: var(--s-6) 0 var(--s-3); }
.prose h3 { font: var(--t-title-3); margin: var(--s-5) 0 var(--s-2); }
.prose p { margin: 0 0 var(--s-3); }
.prose ul { list-style: disc; padding-inline-start: var(--s-5); margin: 0 0 var(--s-3); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.legal { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: var(--s-10) var(--s-4); gap: var(--s-6); background: transparent; }
.legal .prose { width: 100%; }
/* while the text loads, the «back» button waits below the fold instead of jumping down when it arrives */
.legal-loading { min-height: 75dvh; }

/* ══════════ سبب الرفض داخل شارة الحالة: «مرفوض · ID خاطئ» ══════════ */
.chip:has(.chip-reasoned) { height: auto; min-height: 26px; padding-block: 4px; white-space: normal; border-radius: 13px; max-width: 100%; align-items: flex-start; }
.chip:has(.chip-reasoned)::before { margin-top: 5px; flex: none; }
/* الحالة ثم السبب تحتها: سبب طويل يلتفّ بعرض الشارة كلها، لا كلمةً في كل سطر بجانب الحالة */
.chip-reasoned { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: start; }
.chip-reasoned > span:first-child { white-space: nowrap; }
.chip-reason { font-weight: 400; font-size: 12px; line-height: 17px; opacity: .92; overflow-wrap: anywhere; }

/* ══════════ صورة الفئة المركّبة من صور منتجاتها ══════════ */
.cover-mosaic { position: absolute; inset: 0; display: grid; gap: 4px; padding: 4px; background: linear-gradient(135deg, rgb(2 161 165 / .14), rgb(252 195 0 / .16)); }
.cover-mosaic img { position: static !important; inset: auto !important; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 18px; }
@media (min-width: 640px) { .cover-mosaic { gap: 6px; padding: 6px; } .cover-mosaic img { border-radius: 28px; } }
.cover-mosaic[data-count="2"] { grid-template-columns: 1fr 1fr; }
.cover-mosaic[data-count="3"] { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
.cover-mosaic[data-count="3"] img:first-child { grid-row: 1 / 3; }
.cover-mosaic[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tile:hover .cover-mosaic img, .tile:focus .cover-mosaic img { transform: scale(1.03); }

/* ══════════ صفحة الصيانة ══════════ */
.maint { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: var(--s-10) var(--s-4); }
.maint-card {
  width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center;
  padding: var(--s-10) var(--s-8); border-radius: 32px; background: var(--material-strong); border: 1px solid var(--border);
  box-shadow: var(--shadow-3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.maint-card h1 { font: var(--t-title-1); margin: 0; }
.maint-card > p { font: var(--t-body); color: var(--text-2); margin: 0; max-width: 40ch; }
.maint-card .maint-note { font: var(--t-caption); color: var(--text-3); }
.maint-art { position: relative; width: 140px; height: 120px; margin-block: var(--s-2); }
.maint-art .gear { position: absolute; fill: none; stroke-width: 5; stroke-linejoin: round; }
.maint-art .gear-lg { width: 96px; height: 96px; inset-inline-start: 0; top: 0; stroke: var(--brand-teal); fill: rgb(2 161 165 / .1); animation: maint-spin 9s linear infinite; }
.maint-art .gear-sm { width: 58px; height: 58px; inset-inline-end: 0; bottom: 0; stroke: var(--brand-amber); fill: rgb(252 195 0 / .14); animation: maint-spin 6s linear infinite reverse; }
@keyframes maint-spin { to { transform: rotate(360deg); } }
.maint-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: var(--r-full); background: var(--warning-soft); color: var(--warning-text); font: var(--t-caption-strong); }
.maint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-amber); box-shadow: 0 0 0 0 rgb(252 195 0 / .6); animation: maint-pulse 1.8s ease-out infinite; }
@keyframes maint-pulse { to { box-shadow: 0 0 0 10px rgb(252 195 0 / 0); } }
.maint-progress { width: 100%; max-width: 260px; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.maint-progress span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-teal), var(--brand-amber)); animation: maint-bar 2.4s var(--ease-out) infinite; }
@keyframes maint-bar { from { transform: translateX(160%); } to { transform: translateX(-260%); } }
@media (max-width: 480px) { .maint-card { padding: var(--s-8) var(--s-5); border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .maint-art .gear, .maint-dot, .maint-progress span { animation: none; } }

/* ══════════ إيداع USDT: عنوان خاص بالعميل ══════════ */
.deposit { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; padding-block: var(--s-2); }
.field-label .opt { font: var(--t-caption); color: var(--text-3); font-weight: 400; }

/* ══════════ الحركة — نظام واحد مع لوحة الإدارة (src/ui/motion.jsx) ══════════
   تشرح تغيّر الحالة ولا تزيّن؛ transform وopacity فقط؛ «تقليل الحركة» يُطفئها أو يحوّلها إلى تلاشٍ. */
:root {
  --ease-spring: linear(0, .25 6%, .55 13%, .78 21%, .91 30%, .97 40%, .995 55%, 1);
  --dur-4: 480ms; --shift: 8px; --stagger: 30ms; --press: .97;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-4: 0ms; --shift: 0px; --stagger: 0ms; --press: 1; } }

.page-transition { display: flex; flex-direction: column; gap: inherit; min-width: 0; }

/* البطاقات تدخل بتتابع قصير عند أول ظهور، والصورة تميل نحو المؤشّر عند التحويم */
.tiles { animation: none; }
.tiles > * { animation: tile-in var(--dur-3) var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 16) * var(--stagger)); }
@keyframes tile-in { from { opacity: 0; transform: translateY(var(--shift)); } }
.tile-img img { transition: transform var(--dur-3) var(--ease-out); }
.tile:hover .tile-img img { transform: scale(1.05) translate(var(--px, 0), var(--py, 0)); }
.tile:active .tile-img { transform: scale(var(--press)); }

/* قيمة تغيّرت (الرصيد بعد شراء أو حوالة): وميض هادئ مرّة واحدة */
.num-flash { animation: num-flash 1.2s var(--ease-out); border-radius: 6px; }
@keyframes num-flash { 0%, 20% { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 4px transparent; } }

/* شارة الحالة تتغيّر أمام العميل */
.chip-changed { animation: chip-in var(--dur-4) var(--ease-spring); }
@keyframes chip-in { from { opacity: 0; transform: scale(.88); } }

/* علامة الصح المرسومة */
.success-check { color: var(--success); flex: none; }
.toast .success-check { color: #4CC46A; }
.buy-done .success-check { margin-bottom: var(--s-2); }

/* سعر الصرف الثابت في نموذج شام كاش */
.rate-note { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--accent-soft); color: var(--accent-text); font: var(--t-callout); }
.rate-note b { font-weight: 600; }

/* إيداع USDT وصل والورقة مفتوحة */
.deposit-arrived { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r-3); background: var(--success-soft); color: var(--success-text); font: var(--t-callout); text-align: start; }

/* الورقة: فتح بنابض، والخلفية تتبع الإصبع أثناء السحب */
.sheet { animation-timing-function: var(--ease-spring); animation-duration: var(--dur-4); }
.scrim[data-dragging="true"] { animation: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .tiles > *, .chip-changed { animation: none; }
  .tile:hover .tile-img img { transform: none; }
  .num-flash { animation: num-flash-still 1.2s linear; }
  @keyframes num-flash-still { 0%, 20% { background: var(--accent-soft); } 100% { background: transparent; } }
}

/* مراجع طويلة (معاملة USDT: 66 خانة) تلتفّ داخل البطاقة بدل أن تدفع الصفحة جانبياً */
.ref-wrap { overflow-wrap: anywhere; word-break: break-all; min-width: 0; }

/* حوار الشراء: السعر تغيّر قبل التأكيد */
.price-changed { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--warning-soft, #FFF4D6); color: var(--warning-text, #7A5400); font: var(--t-callout); }
.price-changed svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }

/* ───────── أهداف لمس 44px على الجوال (WCAG 2.5.5 / إرشادات آبل) ─────────
   على الحاسوب تبقى الأحجام المدمجة؛ على الشاشات اللمسية الضيقة يكبر كل ما يُضغط. */
@media (max-width: 768px), (pointer: coarse) {
  .control .affix-btn { height: 44px; min-width: 44px; padding: 0 var(--s-3); }
  .otp { gap: 6px; }
  .otp > input { flex: 0 1 46px; min-width: 44px; height: 52px; }
  .segmented > button { height: 44px; }
  .instruction .copy-btn { height: 44px; padding: 0 var(--s-4); }
  .nav-item { height: 46px; }
  .icon-btn-sm { width: 44px; height: 44px; }
  .chip-btn, .of-radios > button { min-height: 44px; }
  .auth-links a, .public-footer nav a, .link { display: inline-flex; align-items: center; min-height: 44px; }
  .ui-btn-sm { --h: 44px; }
  .back-link { height: 44px; }
  .cat-band-back { min-height: 44px; }
  .switch { min-height: 44px; }
  .control { min-height: 48px; }
  a:has(> .logo-lockup) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ───────── حقول الرقم والتاريخ: بلا أسهم المتصفّح ولا علبة 23px داخل الحقل ───────── */
.control input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.control input[type="number"]::-webkit-inner-spin-button, .control input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.control input[type="date"] { min-height: calc(var(--control) - 2px); font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
.control input[type="date"]::-webkit-date-and-time-value { text-align: end; }
.control input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; padding: 6px; margin-inline-start: 4px; border-radius: 6px; }
.control input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--surface-3); }
:root[data-theme="dark"] .control input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .control input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } }

/* عناوين طويلة وعناوين محافظ لا تتجاوز عرض الورقة على الشاشات الضيقة */
.sheet, .sheet-body { min-width: 0; }
.instruction > span { min-width: 0; overflow-wrap: anywhere; }
.deposit { width: 100%; min-width: 0; }

/* شعار وسيلة الدفع المولَّد حين لا توجد صورة */
.tile-img .method-art { position: absolute; inset: 0; border-radius: inherit; }
.tile-img .method-art .cat-art-glyph { font-size: 34px; }

/* تاريخ من ثلاث قوائم: اليوم · الشهر · السنة */
.date-parts { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: var(--s-2); }
.date-parts > .field { gap: 0; }
.date-parts .field-error { display: none; }

/* ══════════ معلومات التحويل (عناصر يرتّبها فريق المتجر لكل وسيلة) ══════════ */
.pay-blocks { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; min-width: 0; }
.pay-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pay-block[data-type="qr"], .pay-block[data-type="image"] { align-items: center; text-align: center; }
.pay-label { font: var(--t-caption-strong); color: var(--text-2); }
.pay-text { font: var(--t-body); line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.pay-note { font: var(--t-callout); line-height: 1.7; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: rgb(252 195 0 / .14);
  border: 1px solid rgb(252 195 0 / .35); color: var(--text); white-space: pre-line; }
.pay-copy { width: 100%; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  background: var(--surface-2); border: 1px solid var(--border); text-align: start; cursor: pointer; transition: background var(--dur-1), border-color var(--dur-2); }
.pay-copy:hover { background: var(--surface-3); }
.pay-copy[data-copied] { border-color: var(--success); }
.pay-value { flex: 1; min-width: 0; font: 600 14px/20px var(--font); overflow-wrap: anywhere; color: var(--text); }
.pay-value[dir="ltr"] { font: 500 13px/19px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .02em; }
.pay-copy-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font: var(--t-caption-strong); color: var(--accent-text); }
.pay-copy-tag > svg { width: 14px; height: 14px; }
.pay-qr { width: 180px; height: 180px; border-radius: 20px; padding: 10px; background: #fff; box-shadow: 0 0 0 1px var(--border), var(--shadow-2); }
.pay-image img { max-width: min(100%, 360px); border-radius: var(--r-3); box-shadow: 0 0 0 1px var(--border); }
.deposit .pay-blocks { text-align: start; }
@media (max-width: 899.98px) { .pay-copy { min-height: 52px; } }

/* جلسة فتحها مشرف من لوحة الإدارة: شريط واضح لا يُنسى، مع الخروج بضغطة */
.staff-banner { position: sticky; top: 0; z-index: 31; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4);
  background: linear-gradient(90deg, #FCC300, #FFD84D); color: #1D1D1F; font: var(--t-callout); }
.staff-banner > svg { width: 18px; height: 18px; flex: none; }
.staff-banner-exit { flex: none; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-full); background: #1D1D1F; color: #fff; font: var(--t-caption-strong); }
.staff-banner-exit:hover { background: #000; }
/* على الجوال: الشريط بارتفاع ثابت وسطر واحد، والشريط العلوي يلتصق تحته (لا فوقه) فيبقى زرّ القائمة والرصيد ظاهرين */
@media (max-width: 899.98px) {
  .staff-banner { top: 0; height: 44px; padding-block: 0; font: var(--t-caption); }
  .staff-banner > .grow { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .staff-banner-exit { height: 30px; }
  .staff-banner + .topbar { top: 44px; }
  body:has(.staff-banner) .toast-live { top: calc(env(safe-area-inset-top) + var(--topbar-h, 56px) + 44px + var(--s-2)); }
}

/* ══════════ مظهر عناصر معلومات التحويل (يختاره فريق المتجر لكل عنصر) ══════════
   المسافة بين العناصر والمحاذاة العامة من الطريقة، وكل عنصر يغيّر محاذاته ومقاس نصّه ووزنه ولونه وتباعد أسطره
   وإطاره والمسافة قبله وبعده وبين عنوانه وقيمته. بلا اختيار تبقى القيم الافتراضية. */
.pay-blocks { gap: var(--pb-gap, var(--s-3)); }
.pay-blocks[data-align="center"] > .pay-block:not([data-align]) { align-items: center; text-align: center; }
.pay-blocks[data-align="end"] > .pay-block:not([data-align]) { align-items: flex-end; text-align: end; }
.pay-block { margin-block: var(--pb-before, 0) var(--pb-after, 0); gap: var(--pb-label-gap, 6px); padding: var(--pb-pad, 0); }
.pay-block[data-align="start"] { align-items: flex-start; text-align: start; }
.pay-block[data-align="center"] { align-items: center; text-align: center; }
.pay-block[data-align="end"] { align-items: flex-end; text-align: end; }
.pay-block[data-align="justify"] { align-items: stretch; text-align: justify; text-align-last: start; }
.pay-block[data-align] .pay-copy { width: auto; max-width: 100%; }
.pay-block[data-align="justify"] .pay-copy { width: 100%; }
.pay-block[data-label-align="start"] > .pay-label { align-self: flex-start; text-align: start; }
.pay-block[data-label-align="center"] > .pay-label { align-self: center; text-align: center; }
.pay-block[data-label-align="end"] > .pay-label { align-self: flex-end; text-align: end; }
.pay-block[data-label-align="justify"] > .pay-label { align-self: stretch; }
.pay-block[data-size] :is(.pay-text, .pay-note, .pay-value) { font-size: var(--pb-fs); }
.pay-block[data-size="xs"] { --pb-fs: 12px; }
.pay-block[data-size="sm"] { --pb-fs: 13.5px; }
.pay-block[data-size="md"] { --pb-fs: 15px; }
.pay-block[data-size="lg"] { --pb-fs: 18px; }
.pay-block[data-size="xl"] { --pb-fs: 22px; }
.pay-block[data-size="2xl"] { --pb-fs: 28px; }
.pay-block[data-weight="regular"] :is(.pay-text, .pay-note, .pay-value) { font-weight: 400; }
.pay-block[data-weight="medium"] :is(.pay-text, .pay-note, .pay-value) { font-weight: 500; }
.pay-block[data-weight="bold"] :is(.pay-text, .pay-note, .pay-value) { font-weight: 700; }
.pay-block[data-lh="tight"] :is(.pay-text, .pay-note) { line-height: 1.3; }
.pay-block[data-lh="normal"] :is(.pay-text, .pay-note) { line-height: 1.6; }
.pay-block[data-lh="relaxed"] :is(.pay-text, .pay-note) { line-height: 1.9; }
.pay-block[data-lh="loose"] :is(.pay-text, .pay-note) { line-height: 2.3; }
.pay-block[data-tone="muted"] :is(.pay-text, .pay-note, .pay-value) { color: var(--text-2); }
.pay-block[data-tone="accent"] :is(.pay-text, .pay-note, .pay-value) { color: var(--accent-text); }
.pay-block[data-tone="success"] :is(.pay-text, .pay-note, .pay-value) { color: var(--success-text); }
.pay-block[data-tone="warning"] :is(.pay-text, .pay-note, .pay-value) { color: var(--warning-text, #7A5A00); }
.pay-block[data-tone="danger"] :is(.pay-text, .pay-note, .pay-value) { color: var(--danger-text); }
.pay-block[data-frame="soft"] { padding: var(--pb-pad, var(--s-3) var(--s-4)); border-radius: var(--r-3); background: var(--surface-2); }
.pay-block[data-frame="outline"] { padding: var(--pb-pad, var(--s-3) var(--s-4)); border-radius: var(--r-3); border: 1px solid var(--border-strong); }

/* ══════════ إيقاع المسافات في صفحات الحساب ══════════
   كل كتلة في الصفحة (البانر، العنوان، البحث، الفئات، الجداول، البطاقات) تفصلها المسافة نفسها: --page-gap
   (24px على الحاسوب، 20px على الجوال). لا هوامش إضافية فوقها تجعل فراغاً أكبر من غيره، وداخل كل قسم
   مسافة أصغر ثابتة (--section-gap) بين عنوانه ومحتواه. */
.content { --page-gap: var(--s-6, 24px); --section-gap: var(--s-5, 20px); gap: var(--page-gap); }
@media (max-width: 1023.98px) { .content { --page-gap: var(--s-5, 20px); --section-gap: var(--s-4, 16px); } }
.content .page-transition { gap: var(--page-gap); }
.content .page-transition > * { margin-block: 0; }
.content .page-head { margin-bottom: 0; min-height: 0; }
.content .tiles { margin: 0; }
.content .section, .content .section:has(> .cat-band) { gap: var(--section-gap); }
.content .section > * { margin-block: 0; }
.content .page-transition > .section + .section { margin-top: calc(var(--page-gap) * .5); }
/* البحث بعرض مريح، على سطر العنوان نفسه في الشاشات العريضة لا يُفرد له سطر بفراغين */
.content .page-transition > .control-search { width: 100%; max-width: 480px; }
@media (max-width: 639.98px) { .content .page-transition > .control-search { max-width: none; } }
/* البانر والفئة المفتوحة يبدآن الصفحة: لا فراغ زائد فوقهما */
.content .page-transition > .banner:first-child, .content .page-transition > .cat-band:first-child { margin-top: 0; }