/* ============================================================
   BOXDZPRO — Design System (tokens + مكوّنات + موبايل أولاً + dark mode)
   كل الألوان والمسافات والظلال عبر متغيّرات CSS. لا CDN غير Bootstrap.
   الوضع الداكن يعتمد data-bs-theme (Bootstrap 5.3) + هذه الـtokens.
   ============================================================ */

/* ---------- 1) Tokens (الوضع الفاتح الافتراضي) ---------- */
:root{
  /* العلامة */
  --bdz:           #0f766e;   /* الأساسي teal */
  --bdz-600:       #0c5e57;   /* hover */
  --bdz-700:       #0a4f49;
  --bdz-2:         #0891b2;   /* ثانوي cyan */
  --bdz-accent:    #f59e0b;   /* برتقالي "DZ" */
  --bdz-accent-600:#d97706;

  /* الأسطح والنص */
  --bdz-bg:        #f5f7fa;
  --bdz-surface:   #ffffff;
  --bdz-surface-2: #f1f5f9;
  --bdz-text:      #0b1324;
  --bdz-muted:     #64748b;
  --bdz-border:    #e2e8f0;

  /* المسافات */
  --bdz-sp-1: .25rem;  --bdz-sp-2: .5rem;  --bdz-sp-3: 1rem;
  --bdz-sp-4: 1.5rem;  --bdz-sp-5: 2.5rem;

  /* نصف الأقطار */
  --bdz-radius-sm: .5rem;
  --bdz-radius:    .85rem;
  --bdz-radius-lg: 1.2rem;

  /* الظلال */
  --bdz-shadow:    0 6px 20px rgba(2,32,71,.06);
  --bdz-shadow-lg: 0 12px 28px rgba(2,32,71,.12);

  /* الخط */
  --bdz-font: "Segoe UI", Tahoma, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bdz-fs-sm: .85rem; --bdz-fs: 1rem; --bdz-fs-lg: 1.15rem;

  /* لمس */
  --bdz-touch: 44px;
}

/* الوضع الداكن — يُفعّل عبر data-bs-theme="dark" (نظام أو تبديل يدوي) */
[data-bs-theme="dark"]{
  --bdz:           #14b8a6;
  --bdz-600:       #0d9488;
  --bdz-700:       #0f766e;
  --bdz-2:         #22d3ee;
  --bdz-accent:    #fbbf24;
  --bdz-accent-600:#f59e0b;

  --bdz-bg:        #0b1120;
  --bdz-surface:   #0f172a;
  --bdz-surface-2: #1e293b;
  --bdz-text:      #e2e8f0;
  --bdz-muted:     #94a3b8;
  --bdz-border:    #24324a;

  --bdz-shadow:    0 6px 20px rgba(0,0,0,.45);
  --bdz-shadow-lg: 0 12px 28px rgba(0,0,0,.55);
}

/* ---------- 2) الأساسيات ---------- */
html{ scroll-behavior:smooth; }
/* حارس دفاعي ضد التمدّد الأفقي على الجوال (خصوصاً RTL): يمنع أي عنصر شارد
   من توسيع عرض الصفحة وإزاحة المحتوى لعمود ضيق مع فراغ. */
html, body{ overflow-x:hidden; max-width:100%; }
img, video, canvas, iframe{ max-width:100%; height:auto; }
body{
  font-family:var(--bdz-font);
  background-color:var(--bdz-bg);
  color:var(--bdz-text);
}
/* أرقام لاتينية (0-9) في كل مكان — نوقف استبدال الأرقام الهندية (Arabic-Indic)
   الذي تفرضه بعض الخطوط تلقائياً عند lang="ar" عبر ميزة OpenType "locl".
   هذا يضمن أن تظهر الأرقام والتواريخ والمبالغ بالشكل اللاتيني (1234) لا (١٢٣٤). */
html, body, *, input, select, textarea, button, table, .badge, .btn{
  font-feature-settings:"locl" 0 !important;
  font-variant-numeric:lining-nums tabular-nums;
}
/* شريط علوي أقصر لزيادة مساحة العمل */
.navbar{ padding-top:.35rem; padding-bottom:.35rem; }
.navbar-brand img{ max-height:26px; }
main.container.py-4{ padding-top:.9rem!important; padding-bottom:1rem!important; }
/* الأجسام التي تستعمل bg-light/bg-white تتبع الثيم في الوضع الداكن */
[data-bs-theme="dark"] body.bg-light,
[data-bs-theme="dark"] .bg-light{ background-color:var(--bdz-bg)!important; color:var(--bdz-text); }
[data-bs-theme="dark"] .bg-white{ background-color:var(--bdz-surface)!important; color:var(--bdz-text); }
a{ text-decoration:none; }
.navbar-brand{ letter-spacing:.5px; }
/* شريط علوي أنحف لتكبير منطقة العمل */
.navbar{ padding-top:.35rem; padding-bottom:.35rem; }
.navbar .nav-link{ padding-top:.3rem; padding-bottom:.3rem; }
main.container.py-4{ padding-top:1rem!important; padding-bottom:1rem!important; }

/* ---------- 3) خرائط Bootstrap على الـtokens ---------- */
.bg-primary{ background-color:var(--bdz)!important; }
.text-primary{ color:var(--bdz)!important; }
.text-accent{ color:var(--bdz-accent)!important; }
.btn-primary{
  --bs-btn-bg:var(--bdz); --bs-btn-border-color:var(--bdz);
  --bs-btn-hover-bg:var(--bdz-600); --bs-btn-hover-border-color:var(--bdz-600);
  --bs-btn-active-bg:var(--bdz-700); --bs-btn-active-border-color:var(--bdz-700);
  --bs-btn-disabled-bg:var(--bdz); --bs-btn-disabled-border-color:var(--bdz);
}
.btn-outline-primary{
  --bs-btn-color:var(--bdz); --bs-btn-border-color:var(--bdz);
  --bs-btn-hover-bg:var(--bdz); --bs-btn-hover-border-color:var(--bdz);
  --bs-btn-active-bg:var(--bdz-600); --bs-btn-active-border-color:var(--bdz-600);
}
.btn-accent{
  --bs-btn-color:#1a1206; --bs-btn-bg:var(--bdz-accent); --bs-btn-border-color:var(--bdz-accent);
  --bs-btn-hover-color:#1a1206; --bs-btn-hover-bg:var(--bdz-accent-600); --bs-btn-hover-border-color:var(--bdz-accent-600);
}
.card{
  border-radius:var(--bdz-radius);
  background-color:var(--bdz-surface);
  border-color:var(--bdz-border);
}
.shadow-sm{ box-shadow:var(--bdz-shadow)!important; }
.badge-soft{ background:color-mix(in srgb, var(--bdz) 12%, transparent); color:var(--bdz); }

/* ---------- 4) موبايل أولاً — أهداف لمس مريحة ---------- */
@media (max-width: 575.98px){
  .btn{ min-height:var(--bdz-touch); }
  .btn-sm{ min-height:38px; }
  .form-control, .form-select{ min-height:var(--bdz-touch); font-size:1rem; }
  h1, .display-6{ font-size:1.6rem; }
}
/* جداول قابلة للتمرير أفقياً بسلاسة على الهاتف */
.table-responsive{ -webkit-overflow-scrolling:touch; }

/* ---------- 5) شريط تنقّل سفلي للموبايل (لوحة المالك) ---------- */
.bdz-bottomnav{
  position:fixed; inset-inline:0; bottom:0; z-index:1035;
  display:flex; justify-content:space-around; align-items:stretch;
  background:var(--bdz-surface); border-top:1px solid var(--bdz-border);
  box-shadow:0 -4px 16px rgba(0,0,0,.08); padding:4px 2px;
  padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
}
.bdz-bottomnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:6px 2px; color:var(--bdz-muted); font-size:.68rem; line-height:1.1;
  min-height:56px; border-radius:var(--bdz-radius-sm);
}
.bdz-bottomnav a .ico{ font-size:1.25rem; }
.bdz-bottomnav a.active, .bdz-bottomnav a:active{ color:var(--bdz); background:var(--bdz-surface-2); }
.bdz-bottomnav a.bdz-fab .ico{
  background:var(--bdz); color:#fff; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-top:-18px;
  box-shadow:var(--bdz-shadow-lg); font-size:1.4rem;
}
.bdz-bottomnav a.bdz-fab{ color:var(--bdz); font-weight:700; }
/* مساحة سفلية كي لا يغطّي الشريط المحتوى (على الموبايل فقط) */
@media (max-width: 991.98px){ .bdz-app{ padding-bottom:74px; } }

/* ---------- 6) زر تبديل الثيم ---------- */
.bdz-theme-btn{ border:0; background:transparent; cursor:pointer; line-height:1; padding:.25rem .4rem; font-size:1.05rem; }

/* ---------- 7) الموقع التسويقي (.mk-*) — موحّدة هنا بالـtokens ---------- */
.mk-hero{ background:linear-gradient(135deg, var(--bdz), var(--bdz-2)); color:#fff; }
.mk-nav{ background:var(--bdz-surface); box-shadow:0 1px 0 var(--bdz-border); }
.mk-brand b{ color:var(--bdz); } .mk-brand span{ color:var(--bdz-accent); }
.mk-card{
  border:0; background:var(--bdz-surface); box-shadow:var(--bdz-shadow);
  border-radius:var(--bdz-radius); transition:transform .2s, box-shadow .2s; height:100%;
}
.mk-card:hover{ transform:translateY(-3px); box-shadow:var(--bdz-shadow-lg); }
.mk-search input{ height:56px; border-radius:.9rem 0 0 .9rem; font-size:1.05rem; }
.mk-search .btn{ height:56px; border-radius:0 .9rem .9rem 0; }
.mk-price{ border:1px solid var(--bdz-border); border-radius:var(--bdz-radius-lg); background:var(--bdz-surface); }
.mk-price.featured{ border:2px solid var(--bdz); box-shadow:0 14px 40px color-mix(in srgb, var(--bdz) 16%, transparent); }
.mk-price .price{ font-size:2.4rem; font-weight:800; color:var(--bdz-text); }
.mk-price ul{ list-style:none; padding:0; margin:0; }
.mk-price li{ padding:.35rem 0; color:var(--bdz-muted); }
.mk-price li::before{ content:"✓"; color:var(--bdz); font-weight:800; margin-inline-end:.5rem; }
.mk-wa{
  position:fixed; inset-inline-end:18px; bottom:18px; z-index:1030; background:#25D366; color:#fff;
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.mk-wa:hover{ color:#fff; opacity:.92; }
footer.mk-foot{ background:#0b1324; color:#cbd5e1; }
[data-bs-theme="dark"] footer.mk-foot{ background:#060b16; }
footer.mk-foot a{ color:#cbd5e1; }
footer.mk-foot a:hover{ color:#fff; }