/* ================================
   SaudiSwipe — "Click" Theme Overrides
   ================================ */
:root{
  /* Background & Surfaces */
  --bg-body:#0E1216;
  --bg-card:#171C22;
  --bg-elev:#1D232A;
  --border:#262D36;

  /* Brand */
  --primary:#165D32;     /* عناوين/هايلايت */
  --primary-2:#1F8B4B;   /* للتدرج */
  --secondary:#6A92B2;   /* وصف/نص مساعد */
  --purple:#7545A4;      /* خط سفلي */
  --accent:#f1de69;      /* شارات */

  /* Text */
  --text:#F3F6F8;
  --text-2:#B8C2CC;

  /* Gradients */
  --cta-grad:linear-gradient(135deg, var(--primary), var(--primary-2));
}

/* خلفية ونص عام */
html, body, .page, .page-content, .wrapper, main, #app{
  background: var(--bg-body) !important;
  color: var(--text) !important;
}

/* رأس الموقع/القائمة/الترويسة */
.header, .header-top, .navigation, .nav, .topbar, .breadcrumbs{
  background: var(--bg-body) !important;
  border-bottom: 1px solid var(--border) !important;
}
.nav a, .breadcrumbs a{ color:#A1F1D6 !important }
.nav a:hover, .breadcrumbs a:hover{ color:#D5FFE9 !important }

/* بطاقات وأقسام عامة */
.section, .block, .widget, .card, .product-card, .collection-card, .promo{
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
}

/* عناوين رئيسية + خط سفلي بنفسجي */
h1, h2, h3, .section-title, .title{
  color: var(--primary) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 24px;
}
h1::after, h2::after, h3::after, .section-title::after, .title::after{
  content:""; position:absolute; right:0; bottom:0;
  width:64px; height:3px; border-radius:12px;
  background: var(--purple);
  opacity:.95;
}

/* وصف/نص ثانوي */
.subtitle, .section-subtitle, .lead, .muted, p.description{
  color: var(--secondary) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* أزرار عامة + CTA */
.btn, .button, button, .add-to-cart, .cart-btn{
  background: var(--cta-grad) !important;
  color:#fff !important;
  border:none !important;
  border-radius:12px !important;
  font-weight:800 !important;
  padding:12px 18px !important;
  box-shadow: 0 10px 22px rgba(31,139,75,.25) !important;
  transition: transform .12s ease, filter .2s ease !important;
}
.btn:hover, .button:hover, .add-to-cart:hover{ filter:brightness(1.08); transform:translateY(-1px) }

/* زر معطّل (نفدت الكمية) */
.btn:disabled, .button:disabled, button:disabled{
  background: linear-gradient(135deg, #33403B, #242A28) !important;
  color:#C7D1CC !important; border:1px solid #2E3A34 !important; opacity:1 !important;
}

/* بطاقات المنتجات (عناوين/سعر) */
.product-card .title, .product .title{ color: var(--primary) !important; font-weight:800 }
.price, .product .price, .product-card .price{
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:900 !important; opacity:1 !important;
}

/* شارات/تمييز */
.badge, .tag, .label, .pill{
  background: var(--accent) !important; color:#222 !important; border-radius:999px !important; border:0 !important;
}

/* حقول الإدخال */
input, select, textarea{
  background:#0F1317 !important; color:#EAF6EE !important;
  border:1px solid var(--border) !important; border-radius:12px !important;
}
input::placeholder, textarea::placeholder{ color:#93A5B2 !important }

/* جداول (مثل المقارنة) */
table, .table, .comparison, .comparison-table{
  background: var(--bg-card) !important; color: var(--text) !important;
  border:1px solid var(--border) !important; border-radius:14px !important;
}
table th{ background:#0F1613 !important; color:#EAF6EE !important; font-weight:900 !important }
table td{ color: var(--text-2) !important; border-color: var(--border) !important }

/* FAQ / Accordion */
.accordion, .faq, .faq-item{
  background: var(--bg-card) !important; border:1px solid var(--border) !important; border-radius:14px !important;
}
.accordion .title, .faq .question{ color:#F0FFF8 !important; font-weight:800 !important }
.accordion .content, .faq .answer{ color: var(--text-2) !important }

/* تذييل */
footer, .footer{
  background: var(--bg-body) !important; border-top:1px solid var(--border) !important; color: var(--text-2) !important;
}

/* تحسينات الموبايل */
@media (max-width:640px){
  h1{ font-size:24px !important }
  .btn{ width:100%; text-align:center }
}

/* ===== Fade-in عند التمرير (أسلوب ناعم) ===== */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }