/* =========================================================
   Digital Layer — تصميم الواجهة v3 (فخم + مرح)
   متجر زد — ثيم نمو
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --dl-navy: #0B1F3A;
  --dl-blue: #1E6FD9;
  --dl-blue-mid: #4C8DE8;
  --dl-blue-pale: #CFE0F7;
  --dl-ivory: #FBFBF8;     /* خلفية دافية فخمة بدل الأبيض الصريح */
  --dl-white: #FFFFFF;
  --dl-text: #1A2433;
  --dl-muted: #7A8597;
  --dl-line: #E7EAF0;
  /* درجات باستيل مرحة للأقسام والصور */
  --dl-sky: #E3EEFC;
  --dl-lilac: #ECE8FB;
  --dl-mint: #E2F5EE;
  --dl-peach: #FCEDE4;
  --dl-radius: 26px;
  --dl-pill: 999px;
  --dl-soft: 0 18px 40px -18px rgba(11, 31, 58, 0.25);
  --dl-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- عام ---------- */
body {
  font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif !important;
  background: var(--dl-ivory) !important;
  color: var(--dl-text);
  letter-spacing: .1px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif !important;
  color: var(--dl-navy);
  font-weight: 700;
  letter-spacing: -.3px;
}
[class*="price"] { font-family: 'Poppins', 'IBM Plex Sans Arabic', sans-serif !important; }
a { color: var(--dl-navy); transition: color .2s ease; }
a:hover { color: var(--dl-blue); }
::selection { background: var(--dl-blue-pale); color: var(--dl-navy); }

/* ---------- شريط الإعلانات ---------- */
[class*="announcement"], [class*="top-bar"], [class*="topbar"] {
  background: var(--dl-navy) !important;
  color: var(--dl-white) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .4px;
}

/* ---------- الهيدر ---------- */
header {
  background: var(--dl-ivory) !important;
  border-bottom: 1px solid var(--dl-line);
}
header nav a, header .nav-link, header [class*="menu"] a {
  color: var(--dl-navy) !important;
  font-weight: 500;
  position: relative;
}
/* خط سفلي ينزلق عند المرور */
header nav a::after, header .nav-link::after {
  content: "";
  position: absolute;
  right: 0; bottom: -4px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--dl-blue);
  transition: width .3s var(--dl-bounce);
}
header nav a:hover::after, header .nav-link:hover::after,
header nav a.active::after, header .nav-link.active::after { width: 100%; }

/* ---------- الأزرار ---------- */
.btn, button[type="submit"], .btn-primary,
[class*="add-to-cart"], [class*="addToCart"], [class*="buy-now"] {
  border-radius: var(--dl-pill) !important;
  font-weight: 600 !important;
  padding-inline: 24px !important;
  transition: transform .3s var(--dl-bounce), background .2s ease, color .2s ease, box-shadow .2s ease !important;
}
.btn-primary, button[type="submit"], [class*="buy-now"] {
  background: var(--dl-navy) !important;
  border: none !important;
  color: var(--dl-white) !important;
}
.btn-primary:hover, button[type="submit"]:hover, [class*="buy-now"]:hover {
  background: var(--dl-blue) !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 22px -10px rgba(30, 111, 217, .6);
}
[class*="add-to-cart"], [class*="addToCart"] {
  background: var(--dl-navy) !important;
  border: none !important;
  color: var(--dl-white) !important;
}
[class*="add-to-cart"]:hover, [class*="addToCart"]:hover {
  background: var(--dl-blue) !important;
  transform: scale(1.04);
}
.btn-outline-primary, .btn-secondary {
  background: transparent !important;
  color: var(--dl-navy) !important;
  border: 1.5px solid var(--dl-navy) !important;
}
.btn-outline-primary:hover, .btn-secondary:hover {
  background: var(--dl-navy) !important;
  color: var(--dl-white) !important;
}

/* ---------- بطاقات المنتجات: بدون حدود، صورة على خلفية باستيل ---------- */
[class*="product-card"], [class*="product-item"], [class*="productCard"], .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform .4s var(--dl-bounce);
}
[class*="product-card"]:hover, [class*="product-item"]:hover,
[class*="productCard"]:hover, .card:hover {
  transform: translateY(-6px) rotate(-1deg);
}
[class*="product-card"] img, [class*="product-item"] img, .card img {
  border-radius: var(--dl-radius) !important;
  background: var(--dl-sky);
  transition: box-shadow .3s ease, transform .5s ease;
}
/* تبديل ألوان الخلفيات بين البطاقات للمسة مرحة */
[class*="product-card"]:nth-child(4n+2) img, [class*="product-item"]:nth-child(4n+2) img { background: var(--dl-lilac); }
[class*="product-card"]:nth-child(4n+3) img, [class*="product-item"]:nth-child(4n+3) img { background: var(--dl-mint); }
[class*="product-card"]:nth-child(4n+4) img, [class*="product-item"]:nth-child(4n+4) img { background: var(--dl-peach); }
[class*="product-card"]:hover img, [class*="product-item"]:hover img, .card:hover img {
  box-shadow: var(--dl-soft);
}

[class*="product-card"] [class*="title"], [class*="product-item"] [class*="title"],
[class*="product-name"] {
  color: var(--dl-navy) !important;
  font-weight: 600;
}
[class*="product-card"] [class*="price"], [class*="product-item"] [class*="price"] {
  color: var(--dl-navy) !important;
  font-weight: 600;
}
del, s, [class*="old-price"], [class*="compare"] { color: var(--dl-muted) !important; font-weight: 400; }

[class*="badge"], [class*="discount"], [class*="sale"] {
  background: var(--dl-white) !important;
  color: var(--dl-blue) !important;
  border-radius: var(--dl-pill) !important;
  font-weight: 600;
  padding: 4px 12px !important;
  box-shadow: 0 4px 12px -4px rgba(11, 31, 58, .2);
}

/* ---------- عناوين الأقسام: كبيرة وفخمة مع نقطة زرقاء ---------- */
section h2, [class*="section-title"], [class*="sectionTitle"] {
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 700;
}
section h2::after, [class*="section-title"]::after, [class*="sectionTitle"]::after {
  content: ".";
  color: var(--dl-blue);
}

/* ---------- تقييمات العملاء ---------- */
[class*="review"], [class*="testimonial"], [class*="comment-item"] {
  background: var(--dl-white) !important;
  border: 1px solid var(--dl-line) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  transition: transform .4s var(--dl-bounce), box-shadow .3s ease;
}
[class*="review"]:hover, [class*="testimonial"]:hover {
  transform: translateY(-4px) rotate(-.6deg);
  box-shadow: var(--dl-soft);
}
/* تبديل خلفيات باستيل بين التقييمات */
[class*="review"]:nth-child(3n+2), [class*="testimonial"]:nth-child(3n+2) { background: var(--dl-sky) !important; border-color: transparent !important; }
[class*="review"]:nth-child(3n+3), [class*="testimonial"]:nth-child(3n+3) { background: var(--dl-lilac) !important; border-color: transparent !important; }
/* النجوم */
[class*="rating"] i, [class*="rating"] svg, [class*="stars"] i, [class*="stars"] svg,
.fa-star {
  color: #F2A93B !important;
  fill: #F2A93B !important;
}
/* اسم العميل */
[class*="review"] [class*="name"], [class*="testimonial"] [class*="name"] {
  color: var(--dl-navy) !important;
  font-weight: 600;
}
[class*="review"] p, [class*="testimonial"] p {
  color: var(--dl-text);
  line-height: 1.8;
}
/* شارة "مشتري موثّق" إن وجدت */
[class*="verified"] {
  color: var(--dl-blue) !important;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- الحقول ---------- */
input, select, textarea, .form-control {
  border-radius: 14px !important;
  border: 1px solid var(--dl-line) !important;
  background: var(--dl-white) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--dl-blue) !important;
  box-shadow: 0 0 0 4px rgba(30, 111, 217, 0.12) !important;
  outline: none;
}

/* ---------- الفوتر ---------- */
footer, .footer {
  background: var(--dl-navy) !important;
  color: rgba(255, 255, 255, .72) !important;
  border-radius: 36px 36px 0 0;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { color: var(--dl-white) !important; }
footer a { color: rgba(255, 255, 255, .72) !important; }
footer a:hover { color: var(--dl-white) !important; }

/* ---------- شريط التمرير ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--dl-ivory); }
::-webkit-scrollbar-thumb { background: var(--dl-blue-pale); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--dl-blue-mid); }

/* ---------- الجوال ---------- */
@media (max-width: 768px) {
  [class*="product-card"]:hover, [class*="product-item"]:hover, .card:hover { transform: none; }
  footer, .footer { border-radius: 26px 26px 0 0; }
}

/* =========================================================
   ضبط خاص لثيم نمو (أسماء العناصر الفعلية في dlayer.store)
   ========================================================= */

/* متغيرات الثيم نفسه: تستبدل اللون البيج والأسود الافتراضي */
:root {
  --primary: #0B1F3A !important;
  --primary-foreground: #FFFFFF !important;
  --accent: #1E6FD9 !important;
  --secondary: #FBFBF8 !important;
  --background: #FBFBF8 !important;
  --foreground: #0B1F3A !important;
  --border: #E7EAF0 !important;
  --input: #E7EAF0 !important;
  --muted: #7A8597 !important;
  --ring: #1E6FD9 !important;
  --radius: 14px !important;
}

/* الأزرار */
.btn { border-radius: 999px !important; font-weight: 600 !important; transition: transform .3s var(--dl-bounce), background .2s ease, color .2s ease !important; }
.btn-filled, .btn-primary, .btn-solid {
  background: var(--dl-navy) !important; color: #fff !important; border: none !important;
}
.btn-filled:hover, .btn-primary:hover, .btn-solid:hover {
  background: var(--dl-blue) !important; transform: translateY(-2px) scale(1.03);
}
.btn-outlined {
  background: transparent !important; color: var(--dl-navy) !important;
  border: 1.5px solid var(--dl-navy) !important;
}
.btn-outlined:hover { background: var(--dl-navy) !important; color: #fff !important; }

/* بطاقة المنتج */
div.group:has(> a.overflow-hidden img) {
  transition: transform .4s var(--dl-bounce);
}
div.group:has(> a.overflow-hidden img):hover { transform: translateY(-6px) rotate(-1deg); }

div.group > a.overflow-hidden:has(img) {
  border-radius: var(--dl-radius) !important;
  background: var(--dl-sky);
  transition: box-shadow .3s ease;
}
div.group:hover > a.overflow-hidden:has(img) { box-shadow: var(--dl-soft); }
div.group > a.overflow-hidden img { mix-blend-mode: multiply; }

/* خلفيات باستيل متبدلة بين المنتجات */
.products-embla__slide:nth-child(4n+2) div.group > a.overflow-hidden,
[data-grid] > *:nth-child(4n+2) div.group > a.overflow-hidden { background: var(--dl-lilac); }
.products-embla__slide:nth-child(4n+3) div.group > a.overflow-hidden,
[data-grid] > *:nth-child(4n+3) div.group > a.overflow-hidden { background: var(--dl-mint); }
.products-embla__slide:nth-child(4n+4) div.group > a.overflow-hidden,
[data-grid] > *:nth-child(4n+4) div.group > a.overflow-hidden { background: var(--dl-peach); }

/* اسم المنتج والسعر */
div.group h3, div.group h3 a { color: var(--dl-navy) !important; font-weight: 600 !important; font-size: 15px !important; }
div.group p.text-foreground { color: var(--dl-navy) !important; font-weight: 600; font-family: 'Poppins', 'IBM Plex Sans Arabic', sans-serif !important; }

/* الشارات (غير متوفر / خصم) */
.badge {
  background: #fff !important; color: var(--dl-blue) !important;
  border-radius: 999px !important; font-weight: 600 !important;
  padding: 4px 12px !important; border: none !important;
  box-shadow: 0 4px 12px -4px rgba(11, 31, 58, .2);
}

/* زر المفضلة على الصورة */
div.group .btn-icon {
  background: #fff !important; color: var(--dl-navy) !important;
  border-radius: 50% !important; backdrop-filter: none !important;
}
div.group .btn-icon:hover { background: var(--dl-navy) !important; color: #fff !important; }

/* شريط تقدم السلايدر وأزرار التنقل */
.products-embla__progress { background: var(--dl-line) !important; }
.products-embla__progress-bar { background: var(--dl-blue) !important; }
.products-embla__prev, .products-embla__next {
  background: #fff !important; border: 1px solid var(--dl-line) !important;
  border-radius: 50% !important; color: var(--dl-navy) !important;
}
.products-embla__prev:hover, .products-embla__next:hover { background: var(--dl-navy) !important; color: #fff !important; }

/* الهيدر */
header.bg-secondary { background: var(--dl-ivory) !important; }
header a.hover\:underline:hover { text-decoration: none !important; color: var(--dl-blue) !important; }

/* ---------- البانر الرئيسي (قسم Hero في نمو) ----------
   يعرض صورة البانر كاملة بدون قص، ويشيل الطبقة الملونة والنصوص الافتراضية،
   ويخلّي البانر كله قابل للضغط على رابط الزر */
.section-hero { min-height: 0 !important; aspect-ratio: 1920 / 720; padding: 0 !important; }
@media (max-width: 767px) { .section-hero { aspect-ratio: 1 / 1; } }
.section-hero .bg-primary.absolute { display: none !important; }
.section-hero .theme-container { position: absolute !important; inset: 0; max-width: none !important; z-index: 20; }
.section-hero .theme-container span,
.section-hero .theme-container h1,
.section-hero .theme-container p { display: none !important; }
.section-hero .theme-container .btn { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0 !important; }

/* ---------- شعار الفوتر: بطاقة فاتحة عشان يبان على الكحلي ---------- */
footer .space-y-4 > img { background: #FBFBF8; padding: 12px 18px; border-radius: 18px; box-sizing: content-box; }

/* ---------- شعار الهيدر في الجوال (كان يطلع بعرض صفر) ---------- */
header a.shrink-0 img { max-width: none !important; }
/* توسيط شعار الهيدر في الجوال (يتحرك مع الهيدر) */
header a.shrink-0 { position: static !important; }
@media (max-width: 767px) {
  header a.shrink-0 img { position: absolute !important; left: 50% !important; }
}
a.group > div.aspect-square.overflow-hidden { border-radius: 26px !important; transition: box-shadow .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
a.group:hover > div.aspect-square.overflow-hidden { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 18px 40px -18px rgba(11,31,58,.25); }
a.group:hover > div.aspect-square img { transform: none !important; }
a.group > div.aspect-square + * { font-weight: 600; color: #0B1F3A; }
.section-categories .embla__slide { flex: 0 0 170px !important; max-width: 170px !important; }
@media (max-width: 767px) { .section-categories .embla__slide { flex: 0 0 140px !important; max-width: 140px !important; } }
.section-categories a.group > div.overflow-hidden { border-radius: 26px !important; transition: box-shadow .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.section-categories a.group > div.overflow-hidden img { aspect-ratio: 1 / 1 !important; }
.section-categories a.group:hover > div.overflow-hidden { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 18px 40px -18px rgba(11,31,58,.25); }
.section-categories a.group:hover img { transform: none !important; }
.section-categories a.group h3 { font-size: 16px !important; text-align: center !important; color: #0B1F3A !important; }
.section-categories .embla__viewport { padding: 8px 4px 12px; }
header nav a.hover\:underline { white-space: nowrap !important; }
header nav .lg\:flex.gap-6 { gap: 20px !important; }
header nav a.hover\:underline { white-space: nowrap !important; }
header nav .lg\:flex.gap-6 { gap: 20px !important; }