/* =================================================================
   ثيم رائد — سله | الدارك مود الكامل  (نسخة نهائية)
   ─────────────────────────────────────────────────────────────────
   هذا الملف يوضع بالكامل في خانة الـ CSS المخصص في سله.
   (ملف سله الأصلي app.css منفصل وللقراءة فقط — لا علاقة له بهنا.)

   يحتوي على:
     • الدارك مود الأساسي (متغيّرات + كل الأقسام)
     • تغطية شاملة لكل الأسطح البيضاء المتبقية
     • إصلاح قائمة المستخدم (البوردرات المكسورة + الشفافية + z-index)
     • إصلاح المودالات (تحويلها للغامق)
     • بوردر محايد بدل السماوي

   آخر مراجعة: تم التحقق من توازن الأقواس وصحة الصيغة.
   ================================================================= */


/* =================================================================
   1) متغيّرات النظام الداكن
   ================================================================= */
:root {
    /* الخلفيات */
    --dm-bg-base:     #0C1717;   /* خلفية أساسية */
    --dm-bg-surface:  #0C1717;   /* سطح ثانوي */
    --dm-bg-elevated: #111e1f;   /* عناصر مرتفعة (قوائم، لوحات) */
    --dm-bg-hover:    #16292a;   /* حالة التفاعل */
    --dm-bg-input:    #0C1717;   /* حقول الإدخال */

    /* الحواف — محايدة وخفيفة (بدل السماوي الذي كان يلوّن كل شيء) */
    --dm-border:       rgba(255, 255, 255, 0.07);
    --dm-border-light: rgba(255, 255, 255, 0.05);

    /* النصوص */
    --dm-text-primary:   #f0f7f7;
    --dm-text-secondary: #c3d7d8;
    --dm-text-muted:     #5d7d7f;

    /* العلامة التجارية */
    --dm-brand:      #2cced4;
    --dm-brand-dim:  rgba(44, 206, 212, 0.60);
    --dm-brand-glow: rgba(44, 206, 212, 0.20);
}


/* =================================================================
   2) الجسم والخلفيات العامة
   ================================================================= */
html, body {
    background-color: var(--dm-bg-base) !important;
    color: var(--dm-text-primary) !important;
}

.bg-white,
[class*="bg-white"] {
    background-color: var(--dm-bg-surface) !important;
}

.bg-gray-50  { background-color: #0f1a1b !important; }
.bg-gray-100 { background-color: #111e1f !important; }

/* النصوص */
.text-gray-900 { color: var(--dm-text-primary)   !important; }
.text-gray-800 { color: var(--dm-text-primary)   !important; }
.text-gray-700 { color: #c2d4d5                  !important; }
.text-gray-600 { color: var(--dm-text-secondary) !important; }
.text-gray-500 { color: #6b8a8c                  !important; }
.text-gray-400 { color: var(--dm-text-muted)     !important; }

/* الحدود */
.border-gray-100,
.border-gray-200,
[class*="border-gray"] {
    border-color: var(--dm-border) !important;
}


/* =================================================================
   3) الهيدر والنافبار
   ================================================================= */
.main-nav-container,
.main-nav-container .inner,
.has-bg .main-nav-container,
.has-bg .main-nav-container .sub-menu {
    background-color: rgba(13,22,23,.92) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.main-nav-container a,
.main-nav-container li,
.has-text-color .main-nav-container {
    color: var(--dm-text-primary) !important;
}

.main-menu > li > a,
.sub-menu li a,
.mega-menu a {
    color: var(--dm-text-secondary) !important;
    transition: color .2s ease !important;
}

.main-menu > li > a:hover,
.sub-menu li a:hover,
.mega-menu a:hover {
    color: var(--dm-brand) !important;
}

.sub-menu,
.mega-menu,
.dropdown-menu {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
}

.header-btn__icon,
.header-btn {
    color: var(--dm-text-primary) !important;
}

.header-btn__icon svg,
.header-btn svg {
    fill: rgba(255,255,255,.85) !important;
}

.header-btn__icon:hover svg,
.header-btn:hover svg {
    fill: #ffffff !important;
}

.header-btn__icon .s-badge,
[class*="cart-count"],
[class*="count-badge"] {
    background: var(--dm-brand) !important;
    color: #0d1617 !important;
}


/* =================================================================
   4) شريط البحث
   ================================================================= */
.s-search-input {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
.s-search-input::placeholder { color: var(--dm-text-muted) !important; }
.s-search-input:focus {
    border-color: var(--dm-brand-dim) !important;
    box-shadow: 0 0 0 3px var(--dm-brand-glow) !important;
}
.s-search-results {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.55) !important;
}
.s-search-product { border-color: var(--dm-border) !important; }
.s-search-product:hover { background-color: var(--dm-bg-hover) !important; }
.s-search-no-results-placeholder { color: var(--dm-text-muted) !important; }
.s-search-icon svg,
.s-search-icon-wrap {
    fill: var(--dm-text-muted) !important;
    color: var(--dm-text-muted) !important;
}


/* =================================================================
   5) القائمة الجانبية (موبايل)
   ================================================================= */
.mm-ocd__content,
.mm-spn {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}
.mm-spn ul { background-color: var(--dm-bg-surface) !important; }
.mm-spn a,
.mm-spn span { color: var(--dm-text-secondary) !important; }
.mm-spn a:hover { color: var(--dm-brand) !important; }
.mm-spn li::after,
.mm-spn a::after {
    border-color: var(--dm-border) !important;
    opacity: 1 !important;
}
.mm-ocd--open { background: rgba(0,0,0,.6) !important; }


/* =================================================================
   6) الدراور (سلة / قوائم)
   ================================================================= */
.s-drawer-container > *,
.s-drawer-wrapper > div,
[class*="s-drawer"]:not(.s-drawer-loader):not(.s-drawer-close):not(.s-drawer-header):not(.s-drawer-body):not(.s-drawer-icon):not(.s-drawer-title) {
    background-color: var(--dm-bg-surface) !important;
}
.s-drawer-header {
    background-color: var(--dm-bg-elevated) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}
.s-drawer-body,
.s-drawer-body-slot { background-color: var(--dm-bg-surface) !important; }
.s-drawer-title { color: var(--dm-text-primary) !important; }
.s-drawer-close { background-color: var(--dm-bg-elevated) !important; }
.s-drawer-close:hover { background-color: rgba(239,68,68,.15) !important; }
.s-drawer-bg-normal,
.s-drawer-icon,
[class*="s-drawer-bg"] { background-color: #1a2829 !important; }
.s-drawer-wrapper .menu-item,
.s-drawer-body .menu-item,
[class*="s-drawer"] .menu-item { color: #a8c4c6 !important; }
.s-drawer-wrapper .menu-item:hover,
.s-drawer-body .menu-item:hover {
    background-color: rgba(44,206,212,.07) !important;
    color: #2cced4 !important;
}
.s-drawer-body svg,
.s-drawer-body-slot svg,
.s-drawer-header svg { fill: rgba(255,255,255,.75) !important; }


/* =================================================================
   7) صفحة المنتج
   ================================================================= */
.product-entry,
.product-single,
.product-page,
[class*="product-detail"] { background-color: var(--dm-bg-base) !important; }

h1, h2, h3, h4 { color: #ffffff !important; }

.product-entry p,
.product-entry .description { color: var(--dm-text-secondary) !important; }

.product-entry .price,
[class*="product-price"],
.s-product-card-price { color: var(--dm-brand) !important; }

[class*="product-option"],
[class*="s-product-option"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
[class*="product-option"]:hover,
[class*="s-product-option"]:hover { border-color: var(--dm-brand-dim) !important; }
[class*="product-option"].selected,
[class*="product-option"].is-active,
[class*="s-product-option"].selected {
    border-color: var(--dm-brand) !important;
    background-color: var(--dm-brand-glow) !important;
}

[class*="s-delivery"],
[class*="s-bullet-delivery"],
[class*="s-bought-together"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
}


/* =================================================================
   8) الحقول والفورمز
   ================================================================= */
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
select,
textarea,
.s-input,
.form-input,
.form-select,
.form-textarea {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
input::placeholder,
textarea::placeholder,
.s-input::placeholder,
.form-input::placeholder { color: var(--dm-text-muted) !important; }
input:focus,
select:focus,
textarea:focus,
.s-input:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--dm-brand-dim) !important;
    box-shadow: 0 0 0 3px var(--dm-brand-glow) !important;
}
label,
.form-label,
[class*="-label"] { color: var(--dm-text-secondary) !important; }

/* حقل التحقق OTP والهاتف */
.s-verify-input,
.s-tel-input-control,
[class*="s-tel-input-control"] {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border) !important;
    color: #ffffff !important;
}
.s-verify-input:focus,
.s-tel-input-control:focus {
    border-color: rgba(44,206,212,.7) !important;
    box-shadow: 0 0 0 3px rgba(44,206,212,.15) !important;
}
.s-verify-label,
.s-verify-message { color: rgba(255,255,255,.75) !important; }
.s-verify-header-icon {
    background-color: var(--dm-bg-elevated) !important;
    border-color: rgba(44,206,212,.25) !important;
}
.s-verify-header-icon svg { fill: rgba(44,206,212,.8) !important; }


/* =================================================================
   9) المودالات  (مُصلحة — غامقة بدل البيضاء)
   ملاحظة: لو تبي مودال معيّن أبيض، استثنِه هنا.
   ================================================================= */
[class*="s-modal"]:not(.s-modal-close),
[class*="modal-content"],
[class*="modal-body"],
[class*="modal-header"],
[class*="modal-footer"],
.s-modal-content {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
.s-modal-header {
    background-color: var(--dm-bg-elevated) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}
.s-modal-close {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-secondary) !important;
}
.s-modal-close:hover { background-color: rgba(239,68,68,.15) !important; }
[class*="s-modal"] h1,
[class*="s-modal"] h2,
[class*="s-modal"] h3,
[class*="s-modal"] h4,
.s-login-modal-title { color: var(--dm-text-primary) !important; }
[class*="modal-overlay"],
[class*="modal-backdrop"] { background: rgba(0,0,0,.7) !important; }


/* =================================================================
   10) الجداول والبطاقات العامة
   ================================================================= */
table { color: var(--dm-text-primary) !important; }
thead, th {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}
td, tr {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
tbody tr:hover { background-color: var(--dm-bg-hover) !important; }
.card,
[class*="-card"]:not([class*="product-card"]):not([class*="s-product-card"]) {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}


/* =================================================================
   11) التابز / التقييمات / السلة
   ================================================================= */
[class*="s-tabs-header"],
[class*="tabs-header"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
}
[class*="s-tabs-header-item"],
[class*="tabs-item"] { color: var(--dm-text-secondary) !important; }
[class*="s-tabs-active"],
[class*="tabs-active"],
[class*="tab-active"] {
    color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
}
[class*="s-tabs-content"] { background-color: var(--dm-bg-surface) !important; }

[class*="s-comment"],
[class*="s-rating-modal"] {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
[class*="s-comments-item-timestamp"],
[class*="s-comments-item-time"] { color: var(--dm-text-muted) !important; }
[class*="s-comment-form-input"],
.s-rating-modal-comment {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

[class*="s-cart"],
[class*="cart-item"],
[class*="checkout"] {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}
[class*="s-cart-item"],
[class*="cart-row"] { border-color: var(--dm-border) !important; }
.s-cart-coupons-card {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    border-radius: 1rem;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease;
}
.s-cart-coupons-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 10px 28px rgba(44,206,212,.18);
}
[class*="cart-summary"],
[class*="order-summary"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
}
[class*="s-cart-item"] [class*="price"],
[class*="cart-item"] [class*="price"] { color: #2cced4 !important; }


/* =================================================================
   12) الـ Badges / Alerts / Accordion / Pagination / Breadcrumb / Filter
   ================================================================= */
[class*="s-badge"],
[class*="-badge"] { border-color: var(--dm-border) !important; }
.s-badge-color-black {
    background-color: #1a2a2b !important;
    color: var(--dm-text-primary) !important;
}
[class*="alert-"],
[class*="s-alert"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

[class*="s-accordion"],
[class*="accordion-"] {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
[class*="accordion-header"],
[class*="s-accordion-header"] { background-color: var(--dm-bg-elevated) !important; }

[class*="pagination"],
[class*="s-pagination"] { color: var(--dm-text-secondary) !important; }
[class*="pagination"] a,
[class*="s-pagination"] a {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}
[class*="pagination"] a:hover,
[class*="s-pagination"] a:hover {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-brand) !important;
}
[class*="pagination"] .active,
[class*="s-pagination"] .active {
    background-color: var(--dm-brand) !important;
    color: #0d1617 !important;
    border-color: transparent !important;
}

[class*="breadcrumb"],
[class*="s-breadcrumb"] { color: var(--dm-text-muted) !important; }
[class*="breadcrumb"] a,
[class*="s-breadcrumb"] a { color: var(--dm-text-secondary) !important; }
[class*="breadcrumb"] a:hover,
[class*="s-breadcrumb"] a:hover { color: var(--dm-brand) !important; }

[class*="s-filter"],
[class*="filter-"],
[class*="s-category-filter"] {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
[class*="filter-item"],
[class*="s-filter-item"] { color: var(--dm-text-secondary) !important; }
[class*="filter-item"]:hover,
[class*="s-filter-item"]:hover { color: var(--dm-brand) !important; }
[class*="filter-item"].active,
[class*="s-filter-item"].active {
    color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
}

/* شريط نطاق السعر */
[class*="s-price-range"] { color: var(--dm-text-primary) !important; }
[class*="s-price-range-active-bar"] { background-color: var(--dm-brand) !important; }
[class*="s-price-range-bar"] { background-color: var(--dm-bg-hover) !important; }
[class*="s-price-range-left-handle"],
[class*="s-price-range-right-handle"] {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-bg-base) !important;
}
[class*="s-price-range-number-input"] {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}


/* =================================================================
   13) السكيلتون / الفوتر / المتفرقات
   ================================================================= */
.s-skeleton-item,
[class*="skeleton"],
salla-skeleton {
    background: linear-gradient(90deg, var(--dm-bg-elevated) 0%, var(--dm-bg-hover) 40%, var(--dm-bg-elevated) 80%) !important;
    background-size: 300% 100% !important;
}

.store-footer { background-color: #080f10 !important; }
.store-footer__inner {
    background-color: #0a1415 !important;
    border-color: var(--dm-border) !important;
}
.store-footer a:hover { color: var(--dm-brand) !important; opacity: 1 !important; }
.store-footer .social-link {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}
.store-footer .social-link:hover {
    background-color: var(--dm-brand-glow) !important;
    border-color: var(--dm-brand-dim) !important;
    color: var(--dm-brand) !important;
    opacity: 1 !important;
}
.copyright-text { background-color: #06090a !important; }
.copyright-text p { color: var(--dm-text-muted) !important; }
.footer-is-light .store-footer {
    background-color: #080f10 !important;
    color: var(--dm-text-primary) !important;
}
.footer-is-light .store-footer .store-footer__inner {
    background-color: #0a1415 !important;
    border-color: var(--dm-border) !important;
}

hr, [class*="divider"] { border-color: var(--dm-border) !important; opacity: 1 !important; }
[class*="tooltip"],
.tooltip-content,
[class*="tooltip-content"] {
    background-color: #162223 !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
}
[class*="popover"],
[class*="s-popover"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
[class*="sticky-bar"],
[class*="s-sticky"] {
    background-color: #0d1617 !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.4) !important;
}

/* السكرول بار */
* { scrollbar-color: #353535 var(--dm-bg-base); scrollbar-width: thin; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dm-bg-base); }
::-webkit-scrollbar-thumb { background: #1e3234; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(44,206,212,.4); }
::selection { background: rgba(44,206,212,.25); color: #fff; }
a:not([class]) { color: var(--dm-brand-dim); }
a:not([class]):hover { color: var(--dm-brand); }
.sicon, [class*="sicon-"] { color: inherit !important; }


/* =================================================================
   14) تغطية شاملة — كل الأسطح الفاتحة المتبقية (الولاء/الطلبات/العروض..)
   ================================================================= */
.s-loyalty-program-container,
.s-loyalty-program-rewards-container,
.s-loyalty-program-reward-container,
.s-loyalty-program-point-wrapper,
.s-loyalty-program-point-icon-container,
.s-loyalty-program-profile-container,
.s-loyalty-program-panel-exchange-wrapper,
.s-loyalty-program-login-action-light,
.s-loyalty-prize-item.swiper-slide,
.s-loyalty-points-history-table-tbody-tr,
.s-loyalty-program-points-modal-list-item:hover,
.loyalty__banner,
.points-ways__list .way-item,
.s-order-branch-info-card,
.s-order-branch-card,
.s-order-details-multiple-bundle-product,
.s-order-details-product-image,
.s-order-edit-products-panel,
.s-order-edit-no-content-placeholder,
.s-order-edit-expired,
.s-order-edit-add-modal-actions,
.s-order-edit-product-card,
.s-order-summary-item,
.s-orders-table-tbody-tr,
.thankyou-block,
.s-offer-slide-cat-entry,
.s-offer-slide-offer-entry,
.s-offer-bank-wrapper,
.s-offer-bank-payment-single,
.s-offer-card,
.s-offer-card-icon,
.s-offer-drawer-card,
.s-offer-products-accordion-content,
.s-offer-modal-cat-item.swiper-slide,
.s-offer-modal-brand-item.swiper-slide,
.s-offer-modal-product-image-wrap,
.s-conditional-offer-container,
.s-conditional-offer-checkpoint-border,
.s-next-order-coupon-wrapper,
.s-tiered-offer-container,
.s-tiered-offer-milestone-icon,
.s-tiered-offer-tab-content-wrapper,
.s-bullet-delivery-tab,
.s-bullet-delivery-address-item--selected,
.s-bullet-delivery-branches-list,
.s-bullet-delivery-radio,
.s-bullet-delivery-market-warning,
.s-bullet-delivery-cart-view,
.s-delivery-promise-container,
.s-delivery-promise-modal-search,
.s-delivery-promise-modal-popover,
.s-delivery-promise-modal-list,
.s-payments-list-item,
.s-wallet-table-tbody-tr,
.s-notifications-item,
.s-notifications-item-icon,
.s-review-card-content,
.s-reviews-testimonial,
.s-rating-modal-icon,
.s-user-settings-section,
.s-scopes-search-input,
.s-searchable-dropdown-panel,
.s-list-tile-item,
.s-product-options-wrapper,
.s-product-options-grid-mode-span,
.s-accordion-wrapper,
.s-datetime-picker-input,
.s-color-picker-widget,
.s-filters-radio,
.s-filters-widget-container,
.s-metadata-box,
.s-social-share-list,
.s-bought-together-entry,
.cart-options,
.brands-nav__item,
.brand-char,
.brand-item,
.landing-page,
.landing-page--quick-buy,
.virtooal,
.s-block--features__item,
.slide--cat-entry,
.slide--offer-entry,
.mm-spn.mm-spn--light {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* أسطح مرتفعة قليلاً */
.s-loyalty-program-container,
.s-loyalty-program-banner-container,
.s-loyalty-points-history-table-head,
.s-order-totals-card-panel,
.s-orders-table-head,
.s-order-edit-order-panel,
.s-wallet-table-head,
.s-loyalty-program-points-section {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* حقول بحث ضمن التغطية */
.s-order-edit-products-search-input,
.s-order-edit-products-search-input:focus,
.s-searchable-dropdown-trigger {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* توست الإضافة + بوب أب swal */
.s-add-product-toast {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.55) !important;
}
.s-add-product-toast__image { background-color: var(--dm-bg-surface) !important; }
.swal2-popup {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}
.swal2-title, .swal2-html-container { color: var(--dm-text-primary) !important; }

/* hover على فرع التوصيل */
.s-bullet-delivery-branch-item:hover:not(.s-bullet-delivery-branch-item--disabled) {
    background-color: var(--dm-bg-hover) !important;
}

/* badge فاتح */
.s-badge-light {
    background-color: rgba(255,255,255,.08) !important;
    color: var(--dm-text-secondary) !important;
}


/* =================================================================
   15) قائمة المستخدم  ★ القسم المُصلَّح ★
   ─────────────────────────────────────────────────────────────────
   حذفنا القاعدة القديمة [class*="s-user-menu"]{background:#fff;border:1px}
   التي كانت تضع بوردر حول كل عنصر (الصناديق المكسورة) وتجعلها بيضاء.
   ================================================================= */

/* الزر المُشغّل: شفاف وبدون بوردر */
.s-user-menu-trigger {
    background-color: transparent !important;
    border: none !important;
    border-radius: .5rem !important;
}
.s-user-menu-trigger:hover { background-color: rgba(255,255,255,.07) !important; }

/* كل العناصر الداخلية: شفافة وبدون بوردر (يزيل الصناديق) */
.s-user-menu-wrapper,
.s-user-menu-relative-dropdown,
.s-user-menu-trigger-slot,
.s-user-menu-avatar-wrap,
.s-user-menu-trigger-content,
.s-user-menu-dropdown-list,
.s-user-menu-dropdown-item,
.s-user-menu-dropdown-item-link {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* اللوحة المنسدلة: خلفية صلبة + بوردر واحد + ظل + z-index عالٍ
   (يحل مشكلة الشفافية والظهور خلف العناصر في الرئيسية) */
.s-user-menu-dropdown {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: .9rem !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}
/* رفع سياق التكديس حتى لا تختفي خلف السلايدر/البطاقات */
.s-user-menu-toggler,
.s-user-menu-relative-dropdown { z-index: 9999 !important; }

/* رأس اللوحة */
.s-user-menu-dropdown-header,
.s-user-menu-dropdown-header-content {
    background-color: var(--dm-bg-surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--dm-border) !important;
}
.s-user-menu-dropdown-header-close {
    background-color: transparent !important;
    border: none !important;
    color: var(--dm-text-secondary) !important;
}

/* فاصل خفيف بين العناصر بدل الصندوق الكامل */
.s-user-menu-dropdown-item + .s-user-menu-dropdown-item {
    border-top: 1px solid var(--dm-border) !important;
}

/* تفاعل العناصر */
.s-user-menu-dropdown-item-link:hover {
    background-color: rgba(44,206,212,.09) !important;
}

/* النصوص */
.s-user-menu-trigger-name,
.s-user-menu-dropdown-item-title,
.s-user-menu-dropdown-header-content strong,
.s-user-menu-dropdown-header-content b { color: var(--dm-text-primary) !important; }
.s-user-menu-trigger-hello { color: var(--dm-text-muted) !important; }
.s-user-menu-dropdown-item-link { color: var(--dm-text-secondary) !important; }
.s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-title { color: #fff !important; }
.s-user-menu-dropdown-header-content span { color: var(--dm-text-muted) !important; }

/* الأيقونات */
.s-user-menu-trigger-icon svg,
.s-user-menu-dropdown-item-prefix svg { fill: var(--dm-text-secondary) !important; }
.s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg { fill: var(--dm-brand) !important; }

/* صورة الأفاتار: حلقة أنيقة بدل الصندوق المكسور */
.s-user-menu-trigger-avatar {
    border: 2px solid rgba(44,206,212,.35) !important;
    border-radius: 50% !important;
}

/* تسجيل الخروج يبقى أحمر */
.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link { color: #ff6b6b !important; }
.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-prefix svg { fill: #ff6b6b !important; }
.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link:hover {
    background-color: rgba(239,68,68,.1) !important;
}


/* =================================================================
   16) الأزرار
   ================================================================= */
.s-button-btn {
    border-radius: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .62rem 1.7rem .72rem;
    position: relative; overflow: hidden;
    transition: transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease, filter .24s ease !important;
}
.s-button-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.16); }
.s-button-btn:active { transform: translateY(0) scale(.96); box-shadow: none; }

.s-button-primary {
    border-width: 0 !important;
    background: #1a8a8e !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.s-button-primary:hover { background: #1d9a9f !important; box-shadow: 0 4px 14px rgba(0,0,0,.3) !important; }
.s-button-primary:active { background: #167578 !important; box-shadow: none !important; }

.s-button-outline {
    border-color: rgba(44,206,212,.45) !important;
    color: #2cced4 !important;
    background: transparent !important;
}
.s-button-outline:hover {
    background: rgba(44,206,212,.1) !important;
    border-color: rgba(44,206,212,.8) !important;
}
.s-button-link { color: #2cced4 !important; fill: #2cced4 !important; transition: opacity .2s ease; }
.s-button-link:hover { opacity: .72; }
.s-button-gray {
    background-color: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.85) !important;
    border-color: rgba(255,255,255,.12) !important;
}
.s-button-gray:hover { background-color: rgba(255,255,255,.14) !important; color: #fff !important; }
.s-button-dark {
    background-color: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.9) !important;
    border-color: rgba(255,255,255,.15) !important;
}
.s-button-light {
    background-color: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.75) !important;
    border-color: rgba(255,255,255,.1) !important;
}
.s-button-light:hover { background-color: rgba(255,255,255,.12) !important; color: #fff !important; }
.s-button-warning { background-color: #d97706 !important; color: #fff !important; }

.s-button-icon:not(.s-product-card-entry .s-button-icon) {
    background-color: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.85) !important;
    border-radius: .65rem !important;
}
.s-button-icon:not(.s-product-card-entry .s-button-icon) svg { fill: rgba(255,255,255,.85) !important; }
.s-button-icon:not(.s-product-card-entry .s-button-icon):hover {
    background-color: rgba(44,206,212,.15) !important;
    border-color: rgba(44,206,212,.5) !important;
}
.s-button-icon:not(.s-product-card-entry .s-button-icon):hover svg { fill: #fff !important; }

.s-block--slider-with-bg { background-color: #0d1617 !important; }
.s-block--slider-with-bg .s-slider-block__display-all {
    background-color: transparent !important;
    border-color: rgba(44,206,212,.4) !important;
    color: rgba(44,206,212,.9) !important;
}
.s-block--slider-with-bg .s-slider-block__display-all:hover {
    background-color: rgba(44,206,212,.1) !important;
    border-color: rgba(44,206,212,.7) !important;
    color: #2cced4 !important;
}
.s-slider-block__title h2 { color: var(--dm-text-primary) !important; }
.s-slider-block__title p { color: var(--dm-text-secondary) !important; }


/* =================================================================
   17) Keyframes
   ================================================================= */
@keyframes cardEntrance {
    0%   { opacity:0; transform:translateY(30px) scale(.95); }
    65%  { opacity:1; transform:translateY(-4px) scale(1.005); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes shimmerSweep { 0% { transform:translateX(-100%) skewX(-20deg); } 100% { transform:translateX(250%) skewX(-20deg); } }
@keyframes shimmerLoad  { 0% { background-position:-300% 0; } 100% { background-position:300% 0; } }
@keyframes badgeFloat   { 0%,100% { transform:translateY(0) rotate(-.5deg); } 50% { transform:translateY(-3px) rotate(.5deg); } }
@keyframes heartPop     { 0% { transform:scale(1); } 35% { transform:scale(1.55); } 65% { transform:scale(.88); } 85% { transform:scale(1.12); } 100% { transform:scale(1); } }
@keyframes overlayFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes drawerSlideIn    { from { opacity:0; transform:translateX(30px); }  to { opacity:1; transform:translateX(0); } }
@keyframes drawerSlideInRTL { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes spinSm { to { transform:rotate(360deg); } }
@keyframes skeletonPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }


/* =================================================================
   18) بطاقة المنتج — التصميم الكامل (تصميمك المميّز)
   ================================================================= */
.s-product-card-entry {
    border-radius: 1.25rem !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate;
    will-change: transform, box-shadow;
    background: linear-gradient(148deg, rgba(44,206,212,.97) 0%, rgba(22,100,104,.97) 50%, rgba(15,30,30,.98) 100%) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 12px 36px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.1) !important;
    animation: cardEntrance .55s cubic-bezier(.4,0,.2,1) both;
    transition: transform .34s cubic-bezier(.4,0,.2,1), box-shadow .34s cubic-bezier(.4,0,.2,1), border-color .34s ease !important;
}
.s-product-card-entry:nth-child(1)  { animation-delay:.04s; }
.s-product-card-entry:nth-child(2)  { animation-delay:.11s; }
.s-product-card-entry:nth-child(3)  { animation-delay:.18s; }
.s-product-card-entry:nth-child(4)  { animation-delay:.25s; }
.s-product-card-entry:nth-child(5)  { animation-delay:.31s; }
.s-product-card-entry:nth-child(6)  { animation-delay:.37s; }
.s-product-card-entry:nth-child(n+7){ animation-delay:.42s; }

.s-product-card-shadow:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(44,206,212,.5) !important;
    box-shadow: 0 16px 48px rgba(44,206,212,.25), 0 8px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.s-product-card-entry::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.1) 50%, transparent 70%);
    transform: translateX(-100%) skewX(-20deg); transition: none;
}
.s-product-card-entry:hover::before { animation: shimmerSweep .7s ease forwards; }

.s-product-card-entry::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle 180px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.09) 0%, transparent 70%);
    opacity: 0; transition: opacity .3s ease;
}
.s-product-card-entry:hover::after { opacity: 1; }

.s-product-card-image {
    background: rgba(15,30,30,.4) !important;
    overflow: hidden; position: relative; z-index: 3;
}
.s-product-card-vertical .s-product-card-image {
    border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem;
}
.s-product-card-image::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(44,206,212,.06) 0%, rgba(15,30,30,.3) 100%);
    opacity: 0; transition: opacity .4s ease; z-index: 2; pointer-events: none;
}
.s-product-card-entry:hover .s-product-card-image::after { opacity: 1; }
.s-product-card-image img {
    transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
    will-change: transform; mix-blend-mode: luminosity; opacity: .92;
}
.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.07); opacity: 1; mix-blend-mode: normal;
}

.s-product-card-content {
    position: relative; z-index: 4; padding: .9rem 1.05rem 1rem;
    background: linear-gradient(0deg, rgba(15,30,30,.55) 0%, transparent 100%) !important;
}
.s-product-card-content::before {
    content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(44,206,212,.5) 50%, transparent);
    transform: scaleX(0); transform-origin: center; transition: transform .4s ease;
}
.s-product-card-entry:hover .s-product-card-content::before { transform: scaleX(1); }

.s-product-card-entry *,
.s-product-card-entry h3,
.s-product-card-entry h4,
.s-product-card-entry p,
.s-product-card-entry span,
.s-product-card-entry a { color: rgba(255,255,255,.95) !important; }

.s-product-card-content-title a {
    font-weight: 700 !important; font-size: .875rem !important; line-height: 1.35 !important;
    color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: color .2s ease, letter-spacing .2s ease;
}
.s-product-card-content-title a:hover { color: rgba(44,206,212,.9) !important; letter-spacing: .01em; }
.s-product-card-rating { color: rgba(255,255,255,.7) !important; }
.s-product-card-rating span svg { fill: #fbbf24 !important; filter: drop-shadow(0 1px 3px rgba(251,191,36,.5)); }
.s-product-card-price,
.s-product-card-sale-price h4 {
    font-weight: 800 !important; font-size: .92rem !important; color: #fff !important;
    text-shadow: 0 0 12px rgba(44,206,212,.6);
}
.s-product-card-sale-price span { color: rgba(255,255,255,.5) !important; text-decoration: line-through; }
.s-product-card-content-subtitle { color: rgba(255,255,255,.75) !important; }
.s-product-card-content-footer { margin-top: auto; padding-top: .55rem; display: flex; align-items: center; gap: .5rem; }

/* زر السلة داخل البطاقة */
.s-product-card-entry .s-button-btn,
.s-product-card-entry .s-button-primary {
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
    border-radius: .65rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background .22s ease, border-color .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease !important;
}
.s-product-card-entry .s-button-btn:hover,
.s-product-card-entry .s-button-primary:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: transparent !important;
    color: #0f1e1e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.2) !important;
}
.s-product-card-entry .s-button-btn:hover * { color: #0f1e1e !important; }
.s-product-card-entry .s-button-btn:active { transform: scale(.96) !important; }

/* زر القلب (المفضلة) */
.s-product-card-vertical .s-product-card-wishlist-btn {
    position: absolute !important; top: .7rem !important; right: .7rem !important;
    opacity: 0 !important; transform: translateY(-8px) scale(.7) !important;
    transition: opacity .28s ease, transform .32s cubic-bezier(.34,1.56,.64,1) !important;
    z-index: 10 !important;
}
.s-product-card-entry:hover .s-product-card-wishlist-btn {
    opacity: 1 !important; transform: translateY(0) scale(1) !important;
}
.s-product-card-vertical .s-product-card-wishlist-btn:where([dir=rtl],[dir=rtl] *) {
    left: .7rem !important; right: auto !important;
}
.s-product-card-entry .s-product-card-wishlist-btn button,
.s-product-card-vertical .s-product-card-wishlist-btn button {
    border-radius: 50% !important; width: 2.2rem !important; height: 2.2rem !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important;
    background: rgba(255,255,255,.22) !important;
    backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: background .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease !important;
}
.s-product-card-entry .s-product-card-wishlist-btn button svg,
.s-product-card-entry .s-product-card-wishlist-btn button i {
    fill: #ff6b6b !important; color: #ff6b6b !important;
    width: 1rem !important; height: 1rem !important;
    filter: drop-shadow(0 1px 3px rgba(255,80,80,.5)) !important;
}
.s-product-card-entry .s-product-card-wishlist-btn button:hover {
    background: rgba(255,255,255,.88) !important;
    border-color: rgba(255,255,255,.9) !important;
    transform: scale(1.2) !important;
}
.s-product-card-entry .s-product-card-wishlist-btn button:active { animation: heartPop .38s ease !important; }
.s-product-card-wishlist-added svg,
.s-product-card-wishlist-added i { fill: #ef4444 !important; color: #ef4444 !important; }

/* الشارات */
.s-product-card-promotion-title {
    border-radius: .45rem !important; font-size: .68rem !important; font-weight: 800 !important;
    letter-spacing: .04em !important; padding: .3rem .75rem !important; top: .8rem !important; z-index: 10 !important;
    background: rgba(255,255,255,.18) !important; backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,.3) !important; color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
    animation: badgeFloat 4s ease-in-out infinite;
}
.s-product-card-quantity {
    border-radius: .45rem !important; font-size: .68rem !important; font-weight: 700 !important;
    padding: .3rem .7rem !important; background: rgba(44,206,212,.85) !important;
    backdrop-filter: blur(6px) !important; color: #fff !important;
}
.s-product-card-out-badge {
    border-radius: .45rem !important; font-size: .68rem !important; font-weight: 700 !important;
    padding: .3rem .7rem !important; background: rgba(255,255,255,.15) !important;
    backdrop-filter: blur(6px) !important; color: rgba(255,255,255,.9) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
}


/* =================================================================
   19) أنيميشن القوائم والدراور + يوتيوب
   ================================================================= */
.mm-ocd--open { background: rgba(15,30,30,.5); animation: overlayFadeIn .3s ease; }
.mm-ocd__content { border-radius: 0 1.25rem 1.25rem 0; box-shadow: 6px 0 36px rgba(15,30,30,.18); }
.mm-ocd--right .mm-ocd__content { border-radius: 1.25rem 0 0 1.25rem; }
.mm-ocd--open .mm-ocd__content:where([dir=ltr],[dir=ltr] *) { animation: drawerSlideIn .32s cubic-bezier(.4,0,.2,1) both; }
.mm-ocd--open .mm-ocd__content:where([dir=rtl],[dir=rtl] *) { animation: drawerSlideInRTL .32s cubic-bezier(.4,0,.2,1) both; }
.mm-spn a { font-size: .9rem; transition: padding .2s ease, color .2s ease; }
.mm-spn a:hover { padding-right: 1.5rem; }
.mm-spn li:hover { background-color: rgba(44,206,212,.08); }

.s-drawer-container { animation: overlayFadeIn .28s ease; }
.s-drawer-wrapper-left > *  { animation: drawerSlideIn .34s cubic-bezier(.4,0,.2,1) both; }
.s-drawer-wrapper-right > * { animation: drawerSlideInRTL .34s cubic-bezier(.4,0,.2,1) both; }
.s-drawer-close { border-radius: 50%; transition: background-color .22s ease, transform .22s ease; }
.s-drawer-close:hover { background-color: rgba(239,68,68,.14); transform: rotate(90deg) scale(1.1); }
.s-drawer-loader:before {
    animation: spinSm 1s linear infinite;
    border-color: rgba(44,206,212,.9) rgba(44,206,212,.15) rgba(44,206,212,.15) rgba(44,206,212,.15);
}

lite-youtube { border-radius: 1rem; overflow: hidden; background-position: center; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
lite-youtube > .lty-playbtn { opacity: .9; transition: opacity .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
lite-youtube:hover > .lty-playbtn { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.14); }

salla-skeleton,
[class*="-skeleton"] salla-skeleton { animation: skeletonPulse 1.6s ease-in-out infinite !important; }


/* =================================================================
   20) الوضع الداكن (dark.) لبطاقة المنتج
   ================================================================= */
.dark .s-product-card-entry {
    background: linear-gradient(148deg, rgba(44,206,212,.9) 0%, rgba(18,80,84,.95) 50%, rgba(10,20,20,.98) 100%) !important;
    border-color: rgba(44,206,212,.2) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 12px 36px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.dark .s-product-card-shadow:hover {
    box-shadow: 0 16px 48px rgba(44,206,212,.3), 0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
}


/* =================================================================
   21) إصلاحات إضافية  (دفعة المراجعة الأخيرة)
   ================================================================= */

/* ---- (1) طبقة العناصر العائمة: دائماً فوق البطاقات والمحتوى ----
   البطاقات تستخدم transform + will-change فتُنشئ سياق تكديس يرفعها؛
   نرفع الهيدر والعناصر العائمة فوقها بقيم z-index عالية. */
/* الهيدر static في ملف سله → z-index كان يُتجاهل.
   نجعله relative ليصبح فعّالاً، فيرتفع فوق الأقسام والكروت. */
.main-nav-container {
    position: relative !important;
    z-index: 9999 !important;
}

.s-user-menu-dropdown,
.s-user-menu-toggler,
.s-user-menu-relative-dropdown { z-index: 100000 !important; }

/* العناصر العائمة فوق المحتوى (قوائم/توست/دراور) */
.s-drawer-container,
.s-drawer-wrapper,
.s-add-product-toast,
.s-search-results,
.sub-menu,
.mega-menu,
.dropdown-menu,
.dropdown__menu,
[class*="popover"],
[class*="s-popover"] { z-index: 100000 !important; }

/* المودال: الخلفية الرمادية تحت، صندوق المحتوى فوقها.
   (الترتيب الخاطئ سابقاً كان يخفي نموذج تسجيل الدخول = شاشة سوداء) */
.s-modal-overlay,
[class*="modal-overlay"],
[class*="modal-backdrop"] { z-index: 99998 !important; }
.s-modal-body,
.s-modal-content { z-index: 99999 !important; }


/* ---- (2) خلفيات الهوفر البيضاء (مثل صفحة ما بعد الشراء) ----
   كلاسات Tailwind مثل hover:bg-gray-50 لم تكن مغطّاة، فتظهر بيضاء عند المرور. */
[class*="hover:bg-white"]:hover,
[class*="hover:bg-gray-50"]:hover,
[class*="hover:bg-gray-100"]:hover,
[class*="hover:bg-gray-200"]:hover {
    background-color: var(--dm-bg-hover) !important;
}

/* فواصل divide + لون نص الثيم الافتراضي */
.text-text-color { color: var(--dm-text-primary) !important; }
[class*="divide-gray"] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dm-border) !important;
}

/* خلفيات brand الخفيفة تبقى كما هي (سماوي خفيف) — لا نلمسها */


/* ---- (3) توست "تمت الإضافة للسلة" — ترتيب النصوص على الغامق ---- */
.s-add-product-toast {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 12px 44px rgba(0,0,0,.6) !important;
}
.s-add-product-toast__title,
.s-add-product-toast__name { color: var(--dm-text-primary) !important; }
.s-add-product-toast__name:hover { color: var(--dm-brand) !important; }
.s-add-product-toast__price,
.s-add-product-toast__price i,
.s-add-product-toast__price div { color: var(--dm-brand) !important; }
.s-add-product-toast__close {
    background-color: transparent !important;
    color: var(--dm-text-secondary) !important;
}
.s-add-product-toast__close:hover { color: #fff !important; }
.s-add-product-toast__close i { color: inherit !important; }
.s-add-product-toast__divider {
    background-color: var(--dm-border) !important;
    border: none !important;
}
.s-add-product-toast__progress { background-color: var(--dm-bg-surface) !important; }
.s-add-product-toast__progress-bar { background-color: var(--dm-brand) !important; }
.s-add-product-toast__image { background-color: var(--dm-bg-surface) !important; }
/* علامة الصح الخضراء (صورة svg جاهزة) تُترك كما هي */


/* ---- (4) مودال تسجيل الدخول (iframe من نطاق آخر) ----
   لا يمكن تلوين محتوى الـ iframe من CSS المتجر (حظر أمني للمتصفح).
   نعطيه خلفية بيضاء فيبقى نص سله الأسود مقروءاً. */
iframe[title="Salla Login"] {
    background-color: #ffffff !important;
    border-radius: .5rem !important;
}
/* نُبقي حاوية مودال تسجيل الدخول فاتحة حتى لا يتعارض الإطار مع الغامق */
.s-modal-body:has(iframe[title="Salla Login"]) {
    background-color: #ffffff !important;
}
.s-modal-body:has(iframe[title="Salla Login"]) .s-modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eee !important;
}
.s-modal-body:has(iframe[title="Salla Login"]) .s-modal-close {
    background-color: #f3f4f6 !important;
}
.s-modal-body:has(iframe[title="Salla Login"]) .s-modal-close svg { fill: #444 !important; }

/* نعومة حركة بنرات المربعات + تسريع الرسم عبر الـ GPU */
.s-block--banners .swiper-wrapper {
    transition-timing-function: cubic-bezier(.37, 0, .16, 1) !important; /* انزلاق ناعم ثم توقّف هادئ */
    will-change: transform;
}
.s-block--banners .banner-square,
.s-block--banners .box-img,
.s-block--banners .box-img img {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* =================================================================
   بنرات الشبكة — ظل ونص عند الهوفر فقط
   ================================================================= */

/* نخفي الـ overlay الداكن افتراضياً */
.banner-entry.has-overlay::after {
    background-color: transparent !important;
    transition: background-color .4s ease !important;
}

/* نخفي النص افتراضياً */
.banner-entry .banner-entry__text {
    position: relative !important;
    z-index: 2 !important;
    opacity: 0 !important;
    transform: translateY(14px) !important;
    transition: opacity .4s ease, transform .4s ease !important;
}

/* عند الهوفر: نظهر الظل */
.banner-entry:hover.has-overlay::after,
.banner-entry:hover .has-overlay::after {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* عند الهوفر: نظهر النص */
.banner-entry:hover .banner-entry__text {
    opacity: 1 !important;
    transform: translateY(0) !important;
}