/* ==========================================================
   ألوان هيدر متجر ثوابت العدلية فقط
   بدون تغيير الشكل أو المقاسات
========================================================== */

:root {
  --thawabet-green: #0b6b43;
  --thawabet-green-dark: #064b30;
  --thawabet-white: #ffffff;
}

/* الجزء العلوي الذي يحتوي على البحث */
.store-header .top-navbar {
  background-color: var(--thawabet-green);
  color: var(--thawabet-white);
}

/* أيقونات وروابط الجزء العلوي */
.store-header .top-navbar,
.store-header .top-navbar a,
.store-header .top-navbar i,
.store-header .top-navbar svg,
.store-header .top-navbar .s-contacts,
.store-header .top-navbar .s-contacts a {
  color: var(--thawabet-white) !important;
}

/* حقل البحث يبقى أبيض */
.store-header .top-navbar .s-search-input-wrapper,
.store-header .top-navbar .s-search-input {
  background-color: var(--thawabet-white) !important;
}

/* لون نص البحث */
.store-header .top-navbar .s-search-input {
  color: #1f2d26 !important;
}

/* لون النص التوضيحي داخل البحث */
.store-header .top-navbar .s-search-input::placeholder {
  color: #7b8781 !important;
  opacity: 1;
}

/* لون أيقونة البحث */
.store-header .top-navbar .s-search-icon,
.store-header .top-navbar .s-search-icon svg {
  color: var(--thawabet-green) !important;
  fill: var(--thawabet-green) !important;
}

/* خلفية القائمة الرئيسية تبقى بيضاء */
.store-header #mainnav,
.store-header .main-nav-container,
.store-header #mainnav .inner {
  background-color: var(--thawabet-white) !important;
}

/* لون روابط القائمة */
.store-header .main-menu a {
  color: #1f2d26;
}

/* لون الرابط عند المرور */
.store-header .main-menu a:hover,
.store-header .main-menu a:focus {
  color: var(--thawabet-green) !important;
}

/* لون زر القائمة في الجوال */
.store-header [data-testid="store-header-mobile-toggle"],
.store-header [data-testid="store-header-mobile-toggle"] i {
  color: var(--thawabet-green) !important;
}

/* لون أيقونة الحساب */
.store-header .s-user-menu-login-btn,
.store-header .s-user-menu-login-btn svg {
  color: var(--thawabet-green) !important;
  fill: var(--thawabet-green) !important;
}

/* لون أيقونة السلة */
.store-header .s-cart-summary-wrapper,
.store-header .s-cart-summary-icon,
.store-header .s-cart-summary-icon svg,
.store-header #s-cart-icon,
.store-header #s-cart-icon i {
  color: var(--thawabet-green) !important;
  fill: var(--thawabet-green) !important;
}

/* لون عدد المنتجات في السلة */
.store-header .s-cart-summary-count {
  background-color: var(--thawabet-green) !important;
  color: var(--thawabet-white) !important;
}

/* لون سعر السلة */
.store-header .s-cart-summary-total {
  color: var(--thawabet-green-dark) !important;
}

/* خلفية موحدة للصفحة الرئيسية */
body {
  background:
    radial-gradient(circle at top right, rgba(11, 107, 67, 0.10), transparent 34%),
    radial-gradient(circle at 10% 55%, rgba(201, 164, 92, 0.07), transparent 28%),
    linear-gradient(
      180deg,
      #f4faf7 0%,
      #ffffff 38%,
      #f8fbf9 100%
    ) !important;
}

/* منع السكشنين من تغطية الخلفية الموحدة */
#thawabet-raed-home-hero,
#thawabet-section-02,
#thawabet-why-section {
  background: transparent !important;
}

/* إزالة أي فاصل بينهما */
#thawabet-raed-home-hero {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#thawabet-section-02,
#thawabet-why-section {
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
/* ==========================================================
   تنسيق فوتر متجر ثوابت العدلية
========================================================== */

footer[data-testid="store-footer"] {
  --footer-primary: var(--color-primary, #123d35);
  --footer-primary-dark: var(--color-primary-dark, #0d302a);
  --footer-text: rgba(255, 255, 255, 0.92);
  --footer-muted: rgba(255, 255, 255, 0.72);
  --footer-border: rgba(255, 255, 255, 0.14);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding-top: 72px;
  background: var(--footer-primary) !important;
  color: var(--footer-text) !important;
}

/* ==========================================================
   التموج العلوي
========================================================== */

footer[data-testid="store-footer"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -54px;
  left: -5%;
  width: 110%;
  height: 92px;
  border-radius: 0 0 50% 50%;
  background: #ffffff;
  pointer-events: none;
}

footer[data-testid="store-footer"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -27px;
  left: -10%;
  width: 120%;
  height: 68px;
  border-radius: 50%;
  background: var(--footer-primary);
  pointer-events: none;
}

/* ==========================================================
   الجزء الداخلي للفوتر
========================================================== */

footer[data-testid="store-footer"] .store-footer__inner {
  position: relative;
  background: transparent !important;
  color: var(--footer-text) !important;
}

footer[data-testid="store-footer"]
.store-footer__inner
> .container {
  padding-top: 10px;
  padding-bottom: 42px;
}

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

footer[data-testid="store-footer"] h3,
footer[data-testid="store-footer"] .s-contacts-title {
  margin-bottom: 18px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}

footer[data-testid="store-footer"] a h3 {
  margin-bottom: 14px !important;
  font-size: 21px !important;
  font-weight: 800 !important;
}

/* خط بسيط تحت عناوين الأعمدة */

footer[data-testid="store-footer"]
.store-footer__inner
> .container
> div
> h3,
footer[data-testid="store-footer"]
.s-contacts-title {
  position: relative;
  padding-bottom: 10px;
}

footer[data-testid="store-footer"]
.store-footer__inner
> .container
> div
> h3::after,
footer[data-testid="store-footer"]
.s-contacts-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

/* لا نضيف الخط لعنوان الشركة */

footer[data-testid="store-footer"] a h3::after {
  display: none;
}

/* ==========================================================
   وصف الشركة
========================================================== */

footer[data-testid="store-footer"] .max-w-sm {
  max-width: 440px !important;
  margin-bottom: 24px !important;
  color: var(--footer-muted) !important;
  font-size: 15px !important;
  line-height: 2 !important;
}

/* ==========================================================
   الروابط
========================================================== */

footer[data-testid="store-footer"] a {
  color: var(--footer-text) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

footer[data-testid="store-footer"] a:hover {
  color: #ffffff !important;
  opacity: 0.82;
}

footer[data-testid="store-footer"] .s-menu-footer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

footer[data-testid="store-footer"]
.s-menu-footer-list
a {
  display: inline-flex;
  width: fit-content;
  color: var(--footer-muted) !important;
  font-size: 15px;
  line-height: 1.8;
}

footer[data-testid="store-footer"]
.s-menu-footer-list
a:hover {
  color: #ffffff !important;
}

/* ==========================================================
   التواصل
========================================================== */

footer[data-testid="store-footer"] .s-contacts-list {
  gap: 10px;
}

footer[data-testid="store-footer"] .s-contacts-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--footer-muted) !important;
}

footer[data-testid="store-footer"]
.s-contacts-item:hover {
  color: #ffffff !important;
}

footer[data-testid="store-footer"] .s-contacts-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--footer-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff !important;
}

footer[data-testid="store-footer"]
.s-contacts-icon
svg {
  width: 19px;
  height: 19px;
  fill: currentColor !important;
}

footer[data-testid="store-footer"]
.s-contacts-icon
svg
path {
  fill: currentColor !important;
}

footer[data-testid="store-footer"] .unicode {
  direction: ltr;
  color: inherit !important;
  font-size: 15px;
}

/* ==========================================================
   أيقونات التواصل الاجتماعي
========================================================== */

footer[data-testid="store-footer"] .s-social-list {
  display: flex;
  align-items: center;
  gap: 9px;
}

footer[data-testid="store-footer"] .s-social-list a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  border: 1px solid var(--footer-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff !important;
}

footer[data-testid="store-footer"]
.s-social-list
a:hover {
  background: rgba(255, 255, 255, 0.13);
  opacity: 1;
}

footer[data-testid="store-footer"]
.s-social-list
svg {
  width: 18px;
  height: 18px;
  fill: currentColor !important;
}

footer[data-testid="store-footer"]
.s-social-list
svg
path {
  fill: currentColor !important;
}

/* ==========================================================
   شارة السجل التجاري
========================================================== */

footer[data-testid="store-footer"]
.s-trust-badges-wrapper {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--footer-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff !important;
}

footer[data-testid="store-footer"]
.s-trust-badges-image {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  padding: 4px;
  border-radius: 8px;
  background: #ffffff;
}

footer[data-testid="store-footer"]
.s-trust-badges-content {
  color: #ffffff !important;
}

footer[data-testid="store-footer"]
.s-trust-badges-label {
  margin: 0 0 3px !important;
  color: var(--footer-muted) !important;
  font-size: 12px !important;
}

footer[data-testid="store-footer"]
.s-trust-badges-number {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ==========================================================
   تطبيقات المتجر
========================================================== */

footer[data-testid="store-footer"]
salla-apps-icons {
  color: #ffffff !important;
}

footer[data-testid="store-footer"]
salla-apps-icons
a {
  border-color: var(--footer-border) !important;
}

/* ==========================================================
   الجزء السفلي: الحقوق ووسائل الدفع
========================================================== */

footer[data-testid="store-footer"]
> .container {
  position: relative;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
  border-top: 1px solid var(--footer-border);
  background: transparent !important;
}

footer[data-testid="store-footer"]
.copyright-text,
footer[data-testid="store-footer"]
.copyright-text p {
  margin: 0 !important;
  color: var(--footer-muted) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

footer[data-testid="store-footer"]
.copyright-text
a {
  color: #ffffff !important;
  font-weight: 600;
}

footer[data-testid="store-footer"]
.s-payments-list {
  display: flex;
  align-items: center;
  gap: 7px;
}

footer[data-testid="store-footer"]
.s-payments-list-item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 32px;
  padding: 4px 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
}

footer[data-testid="store-footer"]
.s-payments-list-item
img {
  width: auto !important;
  max-width: 42px !important;
  height: 24px !important;
  object-fit: contain;
}

/* ==========================================================
   الهاتف والجهاز اللوحي
========================================================== */

@media (max-width: 1023px) {
  footer[data-testid="store-footer"] {
    padding-top: 66px;
  }

  footer[data-testid="store-footer"]
  .store-footer__inner
  > .container {
    gap: 34px !important;
  }
}

/* ==========================================================
   الهاتف
========================================================== */

@media (max-width: 767px) {
  footer[data-testid="store-footer"] {
    padding-top: 58px;
    text-align: center;
  }

  footer[data-testid="store-footer"]::before {
    top: -39px;
    left: -12%;
    width: 124%;
    height: 68px;
  }

  footer[data-testid="store-footer"]::after {
    top: -20px;
    left: -17%;
    width: 134%;
    height: 49px;
  }

  footer[data-testid="store-footer"]
  .store-footer__inner
  > .container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 32px !important;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 36px;
  }

  footer[data-testid="store-footer"]
  .store-footer__inner
  > .container
  > * {
    width: 100%;
    max-width: 440px;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center !important;
  }

  footer[data-testid="store-footer"] a.flex {
    justify-content: center !important;
  }

  footer[data-testid="store-footer"] h3,
  footer[data-testid="store-footer"]
  .s-contacts-title {
    text-align: center !important;
  }

  footer[data-testid="store-footer"]
  .store-footer__inner
  > .container
  > div
  > h3::after,
  footer[data-testid="store-footer"]
  .s-contacts-title::after {
    right: 50%;
    transform: translateX(50%);
  }

  footer[data-testid="store-footer"] .max-w-sm {
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  footer[data-testid="store-footer"]
  .s-menu-footer-list {
    align-items: center;
  }

  footer[data-testid="store-footer"]
  .s-menu-footer-list
  a {
    width: auto;
    justify-content: center;
    text-align: center;
  }

  footer[data-testid="store-footer"]
  .s-contacts-list {
    align-items: center !important;
  }

  footer[data-testid="store-footer"]
  .s-contacts-item {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }

  footer[data-testid="store-footer"]
  .contact-social,
  footer[data-testid="store-footer"]
  .s-social-list {
    justify-content: center !important;
  }

  footer[data-testid="store-footer"]
  .flex.gap-4 {
    justify-content: center !important;
  }

  footer[data-testid="store-footer"]
  .s-trust-badges-wrapper {
    margin-right: auto;
    margin-left: auto;
    text-align: right;
  }

  footer[data-testid="store-footer"]
  > .container {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    gap: 17px;
    padding: 20px !important;
    text-align: center;
  }

  footer[data-testid="store-footer"]
  .s-payments-list {
    justify-content: center;
    flex-wrap: wrap;
  }
}

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

@media (max-width: 390px) {
  footer[data-testid="store-footer"] {
    padding-top: 52px;
  }

  footer[data-testid="store-footer"]
  .store-footer__inner
  > .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  footer[data-testid="store-footer"]
  .s-trust-badges-wrapper {
    padding: 9px 11px;
  }

  footer[data-testid="store-footer"]
  .s-trust-badges-image {
    width: 43px !important;
    height: 43px !important;
  }
}
/* ==========================================================
   البنر الثابت بخلفية متناسقة مع هوية المتجر
========================================================== */

section[data-testid="store-home-fixed-banner"] {
  --fixed-banner-bg: #f7f9f8;
  --fixed-banner-green: var(--color-primary, #123d35);

  position: relative;
  margin: 0 !important;
  padding: 42px 0 !important;
  overflow: hidden;
  background-color: var(--fixed-banner-bg) !important;
  background-image: none !important;
}

/* زخرفة خضراء هادئة داخل الخلفية */

section[data-testid="store-home-fixed-banner"]::before {
  content: "";
  position: absolute;
  top: -170px;
  right: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(18, 61, 53, 0.045);
  pointer-events: none;
}

section[data-testid="store-home-fixed-banner"]::after {
  content: "";
  position: absolute;
  bottom: -190px;
  left: -140px;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: rgba(18, 61, 53, 0.035);
  pointer-events: none;
}

/* الحاوية */

section[data-testid="store-home-fixed-banner"] > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 24px !important;
  padding-left: 24px !important;
  background: transparent !important;
}

/* رابط البنر */

section[data-testid="store-home-fixed-banner"] .banner--fixed {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(18, 61, 53, 0.09);
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 12px 35px rgba(18, 61, 53, 0.07);
}

/* عنصر picture */

section[data-testid="store-home-fixed-banner"] picture {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #ffffff;
}

/* الصورة كاملة بدون أي اقتصاص */

section[data-testid="store-home-fixed-banner"] img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto;
  object-fit: contain !important;
  object-position: center center !important;
}

/* ==========================================================
   الجهاز اللوحي
========================================================== */

@media (max-width: 1023px) {
  section[data-testid="store-home-fixed-banner"] {
    padding: 32px 0 !important;
  }

  section[data-testid="store-home-fixed-banner"] > .container {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  section[data-testid="store-home-fixed-banner"] .banner--fixed {
    border-radius: 16px;
  }
}

/* ==========================================================
   الهاتف
========================================================== */

@media (max-width: 767px) {
  section[data-testid="store-home-fixed-banner"] {
    padding: 24px 0 !important;
  }

  section[data-testid="store-home-fixed-banner"] > .container {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  section[data-testid="store-home-fixed-banner"] .banner--fixed {
    border-radius: 13px;
  }

  section[data-testid="store-home-fixed-banner"]::before {
    top: -110px;
    right: -120px;
    width: 260px;
    height: 260px;
  }

  section[data-testid="store-home-fixed-banner"]::after {
    bottom: -130px;
    left: -120px;
    width: 280px;
    height: 280px;
  }
}
/* إخفاء الأيقونة الكبيرة والبطاقة العائمة */
#thawabet-raed-home-hero .thawabet-hero-visual {
  display: none !important;
}

/* توسيط المحتوى */
#thawabet-raed-home-hero .thawabet-hero-container{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

/* عرض مناسب للمحتوى */
#thawabet-raed-home-hero .thawabet-hero-content{
    flex:none !important;
    width:100%;
    max-width:820px;
    margin:0 auto;
    text-align:center;
}

/* الشارة */
#thawabet-raed-home-hero .thawabet-hero-badge{
    display:inline-flex;
    margin:0 auto 24px;
}

/* العنوان */
#thawabet-raed-home-hero .thawabet-hero-title{
    margin-inline:auto;
}

/* الوصف */
#thawabet-raed-home-hero .thawabet-hero-description{
    max-width:680px;
    margin:24px auto 0;
}

/* الأزرار */
#thawabet-raed-home-hero .thawabet-hero-actions{
    justify-content:center;
    gap:18px;
    margin-top:36px;
}

/* المميزات */
#thawabet-raed-home-hero .thawabet-hero-features{
    justify-content:center;
    gap:18px 28px;
    margin-top:42px;
}

/* الشاشات الكبيرة جداً */
@media (min-width:1400px){

    #thawabet-raed-home-hero{
        padding-top:90px;
        padding-bottom:90px;
    }

    #thawabet-raed-home-hero .thawabet-hero-content{
        max-width:900px;
    }

    #thawabet-raed-home-hero .thawabet-hero-title{
        font-size:clamp(52px,4vw,68px);
    }

    #thawabet-raed-home-hero .thawabet-hero-description{
        font-size:20px;
        line-height:2;
    }
}

/* الجوال */
@media (max-width:767px){

    #thawabet-raed-home-hero .thawabet-hero-content{
        max-width:100%;
        text-align:center;
    }

    #thawabet-raed-home-hero .thawabet-hero-actions{
        flex-direction:column;
        align-items:center;
    }

    #thawabet-raed-home-hero .thawabet-hero-button{
        width:100%;
        max-width:340px;
        justify-content:center;
    }

    #thawabet-raed-home-hero .thawabet-hero-features{
        justify-content:center;
    }
}
/* ==========================================================
   رفع زر الواتساب في الجوال
========================================================== */

@media (max-width: 768px) {

    #thawabet-whatsapp-button{
        bottom: 88px !important;
    }

}

@media (max-width: 480px) {

    #thawabet-whatsapp-button{
        bottom: 110px !important;
    }

}