/* ============================================================
                        HEADER 
   ============================================================ */

.store-header .container > div[class*="h-20"],
.store-header .container > div[class*="lg:h-24"] {
  height: 60px !important;     /* Adjust this number (e.g., 50px, 60px) to your target height */
  min-height: unset !important;
  font-weight: bolder;
}

/* 2. Keep the outer container matching the new height */
.store-header,
#mainnav,
.main-nav-container,
.matcha-main-nav-container {
  height: auto !important;
  min-height: unset !important;
}

/*3. change font weight*/

.mobile-menu .main-menu > ul{
  font-weight: 50px !important;
}
/* ============================================================
                        container layout + products grid
   ============================================================ */

.s-block--fixed-banner .banner--fixed {
  border-radius: 15px !important;
  overflow: hidden !important;
}
.s-block--fixed-banner img {
  border-radius: 15px !important;
}

.matcha-banner-panel{
 border-radius: 15px !important;
 margin: 15px 12px ;
 overflow: hidden !important;
}

.matcha-banner-panel .container > div{
  align-items: flex-start !important;
  text-align: right !important;
  gap: 3rem !important;

}

/* ============================================================
   hide cta and dark mode of features 2
   ============================================================ */
/* 2. Hide the entire CTA block underneath the grid */
.matcha-features-02 .text-center.mt-12 {
  display: none !important;
}
/* ============================================================
   FEATURES & TRUST BADGES - BACKGROUND UNIFICATION & TEXT CONTRAST
   ============================================================ */

/* 1. Unify Section & Inner Container Backgrounds to Base Dark (#121212) */
.salla-is-dark.matcha-features,
.salla-is-dark.matcha-features .container,
.salla-is-dark.matcha-features-02,
.salla-is-dark.matcha-features-02 .container,
.salla-is-dark.s-block--features,
.salla-is-dark .s-block--features,
html.dark .matcha-features,
html.dark .matcha-features-02,
html.dark .s-block--features {
  background: #12181a !important;
  background-color: #12181a !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. Fix Small Grey Subtitles to High-Contrast Light Text (#FAFAFA) */
.salla-is-dark.matcha-features *,
.salla-is-dark.matcha-features-02 *,
.salla-is-dark.s-block--features *,
html.dark .matcha-features p,
html.dark .matcha-features span,
html.dark .matcha-features-02 p,
html.dark .matcha-features-02 span,
html.dark .s-block--features p,
html.dark .s-block--features span,
html.dark .s-block--features div {
  color: #FAFAFA !important; /* Force all small descriptive text to crisp white */
  opacity: 1 !important;     /* Override any inline opacity: 0.6 or similar */
}

/* 3. Keep Main Titles as Sage Green (#82C499) */
.salla-is-dark.matcha-features h2,
.salla-is-dark.matcha-features h3,
.salla-is-dark.matcha-features-02 h2,
.salla-is-dark.matcha-features-02 h3,
html.dark .matcha-features h2,
html.dark .matcha-features-02 h2 {
  color: #82C499 !important;
}

/* 4. Keep Inner Feature Cards using the Elevated Dark Accent (#1B3B2B) */
.salla-is-dark.matcha-features-02 .grid > div,
html.dark .matcha-features-02 .grid > div {
  background-color: #1B3B2B !important;
  border: 1px solid #2D5A42 !important;
}

/* ============================================================
   SPLIT-LAYOUT BUTTON WITH SEPARATE ICON SIDEBAR
   ============================================================ */

/* 1. Main Outer Button Container */
.s-product-card-content-footer salla-add-product-button button,
.s-product-card-content-footer salla-button button,
.s-product-card-content-footer .s-button-element {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 !important;
  padding-left: 48px !important;              /* Reserved space for icon block */           
  border: none !important;                    /* Removes default green outline */
  outline: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;              /* Adjust corner rounding as desired */
  overflow: hidden !important;
  font-weight: 600 !important;
}

/* 2. Target Inner Text / Spans to remove white background override */
.s-product-card-content-footer salla-add-product-button button *,
.s-product-card-content-footer salla-button button *,
.s-product-card-content-footer .s-button-element * {
  background-color: transparent !important;
  background: transparent !important;
 
}

/* 3. Hide default icon inside footer button */
.s-product-card-content-footer salla-add-product-button button svg,
.s-product-card-content-footer salla-add-product-button button i,
.s-product-card-content-footer salla-button button svg,
.s-product-card-content-footer salla-button button i {
  display: none !important;
}

/* 4. Left Icon Block (Dark Green Accent) */
.s-product-card-content-footer salla-add-product-button button::before,
.s-product-card-content-footer salla-button button::before,
.s-product-card-content-footer .s-button-element::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;                         /* Locks icon block to left side */
  width: 48px !important;
  background-color: #2E8B57 !important;       /* Dark Accent Green */
  background: #2E8B57 !important;
  z-index: 2 !important;

  
  /* Icon Image Setup */
  background-image: url('https://cdn.files.salla.network/other/113341547/8aee9311-dacf-43e6-aa58-e25c309120cc-original.webp') !important;
  background-size: 20px 20px !important;  /* Size of the icon */
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ============================================================
   CASHBACK SPLIT POP-UP DESIGN
   ============================================================ */

/* Overlay background */
#cashback-discount-popup {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

#cashback-discount-popup.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Card Container */
.cashback-popup-card {
  position: relative !important;
  width: 90% !important;
  max-width: 440px !important;
  background-color: #D3E4D7 !important; /* Soft Sage Green bottom background */
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25) !important;
  direction: rtl !important;
  text-align: center !important;
}

/* Close button (top right over banner) */
.cashback-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #1B3B2B !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

/* Top Banner Block */
.cashback-popup-header-img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Bottom Content Area */
.cashback-popup-body {
  padding: 24px 20px !important;
}

/* Heading text */
.cashback-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #111111 !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.5px !important;
}

/* Subtitle text */
.cashback-subtitle {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #2D3748 !important;
  margin-bottom: 20px !important;
}

/* Main Action Button */
.cashback-cta {
  width: 100% !important;
  background-color: #77C08E !important; /* Vibrant action green */
  color: #FFFFFF !important;
  border: none !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background-color 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(98, 210, 111, 0.3) !important;
}

.cashback-cta:hover {
  background-color: #8FE0A6 !important;
  transform: translateY(-1px) !important;
}

/* Disclaimer text */
.cashback-disclaimer {
  font-size: 11px !important;
  color: #718096 !important;
  line-height: 1.5 !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   UGC "تصوير العملاء" SHOWCASE CAROUSEL
   ============================================================ */

.ugc-section-wrapper {
  width: 100% !important;
  padding: 40px 0 !important;
  background-color: #fcfefc !important; /* Base color background */
  direction: rtl !important;
}

[data-theme="dark"] .ugc-section-wrapper,
html.dark .ugc-section-wrapper {
  background-color: #121d16 !important;
}

.ugc-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  text-align: center !important;
}

.ugc-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #4a9665 !important;
  margin-bottom: 24px !important;
 text-align: center !important;
}

[data-theme="dark"] .ugc-title,
html.dark .ugc-title {
  color: #82C499 !important;
}

/* Relative container for track + arrows */
.ugc-carousel-rel {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* Scroll Track */
.ugc-track {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important; /* Hide scrollbar Firefox */
  padding: 10px 0 !important;
}

.ugc-track::-webkit-scrollbar {
  display: none !important; /* Hide scrollbar Chrome/Safari */
}

/* Individual Image Card */
.ugc-card {
  flex: 0 0 calc(25% - 12px) !important; /* 4 columns on desktop */
  min-width: 260px !important;
  height: 500px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.25s ease !important;
}

.ugc-card video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 16px !important;
}

.ugc-card:hover {
  transform: translateY(-4px) !important;
}

.ugc-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Navigation Arrows */
.ugc-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  background-color: #FFFFFF !important;
  color: #1B3B2B !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.2s ease !important;
}

.ugc-nav-btn:hover {
  background-color: #82C499 !important;
  color: #FFFFFF !important;
}

.next-btn {
  left: -15px !important;
  right: auto !important;
}

/* Previous button (Visual Right in RTL) */
.prev-btn {
  right: -15px !important;
  left: auto !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .ugc-card {
    flex: 0 0 75% !important; /* Shows 1.2 cards on mobile */
    height: 380px !important;
  }
   
  .ugc-nav-btn {
    display: none !important; /* Swipe gesture preferred on mobile */
  }
}


/* ============================================================
   FORCED SALLA DARK MODE OVERRIDES
   ============================================================ */

/* Backgrounds for Sections & Containers */
.salla-is-dark.ugc-section-wrapper,
.salla-is-dark.s-reviews-container,
.salla-is-dark#matcha-featured-products-0,
body.dark .ugc-section-wrapper,
html.dark .ugc-section-wrapper {
  background-color: #12181a !important;
  color: #FAFAFA !important;
}

/* Backgrounds for Cards & Modals */
.salla-is-dark .ugc-card,
.salla-is-dark.s-product-card-entry,
.salla-is-dark.cashback-popup-card,
.salla-is-dark .s-reviews-item,
body.dark .ugc-card,
html.dark .ugc-card {
  background-color: #1B3B2B !important;
  color: #FAFAFA !important;
  border-color: #2D5A42 !important;
}

/* Text & Title Colors */
.salla-is-dark .ugc-title,
.salla-is-dark .s-reviews-header,
body.dark .ugc-title,
html.dark .ugc-title {
  color: #82C499 !important; /* Sage Green */
}
/* Targets strikethrough original price elements in Dark Mode */
.salla-is-dark .s-product-card-sale-price span,
.salla-is-dark .s-product-card-sale-price h4,
.salla-is-dark .s-product-card-sale-price,
.salla-is-dark .s-product-card-content-sub .line-through,
.salla-is-dark .s-product-card-content-sub s,
.salla-is-dark .s-product-card-content-sub del,
html.dark .s-product-card-sale-price span,
html.dark .s-product-card-sale-price,
html.dark .s-product-card-content-sub .line-through {
  color: #fba7a7 !important;              /* Soft muted grey-white */
  -webkit-text-fill-color: #fba7a7 !important;
  opacity: 1 !important;                /* Readable contrast against #1B3B2B / #121212 */
  text-decoration-color: #82C499 !important; /* Optional: Sage Green line-through stroke */
}
/* ============================================================
   MATCHA CALCULATOR V2 - DARK MODE OVERRIDES
   ============================================================ */

/* 1. Main Calculator Section Background & Scoped Variables */
#calculator-v2.salla-is-dark,
html.dark #calculator-v2,
body.dark #calculator-v2 {
  background-color: #12181a !important; /* Overrides Tailwind bg-white */
  color: #FAFAFA !important;

  /* Override component-level inline CSS variables */
  --subtitle-color: #FAFAFA !important;
  --section-title-color: #82C499 !important;
  --card-border-idle: #2D5A42 !important;
  --card-border-active: #82C499 !important;
  --strength-bg-active: #1B3B2B !important;
  --btn-tools-bg: #1B3B2B !important;
  --btn-tools-text: #FAFAFA !important;
  --tip-bg-color: #1B3B2B !important;
  --tip-border-color: #2D5A42 !important;
}

/* 2. Heading and Subtitle Inline Style Overrides */
#calculator-v2.salla-is-dark h2,
html.dark #calculator-v2 h2 {
  color: #82C499 !important; /* Overrides inline style="color: #363636;" */
}

#calculator-v2.salla-is-dark p,
html.dark #calculator-v2 p {
  color: #FAFAFA !important;
}

/* 3. Option Cards Backgrounds */
#calculator-v2.salla-is-dark [class*="rounded"],
html.dark #calculator-v2 [class*="rounded"] {
  background-color: #121d16 !important;
  color: #FAFAFA !important;
}

/* 4. Bottom Action Buttons Fix (Primary, Tools & Reset) */
/* Primary CTA ("تسوق الماتشا") */
#calculator-v2.salla-is-dark div.flex > button:first-child,
#calculator-v2.salla-is-dark div.flex > a:first-child,
html.dark #calculator-v2 div.flex > button:first-child,
html.dark #calculator-v2 div.flex > a:first-child {
  background-color: #82C499 !important;
  color: #121212 !important;
  border: none !important;
  font-weight: 700 !important;
}

/* Secondary CTA ("تسوق الأدوات") */
#calculator-v2.salla-is-dark div.flex > button:nth-child(2),
#calculator-v2.salla-is-dark div.flex > a:nth-child(2),
html.dark #calculator-v2 div.flex > button:nth-child(2),
html.dark #calculator-v2 div.flex > a:nth-child(2) {
  background-color: #1B3B2B !important;
  border: 1px solid #2D5A42 !important;
  color: #FAFAFA !important;
}

/* Reset Button ("إعادة ضبط") */
#calculator-v2.salla-is-dark div.flex > button:last-child,
#calculator-v2.salla-is-dark div.flex > a:last-child,
html.dark #calculator-v2 div.flex > button:last-child,
html.dark #calculator-v2 div.flex > a:last-child {
  background-color: transparent !important;
  border: 1px solid #2D5A42 !important;
  color: #A0AEC0 !important;
}

#calculator-v2.salla-is-dark div.flex > button:last-child:hover,
html.dark #calculator-v2 div.flex > button:last-child:hover {
  border-color: #82C499 !important;
  color: #FFFFFF !important;
}

/* ============================================================
   SALLA REVIEWS / TESTIMONIALS DARK MODE OVERRIDES
   ============================================================ */

/* 1. Main Container Background */
.salla-is-dark.s-reviews-container,
.salla-is-dark.s-block--testimonials,
html.dark .s-reviews-container,
html.dark .s-block--testimonials {
  background-color: #12181a !important;
  background:#12181a !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. Individual Testimonial Cards */
.salla-is-dark .s-reviews-testimonial,
html.dark .s-reviews-testimonial {
  background-color: #121d16 !important; /* Dark Accent card background */
  color: #FAFAFA !important;            /* Base text color */
  border: 1px solid #2D5A42 !important; /* Subtle border for definition */
}

/* 3. Review Card Text & Author Names */
.salla-is-dark .s-reviews-testimonial *,
html.dark .s-reviews-testimonial * {
  color: #FAFAFA !important;
}

/* 4. Section Title */
.salla-is-dark .s-reviews-header-wrapper,
.salla-is-dark .s-reviews-header,
html.dark .s-reviews-header-wrapper {
  color: #82C499 !important; /* Sage Green accent */
}

/* 5. Slider Arrow Controls (Salla Slider Component) */
.salla-is-dark salla-slider button,
html.dark salla-slider button {
  background-color: #1B3B2B !important;
  color: #82C499 !important;
  border-color: #2D5A42 !important;
}

/* ============================================================
   MATCHA FAQ SECTION - CONDITIONAL DARK MODE ONLY
   ============================================================ */

/* 1. Outer Section & Container Background (Dark Mode Only) */
.salla-is-dark.matcha-faq,
.salla-is-dark.matcha-faq .container,
html.dark .matcha-faq,
html.dark .matcha-faq .container,
body.dark .matcha-faq {
  background: #121212 !important;
  background-color: #121212 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. Main Title ("الأسئلة الشائعة") -> Sage Green (#82C499) (Dark Mode Only) */
.salla-is-dark .matcha-faq h2,
.salla-is-dark .matcha-faq h2[style],
html.dark .matcha-faq h2,
body.dark .matcha-faq h2 {
  color: #82C499 !important;
  -webkit-text-fill-color: #82C499 !important;
  opacity: 1 !important;
}

/* 3. Subtitle Under Header -> Crisp White (#FFFFFF) (Dark Mode Only) */
.salla-is-dark .matcha-faq p,
.salla-is-dark .matcha-faq p[style],
.salla-is-dark .matcha-faq .text-center span,
html.dark .matcha-faq p,
body.dark .matcha-faq p {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

/* 4. FAQ Cards -> Dark Accent (#1B3B2B) (Dark Mode Only) */
.salla-is-dark .matcha-faq-item,
html.dark .matcha-faq-item,
body.dark .matcha-faq-item {
  background-color: #1B3B2B !important;
  border: 1px solid #2D5A42 !important;
}

/* 5. Question Titles -> Crisp White (#FFFFFF) (Dark Mode Only) */
.salla-is-dark .matcha-faq .faq-button,
.salla-is-dark .matcha-faq .faq-button *,
.salla-is-dark .matcha-faq-item button *,
html.dark .matcha-faq .faq-button,
html.dark .matcha-faq .faq-button * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

/* 6. Expanded Answer Text -> Crisp White (#FFFFFF) (Dark Mode Only) */
.salla-is-dark .matcha-faq .faq-answer,
.salla-is-dark .matcha-faq .faq-answer *,
html.dark .matcha-faq .faq-answer,
html.dark .matcha-faq .faq-answer * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

/* 7. Chevron Arrows -> White (Dark Mode Only) */
.salla-is-dark .matcha-faq svg,
.salla-is-dark .matcha-faq path,
html.dark .matcha-faq svg,
html.dark .matcha-faq path {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

.salla-is-dark.matcha-faq h2,
.salla-is-dark .matcha-faq h2,
.salla-is-dark .matcha-faq h2[style],
.salla-is-dark .matcha-faq [class*="max-w-2xl"] h2,
html.dark .matcha-faq h2[style],
body.dark .matcha-faq h2[style] {
  color: #82C499 !important;
  -webkit-text-fill-color: #82C499 !important;
  opacity: 1 !important;
}

/* 2. Subtitle Paragraph -> Crisp White (#FFFFFF) */
.salla-is-dark.matcha-faq p,
.salla-is-dark .matcha-faq p,
.salla-is-dark .matcha-faq p[style],
.salla-is-dark .matcha-faq [class*="max-w-2xl"] p,
html.dark .matcha-faq p[style],
body.dark .matcha-faq p[style] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

/* 5. Expanded Answer Text Overrides */
.salla-is-dark .matcha-faq .faq-answer,
.salla-is-dark .matcha-faq .faq-answer *,
.salla-is-dark .matcha-faq-item .faq-answer,
.salla-is-dark .matcha-faq-item .faq-answer *,
html.dark .matcha-faq .faq-answer,
html.dark .matcha-faq .faq-answer * {
  color: #FFFFFF !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #FFFFFF !important;  
}

/* Hide Badge/Pill Container above FAQ Title */
.matcha-faq .text-center div.inline-flex.rounded-full,
.matcha-faq .text-center div[class*="rounded-full"] {
  display: none !important;}