/* =========================================================
   ليال المرح | Salla Raed
   Custom CSS - Desktop + Mobile
   ========================================================= */

:root {
  --layal-primary: #e9007f;
  --layal-primary-dark: #b90065;
  --layal-purple: #5b168c;
  --layal-pink: #fff1f8;
  --layal-pink-2: #ffd9eb;
  --layal-text: #24152f;
  --layal-muted: #77717b;
  --layal-white: #ffffff;
  --layal-radius: 18px;
  --layal-shadow: 0 8px 25px rgba(91, 22, 140, 0.08);
}


/* =========================================================
   1. أساسيات المتجر
   ========================================================= */

body.theme-raed {
  color: var(--layal-text);
  background: #fff;
  font-family: inherit;
}

body.theme-raed a {
  transition: all 0.25s ease;
}

body.theme-raed button,
body.theme-raed .button {
  border-radius: 12px;
  transition: all 0.25s ease;
}


/* =========================================================
   2. الأزرار
   ========================================================= */

body.theme-raed .button--primary,
body.theme-raed .btn-primary {
  background: var(--layal-primary);
  border-color: var(--layal-primary);
  color: #fff;
  border-radius: 12px;
}

body.theme-raed .button--primary:hover,
body.theme-raed .btn-primary:hover {
  background: var(--layal-primary-dark);
  border-color: var(--layal-primary-dark);
  transform: translateY(-1px);
}


/* =========================================================
   3. الأقسام
   ========================================================= */

body.theme-raed .s-block {
  margin-top: 32px;
  margin-bottom: 32px;
}

body.theme-raed .s-block__title {
  color: var(--layal-purple);
  font-weight: 800;
}

body.theme-raed .s-block__title h2 {
  font-weight: 800;
}


/* =========================================================
   4. صور الأقسام
   ========================================================= */

body.theme-raed .s-block--categories img {
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.theme-raed .s-block--categories img:hover {
  transform: scale(1.04);
  box-shadow: var(--layal-shadow);
}


/* =========================================================
   5. بطاقات المنتجات
   ========================================================= */

body.theme-raed .product-entry,
body.theme-raed .product-card,
body.theme-raed .s-product-card {
  border-radius: var(--layal-radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.theme-raed .product-entry:hover,
body.theme-raed .product-card:hover,
body.theme-raed .s-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--layal-shadow);
}


/* =========================================================
   6. الأسعار
   ========================================================= */

body.theme-raed .price,
body.theme-raed .product-price {
  color: var(--layal-primary);
  font-weight: 800;
}


/* =========================================================
   7. البحث
   ========================================================= */

body.theme-raed input[type="search"],
body.theme-raed input[type="text"] {
  border-radius: 12px;
}

body.theme-raed input:focus {
  border-color: var(--layal-primary);
  box-shadow: 0 0 0 3px rgba(233, 0, 127, 0.08);
  outline: none;
}


/* =========================================================
   8. الهيدر
   ========================================================= */

body.theme-raed header,
body.theme-raed .header,
body.theme-raed .header-container {
  position: relative;
  z-index: 20;
}

body.theme-raed .main-menu,
body.theme-raed .main-menu-wrapper {
  border-radius: 0;
}


/* =========================================================
   9. التذييل
   ========================================================= */

body.theme-raed footer {
  background: var(--layal-pink);
}

body.theme-raed footer a:hover {
  color: var(--layal-primary);
}


/* =========================================================
   10. تحسينات الجوال
   ========================================================= */

@media (max-width: 767px) {

  /* ---------- الصفحة ---------- */

  body.theme-raed {
    overflow-x: hidden;
  }

  body.theme-raed .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.theme-raed .s-block {
    margin-top: 18px;
    margin-bottom: 18px;
  }


  /* ---------- العناوين ---------- */

  body.theme-raed .s-block__title {
    margin-bottom: 10px;
  }

  body.theme-raed .s-block__title h2 {
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
  }


  /* ---------- البانر الرئيسي ---------- */

  body.theme-raed .s-block:first-of-type {
    margin-top: 10px;
  }

  body.theme-raed .s-block:first-of-type img {
    border-radius: 18px;
  }


  /* ---------- قسم الأقسام ---------- */

  body.theme-raed .s-block--categories {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body.theme-raed .s-block--categories .s-block__title {
    margin-bottom: 8px;
  }

  body.theme-raed .s-block--categories img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
  }


  /* ---------- المسافات بين الأقسام ---------- */

  body.theme-raed .s-block + .s-block {
    margin-top: 18px;
  }


  /* ---------- بطاقات المنتجات ---------- */

  body.theme-raed .product-entry,
  body.theme-raed .product-card,
  body.theme-raed .s-product-card {
    border-radius: 14px;
  }

  body.theme-raed .product-entry img,
  body.theme-raed .product-card img,
  body.theme-raed .s-product-card img {
    border-radius: 14px 14px 0 0;
  }


  /* ---------- الأسعار ---------- */

  body.theme-raed .price,
  body.theme-raed .product-price {
    font-size: 15px;
  }


  /* ---------- زر الإضافة للسلة ---------- */

  body.theme-raed salla-add-product-button {
    --salla-add-product-button-border-radius: 10px;
  }


  /* ---------- البحث ---------- */

  body.theme-raed input[type="search"],
  body.theme-raed input[type="text"] {
    min-height: 42px;
    border-radius: 12px;
  }


  /* ---------- شريط الإعلان ---------- */

  body.theme-raed [role="banner"] {
    font-size: 12px;
    line-height: 1.5;
  }


  /* ---------- الهيدر ---------- */

  body.theme-raed header {
    width: 100%;
  }


  /* ---------- الفوتر ---------- */

  body.theme-raed footer {
    margin-top: 25px;
  }


  /* ---------- منع التمدد الأفقي ---------- */

  body.theme-raed .s-block,
  body.theme-raed section {
    max-width: 100%;
  }

}


/* =========================================================
   11. جوال صغير جدًا
   ========================================================= */

@media (max-width: 390px) {

  body.theme-raed .container {
    padding-left: 11px;
    padding-right: 11px;
  }

  body.theme-raed .s-block {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  body.theme-raed .s-block__title h2 {
    font-size: 19px;
  }

  body.theme-raed .s-block--categories img {
    width: 74px;
    height: 74px;
  }

}


/* =========================================================
   12. شاشات أكبر
   ========================================================= */

@media (min-width: 768px) {

  body.theme-raed .s-block__title h2 {
    font-size: 26px;
  }

  body.theme-raed .s-block {
    margin-top: 38px;
    margin-bottom: 38px;
  }

}

/* =========================================================
   ليال المرح | تحسين قسم "تسوق حسب الأقسام" للجوال
   ========================================================= */

@media (max-width: 767px) {

  /* القسم نفسه */
  body.theme-raed .s-block--categories {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* العنوان */
  body.theme-raed .s-block--categories .s-block__title {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    padding: 0 4px !important;
    text-align: right;
  }

  body.theme-raed .s-block--categories .s-block__title h2 {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    color: #5b168c !important;
  }

  /* الوصف تحت العنوان */
  body.theme-raed .s-block--categories .s-block__title p {
    margin: 3px 0 8px !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    color: #77717b !important;
  }

  /* الحاوية الداخلية */
  body.theme-raed .s-block--categories .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* الصور الدائرية */
  body.theme-raed .s-block--categories img {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(91, 22, 140, 0.10) !important;
    border: 3px solid #fff !important;
  }

  /* حركة بسيطة عند الضغط */
  body.theme-raed .s-block--categories a:active img {
    transform: scale(0.94) !important;
  }

  /* أسماء الأقسام */
  body.theme-raed .s-block--categories a {
    color: #24152f !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  /* تقليل الفراغ حول القسم */
  body.theme-raed .s-block--categories > div {
    margin-bottom: 0 !important;
  }

}


/* =========================================================
   جوالات صغيرة جدًا
   ========================================================= */

@media (max-width: 390px) {

  body.theme-raed .s-block--categories img {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
  }

  body.theme-raed .s-block--categories .s-block__title h2 {
    font-size: 19px !important;
  }

  body.theme-raed .s-block--categories .s-block__title p {
    font-size: 11px !important;
  }

}