/* ==========================================================================
   قسم 1: الأكواد التقنية لتسريع المتجر وحل مشاكل الجوال (ثيم سيليا)
   ========================================================================== */

/* تثبيت مساحة البانر السلايدر الرئيسي لمنع قفزة المحتوى (CLS) */
.celia-hero-slider, .celia-slider, .main-slider-wrapper {
  min-height: 220px !important; 
  background-color: #f7f7f7 !important;
}

/* حجز أبعاد لصور المنتجات والتصنيفات قبل التحميل لمنع القفزات */
.product-card .product-card-img img, .category-item img, .store-categories img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  content-visibility: auto;
}

/* تسريع الاستجابة الفورية عند الضغط على الأزرار والسلة (INP) */
.btn, .button, .add-to-cart-btn, .mini-cart-button, .celia-nav-link {
  touch-action: manipulation !important;
}

/* إجبار المتصفح على إظهار النصوص فوراً قبل اكتمال تحميل الخط */
body, h1, h2, h3, h4, h5, h6, span, p, a {
  font-display: swap !important;
}

@media (max-width: 768px) {
  /* زيادة مساحة أزرار الشراء لسهولة النقر ومنع تداخل الروابط */
  .product-card .add-to-cart-btn, .product-details .btn-add-to-cart {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* تنسيق شبكة المنتجات لثيم سيليا ليكون خفيفاً وسريع التصفح */
  .products-grid, .celia-products-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  /* تخفيف الظلال الكثيفة لتقليل الضغط على معالج الجوال */
  .product-card, .navigation-bar, .celia-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #efefef !important;
  }
}

/* ==========================================================================
   قسم 2: التعديلات التجميلية والألوان (تعديلات إبراهيم ممدوح المـُصححة)
   ========================================================================== */

/* تلوين أزرار التبويبات النشطة (المنتجات) */
.s-block--tabs-produtcs .tab-trigger.is-active button {
    color: #57051d !important;
    border-color: #57051d !important;
}

/* تأثير الـ Hover على القائمة الرئيسية للكمبيوتر */
@media only screen and (min-width: 1024px) {
    .main-menu li>a:hover {
       color: #57051d !important;
    }
}

/* تعديلات الوضع الداكن (Dark Mode) للتبويبات والقائمة */
.dark .s-block--tabs-produtcs .tab-trigger.is-active button {
    color: #eb767d !important;
    border-color: #eb767d !important;
}

@media only screen and (min-width: 1024px) {
   .dark .main-menu li>a:hover {
       color: #eb767d !important;
    }
}

/* إخفاء الخلفيات أو المؤثرات الخلفية لبعض الأقسام لتسريع الصفحات */
.s-block--faq.has-bg:before, 
.s-block--custom-reviews.has-bg:before, 
.special-product.has-bg:before, 
.s-block--testimonials.enhanced:before {
    display: none !important;
}

/* ألوان أزرار الأوتلاين في الوضع الداكن */
.dark .btn--outline-primary {
    color: #dcdcdc !important;
}

/* تأثير الـ Hover على روابط الفوتر */
.footer-list>a:hover {
   color: #57051d !important;
}

.dark .footer-list>a:hover {
   color: #eb767d !important;
}

/* تعديل حدود العناوين المحسنة */
.enhanced-title-border::after,
.enhanced-title-border::before {
    background: #8e0009 !important;
}

.enhanced-title-border {
    border: 2px solid #8e0009 !important;
}

/* تدوير زوايا أيقونات الميزات */
.s-block--enhanced-features__item .feature-icon img {
    border-radius: 20px !important;
}

/* ألوان الخلفيات الداكنة */
.bg-gray-800 {
    background-color: rgb(33 33 33) !important;
}

.special-cats-with-bg .bg-gray-900 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(33 33 33) !important;
}