/* =====================================================================
   MIDNIGHT — front-end template overlay
   Sleek dark night-mode storefront: deep slate canvas, cyan glow accent,
   Orbitron display headings. Loaded AFTER the base stylesheet stack and
   scoped to body.tmpl-midnight, so it never affects the admin area.
   Content cards stay light for readability; the page canvas, accents,
   and body-level headings go dark / cyan.
   ===================================================================== */

/* ---- Page canvas ---------------------------------------------------- */
body.tmpl-midnight {
    background-color: #0f1622;
    background-image: linear-gradient(160deg, #0f1622 0%, #131c2b 55%, #0c1019 100%);
    font-family: 'Inter', 'Nunito', sans-serif;
}

/* ---- Display headings ----------------------------------------------- */
.tmpl-midnight .slider-content h2,
.tmpl-midnight .section-title h2,
.tmpl-midnight .page-title h2 {
    font-family: 'Orbitron', 'Inter', sans-serif;
    letter-spacing: 1px;
}
/* Homepage / related-products headings sit on the dark canvas → lighten */
.tmpl-midnight .section-title h2 { color: #eaf2fb; }

/* ---- Accent tokens (replace the base red #ff3030) ------------------- */
.tmpl-midnight .theme-bg { background: #18c5e0 !important; }
.tmpl-midnight .theme-color { color: #18c5e0 !important; }
.tmpl-midnight .theme-border { border-color: #18c5e0 !important; }
.tmpl-midnight .border-theme02 { border-color: #18c5e0 !important; }
.tmpl-midnight a.c-theme,
.tmpl-midnight .c-theme { color: #18c5e0 !important; }

/* Cart-count badge: dark text on the bright cyan for contrast */
.tmpl-midnight .s-count { color: #06121b !important; }

/* Primary buttons get a soft cyan glow */
.tmpl-midnight .web-btn.theme-bg { box-shadow: 0 8px 22px rgba(24, 197, 224, .28); }

/* Translucent homepage "latest / related" panel — keep subtle on dark */
.tmpl-midnight .product-area.pb-70 {
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}

/* ---- custom-bridge red accents → cyan ------------------------------- */
/* Category cards (white tiles on the dark canvas) */
.tmpl-midnight .site-category-box::before { background: #18c5e0; }
.tmpl-midnight .site-category-link:hover .site-category-box,
.tmpl-midnight .site-category-link:focus .site-category-box {
    border-color: #18c5e0;
    box-shadow: 0 12px 36px rgba(24, 197, 224, .18);
}
.tmpl-midnight .site-category-link:hover .site-category-box h4,
.tmpl-midnight .site-category-link:focus .site-category-box h4 { color: #0f7d92; }
.tmpl-midnight .site-category-link .site-category-box b.primary-color { color: #18c5e0; }

/* Active nav underline */
.tmpl-midnight .main-menu nav ul li a.site-nav-active,
.tmpl-midnight .main-menu nav ul li a.site-nav-active:hover { color: #18c5e0 !important; }
.tmpl-midnight .main-menu nav ul li a.site-nav-active::after { background: #18c5e0; }

/* Header nav + icons: lighten for legibility on the dark hero. Scoped to the
   top-level links only — the white "Pages" dropdown and the white search pill
   keep their own dark text. */
.tmpl-midnight .main-menu nav > ul > li > a { color: #cfe0ee !important; }
.tmpl-midnight .main-menu nav > ul > li:hover > a { color: #18c5e0 !important; }
.tmpl-midnight .main-menu ul li > a::before { background: #18c5e0; }
.tmpl-midnight header .dark-black-color,
.tmpl-midnight header .site-cart-toggle span,
.tmpl-midnight header .header-account span { color: #cfe0ee !important; }
.tmpl-midnight header .dark-black-color:hover,
.tmpl-midnight header .site-cart-toggle:hover span,
.tmpl-midnight header .header-account span:hover { color: #18c5e0 !important; }

/* Product-card title hover (dark teal stays readable on the white card) */
.tmpl-midnight .s-p-wrapper .single-product .single-product-info h6 a:hover { color: #0f7d92 !important; }

/* Shop pagination (base accent is #c88d4d) */
.tmpl-midnight .site-page-btn:hover,
.tmpl-midnight .site-page-active {
    background: #18c5e0;
    border-color: #18c5e0;
    color: #06121b !important;
}

/* Secondary mini-category label */
.tmpl-midnight .shop-mini-category { color: #6ad0ff; }

/* ---- Hero: dark sky + twinkling starfield + glowing cyan moon -------- */
/* Replaces the default light photo (set inline via data-background) and the
   plain white moving circle. Pure CSS on existing elements + pseudo-elements,
   so the hero markup, slides, and content stay exactly where they are. */
.tmpl-midnight .single-slider {
    position: relative;
    background-color: #0b1220 !important;
    background-image:
        radial-gradient(120% 90% at 80% 8%, rgba(24,197,224,.10) 0%, rgba(24,197,224,0) 55%),
        linear-gradient(160deg, #0b1220 0%, #0f1b2e 45%, #0a1018 100%) !important;
}
.tmpl-midnight .single-slider::before {
    content: "";
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
        radial-gradient(1px 1px at 90px 80px, rgba(255,255,255,.85), transparent),
        radial-gradient(1.5px 1.5px at 160px 120px, #cfefff, transparent),
        radial-gradient(1px 1px at 230px 50px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 290px 165px, rgba(255,255,255,.75), transparent),
        radial-gradient(1px 1px at 350px 95px, #ffffff, transparent);
    background-size: 380px 220px;
    background-repeat: repeat;
    animation: tmplStarDrift 90s linear infinite, tmplStarTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes tmplStarDrift { from { background-position: 0 0; } to { background-position: 380px 0; } }
@keyframes tmplStarTwinkle { 0% { opacity: .55; } 100% { opacity: 1; } }

/* Hero text on the dark sky — light + shadow so it stays readable over the
   gradient, the stars, and the glowing orb it drifts behind */
.tmpl-midnight .slider-content h2 { color: #eaf2fb !important; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.tmpl-midnight .slider-content p  { color: rgba(226,236,247,.85) !important; text-shadow: 0 1px 8px rgba(0,0,0,.55); }

/* The floating shape becomes a soft glowing cyan orb — dimmed so it never
   washes out the heading it drifts behind */
.tmpl-midnight .slider-shape .slider-bg-round {
    background: radial-gradient(circle at 38% 36%, rgba(242,255,255,.55) 0%, rgba(169,236,246,.30) 38%, rgba(24,197,224,.13) 70%, rgba(24,197,224,0) 100%) !important;
    box-shadow: 0 0 90px 24px rgba(24,197,224,.14);
    opacity: .7;
}

/* Inner-page title hero matches the template */
.tmpl-midnight .page-height {
    background-color: #0b1220 !important;
    background-image: linear-gradient(160deg, #0b1220 0%, #0f1b2e 50%, #0a1018 100%) !important;
}

/* Respect reduced-motion: keep the look, drop the motion */
@media (prefers-reduced-motion: reduce) {
    .tmpl-midnight .single-slider::before,
    .tmpl-midnight .slider-shape { animation: none !important; }
}