/* ============================================
   برق الخالدية — Custom CSS
   القالب: zid v3.36.0 | IBM Plex Sans Arabic
   الألوان: #eaa528 (ذهبي) | #182845 (كحلي)
   ============================================ */

/* ── المتغيرات الأساسية ── */
:root {
  --font-family:        'IBM Plex Sans Arabic', sans-serif;

  /* ألوان القالب */
  --primary:            #182845;
  --primary-foreground: #FFFFFF;
  --secondary:          #f4f6f9;
  --foreground:         #182845;
  --background:         #FFFFFF;
  --muted:              #4a5568;
  --accent:             #eaa528;
  --border:             #d1d9e6;
  --ring:               #182845;
  --radius:             6px;

  /* متغيرات المتجر المخصصة */
  --brq-navy:           #182845;
  --brq-navy-dark:      #0f1c31;
  --brq-navy-light:     rgba(255,255,255,0.10);
  --brq-navy-mid:       #243d66;
  --brq-gold:           #eaa528;
  --brq-gold-dark:      #c8891a;
  --brq-gold-light:     #fef8ec;
  --brq-shadow-sm:      0 2px 8px rgba(24,40,69,0.08);
  --brq-shadow-md:      0 6px 24px rgba(24,40,69,0.12);
  --brq-shadow-lg:      0 14px 40px rgba(24,40,69,0.16);
  --brq-transition:     all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════
   1. الهيدر — خلفية كحلية
═══════════════════════════════════ */
header {
  background: var(--brq-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(234,165,40,0.25) !important;
  transition: box-shadow 0.3s ease;
}

.sticky.top-0 header {
  box-shadow: 0 4px 20px rgba(24,40,69,0.35) !important;
}

/* اللوجو */
header nav a[aria-label="الرئيسية"] img {
  filter: brightness(1);
}

/* روابط القائمة */
header nav ul li a {
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: var(--brq-transition);
}

header nav ul li a:hover {
  background: rgba(234,165,40,0.18);
  color: var(--brq-gold) !important;
}

/* زر المزيد */
header nav button[popovertarget="more-menu-popover"] {
  font-weight: 500;
  color: #ffffff !important;
  padding: 6px 10px;
  border-radius: 6px;
  transition: var(--brq-transition);
}

header nav button[popovertarget="more-menu-popover"]:hover {
  background: rgba(234,165,40,0.18);
  color: var(--brq-gold) !important;
}

header nav button[popovertarget="more-menu-popover"] svg path {
  stroke: #ffffff !important;
}

/* Popover */
#more-menu-popover {
  background: var(--brq-navy) !important;
  border: 1px solid rgba(234,165,40,0.25) !important;
  border-radius: 10px !important;
  box-shadow: var(--brq-shadow-lg) !important;
}

#more-menu-popover a {
  color: #ffffff !important;
}

#more-menu-popover a:hover {
  background: rgba(234,165,40,0.15) !important;
  color: var(--brq-gold) !important;
}

/* أيقونات الهيدر */
header nav button[aria-label],
header nav a[aria-label] {
  border-radius: 8px;
  color: #ffffff !important;
  transition: var(--brq-transition);
}

header nav button[aria-label]:hover,
header nav a[aria-label]:hover {
  background: rgba(234,165,40,0.18);
  color: var(--brq-gold) !important;
}

header nav svg,
header nav svg path,
header nav svg line,
header nav svg circle {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: currentColor;
}

/* أيقونات الهيدر — path بـ fill */
header svg[fill="none"] path[fill="currentColor"] {
  fill: #ffffff !important;
}

/* عداد السلة */
[data-cart-badge],
.cart-count {
  background: var(--brq-gold) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(234,165,40,0.45) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════
   2. القائمة الجانبية للجوال
═══════════════════════════════════ */
#mobile-drawer > div > el-dialog-panel > div > .bg-background {
  background: var(--brq-navy) !important;
}

#mobile-drawer a,
#mobile-drawer button {
  font-size: 15px !important;
  font-weight: 500;
  color: #ffffff !important;
  border-radius: 8px;
  margin: 1px 12px;
  padding: 12px 16px !important;
  width: calc(100% - 24px) !important;
  transition: var(--brq-transition);
}

#mobile-drawer a:hover,
#mobile-drawer button:hover {
  background: rgba(234,165,40,0.15) !important;
  color: var(--brq-gold) !important;
}

/* خط الفصل في الـ drawer */
#mobile-drawer [class*="border-t"] {
  border-color: rgba(234,165,40,0.2) !important;
}

/* ═══════════════════════════════════
   3. البحث
═══════════════════════════════════ */
#search-dialog .form-input-wrapper {
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#search-dialog .form-input-wrapper:focus-within {
  border-color: var(--brq-gold) !important;
  box-shadow: 0 0 0 3px rgba(234,165,40,0.15) !important;
}

[data-search-products] a {
  border-radius: 10px;
  overflow: hidden;
  transition: var(--brq-transition);
}

[data-search-products] a:hover {
  transform: translateY(-3px);
  box-shadow: var(--brq-shadow-md);
}

/* ═══════════════════════════════════
   4. بطاقات المنتجات
═══════════════════════════════════ */
[data-product-card],
article[class*="product"] {
  transition: var(--brq-transition);
  border-radius: calc(var(--radius) + 4px) !important;
  overflow: hidden;
  border-color: rgba(24,40,69,0.08) !important;
}

[data-product-card]:hover,
article[class*="product"]:hover {
  transform: translateY(-5px);
  box-shadow: var(--brq-shadow-md);
  border-color: rgba(234,165,40,0.3) !important;
}

[data-product-card] img,
article[class*="product"] img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-product-card]:hover img,
article[class*="product"]:hover img {
  transform: scale(1.05);
}

[data-product-card]:hover h2,
[data-product-card]:hover h3 {
  color: var(--brq-gold) !important;
}

[data-product-card] [class*="price"],
[data-product-card] [class*="sale"] {
  font-weight: 700 !important;
  color: var(--brq-navy) !important;
}

/* ═══════════════════════════════════
   5. الأزرار
═══════════════════════════════════ */
[data-add-to-cart],
button[class*="add-to-cart"] {
  background: var(--brq-navy) !important;
  border-color: var(--brq-navy) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(24,40,69,0.20) !important;
  transition: var(--brq-transition) !important;
}

[data-add-to-cart]:hover,
button[class*="add-to-cart"]:hover {
  background: var(--brq-gold) !important;
  border-color: var(--brq-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(234,165,40,0.30) !important;
}

[data-buy-now],
button[class*="buy-now"] {
  background: var(--brq-gold-light) !important;
  color: var(--brq-gold-dark) !important;
  border: 1.5px solid rgba(234,165,40,0.25) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: var(--brq-transition) !important;
}

[data-buy-now]:hover,
button[class*="buy-now"]:hover {
  background: #fdefc4 !important;
  border-color: var(--brq-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(234,165,40,0.18) !important;
}

button.bg-primary,
a.bg-primary {
  background: var(--brq-navy) !important;
  border-color: var(--brq-navy) !important;
  color: #fff !important;
  border-radius: 8px !important;
  transition: var(--brq-transition) !important;
}

button.bg-primary:hover,
a.bg-primary:hover {
  background: var(--brq-gold) !important;
  border-color: var(--brq-gold) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(234,165,40,0.25) !important;
}

/* ═══════════════════════════════════
   6. التصنيفات
═══════════════════════════════════ */
a[href*="/categories/"] {
  transition: var(--brq-transition);
  display: block;
  overflow: hidden;
}

a[href*="/categories/"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--brq-shadow-md);
}

a[href*="/categories/"] img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

a[href*="/categories/"]:hover img {
  transform: scale(1.06);
}

/* ═══════════════════════════════════
   7. الفوتر — خلفية كحلية
═══════════════════════════════════ */
footer {
  background: var(--brq-navy) !important;
  color: #ffffff !important;
  border-top: 3px solid var(--brq-gold) !important;
}

footer * {
  color: rgba(255,255,255,0.85) !important;
}

footer a {
  color: rgba(255,255,255,0.75) !important;
  transition: var(--brq-transition);
}

footer a:hover {
  color: var(--brq-gold) !important;
  text-decoration: none !important;
}

footer h2,
footer h3,
footer h4,
footer strong,
footer [class*="title"],
footer [class*="heading"] {
  color: #ffffff !important;
  font-weight: 700 !important;
}

footer p {
  color: rgba(255,255,255,0.65) !important;
}

footer svg,
footer svg path,
footer svg circle {
  color: rgba(255,255,255,0.7) !important;
  stroke: rgba(255,255,255,0.7) !important;
  fill: currentColor;
}

footer a:hover svg,
footer a:hover svg path {
  color: var(--brq-gold) !important;
  stroke: var(--brq-gold) !important;
}

/* خطوط الفصل في الفوتر */
footer [class*="border"],
footer hr,
footer [class*="divider"] {
  border-color: rgba(255,255,255,0.12) !important;
}

/* أيقونات التواصل الاجتماعي */
footer a[href*="whatsapp"],
footer a[href*="instagram"],
footer a[href*="twitter"],
footer a[href*="snapchat"],
footer a[href*="tiktok"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  transition: var(--brq-transition);
  color: rgba(255,255,255,0.75) !important;
}

footer a[href*="whatsapp"]:hover,
footer a[href*="instagram"]:hover,
footer a[href*="twitter"]:hover,
footer a[href*="snapchat"]:hover,
footer a[href*="tiktok"]:hover {
  background: var(--brq-gold) !important;
  border-color: var(--brq-gold) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* الـ copyright / bottom bar */
footer [class*="copyright"],
footer [class*="bottom-bar"],
footer [class*="footer-bottom"] {
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.45) !important;
}

/* شريط "زد" في آخر الفوتر */
footer [class*="zid-branding"],
footer a[href*="zid.sa"] {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

footer a[href*="zid.sa"]:hover {
  opacity: 0.9;
}

/* ═══════════════════════════════════
   8. Inputs
═══════════════════════════════════ */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brq-gold) !important;
  box-shadow: 0 0 0 3px rgba(234,165,40,0.12) !important;
  outline: none !important;
}

/* ═══════════════════════════════════
   9. Skeleton Loading
═══════════════════════════════════ */
.animate-pulse {
  background: linear-gradient(
    90deg,
    #eef1f7 25%,
    #dde3ef 50%,
    #eef1f7 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: brqShimmer 1.6s ease-in-out infinite !important;
}

@keyframes brqShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════
   10. تحسينات الجوال
═══════════════════════════════════ */
@media (max-width: 1023px) {
  .sticky.top-0 {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }
}

@media (max-width: 767px) {
  :root { --cols-mobile: 2; }
  [data-product-card]:hover { transform: none; }
}

/* ═══════════════════════════════════
   11. تفاصيل بصرية
═══════════════════════════════════ */
::selection {
  background: rgba(234,165,40,0.22);
  color: var(--brq-navy-dark);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f4f6f9; }
::-webkit-scrollbar-thumb {
  background: #d1d9e6;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brq-gold); }

body { animation: brqPageIn 0.3s ease both; }

@keyframes brqPageIn {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}
[section-id="1b2a581e-d554-4e99-8ec6-3c56d32749db"] {
    min-height: 228px;
}
[section-id="ff72413d-a239-48ad-aa76-df9384a744fb"] {
    min-height: 151px;
}
.bg-background, .bg-background\/10 {
    background-color: #182845;
}
.btn svg {
    color: #eaa528;
}