/* =========================================================
   ZAHRI — SALLA HIGH (BREAST CANCER AWARENESS EDITION)
   DARK BOTANICAL + DUSTY ROSE & PINK RIBBON ACCENTS
   ========================================================= */

/* =========================================================
   01 — COLOR SYSTEM & SALLA OVERRIDES
   ========================================================= */
:root {
  --zh-canvas: #FAF6F0;
  --zh-canvas-deep: #F6EDEE; /* لمسة ناعمة دافئة مائلة للوردي */
  --zh-card: #FFFFFF;

  /* Botanical Dark Green Palette */
  --zh-forest-deep: #132B1E;
  --zh-forest-dark: #193525;
  --zh-forest-base: #294B38;
  --zh-forest-subtle: #55705D;

  /* Breast Cancer Awareness Pink Palette */
  --zh-bca-pink-dark: #C25975;   /* وردي توعوي عميق وفخم */
  --zh-bca-pink-base: #E27992;   /* لون الشريط الوردي الأيقوني */
  --zh-bca-pink-soft: #F7D6DE;   /* وردي ناعم للخلفيات والحدود */
  --zh-bca-pink-glow: rgba(226, 121, 146, 0.22);
  --zh-gold-accent: #C5A880;

  --zh-text-title: #A8435F;
  --zh-text-body: #3D4A42;
  --zh-text-muted: #8A968F;

  --zh-shadow-flat: 0 4px 14px rgba(194, 89, 117, 0.08);
  --zh-shadow-card: 0 10px 26px rgba(19, 43, 30, 0.07);

  /* Force Salla System Variables */
  --color-primary: var(--zh-bca-pink-dark) !important;
  --color-primary-reverse: #FFFFFF !important;
  --color-danger: var(--zh-bca-pink-dark) !important;
  --color-discount: var(--zh-bca-pink-dark) !important;
  --color-sale-price: var(--zh-bca-pink-dark) !important;
  --product-price-color: var(--zh-bca-pink-dark) !important;
  --product-regular-price-color: var(--zh-text-muted) !important;
}

/* =========================================================
   02 — PAGE BACKGROUND & AWARENESS GLOW
   ========================================================= */
html,
body {
  background: linear-gradient(180deg, var(--zh-canvas) 0%, var(--zh-canvas-deep) 45%, var(--zh-canvas) 100%) !important;
  color: var(--zh-text-body) !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  position: relative !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  border-top: 6px solid var(--zh-bca-pink-base) !important;
  border-bottom: 6px solid var(--zh-forest-dark) !important;
}

/* هالة وردية توعوية خلفية خفيفة بدون بطء */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 10%, rgba(226, 121, 146, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 25%, rgba(194, 89, 117, 0.09) 0%, transparent 40%),
    radial-gradient(circle at 50% 85%, rgba(41, 75, 56, 0.05) 0%, transparent 40%);
}

/* نمط أوراق الشجر مع لمسة وردية */
body::after {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23C25975' stroke-width='1.3' opacity='.8'%3E%3Cpath d='M45 44 C31 27 31 13 45 7 C59 13 59 27 45 44Z' fill='%23E27992' fill-opacity='.12'/%3E%3Cpath d='M45 44 C62 30 76 32 82 45 C76 58 62 59 45 44Z' fill='%23E27992' fill-opacity='.12'/%3E%3Cpath d='M45 44 C59 61 58 75 45 83 C32 75 31 61 45 44Z' fill='%23E27992' fill-opacity='.12'/%3E%3Cpath d='M45 44 C28 59 14 57 8 45 C14 32 28 30 45 44Z' fill='%23E27992' fill-opacity='.12'/%3E%3Ccircle cx='45' cy='44' r='3.5' fill='%23C25975' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 48px;
  background-repeat: repeat;
  transform: translateZ(0);
  will-change: transform;
  animation: zhBotanicalDrift 22s linear infinite alternate;
}

@keyframes zhBotanicalDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(20px, -20px, 0); }
}

header,
main,
footer,
section,
.s-block,
.container,
.product-single {
  position: relative;
  z-index: 1;
}

/* =========================================================
   03 — TOP RIBBON / ANNOUNCEMENT BAR (شريط التوعية)
   ========================================================= */
.s-block--announcement-bar,
.announcement-bar {
  background: linear-gradient(90deg, #B24663 0%, var(--zh-bca-pink-base) 50%, #B24663 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px var(--zh-bca-pink-glow) !important;
}

/* =========================================================
   04 — HEADER (الزيتي الفخم مع تطعيمات وردية)
   ========================================================= */
salla-header,
header,
.header,
.store-header,
.site-header,
.product-header,
.header__inner,
.navbar,
.app-header {
  background: linear-gradient(110deg, var(--zh-forest-deep) 0%, var(--zh-forest-dark) 40%, #20422F 100%) !important;
  background-color: var(--zh-forest-dark) !important;
  color: #FFFDF9 !important;
  border-bottom: 3.5px solid var(--zh-bca-pink-base) !important; /* شريط سفلي بلون شريط التوعية */
  box-shadow: 0 6px 20px rgba(19, 43, 30, .22) !important;
}

header .navbar-nav > li > a,
header .main-menu > li > a,
header nav a {
  color: #FFFDF9 !important;
  font-weight: 600 !important;
  transition: color .2s ease;
}

header .navbar-nav > li > a:hover,
header nav a:hover {
  color: var(--zh-bca-pink-soft) !important;
}

/* لمسات الأيقونات في الهيدر */
header [class^="sicon-"],
header [class*=" sicon-"],
header svg {
  color: #FFFDF9 !important;
  fill: #FFFDF9 !important;
}

/* تمييز عداد السلة بالوردي التوعوي */
.cart-badge,
.s-cart-summary-count,
[class*="badge-count"] {
  background: var(--zh-bca-pink-base) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 8px var(--zh-bca-pink-base) !important;
}

/* =========================================================
   05 — TITLES & HEADINGS
   ========================================================= */
.s-block-title,
.section-title,
.home-block-title,
main h1,
main h2,
main h3,
.product-title,
.product-single h1 {
  color: var(--zh-bca-pink-dark) !important;
  font-weight: 800 !important;
}

/* خط زينة تحت العناوين مدمج برمز الشريط التوعوي */
.s-block-title::after,
.section-title::after,
.home-block-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 50px;
  background: linear-gradient(90deg, transparent, var(--zh-bca-pink-base), var(--zh-gold-accent), var(--zh-bca-pink-base), transparent) !important;
}

/* =========================================================
   06 — PRODUCT CARDS (إطار زيتي فاخر بلمسة وردية ناعمة)
   ========================================================= */
salla-product-card,
custom-salla-product-card,
.s-product-card-entry,
.s-product-card-vertical,
.s-product-card,
.product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--zh-card) !important;
  border: 1.5px solid rgba(41, 75, 56, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: var(--zh-shadow-card) !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

/* إطار وردي رقيق داخلي */
.s-product-card-entry::before,
.s-product-card-vertical::before,
.s-product-card::before,
.product-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 1.5px solid var(--zh-bca-pink-soft) !important;
  border-radius: 16px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: border-color .25s ease;
}

salla-product-card:hover,
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px var(--zh-bca-pink-glow) !important;
  border-color: var(--zh-bca-pink-base) !important;
}

salla-product-card:hover::before,
.product-card:hover::before {
  border-color: var(--zh-bca-pink-base) !important;
}

.product-card .product-title,
.s-product-card h3,
.s-product-card h4 {
  color: var(--zh-forest-dark) !important;
  font-weight: 700 !important;
}

/* شارات الخصم بالوردي التوعوي */
.badge--discount,
.product-label,
.s-product-card-badge {
  background: var(--zh-bca-pink-base) !important;
  color: #FFFFFF !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
}

/* =========================================================
   07 — PRICES & CURRENCY
   ========================================================= */
salla-price,
money-component,
.price,
.product-price,
.s-product-card-sale-price,
.total-price,
.price-after,
.price-current {
  color: var(--zh-bca-pink-dark) !important;
  font-weight: 800 !important;
}

salla-price *,
money-component *,
.price * {
  color: var(--zh-bca-pink-dark) !important;
}

del,
del *,
.price-before,
.regular-price {
  color: var(--zh-text-muted) !important;
}

/* =========================================================
   08 — BUTTONS & ADD TO CART (الوردي التوعوي للأزرار)
   ========================================================= */
.btn-primary,
.button-primary,
.btn--primary,
.add-to-cart,
.product-card button,
.s-button-btn,
salla-add-product-button button,
.s-add-to-cart-btn {
  background: linear-gradient(135deg, var(--zh-bca-pink-dark) 0%, var(--zh-bca-pink-base) 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px var(--zh-bca-pink-glow) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.btn-primary:hover,
.button-primary:hover,
.add-to-cart:hover,
salla-add-product-button button:hover {
  background: linear-gradient(135deg, #A8435F 0%, var(--zh-bca-pink-dark) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(194, 89, 117, 0.35) !important;
}

/* =========================================================
   09 — SINGLE PRODUCT DETAILS & TABS
   ========================================================= */
.product-single,
.product-details {
  background: #FFFFFF !important;
  border: 2px solid var(--zh-bca-pink-soft) !important;
  border-radius: 24px !important;
  box-shadow: var(--zh-shadow-card) !important;
  position: relative !important;
}

.product-single::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border: 1px dashed rgba(226, 121, 146, 0.4) !important;
  border-radius: 20px !important;
  pointer-events: none !important;
}

/* =========================================================
   10 — FOOTER (الزيتي الداكن مع إطار علوي وتأثير وردي ناعم)
   ========================================================= */
salla-footer,
.store-footer,
footer,
.footer {
  background: linear-gradient(135deg, var(--zh-forest-deep) 0%, var(--zh-forest-dark) 45%, #254432 100%) !important;
  color: #FFFDF9 !important;
  border-top: 4px solid var(--zh-bca-pink-base) !important;
  border-top-left-radius: 32px !important;
  border-top-right-radius: 32px !important;
  box-shadow: 0 -10px 30px rgba(19, 43, 30, .18) !important;
}

footer a:hover,
.store-footer a:hover {
  color: var(--zh-bca-pink-soft) !important;
}

/* =========================================================
   11 — RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  body {
    border-top-width: 4px !important;
  }
  
  .s-product-card-entry::before,
  .s-product-card-vertical::before {
    inset: 3px !important;
    border-radius: 14px !important;
  }
}