/* ================================================
   DEZZWORK - كود CSS آمن ومُصحح
   لا يؤثر على تخطيط الصفحة
   ================================================ */

/* الخطوط */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

/* ============================================
   الألوان فقط - بدون تغيير التخطيط
   ============================================ */
:root {
  --primary-color: #2563eb;
  --secondary-color: #7c3aed;
}

/* ============================================
   تحسين الخط
   ============================================ */
body,
* {
  font-family: 'Cairo', sans-serif !important;
}

/* ============================================
   تأثيرات الأزرار - آمنة
   ============================================ */
.s-button-element,
.btn,
button[type="submit"],
.s-button-element--primary {
  transition: all 0.3s ease !important;
  border-radius: 10px !important;
}

.s-button-element:hover,
.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
}

/* ============================================
   تأثيرات البطاقات - آمنة
   ============================================ */
.s-product-card-entry,
.s-product-card {
  transition: all 0.3s ease !important;
  border-radius: 16px !important;
}

.s-product-card-entry:hover,
.s-product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   تحسين صور المنتجات
   ============================================ */
.s-product-card-image img {
  transition: transform 0.4s ease !important;
}

.s-product-card-entry:hover .s-product-card-image img {
  transform: scale(1.05) !important;
}

/* ============================================
   الفوتر - خط ملون في الأعلى
   ============================================ */
footer,
.s-footer {
  position: relative !important;
}

footer::before,
.s-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #10b981) !important;
}

/* ============================================
   تحسين الروابط
   ============================================ */
a {
  transition: color 0.3s ease !important;
}

/* ============================================
   سكرول بار مخصص
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  border-radius: 4px;
}

/* ============================================
   تأثير ظهور سلس - Animation
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.s-product-card-entry {
  animation: fadeInUp 0.5s ease forwards;
}

.s-product-card-entry:nth-child(1) { animation-delay: 0.1s; }
.s-product-card-entry:nth-child(2) { animation-delay: 0.15s; }
.s-product-card-entry:nth-child(3) { animation-delay: 0.2s; }
.s-product-card-entry:nth-child(4) { animation-delay: 0.25s; }

/* ============================================
   تحسين شارات الخصم
   ============================================ */
.s-product-card-sale-badge {
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* ============================================
   تحسين حقول الإدخال
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

input:focus,
textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* إنزال محتوى الصفحة الرئيسية */
.s-home-content,
main,
.main-content,
[class*="home-content"],
[class*="main-content"] {
  padding-top: 60px !important;
  margin-top: 40px !important;
}



/* إنزال القسم الأول */
section:first-of-type,
.section:first-child {
  margin-top: 70px !important;
}
section.static-banners img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

section.static-banners .container {
  max-width: 100% !important;
  padding: 0 !important;
}