/* ==========================================================
   dark-mode.css — JingYingLight complete dark mode
   ----------------------------------------------------------
   Loaded via wp_footer priority 1 — after ALL theme CSS.
   Prefix: .jyl-dark or [data-theme="dark"] (both set by
   initDarkMode() in main.js + jyl_dark_mode_antiflash()).
   No !important needed for token overrides (source order wins).
   !important used only where Elementor inline styles compete.
   ========================================================== */


/* ================================================================
   1. CSS TOKEN OVERRIDES
   ================================================================ */

.jyl-dark,
[data-theme="dark"] {
    color-scheme: dark;

    /* Remap beige/light tones to dark equivalents */
    --jyl-beige-xlight:  #2a2a2a;
    --jyl-beige-light:   #2e2e2e;
    --jyl-beige-medium:  #363636;
    --jyl-beige-dark:    #4a4a4a;
    --jyl-grey-xlight:   #666666;
    --jyl-grey-light:    #999999;

    /* Shadows */
    --jyl-shadow-sm:  0 4px 16px rgba(0,0,0,.55);
    --jyl-shadow-md:  0 3px 8px rgba(0,0,0,.70);
    --jyl-shadow-nav: 0 8px 12px rgba(0,0,0,.40);

    /* Rey structural bridges */
    --rey-body-bg:          var(--jyl-black);
    --rey-body-color:       var(--jyl-white);
    --rey-border-color:     rgba(255,255,255,.12);
    --rey-link-color:       var(--jyl-blue-light);
    --rey-link-hover-color: var(--jyl-blue);
    --rey-btn-bg:           var(--jyl-white);
    --rey-btn-color:        var(--jyl-black);
    --rey-btn-hover-bg:     var(--jyl-beige-dark);
}


/* ================================================================
   2. PAGE STRUCTURE
   ================================================================ */

.jyl-dark html,
.jyl-dark,
.jyl-dark body,
.jyl-dark .rey-siteWrapper,
.jyl-dark .rey-siteContent,
.jyl-dark #page,
.jyl-dark #content,
.jyl-dark main,
.jyl-dark #main {
    background-color: var(--jyl-black) !important;
    color:            var(--jyl-white) !important;
}

/* Header */
.jyl-dark .rey-siteHeader,
.jyl-dark .rey-siteHeader--custom {
    background-color: rgba(0,0,0,.88) !important;
    color:            var(--jyl-white) !important;
}

.jyl-dark .rey-siteHeader__inner,
.jyl-dark .rey-header-top {
    background: rgba(0,0,0,.88) !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* Scrolled state */
.jyl-dark .jyl-hdr--scrolled .rey-header-top,
.jyl-dark .jyl-hdr--scrolled .rey-siteHeader__inner {
    background: rgba(0,0,0,.95) !important;
}

/* Nav links */
.jyl-dark .rey-siteNav > ul > li > a {
    color: var(--jyl-white) !important;
}

/* Header icons */
.jyl-dark .rey-headerIcon-btn,
.jyl-dark .rey-headerIcon-btn.btn {
    background-color: transparent !important;
    color:            var(--jyl-white) !important;
}
.jyl-dark .rey-headerIcon-icon,
.jyl-dark .rey-headerIcon-icon svg,
.jyl-dark .rey-headerCart svg,
.jyl-dark .rey-headerAccount-btn svg {
    color: var(--jyl-white) !important;
}
.jyl-dark .rey-headerIcon-counter.--out {
    color:        var(--jyl-white) !important;
    border-color: var(--jyl-white) !important;
}

/* Search */
.jyl-dark .rey-searchForm input[type="text"],
.jyl-dark .rey-searchForm input[type="search"] {
    background:   rgba(255,255,255,.08) !important;
    color:        var(--jyl-white)       !important;
    border-color: rgba(255,255,255,.15)  !important;
}

/* Mobile nav drawer */
.jyl-dark .rey-mainNavigation--mobile,
.jyl-dark .rey-mobileNav-container {
    background-color: var(--jyl-black) !important;
    color:            var(--jyl-white) !important;
}
.jyl-dark .rey-mainNavigation--mobile a,
.jyl-dark .rey-mainMenu-mobile > .menu-item > a,
.jyl-dark .rey-mainMenu-mobile > .menu-item > a span {
    color: var(--jyl-white) !important;
}
.jyl-dark .rey-mobileNav-header {
    background-color: var(--jyl-black) !important;
    border-color:     rgba(255,255,255,.08) !important;
}
.jyl-dark .rey-mobileMenu-close { color: var(--jyl-white) !important; }
.jyl-dark .rey-mobileNav-footer { border-color: rgba(255,255,255,.08) !important; }
.jyl-dark .rey-mobileNav--footerItem { color: rgba(255,255,255,.75) !important; }
.jyl-dark .rey-mainNavigation--mobile .rey-icon { color: var(--jyl-white) !important; }

/* Footer */
.jyl-dark .rey-siteFooter,
.jyl-dark footer {
    background-color: var(--jyl-black) !important;
    color:            var(--jyl-white) !important;
}

/* Elementor containers — inherit, don't force white */
.jyl-dark .elementor-section,
.jyl-dark .e-con,
.jyl-dark .e-con-boxed {
    background-color: inherit !important;
    color:            inherit !important;
}


/* ================================================================
   3. TYPOGRAPHY & GLOBAL ELEMENTS
   ================================================================ */

.jyl-dark h1, .jyl-dark h2, .jyl-dark h3,
.jyl-dark h4, .jyl-dark h5, .jyl-dark h6 {
    color: var(--jyl-white);
}

.jyl-dark p,
.jyl-dark .elementor-widget-text-editor { color: rgba(255,255,255,.75); }

.jyl-dark .jyl-section-title { color: var(--jyl-white); }

.jyl-dark .jyl-spacer { border-color: rgba(255,255,255,.10); }


/* ================================================================
   4. BUTTONS & FORMS
   ================================================================ */

/* Dark button flips to light */
.jyl-dark .jyl-btn--dark {
    background: var(--jyl-beige-xlight);
    color:      var(--jyl-black);
}
.jyl-dark .jyl-btn--dark:hover { background: var(--jyl-beige-dark); }

/* Ghost button */
.jyl-dark .jyl-btn--ghost {
    border-color: rgba(255,255,255,.3);
    color:        var(--jyl-white);
}
.jyl-dark .jyl-btn--ghost:hover {
    background:   rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.5);
}

/* Elementor button overrides */
.jyl-dark a.elementor-button.jyl-btn--dark,
.jyl-dark .elementor-widget-button .elementor-button.jyl-btn--dark {
    background-color: var(--jyl-white) !important;
    color:            var(--jyl-black) !important;
}

/* Icon button */
.jyl-dark .jyl-icon-btn {
    background: var(--jyl-grey-medium);
    color:      var(--jyl-white);
}

/* Form inputs */
.jyl-dark input[type="text"],
.jyl-dark input[type="email"],
.jyl-dark input[type="password"],
.jyl-dark input[type="search"],
.jyl-dark input[type="number"],
.jyl-dark select,
.jyl-dark textarea {
    background-color: rgba(255,255,255,.06) !important;
    color:            var(--jyl-white)       !important;
    border-color:     rgba(255,255,255,.15)  !important;
}

/* Newsletter */
.jyl-dark .jyl-newsletter-form input[type="email"] {
    background:   rgba(255,255,255,.06) !important;
    color:        var(--jyl-white)       !important;
    border-color: rgba(255,255,255,.15)  !important;
}

/* WooCommerce buttons */
.jyl-dark input[type="submit"],
.jyl-dark a.button,
.jyl-dark button.button {
    background-color: var(--jyl-white)   !important;
    color:            var(--jyl-black) !important;
}


/* ================================================================
   5. MEGA MENU (.jyl-menu-*)
   Already has 28 rules in jyl-mega-menu.css — supplement gaps.
   ================================================================ */

.jyl-dark .jyl-menu-panel { background: var(--jyl-black); }
.jyl-dark .jyl-menu-panel-title { color: var(--jyl-white); }
.jyl-dark .jyl-menu-p0-btn { color: var(--jyl-white); }
.jyl-dark .jyl-menu-item-btn { color: rgba(255,255,255,.75); }
.jyl-dark .jyl-menu-item-btn:hover { color: var(--jyl-white); background: rgba(255,255,255,.08); }
.jyl-dark .jyl-menu-item-btn.is-selected { color: var(--jyl-white); background: rgba(255,255,255,.12); }
.jyl-dark .jyl-menu-see-all { color: var(--jyl-blue-light); }
.jyl-dark .jyl-menu-footer-divider { background: rgba(255,255,255,.15); }
.jyl-dark .jyl-menu-dark-toggle { background: var(--jyl-grey-medium); color: var(--jyl-white); }
.jyl-dark .jyl-menu-dark-toggle-icon { background: var(--jyl-grey-dark); color: var(--jyl-white); }
.jyl-dark .jyl-menu-prod-card__name { color: var(--jyl-white); }
.jyl-dark .jyl-menu-prod-card__desc { color: var(--jyl-grey-xlight); }
.jyl-dark .jyl-menu-prod-card + .jyl-menu-prod-card { border-top-color: var(--jyl-grey-medium); }
.jyl-dark .jyl-menu-prod-card__img { background: var(--jyl-grey-dark); }
.jyl-dark .jyl-menu-cat-thumb { background: var(--jyl-grey-dark); }
.jyl-dark .jyl-menu-arrow { color: var(--jyl-white); }
.jyl-dark .jyl-menu-arrow::before { background: var(--jyl-grey-medium); }
.jyl-dark .jyl-menu-back { background: var(--jyl-grey-medium); color: var(--jyl-white); }
.jyl-dark .jyl-menu-back:hover { background: var(--jyl-grey-light); }
.jyl-dark .jyl-menu-back-label { color: var(--jyl-white); }
.jyl-dark .jyl-menu-subgroup-title { color: var(--jyl-white); }
.jyl-dark .jyl-menu-tag--new { color: var(--jyl-blue-xlight); background: var(--jyl-blue); }


/* ================================================================
   6. HERO WIDGETS
   (.jyl-hero__*, fullscreen-hero, video-hero, auto-sliding-hero)
   Hero images are dark overlaid — text is already white.
   Only supplement structural backgrounds.
   ================================================================ */

/* Fullscreen hero content area */
.jyl-dark .jyl-hero__content-wrap { color: var(--jyl-white); }
.jyl-dark .jyl-hero__subtitle { color: rgba(255,255,255,.75); }

/* Auto-sliding hero */
.jyl-dark .jyl-ash__slide-title { color: var(--jyl-white); }
.jyl-dark .jyl-ash__slide-desc  { color: rgba(255,255,255,.75); }
.jyl-dark .jyl-ash__nav-btn {
    background:   rgba(255,255,255,.15) !important;
    color:        var(--jyl-white) !important;
    border-color: rgba(255,255,255,.2)  !important;
}
.jyl-dark .jyl-ash__nav-btn:hover {
    background: rgba(255,255,255,.25) !important;
}
.jyl-dark .jyl-ash__progress { background: rgba(255,255,255,.2); }
.jyl-dark .jyl-ash__progress-bar { background: var(--jyl-white); }

/* Video hero */
.jyl-dark .jyl-vh__content { color: var(--jyl-white); }
.jyl-dark .jyl-vh__subtitle { color: rgba(255,255,255,.75); }


/* ================================================================
   7. CATALOGUE SWIPER (.jyl-catalogue-*)
   ================================================================ */

.jyl-dark .jyl-catalogue-section          { background: var(--jyl-black); }
.jyl-dark .jyl-catalogue-section__heading { color: var(--jyl-white); }
.jyl-dark .jyl-catalogue-section__label  { color: rgba(255,255,255,.45); }
.jyl-dark .jyl-catalogue-section__desc   { color: rgba(255,255,255,.6); }

.jyl-dark .jyl-catalogue-card {
    border-color: var(--jyl-grey-medium);
    background:   #2a2a2a;
}
.jyl-dark .jyl-catalogue-card__actions .jyl-icon-btn {
    background: var(--jyl-grey-medium);
    color:      var(--jyl-white);
}

/* Nav arrows */
.jyl-dark .jyl-catalogue-prev,
.jyl-dark .jyl-catalogue-next {
    background:   rgba(0,0,0,.5) !important;
    color:        var(--jyl-white) !important;
    border-color: rgba(255,255,255,.2) !important;
}


/* ================================================================
   8. PRODUCT CATEGORY GRID (.jyl-cat-*, .jyl-cc__*)
   ================================================================ */

.jyl-dark .jyl-cat-card { background: var(--jyl-black); }

.jyl-dark .jyl-cc__title:not(.jyl-cc__title--light) { color: var(--jyl-white); }

.jyl-dark .jyl-cat-card:hover .jyl-cc__title { color: var(--jyl-blue-light); }

.jyl-dark .jyl-cc__cta-btn { color: var(--jyl-white); border-color: rgba(255,255,255,.3); }
.jyl-dark .jyl-cc__cta-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }


/* ================================================================
   9. SERVICES SWIPER (.jyl-services-*, .jyl-service-card*)
   ================================================================ */

.jyl-dark .jyl-services-section          { background: var(--jyl-black); }
.jyl-dark .jyl-services-section__heading { color: var(--jyl-white); }
.jyl-dark .jyl-services-section__label  { color: rgba(255,255,255,.45); }
.jyl-dark .jyl-services-section__desc   { color: rgba(255,255,255,.6); }

.jyl-dark .jyl-service-card             { border-color: rgba(255,255,255,.12); }
.jyl-dark .jyl-service-card:hover       { box-shadow: 0 12px 32px rgba(0,0,0,.5); }


/* ================================================================
   10. FOOTER CTA (.jyl-footer-cta*)
   Already uses white text on colored background — supplement only.
   ================================================================ */

.jyl-dark .jyl-footer-cta-wrap { background: var(--jyl-black); }

.jyl-dark .jyl-footer-cta {
    /* Glow balls remain, just ensure text legibility */
    color: var(--jyl-white);
}

.jyl-dark .jyl-footer-cta__text { color: var(--jyl-white); }


/* ================================================================
   11. FOOTER NAV / SOCIAL / LEGAL
   (rules also exist in base.css — these reinforce with [data-theme])
   ================================================================ */

[data-theme="dark"] .jyl-footer-nav__col-title { color: var(--jyl-white); }
[data-theme="dark"] .jyl-footer-nav__link      { color: var(--jyl-white); }
[data-theme="dark"] .jyl-footer-nav__link:hover{ color: var(--jyl-blue-light); }
[data-theme="dark"] .jyl-social-link           { color: var(--jyl-white); }
[data-theme="dark"] .jyl-social-link:hover     { color: var(--jyl-blue-light); }
[data-theme="dark"] .jyl-footer-legal,
[data-theme="dark"] .jyl-footer-legal a        { color: rgba(255,255,255,.55); }


/* ================================================================
   12. WOOCOMMERCE
   ================================================================ */

/* Product title */
.jyl-dark .woocommerce ul.products li.product .woocommerce-loop-product__title,
.jyl-dark .woocommerce-loop-product__title { color: var(--jyl-white) !important; }

/* Product image bg */
.jyl-dark .rey-productThumbnail,
.jyl-dark .rey-productThumbnail-inner,
.jyl-dark li.product .woocommerce-loop-product__link,
.jyl-dark li.product figure { background-color: #1e1e1e !important; }

/* Price */
.jyl-dark .price,
.jyl-dark .woocommerce-Price-amount { color: var(--jyl-white) !important; }

/* Result count */
.jyl-dark .woocommerce-result-count { color: rgba(255,255,255,.55) !important; }

/* Ordering */
.jyl-dark .woocommerce-ordering label.btn,
.jyl-dark label[for="catalog-orderby-list"] {
    background-color: transparent !important;
    color:            var(--jyl-white) !important;
    border-color:     rgba(255,255,255,.4) !important;
}
.jyl-dark .woocommerce-ordering select,
.jyl-dark #catalog-orderby-list {
    background-color: var(--jyl-black) !important;
    color:            var(--jyl-white) !important;
    border-color:     rgba(255,255,255,.15) !important;
}

/* Filter button */
.jyl-dark .rey-filterBtn__label,
.jyl-dark .rey-filterBtn__label.btn {
    background-color: transparent !important;
    color:            var(--jyl-white) !important;
    border-color:     rgba(255,255,255,.4) !important;
}
.jyl-dark .rey-filterBtn__label svg,
.jyl-dark .rey-filterBtn__label span {
    color: var(--jyl-white) !important;
    fill:  var(--jyl-white) !important;
}

/* Filter sidebar */
.jyl-dark .rey-sidebar,
.jyl-dark .rey-filterSidebar,
.jyl-dark .rey-sidebarInner { background: var(--jyl-black) !important; color: var(--jyl-white) !important; }

.jyl-dark .reyajfilter-layered-navInner a { color: rgba(255,255,255,.75) !important; }
.jyl-dark .reyajfilter-layered-navInner a:hover { color: var(--jyl-white) !important; }
.jyl-dark .widget-title { color: var(--jyl-white) !important; }

/* Badges */
.jyl-dark .rey-new-badge,
.jyl-dark .rey-itemBadge { background-color: var(--jyl-blue) !important; color: var(--jyl-white) !important; }
.jyl-dark span.onsale     { color: var(--jyl-white) !important; }

/* Add to cart button */
.jyl-dark .rey-btn--under { color: var(--jyl-white) !important; }

/* Breadcrumbs */
.jyl-dark .woocommerce-breadcrumb-wrapper,
.jyl-dark .rey-breadcrumbs { color: rgba(255,255,255,.45) !important; }

/* Pagination */
.jyl-dark .woocommerce-pagination .page-numbers,
.jyl-dark .rey-pagination .page-numbers { color: var(--jyl-white) !important; border-color: rgba(255,255,255,.2) !important; }
.jyl-dark .woocommerce-pagination .page-numbers.current,
.jyl-dark .rey-pagination .page-numbers.current { background: var(--jyl-white) !important; color: var(--jyl-black) !important; }


/* ================================================================
   13. ADD TO CART POPUP
   ================================================================ */

.jyl-dark .reymodal__window {
    background-color: var(--jyl-black) !important;
    color:            var(--jyl-white) !important;
}
.jyl-dark .rey-acPopup-header {
    background-color: var(--jyl-black) !important;
    border-color:     rgba(255,255,255,.08) !important;
}
.jyl-dark .rey-acPopup-header h2    { color: var(--jyl-white) !important; }
.jyl-dark .rey-acPopup-content       { background-color: var(--jyl-black) !important; }
.jyl-dark .rey-acPopup .rey-productInner,
.jyl-dark .rey-acPopup .rey-productThumbnail { background-color: #1e1e1e !important; }
.jyl-dark .rey-acPopup .woocommerce-loop-product__title,
.jyl-dark .rey-acPopup .woocommerce-loop-product__title a { color: var(--jyl-white) !important; }
.jyl-dark .rey-acPopup-buttons {
    background-color: var(--jyl-black) !important;
    border-color:     rgba(255,255,255,.08) !important;
}
.jyl-dark .rey-acPopup-buttons .btn-primary {
    background-color: var(--jyl-white)   !important;
    color:            var(--jyl-black) !important;
}
.jyl-dark .rey-acPopup-buttons .btn-secondary {
    background-color: rgba(255,255,255,.08)  !important;
    color:            var(--jyl-white)         !important;
    border-color:     rgba(255,255,255,.2)    !important;
}
.jyl-dark .reymodal__close { color: var(--jyl-white) !important; }

/* ================================================================
   14. SCROLLBAR / SELECTION
   ================================================================ */

.jyl-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }
.jyl-dark ::selection { background: var(--jyl-white); color: var(--jyl-black); }


/* ================================================================
   15. STICKY HEADER
   --sticky-gs-top-bg-color and --sticky-gs-top-color are defined
   in :root inline style by Rey. Override via CSS variable
   redefinition under .jyl-dark so the sticky bar uses dark bg.
   ================================================================ */

.jyl-dark,
[data-theme="dark"] {
    --sticky-gs-top-bg-color: var(--jyl-black) !important;
    --sticky-gs-top-color:    var(--jyl-white)  !important;
}

.jyl-dark .rey-stickyContent[data-align="top"] > .elementor {
    background-color: var(--jyl-black) !important;
    color:            var(--jyl-white) !important;
}


/* ================================================================
   16. ELEMENTOR DIVIDER
   --divider-color: #FAFAFA defined in post-225.css with selector:
   .elementor-225 .elementor-element.elementor-element-b6cee0e
   We prefix .jyl-dark to match specificity + win by source order.
   ================================================================ */

.jyl-dark .elementor-225 .elementor-element.elementor-element-b6cee0e {
    --divider-color: rgba(255,255,255,.10) !important;
}

/* Generic fallback for any other dividers with near-white color */
.jyl-dark .elementor-divider-separator {
    border-color: rgba(255,255,255,.10) !important;
}