/* =========================================================
   صفحةُ «حسابي» — بالرموز نفسِها التي تبني بطاقةَ المنتج، فلا تُقرأ الصفحةُ
   كأنّها من متجرٍ آخر. لا لونَ جديداً ولا نصفَ قطرٍ جديدٍ ولا مسافةً خارج السلّم.
   والوضعان (فاتح/غامق) يأتيان من `style.css` — فلا يُعاد تعريفُ لونٍ هنا.
   ========================================================= */

/* 🔴 `min-width:0` ليست زينةً: عنصرُ الشبكة أرضيّتُه `auto` = عرضُه الأقصى، فشريطُ
   التبويبات الأفقيُّ (544px) فرض عرضَه على العمود ثمّ على الصفحة كلِّها — وقِيس على
   جوّالٍ 390px فيضٌ 154px وبطاقةٌ مقصوصة (06/09/2026). والـ`overflow-x` لا يقصّ
   ما لم يُسمح للعنصر بالانكماش أصلاً. */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.woocommerce-account .woocommerce > * { min-width: 0; }

/* 🔴🔴🔴 **مقيّدةٌ بحال الدخول.** قاعدةُ العمودين (‏محتوى + قائمة) وُضعت لصفحة
   الحساب **بعد** الدخول. وصفحةُ الدخول لا قائمةَ فيها، فوقع قسمُ الدخول كلُّه داخل
   العمود الثاني (‏240px) وانضغط عموداه إلى 112 و118 بكسل — كلمةٌ في كلّ سطر.
   وقع فعلاً على شاشة المالك 06/09/2026. 🔑 ولم تكشفه لقطاتي لأنّي صوّرتُ صفحةَ
   الحساب **بعد الدخول** ولم أنظر إلى صفحة الدخول قطّ — تحقّقتُ من سلوكها لا شكلها. */
@media (min-width: 782px) {
  body.logged-in .woocommerce-account .woocommerce {
    grid-template-columns: 1fr 240px;
    align-items: start;
  }
  /* 🔴 الصفُّ يُثبَّت صراحةً لا يُترك للتموضع التلقائيّ: غلافُ تنبيهات ووكومرس
     يُوضع أوّلاً فيحتلّ (1,1)، فيهبط المحتوى إلى صفٍّ ثانٍ وتنضغط القائمة.
     قِيس فعلاً 06/09/2026: المحتوى y=1051 والقائمة عرضُها 72px. */
  /* 🔴🔴 وووكومرس يفرض على العنصرين `float` و`width: 30%/68%` من ورقته الافتراضيّة.
     داخل الشبكة يُهمَل الـ`float` **وتبقى النسبة** — فصارت القائمةُ 30% من عمودٍ
     عرضُه 240 = 72px، والمحتوى 68% من 728 = 495px. والرقمان مقيسان لا مقدَّران.
     ⇒ يُلغى العرضُ النسبيُّ صراحةً، فالعمودُ هو الذي يقرّر لا الوريث. */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }
  body.logged-in .woocommerce-notices-wrapper       { grid-column: 1 / -1; grid-row: 1; }
  body.logged-in .woocommerce-MyAccount-navigation  { grid-column: 2; grid-row: 2; position: sticky; top: var(--s6); }
  body.logged-in .woocommerce-MyAccount-content     { grid-column: 1; grid-row: 2; min-width: 0; }
}

/* القائمةُ الجانبيّة — أبوابٌ لا روابطُ نصّيّةٌ عائمة */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
/* 🔑 القالبُ الأمُّ يضيف هامشاً رأسيّاً لكلّ <li> فصار البندُ 94px بدل 46 (مقيس).
   والفراغُ في قائمةٍ من خمسة بنودٍ يقرأ فَتْقاً لا تنفّساً. */
/* 🔴 والمصدرُ مقيسٌ لا مقدَّر: `woocommerce-blocktheme-rtl.css` يضع
   `.woocommerce-MyAccount-navigation li{padding:.35em 0}` **فوق** حشوةِ الرابط،
   فيتراكم البندُ إلى ~94px بينما ارتفاعُه المرئيّ 44. ⇒ تُصفَّر حشوةُ البند
   ويُحمل الارتفاعُ على الرابط وحدَه — وبأرضيّةِ 44px لهدف اللمس. */
/* والخصوصيّةُ تُرفع بجدّ الصفحة لا بـ`!important`: قاعدةُ ووكومرس بخصوصيّةٍ
   مساويةٍ وورقتُها تُطبع بعد ورقتنا على هذه الصفحة، فكانت تفوز بـ16px سفليّة (مقيسة). */
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--s2) var(--s4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  /* 🔑 `box-sizing` صريحٌ هنا: بـ`content-box` صار الرابطُ 70px — 44 أرضيّةً
     **زائدَ** 24 حشوةً و2 حدّاً. والأرضيّةُ هدفُ لمسٍ لا ارتفاعٌ إضافيّ. */
  box-sizing: border-box;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background .15s, border-color .15s;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--surface-2); }
/* والبندُ غيرُ النشط يحمل حدّاً شفّافاً بلونٍ خفيفٍ لا عدماً — فتُقرأ القائمةُ
   عموداً واحداً لا روابطَ متناثرة، ويبقى الفرقُ مع النشط بيّناً. */
.woocommerce-MyAccount-navigation li:not(.is-active) a { border-color: var(--line); }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }
.woocommerce-MyAccount-navigation a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* الترحيب */
.sny-acc__hi { margin: 0 0 var(--s6); font-size: 1.05rem; line-height: 1.7; }
.sny-acc__hi-sub { display: block; color: var(--muted); font-size: .875rem; margin-top: var(--s1); }

/* ملاحظةُ صفحة البيانات */
.sny-acc-note {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .875rem; line-height: 1.65;
}

/* 🔑 حقلُ كلمة المرور في «بياناتي» يبقى — فمن أضاف بريداً قد يريد كلمةَ مرور.
   ولا يُخفى ما يعمل. */

@media (max-width: 781px) {
  .woocommerce-MyAccount-navigation ul {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: var(--s2);
    padding-bottom: var(--s2);
    scrollbar-width: thin;
  }
  .woocommerce-MyAccount-navigation a { white-space: nowrap; border-color: var(--line); background: var(--surface); }
}

/* ═══ محفظةُ العميل ونقاطُه — 06/09/2026 ═══════════════════════════════
   🔑 الرصيدُ رقمٌ ماليّ: يُطبع بأرقامٍ جدوليّة فلا ترقص الخاناتُ بين صفٍّ وصفّ،
      وبحجمٍ يفوق ما حوله لأنّه أوّلُ ما تبحث عنه العين. */
.sny-w__bal {
  display: grid; gap: var(--s1);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s6);
}
.sny-w__bal-l   { color: var(--muted); font-size: .875rem; }
.sny-w__bal-v   { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sny-w__bal-v small { font-size: .9rem; font-weight: 500; color: var(--muted); }
.sny-w__bal-sub { color: var(--muted); font-size: .875rem; }
.sny-w__card-v  { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.sny-w__empty { color: var(--muted); line-height: 1.7; }

/* الجدولُ يلفّ داخل حاويته — فلا تزحف الصفحةُ أفقيّاً على الجوّال */
.sny-w__tbl { width: 100%; border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; }
.sny-w__tbl thead th {
  text-align: start; font-weight: 700; color: var(--muted);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.sny-w__tbl td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.sny-w__tbl td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 🔑 والإشارةُ لا تُحمل على اللون وحدَه — `+`/`−` مطبوعان في النصّ نفسه،
   فيقرأهما مَن لا يميّز الأخضرَ من الأحمر. */
.sny-w__tbl .is-plus  { color: var(--jade, #14675E); font-weight: 700; }
.sny-w__tbl .is-minus { color: var(--muted); font-weight: 700; }

/* مفتاحُ التفضيل وملاحظتُه */
.sny-w__pref {
  margin-top: var(--s6);
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sny-w__pref label { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; line-height: 1.6; }
.sny-w__pref input[type="checkbox"] { inline-size: 20px; block-size: 20px; margin-top: 2px; flex: 0 0 20px; }
.sny-w__note { margin-top: var(--s3); color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.sny-w__due {
  margin-top: var(--s4); padding: var(--s4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); line-height: 1.8;
}
.sny-w__due small { color: var(--muted); }

/* ═══ نظامُ الإرجاع — 06/09/2026 ═══════════════════════════════════════ */
.sny-ret__h { margin: 0 0 var(--s4); font-size: 1.25rem; }
.sny-ret__card {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s4);
}
.sny-ret__head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; }
.sny-ret__id { font-weight: 700; }
/* 🔑 الحالةُ لا تُحمل على اللون وحدَه — النصُّ يقولها كاملةً، واللونُ يؤكّده */
.sny-ret__state {
  padding: 2px var(--s3); border-radius: 999px; font-size: .8125rem; font-weight: 700;
  border: 1px solid var(--line-strong);
}
.sny-ret__state.is-settled  { border-color: var(--jade, #14675E); color: var(--jade, #14675E); }
.sny-ret__state.is-rejected,
.sny-ret__state.is-cancelled { color: var(--muted); }
.sny-ret__meta, .sny-ret__due, .sny-ret__amt { margin: var(--s2) 0 0; font-size: .9rem; }
.sny-ret__due small, .sny-ret__amt small { color: var(--muted); }
.sny-ret__time { margin: var(--s3) 0 0; padding-inline-start: var(--s4); color: var(--muted); font-size: .875rem; line-height: 1.9; }
.sny-ret__note { color: var(--fg); }
.sny-ret__cancel { margin-top: var(--s3); }

.sny-ret__form fieldset {
  margin: var(--s4) 0; padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sny-ret__form legend { font-weight: 700; padding: 0 var(--s2); }
.sny-ret__item { display: flex; gap: var(--s2); align-items: center; min-height: 44px; line-height: 1.6; }
.sny-ret__item input { inline-size: 20px; block-size: 20px; flex: 0 0 20px; }
.sny-ret__item small { color: var(--muted); }
.sny-ret__form textarea.sny-login__in { resize: vertical; font-family: inherit; }

/* ═════════════════════════════════════════════════════════════════════════
   لوحةُ «حسابي» — سجلُّ عضو (‏06/09/2026)
   لا لونَ ولا خطَّ ولا نصفَ قطرٍ خارج `style.css`. الذهبُ `--gold` هو المفصل،
   والأرقامُ جدوليّةٌ كما في سعر المنتج، والحركةُ لحظةٌ واحدةٌ لا مؤثّراتٌ متناثرة.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── الصدر ─────────────────────────────────────────────────────────────── */
.sny-hub__head { margin-bottom: var(--s8); }

.sny-hub__name {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  /* 🔑 700 لا 800: لخطّ Expo وجهان فقط (Book 400 · Bold 700)، ووزنٌ لا وجهَ له
     يُزوّره المتصفّحُ بتغليظٍ صناعيٍّ يُفسد حوافَ الحروف العربية. */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sny-hub__meta {
  margin: var(--s2) 0 0;
  color: var(--muted);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.sny-hub__dot { margin: 0 var(--s2); opacity: .6; }

/* الأرقامُ الثلاثة: سطرٌ واحدٌ بفواصلَ ذهبيّةٍ رفيعة — لا بطاقات */
.sny-hub__figures {
  display: flex; flex-wrap: wrap;
  margin: var(--s6) 0 0; padding: 0;
  /* الفواصلُ ذهبيّةٌ خافتة — المفصلُ من لغة العلامة لا رماديٌّ محايد */
  border-block-start: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
}
.sny-hub__fig {
  padding: var(--s4) var(--s6) var(--s4) 0;
  border-inline-end: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
  padding-inline-end: var(--s6);
  margin-inline-end: var(--s6);
}
.sny-hub__fig:last-child { border-inline-end: 0; margin-inline-end: 0; }
.sny-hub__fig dt { margin: 0 0 var(--s1); color: var(--muted); font-size: .8125rem; }
.sny-hub__fig dd {
  margin: 0;
  font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.sny-hub__fig dd .woocommerce-Price-currencySymbol,
.sny-hub__fig dd .sny-sar { opacity: .75; }

/* مسطرةُ النقاط — قياسٌ لا زخرفة */
.sny-hub__meter { margin: var(--s6) 0 0; max-width: 44ch; }
.sny-hub__meter-t { display: block; font-size: .875rem; line-height: 1.7; color: var(--muted); }
.sny-hub__meter-t strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.sny-hub__meter-bar {
  display: block; margin-top: var(--s2);
  block-size: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden;
}
.sny-hub__meter-bar > span { display: block; block-size: 100%; background: var(--gold); }

/* نداءُ الفعل */
.sny-hub__cta { margin: var(--s6) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.sny-hub__btn {
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding: 0 var(--s8);
  background: var(--gold); color: var(--badge-fg);
  border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.sny-hub__btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.sny-hub__btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.sny-hub__cta-note { color: var(--muted); font-size: .875rem; }

/* ── الأبوابُ صفوفٌ لا مربّعات ─────────────────────────────────────────── */
.sny-rows {
  display: grid;
  border-block-start: 1px solid var(--line);
}
.sny-row {
  display: grid;
  grid-template-columns: 24px minmax(6rem, max-content) 1fr 20px;
  align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s2);
  border-block-end: 1px solid var(--line);
  color: var(--fg); text-decoration: none;
  /* 🔑 لا انتقالَ على `padding`: كان مكتوباً ولا يُستعمل (‏لا تتغيّر الحشوةُ عند
     المرور)، وتحريكُ خاصّيّةِ تخطيطٍ يُجبر المتصفّحَ على إعادة الحساب في كلّ إطار.
     والحركةُ هنا في السهم وحدَه — `transform` لا غير. */
  transition: background .15s ease;
}
.sny-row:hover { background: var(--surface-2); }
.sny-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius-sm); }
.sny-row__i { inline-size: 24px; block-size: 24px; color: var(--gold); }
.sny-row__t { font-weight: 700; }
.sny-row__s { color: var(--muted); font-size: .875rem; }
.sny-row__go {
  inline-size: 20px; block-size: 20px; color: var(--line-strong);
  transition: transform .15s ease, color .15s ease;
}
.sny-row:hover .sny-row__go { color: var(--gold); transform: translateX(-4px); }

@media (max-width: 599px) {
  .sny-row { grid-template-columns: 24px 1fr 20px; row-gap: var(--s1); }
  .sny-row__s { grid-column: 2 / 4; }
}

/* ── شريطُ المساعدة ───────────────────────────────────────────────────── */
.sny-hub__help {
  margin: var(--s8) 0 0; padding-block-start: var(--s4);
  border-block-start: 1px solid var(--line);
  color: var(--muted); font-size: .875rem; line-height: 1.9;
}
.sny-hub__help a { color: var(--fg); text-underline-offset: 3px; }
.sny-hub__help a:hover { color: var(--gold); }
.sny-hub__help-note { display: block; font-size: .8125rem; }

/* ── الحركة: لحظةٌ واحدةٌ عند الفتح، وتُحترم رغبةُ تقليل الحركة ────────── */
@media (prefers-reduced-motion: no-preference) {
  .sny-hub__fig { animation: sny-rise .5s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--i) * 70ms); }
  @keyframes sny-rise { from { opacity: 0; transform: translateY(8px); } }
}

/* 🔴 على الجوّال كانت الأرقامُ الثلاثة تلتفّ 2+1، فيبقى الثالثُ وحيداً وفاصلُه
   معلّقاً في الفراغ. ⇒ شريطٌ من ثلاثة أعمدةٍ متساويةٍ لا صفٌّ مرن. */
@media (max-width: 599px) {
  .sny-hub__figures {
    display: grid; grid-template-columns: repeat(3, 1fr);
  }
  .sny-hub__fig {
    padding: var(--s3) 0;
    margin-inline-end: 0;
    padding-inline-end: var(--s3);
    text-align: start;
  }
  .sny-hub__fig dt { font-size: .75rem; }
  .sny-hub__fig dd { font-size: 1.25rem; }
}