/*
 ╔══════════════════════════════════════════╗
 ║  TWILIGHT LIGHT — Salla CSS              ║
 ║  أبيض + بنفسجي · خفيف · لا يكسر شيء   ║
 ╚══════════════════════════════════════════╝
*/
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;900&family=Outfit:wght@400;500;600&display=swap');

:root {
  --v:      #7c3aed;
  --v-lt:   #8b5cf6;
  --v-pale: #ede9fe;
  --v-soft: #f5f3ff;
  --txt:    #1a1523;
  --txt-2:  #4a4560;
  --txt-3:  #9488b0;
  --border: #e8e4f8;
  --f:      'Tajawal', sans-serif;
  --fe:     'Outfit', sans-serif;
  --r:      8px;
  --r2:     14px;
  --r3:     20px;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: #faf9ff !important;
  color: var(--txt) !important;
  font-family: var(--f) !important;
  direction: rtl !important;
  overflow-x: hidden !important;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--v-soft); }
::-webkit-scrollbar-thumb { background: var(--v-pale); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--v-lt); }
::selection { background: var(--v-pale); color: var(--v); }

/* ─── Header ─── */
header,
salla-header,
.header,
[class*="site-header"],
[class*="main-header"] {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  transition: box-shadow .3s ease, transform .4s ease !important;
}

header.tw-scrolled,
salla-header.tw-scrolled {
  box-shadow: 0 2px 16px rgba(124,58,237,0.1) !important;
}

/* ─── شعار المتجر الأصلي ─── */
header img,
salla-header img,
.header img,
[class*="logo"] img,
[data-element="logo"] img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ─── Nav ─── */
nav a,
header nav a,
[class*="nav-link"],
[class*="menu-link"],
[class*="nav__link"],
[class*="menu-item"] > a {
  color: var(--txt-2) !important;
  font-family: var(--f) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-text-fill-color: unset !important;
  transition: color .2s !important;
}

nav a:hover, header nav a:hover { color: var(--v) !important; }
nav a.active, nav a[aria-current="page"],
[class*="current"] > a, [class*="active"] > a {
  color: var(--v) !important;
  font-weight: 600 !important;
}

[class*="dropdown"], [class*="sub-menu"] {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r2) !important;
  box-shadow: 0 8px 28px rgba(124,58,237,0.1) !important;
}
[class*="dropdown"] a, [class*="sub-menu"] a {
  color: var(--txt-2) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
[class*="dropdown"] a:hover, [class*="sub-menu"] a:hover {
  color: var(--v) !important;
  background: var(--v-soft) !important;
}

/* ─── Mobile menu ─── */
salla-side-menu a,
#mobile-menu a,
[class*="mobile-menu"] a,
[class*="side-menu"] a {
  color: var(--txt-2) !important;
  -webkit-text-fill-color: var(--txt-2) !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: var(--f) !important;
  transition: color .2s, background .2s !important;
}

salla-side-menu a:hover,
[class*="mobile-menu"] a:hover,
[class*="side-menu"] a:hover {
  color: var(--v) !important;
  -webkit-text-fill-color: var(--v) !important;
  background: var(--v-soft) !important;
}

/* ─── Product cards ─── */
salla-product-card,
.s-product-card,
.product-card,
[class*="product-card"] {
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r3) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(124,58,237,0.06) !important;
  transition: transform .32s ease, box-shadow .32s ease, border-color .22s !important;
  position: relative !important;
}

salla-product-card:hover,
.product-card:hover,
[class*="product-card"]:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 28px rgba(124,58,237,0.13) !important;
  border-color: rgba(124,58,237,0.25) !important;
}

/* خط بنفسجي عند hover */
salla-product-card::before,
.product-card::before,
[class*="product-card"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--v), var(--v-lt)) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform .32s ease !important;
  z-index: 2 !important;
}

salla-product-card:hover::before,
.product-card:hover::before,
[class*="product-card"]:hover::before {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

/* ─── صور المنتجات — كما هي بدون تعديل ─── */
salla-product-card img,
.s-product-card img,
.product-card img,
[class*="product-card"] img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  /* لا object-fit — يكسر الصور أحياناً */
  transition: transform .38s ease !important;
}

salla-product-card:hover img,
.product-card:hover img { transform: scale(1.04) !important; }

/* ─── النص داخل البطاقة — إلغاء الدوائر ─── */

/* الإلغاء الشامل */
salla-product-card *:not(img):not(button):not(a):not(svg):not(path) {
  border-radius: 0 !important;
}

/* البطاقة الرئيسية تبقى مستديرة */
salla-product-card,
salla-product-card article,
salla-product-card > div:first-child {
  border-radius: var(--r3) !important;
}

/* اسم المنتج */
salla-product-card [class*="title"],
salla-product-card [class*="name"],
salla-product-card h1, salla-product-card h2,
salla-product-card h3, salla-product-card h4,
.s-product-card h3,
[class*="product-card__title"],
[class*="product-card__name"],
[class*="product-name"],
[class*="product-title"] {
  font-family: var(--f) !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  color: var(--txt) !important;
  line-height: 1.55 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* السعر */
salla-product-card [class*="price"],
salla-product-card salla-price,
salla-price,
.s-product-card [class*="price"],
[class*="product-card__price"],
[class*="product-price"],
[class*="current-price"],
[class*="sale-price"] {
  font-family: var(--fe) !important;
  font-weight: 600 !important;
  color: var(--v) !important;
  font-size: 1rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

salla-product-card [class*="price"] *,
salla-price * {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* السعر القديم */
del, s,
[class*="original-price"],
[class*="old-price"],
[class*="compare-price"] {
  color: var(--txt-3) !important;
  font-size: .78rem !important;
  text-decoration: line-through !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ─── Buttons ─── */
salla-add-product-button,
salla-add-product-button button,
[class*="add-to-cart"],
[class*="btn-primary"],
[class*="btn--primary"],
.btn-primary,
button[type="submit"] {
  background: var(--v) !important;
  color: #fff !important;
  font-family: var(--f) !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--r) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(124,58,237,0.28) !important;
  transition: all .22s ease !important;
}

salla-add-product-button:hover button,
[class*="btn-primary"]:hover {
  background: #6d28d9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.4) !important;
}

[class*="btn-outline"], [class*="btn--secondary"] {
  background: transparent !important;
  color: var(--v) !important;
  border: 1.5px solid rgba(124,58,237,0.28) !important;
  border-radius: var(--r) !important;
  font-family: var(--f) !important;
  font-weight: 500 !important;
  transition: all .22s !important;
}
[class*="btn-outline"]:hover { background: var(--v-pale) !important; }

/* ─── Search ─── */
[class*="search"] input,
input[type="search"],
salla-search input {
  background: var(--v-soft) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 100px !important;
  color: var(--txt) !important;
  font-family: var(--f) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
[class*="search"] input:focus, input[type="search"]:focus {
  border-color: var(--v) !important;
  box-shadow: 0 0 0 3px var(--v-pale) !important;
  outline: none !important;
  background: #fff !important;
}
input::placeholder, textarea::placeholder { color: var(--txt-3) !important; }

/* ─── Forms ─── */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="search"]):not([type="range"]),
select, textarea {
  background: var(--v-soft) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--txt) !important;
  font-family: var(--f) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--v) !important;
  box-shadow: 0 0 0 3px var(--v-pale) !important;
  outline: none !important;
  background: #fff !important;
}

/* ─── Cart badge ─── */
[class*="cart-count"],
[class*="cart-badge"],
salla-cart-summary [class*="count"] {
  background: var(--v) !important;
  color: #fff !important;
  font-family: var(--fe) !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  min-width: 17px !important;
  text-align: center !important;
}

/* ─── Section titles ─── */
[class*="section-title"],
[class*="section__title"],
[class*="block-title"] {
  font-family: var(--f) !important;
  font-weight: 800 !important;
  font-size: clamp(1.1rem,2.5vw,1.8rem) !important;
  color: var(--txt) !important;
  letter-spacing: -.02em !important;
}

/* ─── Rating ─── */
[class*="stars"] svg, [class*="rating"] svg, [class*="star"] svg {
  color: #f59e0b !important; fill: #f59e0b !important;
}

/* ─── Footer ─── */
footer, salla-footer, [class*="site-footer"] {
  background: #f5f3ff !important;
  border-top: 1.5px solid var(--border) !important;
  color: var(--txt-2) !important;
  font-family: var(--f) !important;
}
footer a, salla-footer a { color: var(--txt-2) !important; text-decoration: none !important; }
footer a:hover, salla-footer a:hover { color: var(--v) !important; }

/* ─── Skeleton ─── */
[class*="skeleton"], [class*="shimmer"] {
  background: linear-gradient(90deg, #f0eeff 25%, #fff 50%, #f0eeff 75%) !important;
  background-size: 300% !important;
  animation: tw-sk 1.8s ease infinite !important;
}

/* ════════════════════════════════════
   INJECTED ELEMENTS
════════════════════════════════════ */

/* Loader */
#tw-loader {
  position: fixed !important; inset: 0 !important; z-index: 999999 !important;
  background: #fff !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 20px !important;
}

.tw-ldr-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: tw-fadeup .4s ease forwards;
}

.tw-ldr-logo-wrap {
  min-height: 50px; display: flex; align-items: center; justify-content: center;
}

.tw-ldr-tag {
  font-family: var(--fe); font-size: .5rem; letter-spacing: .35em;
  color: var(--v-lt); text-transform: uppercase; opacity: .8;
}

.tw-ldr-bar { width: 180px; height: 3px; background: var(--v-pale); border-radius: 3px; overflow: hidden; }
.tw-ldr-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--v), var(--v-lt)); border-radius: 3px; transition: width 1.8s cubic-bezier(.4,0,.2,1); }

.tw-ldr-dots { display: flex; gap: 5px; }
.tw-ldr-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--v-pale); animation: tw-dot 1.2s ease infinite; }
.tw-ldr-dots span:nth-child(2) { animation-delay: .2s; }
.tw-ldr-dots span:nth-child(3) { animation-delay: .4s; }

.tw-corner { position: absolute; width: 48px; height: 48px; }
.tw-corner:nth-child(1) { top:20px; right:20px; border-top:1.5px solid var(--border); border-right:1.5px solid var(--border); border-radius:0 6px 0 0; }
.tw-corner:nth-child(2) { bottom:20px; left:20px; border-bottom:1.5px solid var(--border); border-left:1.5px solid var(--border); border-radius:0 0 0 6px; }
.tw-corner:nth-child(3) { top:20px; left:20px; border-top:1.5px solid var(--border); border-left:1.5px solid var(--border); border-radius:6px 0 0 0; }
.tw-corner:nth-child(4) { bottom:20px; right:20px; border-bottom:1.5px solid var(--border); border-right:1.5px solid var(--border); border-radius:0 0 6px 0; }

/* Marquee */
#tw-marquee {
  height: 52px; background: #fff;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden; display: flex; align-items: center; position: relative;
}
#tw-marquee::before, #tw-marquee::after {
  content: ''; position: absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;
}
#tw-marquee::before { right:0; background:linear-gradient(to left,#fff,transparent); }
#tw-marquee::after  { left:0;  background:linear-gradient(to right,#fff,transparent); }

.tw-mq-track {
  display: flex; white-space: nowrap;
  animation: tw-mq 36s linear infinite; align-items: center;
}

.tw-mq-item {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 28px !important;
  height: 52px;
  border-right: 1px solid var(--border);
}

.tw-mq-name {
  font-family: var(--fe) !important; font-size: .68rem !important;
  letter-spacing: .14em !important; color: var(--txt-2) !important;
  text-transform: uppercase !important; font-weight: 500 !important;
}

/* Offer */
#tw-offer {
  margin: 56px auto; max-width: 1180px; width: calc(100% - 32px);
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--r3);
  padding: clamp(22px,4vw,52px); display: flex; align-items: center;
  justify-content: space-between; gap: 32px; flex-wrap: wrap;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(124,58,237,0.07);
}
#tw-offer::after {
  content: ''; position: absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--v), var(--v-lt), #c4b5fd);
}

.tw-offer-body { position: relative; z-index: 1; flex: 1; min-width: 250px; }
.tw-offer-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--v-soft); border: 1px solid var(--v-pale); border-radius: 100px; font-family: var(--fe); font-size: .67rem; font-weight: 600; color: var(--v); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.tw-offer-h { font-family: var(--f); font-size: clamp(1.4rem,3vw,2.4rem); font-weight: 900; color: var(--txt); margin: 0 0 8px; line-height: 1.2; letter-spacing: -.02em; }
.tw-offer-p { font-family: var(--fe); font-size: .88rem; color: var(--txt-2); margin: 0; line-height: 1.7; }
.tw-offer-btns { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.tw-offer-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 11px 24px !important; background: var(--v) !important; color: #fff !important; border: none !important; border-radius: var(--r) !important; font-family: var(--f) !important; font-weight: 700 !important; font-size: .875rem !important; text-decoration: none !important; cursor: pointer !important; transition: all .22s !important; box-shadow: 0 3px 14px rgba(124,58,237,0.35) !important; }
.tw-offer-btn:hover { background: #6d28d9 !important; transform: translateY(-2px) !important; }
.tw-offer-ghost { display: inline-flex !important; align-items: center !important; padding: 10px 20px !important; background: transparent !important; color: var(--v) !important; border: 1.5px solid rgba(124,58,237,0.28) !important; border-radius: var(--r) !important; font-family: var(--f) !important; font-weight: 500 !important; font-size: .875rem !important; text-decoration: none !important; transition: all .22s !important; cursor: pointer !important; }
.tw-offer-ghost:hover { background: var(--v-pale) !important; }

.tw-timer { display: flex; gap: 7px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: center; }
.tw-tblock { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--v-soft); border: 1.5px solid var(--v-pale); border-radius: 13px; padding: 13px 12px; min-width: 64px; transition: border-color .22s; }
.tw-tblock:hover { border-color: rgba(124,58,237,0.3); }
.tw-tnum { font-family: var(--fe) !important; font-size: 1.75rem !important; font-weight: 600 !important; color: var(--v) !important; line-height: 1 !important; transition: opacity .1s; }
.tw-tlabel { font-size: .58rem !important; color: var(--txt-3) !important; font-family: var(--fe) !important; font-weight: 500 !important; letter-spacing: .08em !important; }
.tw-tsep { font-family: var(--fe); font-size: 1.3rem; font-weight: 300; color: var(--v-lt); margin-bottom: 14px; animation: tw-blink 1s step-end infinite; }

/* Progress */
#tw-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--v), var(--v-lt)); z-index: 99997; pointer-events: none; transition: width .06s linear; }

/* FAB */
#tw-fab { position: fixed; bottom: 24px; left: 24px; width: 48px; height: 48px; background: var(--v); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9000; box-shadow: 0 4px 18px rgba(124,58,237,0.5), 0 0 0 4px var(--v-pale); transition: transform .28s ease, box-shadow .28s; color: #fff; }
#tw-fab:hover { transform: scale(1.1) rotate(-8deg); box-shadow: 0 8px 28px rgba(124,58,237,0.65), 0 0 0 6px var(--v-pale); }

/* Reveal */
.tw-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.tw-revealed { opacity: 1 !important; transform: none !important; }

/* ─── Keyframes ─── */
@keyframes tw-sk { 0%{background-position:-300% center} 100%{background-position:300% center} }
@keyframes tw-mq { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }
@keyframes tw-blink { 0%,100%{opacity:1} 50%{opacity:.15} }
@keyframes tw-fadeup { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes tw-dot { 0%,80%,100%{transform:scale(.8);background:var(--v-pale)} 40%{transform:scale(1.7);background:var(--v)} }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  #tw-offer { flex-direction: column; padding: 20px 16px; gap: 18px; width: calc(100% - 20px); margin: 36px auto; }
  .tw-timer { width: 100%; justify-content: center; }
  .tw-tblock { flex: 1; min-width: 50px; padding: 10px 6px; }
  .tw-tnum { font-size: 1.35rem !important; }
  #tw-fab { bottom: 14px; left: 12px; width: 44px; height: 44px; }
  .tw-corner { display: none; }
  .tw-mq-item { padding: 0 16px !important; }
}

/* ─── Marquee SVG logos ─── */
.tw-mq-logo-svg {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  width: auto !important;
  max-width: 70px !important;
}

.tw-mq-logo-svg svg {
  height: 100% !important;
  width: auto !important;
  max-width: 70px !important;
}

/* ════════════════════════════════════
   PRODUCT IMAGE FIX — دعم إضافي
════════════════════════════════════ */

/* حاوية الصورة */
salla-product-card [class*="image"],
salla-product-card [class*="thumb"],
salla-product-card [class*="media"],
salla-product-card figure,
[class*="product-card__image"],
[class*="product-card__media"],
[class*="product-card__thumb"],
[class*="product__image"],
[class*="product-image-wrap"] {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #f5f3ff !important;
  border-radius: 0 !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
}

/* الصورة نفسها */
salla-product-card img,
.s-product-card img,
.product-card img,
[class*="product-card"] img,
[class*="product-image"] img,
[class*="product-thumb"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 8% !important;
  background: #f5f3ff !important;
  border-radius: 0 !important;
  transition: transform .35s ease !important;
}

salla-product-card:hover img,
.product-card:hover img { transform: scale(1.04) !important; }

/* ════════════════════════════════════════════
   SALLA CSS VARIABLES OVERRIDE
   هذا هو الحل الحقيقي — يتجاوز Tailwind كامل
════════════════════════════════════════════ */

/* إلغاء border-radius من المصدر */
:root,
salla-product-card,
[class*="product-card"] {
  --border-radius: 0px !important;
  --rounded: 0px !important;
  --rounded-sm: 0px !important;
  --rounded-md: 0px !important;
  --rounded-lg: 0px !important;
  --rounded-xl: 0px !important;
  --rounded-2xl: 0px !important;
  --rounded-full: 0px !important;
  --salla-border-radius: 0px !important;
  --salla-rounded: 0px !important;
  --salla-card-border-radius: 0px !important;
  --salla-product-name-border-radius: 0px !important;
  --salla-price-border-radius: 0px !important;
}

/* اسم المنتج — استهداف الكلاس الحقيقي لسلة */
.s-product-card__name,
.salla-product-card__name,
[class*="product-card__name"],
[class*="product-card__title"],
[class*="product__name"],
[class*="product__title"],
salla-product-card .name,
salla-product-card .title,
salla-product-card span,
salla-product-card p {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* السعر */
.s-product-card__price,
.salla-product-card__price,
[class*="product-card__price"],
[class*="product__price"],
salla-product-card .price,
salla-product-card salla-price,
salla-price,
salla-price * {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* shadow DOM ::part() الشامل */
salla-product-card::part(name),
salla-product-card::part(title),
salla-product-card::part(product-name),
salla-product-card::part(product-title),
salla-product-card::part(price),
salla-product-card::part(current-price),
salla-product-card::part(product-price) {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}