/* ============================================================
   Raretium — نظام التصميم: النحاس المصهور 🔥
   ============================================================
   الفلسفة: معدن مصهور يُسكب ثم يبرد.

   النحاس لا يبدو ساخناً إلا بجوار شيء بارد — لذلك الظلال
   والآبار الغائرة تميل إلى بنفسجي شديد البرودة (--cold)،
   ويبقى النحاس وحده مصدر الحرارة في الصفحة.

   التوقيع البصري: «الدرز المصهور» (.seam) — خيط معدن مضيء
   ينزل مع عمود الصفحة، ساطع حيث سُكب للتو ويبرد كلما نزل.
   ============================================================ */

:root{
  /* ── الخلفيات (باذنجاني شبه أسود، دافئ) ── */
  --void:      #120A10;   /* الخلفية العميقة */
  --surface:   #1A0F16;   /* البطاقات */
  --surface-2: #221520;   /* البطاقة عند التحويم */
  --raised:    #2A1926;   /* عناصر بارزة */

  /* ⚠️ اللون البارد ليس لوناً جديداً في الهوية بل أداة تباين.
     يُستعمل في الظلال والآبار الغائرة وحدها. بدونه يبدو النحاس
     برتقالياً مسطّحاً، ومعه يبدو معدناً ساخناً. */
  --cold:      #0B0710;

  /* ── الخطوط الفاصلة (دافئة، لا رمادية) ── */
  --line:        rgba(244,236,228,.08);
  --line-2:      rgba(244,236,228,.14);
  --line-copper: rgba(232,104,60,.30);

  /* ── النحاس المصهور — قلب الهوية (لا يُغيَّر) ── */
  --copper-hi:  #FFB07A;
  --copper:     #F07E45;
  --copper-deep:#E8683C;
  --copper-dark:#B84A28;
  --molten: linear-gradient(120deg, #FFB07A 0%, #F07E45 50%, #E8683C 100%);

  /* الدرز: يبرد كلما نزل — من لحظة السكب إلى المعدن البارد */
  --seam: linear-gradient(to bottom,
            rgba(255,176,122,0) 0%,
            #FFB07A 8%,
            #F07E45 34%,
            #B84A28 70%,
            rgba(184,74,40,0) 100%);

  /* ── النصوص (عاجية دافئة) ── */
  --ink:    #F4ECE4;
  --body:   #C9BDB3;
  --muted:  #94867C;
  --faint:  #6B5F57;

  /* ── ألوان الحالة ── */
  --green:  #4ADE80;
  --red:    #F0654F;
  --amber:  #FFC96B;

  /* ── أبعاد ── */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --maxw:      1160px;
  --header-h:  68px;

  /* ── الحركة ── */
  --ease:     cubic-bezier(.22,.9,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast: .18s var(--ease);
  --med:  .32s var(--ease);

  /* ── الظلال (باردة عمداً) ── */
  --sh-sm: 0 2px 8px rgba(11,7,16,.5);
  --sh-md: 0 10px 30px rgba(11,7,16,.55);
  --sh-lg: 0 24px 60px rgba(11,7,16,.65);
  --sh-copper: 0 10px 34px rgba(232,104,60,.22);

  /* ── الخطوط ── */
  --f-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-body:    'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* ⚠️⚠️ للاتيني والأرقام **فقط**: IBM Plex Mono لا يحتوي حرفاً
     عربياً واحداً. أي نص عربي يأخذ هذا الخط يسقط إلى خط بديل لا
     يصل الحروف، فتظهر «الأسعار» مفكّكة: ا ل أ س ع ا ر.
     للعناوين الفرعية العربية استخدم --f-display. */
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:dark;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body{
  background: var(--void);
  color: var(--body);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* توهّج محيطي — الحرارة تأتي من أعلى اليمين حيث يُسكب المعدن */
body::before{
  content:"";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 520px at 88% -10%, rgba(232,104,60,.13), transparent 62%),
    radial-gradient(540px 440px at 4% 8%,   rgba(255,176,122,.05), transparent 58%),
    radial-gradient(820px 600px at 50% 118%, rgba(232,104,60,.055), transparent 64%);
}

/* ملمس حبيبي ناعم جداً — يعطي دفء المعدن المصبوب */
body::after{
  content:"";
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ⚠️⚠️ سمة hidden تُخفي عبر display:none في تنسيق المتصفح، وأي
   قاعدة display في ملفنا **تتفوّق عليها** فيبقى العنصر ظاهراً.

   وقع فعلاً: `.cart-loading{display:flex}` أبقى «نراجع سلّتك…»
   معروضاً فوق حالة «سلّتك فاضية»، والجافاسكربت يظن أنه أخفاه.
   ونفس الفخ ينتظر `.cart-grid` و`.admin-loading`
   و`.admin-custom-range` — كلها تُخفى بـ hidden ولها display.

   هذا السطر يجعل hidden تعني hidden، مهما أُضيف لاحقاً. */
[hidden]{ display: none !important; }

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ background: none; border: none; cursor: pointer; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  color: var(--ink);
  line-height: 1.22;
  font-weight: 700;
}
strong,b{ color: var(--ink); font-weight: 600; }
::selection{ background: rgba(232,104,60,.32); color: var(--ink); }

.wrap{
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: 22px; position: relative; z-index: 1;
}
.cur{ font-size: .68em; color: var(--muted); font-weight: 500; margin-inline-start: 2px; }
.molten{
  background: var(--molten);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* أرقام مجدولة — الأسعار والعدّادات لا ترقص عند التغيّر */
.cred-value, .orc-total, .oi-total, .ci-total, .rail-now,
.bp-now, .pay-amount, .order-number, .qty-num, .stat-value{
  font-variant-numeric: tabular-nums;
}

/* سكرول بار دافئ */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--cold); }
::-webkit-scrollbar-thumb{ background: #3A2632; border-radius: 8px; border: 2px solid var(--cold); }
::-webkit-scrollbar-thumb:hover{ background: #4E3441; }

:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 6px; }

/* ── رابط تخطّي (وصولية) ── */
.skip {
  position: fixed; top: -60px; inset-inline-start: 16px; z-index: 200;
  background: var(--copper); color: #2A1206;
  font-family: var(--f-display); font-weight: 700;
  padding: 10px 18px; border-radius: 12px; transition: top .25s;
}
.skip:focus{ top: 14px; }

/* ============================================================
   الجوهرة ◆ — التوقيع المتكرر (مسمار الدرز)
   ============================================================ */
.gem{
  display: inline-block; width: 8px; height: 8px; flex-shrink: 0;
  background: var(--molten);
  transform: rotate(45deg); border-radius: 2px;
  box-shadow: 0 0 10px rgba(232,104,60,.55);
}

/* ============================================================
   الدرز المصهور — التوقيع البصري
   ============================================================
   خيط معدن ينزل مع عمود المحتوى. يوضع على عنصر موضعه relative
   فيُرسم على حافته الابتدائية (اليمين في RTL).
   ⚠️ inset-inline-start لا left — الصفحة عربية.
   ============================================================ */
.seam{ position: relative; }
.seam::before{
  content:""; position: absolute;
  inset-inline-start: 0; top: 0; bottom: 0;
  width: 2px; border-radius: 2px;
  background: var(--seam);
  opacity: .85;
}

/* ============================================================
   الأزرار
   ============================================================ */
.btn, .btn-copper, .btn-ghost{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-display); font-weight: 600; font-size: .97rem;
  padding: 13px 24px; border-radius: 12px;
  cursor: pointer; white-space: nowrap; border: none;
  transition: transform var(--fast), box-shadow var(--med),
              background var(--med), border-color var(--med), color var(--fast);
}
.btn svg, .btn-copper svg, .btn-ghost svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* ⚠️ شبكة أمان: SVG سطري بلا مقاس صريح يتمدّد ليملأ حاويته.
   وقع فعلاً — سهم زر «تصفّح كل المناطق» صار بارتفاع البطاقة.
   أي قاعدة بصنف تتفوّق على هذه، فهي لا تكسر شيئاً قائماً. */
a > svg, button > svg, summary > svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* الزر الأساسي — لوح نحاس مصقول */
.btn-copper{
  position: relative; overflow: hidden;
  background: var(--molten); color: #2A1206;
  box-shadow: var(--sh-copper), inset 0 1px 0 rgba(255,255,255,.28);
}
/* ⚠️ التوقيع: ضوء يمرّ ببطء على المعدن المصقول.
   بطيء ومنخفض الشدة عمداً — لمعة كل ست ثوانٍ تُقرأ كخامة،
   ولمعة كل ثانية تُقرأ كإعلان. */
.btn-copper::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sheen 6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes sheen{
  0%, 72% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
.btn-copper:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(232,104,60,.34), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-copper:active{ transform: translateY(0); }
.btn-copper:disabled{ opacity: .55; cursor: default; transform: none; }
.btn-copper:disabled::after{ animation: none; }

/* الزر الثانوي — معدن بارد */
.btn-ghost{
  background: rgba(244,236,228,.04);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover{
  background: rgba(232,104,60,.10);
  border-color: var(--line-copper);
  color: var(--copper-hi);
  transform: translateY(-2px);
}

.btn-block{ width: 100%; }

/* ============================================================
   الهيدر
   ============================================================ */
.site-header{
  position: sticky; top: 0; z-index: 90;
  background: rgba(18,10,16,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--med), border-color var(--med), box-shadow var(--med);
}
/* خيط نحاسي تحت الهيدر — بداية الدرز، يشتدّ عند النزول */
.site-header::after{
  content:""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px;
  background: linear-gradient(to left, transparent, rgba(232,104,60,.5), transparent);
  opacity: 0; transition: opacity var(--med);
}
.site-header.scrolled{
  background: rgba(15,8,13,.90);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-md);
}
.site-header.scrolled::after{ opacity: 1; }

.header-in{
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: 22px; height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}

.brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 600; font-size: 1.16rem;
  color: var(--ink); letter-spacing: -.02em;
  transition: color var(--fast);
}
.brand b{ font-weight: 800; color: var(--copper); }
.brand:hover{ color: #fff; }
.brand-gem{ transition: transform var(--med), box-shadow var(--med); }
.brand:hover .brand-gem{ transform: rotate(135deg); box-shadow: 0 0 16px rgba(240,126,69,.8); }

/* روابط التنقّل — سطح المكتب */
.header-nav{ display: flex; align-items: center; gap: 2px; margin-inline-start: 12px; }
.header-nav a{
  position: relative; padding: 8px 13px; border-radius: 9px;
  font-size: .94rem; color: var(--body);
  transition: color var(--fast), background var(--fast);
}
.header-nav a:hover{ color: var(--ink); background: rgba(244,236,228,.05); }
.header-nav a::after{
  content:""; position: absolute; inset-inline: 13px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--molten);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--med);
}
.header-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }

.header-login{
  padding: 9px 17px; border-radius: 10px;
  font-family: var(--f-display); font-weight: 600; font-size: .92rem;
  color: var(--ink); border: 1px solid var(--line-2);
  transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.header-login:hover{
  border-color: var(--line-copper); background: rgba(232,104,60,.10); color: var(--copper-hi);
}

.header-account{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(244,236,228,.03);
  font-size: .92rem; color: var(--body);
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.header-account svg{ width: 17px; height: 17px; color: var(--copper); }
.header-account:hover{ border-color: var(--line-copper); color: var(--ink); background: rgba(232,104,60,.08); }
.acct-name{ max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.header-cart{
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 10px;
  background: rgba(232,104,60,.10);
  border: 1px solid var(--line-copper);
  color: var(--copper-hi);
  font-family: var(--f-display); font-weight: 600; font-size: .92rem;
  transition: background var(--fast), transform var(--fast), box-shadow var(--med);
}
.header-cart svg{ width: 18px; height: 18px; }
.header-cart:hover{ background: rgba(232,104,60,.18); transform: translateY(-1px); box-shadow: var(--sh-copper); }

.cart-count{
  min-width: 21px; height: 21px; padding-inline: 6px;
  display: grid; place-items: center;
  background: var(--molten); color: #2A1206;
  border-radius: 999px;
  font-family: var(--f-mono); font-weight: 700; font-size: .74rem;
  font-variant-numeric: tabular-nums;
}
.cart-count[data-count="0"]{ display: none; }
.cart-count.bump{ animation: bump .45s var(--ease-out); }
@keyframes bump{
  0%{ transform: scale(1); } 40%{ transform: scale(1.45); } 100%{ transform: scale(1); }
}

/* قائمة الجوال — <details> أصيل، يعمل بلا سطر جافاسكربت واحد */
.nav-mobile{ display: none; position: relative; }
.nav-mobile > summary{
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: border-color var(--fast), background var(--fast);
}
.nav-mobile > summary::-webkit-details-marker{ display: none; }
.nav-mobile > summary:hover{ border-color: var(--line-copper); background: rgba(232,104,60,.08); }
.nav-mobile > summary svg{ width: 20px; height: 20px; }
.nav-mobile[open] > summary{
  border-color: var(--line-copper); background: rgba(232,104,60,.12); color: var(--copper-hi);
}
.nav-mobile-panel{
  position: absolute; top: calc(100% + 12px); inset-inline-start: 0;
  min-width: 210px; padding: 8px; z-index: 95;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; gap: 2px;
  animation: menuIn .2s var(--ease-out);
}
@keyframes menuIn{ from{ opacity:0; transform: translateY(-8px); } to{ opacity:1; transform: none; } }
.nav-mobile-panel a{
  padding: 11px 14px; border-radius: 9px;
  font-size: .95rem; color: var(--body);
  transition: background var(--fast), color var(--fast);
}
.nav-mobile-panel a:hover{ background: rgba(232,104,60,.10); color: var(--copper-hi); }

/* ============================================================
   الفوتر
   ============================================================ */
.site-footer{
  margin-top: 100px; position: relative;
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, transparent, rgba(11,7,16,.6));
}
/* نهاية الدرز — المعدن يبرد تماماً عند أسفل الصفحة */
.site-footer::before{
  content:""; position: absolute; inset-inline: 0; top: -1px; height: 1px;
  background: linear-gradient(to left, transparent, rgba(232,104,60,.35), transparent);
}
.footer-in{ max-width: var(--maxw); margin-inline: auto; padding: 56px 22px 30px; }

.footer-top{
  display: grid; grid-template-columns: 1.5fr 2fr; gap: 48px;
  padding-bottom: 40px;
}
.footer-brand .brand{ font-size: 1.24rem; margin-bottom: 14px; }
.footer-brand p{ color: var(--muted); font-size: .94rem; line-height: 1.85; max-width: 42ch; }

.footer-links{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-col{ display: flex; flex-direction: column; gap: 11px; }
.footer-col h3{
  font-size: .78rem; font-weight: 600; color: var(--faint);
  margin-bottom: 3px;
}
.footer-col a{
  color: var(--body); font-size: .93rem; width: fit-content;
  transition: color var(--fast), transform var(--fast);
}
.footer-col a:hover{ color: var(--copper-hi); transform: translateX(-3px); }

.footer-bottom{
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: .87rem;
}
.badges{ display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }

/* شارات الدفع — نصية لا صوراً خارجية (CSP لا يسمح بنطاق البوابات) */
.pay-marks{ display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pay-mark{
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--line-2); background: rgba(244,236,228,.03);
  font-family: var(--f-mono); font-weight: 700; font-size: .68rem;
  letter-spacing: .06em; color: var(--muted);
}

/* ============================================================
   مسار التصفّح
   ============================================================ */
.breadcrumb{
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-top: 26px; font-size: .88rem; color: var(--faint);
}
.breadcrumb a{ color: var(--muted); transition: color var(--fast); }
.breadcrumb a:hover{ color: var(--copper-hi); }
.breadcrumb .current{ color: var(--ink); }

/* ============================================================
   ترويسة صفحة داخلية — مشتركة
   ============================================================ */
.page-head{ padding: 44px 0 30px; }
.page-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-size: .72rem; font-weight: 700;
  color: var(--copper); margin-bottom: 12px;
}
.page-head h1{ font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin-bottom: 10px; }
.page-head p{ color: var(--muted); font-size: 1.02rem; max-width: 56ch; }

/* ============================================================
   الحقول والنماذج
   ============================================================
   الحقل «بئر غائرة» في المعدن: ظل داخلي بارد يوحي بالعمق،
   وحدّ نحاسي يضيء عند التركيز — كأن المعدن سخن تحت الإصبع.
   ============================================================ */
.field{ margin-bottom: 18px; }
.field label{
  display: block; margin-bottom: 8px;
  font-family: var(--f-display); font-weight: 500; font-size: .89rem;
  color: var(--body);
}
.field input,
.field textarea,
.field select{
  width: 100%;
  padding: 13px 16px;
  background: var(--cold);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink); font-size: .98rem;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
  transition: border-color var(--fast), box-shadow var(--med), background var(--fast);
}
.field input::placeholder{ color: var(--faint); }
.field input:hover{ border-color: rgba(244,236,228,.2); }
.field input:focus{
  outline: none;
  border-color: var(--copper);
  background: #0E0812;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(232,104,60,.16);
}
.field input:autofill{ -webkit-text-fill-color: var(--ink); }

/* ============================================================
   صفحات الحساب: دخول · تسجيل · تأكيد
   ============================================================ */
.auth-page{
  min-height: calc(100dvh - var(--header-h) - 120px);
  display: grid; place-items: center;
  padding: 56px 22px 80px;
}
.auth-card{
  position: relative;
  width: 100%; max-width: 430px;
  padding: 38px 34px 30px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
/* الدرز يمرّ على حافة البطاقة */
.auth-card::before{
  content:""; position: absolute;
  inset-inline-start: 0; top: 12%; bottom: 12%;
  width: 2px; background: var(--seam);
}
/* توهّج علوي خافت — ضوء المعدن على الحافة */
.auth-card::after{
  content:""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(to left, transparent, rgba(255,176,122,.5), transparent);
}
.auth-head{ text-align: center; margin-bottom: 26px; }
.auth-head .gem{ margin-bottom: 16px; }
.auth-head h1{ font-size: 1.6rem; margin-bottom: 7px; }
.auth-head p{ color: var(--muted); font-size: .95rem; }

.auth-msg{
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: .91rem; line-height: 1.7; margin-bottom: 18px;
  border: 1px solid transparent;
}
.auth-msg.error{
  background: rgba(240,101,79,.10); border-color: rgba(240,101,79,.35); color: #FFA894;
}
.auth-msg.info{ background: rgba(232,104,60,.1); border: 1px solid rgba(232,104,60,.35); color: var(--copper-light, #FFB07A); }
.auth-hint{ color: var(--muted); font-size: .86rem; line-height: 1.8; margin: -6px 0 14px; }
.auth-terms{ color: var(--muted); font-size: .82rem; line-height: 1.8; margin-top: 12px; text-align: center; }
.auth-terms a{ color: var(--copper); }
.spinner-sm{ width: 15px; height: 15px; border-width: 2px; display: inline-block; vertical-align: -3px; margin-inline-end: 6px; }
.cart-toast{
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 12px;
  background: #1b1017; border: 1px solid rgba(232,104,60,.4);
  color: var(--text, #F4ECE4); font-size: .92rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: fadeIn .2s var(--ease-out);
}
.cart-toast a{ color: var(--copper); font-weight: 700; }
.auth-msg.success{
  background: rgba(74,222,128,.09); border-color: rgba(74,222,128,.32); color: #8DEBAF;
}

.auth-submit{ width: 100%; margin-top: 6px; padding-block: 14px; }

.auth-foot{
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center; font-size: .92rem; color: var(--muted);
}
.auth-foot a{ color: var(--copper-hi); font-weight: 600; transition: color var(--fast); }
.auth-foot a:hover{ color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

/* كود التأكيد وكود الاستعادة — حقل واحد بست خانات، لا ستة حقول.
   ⚠️ الفرق ليس ذوقاً: ستة حقول منفصلة تكسر اللصق من تطبيق البريد
   على الجوال، وتربك قارئات الشاشة، وتجعل `autocomplete="one-time-code"`
   بلا معنى (المتصفح يملأ حقلاً واحداً لا ستة).
   ⚠️ direction: ltr إلزامي — الأرقام تُقرأ يساراً حتى في صفحة عربية،
   وبدونه ينقلب ترتيب ما يكتبه العميل. */
.code-single{
  direction: ltr; text-align: center;
  font-family: var(--f-mono); font-size: 1.5rem; font-weight: 700;
  letter-spacing: .34em; text-indent: .34em;
  color: var(--copper-hi);
}
.code-single::placeholder{
  color: var(--faint); letter-spacing: .34em; font-weight: 400;
}

.resend-row{
  margin-top: 20px; text-align: center;
  font-size: .91rem; color: var(--muted);
}
.resend-row button{
  color: var(--copper-hi); font-weight: 600; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--fast);
}
.resend-row button:hover:not(:disabled){ color: var(--copper); }
.resend-row button:disabled{ color: var(--faint); cursor: default; text-decoration: none; }

/* ============================================================
   صفحة حسابي
   ============================================================ */
.account-page{ padding: 44px 0 80px; }
.account-header{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 32px;
}
.account-header h1{ font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 6px; }
.account-sub{ color: var(--muted); font-size: .97rem; }
.logout-link{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px;
  border: 1px solid var(--line-2); color: var(--muted);
  font-size: .9rem;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.logout-link svg{ width: 16px; height: 16px; }
.logout-link:hover{ border-color: rgba(240,101,79,.4); color: #FFA894; background: rgba(240,101,79,.08); }

.orders-list{ display: flex; flex-direction: column; gap: 12px; }
.order-row-card{
  position: relative;
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--med), background var(--med), transform var(--fast);
}
.order-row-card::before{
  content:""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 2px; background: var(--molten);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--med);
}
.order-row-card:hover{
  border-color: var(--line-copper); background: var(--surface-2);
  transform: translateX(-3px);
}
.order-row-card:hover::before{ transform: scaleY(1); }
.orc-main{ flex: 1; min-width: 0; }
.orc-number{
  font-family: var(--f-mono); font-weight: 700; font-size: 1.02rem;
  color: var(--ink); letter-spacing: .02em; margin-bottom: 4px;
}
.orc-meta{ color: var(--muted); font-size: .87rem; }
.orc-side{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.orc-total{ font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.orc-arrow{ width: 18px; height: 18px; color: var(--faint); flex-shrink: 0; transition: color var(--fast), transform var(--fast); }
.order-row-card:hover .orc-arrow{ color: var(--copper); transform: translateX(-3px); }

/* شارات الحالة — لون واحد لكل معنى، في كل الصفحات */
.orc-status, .order-status, .order-badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--f-display); font-weight: 600; font-size: .79rem;
  border: 1px solid transparent; white-space: nowrap;
}
.status-pending,   .s-pending  { background: rgba(255,201,107,.12); color: var(--amber);  border-color: rgba(255,201,107,.3); }
.status-paid,      .s-paid     { background: rgba(255,176,122,.12); color: var(--copper-hi); border-color: rgba(255,176,122,.3); }
.status-delivered, .s-delivered{ background: rgba(74,222,128,.12);  color: var(--green);  border-color: rgba(74,222,128,.3); }
.status-cancelled, .s-cancelled{ background: rgba(148,134,124,.12); color: var(--muted);  border-color: rgba(148,134,124,.28); }
.status-refunded,  .s-refunded { background: rgba(240,101,79,.12);  color: #FFA894;       border-color: rgba(240,101,79,.3); }

.account-empty, .cart-empty{
  text-align: center; padding: 70px 22px;
  background: var(--surface); border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
}
.ae-icon, .empty-icon{
  width: 74px; height: 74px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 22px;
  background: rgba(232,104,60,.07);
  border: 1px solid var(--line-copper);
  color: var(--copper);
}
.ae-icon svg, .empty-icon svg{ width: 34px; height: 34px; }
.account-empty h2, .cart-empty h2{ font-size: 1.28rem; margin-bottom: 9px; }
.account-empty p, .cart-empty p{ color: var(--muted); margin-bottom: 26px; }

/* أمان الحساب — إبطال الجلسات */
.account-security{
  margin-top: 44px; padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.account-security h2{ font-size: 1.06rem; margin-bottom: 8px; }
.account-security p{ color: var(--muted); font-size: .92rem; line-height: 1.85; margin-bottom: 18px; max-width: 62ch; }
.btn-danger-soft{
  padding: 11px 20px; border-radius: 10px;
  background: rgba(232,104,60,.12); color: var(--copper-hi);
  border: 1px solid var(--line-copper);
  font-family: var(--f-display); font-weight: 600; font-size: .92rem;
  transition: background var(--fast), border-color var(--fast);
}
.btn-danger-soft:hover{ background: rgba(232,104,60,.2); border-color: var(--copper-deep); }
.btn-danger-soft:disabled{ opacity: .55; cursor: default; }
.account-sec-msg{ display: block; margin-top: 13px; font-size: .9rem; color: var(--green); }
.account-sec-msg.is-error{ color: var(--red); }

/* نموذج تغيير كلمة المرور — يرث حقول صفحات الدخول (.field) ويضيّق العرض */
.account-form{ max-width: 420px; }
.account-form .field{ margin-bottom: 14px; }
.account-form .btn{ margin-top: 4px; }

/* ============================================================
   السلة
   ============================================================ */
.cart-page{ padding: 44px 0 80px; }
.cart-title{ font-size: clamp(1.6rem, 4.4vw, 2.2rem); margin-bottom: 28px; }

.cart-loading{
  display: flex; align-items: center; justify-content: center; gap: 13px;
  padding: 70px 0; color: var(--muted);
}
.spinner{
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--copper);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.cart-grid{
  display: grid; grid-template-columns: 1fr 340px;
  gap: 24px; align-items: start;
}
.cart-items{ display: flex; flex-direction: column; gap: 12px; }

.cart-item{
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  align-items: center; gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--med), background var(--med);
  animation: rowIn .3s var(--ease-out) both;
  animation-delay: var(--rx-delay, 0s);
}
@keyframes rowIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
.cart-item:hover{ border-color: var(--line-2); background: var(--surface-2); }
.ci-flag{
  width: 56px; height: 38px; border-radius: 7px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--cold); border: 1px solid var(--line);
  overflow: hidden;
}
.ci-flag img{ width: 100%; height: 100%; object-fit: cover; }
.ci-info{ min-width: 0; }
.ci-name{
  display: block; font-family: var(--f-display); font-weight: 600;
  color: var(--ink); font-size: 1rem; margin-bottom: 3px;
  transition: color var(--fast);
}
.ci-name:hover{ color: var(--copper-hi); }
.ci-unit{ color: var(--muted); font-size: .85rem; }

.ci-qty{
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--cold); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 3px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4);
}
.qty-btn{
  width: 31px; height: 31px; border-radius: 7px;
  display: grid; place-items: center; color: var(--body);
  transition: background var(--fast), color var(--fast);
}
.qty-btn svg{ width: 15px; height: 15px; }
.qty-btn:hover{ background: rgba(232,104,60,.16); color: var(--copper-hi); }
.qty-num{
  min-width: 30px; text-align: center;
  font-family: var(--f-mono); font-weight: 700; font-size: .95rem; color: var(--ink);
}
.ci-total{ font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); white-space: nowrap; }
.ci-remove{
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--faint);
  transition: background var(--fast), color var(--fast);
}
.ci-remove svg{ width: 16px; height: 16px; }
.ci-remove:hover{ background: rgba(240,101,79,.12); color: var(--red); }

/* الملخّص — لاصق على سطح المكتب */
.cart-summary, .order-summary{
  position: sticky; top: calc(var(--header-h) + 20px);
  padding: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-md);
}
.cart-summary h2, .order-summary h2{
  font-size: 1.1rem; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.summary-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 0; color: var(--body); font-size: .95rem;
}
.summary-total{
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.3rem; color: var(--ink);
}
.checkout-btn{ width: 100%; margin-top: 18px; padding-block: 15px; font-size: 1.02rem; }

.summary-perks, .buy-perks{
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.perk{
  display: flex; align-items: center; gap: 9px;
  color: var(--muted); font-size: .87rem;
}
.perk svg{ width: 15px; height: 15px; color: var(--copper); flex-shrink: 0; }

.cart-notice{
  margin-top: 20px; padding: 14px 18px;
  background: rgba(255,201,107,.09);
  border: 1px solid rgba(255,201,107,.3);
  border-radius: var(--radius-sm);
  color: var(--amber); font-size: .92rem;
}

/* ============================================================
   صفحة الطلب
   ============================================================ */
.order-page{ padding: 40px 0 80px; }
.order-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.order-label{
  font-family: var(--f-display); font-size: .72rem; font-weight: 700;
  color: var(--faint); margin-bottom: 6px;
}
.order-number{
  font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--ink); letter-spacing: .02em;
}

.order-pending-banner{
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; margin-bottom: 26px;
  background: rgba(255,201,107,.07);
  border: 1px solid rgba(255,201,107,.28);
  border-radius: var(--radius);
}
.opb-icon{
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,201,107,.13); color: var(--amber);
}
.opb-icon svg{ width: 21px; height: 21px; }
.opb-text{ display: flex; flex-direction: column; gap: 2px; }
.opb-text strong{ color: var(--amber); font-size: 1rem; }
.opb-text span{ color: var(--muted); font-size: .89rem; }

/* ── الحسابات المسلّمة: ذروة الرحلة ──
   ⚠️ هذه أهم لحظة في المتجر كله: العميل دفع، وهنا يعرف
   إن كان قد وثق في المكان الصحيح. تُعامَل كخزنة تُفتح. */
.delivered-section{
  padding: 28px; margin-bottom: 30px;
  background:
    radial-gradient(600px 220px at 88% -10%, rgba(74,222,128,.07), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(74,222,128,.26);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-md);
}
.delivered-head{ display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.delivered-icon{
  width: 50px; height: 50px; border-radius: 15px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.32);
  color: var(--green);
}
.delivered-icon svg{ width: 25px; height: 25px; }
.delivered-head h2{ font-size: 1.25rem; margin-bottom: 3px; }
.delivered-head p{ color: var(--muted); font-size: .91rem; }

.account-card{
  padding: 22px; margin-bottom: 14px;
  background: var(--cold);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.4);
}
.account-card-head{
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 15px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.acc-flag{ font-size: 1.35rem; line-height: 1; }
.acc-flag img{ width: 34px; height: 23px; border-radius: 4px; object-fit: cover; }
.acc-region{ font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: 1rem; }

.cred-row{ margin-bottom: 13px; }
.cred-label{
  display: block; margin-bottom: 7px;
  font-family: var(--f-display); font-size: .71rem; font-weight: 700;
  color: var(--faint);
}
.cred-value-box{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--fast);
}
.cred-value-box:hover{ border-color: var(--line-copper); }
.cred-value{
  /* ⚠️ direction: ltr إلزامي — بيانات الحساب لاتينية، وبلا هذا
     يقلب المتصفح ترتيب الرموز في نص عربي الاتجاه فيُنسخ باسورد
     خاطئ. والمحاذاة لليمين لتقع تحت عنوانها لا بعيداً عنه. */
  flex: 1; min-width: 0; direction: ltr; text-align: right;
  font-family: var(--f-mono); font-size: 1rem; font-weight: 500;
  color: var(--copper-hi); word-break: break-all;
}
.copy-btn{
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(232,104,60,.1); color: var(--copper);
  border: 1px solid var(--line-copper);
  transition: background var(--fast), color var(--fast), transform var(--fast);
}
.copy-btn svg{ width: 16px; height: 16px; }
.copy-btn:hover{ background: rgba(232,104,60,.2); transform: translateY(-1px); }
.copy-btn.copied{
  background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.4); color: var(--green);
}
/* ✓ يحلّ محل أيقونة النسخ لحظة النجاح — تأكيد لا لبس فيه */
.copy-btn.copied svg{ display: none; }
.copy-btn.copied::after{ content: "✓"; font-size: 1rem; font-weight: 700; }

.otp-btn{
  width: 100%; margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border-radius: 11px;
  background: rgba(232,104,60,.1);
  border: 1px solid var(--line-copper);
  color: var(--copper-hi);
  font-family: var(--f-display); font-weight: 600; font-size: .94rem;
  transition: background var(--fast), transform var(--fast), box-shadow var(--med);
}
.otp-btn svg{ width: 17px; height: 17px; }
.otp-btn:hover{ background: rgba(232,104,60,.2); transform: translateY(-2px); box-shadow: var(--sh-copper); }

.delivered-note{
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 18px; padding: 15px 18px;
  background: rgba(244,236,228,.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted); font-size: .89rem; line-height: 1.8;
}
.delivered-note svg{ width: 17px; height: 17px; color: var(--copper); flex-shrink: 0; margin-top: 3px; }

.order-grid{ display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; }
.order-items{
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.order-items h2{
  font-size: 1.1rem; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.oi-row{
  display: flex; align-items: center; gap: 15px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.oi-row:last-child{ border-bottom: none; padding-bottom: 0; }
.oi-flag{
  width: 48px; height: 33px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--cold); border: 1px solid var(--line); overflow: hidden;
}
.oi-flag img{ width: 100%; height: 100%; object-fit: cover; }
.oi-info{ flex: 1; min-width: 0; }
.oi-name{ font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: .98rem; }
.oi-unit{ color: var(--muted); font-size: .85rem; }
.oi-total{ font-family: var(--f-display); font-weight: 700; color: var(--ink); white-space: nowrap; }

.pay-btn{ width: 100%; margin-top: 16px; padding-block: 15px; font-size: 1.02rem; }
.pay-note{ margin-top: 11px; text-align: center; color: var(--muted); font-size: .83rem; }
.order-done{
  margin-top: 16px; padding: 13px; border-radius: var(--radius-sm);
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.3);
  color: var(--green); text-align: center;
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
}
.back-shop{
  display: block; margin-top: 18px; text-align: center;
  color: var(--muted); font-size: .9rem; transition: color var(--fast);
}
.back-shop:hover{ color: var(--copper-hi); }

/* ============================================================
   نافذة رمز ستيم (OTP)
   ============================================================ */
.otp-overlay{
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: 22px;
  background: rgba(8,4,10,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .2s var(--ease-out);
}
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
.otp-modal{
  position: relative;
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-lg);
  animation: modalIn .3s var(--ease-out);
}
@keyframes modalIn{ from{ opacity:0; transform: translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
.otp-close{
  position: absolute; top: 12px; inset-inline-end: 14px;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  color: var(--muted); font-size: 1.5rem; line-height: 1;
  transition: background var(--fast), color var(--fast);
}
.otp-close:hover{ background: rgba(244,236,228,.07); color: var(--ink); }
.otp-body{ padding: 34px 28px 28px; text-align: center; }
.otp-region-label{
  font-family: var(--f-display); font-size: .74rem; font-weight: 700;
  color: var(--copper); margin-bottom: 18px;
}
.otp-state h3{ font-size: 1.15rem; margin-bottom: 9px; }
.otp-state p{ color: var(--muted); font-size: .91rem; line-height: 1.8; }

.otp-spinner{
  width: 46px; height: 46px; margin: 0 auto 20px; border-radius: 50%;
  border: 3px solid var(--line-2);
  border-top-color: var(--copper);
  animation: spin .9s linear infinite;
}
.otp-timer{
  margin-top: 16px; font-family: var(--f-display); font-size: .84rem; color: var(--faint);
}

.otp-check{
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(74,222,128,.14);
  border: 1px solid rgba(74,222,128,.4);
  color: var(--green); font-size: 1.6rem; font-weight: 700;
  animation: pop .4s var(--ease-out);
}
@keyframes pop{ from{ transform: scale(.5); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
.otp-code-box{
  display: flex; align-items: center; gap: 11px;
  margin: 20px 0 10px; padding: 14px 16px;
  background: var(--cold);
  border: 1px solid var(--line-copper);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.5);
}
.otp-code{
  flex: 1; direction: ltr;
  font-family: var(--f-mono); font-size: 1.55rem; font-weight: 700;
  letter-spacing: .22em; color: var(--copper-hi);
}
.otp-copy{
  padding: 9px 16px; border-radius: 9px; flex-shrink: 0;
  background: rgba(232,104,60,.14); color: var(--copper-hi);
  border: 1px solid var(--line-copper);
  font-family: var(--f-display); font-weight: 600; font-size: .87rem;
  transition: background var(--fast);
}
.otp-copy:hover{ background: rgba(232,104,60,.24); }
.otp-code-hint{ font-size: .86rem; color: var(--muted); }
.otp-again, .otp-retry{
  margin-top: 20px; padding: 11px 20px; border-radius: 10px;
  background: rgba(244,236,228,.05); color: var(--body);
  border: 1px solid var(--line-2);
  font-family: var(--f-display); font-weight: 600; font-size: .9rem;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.otp-again:hover, .otp-retry:hover{
  border-color: var(--line-copper); color: var(--copper-hi); background: rgba(232,104,60,.1);
}
.otp-warn{
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,201,107,.13);
  border: 1px solid rgba(255,201,107,.4);
  color: var(--amber); font-size: 1.6rem; font-weight: 700;
}

/* ============================================================
   صفحة المنطقة
   ============================================================ */
.region-page{ padding: 26px 0 80px; }
.region-hero{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: start; }

.region-buy{
  padding: 30px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--sh-md);
  position: relative; overflow: hidden;
}
.region-buy::before{
  content:""; position: absolute; inset-inline-start: 0; top: 10%; bottom: 10%;
  width: 2px; background: var(--seam);
}
.region-identity{ display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.region-flag-lg{
  width: 92px; height: 62px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 2.6rem;
  background: var(--cold); border: 1px solid var(--line-2);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.region-flag-lg img{ width: 100%; height: 100%; object-fit: cover; }
.region-identity h1{ font-size: clamp(1.4rem, 3.6vw, 1.95rem); margin-bottom: 8px; }
.region-avail{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--green); font-size: .87rem; font-weight: 500;
}
.dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(74,222,128,.45); }
  70%{ box-shadow: 0 0 0 8px rgba(74,222,128,0); }
  100%{ box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.buy-box{
  padding: 24px;
  background: var(--cold);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 2px 12px rgba(0,0,0,.4);
}
.buy-price{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.bp-now{
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1;
  background: var(--molten);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bp-now .cur{
  font-size: .32em; color: var(--muted);
  -webkit-text-fill-color: var(--muted); margin-inline-start: 5px;
}
.bp-was{
  font-size: 1.1rem; color: var(--faint);
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.bp-badge{
  padding: 5px 12px; border-radius: 999px;
  background: rgba(74,222,128,.13); color: var(--green);
  border: 1px solid rgba(74,222,128,.32);
  font-family: var(--f-display); font-weight: 700; font-size: .8rem;
}
.buy-btn{ width: 100%; padding-block: 16px; font-size: 1.05rem; }

.region-info{
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.region-info h2{ font-size: 1.15rem; margin-bottom: 13px; }
.region-info p{ color: var(--body); line-height: 1.9; margin-bottom: 24px; }

.compare-link{
  display: flex; align-items: center; gap: 14px;
  padding: 17px 19px;
  background: rgba(232,104,60,.06);
  border: 1px solid var(--line-copper);
  border-radius: var(--radius);
  transition: background var(--med), border-color var(--med), transform var(--fast);
}
.compare-link:hover{ background: rgba(232,104,60,.13); border-color: var(--copper-deep); transform: translateY(-2px); }
.cl-icon{
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(232,104,60,.13); color: var(--copper);
}
.cl-icon svg{ width: 21px; height: 21px; }
.cl-text{ flex: 1; min-width: 0; }
.cl-text strong{ display: block; font-family: var(--f-display); font-size: .98rem; margin-bottom: 3px; }
.cl-text span{ color: var(--muted); font-size: .86rem; line-height: 1.6; }
.cl-arrow{ width: 18px; height: 18px; color: var(--copper); flex-shrink: 0; transition: transform var(--fast); }
.compare-link:hover .cl-arrow{ transform: translateX(-4px); }


/* ============================================================
   الأسئلة الشائعة — مشتركة بين الرئيسية وصفحة المنطقة
   ============================================================
   <details> عنصر أصيل: يفتح ويغلق بلا كود، ومحركات البحث
   تفهرس محتواه — بخلاف محتوى يُخفى وينتظر نقرة.
   ============================================================ */
.faq-list{ display: flex; flex-direction: column; gap: 10px; }
.faq-item{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--med), background var(--med);
}
.faq-item:hover{ border-color: var(--line-2); }
.faq-item[open]{ border-color: var(--line-copper); background: var(--surface-2); }
.faq-q{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px;
  cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  color: var(--ink);
  transition: color var(--fast);
}
.faq-q::-webkit-details-marker{ display: none; }
.faq-q:hover{ color: var(--copper-hi); }
.faq-chevron{
  width: 18px; height: 18px; flex-shrink: 0; color: var(--copper);
  transition: transform var(--med);
}
.faq-item[open] .faq-chevron{ transform: rotate(180deg); }
.faq-a{
  padding: 0 22px 20px;
  color: var(--body); font-size: .95rem; line-height: 1.95;
  max-width: 68ch;
}

/* ============================================================
   صفحة المنطقة — ما تحصل عليه وأسئلة الشراء
   ============================================================ */
.region-extra{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-top: 22px;
}
.region-includes, .region-faq{
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.region-includes h2, .region-faq h2{ font-size: 1.1rem; margin-bottom: 18px; }

.check-list{ list-style: none; display: flex; flex-direction: column; gap: 13px; }
.check-list li{
  position: relative; padding-inline-start: 30px;
  color: var(--body); font-size: .95rem; line-height: 1.75;
}
/* علامة صح مرسومة بالحدود — لا أيقونة ولا خط إضافي.
   ⚠️ border-left **حرفية** لا border-inline-start: علامة الصح
   شكل ثابت لا يتبع اتجاه القراءة. المنطقية تنقلب في RTL فتصير
   العلامة سهماً «‹». الموضع وحده منطقي (يتبع الاتجاه). */
.check-list li::before{
  content:""; position: absolute;
  inset-inline-start: 3px; top: 7px;
  width: 12px; height: 6px;
  border-left: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  transform: rotate(-45deg);
}

.region-faq .faq-item{ margin-bottom: 9px; background: var(--cold); }
.region-faq .faq-q{ padding: 14px 17px; font-size: .95rem; }
.region-faq .faq-a{ padding: 0 17px 15px; font-size: .91rem; }
.region-faq-more{
  display: inline-block; margin-top: 12px;
  color: var(--copper-hi); font-size: .91rem; font-weight: 600;
  transition: color var(--fast);
}
.region-faq-more:hover{ color: var(--copper); }

@media (max-width: 1000px){
  .region-extra{ grid-template-columns: 1fr; }
}

/* ============================================================
   صفحة الدفع
   ============================================================
   ⚠️ نموذج ميسر يُحقن داخل .mysr-form ويحمل تنسيقه معه.
   ننسّق ما **حول** النموذج فقط — أي تدخّل في داخله يكسر
   حقول بطاقة حيّة، والعميل يدفع فعلاً من هذه الصفحة.
   ============================================================ */
.pay-page{ max-width: 560px; padding: 44px 22px 80px; }
.pay-head{ text-align: center; margin-bottom: 26px; }
.pay-lock{
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 17px;
  display: grid; place-items: center;
  background: rgba(232,104,60,.1);
  border: 1px solid var(--line-copper);
  color: var(--copper);
}
.pay-lock svg{ width: 26px; height: 26px; }
.pay-head h1{ font-size: 1.6rem; margin-bottom: 8px; }
.pay-head p{ color: var(--muted); font-size: .95rem; }
.pay-head p strong{ font-family: var(--f-mono); color: var(--copper-hi); }

/* مؤشّر الرحلة — أين نحن الآن */
.pay-steps{
  display: flex; align-items: center; justify-content: center;
  gap: 8px; list-style: none; margin-bottom: 22px; flex-wrap: wrap;
}
.pay-step{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--faint); font-size: .85rem;
}
.pay-step-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--faint); flex-shrink: 0;
}
.pay-step.is-done{ color: var(--muted); border-color: var(--line-2); }
.pay-step.is-done .pay-step-dot{ background: var(--green); }
.pay-step.is-current{
  color: var(--copper-hi);
  border-color: var(--line-copper);
  background: rgba(232,104,60,.09);
}
.pay-step.is-current .pay-step-dot{
  background: var(--copper);
  box-shadow: 0 0 0 3px rgba(232,104,60,.22);
}

.pay-privacy{
  margin-top: 16px; text-align: center;
  color: var(--faint); font-size: .84rem; line-height: 1.75;
}

.pay-summary-bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 22px; margin-bottom: 22px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-copper);
  border-radius: var(--radius);
  box-shadow: var(--sh-md);
}
.pay-summary-bar > span:first-child{ color: var(--muted); font-size: .93rem; }
.pay-amount{
  font-family: var(--f-display); font-weight: 800; font-size: 1.7rem;
  background: var(--molten);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pay-amount .cur{ font-size: .38em; -webkit-text-fill-color: var(--muted); }

/* حاوية النموذج — إطار فقط، بلا مساس بالداخل */
.mysr-form{
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-md);
}

.pay-trust{
  display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap; margin-top: 22px;
}
.pay-trust-item{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: .86rem;
}
.pay-trust-item svg{ width: 15px; height: 15px; color: var(--copper); }

.pay-cancel{
  display: block; margin-top: 26px; text-align: center;
  color: var(--muted); font-size: .9rem; transition: color var(--fast);
}
.pay-cancel:hover{ color: var(--copper-hi); }

/* ============================================================
   الصفحات القانونية (الشروط · الضمان)
   ============================================================ */
.legal-wrap{ max-width: 780px; margin-inline: auto; padding: 52px 22px 80px; }
.legal-head{ text-align: center; margin-bottom: 40px; }
.legal-head h1{ font-size: clamp(1.7rem, 5vw, 2.4rem); margin-bottom: 12px; }
.legal-updated{
  font-family: var(--f-display); color: var(--faint); font-size: .84rem;
}

/* ⚠️ الملخّص أهم قرار في تصميم صفحة قانونية: أغلب الناس لا
   يقرؤون الوثيقة كاملة، فنضع خلاصتها في ثلاثة أسطر. الشرط
   المدفون كأنه غير مكتوب — وفي النزاع البنكي يسقط. */
.legal-summary{
  padding: 22px 24px; margin-bottom: 38px;
  background: rgba(232,104,60,.07);
  border: 1px solid var(--line-copper);
  border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.legal-summary::before{
  content:""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px; background: var(--molten);
}
.legal-summary h2{
  font-size: .78rem; font-family: var(--f-display); font-weight: 700;
  color: var(--copper); margin-bottom: 14px;
}
.legal-summary ul{ list-style: none; }
.legal-summary li{
  position: relative; padding: 6px 0; padding-inline-start: 26px;
  line-height: 1.8; color: var(--ink);
}
.legal-summary li::before{
  content:""; position: absolute; inset-inline-start: 4px; top: 15px;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--molten); transform: rotate(45deg);
}

.legal-section{ margin-bottom: 34px; }
.legal-section h2{
  font-size: 1.16rem; font-weight: 700; margin-bottom: 13px;
  display: flex; align-items: baseline; gap: 11px;
}
.legal-num{
  font-family: var(--f-mono); font-size: .78rem; font-weight: 700;
  color: var(--copper); opacity: .85;
}
.legal-section p{ line-height: 1.95; margin-bottom: 13px; color: var(--body); }
.legal-section ul{ padding-inline-start: 22px; line-height: 1.95; }
.legal-section li{ margin-bottom: 8px; }
.legal-section strong{ color: var(--copper-hi); font-weight: 600; }
.legal-note{
  border-inline-start: 3px solid var(--copper-deep);
  padding: 14px 18px; margin: 16px 0;
  background: rgba(244,236,228,.035);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
}
.legal-contact{
  margin-top: 50px; padding-top: 32px;
  border-top: 1px solid var(--line); text-align: center;
}
.legal-contact p{ color: var(--muted); margin-bottom: 18px; }

/* ============================================================
   صفحة التواصل
   ============================================================ */
.contact-wrap{ max-width: 640px; margin-inline: auto; padding: 52px 22px 80px; }
.contact-head{ text-align: center; margin-bottom: 36px; }
.contact-head h1{ font-size: clamp(1.7rem, 5vw, 2.3rem); margin-bottom: 12px; }
.contact-head p{ color: var(--muted); font-size: 1.03rem; line-height: 1.8; }

.channel{
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; margin-bottom: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color var(--med), background var(--med), transform var(--fast);
}
.channel:hover{
  border-color: var(--line-copper); background: rgba(232,104,60,.07);
  transform: translateX(-3px);
}
.channel-icon{
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.4rem;
  background: rgba(232,104,60,.09);
  border: 1px solid var(--line-copper);
}
.channel-body{ flex: 1; min-width: 0; }
.channel-body strong{
  display: block; font-family: var(--f-display); font-size: 1.02rem; margin-bottom: 3px;
}
.channel-body span{ color: var(--muted); font-size: .9rem; word-break: break-word; }

/* ⚠️ نطلب رقم الطلب صراحةً: أكثر ما يبطئ الدعم رسالة
   «طلبي ما وصل» بلا رقم — تضيع رسالتان قبل أن يبدأ الحل. */
.contact-tip{
  padding: 20px 22px; margin-top: 32px;
  background: rgba(232,104,60,.07);
  border: 1px solid var(--line-copper);
  border-radius: var(--radius-lg);
}
.contact-tip h2{
  font-size: .78rem; font-family: var(--f-display); font-weight: 700;
  color: var(--copper); margin-bottom: 12px;
}
.contact-tip ul{ padding-inline-start: 20px; line-height: 1.95; color: var(--body); }
.contact-tip strong{ color: var(--copper-hi); }

.contact-links{
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.contact-links a{ color: var(--muted); font-size: .93rem; transition: color var(--fast); }
.contact-links a:hover{ color: var(--copper-hi); }

/* ============================================================
   صفحات الحالة (404 · تنبيه الدفع)
   ============================================================ */
.state-page{
  min-height: calc(100dvh - var(--header-h) - 200px);
  display: grid; place-items: center;
  padding: 70px 22px;
  text-align: center;
}
.state-inner{ max-width: 480px; }
.state-code{
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(4.5rem, 15vw, 8rem); line-height: 1;
  background: var(--molten);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.state-icon{
  width: 74px; height: 74px; margin: 0 auto 24px; border-radius: 22px;
  display: grid; place-items: center;
  background: rgba(255,201,107,.09);
  border: 1px solid rgba(255,201,107,.3);
  color: var(--amber);
}
.state-icon svg{ width: 34px; height: 34px; }
.state-page h1{ font-size: clamp(1.4rem, 4vw, 1.9rem); margin-bottom: 14px; }
.state-page p{
  color: var(--muted); font-size: 1.04rem; line-height: 1.85;
  max-width: 44ch; margin: 0 auto 30px;
}
.state-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   الاستجابة للشاشات
   ============================================================ */
@media (max-width: 1000px){
  .cart-grid, .order-grid, .region-hero{ grid-template-columns: 1fr; }
  .cart-summary, .order-summary{ position: static; }
  .footer-top{ grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 860px){
  .header-nav{ display: none; }
  .nav-mobile{ display: block; }
  .header-in{ gap: 12px; }
  .cart-label{ display: none; }
  .acct-name{ display: none; }
  .header-account{ padding: 9px 11px; }
}

@media (max-width: 680px){
  :root{ --radius-lg: 18px; --radius-xl: 22px; }
  .wrap{ padding-inline: 16px; }

  .footer-links{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-in{ padding: 44px 16px 26px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 14px; }

  .auth-card{ padding: 30px 22px 24px; }

  /* السلة على الجوال: صفّان — البيانات فوق، التحكّم تحت */
  .cart-item{
    grid-template-columns: 48px 1fr auto;
    grid-template-areas:
      "flag info remove"
      "qty  qty  total";
    gap: 12px;
  }
  .ci-flag{ grid-area: flag; width: 48px; height: 33px; }
  .ci-info{ grid-area: info; }
  .ci-remove{ grid-area: remove; }
  .ci-qty{ grid-area: qty; justify-self: start; }
  .ci-total{ grid-area: total; justify-self: end; }

  .delivered-section{ padding: 20px 16px; }
  .account-card{ padding: 17px; }
  .order-items, .cart-summary, .order-summary, .region-buy, .region-info{ padding: 20px; }
  .region-flag-lg{ width: 74px; height: 50px; }
  .order-head{ gap: 12px; }
  .pay-trust{ gap: 14px; }
  .faq-q{ padding: 16px 18px; font-size: .95rem; }
  .faq-a{ padding: 0 18px 18px; }
  .region-includes, .region-faq{ padding: 20px; }
  .otp-body{ padding: 30px 20px 24px; }
  .otp-code{ font-size: 1.3rem; letter-spacing: .16em; }
}

/* ============================================================
   لا كتلة (prefers-reduced-motion) هنا — مقصود
   ============================================================
   أُزيلت بقرار صاحب المتجر: القاعدة الشاملة
   (*, *::before, *::after) كانت تقتل كل حركة في الموقع لدى
   أي زائر مفعّل عنده «تقليل الحركة» في نظامه — وهو مفعّل
   افتراضياً في إعدادات كثيرة — فتبدو الصفحة **متجمّدة**:
   الظهور التدريجي لا يعمل، ونبض النقاط يقف، بلا أي خطأ.
   ⚠️ لو أُعيدت لاحقاً: استهدف حركات بعينها، ولا تعمّم بـ `*`.
   ============================================================ */