/* ============================================================================
   menu-theme.css — ثوب «منيو العرض» لكل صفحات المتجر
   ----------------------------------------------------------------------------
   🔴 [عهد 2026-09-12] «ابغا المتجر كامل صفحاته حتى نقاطي تجي بموجده ونفس اللون
      والتصميم الجديد… وطور النسخة بشكل أعمق ودقيق وسلس للجوال والتابلت».
      قبله كان الثوب على صفحة المنتجات وحدها (`shop-menu.css`)، فصفحة الدفع
      والتتبّع والحساب بلونٍ وخطٍّ آخر.

   ⚠️ الفرق عن `shop-menu.css`: ذاك **خاصّ بالكتالوج** (البطاقة القلّابة والشبكة
      وشريط «جديدنا» وأدوات الشراء). هذا هو **المشترك**: اللوحة والخطوط والخلفية
      والترويسة والأزرار والبطاقات والحقول والتبويبات والتذييل.
   ⇒ صفحة المنتجات تحمل الصنفين معاً (`class="shop-menu sr-menu-theme"`)، وقواعد
      المشترك مكرّرةٌ هناك بنفس القيم فلا تتعارض.

   🧷 الاستعمال: `<html class="sr-menu-theme">` + ربط الملف **بعد** `store.css`
      (يتغلّب عليه بالترتيب وبالتخصيص).
   ⛔ لا تعتمد على `body.light-mode` وحده: سكربت ما-قبل-الرسم يضع `light-mode`
      على `<html>`، وstore.css يعرّف اللوحة على الاثنين — فنكتب الاثنين هنا أيضاً.
   ============================================================================ */

/* ── 🔤 خطوط الهوية (نفس theme-unified.css في المنيو) ─────────────────────── */
@font-face { font-family: 'Biome W01 Black'; src: url('../brand/fonts/Biome-W01-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Poppins';          src: url('../brand/fonts/Poppins-Regular.otf') format('opentype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Baloo Bhaijaan 2'; src: url('../brand/fonts/BalooBhaijaan2.ttf') format('truetype'); font-weight: 400 800; font-display: swap; }

/* ── 🎨 اللوحة — ليلاً (افتراضي المتجر) ─────────────────────────────────── */
html.sr-menu-theme {
  --bg: #1d1b19;
  --bg-pearl-a: rgba(241, 212, 136, 0.07);
  --bg-pearl-b: rgba(134, 207, 166, 0.05);
  --card: #282420;
  --bg-2: #211d1a;
  --border: #3a3530;
  --text: #f0ece5;
  --muted: #b6b0a5;
  --gold: #f1d488;
  --gold-dark: #d8b061;
  --gold-deep: #d8b061;
  --open: #86cfa6;
  --closed: #ef9f9f;
  --star: rgba(255, 255, 255, 0.85);
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  --radius: 16px;
  --sr-font: 'Poppins', 'Baloo Bhaijaan 2', sans-serif;
  --sr-font-logo: 'Biome W01 Black', 'Poppins', sans-serif;
}
html.sr-menu-theme.light-mode,
html.sr-menu-theme body.light-mode {
  --bg: #f7f7fa;
  --bg-pearl-a: rgba(252, 218, 76, 0.10);
  --bg-pearl-b: rgba(150, 208, 165, 0.09);
  --card: #ffffff;
  --bg-2: #ffffff;
  --border: #e7e5ef;
  --text: #4a4654;
  --muted: #8f8a9c;
  --gold: #c79236;
  --gold-dark: #a87a2a;
  --gold-deep: #a87a2a;
  --open: #4f9c72;
  --closed: #c0563f;
  --star: rgba(120, 110, 150, 0.55);
  --shadow: 0 4px 18px rgba(90, 80, 130, 0.07);
}

/* ── الخلفية: لؤلؤ + نجوم ─────────────────────────────────────────────────
   التدرّج على `html` لا `body`: لوحة النجوم (z-index:-1) تُرسم بينهما، وخلفيةٌ
   على body كانت ستُخفيها (نفس علّة `shop-menu.css`). */
html.sr-menu-theme {
  background:
    radial-gradient(1200px 620px at 12% -12%, var(--bg-pearl-a), transparent 62%),
    radial-gradient(980px 540px at 88% 6%,  var(--bg-pearl-b), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
/* ⚠️ كل صفحةٍ تحمل في رأسها `<style>html.light-mode{background:#fdf8ee}</style>` **بعد**
   رابط هذا الملف، وتخصيصهما متساوٍ ⇒ كانت تغلبه. الصنفان معاً يرفعان التخصيص. */
html.sr-menu-theme.light-mode {
  background:
    radial-gradient(1200px 620px at 12% -12%, var(--bg-pearl-a), transparent 62%),
    radial-gradient(980px 540px at 88% 6%,  var(--bg-pearl-b), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
html.sr-menu-theme body { background: transparent; color: var(--text); }
html.sr-menu-theme #stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background: transparent; }

/* ── 🔤 الخطّ مفروضٌ على كل عنصر (كالمنيو) ────────────────────────────────
   ⛔ المستثنى: أيقونات Font Awesome/SVG، والشعار `.brand__en` بخطّه. */
html.sr-menu-theme body,
html.sr-menu-theme body *:not(i):not([class*="fa-"]):not(.fa):not(.brand__en):not(.wordmark) { font-family: var(--sr-font) !important; }
html.sr-menu-theme body .brand__en,
html.sr-menu-theme body .wordmark { font-family: var(--sr-font-logo) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   الترويسة — نفس ترويسة المنيو (شعار + اسم الصفحة + أزرار دائرية)
   يدعم الشكلين: `.topbar > .nav` (الجديد) و`.store-top` (صفحات لم تُحوَّل بعد).
   ════════════════════════════════════════════════════════════════════════════ */
html.sr-menu-theme .topbar,
html.sr-menu-theme .store-top {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 10%, transparent);
  padding: 0;
}
html.sr-menu-theme .topbar .nav,
html.sr-menu-theme .store-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(1200px, 100% - 24px); margin: 0 auto; padding: 14px 24px; box-sizing: border-box;
}
html.sr-menu-theme .topbar .brand,
html.sr-menu-theme .store-top .brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none; }
html.sr-menu-theme .brand__en { font-weight: 900; font-size: 1.18rem; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; color: var(--text); }
html.sr-menu-theme .brand__ar { font-size: 0.8rem; color: var(--muted); opacity: .85; font-weight: 700; }
/* الشكل القديم: `<b>اسم الصفحة</b><span>وصف</span>` */
html.sr-menu-theme .store-top .brand b { font-size: 1.02rem; font-weight: 800; }
html.sr-menu-theme .store-top .brand span { display: block; font-size: .74rem; color: var(--muted); }
html.sr-menu-theme .store-top .brand img { width: 34px; height: 34px; border-radius: 10px; }

/* أزرار الترويسة الدائرية */
html.sr-menu-theme .top-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
html.sr-menu-theme .sr-hbtn,
html.sr-menu-theme .top-actions .btn.icon {
  display: inline-grid; place-items: center; flex: 0 0 auto; position: relative;
  width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
  color: var(--text); font-size: 1rem;
  background: color-mix(in srgb, var(--gold) 16%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
  box-shadow: var(--shadow); -webkit-tap-highlight-color: transparent;
  transition: transform .25s, border-color .25s, background .25s;
}
html.sr-menu-theme .sr-hbtn:hover,
html.sr-menu-theme .top-actions .btn.icon:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 70%, var(--border)); }
html.sr-menu-theme .sr-hbtn:focus-visible,
html.sr-menu-theme .top-actions .btn.icon:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* الزرّ النصّي في الترويسة (مثل «المتجر») = قرصٌ ذهبيّ خفيف */
html.sr-menu-theme .top-actions .btn:not(.icon) {
  border-radius: 999px; padding: 9px 16px; font-weight: 700;
  background: color-mix(in srgb, var(--gold) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border));
  color: var(--text); box-shadow: var(--shadow);
}
/* 🌐 زرّ اللغة — مستطيلٌ مدوّر شفاف كالمنيو. ⛔ ولا `position` (لا يطفو أبداً). */
/* 🌐 زرّ اللغة — **بنفس لون زرّ الوضع ودرجته** [عهد 2026-09-12: «زر تبديل المود
   وزر تبديل اللغة درجة اللون تختلف… خلّها نفس بعض»]. كان شفافاً بإطارٍ رماديّ
   بينما إخوته أقراصٌ ذهبية، فبدا واحدٌ على كريميّ وآخرُ على أبيض صافٍ.
   ⛔ ولا `position` — لا يطفو أبداً. */
html.sr-menu-theme #langBtn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: auto; min-width: 44px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
  color: var(--text); box-shadow: var(--shadow); opacity: 1; cursor: pointer;
  font-weight: 700; transform: none; position: static;
  transition: transform .25s, border-color .25s, background .25s;
}
html.sr-menu-theme #langBtn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 70%, var(--border)); }
html.sr-menu-theme #langBtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 767px) { html.sr-menu-theme #langBtn { height: 38px; padding: 0 12px; } }
@media (max-width: 400px) { html.sr-menu-theme #langBtn { height: 36px; padding: 0 10px; min-width: 40px; } }
/* 🌙/☀️ أيقونة الوضع بقناع SVG كالمنيو (لا أيقونة خطّ) */
html.sr-menu-theme #themeBtn {
  --sr-ic-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.2 14.6A8.4 8.4 0 0 1 9.4 3.8a8.4 8.4 0 1 0 10.8 10.8z'/%3E%3C/svg%3E");
  --sr-ic-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Cpath d='M12 2.2v2.4M12 19.4v2.4M2.2 12h2.4M19.4 12h2.4M5.1 5.1l1.7 1.7M17.2 17.2l1.7 1.7M5.1 18.9l1.7-1.7M17.2 6.8l1.7-1.7'/%3E%3C/svg%3E");
}
html.sr-menu-theme #themeBtn > i,
html.sr-menu-theme #themeBtn > svg { display: none; }
html.sr-menu-theme #themeBtn::after {
  content: ""; width: 20px; height: 20px; background: var(--gold);
  -webkit-mask: var(--sr-ic-sun) center / contain no-repeat;
          mask: var(--sr-ic-sun) center / contain no-repeat;
}
html.sr-menu-theme.light-mode #themeBtn::after {
  width: 18px; height: 18px; background: var(--gold-dark);
  -webkit-mask-image: var(--sr-ic-moon); mask-image: var(--sr-ic-moon);
}

/* ════════════════════════════════════════════════════════════════════════════
   المحتوى: الحاوية · البطاقات · الأزرار · الحقول · التبويبات
   ════════════════════════════════════════════════════════════════════════════ */
html.sr-menu-theme main.container,
html.sr-menu-theme .home-main { width: min(1200px, 100% - 24px); margin-inline: auto; padding-inline: 0; padding-top: 20px; }
html.sr-menu-theme main.container { max-width: none; }

html.sr-menu-theme .card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow);
}
html.sr-menu-theme h1, html.sr-menu-theme h2, html.sr-menu-theme h3 { color: var(--text); }
html.sr-menu-theme h3 > i, html.sr-menu-theme h2 > i { color: var(--gold); }
html.sr-menu-theme a { color: var(--gold-deep); }

/* الأزرار = أقراص المنيو الذهبية */
html.sr-menu-theme .btn {
  border-radius: 999px; padding: 11px 18px; font-weight: 700;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  box-shadow: none; transition: transform .2s, border-color .2s, background .2s;
}
html.sr-menu-theme .btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
html.sr-menu-theme .btn.gold,
html.sr-menu-theme .add-btn,
html.sr-menu-theme .pay-fallback-btn {
  background: var(--gold); border: 1px solid var(--gold); color: #111; font-weight: 800;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--gold) 35%, transparent);
}
html.sr-menu-theme .btn.danger { border-color: var(--closed); color: var(--closed); background: transparent; }
html.sr-menu-theme .link-btn { color: var(--gold-deep); }

/* الحقول = حقل بحث المنيو */
html.sr-menu-theme .input,
html.sr-menu-theme input[type="text"], html.sr-menu-theme input[type="tel"],
html.sr-menu-theme input[type="email"], html.sr-menu-theme input[type="search"],
html.sr-menu-theme select, html.sr-menu-theme textarea {
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border));
  background: var(--card); color: var(--text); font-weight: 700;
}
html.sr-menu-theme .input:focus,
html.sr-menu-theme input:focus, html.sr-menu-theme select:focus, html.sr-menu-theme textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}
html.sr-menu-theme label { color: var(--text); }

/* التبويبات (حسابي) = أقراص المنيو الذهبية */
html.sr-menu-theme .tabs {
  background: transparent; border: none; padding: 0; gap: 8px; flex-wrap: wrap;
}
html.sr-menu-theme .tabs .tab {
  flex: 1 1 auto; border-radius: 999px; padding: 9px 16px;
  background: transparent; border: 1px solid transparent; color: var(--muted); font-weight: 700;
}
html.sr-menu-theme .tabs .tab:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
html.sr-menu-theme .tabs .tab.on {
  background: var(--gold); border-color: var(--gold); color: #111; font-weight: 900;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--gold) 35%, transparent);
}

/* التذييل = تذييل المنيو */
html.sr-menu-theme .st-foot,
html.sr-menu-theme .legal {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); margin-top: auto;
}
html.sr-menu-theme .st-social a,
html.sr-menu-theme .footer-icons a {
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--text); background: var(--card); border: 1px solid var(--border);
  box-shadow: none; transition: .25s;
}
html.sr-menu-theme .st-social a:hover,
html.sr-menu-theme .footer-icons a:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); transform: translateY(-3px); box-shadow: var(--shadow); }
html.sr-menu-theme .st-home { border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--gold-deep); }
html.sr-menu-theme .st-copy { color: var(--muted); }

/* ════════════════════════════════════════════════════════════════════════════
   📱 الجوال والتابلت — أهداف لمسٍ أكبر وحوافّ لا تلتصق
   ⚠️ الحاوية `100% - 24px` تُبقي ١٢ من كل جانب على أضيق شاشة؛ والحشوة الرأسية
      بـ`padding-block` وحدها كي لا تُصفَّر الجوانب.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  html.sr-menu-theme .topbar .nav,
  html.sr-menu-theme .store-top { padding: 18px 36px; }
  html.sr-menu-theme .brand__en { font-size: 1.35rem; }
  html.sr-menu-theme .brand__ar { font-size: 0.92rem; }
}
@media (max-width: 767px) {
  html.sr-menu-theme .topbar .nav,
  html.sr-menu-theme .store-top { padding: 12px 16px; gap: 10px; width: 100%; }
  html.sr-menu-theme .top-actions { gap: 7px; }
  html.sr-menu-theme .sr-hbtn,
  html.sr-menu-theme .top-actions .btn.icon { width: 38px; height: 38px; }
  html.sr-menu-theme .top-actions .btn:not(.icon) { padding: 8px 12px; font-size: .85rem; }
  html.sr-menu-theme .brand__ar { white-space: normal; line-height: 1.2; }
  html.sr-menu-theme main.container,
  html.sr-menu-theme .home-main { width: 100%; padding-inline: 12px; }
  /* أهداف اللمس: لا زرّ أقصر من ٤٤ */
  html.sr-menu-theme .btn { min-height: 44px; }
  html.sr-menu-theme .tabs .tab { min-height: 44px; }
  html.sr-menu-theme .input,
  html.sr-menu-theme input, html.sr-menu-theme select { min-height: 46px; font-size: 16px; }  /* ١٦ تمنع تكبير iOS التلقائي */
}
@media (max-width: 400px) {
  html.sr-menu-theme .brand__en { font-size: 1.05rem; letter-spacing: 1.2px; }
  html.sr-menu-theme .sr-hbtn,
  html.sr-menu-theme .top-actions .btn.icon { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html.sr-menu-theme * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}