/* =========================
   🎨 ألوان افتراضية (تقدر تعدلها)
========================= */
:root {
  --main-color: #6a11cb;
  --secondary-color: #2575fc;
  --accent-color: #ff9800;
  --soft-bg: #f7f7f7;
}

/* =========================
   ✨ عناوين بجريدينت متحرك
========================= */
h1, h2, h3, .section-title {
  text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    var(--main-color) 0%,
    var(--secondary-color) 50%,
    var(--main-color) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 4s linear infinite;
  font-weight: 700;
}

@keyframes gradientMove {
  to {
    background-position: 200% center;
  }
}

/* =========================
   🛍️ بطاقات المنتجات
========================= */
.product-card,
.s-product-card {
  border-radius: 1.2rem;
  overflow: hidden;
  transition: all .35s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.product-card:hover,
.s-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* السعر */
.price,
.product-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--main-color);
}

/* زر الإضافة */
.add-to-cart,
button.btn-primary {
  border-radius: 999px;
  transition: all .3s ease;
}

.add-to-cart:hover,
button.btn-primary:hover {
  background-color: var(--secondary-color);
  transform: scale(1.05);
}

/* =========================
   🌐 تحسين الموبايل
========================= */
@media (max-width: 768px) {
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.1rem; }

  .product-card,
  .s-product-card {
    border-radius: .9rem;
  }
}

/* =========================
   💻 تحسين الديسكتوب
========================= */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

/* =========================
   🧭 Scrollbar مخصص
========================= */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--main-color),
    var(--secondary-color)
  );
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* =========================
   ✅ فوتر أنيق
========================= */
footer,
.store-footer {
  border-top-left-radius: 4rem;
  border-top-right-radius: 4rem;
  box-shadow: 0 -10px 30px rgba(0,0,0,.08);
  background: linear-gradient(
    135deg,
    var(--soft-bg),
    #ffffff
  );
}

/* =========================
   ✨ تأثيرات ناعمة عامة
========================= */
a {
  transition: color .3s ease;
}

a:hover {
  color: var(--secondary-color);
}



/* ===============================
   WATER WAVE LINES UNDER TITLES
   SALLA SAFE - CSS ONLY
   =============================== */

.s-slider-block__title h2,
.s-block__title h2,
.main-content h1 {
    position: relative;
    padding-bottom: 18px;
}

/* الخط الأساسي */
.s-slider-block__title h2::after,
.s-block__title h2::after,
.main-content h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 4px;

    background: linear-gradient(
        90deg,
        rgba(21,109,211,0.2),
        rgba(119,173,237,0.9),
        rgba(21,109,211,0.2)
    );

    background-size: 200% 100%;
    animation: waterWave 6s linear infinite;
}

/* خط داخلي يعطي إحساس موج */
.s-slider-block__title h2::before,
.s-block__title h2::before,
.main-content h1::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30%;
    width: 40%;
    height: 4px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );

    background-size: 200% 100%;
    animation: waterWaveReverse 4s linear infinite;
}

/* حركة الموج */
@keyframes waterWave {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }
}

@keyframes waterWaveReverse {
    from { background-position: 200% 50%; }
    to   { background-position: 0% 50%; }
}