/* =========================================
   GLOBAL DARK THEME (Safe)
========================================= */
:root{
  --bg: #182a3d;
  --bg-2: #142537;
  --text: #ffffff;
  --link: #79d6ff;
  --link-hover: #066893;
  --text-dark: #0f172a;
  --danger: #b91c1c;
}

body{
  background: var(--bg);
  color: var(--text);
}

/* روابط عامة */
a{
  color: var(--link);
  text-decoration: none;
}
a:hover{
  color: var(--link-hover);
}

/* =========================================
   HEADER / NAVBAR
========================================= */
.top-navbar{
  background: var(--bg);
}

header, header *{
  color: #fff !important;
}

header a:hover,
header a:hover *{
  color: var(--link-hover) !important;
}

/* شريط داخلي (حسب قالبك) */
.md\:flex.items-center.justify-between.py-4.container.text-center{
  background: var(--bg) !important;
  color: #fff !important;
  padding: 15px;
}
.md\:flex.items-center.justify-between.py-4.container.text-center *{
  color: #fff !important;
}

/* =========================================
   FIXED BANNER
========================================= */
section.s-block.s-block--fixed-banner .container{
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.banner--fixed img{
  border-radius: 0 !important;
  background: transparent !important;
}
.s-block:first-of-type{
  margin-top: 0 !important;
}

/* Responsive banner entry */
@media (max-width:480px){
  .banner-entry{
    width: 100%;
    height: 130px !important;
    background: transparent;
  }
}
@media (min-width:481px) and (max-width:767px){
  .banner-entry{
    width: 100%;
    height: 170px !important;
    background: transparent;
  }
}

/* =========================================
   FOOTER
========================================= */
.footer-is-light .store-footer .store-footer__inner{
  background: var(--bg-2);
  color: #fff;
}
.footer-is-light .store-footer .store-footer__inner *{
  color: #fff;
}
.footer-is-light .store-footer .store-footer__inner a{
  color: var(--link);
}

/* =========================================
   DARK SECTIONS (اختياري)
========================================= */
.bg-inherit{
  background: var(--bg) !important;
  color: #fff !important;
}
.bg-inherit *{
  color: #fff !important;
}

/* =========================================
   PRODUCT CARDS FIX (حل مشكلة اختفاء النص)
   - الكروت غالبًا خلفيتها بيضا
========================================= */
.s-product-card{
  background: #fff; /* لو تحب تسيبها بيضا */
  border-radius: 16px;
}

/* نصوص الكروت (غامق) */
.s-product-card,
.s-product-card *{
  color: var(--text-dark) !important;
}

/* السعر */
.s-product-card .money,
.s-product-card .price{
  color: var(--danger) !important;
}

/* =========================================
   ADD TO CART BUTTON (Clean Filled)
========================================= */
.s-button-element.s-button-primary-outline{
  background: var(--link) !important;
  border: 2px solid var(--link) !important;
  color: var(--bg) !important;
  border-radius: 14px;
  padding: 14px 20px;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  width: 100%;
}

.s-button-element.s-button-primary-outline i,
.s-button-element.s-button-primary-outline span{
  color: var(--bg) !important;
}

.s-button-element.s-button-primary-outline:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(121,214,255,.25);
}

.s-button-element.s-button-primary-outline:active{
  transform: scale(.98);
}

/* =========================================
   Transparent Sections (حسب ما كنت عامل)
========================================= */
.shadow-default.bg-white.p-5.xs\:p-7.rounded-md.mb-5.relative.transition-height.duration-1000{
  background: transparent !important;
}

.content.content--single-page.w-full.lg\:w-10\/12.bg-white.rounded.p-6.lg\:p-8.mt-4.lg\:mt-12{
  background: transparent !important;
}

/* Page title (حسب قالبك) */
h1.text-xl.md\:text-2xl.leading-10.font-bold.mb-6.text-gray-800{
  color: #fff !important;
}

/* =========================================
   MOBILE MENU (mm-spn) - Styling Only
   NOTE: لو الـ UL فاضي، CSS مش هيجيب عناصر
========================================= */
.mm-ocd__content{
  background: var(--bg) !important;
}

/* nav#mobile-menu */
#mobile-menu.mm-spn{
  background: var(--bg) !important;
  color: #fff !important;
}

/* عنوان القائمة */
#mobile-menu .mm-spn__title{
  color: #fff !important;
}

/* لو البلجن مولّد panels/lists */
#mobile-menu .mm-spn__panel,
#mobile-menu .mm-spn__list{
  background: var(--bg) !important;
  color: #fff !important;
  padding: 16px !important;
  overflow: auto !important;
}

/* عناصر وروابط */
#mobile-menu .mm-spn__item,
#mobile-menu .mm-spn__item a{
  color: var(--link) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}
#mobile-menu .mm-spn__item a:hover{
  color: var(--link-hover) !important;
}

/* لو الـ UL اتعبّى */
#mobile-menu ul.main-menu.mm-spn--open{
  background: var(--bg) !important;
  padding: 16px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* ===============================
   Product comments section
================================ */
.s-comments.s-comments-product{
  background-color:#182a3d !important;
  color:#ffffff !important;
}

/* لو فيه عناصر داخلية بخلفية بيضا */
.s-comments.s-comments-product *{
  background-color:transparent !important;
  color:#ffffff !important;
}
/* =====================================
   CART INPUTS - FINAL CLEAN VERSION
   (Quantity + Coupon)
===================================== */

/* ===== حقل عدد المنتج ===== */
.s-quantity-input-input{
  background:#ffffff !important;   /* خلفية فاتحة */
  color:#0f172a !important;        /* الأرقام غامقة */
  font-weight:700 !important;
  text-align:center;
  border:1px solid rgba(0,0,0,.15) !important;
  border-radius:8px !important;
}

/* أزرار + و - */
.s-quantity-input-increase-button,
.s-quantity-input-decrease-button{
  background:#142537 !important;
  color:#79d6ff !important;
  border:1px solid rgba(255,255,255,.20) !important;
  transition:all .2s ease;
}

/* Hover */
.s-quantity-input-increase-button:hover,
.s-quantity-input-decrease-button:hover{
  background:#79d6ff !important;
  color:#182a3d !important;
}

/* ===== حقل كود الخصم ===== */
#coupon-input,
.form-input{
  background:#142537 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:8px !important;
  padding:10px 12px !important;
}

/* placeholder */
#coupon-input::placeholder,
.form-input::placeholder{
  color:rgba(255,255,255,.55) !important;
}

/* Focus effect */
#coupon-input:focus,
.form-input:focus{
  border-color:#79d6ff !important;
  box-shadow:0 0 0 2px rgba(121,214,255,.25);
  outline:none !important;
}
/* =====================================
   Quantity buttons (+ / -)
   خلي العلامات غامقة فقط
===================================== */

/* لون علامة + و - */
.s-quantity-input-increase-button,
.s-quantity-input-decrease-button{
  color:#0f172a !important;   /* لون غامق */
  background:transparent !important; /* بدون تغيير الخلفية */
}

/* لو العلامة معمولة بـ icon أو ::before */
.s-quantity-input-increase-button *,
.s-quantity-input-decrease-button *,
.s-quantity-input-increase-button::before,
.s-quantity-input-decrease-button::before{
  color:#0f172a !important;
}

/* hover (اختياري بسيط) */
.s-quantity-input-increase-button:hover,
.s-quantity-input-decrease-button:hover{
  color:#000 !important;
}