/* ---------- 1) متغيرات الهوية ---------- */
:root{
  --color-primary:#7A8F6A !important;
  --color-primary-dark:#5f7252 !important;
  --color-primary-light:#9aae8b !important;
  --color-primary-reverse:#0c0d0a !important;

  --at-bg:#070707;
  --at-panel:#141512;
  --at-panel2:#1a1c17;
  --at-ink:#f2f1ec;
  --at-muted:#a8a8a0;
  --at-line:rgba(255,255,255,.09);
  --at-line-olive:rgba(122,143,106,.4);
  --at-olive:#7A8F6A;
  --at-olive-soft:#9aae8b;
}

/* ---------- 2) الخلفية العامة ---------- */
html,body,.app-inner,main,#app{
  background-color:var(--at-bg) !important;
  color:var(--at-ink) !important;
}
body{
  background-image:
    radial-gradient(900px 600px at 85% -5%, rgba(122,143,106,.12), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgba(122,143,106,.07), transparent 55%) !important;
  background-attachment:fixed !important;
}
h1,h2,h3,h4,h5,h6{color:var(--at-ink) !important}
::selection{background:var(--at-olive);color:#0a0a0a}

/* ---------- 3) كسر الخلفيات الفاتحة (Tailwind utilities في Twilight) ---------- */
.bg-white,.bg-gray-50,.bg-gray-100,.bg-gray-200,
.bg-light,[class*="bg-white"],
section.bg-white,div.bg-white{
  background-color:var(--at-panel) !important;
}
.text-gray-400,.text-gray-500,.text-gray-600,
.text-gray-700,.text-gray-800,.text-gray-900,
.text-dark,.text-black{
  color:var(--at-muted) !important;
}
.border,.border-gray-100,.border-gray-200,.border-gray-300{
  border-color:var(--at-line) !important;
}

/* ---------- 4) الهيدر ---------- */
.store-header,header.store-header,.s-header,
.main-nav-container,.store-header .top-navbar{
  background:rgba(7,7,7,.92) !important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--at-line) !important;
}
.store-header a,.store-header span,.store-header i,
.main-nav-container a{color:var(--at-ink) !important}
.store-header a:hover,.main-nav-container a:hover{color:var(--at-olive-soft) !important}

/* ---------- 5) الأزرار ---------- */
.s-button-element,button[class*="btn"],.salla-button,a.btn{
  border-radius:999px !important;
  transition:all .35s cubic-bezier(.22,.8,.26,.99) !important;
}
.s-button-element--primary,.btn--primary,button[type="submit"],
.btn-primary,[class*="btn-primary"]{
  background:var(--at-olive) !important;
  border-color:var(--at-olive) !important;
  color:#0c0d0a !important;
  font-weight:600;
}
.s-button-element--primary:hover,.btn--primary:hover,
button[type="submit"]:hover,.btn-primary:hover{
  background:transparent !important;
  color:var(--at-olive-soft) !important;
  box-shadow:0 14px 32px -14px rgba(122,143,106,.55);
  transform:translateY(-2px);
}

/* ---------- 6) بطاقات المنتجات — محددات موسّعة ---------- */
salla-product-card,
custom-salla-product-card,
[class*="product-card"],
[class*="product-entry"],
[class*="product-block"],
[class*="product-item"],
.s-product-card-entry,
main article{
  background:linear-gradient(180deg,var(--at-panel2),var(--at-panel)) !important;
  border:1px solid var(--at-line) !important;
  border-radius:18px !important;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.22,.8,.26,.99),
             border-color .45s, box-shadow .45s !important;
}
salla-product-card:hover,
[class*="product-card"]:hover,
[class*="product-entry"]:hover,
[class*="product-block"]:hover,
main article:hover{
  transform:translateY(-8px);
  border-color:var(--at-line-olive) !important;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9) !important;
}

/* صورة المنتج: إطار أبيض نظيف مقصود داخل البطاقة الداكنة */
salla-product-card img,
[class*="product-card"] img,
[class*="product-entry"] img,
main article img{
  border-radius:12px;
  transition:transform .6s ease;
}
salla-product-card:hover img,
[class*="product-card"]:hover img,
main article:hover img{transform:scale(1.05)}

/* نصوص البطاقة */
salla-product-card h3, salla-product-card a,
[class*="product-card"] h3,
[class*="product-card"] a,
[class*="product-entry"] h3,
main article h3, main article a{
  color:var(--at-ink) !important;
}
[class*="product-card"] [class*="price"],
salla-product-card [class*="price"],
main article [class*="price"],
.s-product-card-price{
  color:var(--at-olive-soft) !important;
  font-weight:600;
}

/* ---------- 7) عناوين الأقسام ---------- */
.s-block__title h2,.section-title,main section > div > h2{
  color:var(--at-ink) !important;
}
.s-block__title h2::after{
  content:"";display:block;width:46px;height:2px;
  background:var(--at-olive);margin-top:.5rem;border-radius:2px;
}

/* ---------- 8) النماذج والحقول ---------- */
input,select,textarea,.s-form-control,.form-control{
  background:#0b0c0a !important;
  border:1px solid var(--at-line) !important;
  color:var(--at-ink) !important;
  border-radius:12px !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--at-olive) !important;
  box-shadow:0 0 0 3px rgba(122,143,106,.15) !important;
  outline:none !important;
}
::placeholder{color:#6f7169 !important}

/* ---------- 9) السلة / المودالات ---------- */
.s-cart-summary,.salla-modal,.s-modal,.dropdown__menu,.s-menu,
[class*="modal"] [class*="content"]{
  background:var(--at-panel) !important;
  color:var(--at-ink) !important;
  border:1px solid var(--at-line) !important;
}

/* ---------- 10) الفوتر — إصلاح شامل ---------- */
footer,
.store-footer,
#footer,
[class*="store-footer"],
footer [class*="bg-"],
footer section,
footer > div{
  background:#050505 !important;
  background-color:#050505 !important;
}
footer{border-top:1px solid var(--at-line) !important}
footer h1,footer h2,footer h3,footer h4,footer h5,footer b,footer strong{
  color:var(--at-ink) !important;
}
footer p,footer span,footer li,footer a,footer label,footer div{
  color:var(--at-muted) !important;
}
footer a:hover{color:var(--at-olive-soft) !important}
footer input{background:#0b0c0a !important}
/* أيقونات الدفع وشعار المعروف تبقى بألوانها */
footer img{filter:none !important}
footer [class*="payment"] ,footer [class*="license"]{background:transparent !important}

/* ---------- 11) شرائط وعناصر متفرقة ---------- */
.s-slider-block,.s-banner,.banner-entry{border-radius:18px;overflow:hidden}
hr,[class*="divider"]{border-color:var(--at-line) !important}
.badge,.s-badge,[class*="badge"]{
  background:var(--at-olive) !important;
  color:#0c0d0a !important;
  border-radius:999px !important;
}

/* ---------- 12) شريط التمرير ---------- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#2a2e25;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#3a4033}

/* ---------- 13) تأثير الظهور (من JS) ---------- */
.at-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.at-reveal.at-in{opacity:1;transform:none}

/* ---------- 14) زر واتساب العائم (من JS) ---------- */
.at-wa{
  position:fixed;bottom:1.4rem;left:1.4rem;z-index:9999;
  width:56px;height:56px;border-radius:50%;
  background:var(--at-olive);color:#0c0d0a;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 36px -10px rgba(122,143,106,.6);
  transition:transform .3s;animation:atWa 3s infinite;
}
.at-wa svg{width:28px;height:28px;fill:#0c0d0a}
.at-wa:hover{transform:scale(1.1)}
@keyframes atWa{
  0%,100%{box-shadow:0 16px 36px -10px rgba(122,143,106,.6),0 0 0 0 rgba(122,143,106,.4)}
  50%{box-shadow:0 16px 36px -10px rgba(122,143,106,.6),0 0 0 14px rgba(122,143,106,0)}
}

/* ---------- 15) موبايل ---------- */
@media(max-width:768px){
  .at-wa{width:50px;height:50px;bottom:1rem;left:1rem}
}