/* Add custom CSS styles below */ 
/* =========================================================
   SENZ – Global Design System (Salla)
   Font + Colors + Typography + Buttons + Product Cards
   ========================================================= */

/* 1) Tokens */
:root{
  /* Typography */
  --senz-font: "IBM Plex Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Brand Colors */
  --color-primary: #004956;
  --color-primary-hover: #003945;
  --color-primary-dark: #002f38;

  /* UI */
  --radius-lg: 18px;
  --radius-md: 12px;

  --shadow-card: 0 8px 22px rgba(0,0,0,.05);
  --shadow-card-hover: 0 16px 44px rgba(0,0,0,.10);

  --shadow-btn: 0 6px 18px rgba(0,0,0,.08);
  --shadow-btn-hover: 0 10px 22px rgba(0,0,0,.12);

  --sale-red: #C0392B;
  --muted-gray: #9CA3AF;
}

/* 2) Base font */
body, button, input, textarea, select{
  font-family: var(--senz-font) !important;
}

/* 3) Typography hierarchy */
h1{ font-weight: 700 !important; }
h2, h3{ font-weight: 600 !important; }
p, li{
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* 4) Primary buttons (Premium CTA) */
.s-button-primary,
button.s-button-primary,
.s-button-btn.s-button-primary{
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease !important;
  box-shadow: var(--shadow-btn) !important;
}

.s-button-primary:hover,
button.s-button-primary:hover,
.s-button-btn.s-button-primary:hover{
  background: var(--color-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-btn-hover) !important;
}

/* Remove hover lift on touch devices */
@media (hover: none){
  .s-button-primary:hover,
  button.s-button-primary:hover,
  .s-button-btn.s-button-primary:hover{
    transform: none !important;
  }
}

/* 5) Product cards: clean + premium */
.s-product-card,
.s-product-card-vertical,
.s-products-slider-card{
  border: 0 !important;
  outline: 0 !important;
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important; /* fixes image bleeding */
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.s-product-card:hover,
.s-product-card-vertical:hover,
.s-products-slider-card:hover{
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* Prevent any inner borders looking like frames */
.s-product-card *{
  border-color: transparent !important;
}

/* 6) Image container: no frames + respect radius */
.s-product-card .s-product-card-image,
.s-product-card .s-product-card__image,
.s-product-card .s-product-card__image-wrapper,
.s-product-card .s-product-card-media,
.s-product-card .s-product-card__media{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-radius: 16px 16px 0 0 !important; /* top only */
}

/* Ensure the product image itself never exceeds container */
.s-product-card img{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* 7) Card separator line (if theme injects one) */
.s-product-card hr,
.s-product-card .separator,
.s-product-card [class*="line"]{
  background-color: var(--color-primary) !important;
}

/* 8) Price styling */
.price--compare, .price--old, .s-price-old, del{
  color: var(--muted-gray) !important;
  text-decoration-thickness: 2px !important;
}

.price--sale, .price--new, .s-price-sale{
  color: var(--sale-red) !important;
  font-weight: 700 !important;
}

/* =========================================================
   SENZ – Sticky Product Bar (Premium + Clean + No Duplicates)
   Target: section.sticky-product-bar.dark
   ========================================================= */

/* Tokens (sticky-only) */
:root{
  --senz-primary: #004956;
  --senz-primary-hover: #003945;

  --senz-text: #111827;
  --senz-muted: #9CA3AF;
  --senz-sale: #C0392B;

  --senz-radius: 12px;
  --senz-shadow: 0 -10px 30px rgba(0,0,0,.08);

  --senz-border: rgba(0,0,0,.08);
  --senz-bg: rgba(255,255,255,.92);
}

/* ---------------------------------------------------------
   1) Bar surface (fix dark style)
--------------------------------------------------------- */
section.sticky-product-bar.dark,
.sticky-product-bar.dark,
.is-sticky-product-bar .sticky-product-bar.dark{
  background: var(--senz-bg) !important;
  border-top: 1px solid var(--senz-border) !important;
  box-shadow: var(--senz-shadow) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* Kill theme dark variables (prevent forced dark bg) */
section.sticky-product-bar.dark{
  --dark-grey: var(--senz-bg) !important;
  --dark-bg-main: var(--senz-bg) !important;
  color: var(--senz-text) !important;
}

/* ---------------------------------------------------------
   2) Spacing / layout base
--------------------------------------------------------- */
section.sticky-product-bar .container{
  padding: 10px 16px !important;
  gap: 12px !important;
}

/* ---------------------------------------------------------
   3) Title + price typography
--------------------------------------------------------- */
section.sticky-product-bar .sticky-product-bar__title{
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 2px 0 !important;
  color: var(--senz-text) !important;
}

/* ---------------------------------------------------------
   4) PRICE: prevent duplication + force order (NEW then OLD)
   - بعض الثيمات تطبع السعر مرتين داخل الـ sticky
--------------------------------------------------------- */

/* Hide common duplicated price block (often comes right after title) */
section.sticky-product-bar .sticky-product-bar__title + [class*="price"]{
  display: none !important;
}

/* Hide other possible extra widgets that duplicate price inside sticky */
section.sticky-product-bar [data-price],
section.sticky-product-bar .salla-price-widget{
  display: none !important;
}

/* Ensure ONE price area looks clean (targets the “real” price area) */
section.sticky-product-bar .sticky-product-bar__info [class*="price"],
section.sticky-product-bar .sticky-product-bar__content [class*="price"],
section.sticky-product-bar .sticky-product-bar__details [class*="price"]{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--senz-text) !important;
}

/* New price (sale) */
section.sticky-product-bar .price--sale,
section.sticky-product-bar .price--new,
section.sticky-product-bar .s-price-sale{
  color: var(--senz-sale) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  order: 1 !important; /* NEW first */
}

/* Old price */
section.sticky-product-bar del,
section.sticky-product-bar .price--compare,
section.sticky-product-bar .price--old,
section.sticky-product-bar .s-price-old{
  color: var(--senz-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  opacity: .78 !important;
  text-decoration-thickness: 1.5px !important;
  order: 2 !important; /* OLD second */
}

/* ---------------------------------------------------------
   5) Quantity + buttons aligned
--------------------------------------------------------- */
section.sticky-product-bar .sticky-product-bar__quantity{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Unified button base */
section.sticky-product-bar button,
section.sticky-product-bar a.s-button,
section.sticky-product-bar .s-button-btn,
section.sticky-product-bar .s-button-element{
  height: 44px !important;
  border-radius: var(--senz-radius) !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}

/* Primary: Add to cart */
section.sticky-product-bar salla-add-product-button button,
section.sticky-product-bar .s-button-primary,
section.sticky-product-bar button.s-button-primary,
section.sticky-product-bar .s-button-element.s-button-primary{
  background: var(--senz-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}

section.sticky-product-bar salla-add-product-button button:hover,
section.sticky-product-bar .s-button-primary:hover{
  background: var(--senz-primary-hover) !important;
}

/* Secondary: Buy now (outline) */
section.sticky-product-bar .s-button-outline,
section.sticky-product-bar button.s-button-outline,
section.sticky-product-bar .s-button-secondary,
section.sticky-product-bar button.s-button-secondary,
section.sticky-product-bar .s-button-element.s-button-secondary{
  background: transparent !important;
  color: var(--senz-primary) !important;
  border: 1.5px solid var(--senz-primary) !important;
}

section.sticky-product-bar .s-button-outline:hover,
section.sticky-product-bar .s-button-secondary:hover{
  background: rgba(0,73,86,.06) !important;
}

/* ---------------------------------------------------------
   6) Quantity control FIX (no double borders / no circles)
--------------------------------------------------------- */

/* Outer pill */
section.sticky-product-bar salla-quantity-input,
section.sticky-product-bar .s-quantity-input,
section.sticky-product-bar .s-quantity-input.hydrated,
section.sticky-product-bar [class*="quantity"]{
  height: 44px !important;
  border-radius: 14px !important;
  overflow: hidden !important; /* important: clip inner lines */
  border: 1px solid rgba(0,0,0,.14) !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Remove inner borders/radius/shadows */
section.sticky-product-bar salla-quantity-input *,
section.sticky-product-bar .s-quantity-input *{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* +/- buttons */
section.sticky-product-bar salla-quantity-input button,
section.sticky-product-bar .s-quantity-input button{
  height: 44px !important;
  width: 44px !important;
  padding: 0 !important;
  background: #fff !important;
  color: var(--senz-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Quantity number */
section.sticky-product-bar salla-quantity-input input,
section.sticky-product-bar .s-quantity-input input{
  height: 44px !important;
  width: 52px !important;
  text-align: center !important;
  background: transparent !important;
  color: var(--senz-text) !important;
  font-weight: 700 !important;
  outline: none !important;
}

/* Subtle separators inside the pill */
section.sticky-product-bar salla-quantity-input button:first-child,
section.sticky-product-bar .s-quantity-input button:first-child{
  border-left: 1px solid rgba(0,0,0,.08) !important;
}
section.sticky-product-bar salla-quantity-input button:last-child,
section.sticky-product-bar .s-quantity-input button:last-child{
  border-right: 1px solid rgba(0,0,0,.08) !important;
}

/* ---------------------------------------------------------
   7) Mobile safe area
--------------------------------------------------------- */
@media (max-width: 768px){
  section.sticky-product-bar{
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ---------------------------------------------------------
   8) Touch devices: no hover weirdness
--------------------------------------------------------- */
@media (hover: none){
  section.sticky-product-bar button:hover,
  section.sticky-product-bar a.s-button:hover{
    transform: none !important;
  }
}

/* =========================================
   SENZ – Angel Discount Coupon (Final Clean)
   Target: .angel-discountcoupon.details
========================================= */

.angel-discountcoupon.details{
  /* Reset any theme borders */
  border: 0 !important;
  outline: 0 !important;
  border-style: none !important;

  /* Card look */
  background: rgba(255,255,255,.90) !important;
  border-radius: 18px !important;
  padding: 22px !important;

  /* Premium depth */
  box-shadow: 0 18px 40px rgba(0,0,0,.06) !important;

  /* Small brand accent */
  border-top: 3px solid #004956 !important;

  position: relative !important;
  overflow: hidden !important; /* prevents any weird overlay bleeding */
}

/* If theme injects dashed borders inline or via extra wrappers */
.angel-discountcoupon.details *,
.angel-discountcoupon.details[style*="dashed"]{
  border-style: none !important;
}

/* Kill pseudo-elements that may draw a frame */
.angel-discountcoupon.details::before,
.angel-discountcoupon.details::after,
.angel-discountcoupon.details *::before,
.angel-discountcoupon.details *::after{
  box-shadow: none !important;
  outline: none !important;
}

/* Title */
.angel-discountcoupon.details .coupon-title{
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #004956 !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

/* Description */
.angel-discountcoupon.details .coupon-percentage{
  font-size: 14px !important;
  color: #374151 !important;
  margin: 0 0 14px !important;
  line-height: 1.6 !important;
}

/* Code input */
.angel-discountcoupon.details .coupon-value{
  height: 56px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  padding: 0 16px !important;

  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;

  background: #fff !important;
  color: #111827 !important;

  cursor: pointer !important;
}

.angel-discountcoupon.details .coupon-value:focus{
  outline: none !important;
  border-color: rgba(0,73,86,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,73,86,.10) !important;
}

/* Copy button */
.angel-discountcoupon.details .copycodebtn{
  height: 56px !important;
  border-radius: 16px !important;

  background: #004956 !important;
  color: #fff !important;
  border: none !important;

  font-weight: 700 !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.10) !important;
}

.angel-discountcoupon.details .copycodebtn:hover{
  background: #003945 !important;
}

/* Optional: If layout feels tight, make spacing consistent */
.angel-discountcoupon.details .coupon-copy-button{
  display: grid !important;
  gap: 12px !important;
}

/* =====================================
   SENZ – Product Title & Price Hierarchy
===================================== */

/* Product Title Upgrade */
h1.da-tm{
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 16px !important;
}

/* New Price */
.total-price{
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #D64545 !important;
}

/* Old Price */
.before-price{
  font-size: 16px !important;
  opacity: .6 !important;
}

/* Availability */
.product-availability{
  font-size: 14px !important;
}

/* Hide phone inside contact section only */
#contact-slot a[href^="tel:"] {
  display: none !important;
}

/* Hide COD icon specifically */
.pay-cod {
  display: none !important;
}

/* Hide WhatsApp floating icon */
#wa-angel {
  display: none !important;
}