/* ============================================================
   MASTERGUARD — BLACK × GOLD THEME
   Mobile (Blur Sticky Bar) — Desktop (Original Style)
   Improved Price Display (Sale + Original Price)
============================================================ */

:root {
    --color-black: #0B0B0B;
    --color-gold: #FFD700;
    --color-gold-dark: #D9B200;
    --color-gray-dark: #222222;
    --color-silver: #CFCFCF;
    --text-on-black: #FFD700;
    --text-on-gray: #F5F5F5;
    --shadow-gold: 0 0 12px rgba(255,215,0,0.45);
    --shadow-card: 0 6px 18px rgba(0,0,0,0.4);
    --gradient-gold: linear-gradient(135deg, #FFD700, #D9B200);
    --gradient-black: linear-gradient(135deg, #0B0B0B, #141414);
}

/* Viewport Meta Support */
* {
    box-sizing: border-box !important;
}

/* تحسينات عامة للاستجابة */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Base Layout */
body, html {
    background: var(--gradient-black) !important;
    color: var(--text-on-black) !important;
    font-family: "Tajawal", sans-serif !important;
    overflow-x: hidden !important;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    font-size: 16px !important;
}

/* تحسينات للجوال */
@media (max-width: 768px) {
    body, html {
        font-size: 14px !important;
    }
    
    section, .s-block, .page-container, .container {
        padding: 12px !important;
        border-radius: 12px !important;
    }
}

/* تحسينات للكمبيوتر */
@media (min-width: 1200px) {
    body, html {
        font-size: 16px !important;
    }
    
    section, .s-block, .page-container, .container {
        padding: 24px !important;
    }
}

.bg-white, .s-bg-white, section.bg-white, div.bg-white {
    background: transparent !important;
}

section, .s-block, .page-container, .container {
    background: var(--color-black) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,215,0,0.06) !important;
    padding: 16px !important;
    box-shadow: var(--shadow-card) !important;
}

/* Header */
#mainnav {
    background:#0e0e0e!important;
    height:106px!important;
    border-bottom:1px solid rgba(255,215,0,0.12)!important;
    box-shadow:0 5px 20px rgba(0,0,0,0.35)!important;
    transition:background .3s ease;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}
#mainnav:hover{background:#111!important;}

/* Header للجوال */
@media (max-width: 768px) {
    #mainnav {
        height: 80px !important;
    }
}

/* Header للكمبيوتر */
@media (min-width: 1200px) {
    #mainnav {
        height: 106px !important;
    }
}

/* Text */
h1,h2,h3,h4{color:#fff!important;font-weight:800!important;}
p,span,li{color:#dcdcdc!important;font-size:15px;line-height:1.7;}

/* تحسينات النصوص للجوال */
@media (max-width: 768px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    p, span, li { font-size: 14px !important; line-height: 1.6 !important; }
}

/* تحسينات النصوص للكمبيوتر */
@media (min-width: 1200px) {
    h1 { font-size: 32px !important; }
    h2 { font-size: 28px !important; }
    h3 { font-size: 24px !important; }
    h4 { font-size: 20px !important; }
    p, span, li { font-size: 16px !important; line-height: 1.8 !important; }
}

/* تعديل لون العناوين الفرعية (مثل السعر والكمية) */
label.form-label, label.form-label b, b.block {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
}

/* ===============================
   PRICE DISPLAY STYLING
================================ */
.price-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price_is_on_sale {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price_is_on_sale h2.total-price {
    color: var(--color-gold) !important;
    font-weight: 900 !important;
    font-size: 28px !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.3);
}

/* أحجام الأسعار للجوال */
@media (max-width: 768px) {
    .price_is_on_sale h2.total-price {
        font-size: 22px !important;
    }
    .price_is_on_sale span.before-price {
        font-size: 16px !important;
    }
    .starting-or-normal-price h2.total-price {
        font-size: 22px !important;
    }
    .s-product-card-price {
        font-size: 20px !important;
    }
}

.price_is_on_sale span.before-price {
    color: #999 !important;
    text-decoration: line-through;
    opacity: 0.8;
    font-size: 20px !important;
}

.price_is_on_sale .sicon-sar {
    font-size: 0.9em;
    color: var(--color-gold);
}

.starting-or-normal-price h2.total-price {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
    font-size: 26px !important;
}

/* تحسين ترتيب السعر بعد الخصم */
.price-wrapper .price_is_on_sale h2.total-price:not(:empty) {
    order: 1;
}
.price-wrapper .price_is_on_sale span.before-price {
    order: 2;
}

/* Buttons */
.s-button-primary,.btn-primary{
    background:var(--gradient-gold)!important;color:#000!important;font-weight:800!important;
    border-radius:12px!important;box-shadow:var(--shadow-gold)!important;
    transition:transform .25s,box-shadow .25s;
    padding: 12px 24px !important;
    font-size: 16px !important;
    min-height: 44px !important; /* للجوال - حجم لمس مناسب */
}
.s-button-primary:hover,.btn-primary:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(255,215,0,.8)!important;}

/* Buttons للجوال */
@media (max-width: 768px) {
    .s-button-primary, .btn-primary {
        padding: 10px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}

/* Buttons للكمبيوتر */
@media (min-width: 1200px) {
    .s-button-primary, .btn-primary {
        padding: 14px 28px !important;
        font-size: 16px !important;
    }
}

.btn-outline,.s-button-outline{border:2px solid var(--color-gold)!important;color:var(--color-gold)!important;border-radius:10px!important;transition:background .25s;}
.btn-outline:hover{background:rgba(255,215,0,.12)!important;}

/* Product Cards */
custom-salla-product-card,
custom-salla-product-card.s-product-card-entry,
custom-salla-product-card.s-product-card-vertical,
custom-salla-product-card.s-product-card-fit-height,
.s-product-card-entry,
.s-product-card-vertical,
.s-product-card-fit-height {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

custom-salla-product-card *,
custom-salla-product-card.s-product-card-entry * {
    background-color: transparent !important;
}

custom-salla-product-card .s-product-card-image,
custom-salla-product-card .s-product-card-image * {
    background-color: var(--color-gray-dark) !important;
}

.s-product-card,.s-product-card-content{
    background:var(--color-gray-dark)!important;border-radius:16px!important;border:1px solid rgba(255,215,0,.05)!important;
    box-shadow:var(--shadow-card)!important;overflow:hidden!important;
}
.s-product-card:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(255,215,0,.2)!important;}
.s-product-card-content-title a{color:#fff!important;font-weight:700!important;display:-webkit-box!important;-webkit-line-clamp:2!important;line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}

.s-product-card-price{color:var(--color-gold)!important;font-weight:900!important;font-size:24px!important;text-shadow:0 0 8px rgba(255,215,0,.5);}

/* بطاقات المنتجات للجوال */
@media (max-width: 768px) {
    .s-product-card, .s-product-card-content {
        border-radius: 12px !important;
        padding: 12px !important;
    }
    .s-product-card-content-title a {
        font-size: 14px !important;
    }
}

/* بطاقات المنتجات للكمبيوتر */
@media (min-width: 1200px) {
    .s-product-card:hover {
        transform: translateY(-8px) !important;
    }
}
.price-old{color:#aaa!important;position:relative;opacity:.8;}
.price-old::after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--color-gold),transparent);transform:translateY(-50%);}

/* إصلاح خلفية منطقة الصورة */
custom-salla-product-card .s-product-card-image,
.s-product-card-entry .s-product-card-image,
.s-product-card-image {
    background: var(--color-gray-dark) !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.s-product-card-image a,
.s-product-card-entry .s-product-card-image a {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: relative !important;
    background: var(--color-gray-dark) !important;
}

.s-product-card-image-cover,
.s-product-card-entry .s-product-card-image-cover,
.s-product-card img,
.s-product-card-entry img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    display: block !important;
    background: var(--color-gray-dark) !important;
    transition: transform .3s ease !important;
}

.s-product-card img:hover,
.s-product-card-entry img:hover,
.s-product-card-image-cover:hover {
    transform: scale(1.03) !important;
}

/* Grid */
.s-products-list,.products-grid,.s-block-products,.salla-products-list{
    display:grid!important;gap:16px!important;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
}

/* Grid للجوال */
@media (max-width: 768px) {
    .s-products-list,.products-grid,.s-block-products,.salla-products-list{
        gap: 12px !important;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
}

/* Grid للتابلت */
@media (min-width: 769px) and (max-width: 1023px) {
    .s-products-list,.products-grid,.s-block-products,.salla-products-list{
        gap: 14px !important;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    }
}

/* Grid للكمبيوتر */
@media (min-width: 1200px) {
    .s-products-list,.products-grid,.s-block-products,.salla-products-list{
        gap: 20px !important;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    }
}

/* Navigation - تم نقل القواعد إلى قسم NAVIGATION MENU أدناه */

/* Inputs */
input,textarea,.form-input{
    background:#1a1a1a!important;border:1px solid #333!important;color:var(--text-on-gray)!important;border-radius:10px!important;
    transition:border .25s,background .25s;
    padding: 12px 16px !important;
    font-size: 16px !important;
}
input:focus,textarea:focus{border:1px solid var(--color-gold)!important;background:#111!important;outline:none!important;}

/* Inputs للجوال */
@media (max-width: 768px) {
    input, textarea, .form-input {
        padding: 10px 14px !important;
        font-size: 16px !important; /* مهم لمنع zoom في iOS */
    }
}

/* ============================================================
   HIDE DUPLICATE PRICE — إخفاء السعر المكرر
============================================================ */
/* إخفاء السعر من sticky product bar لأنه موجود في section.flex.bg-white */
.sticky-product-bar .price-wrapper,
section.sticky-product-bar .price-wrapper,
.sticky-product-bar .flex.whitespace-nowrap.price-wrapper.gap-4.items-center {
    display: none !important;
}

/* إظهار السعر في section.flex.bg-white */
section.flex.bg-white:not(.sticky-product-bar) .price-wrapper,
section.flex.bg-white:not(.sticky-product-bar) .center-between .price-wrapper,
section.flex.bg-white .price-wrapper,
section.flex.bg-white .center-between .price-wrapper,
.flex.whitespace-nowrap.price-wrapper.gap-4.items-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* إظهار عناصر السعر في section.flex.bg-white */
section.flex.bg-white .starting-or-normal-price,
section.flex.bg-white .price_is_on_sale:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* إخفاء العناصر التي تحتوي على class hidden */
section.flex.bg-white .starting-or-normal-price.hidden,
section.flex.bg-white .price_is_on_sale.hidden {
    display: none !important;
}

/* إظهار السعر العادي إذا لم يكن هناك خصم */
section.flex.bg-white .price-wrapper .starting-or-normal-price:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

section.flex.bg-white .price-wrapper .starting-or-normal-price h2.total-price {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* إخفاء السعر المكرر من القسم العلوي (ليس داخل section.flex.bg-white) */
section:not(.flex.bg-white):not(.sticky-product-bar) .flex.whitespace-nowrap.gap-4.items-center:not(.price-wrapper) {
    display: none !important;
}

/* ============================================================
   STICKY PRODUCT BAR — Only for Mobile
============================================================ */
@media (max-width:768px) {
  .sticky-product-bar {
      position: fixed !important;
      bottom: 0 !important;
      left: 0;
      right: 0;
      z-index: 999 !important;
      background: rgba(20, 20, 20, 0.8) !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      border-top: 1px solid rgba(255,215,0,0.15) !important;
      padding: 14px 18px !important;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
      transition: all 0.4s ease-in-out;
      animation: fadeUpBar .6s ease-out forwards;
  }

  .sticky-product-bar__quantity label {
      color: var(--color-gold) !important;
      font-weight: 700 !important;
  }

  .sticky-product-bar__btn button,
  .sticky-product-bar__btn .s-button-element {
      background: var(--gradient-gold) !important;
      color: #000 !important;
      font-weight: 800 !important;
      border-radius: 12px !important;
      box-shadow: 0 0 12px rgba(255,215,0,0.45) !important;
      transition: transform .25s ease, box-shadow .25s ease;
  }

  .sticky-product-bar__btn button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255,215,0,0.75) !important;
  }

  .s-quantity-input-button svg path {
      fill: var(--color-gold) !important;
  }

  @keyframes fadeUpBar {
      0% {opacity: 0; transform: translateY(100%);}
      100% {opacity: 1; transform: translateY(0);}
  }
}

/* ============================================================
   STICKY PRODUCT BAR — تحسينات الأزرار والنبض
============================================================ */
/* جعل الأزرار متساوية في الحجم */
.s-add-product-button-main,
.sticky-product-bar__btn {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.s-add-product-button-main > *,
.sticky-product-bar__btn > * {
    width: 100% !important;
    flex: 1 !important;
}

.s-add-product-button-main button,
.sticky-product-bar__btn button,
.s-add-product-button-main .s-button-element,
.sticky-product-bar__btn .s-button-element,
.s-fast-checkout-button {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* تأثير النبض المستمر */
.s-add-product-button-main button,
.sticky-product-bar__btn button,
.s-add-product-button-main .s-button-element,
.sticky-product-bar__btn .s-button-element,
.s-fast-checkout-button {
    animation: pulse-gold 2s ease-in-out infinite !important;
}

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5),
                    0 0 30px rgba(255, 215, 0, 0.3),
                    0 0 45px rgba(255, 215, 0, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8),
                    0 0 50px rgba(255, 215, 0, 0.5),
                    0 0 75px rgba(255, 215, 0, 0.3);
        transform: scale(1.02);
    }
}

/* تأثير النبض للزر الذهبي (إضافة للسلة) */
.s-button-primary,
.s-button-element.s-button-primary,
.sticky-product-bar__btn .s-button-primary {
    background: var(--gradient-gold) !important;
    color: #000 !important;
    animation: pulse-gold-button 2s ease-in-out infinite !important;
}

@keyframes pulse-gold-button {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6),
                    0 0 40px rgba(255, 215, 0, 0.4),
                    0 0 60px rgba(255, 215, 0, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.9),
                    0 0 60px rgba(255, 215, 0, 0.6),
                    0 0 90px rgba(255, 215, 0, 0.4);
        transform: scale(1.03);
    }
}

/* تأثير النبض لزر اشتري الآن */
.s-fast-checkout-button,
.s-add-product-button-mini-checkout button {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
    border: 2px solid var(--color-gold) !important;
    color: var(--color-gold) !important;
    animation: pulse-outline 2s ease-in-out infinite !important;
}

@keyframes pulse-outline {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4),
                    0 0 30px rgba(255, 215, 0, 0.2),
                    inset 0 0 15px rgba(255, 215, 0, 0.1);
        border-color: var(--color-gold);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.7),
                    0 0 50px rgba(255, 215, 0, 0.4),
                    inset 0 0 25px rgba(255, 215, 0, 0.2);
        border-color: #FFED4E;
    }
}

/* تأثير hover إضافي */
.s-add-product-button-main button:hover,
.sticky-product-bar__btn button:hover,
.s-fast-checkout-button:hover {
    animation: pulse-gold 1s ease-in-out infinite !important;
    transform: scale(1.05) !important;
}

/* تحسينات للجوال */
@media (max-width: 768px) {
    .s-add-product-button-main,
    .sticky-product-bar__btn {
        gap: 10px !important;
    }
    
    .s-add-product-button-main button,
    .sticky-product-bar__btn button,
    .s-fast-checkout-button {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
        padding: 10px 16px !important;
  }
}

/* ============================================================
   FEATURES SECTION — Black × Gold
============================================================ */
.s-block--features__item {
    background: #1a1a1a !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,215,0,0.1) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
    padding: 22px !important;
    text-align: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s-block--features__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(255,215,0,0.2) !important;
}

.s-block--features__item .feature-icon {
    background: transparent !important;
    color: transparent !important;
    border: none !important;
}

.s-block--features__item .feature-icon i,
.s-block--features__item .feature-icon .sicon-check,
.s-block--features__item .feature-icon svg {
    color: var(--color-gold) !important;
    fill: var(--color-gold) !important;
    font-size: 32px !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.4);
    margin-bottom: 10px !important;
    background: transparent !important;
}

.s-block--features__item .feature-icon svg path {
    fill: var(--color-gold) !important;
}

.s-block--features__item h2 {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
}

.s-block--features__item p {
    color: var(--text-on-gray) !important;
    font-size: 15px !important;
    opacity: 0.9 !important;
}

@media (max-width:768px) {
    .s-block--features__item {
        padding: 18px !important;
    }
    .s-block--features__item h2 {
        font-size: 18px !important;
    }
}

/* ============================================================
   NAVIGATION MENU — Desktop & Mobile Styling
============================================================ */
.main-menu li a span {
    color: var(--text-on-gray) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.main-menu li a:hover span {
    color: var(--color-gold) !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

.main-menu li.active a span,
.main-menu li.current a span {
    color: var(--color-gold) !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

#mobile-menu {
    background: rgba(15,15,15,0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255,215,0,0.12) !important;
    border-bottom: 1px solid rgba(255,215,0,0.12) !important;
}

#mobile-menu .main-menu li {
    border-bottom: 1px solid rgba(255,215,0,0.08) !important;
    padding: 14px 0 !important;
    text-align: center !important;
}

#mobile-menu .main-menu li a span {
    color: var(--text-on-gray) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

#mobile-menu .main-menu li a:hover span {
    color: var(--color-gold) !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

#mobile-menu .btn--close {
    color: var(--color-gold) !important;
    font-size: 22px !important;
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
}

#mobile-menu .btn--close:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

#mobile-menu::before,
#mobile-menu [data-mm-spn-title],
#mobile-menu .mm-spn--main::before,
#mobile-menu .mm-spn__title,
#mobile-menu .mm-navbar__title {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    text-align: center !important;
}

#mobile-menu {
    color: #fff !important;
}

.mburger, .sicon-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    color: var(--color-gold) !important;
    background: rgba(20,20,20,0.8) !important;
    border-radius: 10px !important;
    width: 42px !important;
    height: 42px !important;
    box-shadow: 0 0 15px rgba(255,215,0,0.2);
    transition: transform .3s ease, box-shadow .3s ease;
}

.mburger:hover, .sicon-menu:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255,215,0,0.5);
}

@media (min-width: 993px) {
  #mainnav .main-menu li a span {
      color: var(--text-on-gray) !important;
      font-weight: 700 !important;
      font-size: 17px !important;
      text-shadow: 0 0 6px rgba(0,0,0,0.5);
  }
  #mainnav .main-menu li a:hover span {
      color: var(--color-gold) !important;
      text-shadow: 0 0 12px rgba(255,215,0,0.6);
  }
  #mainnav .main-menu li {
      display: inline-block !important;
      margin: 0 10px !important;
  }
  #mainnav .main-menu {
      background: transparent !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
  }
}

@media (min-width: 1500px) {
  body, html, #mainnav, .container, section, .page-container {
      background: var(--gradient-black) !important;
      color: var(--text-on-gray) !important;
  }
  #mainnav .main-menu {
      background: transparent !important;
  }
  #mainnav .main-menu li a span {
      color: var(--text-on-gray) !important;
  }
}

/* ============================================================
   FIX — Handle Mid-Resolution White Background Issue (1029x637)
============================================================ */
@media (min-width: 900px) and (max-width: 1300px) {
  body, html, #mainnav, .container, section, .page-container {
      background: var(--gradient-black) !important;
      color: var(--text-on-gray) !important;
  }
  #mainnav .main-menu {
      background: transparent !important;
  }
  #mainnav .main-menu li a span {
      color: var(--text-on-gray) !important;
  }
}
/* ============================================================
   FIXED BANNER — تعديل حجم وتثبيت البانر
============================================================ */
.s-block--fixed-banner {
    position: sticky !important;
    top: 106px !important; /* تحت الـ header مباشرة */
    z-index: 100 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.s-block--fixed-banner .container {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.s-block--fixed-banner .banner--fixed {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.s-block--fixed-banner .banner--fixed:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255,215,0,0.3) !important;
}

.s-block--fixed-banner .banner--fixed img {
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    display: block !important;
}

/* للشاشات الصغيرة */
@media (max-width: 768px) {
    .s-block--fixed-banner {
        top: 80px !important;
        margin-bottom: 15px !important;
    }
    
    .s-block--fixed-banner .banner--fixed img {
        max-height: 150px !important;
    }
}

/* للشاشات الكبيرة */
@media (min-width: 1200px) {
    .s-block--fixed-banner .banner--fixed img {
        max-height: 250px !important;
    }
}

/* ============================================================
   FIX — mm-ocd__content — Black × Gold Theme (Desktop Only)
============================================================ */

/* ============================================================
   FIX — إخفاء العناصر المكررة في القائمة
============================================================ */

/* إخفاء عناصر الجوال (lg:hidden) في الشاشات الكبيرة */
@media (min-width: 1024px) {
    .mm-ocd__content .main-menu li[class*="lg:hidden"],
    .mm-ocd__content li[class*="lg:hidden"],
    #mobile-menu .main-menu li[class*="lg:hidden"],
    #mobile-menu li[class*="lg:hidden"] {
        display: none !important;
    }
}

/* إخفاء عناصر الكمبيوتر (lg:!block) في الشاشات الصغيرة */
@media (max-width: 1023px) {
    .mm-ocd__content .main-menu li[class*="lg:!block"],
    .mm-ocd__content li[class*="lg:!block"],
    .mm-ocd__content .main-menu li.root-level,
    .mm-ocd__content li.root-level,
    #mobile-menu .main-menu li[class*="lg:!block"],
    #mobile-menu li[class*="lg:!block"],
    #mobile-menu .main-menu li.root-level,
    #mobile-menu li.root-level,
    #mobile-menu .main-menu li[class*="lg:!inline-block"],
    #mobile-menu li[class*="lg:!inline-block"] {
        display: none !important;
    }
}

/* أصغر من 1024px → الألوان الافتراضية (لا تعديلات) */

/* أكبر من 1024px → الثيم الأسود × الذهبي */
@media (min-width: 1024px) {
.mm-ocd__content {
        background: #0B0B0B !important;
    color: var(--text-on-gray) !important;
    border: 1px solid rgba(255,215,0,0.06) !important;
    box-shadow: var(--shadow-card) !important;
}

.mm-ocd__content li,
.mm-ocd__content a,
    .mm-ocd__content span,
    .mm-ocd__content .main-menu li,
    .mm-ocd__content .main-menu a,
    .mm-ocd__content .main-menu span {
        color: var(--text-on-gray) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

    .mm-ocd__content a:hover span,
    .mm-ocd__content .main-menu a:hover span {
    color: var(--color-gold) !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.5);
}

    .mm-ocd__content li,
    .mm-ocd__content .main-menu li {
    padding: 12px 10px !important;
    border-bottom: 1px solid rgba(255,215,0,0.08) !important;
}

    .mm-ocd__content a,
    .mm-ocd__content .main-menu a {
    display: block !important;
    text-decoration: none !important;
}
}

/* ============================================================
   COMMENTS SECTION — رمادي بدون شكل
============================================================ */
.s-comments,
.s-comments-product,
.s-comments-container,
.s-comments-header {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px !important;
}

/* Comments للجوال */
@media (max-width: 768px) {
    .s-comments,
    .s-comments-product,
    .s-comments-container,
    .s-comments-header {
        padding: 12px !important;
    }
}

/* Comments للكمبيوتر */
@media (min-width: 1200px) {
    .s-comments,
    .s-comments-product,
    .s-comments-container,
    .s-comments-header {
        padding: 24px !important;
    }
}

salla-comment-form,
salla-reviews-summary {
    background: transparent !important;
    background-color: transparent !important;
}

.s-comments *,
.s-comments-product *,
.s-comments-container * {
    background-color: transparent !important;
}

/* إزالة أي خلفيات بيضاء من العناصر الداخلية */
.s-comments .bg-white,
.s-comments-product .bg-white,
.s-comments-container .bg-white,
.s-comments .s-bg-white,
.s-comments-product .s-bg-white {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
}

/* ============================================================
   MODAL — رمادي مع حدود ذهبية
============================================================ */
.s-modal-body,
.s-modal-align-middle,
.s-modal-xs,
.s-modal-padding,
.s-modal-entering {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
    border: 1px solid rgba(255,215,0,0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(255,215,0,0.1) !important;
    color: var(--text-on-gray) !important;
    max-width: 90% !important;
    margin: 0 auto !important;
}

/* Modal للجوال */
@media (max-width: 768px) {
    .s-modal-body,
    .s-modal-align-middle,
    .s-modal-xs,
    .s-modal-padding,
    .s-modal-entering {
        max-width: 95% !important;
        border-radius: 12px !important;
        margin: 10px auto !important;
    }
}

/* Modal للكمبيوتر */
@media (min-width: 1200px) {
    .s-modal-body,
    .s-modal-align-middle,
    .s-modal-xs,
    .s-modal-padding,
    .s-modal-entering {
        max-width: 500px !important;
    }
}

.s-modal-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 16px !important;
}

/* تطبيق الألوان على جميع العناصر داخل الـ modal (باستثناء الـ iframe) */
.s-modal-body > *:not(iframe):not(.s-modal-header) *,
.s-modal-body > *:not(iframe) > *:not(iframe) * {
    color: #FFFFFF !important;
}

.s-modal-close {
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
    padding: 8px !important;
}

.s-modal-close:hover {
    background: rgba(255,215,0,0.2) !important;
    transform: scale(1.1) !important;
}

.s-modal-close svg,
.s-modal-close path {
    fill: #FFFFFF !important;
    transition: fill 0.3s ease !important;
}

.s-modal-close:hover svg,
.s-modal-close:hover path {
    fill: var(--color-gold) !important;
}

.s-modal-body .hide-scroll {
    background: var(--color-gray-dark) !important;
    border: none !important;
    border-radius: 0 !important;
}

/* إزالة أي خلفيات بيضاء من الـ modal */
.s-modal-body .bg-white,
.s-modal-body .s-bg-white,
.s-modal-header .bg-white,
.s-modal-header .s-bg-white {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
}

/* تحسين ألوان النصوص داخل الـ modal - ألوان واضحة ومشرقة */
.s-modal-body {
    color: #F5F5F5 !important;
}

.s-modal-body h1,
.s-modal-body h2,
.s-modal-body h3,
.s-modal-body h4,
.s-modal-body h5,
.s-modal-body h6,
.s-modal-body .title,
.s-modal-body .heading,
.s-modal-body strong,
.s-modal-body b {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.s-modal-body p,
.s-modal-body span:not(.s-login-modal-label):not(.s-login-modal-title),
.s-modal-body div:not(.s-login-modal-label):not(.s-login-modal-title),
.s-modal-body li {
    color: #E0E0E0 !important;
    font-weight: 500 !important;
}

.s-modal-body label:not(.s-login-modal-label) {
    color: #E0E0E0 !important;
    font-weight: 500 !important;
}

.s-modal-body a {
    color: var(--color-gold) !important;
        font-weight: 700 !important;
    }

.s-modal-body a:hover {
    color: #FFED4E !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.6) !important;
}

/* تحسين حقول الإدخال - ألوان واضحة */
.s-modal-body input,
.s-modal-body textarea,
.s-modal-body select {
    background: #0f0f0f !important;
    border: 2px solid #444 !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
}

.s-modal-body input::placeholder,
.s-modal-body textarea::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

.s-modal-body input:focus,
.s-modal-body textarea:focus,
.s-modal-body select:focus {
    border: 2px solid var(--color-gold) !important;
    background: #0a0a0a !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(255,215,0,0.3) !important;
}

/* تحسين الأزرار - ألوان واضحة ومشرقة */
.s-modal-body button,
.s-modal-body .btn,
.s-modal-body .s-button-element {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.s-modal-body .btn-primary,
.s-modal-body .s-button-primary,
.s-modal-body button[type="submit"] {
    background: var(--gradient-gold) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(255,215,0,0.5) !important;
    border: none !important;
}

.s-modal-body .btn-primary:hover,
.s-modal-body .s-button-primary:hover,
.s-modal-body button[type="submit"]:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 25px rgba(255,215,0,0.8) !important;
    background: linear-gradient(135deg, #FFED4E, #FFD700) !important;
}

/* تحسين الـ iframe */
.s-modal-body iframe,
iframe.hide-scroll {
    background: var(--color-gray-dark) !important;
    filter: brightness(1.3) contrast(1.2) invert(0) !important;
}

/* محاولة تطبيق الألوان على العناصر المحيطة بالـ iframe */
.s-modal-body > div:not(.s-modal-header) {
    color: #FFFFFF !important;
}

.s-modal-body > div:not(.s-modal-header) * {
    color: #FFFFFF !important;
}

/* ============================================================
   LOGIN MODAL ELEMENTS — عناصر تسجيل الدخول (أولوية عالية)
============================================================ */
/* جميع الطرق الممكنة لتطبيق الألوان - أولوية قصوى لتجاوز Tailwind */
.s-modal-body .s-login-modal-title,
.s-login-modal-title,
div.s-login-modal-title,
.s-modal-body div.s-login-modal-title,
.s-modal-body > div > div.s-login-modal-title,
.s-modal-body > div > div > div.s-login-modal-title,
.s-modal-body > div > div > div > div.s-login-modal-title,
[class*="login-modal-title"],
[class*="s-login-modal-title"],
.s-modal-entering .s-login-modal-title,
.s-modal-padding .s-login-modal-title,
.s-modal-xs .s-login-modal-title,
.s-modal-body .s-login-modal-header-content .s-login-modal-title {
    color: #FFFFFF !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    text-shadow: 0 0 5px rgba(255,255,255,0.3) !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* تطبيق مباشر على div مع class - تجاوز Tailwind */
div[class*="login-modal-title"],
div[class*="s-login-modal-title"],
div.s-login-modal-title[class*="s-login-modal-title"] {
    color: #FFFFFF !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
}

/* تجاوز قواعد Tailwind CSS مباشرة */
.s-login-modal-title[style*="color"],
.s-login-modal-title[style*="--tw-text-opacity"] {
    color: #FFFFFF !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.s-modal-body .s-login-modal-label,
.s-login-modal-label,
.s-modal-body label.s-login-modal-label,
label.s-login-modal-label,
.s-modal-body label[class*="login-modal-label"],
[class*="login-modal-label"],
[class*="s-login-modal-label"],
.s-modal-body label[class*="s-login-modal-label"],
.s-modal-entering .s-login-modal-label,
.s-modal-padding .s-login-modal-label,
.s-modal-xs .s-login-modal-label {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-shadow: 0 0 3px rgba(255,255,255,0.2) !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* تطبيق مباشر على label مع class */
label[class*="login-modal-label"],
label[class*="s-login-modal-label"] {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* تطبيق على جميع العناصر داخل الـ modal body */
.s-modal-body [class*="title"]:not([class*="subtitle"]):not([class*="sub-title"]),
.s-modal-body [class*="label"] {
    color: #FFFFFF !important;
}

/* محاولة تطبيق الألوان على جميع العناصر داخل الـ modal */
.s-modal-body div,
.s-modal-body span,
.s-modal-body label,
.s-modal-body p,
.s-modal-body h1,
.s-modal-body h2,
.s-modal-body h3,
.s-modal-body h4,
.s-modal-body h5,
.s-modal-body h6 {
    color: #FFFFFF !important;
}

/* استثناء للروابط */
.s-modal-body a {
        color: var(--color-gold) !important;
}

/* ============================================================
   LOGIN MODAL HEADER — عناصر رأس تسجيل الدخول
============================================================ */
.s-login-modal-header-inner,
.s-modal-body .s-login-modal-header-inner {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 0 !important;
}

.s-login-modal-header-icon,
.s-modal-body .s-login-modal-header-icon,
.s-login-modal-header-inner .s-login-modal-header-icon {
    color: var(--color-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.s-login-modal-header-icon svg,
.s-login-modal-header-icon path,
.s-modal-body .s-login-modal-header-icon svg,
.s-modal-body .s-login-modal-header-icon path {
    fill: var(--color-gold) !important;
        color: var(--color-gold) !important;
    width: 32px !important;
    height: 32px !important;
}

.s-login-modal-header-content,
.s-modal-body .s-login-modal-header-content {
    flex: 1 !important;
    background: transparent !important;
}

.s-login-modal-header-content .s-login-modal-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    margin: 0 !important;
}