/* Add custom CSS styles below */ 
/* =================================================================
   CAR PART KSA - ULTIMATE ORANGE EDITION (النسخة النهائية والمصححة)
   ================================================================= */

:root {
  --car-orange: #ff6600;       /* البرتقالي الرياضي */
  --car-orange-dark: #e65c00;  /* برتقالي داكن للتدرجات */
  --car-black: #111;           /* أسود المحركات */
  --tech-bg: #f5f7fa;          /* خلفية تقنية */
  --glass-effect: rgba(255, 255, 255, 0.88); 
  --card-radius: 12px;
  --main-font: 'Tajawal', sans-serif;
}

/* 1. الخلفية الهندسية (Tech Grid) */
body {
  background-color: var(--tech-bg) !important;
  background-image: radial-gradient(var(--car-orange) 0.5px, transparent 0.5px), radial-gradient(var(--car-orange) 0.5px, var(--tech-bg) 0.5px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  background-attachment: fixed;
  font-family: var(--main-font) !important;
}

/* 2. الهيدر الزجاجي المطور */
.s-header {
  background: var(--glass-effect) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--car-orange);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* 3. تأثيرات الأيقونات والشعار */
.s-header-menu-item i, .s-header-right i, .s-cart-icon i {
    color: var(--car-black) !important;
    transition: 0.3s all ease;
}
.s-header-menu-item:hover i, .s-header-right div:hover i {
    color: var(--car-orange) !important;
    filter: drop-shadow(0 0 5px rgba(255, 102, 0, 0.5));
    transform: scale(1.1);
}
.s-header-logo img {
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.05));
    transition: 0.5s;
    max-height: 65px !important;
}

/* 4. شارات الخصم بنبض برتقالي */
@keyframes pulse-orange {
  0% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(255, 102, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0); }
}
.s-product-card-sale-badge, .product-label--sale, .s-product-card-badge {
  background-color: var(--car-orange) !important;
  animation: pulse-orange 2s infinite;
  border-radius: 4px !important;
  font-weight: bold;
}

/* 5. بطاقات المنتجات والأقسام */
.s-product-card-entry, .s-block--categories .swiper-slide {
  background: #fff;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.s-product-card-entry:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 102, 0, 0.2);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}
.s-product-card-image img { transition: 0.6s ease; }
.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.08); }

/* 6. الأزرار (تأثير النيترو البرتقالي والأسود) */
@keyframes orange-glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* تطبيق التدرج على جميع الأزرار باستثناء أزرار الكمية بذكاء */
.s-button-element:not(.s-quantity-input-button):not(.s-quantity-input-minus):not(.s-quantity-input-plus), 
.btn-checkout, 
.cart-nav-submit, 
.btn--primary, 
#checkout-submit {
    background: linear-gradient(45deg, #111, var(--car-orange-dark), #111, var(--car-orange)) !important;
    background-size: 300% 300% !important;
    color: #fff !important;
    border-radius: 10px !important;
    animation: orange-glow 5s ease infinite !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
    border: none !important;
}

/* تأكيد شكل أزرار الكمية (+ و -) في السلة لتعمل بشكل طبيعي */
.s-quantity-input-button, 
.s-quantity-input-minus, 
.s-quantity-input-plus,
.s-quantity-input button {
    background: #f5f5f5 !important;
    background-image: none !important; /* إزالة التدرج إجبارياً */
    color: var(--car-black) !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    animation: none !important;
    border-radius: 4px !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.s-quantity-input-button:hover, .s-quantity-input button:hover {
    background: #e0e0e0 !important;
    color: var(--car-orange) !important;
}

/* 7. السعر النهائي (تصميم الكربون فايبر) */
.checkout-summary-block {
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    border-right: 5px solid var(--car-orange);
    color: #fff !important;
    border-radius: 12px;
}
.checkout-summary-block .total-amount { color: var(--car-orange) !important; font-size: 1.6rem; }

/* 8. الفوتر وشريط التمرير */
.s-footer { background-color: #111 !important; border-top: 4px solid var(--car-orange); }
::-webkit-scrollbar-thumb { background: var(--car-orange-dark); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--car-orange); }

/* --- END OF CODE --- */