/* Add custom CSS styles below */



/* Rayat - Remove white gap between moving bar and next section */

.s-block:has([class*="marquee"]),
.s-block:has([class*="ticker"]),
section:has([class*="marquee"]),
section:has([class*="ticker"]) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* أول قسم بعد الشريط المتحرك */
.s-block:has([class*="marquee"]) + .s-block,
.s-block:has([class*="ticker"]) + .s-block,
section:has([class*="marquee"]) + section,
section:has([class*="ticker"]) + section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* تقليل أي فراغ عام بين بلوكات الصفحة الرئيسية */
.main-content > .s-block,
#app > .s-block,
.store-home > .s-block {
  margin-top: 0 !important;
}


/* Rayat - Stronger homepage section spacing fix */

.s-block {
  margin-top: 0 !important;
}

.s-block + .s-block {
  margin-top: 0 !important;
}

.s-block--fixed-banner,
.s-block--marquee,
.s-block--products-slider,
.s-block-products,
.s-block--categories,
.s-block--features {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Rayat - Footer VAT / tax number visibility */

.store-footer,
.store-footer p,
.store-footer span,
.store-footer a,
footer,
footer p,
footer span,
footer a {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* الرقم الضريبي والبيانات اللي في عمود اللوجو */
.store-footer .grid > div:last-child,
.store-footer .grid > div:last-child *,
footer .grid > div:last-child,
footer .grid > div:last-child * {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* رقم الضريبي نفسه يكون أوضح */
.store-footer .grid > div:last-child p:last-child,
.store-footer .grid > div:last-child span:last-child,
footer .grid > div:last-child p:last-child,
footer .grid > div:last-child span:last-child {
  color: #F4D37A !important;
  font-weight: 700 !important;
}

/* Rayat - Tabs above featured products only */
section:has(.s-product-card-entry) [role="tab"],
section:has(.s-product-card-entry) button {
  border: 1.5px solid #0F5D68 !important;
  color: #0F5D68 !important;
  background: #f3f4f6 !important;
  border-radius: 12px !important;
  padding: 12px 30px !important;
  font-weight: 700 !important;
}

section:has(.s-product-card-entry) [role="tab"][aria-selected="true"],
section:has(.s-product-card-entry) button.active,
section:has(.s-product-card-entry) button.is-active {
  background: #0F5D68 !important;
  color: #ffffff !important;
  border-color: #0F5D68 !important;
}

/* Footer logo - bigger without changing colors */
footer.store-footer.soum-store-footer .navbar-brand.mb-4,
footer.store-footer.soum-store-footer a.navbar-brand {
  width: 150px !important;
  height: 95px !important;
  max-width: 150px !important;
  max-height: 95px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  background: transparent !important;
  overflow: visible !important;
}

footer.store-footer.soum-store-footer .navbar-brand.mb-4 img,
footer.store-footer.soum-store-footer a.navbar-brand img {
  width: 150px !important;
  height: 95px !important;
  max-width: 150px !important;
  max-height: 95px !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: scale(1.65) !important;
  transform-origin: center !important;
  filter: brightness(0) invert(1) contrast(1.25) saturate(1.15) !important;
}

/* Footer logo - bigger and cleaner */
footer.store-footer.soum-store-footer a.navbar-brand.mb-4,
footer.store-footer.soum-store-footer a.navbar-brand,
footer.store-footer.soum-store-footer [class*="logo"] {
  width: 210px !important;
  height: 82px !important;
  min-width: 210px !important;
  max-width: 210px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 12px !important;
}

/* الصورة نفسها */
footer.store-footer.soum-store-footer a.navbar-brand.mb-4 img,
footer.store-footer.soum-store-footer a.navbar-brand img,
footer.store-footer.soum-store-footer [class*="logo"] img {
  width: 210px !important;
  height: 82px !important;
  max-width: 210px !important;
  max-height: 82px !important;

  object-fit: contain !important;
  object-position: center !important;

  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  transform: scale(2.5) !important;
  transform-origin: center !important;
}

/* Footer description under logo */
footer.store-footer .navbar-brand + div.max-w-sm {
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  line-height: 2 !important;
}

/* Header logo - horizontal version bigger */
header .navbar-brand img,
header .store-logo img,
header .s-logo img,
header .header-logo img,
header a[href="/"] img,
header a[href="https://newrayat.com"] img {
  width: 170px !important;
  height: 70px !important;
  max-width: 170px !important;
  max-height: 70px !important;
  object-fit: contain !important;

  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  transform: scale(2.5) !important;
  transform-origin: center !important;
  filter: contrast(1.25) saturate(1.2) !important;
}

/* منع ضغط اللوجو داخل الهيدر */
header .navbar-brand,
header .store-logo,
header .s-logo,
header .header-logo,
header a[href="/"],
header a[href="https://newrayat.com"] {
  width: 180px !important;
  min-width: 180px !important;
  height: 78px !important;
  max-height: 78px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}


/* =================================
   تقسيم قائمة الفوتر إلى 3 أعمدة
================================= */

/* توسيع الجزء الذي يحتوي على القائمة داخل شبكة الفوتر */
.store-footer__inner .container > div:has(> salla-menu[source="footer"]) {
    width: 100% !important;
}

/* إخفاء عنوان "روابط مهمة" الأصلي الموجود أعلى القائمة
   لأننا أضفناه بالفعل داخل عناصر القائمة */
.store-footer__inner .container
> div:has(> salla-menu[source="footer"])
> h3 {
    display: none !important;
}

/* جعل عنصر القائمة يأخذ العرض كاملًا */
.store-footer__inner salla-menu[source="footer"] {
    display: block !important;
    width: 100% !important;
}

/* تنسيق روابط القائمة */
.store-footer__inner
salla-menu[source="footer"]
.s-menu-footer-item {
    display: block !important;
    width: 100% !important;

    font-size: 12px !important;       /* حجم روابط القائمة */
    font-weight: 500 !important;
    color: #f2f2f2 !important;        /* لون أوضح */
    opacity: 1 !important;

    margin: 0 0 7px !important;
    padding: 0 !important;
    line-height: 1.7 !important;
    text-align: right !important;

    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* تنسيق عناوين الأعمدة التي رابطها # */
.store-footer__inner
salla-menu[source="footer"]
.s-menu-footer-item[href="#"],

.store-footer__inner
salla-menu[source="footer"]
.s-menu-footer-item[href$="/#"] {
    color: #ffffff !important;        /* أبيض واضح */
    font-size: 15px !important;       /* تصغير العنوان من 18 إلى 16 */
    font-weight: 800 !important;      /* عنوان أوضح */
    opacity: 1 !important;

    margin-bottom: 12px !important;
    cursor: default !important;
    pointer-events: none !important;
}


/* =================================
   شاشات الكمبيوتر
================================= */

@media (min-width: 1024px) {

    /* جعل جزء القائمة يأخذ عمودين من شبكة الفوتر
       ليكون هناك مساحة كافية للأعمدة الثلاثة */
    .store-footer__inner .container
    > div:has(> salla-menu[source="footer"]) {
        grid-column: span 2 / span 2 !important;
    }

    /* تقسيم القائمة إلى 3 أعمدة */
    .store-footer__inner
    salla-menu[source="footer"]
    .s-menu-footer-list {
        display: block !important;
        width: 100% !important;
        direction: rtl !important;

        column-count: 3 !important;
        column-gap: 32px !important;
        column-fill: balance !important;
    }

    /* كل عنوان # بعد العنوان الأول يبدأ عمودًا جديدًا */
    .store-footer__inner
    salla-menu[source="footer"]
    .s-menu-footer-item[href="#"]:not(:first-child),

    .store-footer__inner
    salla-menu[source="footer"]
    .s-menu-footer-item[href$="/#"]:not(:first-child) {
        break-before: column !important;
        -webkit-column-break-before: always !important;
    }
}


/* =================================
   الموبايل والتابلت
================================= */

@media (max-width: 1023px) {

    /* إظهارها أسفل بعضها على الموبايل حتى لا تصبح ضيقة */
    .store-footer__inner
    salla-menu[source="footer"]
    .s-menu-footer-list {
        display: block !important;
        width: 100% !important;
        column-count: 1 !important;
        text-align: center !important;
    }

    .store-footer__inner
    salla-menu[source="footer"]
    .s-menu-footer-item {
        text-align: center !important;
    }

    /* مسافة قبل عنوان القسم الثاني والثالث */
    .store-footer__inner
    salla-menu[source="footer"]
    .s-menu-footer-item[href="#"]:not(:first-child),

    .store-footer__inner
    salla-menu[source="footer"]
    .s-menu-footer-item[href$="/#"]:not(:first-child) {
        margin-top: 28px !important;
    }
}

/* زر إضافة للسلة السفلي في صفحة المنتج فقط */
salla-add-product-button[quick-buy] .s-button-primary,
salla-add-product-button[quick-buy] button.s-button-primary,
salla-add-product-button[quick-buy] .s-button-btn {
  background-color: #1b5461 !important;
  border-color: #1b5461 !important;
  color: #ffffff !important;
}

/* النص والأيقونة داخل الزر */
salla-add-product-button[quick-buy] .s-button-primary *,
salla-add-product-button[quick-buy] button.s-button-primary *,
salla-add-product-button[quick-buy] .s-button-btn * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Hover */
salla-add-product-button[quick-buy] .s-button-primary:hover,
salla-add-product-button[quick-buy] button.s-button-primary:hover,
salla-add-product-button[quick-buy] .s-button-btn:hover {
  background-color: #1b5461 !important;
  border-color: #1b5461 !important;
  color: #ffffff !important;
}

/* كل التاجز */
.soum-product-tags .soum-tag-pill,
a.soum-tag-pill {
  background-color: rgba(27, 84, 97, 0.12) !important;
  color: #1b5461 !important;
  border-color: transparent !important;
}

/* التاج عند الهوفر */
.soum-product-tags .soum-tag-pill:hover,
a.soum-tag-pill:hover {
  background-color: #1b5461 !important;
  color: #ffffff !important;
}

/* Floating WhatsApp Button */
.custom-whatsapp-float {
  position: fixed !important;
  right: 22px !important;
  bottom: 35px !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #ffffff !important;
  z-index: 999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
  text-decoration: none !important;
  transition: 0.25s ease !important;
}

.custom-whatsapp-float svg {
  width: 31px !important;
  height: 31px !important;
  fill: #ffffff !important;
}

.custom-whatsapp-float:hover {
  transform: translateY(-4px) scale(1.04) !important;
  background: #1ebe5d !important;
}

/* موبايل */
@media (max-width: 768px) {
  .custom-whatsapp-float {
    right: 16px !important;
    bottom: 22px !important;
    width: 54px !important;
    height: 54px !important;
  }

  .custom-whatsapp-float svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* تكبير وتوضيح صور وسائل الدفع فقط */
.store-footer .soum-copyright salla-payments .s-payments-list {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* حجم مربع وسيلة الدفع */
.store-footer .soum-copyright salla-payments .s-payments-list-item {
    width: 52px !important;
    height: 36px !important;
    min-width: 52px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* تكبير الصورة وإلغاء البهتان */
.store-footer .soum-copyright salla-payments .s-payments-list-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;

    opacity: 1 !important;
    filter: none !important;
}

/* تقليل المساحة الفارغة قبل شريط الحقوق ووسائل الدفع */
@media (min-width: 1024px) {
    .store-footer__inner {
        padding-bottom: 28px !important;
    }
}