/* ═══════════════════════════════════════════════════════════════
   الملف: css/brand.css — هوية «مرطبات الكردي»: فخامة عاجية مذهّبة
   الخطوط + متغيّرات الألوان (فاتح/داكن) + التصميم الخاص بالمحل.
   يُحمَّل بعد css/style.css، فأي قاعدة هنا تتقدم على التصميم العام.
   الألوان مأخوذة من بكسلات الشعار: بني الشوكولاتة #683e1e · الذهبي #ca9e53 · الذهبي الغامق #b88038
   ═══════════════════════════════════════════════════════════════ */

/* ───── 1) الخطوط (مستضافة محلياً): Amiri للعناوين (نسخ كلاسيكي فاخر) · Tajawal للنصوص ───── */
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AA; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-arabic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AA, U+20AC; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AA, U+20AC; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AA, U+20AC; }

/* ───── 2) المتغيّرات: الوضع الفاتح (عاجي وذهبي) ───── */
:root {
  --bg: #fbf6ec;          /* عاجي دافئ */
  --surface: #fffdf8;
  --surface-2: #f2e8d6;
  --ink: #3a2414;         /* شوكولاتة داكنة للنص */
  --ink-2: #7a6150;
  --line: #e8dbc4;
  --brand: #683e1e;       /* بني الشعار */
  --brand-ink: #fff7e8;
  --brand-soft: #f5ead6;
  --ember: #a46f28;       /* ذهبي غامق: الأسعار والتمييز */
  --ok: #2c7a4b;  --ok-soft: #dcefe2;
  --bad: #b3261e; --bad-soft: #f7dedb;
  --warn: #8a5a00; --warn-soft: #f6e8c9;
  --shadow: 0 1px 2px rgb(104 62 30 / .06), 0 10px 26px -14px rgb(104 62 30 / .28);
  --shadow-lg: 0 26px 60px -26px rgb(104 62 30 / .5);
  --screen-bg: #2b1a0f;     /* لوحة العرض: شوكولاتة داكنة بإطار ذهبي */
  --screen-bg-2: #4a2c17;
  --screen-ink: #fbf1dc;
  --screen-gold: #e3b866;
  --gold: linear-gradient(135deg, #f7e2a6 0%, #d8a955 42%, #a46f28 100%);   /* الذهبي المعدني */
  --gold-ink: #2a1a0c;                                                        /* النص فوق الذهبي */
  --gold-line: color-mix(in srgb, #c9973b 42%, transparent);                  /* خطوط الإطارات */
  --font-display: "Amiri", "Tajawal", serif;
  --font-body: "Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-script: "Amiri", "Tajawal", serif;
  --r-s: 12px; --r-m: 18px; --r-l: 28px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-end: max(16px, env(safe-area-inset-right, 0px));
  --topbar-h: 60px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
/* الوضع الداكن: إسبريسو وذهبي */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15100b; --surface: #1f1811; --surface-2: #2b2117; --ink: #f6ecd9; --ink-2: #bba68a; --line: #3a2e20;
    --brand: #e0b665; --brand-ink: #23170c; --brand-soft: #2f2418; --ember: #e6bf72;
    --ok: #6fcf97; --ok-soft: #1d3327; --bad: #ff8a80; --bad-soft: #40201f; --warn: #f0c36a; --warn-soft: #3a2f17;
    --screen-bg: #0e0a06; --screen-bg-2: #2a1c0f; --screen-ink: #f7ecd6; --screen-gold: #e6bd6a;
    --gold-line: color-mix(in srgb, #d8a955 34%, transparent);
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6); --shadow-lg: 0 24px 60px -24px rgb(0 0 0 / .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15100b; --surface: #1f1811; --surface-2: #2b2117; --ink: #f6ecd9; --ink-2: #bba68a; --line: #3a2e20;
  --brand: #e0b665; --brand-ink: #23170c; --brand-soft: #2f2418; --ember: #e6bf72;
  --ok: #6fcf97; --ok-soft: #1d3327; --bad: #ff8a80; --bad-soft: #40201f; --warn: #f0c36a; --warn-soft: #3a2f17;
  --screen-bg: #0e0a06; --screen-bg-2: #2a1c0f; --screen-ink: #f7ecd6; --screen-gold: #e6bd6a;
  --gold-line: color-mix(in srgb, #d8a955 34%, transparent);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6); --shadow-lg: 0 24px 60px -24px rgb(0 0 0 / .8);
  color-scheme: dark;
}

/* ───── 3) تصميم الكردي الخاص: فخامة مذهّبة ───── */

/* خلفية عاجية بلمعة ذهبية خفيفة في الزاوية */
body {
  background:
    radial-gradient(900px 520px at 100% -8%, color-mix(in srgb, #d8a955 14%, transparent), transparent 62%),
    radial-gradient(700px 420px at -10% 40%, color-mix(in srgb, #d8a955 7%, transparent), transparent 60%),
    var(--bg);
}
.topbar { border-bottom-color: var(--gold-line); }
.brand-logo { box-shadow: 0 0 0 1.5px var(--gold-line); }
.brand-text strong { font-weight: 700; font-size: 1.08rem; }
/* اسم المحل أطول: على الجوال نخفي أيقونة التنزيل من الشريط (زر التنزيل موجود في الرئيسية) ليظهر الاسم كاملاً */
@media (max-width: 440px) { .install-top { display: none; } }

/* الأزرار والاختيارات المفعّلة: ذهبي معدني */
.btn-primary, .cat-chip.active, .seg.active, .chip-accent, .staff-menu-btn, .show-go {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: transparent;
  box-shadow: 0 8px 22px -12px rgb(164 111 40 / .85), inset 0 1px 0 rgb(255 255 255 / .45);
}
.btn-primary:hover { box-shadow: 0 14px 30px -14px rgb(164 111 40 / .95), inset 0 1px 0 rgb(255 255 255 / .45); }
.btn-soft { background: var(--brand-soft); border-color: var(--gold-line); }
.btn-ghost { border-color: var(--gold-line); }

/* العناوين: خط Amiri مع خط ذهبي تحت عناوين الأقسام */
.section-head h2, .menu-section-head h2 { font-weight: 700; }
.section-head::after { content: ""; width: 72px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--gold); }
.eyebrow { color: var(--ember); letter-spacing: .02em; font-family: var(--font-body); font-weight: 700; font-size: .95rem; }

/* اسم المحل الكبير: نص بتدرّج ذهبي */
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.8rem, 17vw, 7.5rem);
  line-height: 1.35;
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 18px rgb(164 111 40 / .22));
}
.hero-tag { font-family: var(--font-display); font-weight: 400; color: var(--ink-2); }

/* الشعار: ميدالية بإطار ذهبي، وحلقة ذهبية معدنية تدور، ولمعة نجمة مثل الشعار */
.plate-logo { box-shadow: 0 0 0 6px var(--surface), 0 0 0 7.5px var(--gold-line), 0 30px 60px -26px rgb(104 62 30 / .55); }
.plate-ring { border-color: var(--gold-line); }
.plate-ring.r2 {
  border: 0;
  background: conic-gradient(from 20deg, #f7e2a6, #a46f28 20%, #f7e2a6 40%, #c9973b 60%, #f7e2a6 80%, #a46f28);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: spin 40s linear infinite;
  opacity: .9;
}
.plate::after {
  content: "";
  position: absolute;
  top: 7%;
  right: 13%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 16%, #fbe9b8 28%, transparent 70%);
  animation: kurdi-twinkle 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kurdi-twinkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
.plate-tag { border-color: var(--gold-line); }
.plate-tag .ic { color: var(--ember); }

/* البطاقات: إطارات ذهبية رفيعة وزوايا أنعم */
.item-card, .panel, .spec-card, .stat, .login-card, .mini-cart, .account, .qr-card, .step, .call-option, .install-step, .order-links a {
  border-color: var(--gold-line);
}
.item-card { border-radius: 22px; box-shadow: var(--shadow); }
.item-media .item-ph, .item-ph { background: radial-gradient(circle at 30% 30%, color-mix(in srgb, #d8a955 22%, var(--surface)), var(--surface-2)); color: color-mix(in srgb, #a46f28 55%, transparent); }
.price { font-family: var(--font-display); font-weight: 700; }
.spec-ic, .step-ic, .push-ic, .call-ic { background: var(--gold); color: var(--gold-ink); }
.spec-card.is-feature {
  background: linear-gradient(160deg, #4a2c17, #2b1a0f);
  color: #fbf1dc;
  border-color: color-mix(in srgb, #e3b866 55%, transparent);
}
.step-num { color: var(--gold-line); font-family: var(--font-display); }
.badge-top { background: var(--gold); color: var(--gold-ink); }
.badge-offer { background: #683e1e; color: #fbf1dc; }

/* الصفحات الداخلية */
.status-card { background: linear-gradient(160deg, #4a2c17, #2b1a0f); color: #fbf1dc; box-shadow: var(--shadow-lg), inset 0 0 0 1px color-mix(in srgb, #e3b866 40%, transparent); }
.status-card .eyebrow { color: #e3b866; }
.stepper { background: var(--brand); }
.cart-bar { border-color: var(--gold-line); }
.foot-copy { border-top-color: var(--gold-line); }
.login-logo { box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px var(--gold-line), var(--shadow); }