/* Add custom CSS styles below */ 

.s-product-card-vertical .s-button-wrap .s-button-primary-outline,
.s-product-card-horizontal .s-button-wrap .s-button-primary-outline {
  background: #6960af;
  color: #fff;
  border-radius: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* تنسيق القسم الرئيسي */
.container .mx-auto.px-12.py-5.rounded-md {
    background-color: #ffffff !important; /* خلفية بيضاء */
    border: 1px solid #6960af !important; /* إطار خفيف اختياري */
    border-radius: 8px !important;       /* زوايا منحنية */
}

/* تحويل جميع النصوص داخل هذا القسم للون الأسود */
.container .mx-auto.px-12.py-5.rounded-md h2,
.container .mx-auto.px-12.py-5.rounded-md h4,
.container .mx-auto.px-12.py-5.rounded-md p,
.container .mx-auto.px-12.py-5.rounded-md span,
.container .mx-auto.px-12.py-5.rounded-md div {
    color: #000000 !important;
}

/* تنسيق الزر ليظهر بشكل أفضل مع الخلفية البيضاء */
.container .mx-auto.px-12.py-5.rounded-md button {
    background-color: #000000 !important; /* زر أسود */
    color: #ffffff !important;           /* نص الزر أبيض */
    border-radius: 6px !important;
}

/* تعديل خاص للشاشات الكبيرة لضمان المحاذاة */
@media (min-width: 1024px) {
    .container .mx-auto.px-12.py-5.rounded-md {
        padding-top: 20px !important; /* لإلغاء الـ py-0 إذا أردت مسافة */
        padding-bottom: 20px !important;
    }
}

.text-gray-300{
    --tw-text-opacity: 1;
    color: rgb(103 94 172);
    color: rgb(105 96 175);
}

.text-white{
    --tw-text-opacity: 1;
    color: rgb(0 0 0);
    color: rgb(0 0 0);
}
/* لون اتمام طلب */
.s-add-product-button-main .s-button-btn,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center{
    border-radius: 0.125rem;
    --tw-bg-opacity: 1;
    background-color: rgb(105 96 175);
    background-color: rgb(105 96 175);
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}

/* ============================================
   1) تمديد عرض المحتوى ليصير Full Width
   ============================================ */
.container,
.s-container,
main .container,
.s-block-container,
.products-list-container,
.s-products-list,
.category-page .container,
.s-category-header,
.header-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* لو الثيم يحط حاوية عامة على مستوى body/app بعرض محدد */
#app,
.s-layout,
.s-page-content {
  max-width: 100% !important;
}

/* تصغير الهوامش على الجوال عشان ما يلزق بالحواف */
@media (max-width: 768px) {
  .container,
  .s-container,
  .products-list-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================
   2) توحيد ستايل كروت المنتجات بكل صفحات الأقسام
   ============================================ */
.s-product-card,
.product-card,
.product-item {
  background-color: #ffffff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.s-product-card:hover,
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}

/* شارة الخصم الحمراء */
.s-product-card-discount,
.product-discount,
.sale-badge,
.badge-discount {
  background-color: #e2231a !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
}

/* زر أضف للسلة البنفسجي */
.s-add-product-btn,
.add-to-cart-btn,
.btn-add-cart,
button[class*="add-cart"] {
  background-color: #6c4ee3 !important;
  border-color: #6c4ee3 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.s-add-product-btn:hover,
.add-to-cart-btn:hover,
.btn-add-cart:hover {
  background-color: #5a3fc4 !important;
}

/* شبكة صفحات التصنيفات تصير متجاوبة بشكل أفضل مع العرض الكامل */
.products-grid,
.s-products-grid,
.category-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 20px !important;
}

.s-block-statistics {
    display: block;
    padding: 3rem 0;
    background-color: var(--stats-bg-color, #1a2a44);
    text-align: center;
}
.text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255);
    color: rgb(255 255 255);
}
const targetElement = document.querySelector('a.w-14.h-14.text-xl.flex.justify-center.items-center.bg-green-600.text-white.shadow.rounded-l-full.fixed.bottom-32.rtl\\:right-0.ltr\\:left-0.z-\\[999999\\]');

.text-white {
  targetElement.setAttribute('href', 'https://api.whatsapp.com/send/?phone=966556512126');
  console.log('WhatsApp link updated successfully.');
} else {
  console.error('Target element not found.');
}

    .whatsapp-float {
  position: fixed;
  bottom: 8rem;
  z-index: 999999;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #ffffff;
  background-color: #16a34a;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  border-radius: 9999px 0 0 9999px;
  text-decoration: none;
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(103 94 172);
    color: rgb(0 0 0);
}
  .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255);
    color: rgb(0 0 0);
}
 .s-product-card-image { position: relative; }
.stock-urgency-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  left: 8px;
  background: #fff3cd;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #f59e0b;
  z-index: 5;
}