/* Storefront dark-mode toggle + A-to-Z surface overrides.
   Loaded at end of body so it wins over page-level white backgrounds. */

/* ==================== Glassmorphic sun/moon toggle ==================== */
.sf-dark-toggle.nav-icon,
#sf-dark-toggle-btn.sf-dark-toggle.nav-icon,
.sf-account .sf-dark-toggle {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    cursor: pointer;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    z-index: 6;
}
.sf-dark-toggle.nav-icon:hover,
.sf-dark-toggle.nav-icon:active,
.sf-account .sf-dark-toggle:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}
.sf-dark-toggle::before {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    filter: none !important;
}
.sf-dark-toggle__glass {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity 0.2s ease;
}
.sf-dark-toggle:hover .sf-dark-toggle__glass {
    background: transparent;
    border: none;
    box-shadow: none;
    filter: none;
    opacity: 0.85;
}
.sf-dark-toggle__icon {
    width: 18px;
    height: 18px;
    color: #fff;
    stroke: currentColor;
    fill: currentColor;
    display: none;
}
.sf-dark-toggle .sf-dark-toggle__moon { display: block; }
.sf-dark-toggle .sf-dark-toggle__sun { display: none; }
html.dark-mode .sf-dark-toggle .sf-dark-toggle__sun { display: block; }
html.dark-mode .sf-dark-toggle .sf-dark-toggle__moon { display: none; }
.sf-dark-toggle.nav-icon svg,
#sf-dark-toggle-btn.sf-dark-toggle.nav-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: currentColor !important;
}
html.dark-mode .sf-dark-toggle__glass {
    background: transparent;
    border: none;
    box-shadow: none;
    filter: none;
}
html.dark-mode .sf-dark-toggle:hover .sf-dark-toggle__glass {
    background: transparent;
    border: none;
    box-shadow: none;
    filter: none;
}

/* Account page (header nav is hidden there) */
.sf-account .sf-dark-toggle {
    color: #111827 !important;
}
.sf-account .sf-dark-toggle::before {
    display: none !important;
    box-shadow: none !important;
}
.sf-account .sf-dark-toggle .sf-dark-toggle__glass {
    background: transparent;
    border: none;
    box-shadow: none;
}
.sf-account .sf-dark-toggle .sf-dark-toggle__icon {
    color: #111827;
}
html.dark-mode .sf-account .sf-dark-toggle,
html.dark-mode .sf-account .sf-dark-toggle .sf-dark-toggle__icon {
    color: #fff !important;
}
html.dark-mode .site-header .nav-icon,
html.dark-mode .site-header a.nav-icon {
    color: #fff !important;
}
html.dark-mode a.notification-card-view-btn,
html.dark-mode .notification-card-view-btn,
html.dark-mode .notification-card-view-btn svg {
    color: var(--theme-color, #00c5b4) !important;
    fill: currentColor !important;
}
html.dark-mode .notification-card-view-btn svg path[fill="none"] {
    fill: none !important;
}

.productive-family-tab .pf-chef-icon {
    display: none !important;
}
html.dark-mode .site-header .nav-icon svg {
    stroke: currentColor !important;
}

/* ==================== Global surfaces (delegate settings zinc) ==================== */
html.dark-mode {
    color-scheme: dark;
    background: var(--dm-bg, #26262e) !important;
    background-color: var(--dm-bg, #26262e) !important;
    --dm-bg: #26262e;
    --dm-surface: #33333d;
    --dm-surface-2: rgba(255, 255, 255, 0.08);
    --dm-card: rgba(255, 255, 255, 0.05);
    --dm-text: #ffffff;
    --dm-muted: #94a3b8;
    --dm-border: rgba(255, 255, 255, 0.08);
    --dm-border-strong: rgba(255, 255, 255, 0.12);
    --dm-input-bg: rgba(255, 255, 255, 0.06);
    --text: #ffffff;
    --muted: #94a3b8;
    --card: #33333d;
    --border: rgba(255, 255, 255, 0.08);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

html.dark-mode .sf-ptr-gap {
    background: var(--dm-bg) !important;
}

/* Top of page: flush zinc header (not theme-color bar) */
html.dark-mode .site-header,
html.dark-mode .site-header.scrolled,
html.dark-mode .site-header.ite-header {
    background: var(--dm-bg) !important;
    box-shadow: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode #header-delivery-address.header-delivery-address-nav,
html.dark-mode .header-delivery-address-nav {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}
html.dark-mode #header-delivery-address.header-delivery-address-nav:hover,
html.dark-mode .header-delivery-address-nav:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
html.dark-mode #header-delivery-address .header-delivery-address-text-nav,
html.dark-mode #header-delivery-address .header-delivery-dropdown-icon-nav,
html.dark-mode .header-delivery-address-text-nav,
html.dark-mode .header-delivery-dropdown-icon-nav {
    color: #fff !important;
}
html.dark-mode #header-delivery-address.is-shared-trip-active,
html.dark-mode #header-delivery-address.is-shared-trip-active:hover {
    background: #111113 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-mode body,
html.dark-mode .store-main-section,
html.dark-mode .main-wrapper,
html.dark-mode .main-left-col,
html.dark-mode .tabs-wrapper,
html.dark-mode .tabs-container,
html.dark-mode .category-sticky-wrap,
html.dark-mode .wrapper,
html.dark-mode .content-area,
html.dark-mode .page-wrapper {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text);
}

html.dark-mode ul.tabs,
html.dark-mode ul.pro_category,
html.dark-mode .category-tab,
html.dark-mode ul.tabs.category-tab {
    background: var(--dm-bg) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .site-footer,
html.dark-mode .footer-branding,
html.dark-mode .footer-inner {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .form-input,
html.dark-mode .form-input:focus-within {
    background: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .sf-account,
html.dark-mode .sf-account__top {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}
html.dark-mode .sf-account__icon-btn,
html.dark-mode .sf-account__back,
html.dark-mode .sf-account__ref,
html.dark-mode .sf-account__stat-label,
html.dark-mode .sf-account__menu-label,
html.dark-mode .sf-account__promo-title,
html.dark-mode .sf-account__menu-ic {
    color: var(--dm-text) !important;
}
html.dark-mode .sf-account__stats,
html.dark-mode .sf-account__menu,
html.dark-mode .sf-account__menu-item,
html.dark-mode .sf-account__login-card,
html.dark-mode .sf-account__promo {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode .sf-account__stat-sub,
html.dark-mode .sf-account__promo-desc,
html.dark-mode .sf-account__login-card p {
    color: var(--dm-muted) !important;
}
html.dark-mode .sf-account__stat + .sf-account__stat,
html.dark-mode .sf-account__menu-item + .sf-account__menu-item {
    border-color: var(--dm-border) !important;
}
html.dark-mode a.sf-account__menu-item,
html.dark-mode a.sf-account__back {
    color: var(--dm-text) !important;
}
html.dark-mode a.sf-account__login-btn,
html.dark-mode .sf-account__promo-btn {
    color: #18181b !important;
    background: #ffffff !important;
}

html.dark-mode a.zoro-card,
html.dark-mode a.ninja-card,
html.dark-mode a.product-card,
html.dark-mode .zoro-card,
html.dark-mode .ninja-card,
html.dark-mode .list-card,
html.dark-mode .product-card,
html.dark-mode .grid-card {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.dark-mode .zoro-content,
html.dark-mode .product-content,
html.dark-mode .zoro-title,
html.dark-mode .ninja-title {
    color: var(--dm-text) !important;
}

html.dark-mode #skeleton-loader .skeleton-card,
html.dark-mode #skeleton-loader .skeleton-card.zoro-card,
html.dark-mode #skeleton-loader .skeleton-card.ninja-card {
    background: var(--dm-surface, #33333d) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html.dark-mode #skeleton-loader .skeleton-img-wrapper,
html.dark-mode #skeleton-loader .skeleton-image-wrapper {
    background: var(--dm-bg, #26262e) !important;
    border-color: var(--dm-border, rgba(255, 255, 255, 0.08)) !important;
}
html.dark-mode #skeleton-loader .skeleton-box,
html.dark-mode #skeleton-loader .skeleton-line {
    background: #2c2c36 !important;
    background-image: linear-gradient(
        to right,
        #2c2c36 0%,
        #3d3d48 20%,
        #2c2c36 40%,
        #2c2c36 100%
    ) !important;
    background-size: 800px 104px !important;
    border-color: transparent !important;
}

html.dark-mode .modal-content,
html.dark-mode .modal-wrapper,
html.dark-mode .modal-inner,
html.dark-mode .modal-body,
html.dark-mode .login-form,
html.dark-mode .form-container,
html.dark-mode .section-title h2,
html.dark-mode .order-complete-card,
html.dark-mode .invoice-card,
html.dark-mode .invoice-toolbar,
html.dark-mode .inv-summary,
html.dark-mode .inv-box,
html.dark-mode .legal-card {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode .inv-no-box,
html.dark-mode .header-total-box,
html.dark-mode .status-pending,
html.dark-mode .notes-box,
html.dark-mode .inv-table-wrapper,
html.dark-mode .inv-table th {
    background: var(--dm-bg, #26262e) !important;
    border-color: var(--dm-border, rgba(255, 255, 255, 0.10)) !important;
    color: var(--dm-text, #fff) !important;
}
html.dark-mode .inv-table th {
    color: var(--dm-muted, #8e9aaf) !important;
}
html.dark-mode .inv-table td {
    border-bottom-color: var(--dm-border, rgba(255, 255, 255, 0.10)) !important;
    color: var(--dm-text, #fff) !important;
}

html.dark-mode .text-dark,
html.dark-mode .text-body,
html.dark-mode .text-black,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: var(--dm-text);
}

html.dark-mode .coming-soon-page,
html.dark-mode .legal-page,
html.dark-mode body.reset-password-page {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .bg-white,
html.dark-mode .bg-light,
html.dark-mode .list-group-item {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .legal-hero h1,
html.dark-mode .legal-body,
html.dark-mode .legal-footer {
    color: var(--dm-text) !important;
}

/* Product badges that were light-mode pastels */
html.dark-mode .status-badge.is-open {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #5eead4 !important;
    border-color: transparent !important;
}
html.dark-mode .status-badge.is-closed,
html.dark-mode .status-badge.is-unknown {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--dm-muted) !important;
    border-color: transparent !important;
}
html.dark-mode .status-badge.is-closing-soon {
    background-color: rgba(239, 68, 68, 0.20) !important;
    color: #fca5a5 !important;
    border-color: transparent !important;
}
html.dark-mode .delivery-badge-inline,
html.dark-mode .zoro-meta-item.delivery-badge-inline {
    background: rgba(43, 179, 192, 0.15) !important;
    border-color: transparent !important;
    color: #2bb3c0 !important;
}
html.dark-mode .delivery-badge-inline .delivery-price-label,
html.dark-mode .delivery-badge-inline .delivery-price-display,
html.dark-mode .delivery-badge-inline .sar-amount {
    color: inherit !important;
}
html.dark-mode .delivery-badge-inline.has-flash-discount {
    background: rgba(43, 179, 192, 0.22) !important;
    color: #2bb3c0 !important;
}
html.dark-mode .delivery-icon,
html.dark-mode .delivery-icon g,
html.dark-mode .delivery-icon path,
html.dark-mode .delivery-icon circle {
    color: #2bb3c0 !important;
    fill: #2bb3c0 !important;
}

/* ==================== Cart sidebar ==================== */
html.dark-mode #card-summary,
html.dark-mode .cart-overlay,
html.dark-mode .cart-sidebar,
html.dark-mode .main-right-col,
html.dark-mode .main-right-col.active,
html.dark-mode .cart-wrapper,
html.dark-mode .cart-body-wrp,
html.dark-mode .card-body-inner,
html.dark-mode .cart-body-wrp .cart-body,
html.dark-mode .cart-wrapper .coupon-box,
html.dark-mode .checkout-fields,
html.dark-mode .checkout-field {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode .cart-item,
html.dark-mode #card-summary .cart-item,
html.dark-mode .cart-wrapper .cart-item,
html.dark-mode .cart-body .cart-item {
    background: var(--dm-surface) !important;
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html.dark-mode .cart-wrapper .cart-body h3,
html.dark-mode #card-summary .cart-body > h3,
html.dark-mode #card-summary h3 {
    color: #ffffff !important;
    background: transparent !important;
}
html.dark-mode .checkout-fields {
    --dp-border: var(--dm-border);
    --dp-muted: var(--dm-surface);
    --dp-muted-fg: var(--dm-muted);
    --dp-fg: #ffffff;
}
html.dark-mode .checkout-fields .detail-form .form-group > label,
html.dark-mode .checkout-fields label,
html.dark-mode .delivery-details-card label,
html.dark-mode .delivery-input-label {
    color: #fff !important;
}
html.dark-mode .checkout-fields #phone,
html.dark-mode .checkout-fields input.form-control,
html.dark-mode .checkout-fields .form-control {
    background: var(--dm-input-bg) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
}
html.dark-mode .checkout-fields #phone:focus,
html.dark-mode .checkout-fields #phone.phone-typing {
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
}
html.dark-mode .order-summary-header__payments {
    background: var(--dm-surface-2) !important;
    border: 1px solid var(--dm-border);
}
html.dark-mode .order-summary-header .order-payment-option {
    color: var(--dm-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
}
html.dark-mode .order-summary-header .order-payment-option:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    box-shadow: none !important;
}
html.dark-mode .order-summary-header .order-payment-option:has(input:checked) {
    background: var(--theme-color, #2bb3c0) !important;
    color: #fff !important;
    box-shadow: none !important;
}
html.dark-mode .order-summary-title {
    color: #fff !important;
}
html.dark-mode .cart-sidebar-close,
html.dark-mode .main-right-col.active .cart-sidebar-close,
html.dark-mode .cart-sidebar-close:hover,
html.dark-mode .cart-sidebar-close:focus,
html.dark-mode .main-right-col.active .cart-sidebar-close:hover,
html.dark-mode .main-right-col.active .cart-sidebar-close:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    color: #fff !important;
}
html.dark-mode .cart-sidebar-close svg,
html.dark-mode .cart-sidebar-close svg path {
    stroke: #fff !important;
    fill: none !important;
    color: #fff !important;
}
html.dark-mode #card-summary .cart-empty-state .empty-title,
html.dark-mode #card-summary .cart-empty-state .empty-title span,
html.dark-mode #card-summary .cart-body > div > h4,
html.dark-mode #card-summary .cart-body > div > h4 span,
html.dark-mode #card-summary .js-temp-empty-cart h4,
html.dark-mode #card-summary .js-temp-empty-cart h4 span {
    color: #fff !important;
}
html.dark-mode #card-summary .cart-empty-state .empty-title svg,
html.dark-mode #card-summary .cart-body > div > h4 svg,
html.dark-mode #card-summary .js-temp-empty-cart h4 svg {
    color: #fff !important;
    stroke: currentColor !important;
}
html.dark-mode #card-summary .cart-empty-state .empty-desc,
html.dark-mode #card-summary .cart-body > div > p,
html.dark-mode #card-summary .js-temp-empty-cart p {
    color: var(--dm-muted, #94a3b8) !important;
}
html.dark-mode #card-summary .cart-empty-state .empty-icon-wrap {
    color: var(--dm-muted, #94a3b8) !important;
}
html.dark-mode .back-to-cart,
html.dark-mode button.back-to-cart {
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}
html.dark-mode .back-to-cart svg,
html.dark-mode .back-to-cart svg path {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
/* أزرار الدفع/الإرسال: لون الثيم فقط — بدون تدرج أو توهج */
html.dark-mode #order-telegram,
html.dark-mode .checkout-fields .checkout-btn,
html.dark-mode .checkout-btn,
html.dark-mode .telegram-btn,
html.dark-mode a#order-telegram {
    background: var(--theme-color, #00c5b4) !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;
}
html.dark-mode #order-telegram:hover,
html.dark-mode #order-telegram:focus,
html.dark-mode a#order-telegram:hover,
html.dark-mode .checkout-fields .checkout-btn:hover,
html.dark-mode .checkout-fields .checkout-btn:focus,
html.dark-mode .checkout-btn:hover,
html.dark-mode .telegram-btn:hover {
    background: var(--theme-color, #00c5b4) !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}
html.dark-mode .checkout-fields .checkout-btn::before,
html.dark-mode #order-telegram::before {
    display: none !important;
    box-shadow: none !important;
}
html.dark-mode .checkout-bar,
html.dark-mode .checkout-bar .cart-bar-count,
html.dark-mode #cart-item-count,
html.dark-mode #quickview-modal .qvc-dock-add {
    box-shadow: none !important;
    filter: none !important;
}
html.dark-mode .checkout-bar .cart-bar-count,
html.dark-mode .checkout-bar #cart-item-count,
html.dark-mode #cart-item-count.cart-bar-count {
    background: #fff !important;
    color: var(--theme-color, #00c5b4) !important;
    -webkit-text-fill-color: var(--theme-color, #00c5b4) !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}
html.dark-mode #card-summary .cart-left .cart-price-badge-row .qty-badge-inline.price-badge-inline,
html.dark-mode #card-summary .qty-badge-inline.price-badge-inline,
html.dark-mode .qty-badge-inline.price-badge-inline {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: #fff !important;
}
html.dark-mode #card-summary .cart-badge-cluster .distance-pricing-badge {
    color: #fff !important;
}
html.dark-mode .delivery-details-card,
html.dark-mode .order-notes-card,
html.dark-mode .coupon-card,
html.dark-mode .order-summary-card,
html.dark-mode .checkout-fields .delivery-details-card,
html.dark-mode .checkout-fields .order-notes-card {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
}
html.dark-mode .shared-trip-discount-row,
html.dark-mode .shared-trip-discount-row span,
html.dark-mode .order-summary-shared-trip-discount {
    color: var(--dm-text, #e8edf5) !important;
}
html.dark-mode a.coupon-apply-btn,
html.dark-mode .coupon-apply-btn.apply-coupon,
html.dark-mode #coupon-content .coupon-apply-btn {
    background: var(--theme-color, #00c5b4) !important;
    color: #fff !important;
    border-color: var(--theme-color, #00c5b4) !important;
}
html.dark-mode a.coupon-apply-btn:hover,
html.dark-mode .coupon-apply-btn.apply-coupon:hover {
    filter: brightness(1.06);
    color: #fff !important;
}
html.dark-mode .delivery-title,
html.dark-mode .order-notes-title,
html.dark-mode .delivery-input-label,
html.dark-mode .delivery-input-help {
    color: var(--dm-text) !important;
}
html.dark-mode .delivery-input,
html.dark-mode .delivery-select,
html.dark-mode .order-notes-textarea,
html.dark-mode .order-notes-textarea:focus {
    background: var(--dm-input-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* ==================== Web push banner (top of page) ==================== */
html.dark-mode #webpushPermissionPopup .wp-banner-card {
    background: rgba(26, 33, 48, 0.92) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--dm-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
html.dark-mode #webpushPermissionPopup .wp-stack-1,
html.dark-mode #webpushPermissionPopup .wp-stack-2 {
    background: rgba(26, 33, 48, 0.55) !important;
}
html.dark-mode #webpushPermissionPopup .wp-title-text {
    color: #ffffff !important;
}
html.dark-mode #webpushPermissionPopup .wp-body-text {
    color: var(--dm-muted) !important;
}
html.dark-mode #webpushPermissionPopup .wp-btn-later {
    background: var(--dm-surface-2) !important;
    color: #ffffff !important;
}
html.dark-mode #locationPermissionDeniedPopup .geo-popup-card {
    background: var(--dm-surface) !important;
}
html.dark-mode #locationPermissionDeniedPopup .geo-popup-close-btn {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
}
html.dark-mode #locationPermissionDeniedPopup .geo-btn-secondary {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
}

/* ==================== Location / address popup ==================== */
html.dark-mode .geo-popup-card,
html.dark-mode #locationPermissionPopup .geo-popup-card {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #locationPermissionPopup .geo-map-header,
html.dark-mode #locationPermissionPopup .geo-map-header.has-map {
    background: var(--dm-surface) !important;
}
html.dark-mode #locationPermissionPopup .geo-mini-map {
    background: var(--dm-surface-2) !important;
}
html.dark-mode .geo-pin-wrapper,
html.dark-mode .geo-update-location-btn {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}
html.dark-mode .geo-title,
html.dark-mode .geo-pin-wrapper,
html.dark-mode #locationPermissionPopup .geo-addresses-header .geo-title,
html.dark-mode #locationPermissionPopup .geo-current-address-line,
html.dark-mode #current-address-name {
    color: var(--dm-text) !important;
}
html.dark-mode .geo-desc {
    color: var(--dm-muted) !important;
}
html.dark-mode #locationPermissionPopup .geo-addresses-header {
    border-top-color: var(--dm-border) !important;
}
html.dark-mode #locationPermissionPopup .geo-add-address-link {
    color: #fff !important;
}
html.dark-mode #locationPermissionPopup .popup-address-item,
html.dark-mode #locationPermissionPopup .popup-address-text {
    color: var(--dm-text) !important;
}
html.dark-mode #locationPermissionPopup .popup-address-item.is-selected .popup-address-text {
    color: #fff !important;
}
html.dark-mode #locationPermissionPopup .popup-address-icon,
html.dark-mode #locationPermissionPopup .popup-address-icon svg {
    color: #fff !important;
    stroke: #fff !important;
}
html.dark-mode #locationPermissionPopup .geo-popup-close-btn,
html.dark-mode #locationPermissionPopup .geo-popup-close-btn:hover,
html.dark-mode #locationPermissionPopup .geo-popup-close-btn svg {
    color: #fff !important;
    stroke: #fff !important;
    background: transparent !important;
}
html.dark-mode #locationPermissionPopup .geo-actions {
    border-top-color: var(--dm-border) !important;
}
html.dark-mode #popupAddressActionsSheet .geo-action-sheet {
    background: var(--dm-surface) !important;
}
html.dark-mode #popupAddressActionsSheet .geo-action-sheet-item {
    background: var(--dm-surface) !important;
    color: #fff !important;
}
html.dark-mode #popupAddressActionsSheet .geo-action-sheet-item + .geo-action-sheet-item {
    border-top-color: var(--dm-border) !important;
}
html.dark-mode #popupAddressActionsSheet .geo-action-sheet-item.geo-action-danger {
    color: #f87171 !important;
}
html.dark-mode #popupAddressActionsSheet .geo-action-sheet-item.geo-action-cancel {
    border-top-color: var(--dm-bg) !important;
    background: var(--dm-bg) !important;
    color: #fff !important;
}
html.dark-mode #popupAddressActionsSheet .geo-action-sheet-item:active {
    background: var(--dm-surface-2) !important;
}

/* ==================== Checkout map + add-address (beats inline #fff) ==================== */
html.dark-mode #checkoutMapModal .checkout-map-modal-card,
html.dark-mode #checkoutMapModal.checkout-map-modal .checkout-map-modal-card {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #checkoutMapModal .checkout-map-modal-header,
html.dark-mode #checkoutMapModal #address-details-view .checkout-map-modal-header {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #checkoutMapModal .checkout-map-modal-header h3 {
    color: #fff !important;
}
html.dark-mode #checkoutMapModal .checkout-map-modal-header button {
    background: none !important;
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}
html.dark-mode #checkoutMapModal .checkout-map-modal-header button svg,
html.dark-mode #checkoutMapModal .checkout-map-modal-header button svg path {
    stroke: #fff !important;
    fill: none !important;
}
html.dark-mode #checkoutMapModal .checkout-map-search-inner {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode #checkoutMapModal .checkout-map-search-icon,
html.dark-mode #checkoutMapModal .checkout-map-search-icon path {
    color: #fff !important;
    stroke: #fff !important;
}
html.dark-mode #checkoutMapModal #checkout-map-search-input {
    color: #fff !important;
    background: transparent !important;
}
html.dark-mode #checkoutMapModal .checkout-map-search-results,
html.dark-mode #checkoutMapModal #checkout-map-search-clear,
html.dark-mode #checkout-map-current-btn {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #checkoutMapModal .checkout-map-search-results .result-item {
    color: #fff !important;
    background: transparent !important;
}
html.dark-mode #checkoutMapModal .checkout-map-search-results .result-item + .result-item {
    border-top-color: var(--dm-border, rgba(255,255,255,.08)) !important;
}
html.dark-mode #checkoutMapModal .checkout-map-search-results .result-hint {
    color: var(--dm-muted, #94a3b8) !important;
}
html.dark-mode #checkoutMapModal #address-details-view #other-type-editor.other-type-editor {
    background: color-mix(in srgb, var(--theme-color, #00c5b4) 18%, var(--dm-surface, #33333d)) !important;
    border-color: var(--theme-color, #00c5b4) !important;
}
html.dark-mode #checkoutMapModal #address-details-view .other-type-editor-field #other-type-input {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
}
html.dark-mode #checkoutMapModal #address-details-view .other-type-editor-field #other-type-input::placeholder,
html.dark-mode #checkoutMapModal #address-details-view .other-type-editor-field #other-type-input::-webkit-input-placeholder {
    color: var(--dm-muted, #94a3b8) !important;
    opacity: 1 !important;
}
html.dark-mode #checkoutMapModal #address-details-view .other-type-editor-pencil {
    color: var(--dm-muted, #94a3b8) !important;
}
html.dark-mode #checkoutMapModal #address-details-view .other-type-editor-btn--cancel {
    background: #3f3f46 !important;
    color: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view .other-type-editor-btn svg {
    stroke: #fff !important;
    color: #fff !important;
}
html.dark-mode #checkoutMapModal #map-view.checkout-map-view,
html.dark-mode #checkoutMapModal.checkout-map-modal #map-view.checkout-map-view {
    background: #33333d !important;
}
html.dark-mode #checkoutMapModal .checkout-map-location-panel {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
}
html.dark-mode #checkoutMapModal .checkout-map-location-title,
html.dark-mode #checkout-map-location-title {
    color: #fff !important;
}
html.dark-mode #checkoutMapModal .checkout-map-location-detail {
    color: var(--dm-muted) !important;
}
html.dark-mode #checkoutMapModal #address-details-view {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #checkoutMapModal #address-details-view input,
html.dark-mode #checkoutMapModal #address-details-view textarea,
html.dark-mode #checkoutMapModal #address-details-view select,
html.dark-mode #checkoutMapModal #address-details-view label,
html.dark-mode #checkoutMapModal #address-details-view p,
html.dark-mode #checkoutMapModal #address-details-view h3,
html.dark-mode #checkoutMapModal #address-details-view h4,
html.dark-mode #checkoutMapModal #address-details-view span {
    color: var(--dm-text);
}
html.dark-mode #checkoutMapModal #address-details-view input,
html.dark-mode #checkoutMapModal #address-details-view textarea,
html.dark-mode #checkoutMapModal #address-details-view select {
    background: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view #address-description::placeholder,
html.dark-mode #checkoutMapModal #address-details-view textarea::placeholder,
html.dark-mode #checkoutMapModal #address-details-view #address-description::-webkit-input-placeholder {
    color: var(--dm-muted, #94a3b8) !important;
    opacity: 1 !important;
}
html.dark-mode #checkoutMapModal #address-details-view .address-type-tag {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-photo-slot:not(.has-photo) .checkout-photo-slot-inner,
html.dark-mode #checkoutMapModal #address-details-view .checkout-photo-slot-circle {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .geo-btn-secondary {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
}

html.dark-mode #store-bottom-nav.store-bottom-nav-fixed {
    background: var(--dm-bg) !important;
    border-top-color: var(--dm-border) !important;
}
html.dark-mode .store-bottom-nav-fixed .sfnav-item {
    color: var(--dm-muted) !important;
}
html.dark-mode .store-bottom-nav-fixed .sfnav-item.is-active {
    color: #ffffff !important;
}

html.dark-mode .notifications-popup,
html.dark-mode .notifications-popup-content,
html.dark-mode .notifications-popup-header,
html.dark-mode .notifications-list {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}
html.dark-mode .notification-card {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}
html.dark-mode .delegate-rating-inline-input-inner,
html.dark-mode .delegate-rating-inline-comment {
    background: var(--dm-surface) !important;
    background-color: var(--dm-surface) !important;
}

html.dark-mode .product-container,
html.dark-mode .tab-content,
html.dark-mode #product_view,
html.dark-mode .zoro-offers-section {
    background: transparent !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode .zoro-img-wrapper,
html.dark-mode .ninja-image-wrapper {
    background-color: #26262e !important;
    background-image: url('../img/haatly-placeholder-dark.png') !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode img[src*="haatly-placeholder.jpg"] {
    opacity: 0;
}

/* Category bar: sticky rule forces #fff on left/right padding */
html.dark-mode .is-storefront-home .category-sticky-wrap,
html.dark-mode .is-storefront-home .category-sticky-wrap.is-sticky,
html.dark-mode .is-storefront-home .banner-card.is-sticky {
    background: var(--dm-bg) !important;
}
html.dark-mode .is-storefront-home .category-sticky-wrap .pro_category,
html.dark-mode .is-storefront-home .category-sticky-wrap .category-tab,
html.dark-mode .is-storefront-home .category-sticky-wrap ul.tabs,
html.dark-mode .is-storefront-home .category-sticky-wrap.is-sticky .pro_category,
html.dark-mode .is-storefront-home .category-sticky-wrap.is-sticky ul.tabs {
    background: var(--dm-bg) !important;
    border-bottom-color: var(--dm-border) !important;
}
html.dark-mode .is-storefront-home .category-sticky-wrap.inline-search-active .form-input {
    background: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode .is-storefront-home .category-sticky-wrap.inline-search-active .search-btn svg {
    stroke: #fff !important;
}

/* ==================== Shared trip modal ==================== */
html.dark-mode body.shared-trip-modal-open,
html.dark-mode #sharedTripModal.shared-trip-modal,
html.dark-mode #sharedTripModal .shared-trip-modal-card,
html.dark-mode #sharedTripModal .shared-trip-modal-top,
html.dark-mode #sharedTripModal .shared-trip-modal-scroll,
html.dark-mode #sharedTripModal .shared-trip-modal-body,
html.dark-mode #sharedTripModal .shared-trip-modal-footer {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
}
html.dark-mode #sharedTripModal .shared-trip-modal-card {
    background: var(--dm-bg) !important;
}
html.dark-mode #sharedTripModal .shared-trip-modal-heading,
html.dark-mode #sharedTripModal #sharedTripModalTitle,
html.dark-mode #sharedTripModal .shared-trip-step-text strong {
    color: #fff !important;
}
html.dark-mode #sharedTripModal .shared-trip-lead,
html.dark-mode #sharedTripModal .shared-trip-step-text span,
html.dark-mode #sharedTripModal .shared-trip-duration-label {
    color: var(--dm-muted) !important;
}
html.dark-mode #sharedTripModal .shared-trip-modal-close {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #sharedTripModal .shared-trip-step {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo {
    background: var(--dm-bg, #26262e) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active::before,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active::after,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-block,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-enter,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-share {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active {
    color: var(--theme-color, #2bb3c0) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chip {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chip.is-active {
    background: #fff !important;
    color: #18181b !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-input,
html.dark-mode #sharedTripModal .shared-trip-invite-code {
    background: var(--dm-input-bg) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #sharedTripModal .shared-trip-percent-row {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #sharedTripModal .shared-trip-badge:not(.is-on) {
    background: var(--dm-surface-2) !important;
    color: var(--dm-muted) !important;
}
html.dark-mode #sharedTripModal .shared-trip-step-icon {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
}

/* ==================== Quickview (QVC) — zinc content; top/waves stay theme-color like day ==================== */
html.dark-mode #quickview-modal .modal-inner > .body,
html.dark-mode #quickview-modal .body,
html.dark-mode #quickview-modal .modal-body,
html.dark-mode #quickview-modal .qvc-root,
html.dark-mode #quickview-modal .modal-inner .modal-body.qvc-root {
    background: var(--dm-bg, #26262e) !important;
    color: var(--dm-text) !important;
}
html.dark-mode body.sf-qvc-style #quickview-modal.modal,
html.dark-mode body.sf-qvc-style #quickview-modal.modal.qv-loading,
html.dark-mode body.sf-qvc-style #quickview-modal .modal-wrapper,
html.dark-mode body.sf-qvc-style #quickview-modal .modal-inner,
html.dark-mode body.sf-qvc-style #quickview-modal.qv-loading .modal-inner {
    background: var(--dm-bg, #26262e) !important;
}
html.dark-mode #quickview-modal .qvc-root,
html.dark-mode #quickview-modal .modal-inner .modal-body.qvc-root {
    box-shadow:
        0 -100vh 0 100vh var(--dm-bg, #26262e),
        0 100vh 0 100vh var(--dm-bg, #26262e) !important;
}
html.dark-mode #quickview-modal .qvc-hero,
html.dark-mode #quickview-modal .qvc-hero-awning,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-hero-awning {
    background: var(--theme-color, #00c5b4) !important;
}
html.dark-mode #quickview-modal .qvc-card,
html.dark-mode #quickview-modal .qvc-card-wrap,
html.dark-mode #quickview-modal .qvc-offers-strip,
html.dark-mode #quickview-modal .qvc-tabs-bar,
html.dark-mode #quickview-modal .qvc-tabs,
html.dark-mode #quickview-modal .qvc-tabs-menu-btn,
html.dark-mode #quickview-modal .qvc-dock,
html.dark-mode #quickview-modal .qvc-menu {
    background: var(--dm-bg, #26262e) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
/* الهامش فوق شريط التبويبات كان يكشف لون القائمة الأفتح — اجعله جزءاً من الشريط نفسه */
html.dark-mode #quickview-modal .qvc-tabs-bar {
    margin-top: 0 !important;
    padding-top: 16px !important;
    border-bottom-color: var(--dm-border, rgba(255, 255, 255, 0.08)) !important;
}
html.dark-mode #quickview-modal .qvc-search-bar,
html.dark-mode #quickview-modal .qvc-offers,
html.dark-mode #quickview-modal .qvc-item-sheet,
html.dark-mode #quickview-modal .qvc-item-scroll,
html.dark-mode #quickview-modal .qvc-item-info,
html.dark-mode #quickview-modal .qvc-cats-sheet-panel {
    background: var(--dm-bg, #26262e) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .qvc-title,
html.dark-mode #quickview-modal .qvc-topbar-name,
html.dark-mode #quickview-modal .qvc-menu-heading,
html.dark-mode #quickview-modal .qvc-item-name,
html.dark-mode #quickview-modal .qvc-item-note-title,
html.dark-mode #quickview-modal .qvc-tab.active,
html.dark-mode #quickview-modal .qvc-custom-group-head h4,
html.dark-mode #quickview-modal .qvc-rating-chip,
html.dark-mode #quickview-modal .qvc-rating-chip > span:not(.qvc-rating-star):not(.qvc-rating-arrow),
html.dark-mode #quickview-modal .qvc-stat-value,
html.dark-mode #quickview-modal .qvc-cats-sheet-title,
html.dark-mode #quickview-modal .qvc-cats-sheet-head {
    color: var(--dm-text, #fff) !important;
}
html.dark-mode #quickview-modal .qvc-menu-name,
html.dark-mode #quickview-modal .qvc-menu-price,
html.dark-mode #quickview-modal .qvc-menu-price .sar-symbol,
html.dark-mode #quickview-modal .qvc-menu-price .sar-amount,
html.dark-mode #quickview-modal .qvc-menu-price .sar-money {
    color: #a0a5b8 !important;
}
html.dark-mode #quickview-modal .qvc-rating-star,
html.dark-mode #quickview-modal .qvc-rating-star svg {
    color: var(--theme-color, #00c5b4) !important;
    fill: currentColor !important;
}
html.dark-mode #quickview-modal .qvc-rating-star .qvc-rating-h path {
    stroke: #fff !important;
    fill: none !important;
}
html.dark-mode #quickview-modal .qvc-menu-desc,
html.dark-mode #quickview-modal .qvc-tab,
html.dark-mode #quickview-modal .qvc-stat-label,
html.dark-mode #quickview-modal .qvc-rating-arrow,
html.dark-mode #quickview-modal .qvc-sub-row,
html.dark-mode #quickview-modal .qvc-item-desc,
html.dark-mode #quickview-modal .qvc-item-note-counter,
html.dark-mode #quickview-modal .qvc-custom-group-head small {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .qvc-desc-section {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal .qvc-desc-section .qvc-section-title {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-desc-section .qvc-desc {
    color: var(--dm-muted, #94a3b8) !important;
}
html.dark-mode #quickview-modal .qvc-desc-section .qvc-read-more {
    color: #5eead4 !important;
}
html.dark-mode #quickview-modal .qvc-menu-heading {
    display: block !important;
    box-sizing: border-box !important;
    width: auto !important;
    background: var(--dm-surface, #33333d) !important;
    color: #fff !important;
    margin-block-start: 8px !important;
    margin-block-end: 10px !important;
    margin-inline-start: -4px !important;
    margin-inline-end: 4px !important;
    padding: 9px 16px !important;
    border-radius: 12px !important;
    text-align: right !important;
}
html.dark-mode #quickview-modal .qvc-menu-item + .qvc-menu-item {
    border-top: 1px dashed rgba(160, 165, 184, 0.22) !important;
}
html.dark-mode #quickview-modal .qvc-cats-sheet-item,
html.dark-mode #quickview-modal .qvc-cats-sheet-item:hover,
html.dark-mode #quickview-modal .qvc-cats-sheet-item:focus {
    background: transparent !important;
    color: #a0a5b8 !important;
    box-shadow: none !important;
}
html.dark-mode #quickview-modal .qvc-cats-sheet-name,
html.dark-mode #quickview-modal .qvc-cats-sheet-count {
    color: #a0a5b8 !important;
}
html.dark-mode #quickview-modal .qvc-cats-sheet-item.is-active {
    background: var(--dm-surface, #33333d) !important;
    border-radius: 12px !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-cats-sheet-item.is-active .qvc-cats-sheet-name,
html.dark-mode #quickview-modal .qvc-cats-sheet-item.is-active .qvc-cats-sheet-count {
    color: #fff !important;
    background: transparent !important;
}
html.dark-mode #quickview-modal .qvc-cats-sheet-close,
html.dark-mode #quickview-modal .qvc-cats-sheet-close:hover,
html.dark-mode #quickview-modal .qvc-cats-sheet-close:focus {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}
html.dark-mode #quickview-modal .qvc-cats-sheet-close svg,
html.dark-mode #quickview-modal .qvc-cats-sheet-close svg path {
    color: #fff !important;
    stroke: currentColor !important;
    fill: none !important;
}
html.dark-mode #quickview-modal .qvc-store-logo {
    background: var(--dm-bg) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .qvc-menu-img,
html.dark-mode #quickview-modal .qvc-menu-img-ph {
    background: var(--dm-bg) !important;
    border-color: var(--dm-border) !important;
}

/* شريط علوي + أزرار رجوع/بحث/مشاركة (تبقى بيضاء في الوضع الفاتح) */
html.dark-mode #quickview-modal .qvc-topbar {
    background-color: color-mix(in srgb, var(--dm-bg, #26262e) calc(var(--qvc-topbar-progress, 0) * 100%), transparent) !important;
    border-bottom-color: transparent !important;
}
html.dark-mode #quickview-modal .qvc-top-btn,
html.dark-mode #qv-chrome-actions .qv-chrome-btn {
    color: #fff !important;
    background: rgba(38, 38, 46, calc(0.78 * (1 - var(--qvc-topbar-progress, 0)))) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, calc(0.28 * (1 - var(--qvc-topbar-progress, 0)))) !important;
}
html.dark-mode #quickview-modal .qvc-top-btn svg,
html.dark-mode #qv-chrome-actions .qv-chrome-btn svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* تبويبات الأقسام + زر القائمة */
html.dark-mode #quickview-modal .qvc-tabs-menu-btn {
    color: #fff !important;
    background: var(--dm-bg, #26262e) !important;
}
html.dark-mode #quickview-modal .qvc-tabs-menu-btn svg,
html.dark-mode #quickview-modal .qvc-tabs-menu-btn svg path {
    color: #fff !important;
    stroke: #fff !important;
    background: transparent !important;
}
html.dark-mode #quickview-modal .qvc-tab {
    color: #a0a5b8 !important;
}
html.dark-mode #quickview-modal .qvc-tab.active {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-tabs-indicator {
    background: #fff !important;
}

/* بحث داخل المنيو */
html.dark-mode #quickview-modal .qvc-search-input {
    background: var(--dm-input-bg) !important;
    color: #fff !important;
    border-color: var(--dm-border-strong) !important;
}

html.dark-mode #quickview-modal .qvc-dock {
    background: var(--dm-bg, #26262e) !important;
}
html.dark-mode #quickview-modal .qvc-dock-summary {
    background: var(--dm-surface, #33333d) !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-dock-total {
    color: #fff !important;
}

/* مربع +/− فوق صورة الصنف (الخلفية البيضاء كانت من .qvc-menu-ctrl) */
html.dark-mode #quickview-modal .qvc-menu-ctrl,
html.dark-mode #quickview-modal .qvc-menu-item.has-qty .qvc-menu-ctrl,
html.dark-mode #quickview-modal .qvc-menu-item.no-img .qvc-menu-ctrl {
    background: var(--dm-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode #quickview-modal .qvc-menu-ctrl button,
html.dark-mode #quickview-modal .qvc-menu-ctrl .qvc-menu-inc,
html.dark-mode #quickview-modal .qvc-menu-ctrl .qvc-menu-dec {
    background: transparent !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-menu-ctrl button:hover,
html.dark-mode #quickview-modal .qvc-menu-ctrl button:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode #quickview-modal .qvc-menu-ctrl button::before,
html.dark-mode #quickview-modal .qvc-menu-ctrl .qvc-menu-inc::after {
    background: #fff !important;
}
html.dark-mode #quickview-modal .qvc-menu-ctrl .qvc-menu-qty {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-menu-item.is-ended .qvc-menu-inc {
    background: rgba(148, 163, 184, 0.28) !important;
}
html.dark-mode #quickview-modal .qvc-item-note,
html.dark-mode #quickview-modal .qvc-item-customizations {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal .qvc-item-note-box {
    background: var(--dm-bg) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .qvc-item-note-input {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    caret-color: #fff !important;
    border-color: transparent !important;
}
html.dark-mode #quickview-modal .qvc-custom-group,
html.dark-mode #quickview-modal .qvc-custom-group.is-required:not(.is-complete),
html.dark-mode #quickview-modal .qvc-custom-group.is-required.is-complete,
html.dark-mode #quickview-modal .qvc-custom-group-head,
html.dark-mode #quickview-modal .qvc-custom-option {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .qvc-custom-required {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
}
html.dark-mode body.sf-qvc-style #quickview-modal .qvc-item-bar {
    background: var(--dm-surface) !important;
    border-top-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal .qvc-item-stepper,
html.dark-mode #quickview-modal .qvc-item-stepper button {
    background: var(--dm-bg) !important;
    color: #fff !important;
    box-shadow: none !important;
}
html.dark-mode #quickview-modal .qvc-item-stepper button::before,
html.dark-mode #quickview-modal .qvc-item-stepper #qvc-item-inc::after {
    background: #fff !important;
}
html.dark-mode #quickview-modal .qvc-item-qty,
html.dark-mode #quickview-modal .qvc-item-stepper .qvc-item-qty {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-custom-option-name,
html.dark-mode #quickview-modal .qvc-custom-option {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-custom-option-price {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .qvc-custom-option-img {
    background: var(--dm-surface) !important;
}
html.dark-mode #quickview-modal .qvc-custom-option-check {
    background-color: var(--dm-bg) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
}
html.dark-mode #quickview-modal .qvc-custom-option:has(input[type="radio"]) .qvc-custom-option-check::after {
    background: #fff !important;
}
html.dark-mode #quickview-modal .qvc-custom-option:has(input[type="radio"]:checked) .qvc-custom-option-check,
html.dark-mode #quickview-modal .qvc-custom-option:has(input[type="checkbox"]:checked) .qvc-custom-option-check {
    border-color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-custom-option:has(input[type="checkbox"]:checked) .qvc-custom-option-check {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326262e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5L19 7'/%3E%3C/svg%3E") !important;
}
html.dark-mode #quickview-modal .qvc-notes-card .order-notes-textarea-box,
html.dark-mode #quickview-modal .qvc-footer .order-notes-textarea-box,
html.dark-mode #quickview-modal .order-notes-textarea-box {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* حول صندوق الملاحظات = نفس لون بقية الكرت (لا تلوّن الغلاف) */
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .body,
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .modal-inner {
    background: var(--dm-bg, #26262e) !important;
    background-color: var(--dm-bg, #26262e) !important;
}
html.dark-mode #quickview-modal .order-notes-card1,
html.dark-mode #quickview-modal .order-notes-input-wrapper,
html.dark-mode #quickview-modal .order-notes-textarea-wrapper,
html.dark-mode #quickview-modal .modal-footer {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dm-text) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html.dark-mode #quickview-modal .order-notes-input,
html.dark-mode #quickview-modal .order-notes-edit-input,
html.dark-mode #quickview-modal .order-notes-textarea,
html.dark-mode #quickview-modal .qvc-notes-card .order-notes-input,
html.dark-mode #quickview-modal .qvc-notes-card .order-notes-edit-input {
    background: transparent !important;
    color: #fff !important;
    caret-color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.28) !important;
}
html.dark-mode #quickview-modal .order-notes-input::placeholder,
html.dark-mode #quickview-modal .order-notes-textarea::placeholder,
html.dark-mode #quickview-modal .order-notes-next-text,
html.dark-mode #quickview-modal .qvc-notes-card .order-notes-input::placeholder,
html.dark-mode #quickview-modal .qvc-notes-card .order-notes-next-text {
    color: rgba(255, 255, 255, 0.62) !important;
    opacity: 1 !important;
}
html.dark-mode #quickview-modal .order-notes-title1,
html.dark-mode #quickview-modal .order-notes-counter,
html.dark-mode #quickview-modal .order-notes-counter1,
html.dark-mode #quickview-modal .order-notes-item-text,
html.dark-mode #quickview-modal .order-notes-item-qty {
    color: #fff !important;
    background: transparent !important;
}
html.dark-mode #quickview-modal .order-notes-item-price,
html.dark-mode #quickview-modal .order-notes-help1,
html.dark-mode #quickview-modal .order-notes-approx-total,
html.dark-mode #quickview-modal .order-notes-approx-total-note {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .order-notes-bullet,
html.dark-mode #quickview-modal .order-notes-next-hint .order-notes-bullet,
html.dark-mode #quickview-modal .qvc-notes-card .order-notes-bullet {
    background: #fff !important;
}
html.dark-mode #quickview-modal .order-notes-item .order-notes-item-text {
    border-bottom-color: rgba(255, 255, 255, 0.22) !important;
}
html.dark-mode #quickview-modal .order-notes-suggest-item {
    color: #fff !important;
}
html.dark-mode #quickview-modal .order-notes-remove,
html.dark-mode #quickview-modal .qvc-notes-card .order-notes-remove {
    color: var(--theme-color, #00c5b4) !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}
/* القائمة الجديدة لا تعرض فوتر الصفحة؛ عرض المنتج العادي يبقيه تحت الملاحظات */
#quickview-modal:has(.qvc-root) .site-footer {
    display: none !important;
}
#quickview-modal:not(:has(.qvc-root)) .site-footer {
    display: flex !important;
    width: 100%;
    min-height: 155px;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
#quickview-modal:not(:has(.qvc-root)) .site-footer .footer-inner,
#quickview-modal:not(:has(.qvc-root)) .site-footer .footer-branding {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .site-footer,
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .site-footer .footer-inner,
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .site-footer .footer-branding,
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .modal-body > .row.no-gutters > .col-md-6,
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .qv-right-content,
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .qv-description,
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .qv-description-content,
html.dark-mode #quickview-modal:not(:has(.qvc-root)) .section-title {
    background: var(--dm-bg) !important;
    background-color: var(--dm-bg) !important;
}
html.dark-mode #quickview-modal .section-title h2,
html.dark-mode #quickview-modal .variation_price1,
html.dark-mode #quickview-modal .variation_price1 ins,
html.dark-mode #quickview-modal .qv-right-content .price ins,
html.dark-mode #quickview-modal .product-label,
html.dark-mode #quickview-modal .qv-block,
html.dark-mode #quickview-modal .stock-badge,
html.dark-mode #quickview-modal .stock-badge label,
html.dark-mode #quickview-modal .id-wrp,
html.dark-mode #quickview-modal .id-wrp label,
html.dark-mode #quickview-modal .id-wrp span {
    background: transparent !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal .qv-right-content .section-title,
html.dark-mode #quickview-modal .section-title {
    color: #fff !important;
}
html.dark-mode #quickview-modal .rating-ticker,
html.dark-mode #quickview-modal .ticker-item,
html.dark-mode #quickview-modal .ticker-item .text {
    color: #f4f4f5 !important;
}
html.dark-mode #quickview-modal .ticker-item .stars {
    color: #FFC107 !important;
}

/* عرض المنتج العادي (معرض + تواصل + ملاحظات) — يتغلّب على ستايل الثيم الأبيض */
html.dark-mode #quickview-modal .qv-slider-wrp,
html.dark-mode #quickview-modal .qv-main-slider,
html.dark-mode #quickview-modal .qv-main-slider .slick-list,
html.dark-mode #quickview-modal .qv-itm,
html.dark-mode #quickview-modal .qv-itm-img,
html.dark-mode #quickview-modal .qv-right-content,
html.dark-mode #quickview-modal .row.no-gutters,
html.dark-mode #quickview-modal .col-md-6,
html.dark-mode #quickview-modal .col-12 {
    background: var(--dm-bg) !important;
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal .qv-thumb-slider::-webkit-scrollbar-track {
    background: var(--dm-surface) !important;
}
html.dark-mode #quickview-modal .scroll-text {
    color: #fff !important;
    background: rgba(38, 38, 46, 0.88) !important;
}
html.dark-mode #quickview-modal .scroll-arrow {
    color: #fff !important;
}
html.dark-mode #quickview-modal .main-contact-btn {
    background-color: var(--dm-surface-2) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .main-contact-btn:hover {
    background-color: var(--dm-surface) !important;
}
html.dark-mode #quickview-modal .contact-popup-box,
html.dark-mode .contact-popup-box {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal .popup-title,
html.dark-mode #quickview-modal .contact-popup-box p,
html.dark-mode .popup-title,
html.dark-mode .contact-popup-box p {
    color: #fff !important;
}
html.dark-mode #quickview-modal .close-popup-btn,
html.dark-mode .close-popup-btn {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .qv-description,
html.dark-mode #quickview-modal .qv-description p {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .read-more-trigger {
    color: #fff !important;
}
html.dark-mode #quickview-modal .custom-fields-container {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal .custom-field-item {
    border-bottom-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .custom-field-label,
html.dark-mode #quickview-modal .custom-field-value {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .form-control,
html.dark-mode #quickview-modal .custom-select,
html.dark-mode #quickview-modal .variant-selection,
html.dark-mode #quickview-modal .qty-spinner button,
html.dark-mode #quickview-modal .qty-spinner input {
    background: var(--dm-input-bg) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .form-control-label,
html.dark-mode #quickview-modal .select-wrp label,
html.dark-mode #quickview-modal .stock-badge span,
html.dark-mode #quickview-modal .qv-right-content .qty-wrp label {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .modal-close,
html.dark-mode #quickview-modal .modal-close.close-button {
    color: #fff !important;
}
html.dark-mode #quickview-modal .order-notes-suggest-category {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal .order-notes-suggest-name,
html.dark-mode #quickview-modal .order-notes-suggest-price,
html.dark-mode #quickview-modal .order-notes-suggest-description {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .qv-suggest-overlay-layer,
html.dark-mode #quickview-modal.qv-suggest-overlay .qv-suggest-overlay-layer {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal .qv-suggest-qty {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qv-suggest-action-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal .qv-suggest-action-btn.remove {
    color: #fca5a5 !important;
    background: rgba(248, 113, 113, 0.18) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}
html.dark-mode .quickview-loading-overlay {
    background: rgba(38, 38, 46, 0.96) !important;
}
html.dark-mode .quickview-loading-overlay::after {
    border-color: rgba(255, 255, 255, 0.18) !important;
    border-top-color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-item-price-row {
    border-bottom-color: var(--dm-surface) !important;
}
html.dark-mode #quickview-modal .qvc-item-hero {
    background: var(--dm-surface) !important;
}

/* ---------- شاشة التحميل (الهيكل العظمي) ---------- */
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc {
    background: var(--dm-bg, #26262e) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 -100vh 0 100vh var(--dm-bg, #26262e) !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel .skel-notes-box {
    background: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
}
html.dark-mode body.sf-qvc-style #quickview-modal.qv-loading .modal-wrapper,
html.dark-mode body.sf-qvc-style #quickview-modal.qv-loading .modal-inner {
    background: var(--dm-bg, #26262e) !important;
}
html.dark-mode #quickview-modal.qv-loading .body,
html.dark-mode #quickview-modal.qv-loading .qv-skel:not(.qv-skel-qvc) {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel:not(.qv-skel-qvc) {
    min-height: 100%;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel .skel:not(.skel-hero):not(.skel-notes-box) {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.10) 37%,
        rgba(255, 255, 255, 0.04) 63%
    ) !important;
    background-size: 200% 100% !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-hero.skel {
    background: var(--theme-color, #00c5b4) !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-hero.is-ready {
    background-color: var(--dm-surface) !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-card,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-tabs-bar,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-tabs-menu,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-tabs {
    background: var(--dm-bg, #26262e) !important;
    border-color: var(--dm-border) !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-offers,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-rows {
    background: var(--dm-bg, #26262e) !important;
    border-color: var(--dm-border) !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-tabs-bar {
    margin-top: 0 !important;
    padding-top: 16px !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-store-logo.is-ready {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    animation: none !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-top-btn {
    color: #fff !important;
    background: rgba(38, 38, 46, 0.82) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-top-btn svg {
    color: #fff !important;
    stroke: #fff !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-tabs-menu svg,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-tabs-menu svg path {
    color: #fff !important;
    stroke: #fff !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-heading {
    background: var(--dm-surface, #33333d) !important;
    color: #fff !important;
    width: auto !important;
    margin-block-start: 8px !important;
    margin-block-end: 10px !important;
    margin-inline-start: -4px !important;
    margin-inline-end: 4px !important;
    border-radius: 12px !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-item + .skel-qvc-item,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .skel-qvc-item-media {
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .qv-shell-title,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .qv-shell-rating,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .qv-shell-tab.is-active {
    color: #fff !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .qv-shell-meta,
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .qv-shell-sub-row {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .qv-shell-tab {
    color: #a0a5b8 !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel.qv-skel-qvc .qv-shell-tabs-indicator {
    background: #fff !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel-qvc-dock {
    background: var(--dm-bg, #26262e) !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-skel-qvc-summary {
    background: var(--dm-surface, #33333d) !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal.qv-loading .qv-shell-dock-total {
    color: #fff !important;
}

/* ==================== إعلان التثبيت (Ad article) ==================== */
html.dark-mode #quickview-modal.ad-mode {
    background: rgba(15, 15, 18, 0.72) !important;
}
html.dark-mode #quickview-modal.ad-mode .modal-inner,
html.dark-mode #quickview-modal.ad-mode .body,
html.dark-mode #quickview-modal .ad-article-container,
html.dark-mode #quickview-modal .ad-article-content {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}
html.dark-mode #quickview-modal .ad-article-header {
    background: color-mix(in srgb, var(--dm-bg) 90%, transparent) !important;
    border-bottom-color: var(--dm-border) !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal .ad-header-title {
    color: #fff !important;
}
html.dark-mode #quickview-modal .ad-card {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
    border: 1px solid var(--dm-border);
}
html.dark-mode #quickview-modal .ad-main-title {
    color: #fff !important;
}
html.dark-mode #quickview-modal .ad-text-body,
html.dark-mode #quickview-modal .ad-meta-info,
html.dark-mode #quickview-modal .ad-act-btn {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .ad-text-body {
    color: #e4e4e7 !important;
}
html.dark-mode #quickview-modal .ad-text-body.collapsed::after {
    background: linear-gradient(to bottom, rgba(51, 51, 61, 0), var(--dm-surface)) !important;
}
html.dark-mode #quickview-modal .ad-actions-row {
    border-bottom-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .ad-bookmark-btn {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
}
html.dark-mode #quickview-modal .ad-text-body .copy-inline {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* ==================== توصيل / استلام شخصي ==================== */
html.dark-mode .sf-fulfillment,
html.dark-mode #quickview-modal .sf-fulfillment {
    background: color-mix(in srgb, var(--theme-color, #2bb3c0) 16%, var(--dm-bg)) !important;
    color: var(--dm-text) !important;
}
html.dark-mode .sf-fulfillment__label,
html.dark-mode #quickview-modal .sf-fulfillment__label {
    color: var(--dm-muted) !important;
    background: transparent !important;
}
html.dark-mode .sf-fulfillment__radio:checked + .sf-fulfillment__label,
html.dark-mode #quickview-modal .sf-fulfillment__radio:checked + .sf-fulfillment__label {
    color: var(--theme-color, #2bb3c0) !important;
    background: var(--dm-surface) !important;
}
html.dark-mode .sf-fulfillment__radio:checked + .sf-fulfillment__label::before,
html.dark-mode .sf-fulfillment__radio:checked + .sf-fulfillment__label::after,
html.dark-mode #quickview-modal .sf-fulfillment__radio:checked + .sf-fulfillment__label::before,
html.dark-mode #quickview-modal .sf-fulfillment__radio:checked + .sf-fulfillment__label::after {
    background: var(--dm-surface) !important;
}
html.dark-mode .sf-fulfillment__pane,
html.dark-mode .sf-fulfillment__facts,
html.dark-mode #quickview-modal .sf-fulfillment__pane,
html.dark-mode #quickview-modal .sf-fulfillment__facts {
    background: var(--dm-surface) !important;
    color: #fff !important;
}
html.dark-mode .sf-fulfillment__fact-value,
html.dark-mode #quickview-modal .sf-fulfillment__fact-value {
    color: #fff !important;
}
html.dark-mode .sf-fulfillment__fact-label,
html.dark-mode #quickview-modal .sf-fulfillment__fact-label {
    color: var(--dm-muted) !important;
}
html.dark-mode .sf-fulfillment__fact + .sf-fulfillment__fact::before,
html.dark-mode #quickview-modal .sf-fulfillment__fact + .sf-fulfillment__fact::before {
    background: var(--dm-border) !important;
}
html.dark-mode .sf-fulfillment__hint {
    color: var(--dm-muted) !important;
}

/* ==================== شريط الملخص + ورقة الأصناف ==================== */
html.dark-mode #quickview-modal .qvc-dock-summary,
html.dark-mode #quickview-modal .qvc-dock-summary-copy,
html.dark-mode #quickview-modal .qvc-dock-summary-copy span,
html.dark-mode #quickview-modal #qvc-dock-summary-total,
html.dark-mode #quickview-modal .qvc-dock-total {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-dock-summary-copy small {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal #qvc-dock-summary-total {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-order-sheet-panel,
html.dark-mode #quickview-modal .qvc-order-sheet-list,
html.dark-mode #quickview-modal .qvc-order-sheet-head,
html.dark-mode #quickview-modal .qvc-order-sheet-foot {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .qvc-order-sheet-head h3,
html.dark-mode #quickview-modal .qvc-order-sheet-total strong,
html.dark-mode #quickview-modal #qvc-order-sheet-total {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-order-sheet-clear,
html.dark-mode #quickview-modal .qvc-order-sheet-empty,
html.dark-mode #quickview-modal .qvc-order-sheet-total {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .qvc-order-sheet-close {
    background: var(--dm-bg) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .qvc-order-line {
    border-bottom-color: var(--dm-border) !important;
}
html.dark-mode #quickview-modal .qvc-order-line-copy strong,
html.dark-mode #quickview-modal .qvc-order-line-price,
html.dark-mode #quickview-modal .qvc-order-line-chevron,
html.dark-mode #quickview-modal .qvc-order-line-actions button,
html.dark-mode #quickview-modal .qvc-order-line-actions span {
    color: #fff !important;
}
html.dark-mode #quickview-modal .qvc-order-line-copy small,
html.dark-mode #quickview-modal .qvc-order-line-detail {
    color: var(--dm-muted) !important;
}
html.dark-mode #quickview-modal .qvc-order-line-side img {
    background: var(--dm-bg) !important;
}
html.dark-mode #quickview-modal .qvc-order-line-actions {
    background: var(--dm-bg) !important;
}

/* ==================== Shared trip: chips, code, countdown, close ==================== */
html.dark-mode #sharedTripModal .shared-trip-modal-close {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
}
html.dark-mode #sharedTripModal .shared-trip-modal-close svg,
html.dark-mode #sharedTripModal .shared-trip-modal-close svg path {
    stroke: #fff !important;
    color: #fff !important;
}
html.dark-mode #sharedTripModal .shared-trip-surface-copy strong {
    color: #fff !important;
}
html.dark-mode #sharedTripModal .shared-trip-surface-copy em {
    color: var(--dm-muted) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice {
    color: var(--dm-muted) !important;
    background: transparent !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active {
    background: var(--dm-surface) !important;
    color: var(--theme-color, #2bb3c0) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active::before,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active::after {
    background: var(--dm-surface) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-block,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-enter,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-share,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chips,
html.dark-mode #sharedTripModal .shared-trip-duration-chips {
    background: var(--dm-surface) !important;
    box-shadow: none !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chip,
html.dark-mode #sharedTripModal .shared-trip-duration-chip {
    background: var(--dm-surface-2) !important;
    color: var(--dm-muted) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chip:hover,
html.dark-mode #sharedTripModal .shared-trip-duration-chip:hover {
    color: #fff !important;
    background: var(--dm-surface-2) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chip.is-active,
html.dark-mode #sharedTripModal .shared-trip-duration-chip.is-active {
    background: #fff !important;
    color: #18181b !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-input,
html.dark-mode #sharedTripModal .shared-trip-invite-code,
html.dark-mode #sharedTripModal .shared-trip-invite-field,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-input,
html.dark-mode #sharedTripModal .shared-trip-invite-combo #sharedTripHaveField .shared-trip-invite-input {
    background: transparent !important;
    color: #fff !important;
    caret-color: #fff !important;
    box-shadow: none !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-slot-digit,
html.dark-mode #sharedTripModal .shared-trip-invite-code.has-code .shared-trip-invite-slot-digit {
    color: #fff !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-code:not(.has-code):not(.is-spinning) .shared-trip-invite-slot::before,
html.dark-mode #sharedTripModal #sharedTripHaveDashes .shared-trip-invite-slot::before {
    color: rgba(255, 255, 255, 0.35) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-countdown {
    background: rgba(43, 179, 192, 0.15) !important;
    color: var(--dm-muted) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-countdown strong {
    color: #2bb3c0 !important;
}
html.dark-mode #sharedTripModal .shared-trip-duration-label,
html.dark-mode #sharedTripModal .shared-trip-invite-note {
    color: var(--dm-muted) !important;
}

/* ==================== Checkout map: location btn, photos, chips, fields ==================== */
html.dark-mode #checkout-map-current-btn {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
}
html.dark-mode #checkout-map-current-btn svg,
html.dark-mode #checkout-map-current-btn svg circle,
html.dark-mode #checkout-map-current-btn svg path {
    stroke: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view {
    background: var(--dm-bg) !important;
    color: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-map-modal-header {
    background: var(--dm-bg) !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-map-modal-header button {
    background: none !important;
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-map-modal-header button svg path {
    stroke: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view h3,
html.dark-mode #checkoutMapModal #address-details-view h4,
html.dark-mode #checkoutMapModal #address-details-view label {
    color: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view input,
html.dark-mode #checkoutMapModal #address-details-view textarea,
html.dark-mode #checkoutMapModal #address-details-view select {
    background: var(--dm-input-bg) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #checkoutMapModal #address-details-view #address-description::placeholder,
html.dark-mode #checkoutMapModal #address-details-view textarea::placeholder {
    color: var(--dm-muted, #94a3b8) !important;
    opacity: 1 !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-address-photos-wrap {
    --checkout-photo-surface: var(--dm-surface);
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-address-photos-box {
    background: var(--dm-surface) !important;
    border-color: rgba(43, 179, 192, 0.35) !important;
    box-shadow: none !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-address-photos-top-hint {
    background: var(--dm-surface-2) !important;
    color: var(--dm-muted) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-address-photos-heading {
    color: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-address-photos-sub,
html.dark-mode #checkoutMapModal #address-details-view .checkout-photo-slot-label,
html.dark-mode #checkoutMapModal #address-details-view .checkout-photo-slot:not(.has-photo) .checkout-photo-slot-label {
    color: var(--dm-muted) !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-photo-slot:not(.has-photo) .checkout-photo-slot-inner {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-photo-slot-circle {
    background: rgba(255, 255, 255, 0.06) !important;
}
html.dark-mode #checkoutMapModal #address-details-view .checkout-photo-slot-default {
    color: var(--dm-muted) !important;
}
html.dark-mode #checkoutMapModal #address-details-view .address-type-tag,
html.dark-mode #checkoutMapModal #address-details-view .address-type-tag.address-type-chip {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: #fff !important;
}
html.dark-mode #checkoutMapModal #address-details-view .address-type-tag.is-selected,
html.dark-mode #checkoutMapModal #address-details-view .address-type-tag.address-type-chip.is-selected {
    background: rgba(43, 179, 192, 0.18) !important;
    border-color: #2bb3c0 !important;
    color: #2bb3c0 !important;
}
html.dark-mode #checkoutMapModal #address-details-view .address-type-tag.is-selected > div,
html.dark-mode #checkoutMapModal #address-details-view .address-type-chip-icon-wrap {
    background: transparent !important;
}
html.dark-mode #checkoutMapModal #address-details-view .address-type-chip-label {
    color: inherit !important;
}

/* ==================== Cart sidebar close + product notes ==================== */
html.dark-mode .cart-sidebar-close,
html.dark-mode .main-right-col.active .cart-sidebar-close,
html.dark-mode .cart-sidebar-close:hover,
html.dark-mode .cart-sidebar-close:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}
html.dark-mode .cart-sidebar-close svg path {
    stroke: #fff !important;
}
html.dark-mode .product-notes-display,
html.dark-mode #card-summary .product-notes-display {
    background: rgba(43, 179, 192, 0.14) !important;
    color: #fff !important;
}
html.dark-mode .product-notes-display small,
html.dark-mode .product-notes-display .notes-text,
html.dark-mode #card-summary .product-notes-display small,
html.dark-mode #card-summary .product-notes-display .notes-text {
    color: #fff !important;
}

html.dark-mode .main-logo-circle {
    background: #1c1c22 !important;
    border-color: var(--dm-bg, #26262e) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.main-logo-circle .logo-front .logo-img-dark {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
html.dark-mode .main-logo-circle .logo-front .logo-img-light {
    display: none !important;
}
html.dark-mode .main-logo-circle .logo-front .logo-img-dark {
    display: block !important;
}
html.dark-mode .main-logo-circle.js-logo-flip .logo-back {
    background: #1c1c22 !important;
    color: #fff !important;
}
html.dark-mode .main-logo-circle.js-logo-flip .logo-share-text,
html.dark-mode .main-logo-circle.js-logo-flip .logo-qr-caption {
    color: #fff !important;
}
html.dark-mode .main-logo-circle.js-logo-flip .logo-share-subtext {
    color: var(--dm-muted, #94a3b8) !important;
}
html.dark-mode .main-logo-circle.js-logo-flip .logo-back-qr .logo-qr-wrap {
    background: #1c1c22 !important;
}
html.dark-mode .main-logo-circle.js-logo-flip .logo-back-qr .logo-qr-wrap svg rect {
    fill: #1c1c22 !important;
}
html.dark-mode .main-logo-circle.js-logo-flip .logo-back-qr .logo-qr-wrap svg path {
    fill: #ffffff !important;
}
html.dark-mode .main-logo-circle.js-logo-flip .logo-back-qr .logo-qr-wrap svg circle {
    fill: #ffffff !important;
}
html.dark-mode .main-logo-circle.js-logo-flip .logo-back-linked .logo-linked-action,
html.dark-mode .main-logo-circle.js-logo-flip .logo-back-linked .logo-linked-main {
    background: #1c1c22 !important;
}
html.dark-mode .linked-platform-card {
    background: #1c1c22 !important;
    border-color: #1c1c22 !important;
}

.header-logo-circle .logo-img-dark {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
html.dark-mode .header-logo-circle {
    position: relative;
    background: #1c1c22 !important;
    border-color: #1c1c22 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode .header-logo-circle .logo-img-light {
    display: none !important;
}
html.dark-mode .header-logo-circle .logo-img-dark {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

html.dark-mode #sharedTripModal .shared-trip-modal-close,
html.dark-mode #sharedTripModal .shared-trip-modal-close:hover,
html.dark-mode #sharedTripModal .shared-trip-modal-close:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}
html.dark-mode #sharedTripModal .shared-trip-notify-btn,
html.dark-mode #sharedTripModal .shared-trip-notify-btn:hover,
html.dark-mode #sharedTripModal .shared-trip-notify-btn:active,
html.dark-mode #sharedTripModal .shared-trip-invite-regen,
html.dark-mode #sharedTripModal .shared-trip-invite-activate {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo {
    background: var(--dm-bg, #26262e) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice {
    background: transparent !important;
    color: #94a3b8 !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice:hover {
    color: #fff !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active {
    background: var(--dm-surface, #33333d) !important;
    color: var(--theme-color, #2bb3c0) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active::before,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-choice.is-active::after {
    background: var(--dm-surface, #33333d) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-block,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-enter,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-invite-share,
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chips {
    background: var(--dm-surface, #33333d) !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chip {
    background: transparent !important;
    color: #94a3b8 !important;
    border: 0 !important;
    box-shadow: none !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chip:hover {
    color: #fff !important;
    background: transparent !important;
}
html.dark-mode #sharedTripModal .shared-trip-invite-combo .shared-trip-duration-chip.is-active {
    background: color-mix(in srgb, var(--theme-color, #2bb3c0) 18%, transparent) !important;
    color: var(--theme-color, #2bb3c0) !important;
}

html.dark-mode #productRatingsModal .prm-sheet,
html.dark-mode #productRatingsModal .prm-topbar,
html.dark-mode #productRatingsModal .prm-body,
html.dark-mode #productRatingsModal .prm-content,
html.dark-mode #productRatingsModal .prm-overview,
html.dark-mode #productRatingsModal .prm-filters,
html.dark-mode #productRatingsModal .prm-item,
html.dark-mode #productRatingsModal .prm-empty,
html.dark-mode #productRatingsModal .prm-no-filter-results,
html.dark-mode #productRatingsModal .prm-status,
html.dark-mode #productRatingsModal .prm-loading {
    background: var(--dm-bg, #26262e) !important;
    color: var(--dm-text, #fff) !important;
    border-color: var(--dm-border, rgba(255,255,255,.08)) !important;
}
html.dark-mode #productRatingsModal .prm-title,
html.dark-mode #productRatingsModal .prm-close,
html.dark-mode #productRatingsModal .prm-avg-number,
html.dark-mode #productRatingsModal .prm-name,
html.dark-mode #productRatingsModal .prm-list-title,
html.dark-mode #productRatingsModal .prm-status strong {
    color: #fff !important;
}
html.dark-mode #productRatingsModal .prm-close svg {
    stroke: #fff !important;
}
html.dark-mode #productRatingsModal .prm-count,
html.dark-mode #productRatingsModal .prm-comment,
html.dark-mode #productRatingsModal .prm-status p {
    color: var(--dm-muted, #94a3b8) !important;
}
html.dark-mode #productRatingsModal .prm-filter {
    background: var(--dm-surface, #33333d) !important;
    color: #fff !important;
}
html.dark-mode #productRatingsModal .prm-filter.is-active {
    background: color-mix(in srgb, var(--theme-color, #2bb3c0) 22%, var(--dm-surface, #33333d)) !important;
    color: var(--theme-color, #2bb3c0) !important;
    border-color: var(--theme-color, #2bb3c0) !important;
}
html.dark-mode #productRatingsModal .prm-avatar {
    background: color-mix(in srgb, var(--theme-color, #2bb3c0) 18%, var(--dm-surface, #33333d)) !important;
    color: var(--theme-color, #2bb3c0) !important;
}
html.dark-mode #productRatingsModal .prm-item {
    border-bottom-color: var(--dm-border, rgba(255,255,255,.08)) !important;
}
html.dark-mode #productRatingsModal .prm-gs-empty {
    fill: #3f3f46 !important;
}

html.dark-mode #order-chat-compose,
html.dark-mode #order-chat-modal .order-chat-compose {
    background: var(--dm-surface, #33333d) !important;
    background-color: var(--dm-surface, #33333d) !important;
    border-color: var(--dm-border, rgba(255,255,255,.08)) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html.dark-mode #order-chat-input,
html.dark-mode #order-chat-modal .order-chat-compose-input {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
html.dark-mode #order-chat-input::placeholder,
html.dark-mode #order-chat-modal .order-chat-compose-input::placeholder {
    color: var(--dm-muted, #94a3b8) !important;
}

html.dark-mode #order-chat-modal .order-chat-modal-panel,
html.dark-mode #order-chat-modal .order-chat-header-overlay,
html.dark-mode #order-chat-modal .order-chat-scroll-wrap,
html.dark-mode #order-chat-modal .order-chat-messages {
    background: var(--dm-bg, #26262e) !important;
}
html.dark-mode #order-chat-modal .order-chat-modal-header {
    background: color-mix(in srgb, var(--dm-bg, #26262e) 82%, transparent) !important;
}
#order-chat-modal .order-chat-bubble-total-amt-num,
#order-chat-modal .order-chat-bubble-total-amt-cur,
#order-chat-modal .order-chat-bubble-total .sar-symbol,
#order-chat-modal .order-chat-bubble-delegate .sar-symbol,
#order-chat-modal .order-chat-bubble-delegate .sar-money {
    color: var(--theme-color, #15803d) !important;
}
#order-chat-modal .order-chat-bubble-customer .sar-symbol,
#order-chat-modal .order-chat-bubble-customer .sar-money,
#order-chat-modal .order-chat-bubble-store .sar-symbol,
#order-chat-modal .order-chat-bubble-store .sar-money {
    color: inherit !important;
}
html.dark-mode #order-chat-modal .order-chat-bubble-total-amt-num,
html.dark-mode #order-chat-modal .order-chat-bubble-total-amt-cur,
html.dark-mode #order-chat-modal .order-chat-bubble-total .sar-symbol,
html.dark-mode #order-chat-modal .order-chat-bubble-delegate .sar-symbol,
html.dark-mode #order-chat-modal .order-chat-bubble-delegate .sar-money {
    color: var(--theme-color, #22c55e) !important;
}
html.dark-mode #order-chat-modal .order-chat-bubble-customer .sar-symbol,
html.dark-mode #order-chat-modal .order-chat-bubble-customer .sar-money,
html.dark-mode #order-chat-modal .order-chat-bubble-store .sar-symbol,
html.dark-mode #order-chat-modal .order-chat-bubble-store .sar-money {
    color: inherit !important;
}

html.dark-mode .order-chat-live-tracking__place-pill {
    background: var(--dm-surface, #33333d) !important;
    color: #fff !important;
    border-color: var(--dm-border, rgba(255,255,255,.12)) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}
html.dark-mode .order-chat-live-tracking__place-label {
    color: #fff !important;
}
html.dark-mode .order-chat-live-tracking__place-stem {
    background: #3f3f46 !important;
    box-shadow: none !important;
}
html.dark-mode .order-chat-live-tracking__place-dot {
    border-color: #1c1c22 !important;
}
html.dark-mode .order-chat-live-tracking__courier-disc {
    background: #1c1c22 !important;
    color: var(--theme-color, #0d9488) !important;
    border-color: var(--theme-color, #0d9488) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}
html.dark-mode .order-chat-live-tracking__courier-disc svg {
    color: var(--theme-color, #0d9488) !important;
    stroke: currentColor !important;
}

/* ==================== نافذة صورة الإعلان (Banner image popup) ==================== */
html.dark-mode #bannerImagePopup.banner-image-popup-overlay {
    background: rgba(8, 8, 12, 0.82) !important;
}
html.dark-mode #bannerImagePopup .banner-image-popup-card {
    background: transparent !important;
}
html.dark-mode #bannerImagePopup .banner-image-popup-media,
html.dark-mode #bannerImagePopup .banner-image-popup-img {
    background: var(--dm-surface, #33333d) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}
html.dark-mode #bannerImagePopup .banner-image-popup-close {
    background: rgba(38, 38, 46, 0.72) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode #bannerImagePopup .banner-image-popup-close:hover {
    background: rgba(51, 51, 61, 0.88) !important;
    color: #fff !important;
}

#card-summary .cart-left .cart-price-badge-row .cart-badge-cluster {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    white-space: nowrap !important;
}
#card-summary .cart-item .cart-content .cart-left .cart-badge-cluster > span,
#card-summary .cart-left .cart-price-badge-row .cart-badge-cluster .distance-pricing-badge,
#card-summary .cart-left .cart-price-badge-row .cart-badge-cluster .qty-badge-inline.price-badge-inline {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
}