/* Add custom CSS styles below */

/* ========== LIGHT MODE HEADER – GREEN GRADIENT (light black only at bottom) ========== */
.header-inner {
  position: relative;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  overflow: visible !important;
  background: linear-gradient(
    180deg,
    #00a89f 0%,
    #00a89f 100%,
    #0d3d3a 0%
  ) !important;
  animation: headerGlow 6s ease-in-out infinite;
}

/* LIGHT MODE – white icons (desktop header only) */
html:not(.dark) .header-inner i,
html:not(.dark) .header-inner svg,
html:not(.dark) .header-inner .sicon,
html:not(.dark) .header-inner [class*="sicon"],
html:not(.dark) .header-inner .header-btn i,
html:not(.dark) .header-inner .header-btn svg,
html:not(.dark) .header-inner .s-cart-summary-wrapper i,
html:not(.dark) .header-inner .s-cart-summary-wrapper svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* LIGHT MODE – white header text (desktop header only) */
html:not(.dark) .header-inner span,
html:not(.dark) .header-inner p,
html:not(.dark) .header-inner a,
html:not(.dark) .header-inner .text-sm,
html:not(.dark) .header-inner .text-black {
  color: #ffffff !important;
}

html:not(.dark) .header-inner .header-btn:hover i,
html:not(.dark) .header-inner .header-btn:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  opacity: 0.85;
}

/* LIGHT MODE CART – white icon + badge */
html:not(.dark) .header-inner .s-cart-summary-wrapper .header-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px;
  padding: 6px 10px;
  transition: background .2s ease;
}
html:not(.dark) .header-inner .s-cart-summary-wrapper:hover .header-btn {
  background: rgba(255, 255, 255, 0.28) !important;
}
html:not(.dark) .header-inner .s-cart-summary-wrapper i,
html:not(.dark) .header-inner .s-cart-summary-wrapper svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}
html:not(.dark) .header-inner .s-cart-summary-count {
  background: #ffffff !important;
  color: #00a89f !important;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 6px;
}

/* ========== DARK MODE HEADER ========== */
html.dark .header-inner {
  background: linear-gradient(180deg, #222024 0%, #1a181c 100%) !important;
  animation: headerGlow 6s ease-in-out infinite;
}

/* Neon glow under header → GREEN */
@keyframes headerGlow {
  0%, 100% {
    box-shadow:
      inset 0 -1px 0 rgba(0, 168, 159, .25),
      0 6px 20px rgba(0, 0, 0, .35);
  }
  50% {
    box-shadow:
      inset 0 -2px 0 rgba(0, 168, 159, .7),
      0 6px 24px rgba(0, 168, 159, .2);
  }
}

/* DARK MODE – light icons & text */
html.dark .header-inner i,
html.dark .header-inner svg,
html.dark .header-inner .sicon,
html.dark .header-inner [class*="sicon"],
html.dark .header-inner .header-btn i,
html.dark .header-inner .header-btn svg {
  color: rgba(255, 255, 255, 0.9) !important;
  fill: rgba(255, 255, 255, 0.9) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
}

html.dark .header-inner span,
html.dark .header-inner p,
html.dark .header-inner a,
html.dark .header-inner .text-sm,
html.dark .header-inner .text-black {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* DARK MODE CART – white icon + green badge */
html.dark .header-inner .s-cart-summary-wrapper i,
html.dark .header-inner .s-cart-summary-wrapper svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  filter: none;
}
html.dark .header-inner .s-cart-summary-count {
  background: #00a89f !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* Thin separator line under header */
.header-inner::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
html.dark .header-inner::after {
  background: rgba(0, 168, 159, 0.2);
}

/* Hide cart total text */
.header-inner .s-cart-summary-content {
  display: none !important;
}

/* RTL icon spacing */
.header-container .justify-start { padding-right: 12px; }
.header-container .justify-end   { padding-left: 12px; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .header-inner,
  html.dark .header-inner {
    animation: none;
  }
}

/* Prevent clipping of dropdowns */
.header,
.store-header {
  overflow: visible !important;
}

/* Cart page – remove product image borders */
.s-cart-item img,
.s-cart-summary img,
.cart-item img {
  border: none !important;
  box-shadow: none !important;
}

/* ========== PRIMARY COLOR → GREEN ========== */
:root {
  --color-primary: #00a89f !important;
  --primary: #00a89f !important;
}

/* Scrollbar → green */
* {
  scrollbar-color: #00a89f #e5e7eb;
}
*::-webkit-scrollbar-thumb {
  background-color: #00a89f !important;
  border-radius: 999px;
}
*::-webkit-scrollbar-track {
  background-color: #e5e7eb !important;
}
html.dark * {
  scrollbar-color: #00a89f #1a1a1a;
}
html.dark *::-webkit-scrollbar-thumb {
  background-color: #00a89f !important;
}
html.dark *::-webkit-scrollbar-track {
  background-color: #1a1a1a !important;
}

/* Links / prices → green text */
.text-primary,
.hover\:text-primary:hover,
a.text-primary,
.color-primary,
.s-product-card-content-price,
.s-product-card-sale-price,
.price,
.product-price {
  color: #00a89f !important;
}

/* FILLED primary buttons → green bg + WHITE text */
.s-button-primary,
.btn-primary,
button.s-button-primary,
a.s-button-primary,
.s-button.s-button-primary,
.bg-primary,
button[type="submit"],
.s-login button,
.s-login .s-button,
.s-login-form button,
.s-login-form .s-button,
.s-modal button.s-button-primary,
.s-modal .s-button-primary,
[class*="login"] button[type="submit"],
[class*="login"] .s-button-primary,
[class*="login"] .btn-primary {
  background-color: #00a89f !important;
  background: #00a89f !important;
  border-color: #00a89f !important;
  color: #ffffff !important;
}
.s-button-primary *,
.btn-primary *,
button.s-button-primary *,
a.s-button-primary *,
.s-button.s-button-primary *,
button[type="submit"] *,
.s-login button *,
.s-login .s-button *,
.s-login-form button *,
[class*="login"] button[type="submit"] *,
[class*="login"] .s-button-primary * {
  color: #ffffff !important;
}

/* Kill leftover yellow / lime button backgrounds */
button[style*="yellow"],
button[style*="#dbf242"],
button[style*="#DBF242"],
button[style*="#c6ff00"],
button[style*="#C6FF00"],
.s-button[style*="#dbf242"],
.s-button[style*="#DBF242"],
[class*="btn"][style*="#dbf242"] {
  background-color: #00a89f !important;
  background: #00a89f !important;
  border-color: #00a89f !important;
  color: #ffffff !important;
}

/* Outline / text buttons → green text, transparent bg */
.s-button-outline,
.s-button-text,
.btn-outline {
  background-color: transparent !important;
  border-color: #00a89f !important;
  color: #00a89f !important;
}
.s-button-outline *,
.s-button-text * {
  color: #00a89f !important;
}

/* ========== MAIN PAGE TEXT → DARK in light mode ========== */
html:not(.dark) main,
html:not(.dark) main p,
html:not(.dark) main span,
html:not(.dark) main a,
html:not(.dark) main h1,
html:not(.dark) main h2,
html:not(.dark) main h3,
html:not(.dark) main h4,
html:not(.dark) main li,
html:not(.dark) .s-block,
html:not(.dark) .s-block p,
html:not(.dark) .s-block span,
html:not(.dark) .s-block h1,
html:not(.dark) .s-block h2,
html:not(.dark) .s-block h3,
html:not(.dark) .s-block h4,
html:not(.dark) .s-slider-block,
html:not(.dark) .s-slider-block p,
html:not(.dark) .s-slider-block span,
html:not(.dark) .s-slider-block h2,
html:not(.dark) .s-slider-block h3,
html:not(.dark) .testimonial,
html:not(.dark) .testimonial *,
html:not(.dark) [class*="testimonial"],
html:not(.dark) [class*="testimonial"] p,
html:not(.dark) [class*="testimonial"] span,
html:not(.dark) [class*="testimonial"] h2,
html:not(.dark) [class*="testimonial"] h3 {
  color: #111827 !important;
}

/* Keep primary/price green on main page */
html:not(.dark) main .text-primary,
html:not(.dark) main .price,
html:not(.dark) main .product-price,
html:not(.dark) .s-block .text-primary,
html:not(.dark) .s-block .price {
  color: #00a89f !important;
}

/* ========== MOBILE SIDE MENU – currency & text BLACK (light mode) ========== */
html:not(.dark) .s-drawer,
html:not(.dark) .s-drawer *,
html:not(.dark) .s-mobile-menu,
html:not(.dark) .s-mobile-menu *,
html:not(.dark) .mobile-menu,
html:not(.dark) .mobile-menu *,
html:not(.dark) .s-menu-wrapper,
html:not(.dark) .s-menu-wrapper *,
html:not(.dark) [class*="drawer-content"],
html:not(.dark) [class*="drawer-content"] *,
html:not(.dark) [class*="side-menu"],
html:not(.dark) [class*="side-menu"] * {
  color: #111827 !important;
  fill: #111827 !important;
}

html:not(.dark) [class*="currency"],
html:not(.dark) [class*="Currency"],
html:not(.dark) .s-currency,
html:not(.dark) .s-currency *,
html:not(.dark) .currency-list,
html:not(.dark) .currency-list *,
html:not(.dark) .s-drawer [class*="currency"],
html:not(.dark) .s-drawer [class*="currency"] * {
  color: #111827 !important;
  fill: #111827 !important;
}

/* ========== MOBILE BOTTOM HEADER ========== */
@media (max-width: 768px) {
  .bottom-header {
    position: fixed !important;
    bottom: 16px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 9999 !important;
    height: 66px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
  }
  body {
    padding-bottom: 110px !important;
  }

  .bottom-header-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }
  .bottom-header-button {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .bottom-header-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .bottom-header-icon > span {
    display: none !important;
  }
  .bottom-header-icon i,
  .bottom-header-icon svg {
    font-size: 22px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .bottom-header-search .search-btn {
    display: flex !important;
  }
  .bottom-header .s-cart-summary-content {
    display: none !important;
  }
  .bottom-header .s-cart-summary-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 2px 6px !important;
  }

  /* Light mode bottom bar – NO green square on cart */
  html:not(.dark) .bottom-header-buttons {
    background-color: #f9fafb !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  }
  html:not(.dark) .bottom-header-icon i,
  html:not(.dark) .bottom-header-icon svg,
  html:not(.dark) .bottom-header-icon [class*="sicon"] {
    color: #111827 !important;
    fill: #111827 !important;
  }
  html:not(.dark) .bottom-header-cart,
  html:not(.dark) .bottom-header-cart .bottom-header-icon {
    background: transparent !important;
    border-radius: 0 !important;
  }
  html:not(.dark) .bottom-header-cart i,
  html:not(.dark) .bottom-header-cart svg {
    color: #00a89f !important;
    fill: #00a89f !important;
  }
  html:not(.dark) .bottom-header .s-cart-summary-count {
    background-color: #00a89f !important;
    color: #ffffff !important;
  }

  /* Dark mode bottom bar */
  html.dark .bottom-header-buttons {
    background-color: #111111 !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6) !important;
  }
  html.dark .bottom-header-icon i,
  html.dark .bottom-header-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
  html.dark .bottom-header-cart,
  html.dark .bottom-header-cart .bottom-header-icon {
    background: transparent !important;
    border-radius: 0 !important;
  }
  html.dark .bottom-header-cart i,
  html.dark .bottom-header-cart svg {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
  html.dark .bottom-header .s-cart-summary-count {
    background-color: #00a89f !important;
    color: #ffffff !important;
  }
}

/* Centered icons version */
@media (max-width: 768px) {
  .bottom-header-buttons {
    justify-content: center !important;
    gap: 24px !important;
    padding: 0 12px !important;
  }
  .bottom-header-button {
    flex: 0 0 auto !important;
  }
  .bottom-header-icon {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Hide bottom bar on product page only */
@media (max-width: 768px) {
  body.product-single .bottom-header {
    display: none !important;
  }
  body.product-single {
    padding-bottom: 40px !important;
  }
}

/* User menu dropdown (light mode) */
html:not(.dark) .s-user-menu-dropdown,
html:not(.dark) .s-user-menu-dropdown-list {
  background-color: #ffffff !important;
}
html:not(.dark) .s-user-menu-dropdown *,
html:not(.dark) .s-user-menu-dropdown-list * {
  color: #111827 !important;
  fill: #111827 !important;
  stroke: #111827 !important;
}
html:not(.dark) .s-user-menu-dropdown-item-logout,
html:not(.dark) .s-user-menu-dropdown-item-logout * {
  color: #dc2626 !important;
}

/* Trust badges */
.s-trust-badges-label,
.s-trust-badges-number {
  color: #ffffff !important;
}

/* Contact buttons */
.s-contacts-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  padding: 15px 0 !important;
}
.s-contacts-item {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  min-height: 50px !important;
}
.s-contacts-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 6px;
  padding: 4px;
  margin-left: 10px;
  flex-shrink: 0;
}
.s-contacts-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: #ffffff !important;
}
.s-contacts-item .unicode {
  font-size: 12px !important;
  font-weight: 500 !important;
  direction: ltr !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  text-align: right;
}
@media (max-width: 768px) {
  .s-contacts-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .s-contacts-item .unicode {
    font-size: 11px !important;
  }
  .s-contacts-item {
    padding: 5px 8px !important;
  }
}

/* ========== FOOTER TEXT → WHITE (light mode only, scoped to footer) ========== */
html:not(.dark) .store-footer,
html:not(.dark) .store-footer *,
html:not(.dark) .store-footer p,
html:not(.dark) .store-footer a,
html:not(.dark) .store-footer span,
html:not(.dark) .store-footer .footer-title,
html:not(.dark) .store-footer .footer-description,
html:not(.dark) .store-footer .footer-list a,
html:not(.dark) .store-footer .footer-profile p,
html:not(.dark) .store-footer .copyrights,
html:not(.dark) .store-footer .copyrights p,
html:not(.dark) .store-footer .da-tm {
  color: #ffffff !important;
}
html:not(.dark) .store-footer a:hover {
  color: #00a89f !important;
}

/* Prevent logo duplication flash on load */
.logo-light,
.logo-dark {
  display: none !important;
}
html:not(.dark) .logo-light {
  display: block !important;
}
html.dark .logo-dark {
  display: block !important;
}

/* ========== ANNOUNCEMENT BAR – speed + WHITE text (must be last) ========== */
.angel-ad__slider {
  animation-duration: 10s !important;
}

.angel-ad,
.angel-ad *,
.angel-ad span,
.angel-ad p,
.angel-ad a,
.angel-ad__content,
.angel-ad__content *,
.angel-ad__item,
.angel-ad__item *,
html:not(.dark) .angel-ad,
html:not(.dark) .angel-ad *,
html:not(.dark) .header-inner .angel-ad,
html:not(.dark) .header-inner .angel-ad *,
html:not(.dark) .header .angel-ad,
html:not(.dark) .header .angel-ad *,
html:not(.dark) .store-header .angel-ad,
html:not(.dark) .store-header .angel-ad * {
  color: #ffffff !important;
}

/* ========== ADD TO CART – gradient + rounded + neon ========== */
salla-add-product-button button,
salla-add-product-button .s-button,
salla-add-product-button .s-button-primary,
.s-add-product-button button,
.s-add-product-button .s-button,
button.s-button-primary,
.btn-primary,
.s-button.s-button-primary,
[class*="add-product"] button,
[class*="add-to-cart"] button {
  background: linear-gradient(
    180deg,
    #00c4b8 0%,
    #00a89f 40%,
    #007a73 100%
  ) !important;
  border: 1px solid rgba(0, 255, 230, 0.35) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  box-shadow:
    0 0 8px rgba(0, 168, 159, 0.45),
    0 0 20px rgba(0, 168, 159, 0.25),
    0 4px 14px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.25s ease, filter 0.2s ease, transform 0.15s ease;
}

salla-add-product-button button *,
salla-add-product-button .s-button *,
.s-add-product-button button *,
button.s-button-primary *,
[class*="add-product"] button * {
  color: #ffffff !important;
}

/* Hover – stronger neon */
salla-add-product-button button:hover,
salla-add-product-button .s-button:hover,
.s-add-product-button button:hover,
button.s-button-primary:hover,
[class*="add-product"] button:hover {
  filter: brightness(1.06);
  box-shadow:
    0 0 12px rgba(0, 220, 200, 0.7),
    0 0 28px rgba(0, 168, 159, 0.4),
    0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Pressed */
salla-add-product-button button:active,
.s-add-product-button button:active,
button.s-button-primary:active {
  transform: scale(0.98);
  box-shadow:
    0 0 6px rgba(0, 168, 159, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ========== PRODUCT DESCRIPTION – fix light/dark switch ========== */
html:not(.dark) .product__description,
html:not(.dark) .product__description *:not(a):not(a *),
html:not(.dark) .short__description,
html:not(.dark) .short__description *:not(a):not(a *) {
  color: #111827 !important;
}
html:not(.dark) .product__description a,
html:not(.dark) .product__description a *,
html:not(.dark) .short__description a,
html:not(.dark) .short__description a * {
  color: #00a89f !important;
}

html.dark .product__description,
html.dark .product__description *:not(a):not(a *),
html.dark .short__description,
html.dark .short__description *:not(a):not(a *) {
  color: #e8e8e8 !important;
}
html.dark .product__description a,
html.dark .product__description a *,
html.dark .short__description a,
html.dark .short__description a * {
  color: #00a89f !important;
}