@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap');

:root {
  --color-bg: #faf7f2;
  --color-surface: #ffffff;
  --color-primary: #8b5e3c;
  --color-primary-dark: #6b4527;
  --color-accent: #c9a24b;
  --color-text: #2b241f;
  --color-text-light: #6f665d;
  --color-border: #ece5db;
  --color-danger: #c0392b;
  --color-success: #2e7d4f;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(43, 36, 31, 0.08);
  --shadow-hover: 0 10px 32px rgba(43, 36, 31, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: 'Tajawal', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  overflow-x: hidden;
  max-width: 100vw;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Header (v5.1: هيكل من صفّين) ===== */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-top-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 18px;
  min-width: 0;
}
.header-bottom-row {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.header-bottom-row .nav-links { padding: 10px 20px; }
.logo {
  font-size: 22px;
  font-weight: 900;
  color: var(--color-primary-dark);
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.logo span { color: var(--color-accent); }

.nav-links {
  display: flex;
  justify-content: center;
  gap: 26px;
  font-weight: 500;
}
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--color-primary); }

.header-search-wrap { position: relative; flex: 1; max-width: 420px; min-width: 0; }
.search-form {
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  width: 100%;
  min-width: 0;
}
/* P2-E (Accessibility): الحقل الداخلي يُزيل outline الافتراضي (لسبب تصميمي - لا حدود مزدوجة
   بصندوق دائري متداخل) - لكن بلا أي بديل ظاهر كان هذا يُلغي مؤشر التركيز بالكامل لمستخدمي
   لوحة المفاتيح على أهم عنصر بحث بالموقع (يظهر بكل صفحة). نُضيف بديلاً واضحاً على الحاوية
   نفسها بدلاً من ذلك - يعمل بكل المتصفحات، ولا يغيّر الشكل البصري الافتراضي إطلاقاً */
.search-form:focus-within {
  box-shadow: 0 0 0 2px var(--color-primary);
}
.search-form input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  padding: 6px 10px;
}
.search-form button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  flex-shrink: 0;
}
.header-top-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-inline-start: auto; }

/* ===== v5.1: نتائج البحث الفوري (Live AJAX Search) ===== */
.live-search-results {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; left: 0;
  background: var(--color-surface); border-radius: 12px; box-shadow: var(--shadow-hover);
  max-height: 400px; overflow-y: auto; z-index: 110;
}
.live-search-results.open { display: block; }
.live-search-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--color-border);
}
.live-search-item:last-child { border-bottom: none; }
.live-search-item:hover { background: var(--color-bg); }
.live-search-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--color-bg); }
.live-search-item-info { min-width: 0; flex: 1; }
.live-search-item-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-search-item-meta { font-size: 12px; color: var(--color-text-light); }
.live-search-empty, .live-search-loading { padding: 16px; text-align: center; font-size: 13px; color: var(--color-text-light); }
.live-search-view-all { display: block; text-align: center; padding: 10px; font-size: 13px; font-weight: 700; color: var(--color-primary); background: var(--color-bg); }

/* ===== v5.1: زر القائمة بالجوال ===== */
.mobile-menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 30px; height: 30px; background: none; border: none; cursor: pointer; padding: 0;
}
.mobile-menu-toggle span { width: 100%; height: 2.5px; background: var(--color-primary-dark); border-radius: 2px; }

/* ===== Hero / Banners ===== */
.hero-slider {
  border-radius: var(--radius);
  overflow: hidden;
  margin: 24px 0;
  box-shadow: var(--shadow);
}
.hero-slider img { width: 100%; height: auto; object-fit: cover; max-height: 420px; }

/* ===== Section headers ===== */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 40px 0 20px;
}
.section-title h1, .section-title h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-dark);
  position: relative;
  padding-right: 14px;
  margin: 0;
}
.section-title h1::before, .section-title h2::before {
  content: '';
  position: absolute;
  right: 0; top: 4px; bottom: 4px;
  width: 4px;
  background: var(--color-accent);
  border-radius: 4px;
}
.section-title a { color: var(--color-primary); font-size: 14px; font-weight: 500; }

/* ===== Categories ===== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 160px));
  justify-content: center;
  gap: 16px;
}
.category-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
  text-align: center;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.category-card .cat-img { height: 110px; background: var(--color-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.category-card .cat-img img { width: 100%; height: 100%; object-fit: cover; }
.category-card .cat-name { padding: 12px 8px; font-weight: 600; font-size: 15px; }

/* ===== Products grid =====
   v5.3: auto-fit + justify-content:center بدل auto-fill + 1fr - يمنع "تعليق" الصف الأخير
   بمحاذاة واحدة عند وجود عدد منتجات لا يملأ الصف بالكامل (مثلاً قسم فيه منتجان فقط) */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 260px));
  justify-content: center;
  gap: 20px;
}

.product-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.product-image {
  aspect-ratio: 1 / 1;
  background: var(--color-bg);
  overflow: hidden;
  position: relative;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.product-card:hover .product-image img { transform: scale(1.06); }

.badge-out {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(43,36,31,0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.badge-featured {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

.product-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-title {
  font-size: 15px; font-weight: 600; line-height: 1.35; min-height: 41px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.price-now { font-size: 18px; font-weight: 800; color: var(--color-primary-dark); }
.price-contact-us { font-size: 14px; font-weight: 700; color: var(--color-primary); }
.price-old { font-size: 13px; color: var(--color-text-light); text-decoration: line-through; }

.colors-row { display: flex; gap: 6px; margin-top: 2px; min-height: 18px; }
.color-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: background .2s, opacity .2s, transform .1s;
  font-family: inherit;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-primary); color: #FFFFFF !important; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-whatsapp { background: #25D366; color: #fff; width: 100%; }
.btn-whatsapp:hover { background: #1ebe57; }
.btn-outline { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); }
.btn-disabled { background: #d8d2c8; color: #8a8378; cursor: not-allowed; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 13px; }

/* ===== Product detail page ===== */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 32px 0;
}
@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }

.gallery-main {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--color-surface);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; }
.gallery-thumbs img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 10px;
  cursor: pointer; border: 2px solid transparent; opacity: .7;
}
.gallery-thumbs img.active { border-color: var(--color-primary); opacity: 1; }

.product-detail h1 { font-size: 28px; margin: 0 0 8px; color: var(--color-primary-dark); }
.detail-price { font-size: 30px; font-weight: 900; color: var(--color-primary-dark); margin: 12px 0; }
.vat-inclusive-note { font-size: 12.5px; font-weight: 400; color: var(--color-text-light); margin-top: 4px; }
.detail-desc { color: var(--color-text-light); margin: 16px 0; white-space: pre-line; }
.product-details-box { background: var(--color-bg); border-radius: var(--radius); padding: 18px 20px; margin: 16px 0; }
.product-details-title { margin: 0 0 10px; font-size: 15px; color: var(--color-primary-dark); }
.product-details-body { color: var(--color-text-light); white-space: pre-line; line-height: 1.9; font-size: 14px; }

.color-options { display: flex; gap: 10px; margin: 10px 0 20px; flex-wrap: wrap; }
.color-option {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-size: 14px; transition: border-color .2s;
}
.color-option.selected { border-color: var(--color-primary); background: #fbf3e8; }
.color-swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }

/* ===== Footer ===== */
.site-footer {
  background: var(--color-primary-dark);
  color: #f4ede1;
  margin-top: 60px;
  padding: 40px 0 20px;
}
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.footer-copy { text-align: center; opacity: .7; font-size: 13px; padding-top: 20px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,.1); width:100%; }
/* v5: إصلاح تباين لوگو الفوتر - كان بنفس لون الخلفية الداكنة فيختفي */
.site-footer .logo { color: #fff; }
.site-footer .logo span { color: var(--color-accent); }

.whatsapp-float {
  position: fixed; bottom: 24px; left: 24px; z-index: 60;
  background: #25D366; color: #fff; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-hover);
}

.empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-light); }

/* ===== Admin ===== */
.admin-body { background: #f3f1ec; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 240px; background: var(--color-primary-dark); color: #fff;
  padding: 24px 16px; flex-shrink: 0;
}
.admin-sidebar .logo { color: #fff; margin-bottom: 30px; display:block; }
.admin-sidebar a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 4px;
  color: #e9dfcf; font-weight: 500; font-size: 14.5px;
}
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,.12); color: #fff; }

/* ===== v6.20: قائمة "التقارير" الرئيسية القابلة للطي بلوحة التحكم ===== */
.admin-nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 4px; background: none; border: none;
  color: #e9dfcf; font-weight: 500; font-size: 14.5px; font-family: inherit; cursor: pointer;
}
.admin-nav-group-toggle:hover, .admin-nav-group-toggle.active { background: rgba(255,255,255,.12); color: #fff; }
.admin-nav-group-arrow { font-size: 11px; transition: transform .2s; }
.admin-nav-group-menu { max-height: 0; overflow: hidden; transition: max-height .2s ease; padding-inline-start: 14px; }
.admin-nav-group-menu.open { max-height: 200px; }
.admin-nav-group-toggle.active .admin-nav-group-arrow { transform: rotate(180deg); }
.admin-nav-group-menu a { font-size: 13.5px; padding: 9px 14px; }

.admin-main { flex: 1; padding: 28px 32px; }

.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin-bottom: 30px; }
.stat-card { background: var(--color-surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.stat-card .num { font-size: 28px; font-weight: 900; color: var(--color-primary-dark); }
.stat-card .label { color: var(--color-text-light); font-size: 13.5px; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--color-border); font-size: 14px; vertical-align: middle; }
.admin-table th { background: var(--color-bg); font-weight: 700; color: var(--color-text-light); }
.admin-table img.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }

.status-pill { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.status-available { background: #e5f6ec; color: var(--color-success); }
.status-out { background: #fbe9e7; color: var(--color-danger); }

.form-card { background: var(--color-surface); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); max-width: 720px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.form-group input[type=text], .form-group input[type=number], .form-group input[type=password],
.form-group input[type=email], .form-group textarea, .form-group select {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--color-border);
  font-family: inherit; font-size: 14.5px; background: #fff;
}
.form-group textarea { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #f4ede1, #e8dcc7);
}
.login-card { background: #fff; border-radius: 18px; padding: 40px; width: 360px; box-shadow: var(--shadow-hover); text-align: center; }
.login-card .logo { justify-content: center; margin-bottom: 6px; font-size: 26px; }
.alert-error { background: #fbe9e7; color: var(--color-danger); padding: 10px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; }

@media (max-width: 780px) {
  .mobile-menu-toggle { display: flex; }
  /* v6.5: قائمة منسدلة حقيقية أسفل الهيدر مباشرة (بدل قائمة جانبية منزلقة من الحافة) -
     أبسط وأوضح كـ"قائمة منسدلة"، ولا تحتاج أي حساب يدوي لاتجاه RTL/LTR إطلاقاً */
  .header-bottom-row {
    position: absolute; top: 100%; inset-inline: 0; z-index: 90;
    max-height: 0; overflow: hidden; background: var(--color-surface);
    transition: max-height .25s ease; box-shadow: 0 12px 24px rgba(0,0,0,.12); border-top: none;
  }
  .header-bottom-row.open { max-height: 70vh; overflow-y: auto; }
  .header-bottom-row .nav-links, .header-bottom-row .container { padding: 16px; }
  .nav-links { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; }
  .nav-dropdown { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-dropdown-menu { position: static; box-shadow: none; padding: 4px 0 4px 14px; min-width: 0; }
  .header-search-wrap { max-width: none; }
  .site-header { position: relative; }
  .admin-sidebar { position: fixed; right: -260px; transition: right .2s; height: 100%; z-index: 80; }
  .admin-sidebar.open { right: 0; }
  .admin-main { padding: 20px 16px; }
  .form-row { grid-template-columns: 1fr; }
}
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 85;
}
.mobile-nav-overlay.open { display: block; }

/* ===== Cart icon in nav ===== */
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.cart-count-badge {
  background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 999px; display: none;
  align-items: center; justify-content: center; padding: 0 4px;
}

/* ===== Dual CTA on product detail ===== */
.dual-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.dual-cta-row .btn { flex: 1; min-width: 160px; }
.btn-cart { border-color: var(--color-primary); }

/* ===== Dual CTA on product cards ===== */
.card-cta-row { display: flex; gap: 8px; padding: 0 16px 16px; }
.card-cta-row .card-add-cart-btn { flex: 0 0 44px; }
.card-cta-row .card-whatsapp-link { flex: 1; text-align: center; }

/* ===== Cart page ===== */
.cart-items-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.cart-item-row {
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; display: flex; align-items: center; gap: 14px;
}
.cart-item-img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--color-bg); }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { font-weight: 700; font-size: 15px; }
.cart-item-color { font-size: 12.5px; color: var(--color-text-light); }
.cart-item-price { font-weight: 800; color: var(--color-primary-dark); margin-top: 2px; }
.cart-item-qty { display: flex; align-items: center; gap: 10px; }
.qty-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--color-border);
  background: #fff; cursor: pointer; font-size: 16px; font-weight: 700;
}
.qty-value { min-width: 20px; text-align: center; font-weight: 700; }

.cart-summary-box { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; max-width: 400px; }
.cart-total-row { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; color: var(--color-primary-dark); }

/* ===== Checkout payment options ===== */
.payment-option {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--color-border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 14.5px;
}

/* ===== Order tracking pipeline ===== */
.order-track-card { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px; }
.order-track-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
/* v5.4: صفحة تتبع الطلب - حاوية متمركزة متوازنة على كل الأجهزة */
.track-order-page-wrap { max-width: 720px; margin: 0 auto; }

.status-pipeline { display: flex; align-items: center; margin: 24px 0 8px; }
.pipeline-step { flex: 1; text-align: center; position: relative; }
.pipeline-step::before {
  content: ''; position: absolute; top: 9px; inset-inline-end: 50%; width: 100%; height: 3px;
  background: var(--color-border); z-index: 0;
}
.pipeline-step:first-child::before { display: none; }
.pipeline-step.completed::before { background: var(--color-primary); }
.pipeline-dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-border);
  margin: 0 auto 8px; position: relative; z-index: 1; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; line-height: 1;
}
.pipeline-step.completed .pipeline-dot { background: var(--color-primary); color: #fff; }
.pipeline-label { font-size: 12px; color: var(--color-text-light); font-weight: 600; }
.pipeline-step.completed .pipeline-label { color: var(--color-primary-dark); }

@media (max-width: 600px) {
  .dual-cta-row { flex-direction: column; }
  .status-pipeline { flex-wrap: wrap; }
}

/* ===== Nav dropdown (categories) - v5: قسم رئيسي واحد لكل رابط بالقائمة العلوية ===== */
.nav-dropdown { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dropdown-link { font-weight: 500; }
.nav-dropdown-toggle {
  background: none; border: none; font-family: inherit; font-size: 11px; font-weight: 500;
  color: var(--color-text-light); cursor: pointer; padding: 2px;
}
.nav-dropdown-toggle:hover { color: var(--color-primary); }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 16px); right: 0;
  background: var(--color-surface); border-radius: 12px; box-shadow: var(--shadow-hover);
  padding: 14px; z-index: 100; min-width: 200px; flex-direction: column; gap: 6px;
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-child { font-size: 13.5px; color: var(--color-text-light); padding: 4px; white-space: nowrap; }
.nav-dropdown-child:hover { color: var(--color-primary); }
.nav-links { flex-wrap: wrap; row-gap: 10px; }

/* ===== Category carousel (homepage) ===== */
.category-carousel-wrap { position: relative; margin: 20px 0; }
.category-carousel {
  display: flex; justify-content: center; gap: 16px; overflow-x: auto; scroll-behavior: smooth; padding: 6px 2px 14px;
  scrollbar-width: thin;
}
.carousel-card {
  flex: 0 0 auto; width: 120px; text-align: center; background: var(--color-surface);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .2s;
}
.carousel-card:hover { transform: translateY(-4px); }
.carousel-card-sub { width: 100px; opacity: .92; }
.carousel-card-img {
  height: 90px; background: var(--color-bg); display: flex; align-items: center; justify-content: center;
  font-size: 32px; overflow: hidden;
}
.carousel-card-img img { width: 100%; height: 100%; object-fit: cover; }
.carousel-card-name { padding: 10px 6px; font-size: 13px; font-weight: 600; }
.carousel-arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border);
  background: #fff; box-shadow: var(--shadow); cursor: pointer; font-size: 20px; z-index: 5;
  display: flex; align-items: center; justify-content: center; color: var(--color-primary-dark);
}
.carousel-arrow-prev { left: -6px; }
.carousel-arrow-next { right: -6px; }

/* ===== Subcategory filter pills ===== */
.subcategory-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.subcategory-pill {
  background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 999px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: var(--color-text);
}
.subcategory-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.subcategory-pill.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ===== WhatsApp booking modal ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(43,36,31,0.55);
  z-index: 200; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff; border-radius: 18px; padding: 28px; width: 100%; max-width: 420px;
  position: relative; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-hover);
}
.modal-close {
  position: absolute; top: 14px; left: 14px; background: var(--color-bg); border: none;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; color: var(--color-text-light);
}
.modal-title { margin: 0 0 4px; font-size: 19px; color: var(--color-primary-dark); }
.modal-product-name { color: var(--color-text-light); font-size: 13.5px; margin: 0 0 18px; }

/* ===== Checkout WhatsApp notice ===== */
.whatsapp-notice {
  display: flex; align-items: center; gap: 10px; background: #e9f9ef; border: 1px solid #cdeedb;
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: #1f7a44;
}

/* ===== Order confirmation page ===== */
.confirmation-box { text-align: center; padding: 40px 20px; max-width: 620px; margin: 0 auto; }
.confirmation-icon { font-size: 52px; margin-bottom: 10px; }
.confirmation-box h1 { color: var(--color-primary-dark); font-size: 24px; margin: 0 0 8px; }
.confirmation-sub { font-size: 15px; color: var(--color-text-light); margin: 0 0 14px; }
.confirmation-order-summary { text-align: right; margin-top: 34px; }

@media (max-width: 780px) {
  .nav-dropdown-menu { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; min-width: 0; }
}

/* ===== v4: أصناف Grid/Table مشتركة متجاوبة (بدل الـ inline styles الثابتة) ===== */
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.two-col-grid-wide { grid-template-columns: 1.4fr 1fr; }
.two-col-grid-narrow { grid-template-columns: 1fr 320px; }
@media (max-width: 900px) {
  .two-col-grid, .two-col-grid-wide, .two-col-grid-narrow { grid-template-columns: 1fr; }
}
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .admin-table { min-width: 560px; }

/* ===== v4: شارات المنتج الفاخرة (خصم / جديد / الأكثر مبيعاً) ===== */
.badges-stack-left {
  position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.badges-stack-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.badge-discount, .badge-new, .badge-bestseller {
  display: inline-block; font-size: 11.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.badge-discount { background: var(--color-danger); }
.badge-new { background: var(--color-success); }
.badge-bestseller { background: var(--color-primary-dark); }
.gallery-main { position: relative; }
.gallery-main .badge-discount { top: 12px; left: 12px; }

/* ===== v4: بطاقة إحصائية مميزة بلوحة التحكم ===== */
.stat-card-highlight { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }
.stat-card-highlight .num, .stat-card-highlight .label { color: #fff; }

/* ===== v4: الشريط الإعلاني المتحرك (Marquee) ===== */
.announcement-ticker {
  background: var(--color-primary-dark); color: #ffffff; overflow: hidden; white-space: nowrap;
  padding: 8px 0; font-size: 13.5px; font-weight: 600;
  /* v5.11: السبب الجذري الحقيقي لعودة مشكلة الاختفاء بالعربي - كنا نثبّت اتجاه العنصر
     الداخلي (.announcement-ticker-track) فقط، لكن الحاوية الخارجية هذي نفسها كانت تظل
     ترث dir="rtl" من الصفحة، وهي المسؤولة فعلياً عن تحديد موضع العنصر الداخلي الأساسي
     (يمين الحاوية بالعربي، يسار الحاوية بالإنجليزي) قبل حتى تبدأ حركة الأنيميشن - فيختل
     حساب الحركة بالكامل بالعربي تحديداً. تثبيت الاتجاه هنا أيضاً يضمن أن نقطة البداية
     الأساسية للعنصر الداخلي واحدة ثابتة دائماً بغض النظر عن لغة الصفحة، والفرق الوحيد
     بين اللغتين يبقى فقط في اتجاه حركة التحريك نفسه (كما هو مطلوب) */
  direction: ltr;
}
/* v5.8: أعدنا بناء تقنية الشريط بالكامل بنمط "المحتوى المكرر" (Seamless Loop) بدل خدعة
   padding-percentage القديمة الهشة. نضاعف نص الرسالة مرتين متتاليتين (بفاصل مسافة) ونحرّك
   المسار بمقدار 50% بالضبط من عرضه الكلي - هذا يضمن أن النص يبدأ دائماً من أول حرف فيه عند
   اللحظة صفر، ويدور بحلقة سلسة بدون أي قطع أو "قفزة" مرئية، بغض النظر عن طول النص أو عرض الشاشة */
.announcement-ticker-track {
  display: inline-flex; white-space: nowrap; direction: ltr;
  animation: ticker-scroll-ltr 22s linear infinite; /* الافتراضي: عربي (حركة من اليسار لليمين حسب الطلب) */
}
/* v5.10: فاصل بعرض الشاشة كاملة (100vw) بدل مسافة ثابتة صغيرة - يضمن عدم ظهور نسخة النص
   المكرَّرة (المستخدمة داخلياً فقط لتحقيق حلقة تحريك سلسة) على الشاشة أبداً في نفس اللحظة
   مع النسخة الأصلية، بغض النظر عن طول النص أو حجم الشاشة */
.announcement-ticker-msg { padding-inline-end: 100vw; }
/* v5.9: مسافة واضحة بين رسائل الشريط المتعددة + فاصل مصمّم بدل نقطة نصية بسيطة */
.ticker-msg-item { display: inline-block; }
.ticker-msg-sep {
  display: inline-block; margin: 0 18px; opacity: .6; font-size: 10px; vertical-align: middle;
}
html[dir="ltr"] .announcement-ticker-track { animation-name: ticker-scroll-rtl; } /* إنجليزي: من اليمين لليسار حسب الطلب */
@keyframes ticker-scroll-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ticker-scroll-ltr {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.announcement-ticker:hover .announcement-ticker-track { animation-play-state: paused; }

/* ===== v4: فوتر محسّن ===== */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; width: 100%; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 { margin: 0 0 14px; font-size: 15px; color: #fff; }
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; opacity: .85; }
.footer-newsletter-form { display: flex; gap: 6px; margin-top: 4px; }
.footer-newsletter-form input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: none; font-family: inherit; font-size: 13.5px;
}
.footer-newsletter-form button {
  background: var(--color-accent); color: #fff; border: none; border-radius: 8px; padding: 0 16px; font-weight: 700; cursor: pointer;
}
.footer-social-row { display: flex; gap: 10px; margin-top: 12px; }
.footer-social-row a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff;
}
.footer-social-row a:hover { background: var(--color-accent); }
/* v6.6: نسخة الأيقونات للخلفيات الفاتحة (صفحة اتصل بنا) - نفس الأيقونات لكن بلون داكن يناسب خلفية بيضاء */
.contact-social-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.contact-social-row .footer-social-row a { background: var(--color-bg); color: var(--color-primary-dark); }
.contact-social-row .footer-social-row a:hover { background: var(--color-primary); color: #fff; }
.footer-payment-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.footer-payment-badge {
  background: rgba(255,255,255,.1); border-radius: 6px; padding: 5px 10px; font-size: 11.5px; font-weight: 700;
}

/* ===== v4: صفحات محتوى ثابتة (من نحن / سياسة الخصوصية / اتصل بنا) ===== */
.static-page { max-width: 780px; margin: 32px auto; }
.static-page h1 { color: var(--color-primary-dark); font-size: 26px; }
.static-page-body { white-space: pre-line; color: var(--color-text-light); line-height: 2; }
.contact-info-box { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-top: 20px; font-size: 14.5px; }

/* ===== v4: خيارات الدفع بصفحة الدفع ===== */
.payment-method-row { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 18px; }
.payment-method-option {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--color-border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 14.5px; transition: border-color .2s;
}
.payment-method-option:has(input:checked) { border-color: var(--color-primary); background: #fbf3e8; }
.payment-method-option img { height: 20px; }

/* ===== v4: Toast تفاعلي ===== */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 10px;
  max-width: 320px;
}
.toast {
  background: var(--color-surface); color: var(--color-text); border-radius: 12px; box-shadow: var(--shadow-hover);
  padding: 14px 18px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px;
  border-right: 4px solid var(--color-primary); animation: toast-in .25s ease-out;
}
.toast-success { border-right-color: var(--color-success); }
.toast-error { border-right-color: var(--color-danger); }
.toast.toast-hide { animation: toast-out .25s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } }

@media (max-width: 600px) {
  .toast-container { right: 12px; left: 12px; max-width: none; }
}

/* ===== v4: مبدّل اللغة + دعم أساسي للـ LTR (الإنجليزية) ===== */
.lang-toggle-link {
  border: 1.5px solid var(--color-border); border-radius: 999px; padding: 4px 12px !important;
  font-size: 12.5px; font-weight: 800;
}
.lang-toggle-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

html[dir="ltr"] body { direction: ltr; text-align: left; }
html[dir="ltr"] .section-title h1, html[dir="ltr"] .section-title h2 { padding-right: 0; padding-left: 14px; }
html[dir="ltr"] .section-title h1::before, html[dir="ltr"] .section-title h2::before { right: auto; left: 0; }
html[dir="ltr"] .whatsapp-float { left: auto; right: 24px; }
html[dir="ltr"] .badges-stack-left { right: auto; left: 12px; }
html[dir="ltr"] .badge-out { left: auto; right: 12px; }
html[dir="ltr"] .gallery-main .badge-discount { left: auto; right: 12px; }
html[dir="ltr"] .toast { border-right: none; border-left: 4px solid var(--color-primary); }
html[dir="ltr"] .toast-success { border-left-color: var(--color-success); }
html[dir="ltr"] .toast-error { border-left-color: var(--color-danger); }
html[dir="ltr"] .toast-container { right: auto; left: 24px; }
html[dir="ltr"] .invoice-meta { text-align: right; }
html[dir="ltr"] .invoice-table th, html[dir="ltr"] .invoice-table td { text-align: left; }

/* ===== v5.3: مطابقة/انعكاس كامل لعناصر إضافية بالإنجليزية (LTR) ===== */
html[dir="ltr"] .nav-dropdown-menu { right: auto; left: 0; }
html[dir="ltr"] .modal-close { left: auto; right: 14px; }
html[dir="ltr"] .carousel-arrow-prev { left: auto; right: -6px; }
html[dir="ltr"] .carousel-arrow-next { right: auto; left: -6px; }

/* ===== v5.2: صف رسالة الشريط الإعلاني بلوحة التحكم ===== */
.ticker-message-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ticker-message-row .ticker-msg-text { flex: 1; }
.ticker-message-row .ticker-msg-active { width: 18px; height: 18px; flex-shrink: 0; }
.ticker-message-row .ticker-msg-color { width: 34px; height: 34px; padding: 2px; flex-shrink: 0; border-radius: 8px; border: 1.5px solid var(--color-border); cursor: pointer; }
.ticker-message-row .btn { flex-shrink: 0; padding: 6px 10px; }

/* ===== v5.2: أيقونة الريال السعودي الرسمية (SVG) ===== */
.sar-icon {
  width: 0.78em; height: 0.78em; fill: currentColor; display: inline-block;
  vertical-align: -0.05em; margin: 0 1px;
}
.sar-icon-img {
  width: 0.78em; height: 0.78em; display: inline-block; vertical-align: -0.05em; margin: 0 1px;
  opacity: .85;
}
.price-old .sar-icon, .price-old .sar-icon-img { opacity: .7; }
@media (max-width: 600px) {
  html[dir="ltr"] .toast-container { left: 12px; right: 12px; }
}

/* ===== v5: Breadcrumbs ===== */
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px;
  color: var(--color-text-light); margin: 16px 0 4px;
}
.breadcrumbs a { color: var(--color-text-light); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumb-sep { opacity: .5; }
.breadcrumb-current { color: var(--color-primary-dark); font-weight: 700; }

/* ===== v5: كاروسيل بانرات الرئيسية (Auto-play) ===== */
.hero-slider { position: relative; overflow: hidden; border-radius: var(--radius); }
.hero-slide { display: none; }
.hero-slide.active { display: block; }
.hero-slide img { width: 100%; display: block; }
.hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; border: none; padding: 0; }
.hero-dot.active { background: #fff; width: 22px; border-radius: 5px; }

/* ===== v5: شارة الخصم بجانب السعر (بدل فوق صورة المنتج) ===== */
.badge-discount-inline {
  display: inline-block; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  color: #fff; background: var(--color-danger); margin-inline-start: 8px; vertical-align: middle;
}

/* ===== v5: منتجات تهمك (Cart Cross-sell) ===== */
.cross-sell-section { margin-top: 40px; }
.cross-sell-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.cross-sell-scroll .product-card { min-width: 200px; max-width: 200px; flex-shrink: 0; }

/* ===== v5: مكتبة الصور (Media Library) ===== */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.media-item { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: var(--color-surface); }
.media-item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.media-item-actions { display: flex; gap: 4px; padding: 6px; }
.media-item-actions .btn { flex: 1; font-size: 11px; padding: 5px 4px; }
.media-picker-hint { background: #fbf3e8; border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }

/* ===== v6.21: نظام مجلدات مكتبة الصور ===== */
.media-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .media-layout { grid-template-columns: 1fr; } }
.media-folders-sidebar { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; position: sticky; top: 20px; }
.media-folder-link {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px; margin-bottom: 3px; color: var(--color-text);
}
.media-folder-link:hover { background: var(--color-bg); }
.media-folder-link.active { background: var(--color-primary); color: #fff; }
.media-folder-count { font-size: 11px; opacity: .75; }
.media-item-more-btn { border-radius: 0 !important; }
.media-item-more-panel { display: none; padding: 10px; border-top: 1px solid var(--color-border); background: var(--color-bg); }
.media-item-more-panel.open { display: block; }
.media-item-more-panel select, .media-item-more-panel input[type="file"] {
  width: 100%; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--color-border); font-family: inherit;
}

/* ===== v6.22: معرض المجلدات بأيقونات كلاسيكية (شبيهة بمجلدات ويندوز الصفراء) ===== */
.folder-gallery-wrap { margin-bottom: 8px; }
.folder-gallery { display: flex; gap: 10px; overflow-x: auto; padding: 10px 4px 16px; scrollbar-width: thin; }
.folder-icon-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px; border-radius: 12px; flex-shrink: 0; width: 108px;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.folder-icon-card:hover { background: var(--color-bg); }
.folder-icon-card.active { background: #e3f0fc; }

.folder-icon { position: relative; width: 84px; height: 66px; }
.folder-icon-tab {
  position: absolute; top: 0; right: 6px; width: 38px; height: 12px;
  background: linear-gradient(180deg, #ffe08a, #ffcf5c);
  border-radius: 5px 5px 0 0;
}
.folder-icon-back {
  position: absolute; top: 7px; inset-inline: 0; bottom: 0;
  background: linear-gradient(160deg, #ffdc85, #ffbe4d);
  border-radius: 6px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.06);
}
.folder-icon-preview {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 56%; height: 60%; object-fit: cover; background: #fff;
  border-radius: 3px; box-shadow: 0 3px 6px rgba(0,0,0,.22); border: 1px solid rgba(0,0,0,.06);
  z-index: 1;
}
.folder-icon-front {
  position: absolute; bottom: 0; inset-inline: 0; height: 62%;
  background: linear-gradient(180deg, #ffcf60, #f7a828);
  border-radius: 0 8px 8px 8px;
  box-shadow: inset 0 3px 5px rgba(255,255,255,.5);
  z-index: 2;
}
.folder-icon-name {
  font-size: 12px; font-weight: 600; text-align: center; max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text);
}
.folder-icon-count { font-size: 10.5px; color: var(--color-text-light); }

.folder-icon-add-btn { justify-content: center; }
.folder-icon-add {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--color-border); border-radius: 10px; color: var(--color-text-light); font-size: 28px;
}
.folder-icon-add-btn:hover .folder-icon-add { border-color: var(--color-primary); color: var(--color-primary); }

.new-folder-inline-form { display: none; gap: 8px; margin: 4px 4px 12px; }
.new-folder-inline-form.open { display: flex; }
.new-folder-inline-form input[type="text"] {
  padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--color-border); font-family: inherit; font-size: 13.5px; flex: 1; max-width: 260px;
}

/* ===== v6.24: معاينة الصورة بالحجم الكامل بمكتبة الصور ===== */
.media-preview-trigger { cursor: zoom-in; transition: opacity .15s; }
.media-preview-trigger:hover { opacity: .85; }
.media-preview-overlay { align-items: center; justify-content: center; padding: 30px; }
.media-preview-image {
  max-width: 90vw; max-height: 88vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.4); object-fit: contain; background: #fff;
}
.media-preview-overlay .modal-close { position: fixed; top: 20px; left: 20px; background: rgba(255,255,255,.9); }

/* ===== v6.25: اسم الصورة الأصلي معروضاً أسفل المعاينة بمكتبة الصور ===== */
.media-item-name {
  font-size: 11px; color: var(--color-text-light); padding: 6px 8px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}

/* ===== v5: صفحة الفاتورة القابلة للطباعة ===== */
.invoice-page { max-width: 720px; margin: 0 auto; background: #fff; padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow); }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--color-border); padding-bottom: 20px; margin-bottom: 20px; }
.invoice-header .logo { font-size: 22px; }
.invoice-meta { text-align: left; font-size: 13.5px; color: var(--color-text-light); }
.invoice-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.invoice-table th, .invoice-table td { padding: 10px; border-bottom: 1px solid var(--color-border); font-size: 14px; text-align: right; }
.invoice-total-row { font-weight: 900; font-size: 18px; color: var(--color-primary-dark); }
.invoice-actions { text-align: center; margin-top: 24px; }
@media print {
  .site-header, .site-footer, .invoice-actions, .whatsapp-float, .toast-container, .no-print, .admin-sidebar, .admin-topbar { display: none !important; }
  .invoice-page { box-shadow: none; padding: 0; }
  body { background: #fff; }
}

/* ===== v6: تقارير الزوار ===== */
.report-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; }
.report-custom-range-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-custom-range-form input[type="date"] {
  padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--color-border); font-family: inherit; font-size: 13.5px;
}
.country-code-badge {
  display: inline-block; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 5px; padding: 1px 6px; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  color: var(--color-text-light); margin-left: 6px;
}

/* ===== v6.2: محرر نص منسّق بسيط (Rich Text Editor) لمحتوى الصفحات الثابتة ===== */
.rich-editor { border: 1.5px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.rich-editor-toolbar {
  display: flex; align-items: center; gap: 4px; padding: 8px; background: var(--color-bg);
  border-bottom: 1.5px solid var(--color-border); flex-wrap: wrap;
}
.rich-editor-btn {
  background: #fff; border: 1px solid var(--color-border); border-radius: 6px; width: 30px; height: 30px;
  cursor: pointer; font-size: 13px; font-family: inherit; display: flex; align-items: center; justify-content: center;
}
.rich-editor-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rich-editor-clear { width: auto; padding: 0 10px; font-size: 12px; }
.rich-editor-sep { width: 1px; height: 20px; background: var(--color-border); margin: 0 4px; }
.rich-editor-size {
  border: 1px solid var(--color-border); border-radius: 6px; padding: 5px 6px; font-family: inherit; font-size: 12.5px; background: #fff;
}
.rich-editor-color { width: 30px; height: 30px; padding: 2px; border-radius: 6px; border: 1px solid var(--color-border); cursor: pointer; }
.rich-editor-content {
  min-height: 130px; padding: 12px 14px; font-family: inherit; font-size: 14.5px; line-height: 1.9;
  outline: none; background: #fff;
}
.rich-editor-content:empty::before { content: attr(data-placeholder); color: var(--color-text-light); }

/* ===== v6.3: بطاقة البانر بلوحة التحكم + نص فوق البانر بالموقع ===== */
.banner-admin-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); width: 220px; }
.hero-slide { position: relative; }
.hero-slide-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 5% 6%; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
  text-align: start;
}
html[dir="ltr"] .hero-slide-overlay { background: linear-gradient(270deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%); }
.hero-slide-title { font-size: clamp(18px, 3.2vw, 32px); font-weight: 900; margin: 0 0 8px; max-width: 60%; line-height: 1.3; }
.hero-slide-subtitle { font-size: clamp(12px, 1.4vw, 16px); font-weight: 500; margin: 0 0 16px; max-width: 55%; opacity: .95; }
.hero-slide-btn {
  display: inline-block; background: var(--color-accent); color: #fff !important; padding: 9px 22px;
  border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
@media (max-width: 600px) {
  .hero-slide-title, .hero-slide-subtitle { max-width: 85%; }
  .hero-slide-overlay { padding: 6% 8%; }
}

/* ===== v6.11: خلية اسم القسم الفرعي بجدول الأقسام - تبسيط كامل بدون أي رمز/عنصر زخرفي
   (النسخ السابقة بمؤشر مزخرف/span متداخل كانت تسبب اختلال ارتفاع الصف عن بقية خلاياه،
   فيبدو خط الفاصل بين الصفوف "منقطعاً". الحل الأضمن: مسافة بادئة + لون فاتح فقط، بدون
   أي عنصر إضافي داخل الخلية يقدر يؤثر على ارتفاعها الطبيعي) ===== */
/* ===== v6.12: خلية اسم القسم الفرعي بجدول الأقسام - مؤشر تمييز على صندوق الخلية نفسها
   (border على الخلية، مو عنصر داخل تدفّق النص) - يعطي تمييزاً بصرياً واضحاً بدون أي تأثير
   على ارتفاع الخلية أو محاذاتها، لأن الحدود جزء من نموذج الصندوق (Box Model) وليست جزءاً
   من تدفّق المحتوى النصي (Inline Flow) الذي يتأثر بـ line-height ===== */
.subcategory-name-cell {
  padding-inline-start: 30px; color: var(--color-text-light);
  border-inline-start: 3px solid var(--color-accent);
}

/* ===== v6.12: إعادة تصميم عمود "إجراءات" بجدول الأقسام - أنظف وأكثر تنظيماً =====
   بدل 5 أزرار/فورمات منفصلة بصف واحد مباشرة على الخلية (كان يسبب تفاوت بارتفاع الصفوف
   حسب طول نص الزر "إخفاء" مقابل "إظهار")، نستخدم الآن حاوية داخلية بارتفاع أدنى ثابت،
   ومجموعة الترتيب (↑↓) مفصولة بصرياً بشكل مضغوط عن باقي الأزرار */
.admin-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 34px; }
.admin-row-reorder { display: inline-flex; border: 1.5px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.admin-row-reorder button {
  background: #fff; border: none; width: 28px; height: 30px; cursor: pointer; font-size: 13px;
  color: var(--color-text-light); display: flex; align-items: center; justify-content: center;
}
.admin-row-reorder button:first-child { border-inline-end: 1px solid var(--color-border); }
.admin-row-reorder button:hover { background: var(--color-bg); color: var(--color-primary); }
.admin-table .status-pill { white-space: nowrap; }

/* ===== v6.17: نظام تقييمات المنتجات (نجوم + تعليقات) ===== */
.review-stars { color: var(--color-accent); font-size: 15px; letter-spacing: 1px; margin: 0 8px; }
.review-admin-card { border-inline-start: 3px solid var(--color-border); }
.review-summary { display: flex; align-items: center; gap: 10px; margin: 8px 0 20px; }
.review-summary-stars { color: var(--color-accent); font-size: 20px; letter-spacing: 2px; }
.review-summary-count { color: var(--color-text-light); font-size: 13.5px; }
.review-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.review-item { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.review-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 6px; }
.review-item-name { font-weight: 700; font-size: 14px; }
.review-item-date { font-size: 12px; color: var(--color-text-light); }
.review-item-comment { font-size: 14px; color: var(--color-text-light); white-space: pre-line; line-height: 1.8; }
.review-toggle-btn { background: none; border: none; color: var(--color-primary); font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 0; }
.review-form-box { display: none; background: var(--color-bg); border-radius: var(--radius); padding: 18px; margin-top: 12px; }
.review-form-box.open { display: block; }
.review-star-picker { display: flex; gap: 4px; font-size: 26px; margin-bottom: 12px; direction: ltr; justify-content: flex-end; }
html[dir="ltr"] .review-star-picker { justify-content: flex-start; }
.review-star-picker span { cursor: pointer; color: var(--color-border); transition: color .15s; }
.review-star-picker span.active { color: var(--color-accent); }

/* ===== B3.4.4C: مدخل حساب العميل - يُعيد استعمال آلية nav-dropdown المقبولة =====
   ⚠️ ولا آلية انسدال ثانية: الفتح/الإغلاق وسلوك الجوال يأتيان من قواعد nav-dropdown نفسها.
   ⚠️ وهذي القواعد **موضعية مقصورة على `.header-top-actions`** لأن قاعدة الجوال المقبولة
      تجعل `.nav-dropdown` عمودياً بعرض كامل (وهو الصحيح داخل صفّ الأقسام، لا صفّ الأدوات). */
.header-top-actions .account-nav { position: relative; }
.account-nav-toggle { font-size: 15px; line-height: 1; display: flex; align-items: center; gap: 4px; }
.account-nav-toggle span { font-size: 12.5px; }
.account-nav-form { margin: 0; }
.account-nav-signout {
  background: none; border: none; font-family: inherit; cursor: pointer;
  padding: 4px; text-align: inherit; width: 100%;
}
@media (max-width: 780px) {
  /* ⚠️ داخل صفّ الأدوات يبقى المدخل أفقياً بعرضه الطبيعي - والقائمة نفسها تتبع
     سلوك الجوال المقبول (ورقة سفلية) بلا تغيير. */
  .header-top-actions .nav-dropdown { flex-direction: row; align-items: center; width: auto; }
}