/* ============================================================
   🎨  هوية دهب البصرية — المصدر الوحيد للألوان والأشكال
   تبني عليه جميع صفحات المشروع (قائمة الطعام، لوحة الإدارة، الأدوات)،
   فيظهر كل عنصر بالشكل ذاته تماماً في كل مكان.
   ============================================================ */

:root {

  /* ---------- الألوان ---------- */
  --gold: #d4a849;
  --gold-light: #f4d97a;
  --gold-deep: #a67c2e;
  --black: #0f0f0f;
  --char: #1a1a1a;
  --cream: #f5f0e6;
  --red: #ef4444;
  --green: #22c55e;

  /* ---------- درجات الخط الذهبي (بدلاً من ست عشرة درجة عشوائية) ---------- */
  --line-faint: rgba(212, 168, 73, 0.15);  /* فواصل داخلية */
  --line-soft: rgba(212, 168, 73, 0.25);   /* حدود البطاقات */
  --line: rgba(212, 168, 73, 0.40);        /* حدود الحقول */
  --line-strong: var(--gold);              /* الإطارات الرئيسية */

  /* ---------- الأسطح ---------- */
  --surface: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  --surface-gold: linear-gradient(160deg, rgba(212, 168, 73, 0.06), rgba(0, 0, 0, 0.25));
  --surface-sunken: rgba(0, 0, 0, 0.40);
  --surface-header: linear-gradient(90deg, rgba(212, 168, 73, 0.10), transparent);
  --wash-gold: rgba(212, 168, 73, 0.10);
  --line-bright: rgba(212, 168, 73, 0.50);

  /* ---------- خلفية الصفحة: التوهّج والنسيج ذاتهما في جميع الصفحات ---------- */
  --bg-glow:
    radial-gradient(circle at 20% 15%, rgba(212, 168, 73, 0.07), transparent 38%),
    radial-gradient(circle at 80% 85%, rgba(212, 168, 73, 0.055), transparent 40%);
  --bg-texture:
    repeating-linear-gradient(45deg, rgba(212, 168, 73, 0.015) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(-45deg, rgba(212, 168, 73, 0.015) 0 2px, transparent 2px 28px);

  /* ---------- الزوايا (سُلّم واحد بدلاً من ثماني قيم) ---------- */
  --r-pill: 999px;
  --r-2xs: 6px;   /* أصغر عنصر: أسهم السعر */
  --r-xs: 10px;   /* أزرار صغيرة، شارات */
  --r-sm: 12px;   /* حقول الإدخال */
  --r-md: 16px;   /* الأزرار والبطاقات الداخلية */
  --r-lg: 20px;   /* بطاقات الأقسام */
  --r-xl: 24px;   /* الإطارات الرئيسية */

  /* ---------- الظلال والتوهّج ---------- */
  --glow-soft: 0 0 40px rgba(212, 168, 73, 0.10);
  --glow: 0 0 60px rgba(212, 168, 73, 0.15);
  --shade-inner: inset 0 0 40px rgba(0, 0, 0, 0.40);
  --text-glow: 0 2px 10px rgba(212, 168, 73, 0.25);
}

/* ============================================================
   الخطوط — ملفات woff2 مستضافة داخل المشروع، بلا CDN
   تُفتَح القائمة من رمز QR على اتصال ضعيف داخل المطعم، لذلك يجب
   أن تكون الخطوط محليّة: تظهر فوراً وتعمل حتى دون إنترنت.
   ويجعل تقسيم unicode-range الموبايل ينزّل ملف العربية وحده،
   فلا يُنزَّل ملف اللاتينية إلا عند ظهور رقم أو حرف إنجليزي.
   الأوزان المستعملة فعليًا فقط: 400 / 600 / 700 للنص،
   و400–700 للعناوين (ريم كوفي خط متغيّر بملف واحد).
   ============================================================ */

/* ---------- IBM Plex Sans Arabic — خط النصوص ---------- */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Reem Kufi — خط العناوين ---------- */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/reem-kufi-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/reem-kufi-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* ---------- الخطوط ---------- */
  --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-display: 'Reem Kufi', sans-serif;
}

/* ============================================================
   تصفير وأساسيات
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- النوافذ المنبثقة ----------
   يوسّط المتصفح عنصر <dialog> عبر margin: auto في نمطه الافتراضي،
   غير أن إعادة الضبط أعلاه (* { margin: 0 }) تلغيه، فتلتصق النافذة
   بأعلى الشاشة وبحافة الاتجاه بدل أن تتوسّط. ويُعاد التوسيط هنا مرة
   واحدة لجميع النوافذ بدل تكراره في كل ملف على حدة. */
dialog {
  margin: auto;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--cream);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* توهّج ذهبي خافت — خلف جميع الصفحات */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-glow), var(--black);
  z-index: -2;
}

/* نسيج قطري خفيف — بصمة دهب */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--bg-texture);
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
   🖼️  الإطار الذهبي المزدوج — بصمة دهب
   حدّ خارجي 2px مع حدّ داخلي رفيع وتوهّج، وهو ذاته في قائمة الطعام واللوحة.
   ============================================================ */

.frame {
  position: relative;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface-gold);
  box-shadow: var(--glow), var(--shade-inner);
}

.frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212, 168, 73, 0.30);
  border-radius: var(--r-md);
  pointer-events: none;
}

/* ---------- العناصر المخفية ----------
   خاصية hidden تُخفي العنصر عبر نمط المتصفح الافتراضي، وهو
   أضعف من أي قاعدة display مكتوبة في ملفاتنا. فلو اكتفينا بها
   لبقي عنصر مثل .choice ظاهراً رغم ضبط hidden عليه. نؤكّد
   الإخفاء هنا مرة واحدة ليعمل hidden كما هو متوقَّع في كل مكان. */
[hidden] {
  display: none !important;
}

/* ---------- زخارف الأركان (الزوايا الذهبية) ---------- */

.corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--gold);
  pointer-events: none;
}

.corner.tl {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 var(--r-xl) 0 0;
}

.corner.tr {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
  border-radius: var(--r-xl) 0 0 0;
}

.corner.bl {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 var(--r-xl) 0;
}

.corner.br {
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 var(--r-xl);
}

/* الأركان على بطاقة أصغر — الحجم دائماً أكبر من نصف القطر، وإلا تشوّه القوس */
.corner.sm {
  width: 22px;
  height: 22px;
  border-width: 1px;
}

.corner.sm.tl { top: -1px; right: -1px; border-radius: 0 var(--r-lg) 0 0; }
.corner.sm.tr { top: -1px; left: -1px; border-radius: var(--r-lg) 0 0 0; }
.corner.sm.bl { bottom: -1px; right: -1px; border-radius: 0 0 var(--r-lg) 0; }
.corner.sm.br { bottom: -1px; left: -1px; border-radius: 0 0 0 var(--r-lg); }

/* ============================================================
   ◆  الفاصل الذهبي — خط متلاشٍ + معيّن في المنتصف
   ============================================================ */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.divider span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.divider span:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.divider i {
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   ⬤  الأيقونة الذهبية الدائرية
   ============================================================ */

.ic-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--black);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ============================================================
   🏷️  الشارة (عدّاد / حالة مباشر)
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  background: var(--wash-gold);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

/* ============================================================
   🔘  الأزرار
   ============================================================ */

.btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--black);
  border: 1px solid transparent;
  padding: 14px 32px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 168, 73, 0.30);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wash-gold);
}

.btn.full {
  width: 100%;
}

.btn.ghost {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.btn.ghost:hover {
  background: var(--wash-gold);
}

.btn.danger {
  background: linear-gradient(135deg, var(--red), #991b1b);
  color: #fff;
}

.btn.small {
  padding: 9px 18px;
  font-size: 0.85rem;
  border-radius: var(--r-sm);
}

/* زر الأيقونة — دائرة ذهبية مثل أيقونات التواصل في قائمة الطعام */
.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.icon-btn:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}

.icon-btn.del:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* ============================================================
   ✍️  حقول الإدخال
   ============================================================ */

.field-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--wash-gold);
}

.field-input::placeholder {
  color: rgba(245, 240, 230, 0.35);
}

/* ============================================================
   🔢  حقل السعر بأسهم ذهبية
   بديل أسهم المتصفح الرمادية — نفس الوظيفة بهوية دهب.
   ============================================================ */

.stepper {
  position: relative;
}

.stepper .field-input {
  padding-left: 34px;
  text-align: center;
}

.stepper-btns {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stepper-btn {
  width: 22px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2xs);
  background: var(--wash-gold);
  color: var(--gold);
  font-family: inherit;
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.stepper-btn:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}

.stepper-btn:active {
  transform: scale(0.9);
}

.stepper-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* ============================================================
   🧩  العناصر الأصلية للمتصفح
   هذه عناصر يرسمها المتصفح بنمطه الرمادي الافتراضي فتكسر
   الهوية البصرية، لذلك يُلغى نمطها وتُطبَّق عليها ألوان دهب.
   ============================================================ */

/* ---------- أسهم الزيادة والنقصان في حقول الأرقام ----------
   غير مفيدة لأسعار مكوّنة من ثلاث أو أربع خانات، وشكلها الرمادي خارج الهوية. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- إطار Firebase Auth ----------
   يحقن الـ SDK إطاراً مخفياً (1px) في آخر الـ body. ومع اتجاه
   RTL يستقرّ عند حافة الشاشة فيفتح تمريراً أفقياً دون قصد،
   فتنزاح الصفحة وتخرج العناصر الثابتة عن مواضعها.
   لذلك يُثبَّت في الزاوية كي لا يؤثّر في التخطيط. */
iframe[src*="/__/auth/iframe"] {
  position: absolute !important;
  top: -100px !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
}

/* ---------- شريط التمرير ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-pill);
  border: 2px solid var(--black);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* ---------- تحديد النص ---------- */
::selection {
  background: var(--gold);
  color: var(--black);
}

/* ---------- مؤشّر الكتابة ---------- */
input,
textarea {
  caret-color: var(--gold);
}

/* ---------- الملء التلقائي (يضع كروم خلفية صفراء) ---------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px var(--char) inset;
  caret-color: var(--gold);
}

/* ---------- حلقة التركيز للتنقّل بالكيبورد ---------- */
.icon-btn:focus-visible,
.add-section:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================================
   رسائل الخطأ والتحميل والحركات
   ============================================================ */

.err-msg {
  color: var(--red);
  margin-top: 12px;
  font-size: 0.9rem;
  min-height: 20px;
}

.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(212, 168, 73, 0.20);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ↩︎  رابط الرجوع — مشترك بين الصفحات الداخلية
   (قائمة الطعام، الطلبات، وغيرها) ويعود دائماً إلى صفحة الترحيب.
   ============================================================ */

.back-link {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* هدف لمس كافي بالموبايل حتى لو النص صغير */
  min-height: 40px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  background: rgba(15, 15, 15, 0.75);
  backdrop-filter: blur(6px);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.back-link:active {
  background: var(--wash-gold);
}

.back-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wash-gold);
}

@media (hover: hover) {
  .back-link:hover {
    border-color: var(--gold);
    background: var(--wash-gold);
  }
}

/* ============================================================
   ✦  الأيقونات

   كل أيقونات الموقع SVG من ملف واحد: assets/img/icons.svg
   لا تُستعمل الإيموجي، لأنها تظهر بألوان النظام وبشكل مختلف على
   كل جهاز، فتكسر الهوية الذهبية.

   الحجم بالـ em فيتبع حجم خط العنصر الأب، واللون من
   currentColor فيتبع لون الأب كذلك.
   ============================================================ */

.ic {
  width: 1.3em;
  height: 1.3em;
  display: block;
  flex-shrink: 0;
}