/* EpicKey accessible light/dark theme layer.
   Loaded after OmarTheme and RivoraMart so both presentations share one mode. */

:root {
    color-scheme: light;
    --ek-page-bg: #ffffff;
    --ek-page-bg-soft: #f6f8fc;
    --ek-surface: #ffffff;
    --ek-surface-raised: #ffffff;
    --ek-surface-muted: #f1f5f9;
    --ek-text: #081828;
    --ek-text-muted: #586579;
    --ek-border: #dfe5ef;
    --ek-shadow: 0 12px 32px rgba(8, 24, 40, 0.09);
    --ek-control-bg: #ffffff;
    --ek-control-focus: rgba(1, 103, 243, 0.24);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ek-page-bg: #0b1120;
    --ek-page-bg-soft: #0f172a;
    --ek-surface: #111c2e;
    --ek-surface-raised: #162238;
    --ek-surface-muted: #1b2940;
    --ek-text: #eef4fc;
    --ek-text-muted: #b6c2d3;
    --ek-border: #2c3b52;
    --ek-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
    --ek-control-bg: #111c2e;
    --ek-control-focus: rgba(78, 148, 255, 0.34);
    --rm-secondary: #eef4fc;
    --rm-text: #b6c2d3;
    --rm-light-bg: #0f172a;
    --rm-border: #2c3b52;
}

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

html.epickey-theme-ready body,
html.epickey-theme-ready .header,
html.epickey-theme-ready .mobile-bottom-nav {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

::selection {
    background: #0167f3;
    color: #ffffff;
}

/* Accessible header toggle */
.epickey-theme-toggle {
    width: 56px;
    height: 34px;
    flex: 0 0 56px;
    margin-right: 14px;
    padding: 0;
    border: 1px solid var(--ek-border);
    border-radius: 999px;
    background: transparent;
    color: var(--ek-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.epickey-theme-toggle-track {
    position: relative;
    width: 50px;
    height: 28px;
    border-radius: inherit;
    background: #e7edf8;
    box-shadow: inset 0 0 0 1px rgba(8, 24, 40, 0.04);
    display: block;
}

.epickey-theme-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(8, 24, 40, 0.22);
    transition: transform 180ms ease, background-color 180ms ease;
    z-index: 1;
}

.epickey-theme-icon {
    position: absolute;
    top: 7px;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    z-index: 2;
}

.epic-key-theme-sun {
    left: 7px;
    color: #ca6b00;
}

.epic-key-theme-moon {
    right: 7px;
    color: #52627a;
}

html[data-theme="dark"] .epickey-theme-toggle-track {
    background: #27364d;
}

html[data-theme="dark"] .epickey-theme-toggle-thumb {
    background: #e8eef8;
    transform: translateX(22px);
}

html[data-theme="dark"] .epic-key-theme-sun {
    color: #8d9ab0;
}

html[data-theme="dark"] .epic-key-theme-moon {
    color: #3159a8;
}

.epickey-theme-toggle:hover {
    border-color: #0167f3;
}

.epickey-theme-toggle:focus-visible {
    outline: 3px solid #0167f3;
    outline-offset: 3px;
}

.epickey-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Storefront foundations */
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] :is(
    .products-shop,
    .products-page,
    .used-products-page,
    .product-show-page,
    .shopgrids-cart-page,
    .shopgrids-checkout-page,
    .account-shop-page,
    .auth-shop-page,
    .blog-page,
    .blog-detail-page,
    .about-shop-page,
    .contact-shop-page
) {
    background-color: var(--ek-page-bg) !important;
    color: var(--ek-text);
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, legend, label, .title, .page-title) {
    color: var(--ek-text) !important;
}

html[data-theme="dark"] :is(p, .subtitle, .section-description, .form-hint, .form-text, .text-muted) {
    color: var(--ek-text-muted) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--ek-border);
    opacity: 1;
}

/* Header and navigation */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header .header-middle,
html[data-theme="dark"] .header > .container,
html[data-theme="dark"] .navbar-area.sticky {
    background: var(--ek-surface) !important;
    border-color: var(--ek-border) !important;
}

html[data-theme="dark"] .header .topbar {
    background: #070d19 !important;
}

html[data-theme="dark"] .header .header-middle .navbar-brand.epic-brand .epic-brand-text,
html[data-theme="dark"] .header :is(.nav-hotline i, .nav-hotline h3, .mega-category-menu .cat-button) {
    color: var(--ek-text) !important;
}

html[data-theme="dark"] .header .nav-hotline h3 span {
    color: var(--ek-text-muted) !important;
}

html[data-theme="dark"] .header :is(.navbar-cart .wishlist a, .navbar-cart .cart-items .main-btn) {
    color: var(--ek-text) !important;
    background: var(--ek-surface-raised) !important;
    border-color: var(--ek-border) !important;
}

html[data-theme="dark"] .header .main-menu-search .navbar-search,
html[data-theme="dark"] .header .navbar-search :is(.search-select, .search-input),
html[data-theme="dark"] .header .navbar-search :is(select, input) {
    color: var(--ek-text) !important;
    background: var(--ek-control-bg) !important;
    border-color: var(--ek-border) !important;
}

html[data-theme="dark"] .header :is(.navbar-collapse, .sub-menu, .sub-category, .shopping-item) {
    background: var(--ek-surface-raised) !important;
    border-color: var(--ek-border) !important;
    box-shadow: var(--ek-shadow) !important;
}

html[data-theme="dark"] .header :is(.navbar-nav .nav-item a, .sub-menu a, .sub-category a) {
    color: var(--ek-text) !important;
}

html[data-theme="dark"] .header .mobile-menu-btn .toggler-icon {
    background-color: var(--ek-text) !important;
}

/* Breadcrumbs and common content surfaces */
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .breadcrumbs .breadcrumbs-content {
    background: var(--ek-page-bg-soft) !important;
    border-color: var(--ek-border) !important;
}

html[data-theme="dark"] .breadcrumbs :is(a, li) {
    color: var(--ek-text-muted) !important;
}

html[data-theme="dark"] :is(
    .card,
    .modal-content,
    .dropdown-menu,
    .list-group-item,
    .single-product,
    .single-blog,
    .sidebar-widget,
    .single-widget,
    .product-grid-topbar,
    .products-internal-links,
    .blog-widget,
    .blog-intro-box,
    .blog-article-card,
    .blog-related-wrap,
    .blog-empty-state,
    .no-products-box,
    .empty-state
) {
    color: var(--ek-text) !important;
    background: var(--ek-surface) !important;
    border-color: var(--ek-border) !important;
    box-shadow: var(--ek-shadow);
}

html[data-theme="dark"] :is(.single-product, .single-blog) :is(.product-info, .blog-content) {
    background: var(--ek-surface) !important;
}

html[data-theme="dark"] :is(.single-product, .single-blog) :is(.title a, h3 a, h4 a, .blog-title) {
    color: var(--ek-text) !important;
}

html[data-theme="dark"] :is(.single-product .product-image, .product-gallery, .product-images, .blog-image) {
    background: #f8fafc !important;
    border-color: var(--ek-border) !important;
}

html[data-theme="dark"] :is(
    .trending-product,
    .special-offer,
    .blog-section,
    .product-grids,
    .product-details-info,
    .related-products-section,
    .shopping-cart.section,
    .checkout-wrapper.section,
    .account-section.section,
    .auth-hero.section,
    .contact-main,
    .about-story,
    .about-values,
    .about-coverage,
    .about-products-focus,
    .about-setup-guide,
    .about-brand-spotlight,
    .about-brand-directory,
    .about-faq
) {
    background: var(--ek-page-bg) !important;
}

/* Filters, controls and forms */
html[data-theme="dark"] :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .city-search-input
) {
    color: var(--ek-text) !important;
    background-color: var(--ek-control-bg) !important;
    border-color: var(--ek-border) !important;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: #8fa0b7 !important;
    opacity: 1;
}

html[data-theme="dark"] :is(input, select, textarea, button):focus-visible {
    outline-color: #5b9cff;
}

html[data-theme="dark"] :is(input, select, textarea):focus {
    border-color: #5b9cff !important;
    box-shadow: 0 0 0 3px var(--ek-control-focus) !important;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ek-text);
    -webkit-box-shadow: 0 0 0 1000px var(--ek-control-bg) inset;
    caret-color: var(--ek-text);
}

html[data-theme="dark"] :is(
    .product-sidebar,
    .products-sidebar,
    .toolbar-controls,
    .toolbar-search,
    .category-filter-option,
    .brand-filter-chip,
    .category-chip,
    .blog-search-form,
    .blog-topic-list,
    .tag-pill
) {
    color: var(--ek-text) !important;
    background: var(--ek-surface) !important;
    border-color: var(--ek-border) !important;
}

/* Product detail and verified reviews */
html[data-theme="dark"] :is(
    .product-des,
    .product-specs-table-wrap,
    .product-reviews-section,
    .reviews-summary-panel,
    .reviews-score-card,
    .reviews-list-panel,
    .review-form-panel,
    .review-card-body,
    .review-state-box,
    .verified-review-card,
    .verified-review-form
) {
    color: var(--ek-text) !important;
    background: var(--ek-surface) !important;
    border-color: var(--ek-border) !important;
    box-shadow: var(--ek-shadow);
}

html[data-theme="dark"] :is(.product-specs-table, .table) {
    --bs-table-bg: var(--ek-surface);
    --bs-table-color: var(--ek-text);
    --bs-table-border-color: var(--ek-border);
    color: var(--ek-text) !important;
    background: var(--ek-surface) !important;
    border-color: var(--ek-border) !important;
}

html[data-theme="dark"] :is(.product-specs-table, .table) :is(th, td, tr) {
    color: var(--ek-text) !important;
    background-color: transparent !important;
    border-color: var(--ek-border) !important;
}

/* Cart and checkout */
html[data-theme="dark"] :is(
    .cart-list-head,
    .cart-single-list,
    .cart-empty-state,
    .checkout-steps-form-style-1,
    .checkout-steps-form-content,
    .checkout-payment-option,
    .checkout-payment-form,
    .checkout-sidebar-coupon,
    .checkout-sidebar-price-table,
    .checkout-summary-item,
    .checkout-trust-badges div
) {
    color: var(--ek-text) !important;
    background: var(--ek-surface) !important;
    border-color: var(--ek-border) !important;
    box-shadow: var(--ek-shadow);
}

html[data-theme="dark"] .checkout-summary-item img,
html[data-theme="dark"] .cart-item-media {
    background: #f8fafc !important;
}

/* Authentication and customer account */
html[data-theme="dark"] :is(
    .auth-form-card,
    .auth-input-wrap,
    .auth-mini-stats li,
    .account-sidebar,
    .account-content,
    .account-welcome-card,
    .stat-card,
    .order-card,
    .settings-section,
    .details-grid,
    .order-details-grid,
    .recent-orders
) {
    color: var(--ek-text) !important;
    background: var(--ek-surface) !important;
    border-color: var(--ek-border) !important;
    box-shadow: var(--ek-shadow);
}

html[data-theme="dark"] .account-nav a {
    color: var(--ek-text-muted) !important;
    border-color: var(--ek-border) !important;
}

html[data-theme="dark"] .account-nav a:hover,
html[data-theme="dark"] .account-nav a.active {
    color: #ffffff !important;
}

/* About, contact and editorial content */
html[data-theme="dark"] :is(
    .about-story-card,
    .about-value-card,
    .about-coverage-card,
    .about-setup-card,
    .about-brand-card,
    .about-brand-directory-card,
    .about-seo-card,
    .about-metric-card,
    .contact-form-card,
    .contact-info-card,
    .contact-faq-item,
    .blog-card,
    .blog-featured-item,
    .blog-article-content,
    .blog-article-cta
) {
    color: var(--ek-text) !important;
    background: var(--ek-surface) !important;
    border-color: var(--ek-border) !important;
    box-shadow: var(--ek-shadow);
}

html[data-theme="dark"] :is(.about-brand-directory-logo, .brand-logo-box) {
    background: #ffffff !important;
    border-color: var(--ek-border) !important;
}

/* RivoraMart mobile homepage */
@media (max-width: 991.98px) {
    .header .navbar-cart .wishlist {
        display: none;
    }

    html[data-theme="dark"] :is(
        .mobile-home-wrapper,
        .mobile-brand-logo-section,
        .mobile-category-section,
        .mobile-products-section,
        .mobile-product-slider-section,
        .mobile-promo-section,
        .mobile-lists-section,
        .mobile-blog-section,
        .mobile-features-section
    ) {
        background: var(--ek-page-bg) !important;
        border-color: var(--ek-border) !important;
    }

    html[data-theme="dark"] :is(
        .mobile-product-card,
        .mobile-deal-card,
        .mobile-list-item,
        .mobile-blog-card,
        .mobile-feature-item,
        .mobile-list-tab
    ) {
        color: var(--ek-text) !important;
        background: var(--ek-surface) !important;
        border-color: var(--ek-border) !important;
        box-shadow: var(--ek-shadow);
    }

    html[data-theme="dark"] :is(
        .mobile-section-title,
        .mobile-product-name,
        .mobile-deal-name,
        .mobile-list-name,
        .mobile-blog-title,
        .mobile-feature-info h3,
        .mobile-category-name
    ),
    html[data-theme="dark"] :is(
        .mobile-product-name a,
        .mobile-deal-name a,
        .mobile-list-name a,
        .mobile-blog-title a
    ) {
        color: var(--ek-text) !important;
    }

    html[data-theme="dark"] :is(
        .mobile-product-category,
        .mobile-product-stock,
        .mobile-list-category,
        .mobile-blog-excerpt,
        .mobile-feature-info span
    ) {
        color: var(--ek-text-muted) !important;
    }

    html[data-theme="dark"] :is(
        .mobile-product-image,
        .mobile-deal-image,
        .mobile-list-image,
        .mobile-brand-logo-link
    ) {
        background: #ffffff !important;
        border-color: #d8e0eb !important;
    }

    html[data-theme="dark"] .mobile-countdown-item {
        background: var(--ek-surface-muted) !important;
    }

    html[data-theme="dark"] .mobile-list-tab.active {
        color: #ffffff !important;
        background: var(--rm-primary) !important;
        border-color: var(--rm-primary) !important;
    }

    html[data-theme="dark"] .mobile-bottom-nav {
        background: linear-gradient(180deg, #111c2e 0%, #0b1322 100%) !important;
        border-color: var(--ek-border) !important;
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.34);
    }

    html[data-theme="dark"] .mobile-nav-link {
        color: #aebbd0 !important;
    }

    html[data-theme="dark"] .mobile-nav-link:is(.active, :hover) {
        color: #7bb1ff !important;
        background: #172943 !important;
        box-shadow: inset 0 0 0 1px #29496e;
    }
}

@media (max-width: 575.98px) {
    .epickey-theme-toggle {
        width: 50px;
        flex-basis: 50px;
        margin-right: 8px;
    }

    .epickey-theme-toggle-track {
        width: 46px;
    }

    html[data-theme="dark"] .epickey-theme-toggle-thumb {
        transform: translateX(18px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.epickey-theme-ready body,
    html.epickey-theme-ready .header,
    html.epickey-theme-ready .mobile-bottom-nav,
    .epickey-theme-toggle-thumb {
        transition: none !important;
    }
}