/* =========================================
   القوام المثالي — ثيم وردي فاخر (ألوان الشعار)
   نسخة مُنقّاة + فوتر وردي كامل نصه أسود
   ========================================= */

/* 0) نظام الألوان */
:root{
  --rose: #d58b9b;          /* وردي الشعار */
  --rose-dark: #b56a7a;     /* هوفر */
  --rose-light: #f3c5cf;    /* لمسات فاتحة */
  --ink: #2b2d34;           /* نص داكن */
  --cream: #f7f5f6;         /* خلفية عامة */
  --paper: #ffffff;         /* أبيض */
  --muted: #eef1f4;         /* رمادي خفيف */

  --color-primary: var(--rose) !important;
  --color-primary-dark: var(--rose-dark) !important;
  --color-primary-light: var(--rose-light) !important;
  --color-primary-reverse: var(--paper) !important;

  --main-text-color: var(--ink) !important;
  --color-text: var(--ink) !important;
  --bg-gray: var(--muted) !important;

  /* SweetAlert2 إصلاح متغيّر */
  --swal2-outline: 0 0 0 3px rgba(213,139,155,.35) !important;
}

/* 1) أساس الصفحة والخط */
html, body{
  font-family: "DINNextLTArabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
}
.overflow-x-hidden{ overflow-x:hidden !important; }

/* 2) الهيدر */
header.store-header .inner.bg-inherit{
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* 3) الروابط والأزرار */
a{ color: var(--rose); }
a:hover{ color: var(--rose-dark); }

.btn, .button, .s-button, button[type="submit"], [class*="btn-primary"]{
  background: var(--rose) !important;
  color: var(--paper) !important;
  border: 1px solid var(--rose) !important;
  border-radius: 14px !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover, .button:hover, .s-button:hover, [class*="btn-primary"]:hover{
  background: var(--rose-dark) !important;
  box-shadow: 0 8px 18px rgba(181,106,122,.22);
  transform: translateY(-1px);
}
.btn-outline, .button--outline, [class*="btn-outline"]{
  background: transparent !important;
  color: var(--rose) !important;
  border: 1.5px solid var(--rose) !important;
}
.btn-outline:hover, .button--outline:hover, [class*="btn-outline"]:hover{
  background: var(--rose) !important;
  color: var(--paper) !important;
}

/* 4) بطاقات المنتجات */
.product, .product-card, .product-item, .product-box{
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}
.product:hover, .product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.product .price, .product-card .price{ color: var(--rose) !important; font-weight:700; }
.product img, .product-card img{ border-radius: 14px; object-fit: cover; }

/* 5) شارات العروض */
.badge, .product-label, .sale-badge, .discount-badge{
  background: var(--rose) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  padding: .35rem .7rem !important;
  font-weight: 700;
}

/* 6) البنرات والنص فوق الصور */
.section-banner, .hero{ position:relative; }
.section-banner .overlay, .hero .overlay{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(43,45,52,.55), rgba(43,45,52,.05));
  pointer-events:none;
}
.section-banner h1, .section-banner h2, .hero h1, .hero h2,
.section-banner .subtitle, .hero .subtitle{
  color: var(--paper) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* 7) أقسام المزايا */
.features .item, .advantage, .icon-box{
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  padding: 22px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.features .item h3, .icon-box h3{ color: var(--rose); }

/* 8) آراء العملاء */
.testimonials-item, .testimonial{
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 20px 22px;
}
.testimonials-item p{ color: var(--ink); line-height: 1.9; }

/* ==============================
   9) الفوتر — وردي كامل + نص أسود
   ملاحظة: استخدمنا انتقائية أقوى + !important
   لإلغاء أي قواعد قديمة من الثيم.
   ============================== */

/* خلفية الفوتر لكل الطبقات المحتملة */
footer, .store-footer,
.store-footer .footer, .store-footer .footer-top, .store-footer .footer-bottom,
footer .footer, footer .footer-top, footer .footer-bottom,
.store-footer .container, footer .container{
  background: #d58b9b !important;
}

/* نص وأسود للكل (عناوين/روابط/أيقونات) */
footer, .store-footer,
footer *, .store-footer *{
  color: #000000 !important;
  border-color: rgba(0,0,0,.15) !important;
}

/* أيقونات SVG داخل الفوتر */
.store-footer svg, footer svg{
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* الروابط عند الهوفر */
footer a:hover, .store-footer a:hover{ color: #222222 !important; }

/* الزوايا والظل */
footer, .store-footer{
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,.06);
  padding-top: 28px;
}

/* 10) البحث والسلة */
.search-input input{
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 16px !important;
}
.header-cart .count, .cart-icon .count{
  background: var(--rose) !important;
  color: var(--paper) !important;
}

/* 11) عناوين الأقسام */
.section-title, h1, h2, h3{
  color: var(--rose) !important;
  letter-spacing: .2px;
}

/* 12) خلفيات وردية */
.bg-primary, .has-primary-bg{
  background: var(--rose) !important;
  color: var(--paper) !important;
}
.bg-primary *, .has-primary-bg *{ color: var(--paper) !important; }

/* 13) زر واتساب العائم (لا نغيّر لونه) */
a[href*="wa.me"], .whatsapp-floating{
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}

/* 14) SweetAlert2 */
.swal2-popup:where(.swal2-modal).swal2-show{
  box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
  border-radius: 14px !important;
}
.swal2-confirm{
  background: var(--rose) !important;
  border-radius: 10px !important;
}

/* 15) مسافات الأقسام */
.section, .container, .content-section{ scroll-margin-top: 90px; }

/* ===== Fix: إزالة المستطيلات البيضاء تحت الفوتر بالكامل ===== */

/* خلي الفوتر هو الحاكم */
footer, .store-footer{ position: relative; overflow: hidden; }

/* أي طبقة داخل الفوتر كانت أبيض (bottom/credits/payments…) */
footer .footer-bottom,
footer .footer-bottom .container,
footer .copyright,
footer .footer-copyright,
footer .payments,
footer .payment-methods,
footer .payment-methods .methods,
footer .payment-methods li,
footer .payment-methods .item,
.store-footer .footer-bottom,
.store-footer .footer-bottom .container,
.store-footer .copyright,
.store-footer .footer-copyright,
.store-footer .payments,
.store-footer .payment-methods,
.store-footer .payment-methods .methods,
.store-footer .payment-methods li,
.store-footer .payment-methods .item{
  background: #d58b9b !important;
  box-shadow: none !important;
}

/* سطر الكريدتز/منصة سلة اللي ينضاف خارج الفوتر */
footer + div,
.store-footer + div,
footer ~ .copyright,
footer ~ .footer-bottom,
footer ~ .footer-credits,
footer ~ .salla-credits,
footer ~ .salla-copyright,
body > .copyright,
body > .footer-bottom,
body > .footer-credits,
body > .salla-credits,
body > .salla-copyright{
  background: #d58b9b !important;
  color: #000 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* أي utilities داخل الفوتر تعطي bg-white أو مشابه */
.store-footer .bg-white,
.store-footer .bg-light,
.store-footer .bg-gray,
.store-footer .bg-grey,
footer .bg-white,
footer .bg-light,
footer .bg-gray,
footer .bg-grey{
  background: transparent !important;
}

/* لون الخط الفاصل */
.store-footer hr, footer hr,
.store-footer .separator, footer .separator{
  border-color: rgba(0,0,0,.15) !important;
}

/* مربّع خلف أيقونة واتساب */
.whatsapp-floating,
.whatsapp-floating *,
.whatsapp-widget,
.whatsapp-widget *{
  background: transparent !important;
}
/* ================== NUCLEAR FOOTER FIX ================== */
/* 1) ثبّت لون الفوتر كمصدر للخلفية */
:root{ --footer-bg:#d58b9b; }

footer, .store-footer{
  background: var(--footer-bg) !important;
  position: relative; overflow: hidden;
}

/* 2) أي عنصر داخل الفوتر يرجّع أبيض نخليه شفاف */
footer *:not(img):not(svg):not(path),
.store-footer *:not(img):not(svg):not(path){
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: rgba(0,0,0,.15) !important;
  color: #000 !important;
}
footer svg, .store-footer svg{ fill:#000 !important; stroke:#000 !important; }

/* 3) أشرطة الدفع/الكريدتس أحيانًا تكون خارج الفوتر بأسماء مختلفة */
body > .payments,
body > .payment-methods,
body > .list-payments,
body > .footer-bottom,
body > .footer-credits,
body > .copyright,
body > .salla-credits,
body > .salla-copyright,
body > [class*="payment"],
body > [class*="credits"],
body > [class*="copyright"],
body > [class*="salla"],
.store-footer .payments,
.store-footer .payment-methods,
.store-footer .list-payments,
.store-footer .footer-bottom,
.store-footer .footer-credits,
.store-footer .copyright{
  background: var(--footer-bg) !important;
  box-shadow: none !important;
  border: 0 !important;
  color:#000 !important;
}

/* 4) أي كونتينر داخلي للأشرطة السابقة */
.store-footer .payments *,
.store-footer .payment-methods *,
.store-footer .list-payments *,
.store-footer .footer-bottom *,
.store-footer .footer-credits *,
.store-footer .copyright *,
footer .payments *,
footer .payment-methods *,
footer .list-payments *,
footer .footer-bottom *,
footer .footer-credits *,
footer .copyright *{
  background: transparent !important;
  color:#000 !important;
}

/* 5) خطوط فواصل داخل الفوتر */
.store-footer hr, footer hr, .store-footer .separator, footer .separator{
  border-color: rgba(0,0,0,.15) !important;
}

/* 6) حالات Utilities شائعة في سلة */
.store-footer :is(.bg-white,.bg-light,.bg-gray,.bg-grey,.bg-neutral-50,.bg-gray-50),
footer :is(.bg-white,.bg-light,.bg-gray,.bg-grey,.bg-neutral-50,.bg-gray-50){
  background: transparent !important;
}

/* 7) آخر عنصر في الصفحة لو كان شريطاً أبيض مجهول */
body > :is(div,section,footer):last-child{
  background: var(--footer-bg) !important;
  box-shadow: none !important;
  border: 0 !important;
}