/* ==========================================================================
   سلة برو - الثيم الفاتح التكنولوجي المتكامل (Final Ultra Light Tech)
   ========================================================================== */

/* 1. التمرير السلس وتنسيق تحديد النصوص */
html {
  scroll-behavior: smooth !important;
}

::selection {
  background: #0066FF !important;
  color: #FFFFFF !important;
}

/* 2. ضبط الأساس الفاتح للمتجر */
body, main, .s-body, .page-wrapper, #app {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* 3. حركة النبض لأزرار الشراء */
@keyframes techPulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(0, 102, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0); }
}

/* 4. كروت المنتجات (رفع + توهج + خط علوي تكنولوجي) */
.product-card, 
.product-item, 
.s-product-card-entry,
[class*="product-card"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.product-card:hover, 
.product-item:hover, 
.s-product-card-entry:hover,
[class*="product-card"]:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: #0066FF !important;
  box-shadow: 0 14px 30px rgba(0, 102, 255, 0.18) !important;
  z-index: 5 !important;
}

.product-card::before, 
.product-item::before, 
.s-product-card-entry::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(135deg, #0052D4 0%, #0066FF 50%, #00D2FF 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.product-card:hover::before, 
.product-item:hover::before, 
.s-product-card-entry:hover::before {
  opacity: 1;
}

/* 5. تكبير ناعم لصورة المنتج */
.product-card img, 
.product-item img, 
.s-product-card-entry img {
  transition: transform 0.45s ease !important;
}

.product-card:hover img, 
.product-item:hover img, 
.s-product-card-entry:hover img {
  transform: scale(1.06) !important;
}

/* 6. أزرار الشراء التفاعلية مع تأثير النبض والضغط */
.btn-add-to-cart, 
.add-to-cart-btn, 
.s-product-card-add-to-cart-btn,
button[class*="add-to-cart"],
.s-button-element {
  background: linear-gradient(135deg, #0066FF 0%, #00D2FF 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: bold !important;
  animation: techPulse 2.2s infinite !important;
  transition: transform 0.1s ease !important;
}

/* استجابة الزر عند الضغط الحقيقي (Click) */
button:active, 
.btn:active, 
.btn-add-to-cart:active {
  transform: scale(0.96) !important;
}

/* 7. إبراز عداد السلة في أعلى المتجر */
.cart-count, 
.s-cart-summary-count,
[class*="cart-count"] {
  background: #0066FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.4) !important;
  font-weight: bold !important;
}

/* 8. شريط البحث المضيء */
input[type="search"], .search-input, [class*="search-input"] {
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

input[type="search"]:focus, .search-input:focus {
  border-color: #0066FF !important;
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.25) !important;
  outline: none !important;
}

/* 9. تحسين زوايا البنرات */
.banner-entry, .s-slider-block, [class*="banner"] img {
  border-radius: 16px !important;
}