/* =========================================================
   SHMAH | شمعة — التصميم "جمرة" (مطبّق على زد 2026-11-02)
   الترتيب: خطوط + متغيرات جمرة ← الأساس المشترك ← لمسات جمرة ← مقدمة اشتعال الشمعة
   المصادر: shmah-designs/ember.css + base.css + shmah-intro.css. نسخة الدارك الذهبي السابقة: shmah-dark.css
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;600;700&display=swap');

html[data-bs-theme] {
  --sh-scheme: dark;
  --sh-bg: #141212;          /* فحمي — النص عليه 16.1:1 */
  --sh-surface: #1E1B1A;
  --sh-surface-2: #282423;
  --sh-border: #34302D;
  --sh-text: #F3EDE7;
  --sh-muted: #B4A89D;       /* 8.0:1 */
  --sh-accent: #EE7A3E;      /* جمرة — 6.7:1 على الفحمي */
  --sh-accent-hover: #F59A64;
  --sh-on-accent: #1A0E07;   /* 6.8:1 على البرتقالي */
  --sh-btn-bg: #EE7A3E;
  --sh-btn-bg-hover: #F59A64;
  --sh-on-btn: #1A0E07;
  --sh-deep: #0B0A0A;
  --sh-on-deep: #F3EDE7;
  --sh-deep-accent: #EE7A3E;
  --sh-deep-muted: #A89C91;  /* 7.4:1 */
  --sh-header-bg: rgba(11, 10, 10, .9);
  --sh-header-text: #F3EDE7;
  --sh-header-shadow: 0 1px 0 rgba(238, 122, 62, .25), 0 8px 30px rgba(0, 0, 0, .5);
  --sh-banner-bg: radial-gradient(ellipse 50% 140% at 50% 120%, rgba(238, 122, 62, .28), transparent 70%), #0B0A0A;
  --sh-banner-text: #F3EDE7;
  --sh-sale: #FF8A70;
  --sh-radius: 10px;
  --sh-btn-radius: 10px;
  --sh-card-hover-shadow: 0 10px 36px rgba(238, 122, 62, .18);
  --sh-hero-fade: var(--sh-bg);
  --sh-body-glow: radial-gradient(ellipse 70% 380px at 50% 0, rgba(238, 122, 62, .10), transparent 70%);
  --sh-font-head: 'Readex Pro', sans-serif;
  --sh-font-body: 'Readex Pro', system-ui, sans-serif;
  --sh-head-weight: 700;
  --color-primary-rgba: 238 122 62 !important;
  --bs-primary-rgb: 238, 122, 62 !important;
  --bs-body-bg-rgb: 20, 18, 18;
  --bs-body-color-rgb: 243, 237, 231;
  --bs-emphasis-color-rgb: 243, 237, 231;
  --bs-secondary-rgb: 180, 168, 157;
  --bs-secondary-color-rgb: 180, 168, 157;
  --bs-secondary-bg-rgb: 40, 36, 35;
  --bs-tertiary-bg-rgb: 30, 27, 26;
  --bs-light-rgb: 30, 27, 26;
  --bs-link-color-rgb: 238, 122, 62;
}

/* ---------- 1) قلب Bootstrap وألوان الهوية على متغيرات التصميم ---------- */
/* !important لأن الثيم يكتب ألوان الهوية inline على <html> */
html[data-bs-theme] {
  --color-primary: var(--sh-accent) !important;
  --color-accent: var(--sh-accent-hover) !important;
  --text-color-primary-bg: var(--sh-text) !important;
  color-scheme: var(--sh-scheme);
  --bs-body-bg: var(--sh-bg);
  --bs-body-color: var(--sh-text);
  --bs-emphasis-color: var(--sh-text);
  --bs-heading-color: var(--sh-text);
  --bs-secondary-color: var(--sh-muted);
  --bs-secondary-bg: var(--sh-surface-2);
  --bs-tertiary-bg: var(--sh-surface);
  --bs-tertiary-color: var(--sh-muted);
  --bs-light: var(--sh-surface);
  --bs-light-bg-subtle: var(--sh-surface);
  --bs-secondary-bg-subtle: var(--sh-surface);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--sh-accent) 12%, var(--sh-bg));
  --bs-primary-text-emphasis: var(--sh-accent-hover);
  --bs-border-color: var(--sh-border);
  --bs-border-color-translucent: color-mix(in srgb, var(--sh-accent) 16%, transparent);
  --bs-link-color: var(--sh-accent);
  --bs-link-hover-color: var(--sh-accent-hover);
  --bs-code-color: var(--sh-accent);
}

/* ---------- 2) الصفحة والخطوط ---------- */
html[data-bs-theme]:lang(ar) { --font-family: var(--sh-font-body); --font-primary: var(--sh-font-body); }
html { background: var(--sh-bg); scrollbar-color: var(--sh-border) var(--sh-bg); }
body {
  background: var(--sh-body-glow, none), var(--sh-bg);
  background-repeat: no-repeat !important; /* html أقصر من الصفحة، فأي توهج يتكرر كشريط */
  color: var(--sh-text);
  font-family: var(--sh-font-body);
  line-height: 1.75;
}
h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { font-family: var(--sh-font-head); font-weight: var(--sh-head-weight); line-height: 1.4; }
::selection { background: var(--sh-accent); color: var(--sh-on-accent); }

/* ---------- 3) شريط التنبيهات ---------- */
.announcement-bar { background: var(--sh-deep) !important; border-block-end: 1px solid var(--sh-border); }
.announcement-bar, .announcement-bar .announcement-text, .announcement-bar a, .announcement-bar .ti { color: var(--sh-deep-accent) !important; }

/* ---------- 4) الهيدر ---------- */
#fixed-header.navbar {
  background: var(--sh-header-bg) !important;
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--sh-border) !important;
  box-shadow: var(--sh-header-shadow);
}
#fixed-header .nav-link, #fixed-header .navbar-brand, #fixed-header span, #fixed-header .ti { color: var(--sh-header-text) !important; }
#fixed-header .nav-link:hover, #fixed-header .nav-link:hover .ti { color: var(--sh-accent) !important; }
.badge.bg-primary, #fixed-header .badge { background: var(--sh-accent) !important; color: var(--sh-on-accent) !important; }

/* ---------- 5) الأزرار ---------- */
.btn-primary {
  --bs-btn-bg: var(--sh-btn-bg);
  --bs-btn-border-color: var(--sh-btn-bg);
  --bs-btn-color: var(--sh-on-btn);
  --bs-btn-hover-bg: var(--sh-btn-bg-hover);
  --bs-btn-hover-border-color: var(--sh-btn-bg-hover);
  --bs-btn-hover-color: var(--sh-on-btn);
  --bs-btn-active-bg: var(--sh-btn-bg-hover);
  --bs-btn-active-border-color: var(--sh-btn-bg-hover);
  --bs-btn-active-color: var(--sh-on-btn);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--sh-btn-bg) 45%, var(--sh-bg));
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-color: var(--sh-muted);
  font-weight: 600;
  border-radius: var(--sh-btn-radius);
  transition: background-color .2s ease, box-shadow .25s ease, transform .15s ease;
}
.btn-primary, .btn-primary span, .btn-primary .ti { color: var(--sh-on-btn) !important; }
.btn-primary:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }
.btn-outline-primary { --bs-btn-color: var(--sh-accent); --bs-btn-border-color: var(--sh-accent); --bs-btn-hover-bg: var(--sh-accent); --bs-btn-hover-color: var(--sh-on-accent); border-radius: var(--sh-btn-radius); }
.text-primary { color: var(--sh-accent) !important; }
.bg-primary.bg-opacity-10 { background-color: color-mix(in srgb, var(--sh-accent) 12%, transparent) !important; }

/* ---------- 6) بانر عنوان الصفحات (جميع المنتجات / التصنيفات) ---------- */
section.bg-primary { background: var(--sh-banner-bg) !important; border-block-end: 1px solid var(--sh-border); }
section.bg-primary, section.bg-primary * { color: var(--sh-banner-text) !important; }

/* ---------- 7) البطاقات وبطاقة المنتج ---------- */
.card { --bs-card-bg: var(--sh-surface); --bs-card-cap-bg: color-mix(in srgb, var(--sh-accent) 5%, transparent); --bs-card-border-color: var(--sh-border); --bs-card-border-radius: var(--sh-radius); --bs-card-inner-border-radius: var(--sh-radius); color: var(--sh-text); border-radius: var(--sh-radius); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--sh-text); --bs-list-group-border-color: var(--sh-border); }
.list-group-item { background: transparent !important; }
.card:has(.js-add-to-cart) { overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.card:has(.js-add-to-cart):hover { border-color: color-mix(in srgb, var(--sh-accent) 45%, transparent) !important; box-shadow: var(--sh-card-hover-shadow) !important; transform: translateY(-2px); }
.card:has(.js-add-to-cart) img { transition: transform .6s ease; }
.card:has(.js-add-to-cart):hover img { transform: scale(1.04); }
.card a.text-dark-emphasis { color: var(--sh-text) !important; font-weight: 600; }
.card a.text-dark-emphasis:hover { color: var(--sh-accent) !important; }
.prodict-item-not-taxable .text-danger-emphasis { color: var(--sh-muted) !important; font-weight: 400; } /* "معفى من الضريبة" معلومة، مو تحذير */
del, .text-decoration-line-through { color: var(--sh-muted) !important; }
.text-danger { color: var(--sh-sale) !important; }

/* ---------- 8) صفحة المنتج ---------- */
.card-header h1 { color: var(--sh-text) !important; }
.badge.bg-primary.bg-opacity-10.text-primary { background: color-mix(in srgb, var(--sh-accent) 14%, transparent) !important; color: var(--sh-accent) !important; font-size: 1rem; }
.fixed-bottom { background: color-mix(in srgb, var(--sh-bg) 94%, transparent) !important; backdrop-filter: blur(8px); border-block-start: 1px solid var(--sh-border); }

/* ---------- 9) الحقول والقوائم ---------- */
.form-control, .form-select, .input-group-text { background-color: var(--sh-surface) !important; color: var(--sh-text) !important; border-color: var(--sh-border) !important; border-radius: min(var(--sh-radius), 12px); }
.form-control::placeholder { color: var(--sh-muted); }
.form-control:focus, .form-select:focus { border-color: var(--sh-accent) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sh-accent) 20%, transparent) !important; }
.form-range::-webkit-slider-thumb { background: var(--sh-accent); }
.form-range::-moz-range-thumb { background: var(--sh-accent); }
.form-check-input:checked { background-color: var(--sh-accent); border-color: var(--sh-accent); }
.dropdown-menu { --bs-dropdown-bg: var(--sh-surface); --bs-dropdown-color: var(--sh-text); --bs-dropdown-link-color: var(--sh-text); --bs-dropdown-link-hover-bg: var(--sh-surface-2); --bs-dropdown-border-color: var(--sh-border); }
.pagination { --bs-pagination-bg: var(--sh-surface); --bs-pagination-color: var(--sh-text); --bs-pagination-border-color: var(--sh-border); --bs-pagination-active-bg: var(--sh-accent); --bs-pagination-active-border-color: var(--sh-accent); --bs-pagination-active-color: var(--sh-on-accent); }

/* ---------- 10) السلة والقائمة الجانبية ---------- */
.offcanvas { --bs-offcanvas-bg: var(--sh-bg); --bs-offcanvas-color: var(--sh-text); border-inline-start: 1px solid var(--sh-border) !important; }
.offcanvas-header { background: var(--sh-deep) !important; color: var(--sh-on-deep); }
.offcanvas .nav-link.active { background: var(--sh-surface-2) !important; color: var(--sh-accent) !important; }
.js-cart-buttons { background: var(--sh-surface-2) !important; }
.modal { --bs-modal-bg: var(--sh-surface); --bs-modal-color: var(--sh-text); --bs-modal-border-color: var(--sh-border); }

/* ---------- 11) الفوتر (غامق في التصاميم الثلاثة) ---------- */
footer.mt-auto { background: var(--sh-deep) !important; border-block-start: 1px solid transparent; border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sh-deep-accent) 60%, transparent), transparent) 1; }
footer h2, footer .fw-bold { color: var(--sh-deep-accent) !important; font-family: var(--sh-font-head); }
footer, footer p, footer a, footer span { color: var(--sh-deep-muted) !important; }
footer a:hover { color: var(--sh-deep-accent) !important; }
footer a[href*="zid.sa"] img { filter: brightness(0) invert(1); opacity: .55; } /* شعار زد الداكن يبان على الفوتر الغامق */

/* ---------- 12) نصوص ثابتة اللون في الثيم ---------- */
.text-body-secondary, .text-secondary, .text-muted { color: var(--sh-muted) !important; }
.text-dark, .text-black, .link-dark { color: var(--sh-text) !important; }
.vr { background-color: var(--sh-border); opacity: 1; }
hr { border-color: var(--sh-border); opacity: 1; }

/* ---------- 13) البانر الرئيسي (صورة مع نص) ---------- */
/* الثيم يحط طبقة سوداء 70% ثابتة فوق الصورة. نصغّرها لصفر ونحط توهج أخف حول النص بس */
.css-image-with-text.bg-overlay { background-size: 0 0, cover !important; position: relative; isolation: isolate; }
.css-image-with-text.bg-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 48% at 50% 48%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18) 72%, transparent),
    linear-gradient(180deg, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, .08) 60%, var(--sh-hero-fade, rgba(0, 0, 0, .35)) 100%);
}
.css-image-with-text h1, .css-image-with-text h2, .css-image-with-text p { color: #FFF8EC !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }

/* ---------- 14) زر المفضلة ---------- */
.add-to-wishlist { background: color-mix(in srgb, var(--sh-surface) 85%, transparent) !important; border: 1px solid color-mix(in srgb, var(--sh-accent) 35%, transparent) !important; backdrop-filter: blur(4px); }
.add-to-wishlist, .add-to-wishlist .ti, .add-to-wishlist svg { color: var(--sh-accent) !important; }

@media (prefers-reduced-motion: reduce) {
  .card, .card img, .btn-primary { transition: none !important; transform: none !important; }
}

/* ---------- 15) لمسات جمرة ---------- */
#fixed-header .navbar-brand img { mix-blend-mode: lighten; } /* يذوّب خلفية الشعار السوداء */
.btn-close { filter: invert(1); }
.btn-primary { background: linear-gradient(180deg, #F38A52, #E8702F); }
.btn-primary:hover { box-shadow: 0 0 24px rgba(238, 122, 62, .4); }
.css-products h2.h5, .css-store h2.h3 { /* عناوين الأقسام بس، مو أسماء المنتجات (h2.list-group-item) */ font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: 0; }
.css-products h2.h5::after, .css-store h2.h3::after { content: ""; display: block; inline-size: 40px; block-size: 3px; border-radius: 3px; background: var(--sh-accent); margin-block-start: 10px; }
.css-store h2.h3::after { margin-inline: auto; }
.css-image-with-text h1, .css-image-with-text h2 { font-size: clamp(2rem, 5vw, 3.4rem); }

/* ---------- 16) مقدمة "اشتعال الشمعة": ظلام ← فتيل ← لهب ← ضوء، مرة وحدة لكل زيارة ---------- */
/* ملف JS زد ينزل آخر الصفحة، فالصفحة ممكن تبان لحظة قبله. ::before يغطيها لين الـ JS يقرر:
   زائر شاف المقدمة ← html.sh-ready يشيل الغطا فوراً. زائر جديد ← html.sh-intro-on يخليه لين ينبني #sh-intro.
   لو الـ JS ما اشتغل أبداً، الغطا يختفي بروحه بعد ثانية */
html:not(.sh-ready)::before, html.sh-intro-on::before { content: ""; position: fixed; inset: 0; z-index: 2147482999; background: #050403; }
html:not(.sh-ready)::before { animation: sh-out .3s ease 1s forwards; }
html.sh-intro-on { overflow: hidden; }
#sh-intro {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: #050403;
  animation: sh-out .8s ease 2.5s forwards;
}
#sh-intro.sh-skip { animation: sh-out .4s ease forwards; }
#sh-intro .sh-light {
  position: absolute; inset: -25%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(230, 178, 76, .24), rgba(140, 80, 24, .10) 32%, transparent 62%);
  animation: sh-fade 1.4s ease .9s forwards;
}
#sh-intro .sh-stage { position: relative; display: grid; justify-items: center; gap: 1.9em; transform: translateY(-3vh); font-size: clamp(14px, calc(1.15vw + 8px), 28px); } /* كل المقاسات بـ em عشان تكبر مع الشاشة */
#sh-intro .sh-candle { position: relative; width: 3.75em; height: 9.4em; }
#sh-intro .sh-wick {
  position: absolute; left: 50%; bottom: 0; width: .19em; height: 1.375em; margin-left: -.095em; border-radius: .12em;
  background: linear-gradient(#2a1d12, #120d09);
}
#sh-intro .sh-wick::after { /* جمرة على رأس الفتيل قبل ما يشتعل */
  content: ""; position: absolute; top: -.19em; left: 50%; width: .375em; height: .375em; margin-left: -.19em; border-radius: 50%;
  background: #FF8A2A; box-shadow: 0 0 .5em .19em rgba(255, 120, 40, .75); opacity: 0;
  animation: sh-ember .45s ease .2s forwards;
}
#sh-intro .sh-flame {
  position: absolute; left: 50%; bottom: 1.06em; width: 2.125em; height: 6.125em; margin-left: -1.06em;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; transform-origin: 50% 100%; transform: scale(0);
  background:
    radial-gradient(ellipse 42% 32% at 50% 76%, #FFFFFF 0, #FFF4D2 35%, transparent 72%),
    radial-gradient(ellipse 52% 62% at 50% 68%, #FFE08A 0, #F5A93A 48%, rgba(230, 120, 30, 0) 82%);
  filter: blur(.5px) drop-shadow(0 0 .9em rgba(255, 170, 60, .85));
  animation: sh-ignite .7s cubic-bezier(.2, .9, .3, 1.25) .55s forwards, sh-flicker 1.5s ease-in-out 1.25s infinite;
}
#sh-intro .sh-core { /* القاعدة الزرقا تحت اللهب */
  position: absolute; left: 50%; bottom: .19em; width: .875em; height: 1em; margin-left: -.44em; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(90, 130, 255, .55), transparent 70%);
}
#sh-intro .sh-halo {
  position: absolute; left: 50%; bottom: 3.75em; width: 22.5em; height: 22.5em; margin: 0 0 -11.25em -11.25em; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 90, .36), rgba(230, 150, 60, .12) 42%, transparent 70%);
  opacity: 0; transform: scale(.3);
  animation: sh-halo 1.2s ease-out .6s forwards, sh-breathe 1.5s ease-in-out 1.8s infinite;
}
#sh-intro .sh-word {
  font-family: var(--sh-font-head, 'Amiri'), serif; font-weight: 700; font-size: 3.2em; line-height: 1.2;
  color: #E6B24C; text-shadow: 0 0 26px rgba(230, 178, 76, .5); opacity: 0;
  animation: sh-word .9s ease 1.15s forwards;
}
@keyframes sh-ember { to { opacity: 1; } }
@keyframes sh-ignite { 0% { transform: scale(.05); opacity: .3; } 55% { transform: scale(.9, 1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sh-flicker { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(.97, 1.04) rotate(-1.5deg); } 50% { transform: scale(1.02, .97) rotate(1deg); } 75% { transform: scale(.98, 1.02) rotate(-.6deg); } }
@keyframes sh-halo { to { opacity: 1; transform: scale(1); } }
@keyframes sh-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .8; transform: scale(.95); } }
@keyframes sh-fade { to { opacity: 1; } }
@keyframes sh-word { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sh-out { to { opacity: 0; visibility: hidden; } }

/* المشهد الحقيقي: صورة الشمعة + لهب WebGL + ضوء ينتشر. الـ JS يحرّك كل إطار، فنوقف حركة CSS حقت النسخة البسيطة */
#sh-intro.sh-real { display: block; animation: none; }
#sh-intro.sh-real.sh-skip { animation: sh-out .4s ease forwards; }
#sh-intro .sh-photo {
  position: absolute; display: block; max-width: none; max-height: none; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at 50% 42%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 55% at 50% 42%, #000 45%, transparent 100%);
  filter: saturate(1.12) sepia(.12); /* ضوء شمعة أدفى من ضوء الغرفة في الصورة */
}
#sh-intro .sh-eraser { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(195, 105, 38, .96), rgba(195, 105, 38, .8) 60%, rgba(195, 105, 38, 0)); }
#sh-intro .sh-dark { position: absolute; inset: 0; }
#sh-intro .sh-fire { position: absolute; display: block; }
#sh-intro .sh-spark {
  position: absolute; left: 0; top: 0; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%;
  background: #FFD08A; box-shadow: 0 0 6px 2px rgba(255, 140, 40, .85); opacity: 0;
}
#sh-intro .sh-name {
  position: absolute; left: 0; right: 0; bottom: 7vh; text-align: center;
  font-family: var(--sh-font-head, 'Amiri'), serif; font-weight: 700; font-size: clamp(34px, 5.5vh, 60px); line-height: 1.2;
  color: #E6B24C; text-shadow: 0 0 24px rgba(230, 178, 76, .45), 0 2px 12px rgba(0, 0, 0, .9); opacity: 0;
}