/**
 * Samraa Shop Dark Theme — comprehensive color-only layer.
 * Toggle logic: shared assets/js/theme.js (ErpTheme). Do not duplicate JS here.
 */

html[data-theme="dark"] {
    color-scheme: dark;
    --primary-color: #3d3992;
    --primary-dark: #5a55c2;
    --primary-light: #7b77d4;
    --gold-accent: #c9a96a;
    --bg-main: #12141c;
    --bg-surface: #1a1d27;
    --bg-elevated: #222633;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --border-color: rgba(148, 163, 184, 0.18);
    --glass: rgba(26, 29, 39, 0.82);
    --input-bg: #222633;
    --hover-surface: rgba(90, 85, 194, 0.14);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.48);
    --acc-surface: #12141c;
    --acc-border: rgba(148, 163, 184, 0.18);
    --acc-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    --acc-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] html,
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] #page-content {
    background-color: var(--bg-main) !important;
    color: var(--text-main);
}

html[data-theme="dark"] body:not(.acc-dash-mode) header.site-header {
    background: transparent;
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .header-main {
    background: #23214f !important;
    color: #ffffff;
}

html[data-theme="dark"] footer,
html[data-theme="dark"] footer.footer {
    background: #23214f !important;
    color: rgba(255, 255, 255, 0.85);
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] main :is(h1,h2,h3,h4,h5,h6,p,span,li,label,td,th,dt,dd,figcaption),
html[data-theme="dark"] .acc-page :is(h1,h2,h3,h4,h5,h6,p,span,li,label,td,th,dt,dd,figcaption),
html[data-theme="dark"] #page-content :is(h1,h2,h3,h4,h5,h6,p,li,label,td,th) {
    color: var(--text-main);
}

html[data-theme="dark"] main a:not(.btn):not(.btn-primary):not(.add-to-cart):not(.cart-btn):not(.add-to-cart-hero):not(.btn-luxury-gold):not(.btn-outline):not(.social-links a):not(.footer-column a):not(.main-nav a),
html[data-theme="dark"] .acc-page a:not(.acc-btn):not(.btn-primary) {
    color: var(--primary-light);
}

html[data-theme="dark"] .header-bottom,
html[data-theme="dark"] .header-search-slide,
html[data-theme="dark"] .search-history-dropdown,
html[data-theme="dark"] .search-history-list li,
html[data-theme="dark"] .mega-menu,
html[data-theme="dark"] .mobile-nav-panel,
html[data-theme="dark"] .mobile-menu-drawer,
html[data-theme="dark"] .nav-dropdown,
html[data-theme="dark"] .search-filter-btn,
html[data-theme="dark"] .search-input-wrapper input,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-dialog,
html[data-theme="dark"] .global-filter-drawer,
html[data-theme="dark"] .global-filter-drawer .filter-body,
html[data-theme="dark"] .global-filter-drawer .filter-footer,
html[data-theme="dark"] .global-filter-drawer .filter-actions .btn.btn-outline,
html[data-theme="dark"] .filter-drawer,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .shop-sidebar,
html[data-theme="dark"] .shop-controls,
html[data-theme="dark"] .shop-toolbar,
html[data-theme="dark"] .shop-main .empty-state,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .offer-card,
html[data-theme="dark"] .hero-text-card,
html[data-theme="dark"] .features-bar-container,
html[data-theme="dark"] .feature-bar,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero .features-bar,
html[data-theme="dark"] .lookbook-page,
html[data-theme="dark"] .lookbook-hero,
html[data-theme="dark"] .lookbook-featured,
html[data-theme="dark"] .lookbook-mosaic,
html[data-theme="dark"] .lookbook-occasions,
html[data-theme="dark"] .lookbook-card,
html[data-theme="dark"] .lookbook-gallery,
html[data-theme="dark"] .lookbook-cta,
html[data-theme="dark"] .featured-content,
html[data-theme="dark"] .about-page-premium,
html[data-theme="dark"] .about-narrative,
html[data-theme="dark"] .about-values,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .split-value-section,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .value-icon,
html[data-theme="dark"] .contact-page-premium,
html[data-theme="dark"] .contact-hero,
html[data-theme="dark"] .info-card-premium,
html[data-theme="dark"] .item-icon,
html[data-theme="dark"] .form-card-glass,
html[data-theme="dark"] .form-group-premium input,
html[data-theme="dark"] .form-group-premium textarea,
html[data-theme="dark"] .form-group-premium select,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .cart-page,
html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .cart-item-modern,
html[data-theme="dark"] .cart-summary,
html[data-theme="dark"] .cart-items-mini,
html[data-theme="dark"] .checkout-container,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .checkout-grid .checkout-card,
html[data-theme="dark"] .order-info-box,
html[data-theme="dark"] .sticky-pay-wrapper,
html[data-theme="dark"] .payment-method-card,
html[data-theme="dark"] .payment-option,
html[data-theme="dark"] .detail-info,
html[data-theme="dark"] .detail-gallery,
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .product-detail-section,
html[data-theme="dark"] .free-shipping-banner,
html[data-theme="dark"] .detail-qty-selector,
html[data-theme="dark"] .color-swatch,
html[data-theme="dark"] .size-opt,
html[data-theme="dark"] .custom-select-wrapper,
html[data-theme="dark"] .custom-options,
html[data-theme="dark"] .custom-option,
html[data-theme="dark"] .lightbox-modal,
html[data-theme="dark"] .lightbox-content,
html[data-theme="dark"] .cookie-banner,
html[data-theme="dark"] .newsletter-box,
html[data-theme="dark"] .promo-strip,
html[data-theme="dark"] .season-box,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .close-sidebar,
html[data-theme="dark"] .close-drawer,
html[data-theme="dark"] .global-filter-drawer .close-drawer,
html[data-theme="dark"] .cat-link[data-i18n="shop_type_all"],
html[data-theme="dark"] #btnResetFilters,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .sort-dropdown-menu,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .acc-sheet,
html[data-theme="dark"] .acc-sheet__head,
html[data-theme="dark"] .acc-sheet__list,
html[data-theme="dark"] .acc-sheet__row,
html[data-theme="dark"] .chat-popup,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .chat-body,
html[data-theme="dark"] .chat-input-area,
html[data-theme="dark"] .acc-auth__card,
html[data-theme="dark"] .acc-welcome__card,
html[data-theme="dark"] .acc-card,
html[data-theme="dark"] .acc-card-block,
html[data-theme="dark"] .acc-panel,
html[data-theme="dark"] .acc-stat,
html[data-theme="dark"] .acc-table-wrap,
html[data-theme="dark"] .acc-notif-panel,
html[data-theme="dark"] .acc-sidebar,
html[data-theme="dark"] .acc-sidebar__footer,
html[data-theme="dark"] .acc-list-item,
html[data-theme="dark"] .acc-empty,
html[data-theme="dark"] .acc-ov-card,
html[data-theme="dark"] .acc-ov-backdrop,
html[data-theme="dark"] .acc-ms__trigger,
html[data-theme="dark"] .acc-ms__panel,
html[data-theme="dark"] .acc-ms__search,
html[data-theme="dark"] .acc-ms__list,
html[data-theme="dark"] .acc-ms__search-input,
html[data-theme="dark"] .acc-btn--outline,
html[data-theme="dark"] .acc-btn--ghost,
html[data-theme="dark"] .acc-btn--danger,
html[data-theme="dark"] .acc-alert,
html[data-theme="dark"] .acc-alert--warn,
html[data-theme="dark"] .acc-avatar-drop,
html[data-theme="dark"] .acc-wishlist-mount .product-card,
html[data-theme="dark"] .acc-order-card,
html[data-theme="dark"] .acc-address-card,
html[data-theme="dark"] .acc-settings-block,
html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .back-to-top,
html[data-theme="dark"] .close-modal,
html[data-theme="dark"] .wishlist-btn,
html[data-theme="dark"] .view-btn,
html[data-theme="dark"] .qty-btn,
html[data-theme="dark"] .size-btn,
html[data-theme="dark"] .color-swatch-wrap,
html[data-theme="dark"] .detail-wishlist-btn,
html[data-theme="dark"] .slider-dot,
html[data-theme="dark"] .hc-yellow,
html[data-theme="dark"] .hc-green,
html[data-theme="dark"] .hc-gray,
html[data-theme="dark"] .hc-peach,
html[data-theme="dark"] .hc-purple,
html[data-theme="dark"] .hc-blue {
    background-color: var(--bg-surface) !important;
    background: var(--bg-surface) !important;
    color: var(--text-main);
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .product-image,
html[data-theme="dark"] .product-card .product-image,
html[data-theme="dark"] .cart-item-image,
html[data-theme="dark"] .detail-thumb,
html[data-theme="dark"] .detail-thumbnails img,
html[data-theme="dark"] .acc-wishlist-mount .product-image,
html[data-theme="dark"] .checkout-card .cart-item-image,
html[data-theme="dark"] .gallery-thumb,
html[data-theme="dark"] .image-placeholder {
    background-color: var(--bg-elevated) !important;
    background: var(--bg-elevated) !important;
}

html[data-theme="dark"] #clearSearchHistory,
html[data-theme="dark"] .search-history-list li:hover,
html[data-theme="dark"] .wishlist-btn.active,
html[data-theme="dark"] .detail-wishlist-btn:hover,
html[data-theme="dark"] .detail-qty-selector .qty-btn:hover,
html[data-theme="dark"] .global-filter-drawer .close-drawer:hover,
html[data-theme="dark"] .acc-btn--ghost:hover,
html[data-theme="dark"] .acc-btn--danger-text:hover,
html[data-theme="dark"] .acc-avatar-drop.is-dragover,
html[data-theme="dark"] .custom-option:hover,
html[data-theme="dark"] .cat-link:hover {
    background-color: var(--input-bg) !important;
    background: var(--input-bg) !important;
}

html[data-theme="dark"] .hc-yellow,
html[data-theme="dark"] .hc-green,
html[data-theme="dark"] .hc-gray,
html[data-theme="dark"] .hc-peach,
html[data-theme="dark"] .hc-purple,
html[data-theme="dark"] .hc-blue {
    background-color: var(--bg-elevated) !important;
    background: var(--bg-elevated) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .search-expand-form,
html[data-theme="dark"] #searchInput,
html[data-theme="dark"] .qty-input,
html[data-theme="dark"] .acc-field input,
html[data-theme="dark"] .acc-field select,
html[data-theme="dark"] .acc-field textarea,
html[data-theme="dark"] .acc-input,
html[data-theme="dark"] .global-filter-drawer input,
html[data-theme="dark"] .global-filter-drawer select,
html[data-theme="dark"] .shop-sidebar input,
html[data-theme="dark"] .shop-sidebar select {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] #searchInput::placeholder,
html[data-theme="dark"] .acc-field input::placeholder,
html[data-theme="dark"] .acc-field textarea::placeholder {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .product-info p,
html[data-theme="dark"] .product-meta,
html[data-theme="dark"] .acc-muted,
html[data-theme="dark"] .acc-help,
html[data-theme="dark"] .acc-subtitle,
html[data-theme="dark"] .checkout-muted,
html[data-theme="dark"] .cart-item-meta,
html[data-theme="dark"] .cart-item-info small,
html[data-theme="dark"] .detail-sku,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .hero-text-card p,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .acc-table td.muted {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .divider,
html[data-theme="dark"] .acc-divider {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .add-to-cart,
html[data-theme="dark"] .cart-btn,
html[data-theme="dark"] .add-to-cart-hero,
html[data-theme="dark"] .btn-primary span,
html[data-theme="dark"] .add-to-cart span,
html[data-theme="dark"] .cart-btn span,
html[data-theme="dark"] .add-to-cart-hero span,
html[data-theme="dark"] .btn-primary i,
html[data-theme="dark"] .add-to-cart i,
html[data-theme="dark"] .cart-btn i,
html[data-theme="dark"] .add-to-cart-hero i {
    color: #ffffff !important;
}

html[data-theme="dark"] .mobile-action-item,
html[data-theme="dark"] .mobile-action-item span,
html[data-theme="dark"] .main-nav ul li a,
html[data-theme="dark"] .header-bottom a,
html[data-theme="dark"] .mega-menu a {
    color: var(--text-main);
}

html[data-theme="dark"] #clearSearchHistory:hover,
html[data-theme="dark"] .pagination a:hover,
html[data-theme="dark"] .chip:hover,
html[data-theme="dark"] .tag:hover {
    background: var(--hover-surface) !important;
}

html[data-theme="dark"] body.acc-dash-mode,
html[data-theme="dark"] .acc-dash-html body.acc-dash-mode {
    background: var(--acc-surface) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .acc-page,
html[data-theme="dark"] .acc-page.acc-page--dash {
    background: var(--acc-surface);
    color: var(--text-main);
}

html[data-theme="dark"] .acc-content-title,
html[data-theme="dark"] .acc-panel-title,
html[data-theme="dark"] .acc-auth__title,
html[data-theme="dark"] .acc-stat__value {
    color: var(--text-main) !important;
}

html[data-theme="dark"] .acc-ms__option {
    color: var(--text-main);
}

html[data-theme="dark"] .acc-ms__option:hover,
html[data-theme="dark"] .acc-ms__option:focus,
html[data-theme="dark"] .acc-ms__option.is-selected {
    background: var(--hover-surface) !important;
}

html[data-theme="dark"] .acc-table thead th,
html[data-theme="dark"] .acc-table tbody td {
    color: var(--text-main);
    border-color: var(--acc-border) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
    color: var(--text-main) !important;
}

html[data-theme="dark"] .samraa-fab__toggle {
    border-color: var(--border-color);
}

/* FAB menu is a layout slot only — never paint a panel background */
html[data-theme="dark"] .samraa-fab__menu,
html[data-theme="dark"] #samraaFabMenu {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


.theme-toggle-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
}

.theme-toggle-btn .theme-icon-sun,
.theme-toggle-btn .theme-icon-moon {
    display: none;
}

html[data-theme="light"] .theme-toggle-btn .theme-icon-moon,
html:not([data-theme]) .theme-toggle-btn .theme-icon-moon {
    display: inline-block;
}

html[data-theme="dark"] .theme-toggle-btn .theme-icon-sun {
    display: inline-block;
}

.mobile-action-item.theme-toggle-btn,
button.mobile-action-item.theme-toggle-btn {
    width: auto;
    height: auto;
    min-width: 64px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: inherit;
    flex-direction: column;
    gap: 4px;
    font: inherit;
}

.mobile-action-item.theme-toggle-btn:hover {
    background: transparent;
}

.mobile-action-item.theme-toggle-btn .theme-toggle-label {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.acc-icon-btn.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.acc-icon-btn.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

@media print {
    html[data-theme="dark"] {
        --bg-main: #ffffff;
        --bg-surface: #ffffff;
        --bg-elevated: #f3f4f6;
        --text-main: #111827;
        --text-muted: #6b7280;
        --border-color: #e5e7eb;
        --input-bg: #ffffff;
        --acc-surface: #ffffff;
        color-scheme: light;
    }

    html[data-theme="dark"] body,
    html[data-theme="dark"] main,
    html[data-theme="dark"] #page-content,
    html[data-theme="dark"] .product-card,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .checkout-card,
    html[data-theme="dark"] .acc-card {
        background: #ffffff !important;
        color: #111827 !important;
    }
}

/* ==== FORCE FULL DARK COVERAGE (beats style.min.css !important whites) ==== */

/* Text: force light copy everywhere except brand chrome / solid CTAs */
html[data-theme="dark"] body,
html[data-theme="dark"] body :where(
  h1,h2,h3,h4,h5,h6,p,span,li,label,td,th,dt,dd,small,strong,b,em,a,button,div,section,article,aside,nav
):not(i):not(svg):not(path) {
    color: var(--text-main);
}

html[data-theme="dark"] .header-bottom,
html[data-theme="dark"] .header-bottom *,
html[data-theme="dark"] .mega-menu,
html[data-theme="dark"] .mega-menu *,
html[data-theme="dark"] .mobile-action-slider,
html[data-theme="dark"] .mobile-action-item,
html[data-theme="dark"] .mobile-action-item *,
html[data-theme="dark"] main,
html[data-theme="dark"] main *,
html[data-theme="dark"] #page-content,
html[data-theme="dark"] #page-content *,
html[data-theme="dark"] .acc-page,
html[data-theme="dark"] .acc-page *,
html[data-theme="dark"] .acc-sheet,
html[data-theme="dark"] .acc-sheet *,
html[data-theme="dark"] .global-filter-drawer,
html[data-theme="dark"] .global-filter-drawer *,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-content *,
html[data-theme="dark"] .search-history-dropdown,
html[data-theme="dark"] .search-history-dropdown *,
html[data-theme="dark"] .header-search-slide,
html[data-theme="dark"] .header-search-slide * {
    color: var(--text-main) !important;
}

/* Muted stays muted */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .product-info p,
html[data-theme="dark"] .product-meta,
html[data-theme="dark"] .acc-muted,
html[data-theme="dark"] .acc-help,
html[data-theme="dark"] .acc-subtitle,
html[data-theme="dark"] .checkout-muted,
html[data-theme="dark"] .cart-item-meta,
html[data-theme="dark"] .cart-item-info small,
html[data-theme="dark"] .detail-sku,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .old-price,
html[data-theme="dark"] del {
    color: var(--text-muted) !important;
}

/* Restore light-on-brand / CTA exceptions */
html[data-theme="dark"] .header-main,
html[data-theme="dark"] .header-main *,
html[data-theme="dark"] .acc-dash-header,
html[data-theme="dark"] .acc-dash-header *,
html[data-theme="dark"] footer,
html[data-theme="dark"] footer *,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary *,
html[data-theme="dark"] .add-to-cart,
html[data-theme="dark"] .add-to-cart *,
html[data-theme="dark"] .cart-btn,
html[data-theme="dark"] .cart-btn *,
html[data-theme="dark"] .add-to-cart-hero,
html[data-theme="dark"] .add-to-cart-hero *,
html[data-theme="dark"] .btn-luxury-gold,
html[data-theme="dark"] .btn-luxury-gold *,
html[data-theme="dark"] .nh-btn,
html[data-theme="dark"] .new-hero-btn,
html[data-theme="dark"] .offer-plus-btn,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .sale-badge,
html[data-theme="dark"] .branch-badge,
html[data-theme="dark"] .header-count-badge,
html[data-theme="dark"] .whatsapp-float,
html[data-theme="dark"] .social-links a,
html[data-theme="dark"] .acc-btn--primary,
html[data-theme="dark"] .acc-btn--danger {
    color: #ffffff !important;
}

html[data-theme="dark"] .header-main .theme-toggle-btn,
html[data-theme="dark"] .acc-dash-header .theme-toggle-btn {
    color: #ffffff !important;
}

/* Footer social: white fill on hover needs dark icons */
html[data-theme="dark"] .social-links a:hover,
html[data-theme="dark"] .social-links a:hover i {
    color: #23214f !important;
}

html[data-theme="dark"] .contact-info-footer p:hover i {
    color: #23214f !important;
}

/* Hardcoded white !important leftovers */
html[data-theme="dark"] .search-filter-btn,
html[data-theme="dark"] .product-image,
html[data-theme="dark"] .look-item,
html[data-theme="dark"] .look-item img,
html[data-theme="dark"] .product-card-slider,
html[data-theme="dark"] .offer-img-box,
html[data-theme="dark"] .offer-img-box img,
html[data-theme="dark"] .hero-features-card,
html[data-theme="dark"] .mega-menu,
html[data-theme="dark"] .user-review-card,
html[data-theme="dark"] .detail-wishlist-btn,
html[data-theme="dark"] .size-opt,
html[data-theme="dark"] .size-box,
html[data-theme="dark"] .modern-size-select:focus,
html[data-theme="dark"] .global-filter-drawer .drawer-body select.filter-select,
html[data-theme="dark"] .global-filter-drawer .filter-actions .btn.btn-outline,
html[data-theme="dark"] .modern-text-input,
html[data-theme="dark"] .modern-text-input:focus,
html[data-theme="dark"] .checkout-card .modern-select-trigger,
html[data-theme="dark"] .header-search-slide .search-expand-form:focus-within,
html[data-theme="dark"] .header-search-slide .search-expand-form,
html[data-theme="dark"] .central-search-bar form,
html[data-theme="dark"] .page-loader,
html[data-theme="dark"] .wholesale-card,
html[data-theme="dark"] .promo-grid-section,
html[data-theme="dark"] .highlight-card,
html[data-theme="dark"] .no-results,
html[data-theme="dark"] .lang-options,
html[data-theme="dark"] .custom-select-options,
html[data-theme="dark"] .custom-select-trigger,
html[data-theme="dark"] .dropdown-search,
html[data-theme="dark"] .dropdown-selected,
html[data-theme="dark"] .modern-select-options,
html[data-theme="dark"] .modern-phone-wrapper,
html[data-theme="dark"] .lightbox-close,
html[data-theme="dark"] .lightbox-left,
html[data-theme="dark"] .lightbox-right,
html[data-theme="dark"] .gallery-nav-btn,
html[data-theme="dark"] .slider-arrow,
html[data-theme="dark"] .slider-nav-btn,
html[data-theme="dark"] .stepper-btn,
html[data-theme="dark"] .filter-toggle-btn,
html[data-theme="dark"] .color-chip,
html[data-theme="dark"] .size-chip,
html[data-theme="dark"] .size-checkbox,
html[data-theme="dark"] .nf-item,
html[data-theme="dark"] .chat-footer,
html[data-theme="dark"] .chat-msg,
html[data-theme="dark"] .banner-card-overlay,
html[data-theme="dark"] .si-cur-menu,
html[data-theme="dark"] .sidebar-suggestions-dropdown,
html[data-theme="dark"] .shop-controls,
html[data-theme="dark"] .samraa-price-slider,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .features-bar-container,
html[data-theme="dark"] .hero-text-card,
html[data-theme="dark"] .new-hero-section,
html[data-theme="dark"] .social-grid-modern a,
html[data-theme="dark"] .value-item-minimal {
    background: var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
}

/* Footer contact block sits on navy footer — never paint surface boxes */
html[data-theme="dark"] .contact-info-footer,
html[data-theme="dark"] .contact-info-footer p,
html[data-theme="dark"] .contact-info-footer p i {
    background: transparent !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .product-image,
html[data-theme="dark"] .product-card-slider,
html[data-theme="dark"] .offer-img-box,
html[data-theme="dark"] .offer-img-box img,
html[data-theme="dark"] .look-item,
html[data-theme="dark"] .look-item img {
    background: var(--bg-elevated) !important;
    background-color: var(--bg-elevated) !important;
}

/* Soft gray leftovers (#f5/#f7/#f8/#fa) common in UI chips */
html[data-theme="dark"] .wishlist-btn,
html[data-theme="dark"] .qty-btn,
html[data-theme="dark"] .close-modal,
html[data-theme="dark"] #clearSearchHistory,
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .acc-btn--ghost,
html[data-theme="dark"] .acc-btn--outline {
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Search bar navy text leftovers */
html[data-theme="dark"] .search-filter-btn,
html[data-theme="dark"] .header-search-slide .search-expand-form input[type="text"],
html[data-theme="dark"] .header-search-slide .search-close-btn,
html[data-theme="dark"] .header-search-slide .search-submit-btn {
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .header-search-slide .search-expand-form:focus-within {
    border-color: var(--primary-light) !important;
    background: var(--input-bg) !important;
}

/* Keep slider thumbs / active dots subtle but not pure white plate */
html[data-theme="dark"] .samraa-price-slider .samraa-range-input::-webkit-slider-thumb,
html[data-theme="dark"] .hero-slider-dots .dot.active,
html[data-theme="dark"] .nh-dot.active,
html[data-theme="dark"] .slider-dot.active {
    background: var(--primary-light) !important;
    background-color: var(--primary-light) !important;
}

/* Sections / wrappers often left as white from inline or utility classes */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] [class*="bg-white"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"] {
    background: var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
}

html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color: #111"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color: #222"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#23214f"],
html[data-theme="dark"] [style*="color: #23214f"],
html[data-theme="dark"] [style*="color:#2a2769"],
html[data-theme="dark"] [style*="color: #2a2769"] {
    color: var(--text-main) !important;
}

/* Account body hardcode */
html[data-theme="dark"].acc-dash-html body.acc-dash-mode,
html[data-theme="dark"] body.acc-dash-mode {
    background: var(--acc-surface) !important;
    color: var(--text-main) !important;
}

/* ==== Lookbook page ==== */
html[data-theme="dark"] .lookbook-page {
    background: var(--bg-main) !important;
}

html[data-theme="dark"] .lookbook-hero {
    background: var(--bg-surface) !important;
}

html[data-theme="dark"] .hero-text-card {
    background: var(--bg-elevated) !important;
    box-shadow: var(--shadow-lg) !important;
}

html[data-theme="dark"] .hero-text-card h1,
html[data-theme="dark"] .explore-scroll,
html[data-theme="dark"] .category-tag {
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .lookbook-links a {
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
    background: transparent !important;
}

html[data-theme="dark"] .lookbook-links a:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .occ-info {
    background: linear-gradient(to top, var(--bg-main), transparent) !important;
}

html[data-theme="dark"] .mosaic-text span,
html[data-theme="dark"] .mosaic-text h3,
html[data-theme="dark"] .floating-badge {
    color: #ffffff !important;
}

/* ==== Guest account bottom sheet ==== */
html[data-theme="dark"] .acc-sheet {
    background: var(--bg-elevated) !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .acc-sheet__handle {
    background: rgba(243, 244, 246, 0.28) !important;
}

html[data-theme="dark"] .acc-sheet__title,
html[data-theme="dark"] .acc-sheet__text strong {
    color: var(--text-main) !important;
}

html[data-theme="dark"] .acc-sheet__sub,
html[data-theme="dark"] .acc-sheet__text span,
html[data-theme="dark"] .acc-sheet__chevron {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .acc-sheet__row {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .acc-sheet__row:hover,
html[data-theme="dark"] .acc-sheet__row:focus-visible {
    background: var(--input-bg) !important;
    border-color: rgba(123, 119, 212, 0.45) !important;
}

html[data-theme="dark"] .acc-sheet__icon {
    background: rgba(90, 85, 194, 0.22) !important;
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .acc-sheet__row[data-action="guest"] .acc-sheet__icon {
    background: rgba(201, 169, 106, 0.22) !important;
    color: var(--gold-accent) !important;
}

/* ==== Contact page: icons + subject dropdown ==== */
html[data-theme="dark"] .item-icon {
    background: var(--bg-elevated) !important;
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .item-icon i {
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .social-grid-modern {
    background: transparent !important;
}

html[data-theme="dark"] .social-grid-modern a {
    background: var(--bg-elevated) !important;
    color: var(--primary-light) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .social-grid-modern a i {
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .social-grid-modern a:hover,
html[data-theme="dark"] .social-grid-modern a:hover i {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .form-card-glass,
html[data-theme="dark"] .form-group-premium,
html[data-theme="dark"] .custom-dropdown {
    overflow: visible !important;
}

html[data-theme="dark"] .dropdown-selected {
    background: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .dropdown-selected.active {
    background: var(--bg-elevated) !important;
    border-color: var(--primary-light) !important;
}

html[data-theme="dark"] .dropdown-options {
    background: var(--bg-elevated) !important;
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 1200 !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .dropdown-options.show {
    max-height: 250px !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    visibility: visible !important;
}

html[data-theme="dark"] .dropdown-option {
    color: var(--text-main) !important;
    background: transparent !important;
}

html[data-theme="dark"] .dropdown-option:hover,
html[data-theme="dark"] .dropdown-option.selected {
    background: var(--hover-surface) !important;
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .form-group-premium input,
html[data-theme="dark"] .form-group-premium textarea,
html[data-theme="dark"] .form-group-premium input:focus,
html[data-theme="dark"] .form-group-premium textarea:focus {
    background: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .form-group-premium input:focus,
html[data-theme="dark"] .form-group-premium textarea:focus {
    border-color: var(--primary-light) !important;
}