/* ==========================================================================
   MUVIO - STRICT MONOCHROME BLACKOUT DARK THEME & BILINGUAL ENGINE
   Pure Deep Black #000000, Deep Graphite #111413 & Pure White Contrast
   Green preserved ONLY for MUVIO logo, main action buttons & active badges
   ========================================================================== */

/* Bilingual System: Strict CSS Hide/Show by html lang attribute */
html[lang="uk"] .lang-en,
html[lang="ua"] .lang-en,
html:not([lang="en"]) .lang-en {
    display: none !important;
}

html[lang="en"] .lang-ua,
html[lang="en"] .lang-uk {
    display: none !important;
}

/* ==========================================================================
   MUVIO - GLOBAL BASE STYLES & TYPOGRAPHY
   Original Native System Typography (-apple-system, BlinkMacSystemFont, "SF Pro Display", etc.)
   ========================================================================== */

/* 1. Base Document Canvas & All Text */
html,
body,
*,
p,
ul,
ol,
li,
input,
select,
textarea,
label,
table,
td,
th,
.font-sans,
[class*="font-sans"],
.font-brand,
[class*="font-brand"],
button,
.chamfer-btn,
.chamfer-badge,
[class*="chamfer-badge"],
.badge,
nav a,
.mobile-nav-link {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
}

/* 2. Headings (h1, h2, h3, .hero-title, catalog model names) */
h1,
h2,
h3,
.hero-title,
[id*="catalog"] h3,
.catalog-card-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Specific styling for H1 / Hero */
h1,
.hero-title {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

/* Specific styling for H2, H3 */
h2,
h3 {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Brand Name in header/preloader */
.header-logo-text,
.preloader-brand-title,
a[aria-label*="MUVIO"] span.font-brand {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

/* 1. Base Document Canvas & Page Backgrounds */
:root {
    --bg-main: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --text-main: #111111;
    --text-muted: #555555;
    --border-subtle: #E2E8F0;
}

html.theme-dark,
html.dark,
html.dark-theme,
[data-theme="dark"],
body.dark,
body.theme-dark,
body.dark-theme {
    --bg-main: #000000;
    --bg-secondary: #000000;
    --text-main: #FFFFFF;
    --text-muted: #94A3B8;
    --border-subtle: #222222;
}

html.theme-dark,
html.dark,
html.dark-theme,
[data-theme="dark"] {
    color-scheme: dark;
    background-color: #000000 !important;
    --accent-primary: #1D5D3B;
    --accent-hover: #237248;
    --accent-border: #287A4E;
    --accent-glow: rgba(29, 93, 59, 0.45);
    --text-accent: #2E8B57;
    --accent-light: #287A4E;
    --badge-bg: rgba(29, 93, 59, 0.3);
    --badge-border: #1D5D3B;
}

html.theme-dark body,
html.dark body,
html.dark-theme body,
[data-theme="dark"] body,
body.dark,
body.theme-dark,
body.dark-theme {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

/* All outer sections, full-width wrappers & lateral fields */
html.theme-dark section,
html.theme-dark [class*="bg-[#123824]"],
html.theme-dark #calculator,
html.theme-dark .bg-slate-900,
html.theme-dark [class*="bg-slate-900"] {
    background-color: #000000 !important;
}

/* Lateral guide lines & vertical markers */
html.theme-dark [class*="bg-slate-200"],
html.theme-dark [class*="bg-gray-200"],
html.theme-dark .w-\[1px\].bg-slate-200 {
    background-color: #222222 !important;
}

/* 2. Containers, Cards, Calculator & Modals (Pure Black #000000 & Strict Dark Border #222222) */
html.theme-dark .bg-white,
html.theme-dark [class*="bg-gray-50"],
html.theme-dark [class*="bg-gray-100"],
html.theme-dark [class*="bg-slate-50"],
html.theme-dark [class*="bg-slate-100"],
html.theme-dark [class*="bg-zinc-50"],
html.theme-dark [class*="bg-neutral-50"],
html.theme-dark [class*="bg-[#F8FAFC]"],
html.theme-dark [class*="bg-[#F9FAFB]"],
html.theme-dark .chamfer-box,
html.theme-dark .tech-card,
html.theme-dark .vehicle-card,
html.theme-dark .card {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #222222 !important;
}

/* Override green card backgrounds to pure black */
html.theme-dark .chamfer-box.bg-\[\#1D5D3B\],
html.theme-dark div.bg-\[\#1D5D3B\],
html.theme-dark [class*="bg-[#1D5D3B]/"] {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

/* Inner preview frames & gray inner containers */
html.theme-dark .bg-gray-50,
html.theme-dark .bg-slate-100\/80,
html.theme-dark [class*="bg-[#1D5D3B]/10"],
html.theme-dark [class*="bg-[#1D5D3B]/15"],
html.theme-dark [class*="bg-[#1D5D3B]/20"],
html.theme-dark [class*="bg-[#1D5D3B]/25"],
html.theme-dark .border-gray-200 {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

/* 3. Header, Mobile Menu & Sticky Drawers */
header:not(.header-3tier),
.site-header-synced:not(.header-3tier),
.header:not(.header-3tier),
.header-container {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    overflow: visible !important;
}

header:not(.header-3tier),
.site-header-synced:not(.header-3tier),
.header:not(.header-3tier) {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 24px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

header.header-3tier,
.header-3tier {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.header-actions,
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

html.theme-dark header:not(.header-3tier),
html.theme-dark header.sticky:not(.header-3tier),
html.dark header:not(.header-3tier),
.dark header:not(.header-3tier),
.theme-dark header:not(.header-3tier),
[data-theme="dark"] header:not(.header-3tier),
html.theme-dark .site-header-synced:not(.header-3tier),
html.dark .site-header-synced:not(.header-3tier),
.dark .site-header-synced:not(.header-3tier),
.theme-dark .site-header-synced:not(.header-3tier),
[data-theme="dark"] .site-header-synced:not(.header-3tier) {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    background: rgba(11, 14, 12, 0.92) !important;
    background-color: rgba(11, 14, 12, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(39, 39, 42, 0.8) !important;
}

html.theme-dark header nav a,
html.dark header nav a,
html.theme-dark header .header-nav-link,
html.dark header .header-nav-link,
html.theme-dark .site-header-synced nav a,
html.dark .site-header-synced nav a,
html.theme-dark .site-header-synced .header-nav-link,
html.dark .site-header-synced .header-nav-link,
.dark .site-header-synced nav a,
.theme-dark .site-header-synced nav a,
[data-theme="dark"] .site-header-synced nav a {
    color: #f4f4f5 !important;
}

html.theme-dark header nav a:hover,
html.dark header nav a:hover,
html.theme-dark header .header-nav-link:hover,
html.dark header .header-nav-link:hover,
html.theme-dark .site-header-synced nav a:hover,
html.dark .site-header-synced nav a:hover,
html.theme-dark .site-header-synced .header-nav-link:hover,
html.dark .site-header-synced .header-nav-link:hover {
    color: #2E8B57 !important;
}

/* ==================== ВЫПАДАЮЩЕЕ МЕГА-МЕНЮ «КАТАЛОГ» В ТЕМНОЙ ТЕМЕ ==================== */
html.dark .catalog-mega-menu-inner,
html.theme-dark .catalog-mega-menu-inner,
[data-theme="dark"] .catalog-mega-menu-inner {
    background: #080A0C !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    color: #FFFFFF !important;
}

html.dark .catalog-section-title,
html.theme-dark .catalog-section-title,
[data-theme="dark"] .catalog-section-title {
    color: #94A3B8 !important;
}

html.dark .catalog-category-label,
html.theme-dark .catalog-category-label,
[data-theme="dark"] .catalog-category-label {
    color: #FFFFFF !important;
}

html.dark .catalog-link-card,
html.theme-dark .catalog-link-card,
[data-theme="dark"] .catalog-link-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .catalog-link-card:hover,
html.theme-dark .catalog-link-card:hover,
[data-theme="dark"] .catalog-link-card:hover {
    background: rgba(29, 93, 59, 0.15) !important;
    border-color: rgba(29, 93, 59, 0.4) !important;
}

html.dark .catalog-link-name,
html.theme-dark .catalog-link-name,
[data-theme="dark"] .catalog-link-name {
    color: #FFFFFF !important;
}

html.dark .catalog-link-card:hover .catalog-link-name,
html.theme-dark .catalog-link-card:hover .catalog-link-name,
[data-theme="dark"] .catalog-link-card:hover .catalog-link-name {
    color: #2E8B57 !important;
}

html.dark .catalog-link-arrow,
html.theme-dark .catalog-link-arrow,
[data-theme="dark"] .catalog-link-arrow {
    color: #94A3B8 !important;
}

html.dark .catalog-link-card:hover .catalog-link-arrow,
html.theme-dark .catalog-link-card:hover .catalog-link-arrow,
[data-theme="dark"] .catalog-link-card:hover .catalog-link-arrow {
    color: #2E8B57 !important;
}

html.dark .catalog-accessory-card,
html.theme-dark .catalog-accessory-card,
[data-theme="dark"] .catalog-accessory-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .catalog-accessory-card:hover,
html.theme-dark .catalog-accessory-card:hover,
[data-theme="dark"] .catalog-accessory-card:hover {
    background: rgba(29, 93, 59, 0.15) !important;
    border-color: rgba(29, 93, 59, 0.4) !important;
}

html.dark .catalog-accessory-name,
html.theme-dark .catalog-accessory-name,
[data-theme="dark"] .catalog-accessory-name {
    color: #FFFFFF !important;
}

html.dark .catalog-accessory-card:hover .catalog-accessory-name,
html.theme-dark .catalog-accessory-card:hover .catalog-accessory-name,
[data-theme="dark"] .catalog-accessory-card:hover .catalog-accessory-name {
    color: #2E8B57 !important;
}


html.theme-dark .site-header-synced a,
html.dark .site-header-synced a,
html.theme-dark .site-header-synced button,
html.dark .site-header-synced button,
html.theme-dark header a,
html.dark header a,
html.theme-dark header button,
html.dark header button {
    color: #f4f4f5 !important;
}

html.dark header a svg,
html.dark header button svg,
html.theme-dark header a svg,
html.theme-dark header button svg {
    color: #f4f4f5 !important;
    stroke: #f4f4f5 !important;
}

html.dark #theme-toggle .sun-icon,
html.theme-dark #theme-toggle .sun-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

html.theme-dark #mobileMenu,
html.theme-dark #mobile-menu,
html.theme-dark [data-mobile-menu="true"],
html.theme-dark [class*="bg-white/95"],
html.theme-dark [class*="bg-white/90"],
html.theme-dark [class*="bg-white/80"] {
    background-color: #000000 !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-color: #222222 !important;
}

/* Header Seamless Vector Logo (Strictly Transparent, No Square Background) */
.header-logo-wrap,
html.theme-dark .header-logo-wrap,
a .header-logo-wrap,
html.theme-dark a .header-logo-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html.dark header img,
html.dark .header-logo-img,
html.theme-dark header img,
html.theme-dark .header-logo-img,
body.dark header img,
body.dark .header-logo-img,
body.theme-dark header img,
body.theme-dark .header-logo-img,
.dark header img,
.dark .header-logo-img,
.theme-dark header img,
.theme-dark .header-logo-img,
[data-theme="dark"] header img,
[data-theme="dark"] .header-logo-img,
html.dark .header .logo img,
body.dark .header .logo img,
.dark-theme .header-logo img,
.dark-theme .header-logo-img {
    filter: brightness(0) invert(1) !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    background-color: transparent !important;
}

html.dark .header-logo,
html.dark .logo-text,
html.dark a.logo,
html.theme-dark .header-logo,
html.theme-dark .logo-text,
html.theme-dark a.logo,
[data-theme="dark"] .header-logo,
[data-theme="dark"] .logo-text,
[data-theme="dark"] a.logo {
    color: #FFFFFF !important;
}

html.dark .logo img,
html.dark .header-logo img,
html.theme-dark .logo img,
html.theme-dark .header-logo img,
[data-theme="dark"] .logo img,
[data-theme="dark"] .header-logo img {
    filter: brightness(0) invert(1) !important;
}

html.dark .header-logo-wrap svg,
html.dark .header-logo-wrap svg path,
html.theme-dark .header-logo-wrap svg,
html.theme-dark .header-logo-wrap svg path,
[data-theme="dark"] .header-logo-wrap svg,
[data-theme="dark"] .header-logo-wrap svg path {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: none !important;
    filter: none !important;
    opacity: 1 !important;
}

html.theme-dark a .header-logo-wrap+div>span:first-child {
    color: #FFFFFF !important;
}

html.theme-dark a .header-logo-wrap+div>div {
    color: #9CA3AF !important;
}

/* Section dividers & borders */
html.theme-dark .border-x,
html.theme-dark .border-y,
html.theme-dark .border-t,
html.theme-dark .border-b,
html.theme-dark .border-l,
html.theme-dark .border-r,
html.theme-dark .border-slate-200,
html.theme-dark .border-slate-300,
html.theme-dark .border-gray-100,
html.theme-dark .border-gray-200,
html.theme-dark .border-gray-300,
html.theme-dark .border-\[\#1D5D3B\]\/20,
html.theme-dark .border-\[\#1D5D3B\]\/30,
html.theme-dark .border-\[\#1D5D3B\]\/40,
html.theme-dark .divide-slate-200> :not([hidden])~ :not([hidden]),
html.theme-dark .divide-gray-200> :not([hidden])~ :not([hidden]) {
    border-color: #222222 !important;
}

/* 4. Pure White Contrast Text & Light Gray Subtitles */
html.theme-dark .text-gray-900,
html.theme-dark .text-gray-800,
html.theme-dark .text-black,
html.theme-dark .text-\[\#111827\],
html.theme-dark .text-slate-900,
html.theme-dark .text-slate-800,
html.theme-dark .text-slate-700,
html.theme-dark nav a,
html.theme-dark .mobile-nav-link,
html.theme-dark #header-user-name,
html.theme-dark .header-user-name,
html.theme-dark .settings-btn-label,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.theme-dark .font-brand.font-bold,
html.theme-dark .font-brand.font-black,
html.theme-dark .vehicle-title,
html.theme-dark .model-title,
html.theme-dark #rentalVehicleTitle,
html.theme-dark #resModelTitle {
    color: #FFFFFF !important;
}

/* Secondary & Dimmed Text */
html.theme-dark .text-\[\#4B5563\],
html.theme-dark .text-slate-600,
html.theme-dark .text-slate-500,
html.theme-dark .text-slate-400,
html.theme-dark .text-gray-600,
html.theme-dark .text-gray-500,
html.theme-dark .text-gray-400,
html.theme-dark .text-emerald-100 {
    color: #9CA3AF !important;
}

/* Navigation Links Hover */
html.theme-dark nav a:hover,
html.theme-dark .mobile-nav-link:hover {
    color: #2E8B57 !important;
}

/* 5. Green Highlights PRESERVED FOR Main Action Buttons, Active Badges & Accents */
html.theme-dark a.bg-\[\#1D5D3B\],
html.theme-dark button.bg-\[\#1D5D3B\],
html.theme-dark .chamfer-btn.bg-\[\#1D5D3B\],
html.theme-dark #calcTelegramBtn,
html.theme-dark #hero-choose-btn,
html.theme-dark #tab-all.bg-\[\#1D5D3B\] {
    background-color: #1D5D3B !important;
    border: 1px solid #1D5D3B !important;
    color: #FFFFFF !important;
    box-shadow: none !important; /* без неонової підсвітки, лише колір логотипа */
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}

html.theme-dark a.bg-\[\#1D5D3B\]:hover,
html.theme-dark button.bg-\[\#1D5D3B\]:hover,
html.theme-dark .chamfer-btn.bg-\[\#1D5D3B\]:hover,
html.theme-dark #calcTelegramBtn:hover,
html.theme-dark #hero-choose-btn:hover,
html.theme-dark #tab-all.bg-\[\#1D5D3B\]:hover {
    background-color: #16472D !important;
    border-color: #16472D !important;
    box-shadow: none !important;
}

html.theme-dark a.bg-\[\#1D5D3B\]:active,
html.theme-dark button.bg-\[\#1D5D3B\]:active,
html.theme-dark .chamfer-btn.bg-\[\#1D5D3B\]:active,
html.theme-dark #calcTelegramBtn:active,
html.theme-dark #hero-choose-btn:active,
html.theme-dark #tab-all.bg-\[\#1D5D3B\]:active {
    transform: scale(0.97) !important;
    box-shadow: none !important;
}

/* Active Status Badges & Payment Status Badges */
html.theme-dark #rentalStatusBadge,
html.theme-dark #userStatusBadge[data-status="active"],
html.theme-dark .badge-status-active,
html.theme-dark .badge-status-paid,
html.theme-dark [data-status="active"],
html.theme-dark [data-status="paid"],
html.theme-dark .badge-green,
html.theme-dark #modelTypeBadge,
html.theme-dark #calcVehicleBadge {
    background-color: rgba(29, 93, 59, 0.25) !important;
    color: #34A869 !important;
    border: 1px solid #1D5D3B !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Vehicle catalog card badge on photo in dark theme */
html.theme-dark .vehicle-card .chamfer-badge.bg-\[\#1D5D3B\],
html.theme-dark #catalogGrid .chamfer-badge.bg-\[\#1D5D3B\] {
    background-color: rgba(29, 93, 59, 0.25) !important;
    border: 1px solid #1D5D3B !important;
    color: #34A869 !important;
}

html.theme-dark #rentalContractNumber {
    color: #D1D5DB !important;
}

html.theme-dark #rentalPlateNumber {
    color: #FFFFFF !important;
}

/* Price Highlights (Comfortable eye-friendly emerald #2E8B57 / #287A4E) */
html.theme-dark #resTotalPrice,
html.theme-dark #resDeposit,
html.theme-dark #rentalRate,
html.theme-dark .text-\[\#1D5D3B\],
html.theme-dark span.text-\[\#1D5D3B\] {
    color: #2E8B57 !important;
    filter: none !important;
}

/* Duration Pills & Addon Cards in Calculator */
html.theme-dark .calc-pill-btn.is-active {
    background-color: #1D5D3B !important;
    border: 1px solid #287A4E !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

html.theme-dark .calc-pill-btn:not(.is-active) {
    background-color: #000000 !important;
    border-color: #222222 !important;
    color: #9CA3AF !important;
}

html.theme-dark .calc-pill-btn:not(.is-active):hover {
    border-color: #287A4E !important;
    color: #FFFFFF !important;
}

html.theme-dark .calc-addon-card.is-active {
    background-color: #000000 !important;
    border: 1px solid #287A4E !important;
    box-shadow: 0 0 10px rgba(29, 93, 59, 0.4) !important;
}

html.theme-dark .calc-addon-card:not(.is-active) {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

html.theme-dark .calc-addon-card:not(.is-active):hover {
    border-color: rgba(40, 122, 78, 0.6) !important;
}

/* 6. Form Inputs, Selects & Textareas */
html.theme-dark input:not([type="range"]),
html.theme-dark select,
html.theme-dark textarea {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #222222 !important;
}

html.theme-dark input:focus,
html.theme-dark select:focus,
html.theme-dark textarea:focus {
    border-color: #287A4E !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(29, 93, 59, 0.35) !important;
}

/* Checkboxes & Radio Buttons */
html.theme-dark input[type="checkbox"],
html.theme-dark input[type="radio"] {
    accent-color: #1D5D3B !important;
}

html.theme-dark input[type="checkbox"]:checked,
html.theme-dark input[type="radio"]:checked {
    background-color: #1D5D3B !important;
    border-color: #287A4E !important;
    box-shadow: none !important;
}

/* 7. Settings Dropdown Modal */
#settingsDropdown {
    transform-origin: top right;
}

html.theme-dark #settingsDropdown {
    background-color: #000000 !important;
    border-color: #222222 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.95), 0 0 0 1px #222222 !important;
}

html.theme-dark #settingsDropdown .border-b,
html.theme-dark #settingsDropdown .border-t {
    border-color: #222222 !important;
}

/* 8. Range Slider (Scale / Zoom) */
/* 8. Range Slider (Scale / Zoom) */
#font-scale-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 9999px;
    outline: none;
    background: #CBD5E1;
    transition: background 0.2s ease;
}

html.theme-dark #font-scale-slider {
    background: #242826 !important;
}

#font-scale-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1D5D3B;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, background 0.15s ease;
}

html.theme-dark #font-scale-slider::-webkit-slider-thumb {
    background: #1D5D3B;
    border-color: #000000;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}

#font-scale-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

#font-scale-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1D5D3B;
    cursor: pointer;
    border: 2px solid #FFFFFF;
}

html.theme-dark #font-scale-slider::-moz-range-thumb {
    background: #1D5D3B;
    border-color: #000000;
}

/* 9. Footer (Pure Black #000000) */
html.theme-dark footer,
html.theme-dark footer.bg-\[\#123824\] {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

/* 10. Minimalist Preloader / Splash Screen */
#page-preloader {
    background-color: #FFFFFF !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-preloader.hidden,
#page-preloader[data-hidden="true"],
#page-preloader.opacity-0,
#page-preloader.preloader-hidden,
#page-preloader.pointer-events-none {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -9999 !important;
}

#page-preloader .preloader-m-logo {
    color: #1D5D3B !important;
    fill: #1D5D3B !important;
}

/* Preloader Dark Mode Override */
html.dark #page-preloader,
html.theme-dark #page-preloader,
[data-theme="dark"] #page-preloader {
    background-color: #000000 !important;
}

html.dark #page-preloader .preloader-m-logo,
html.theme-dark #page-preloader .preloader-m-logo,
[data-theme="dark"] #page-preloader .preloader-m-logo {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: none !important;
    filter: none !important;
}

/* 10.1 Calculator Duration Badge In Dark Mode */
html.theme-dark #durationDaysBadge {
    background-color: rgba(29, 93, 59, 0.25) !important;
    color: #34A869 !important;
    border: 1px solid #1D5D3B !important;
    box-shadow: none !important;
}

/* 11. Service Hub Map (Google Maps Embed) */
.service-map-card {
    overflow: hidden !important;
    border-radius: 20px !important;
    position: relative !important;
}

html:not(.theme-dark) .service-hub-map,
html:not(.theme-dark) .service-map-card iframe,
html.theme-dark .service-hub-map,
html.theme-dark .service-map-card iframe,
html.dark .service-hub-map,
html.dark .service-map-card iframe,
.service-map-card iframe,
.service-hub-map {
    filter: none !important;
}

html.theme-dark .leaflet-popup-content-wrapper {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: 1px solid #222222 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85) !important;
}

html.theme-dark .leaflet-popup-content div {
    color: #FFFFFF !important;
}

html.theme-dark .leaflet-popup-content span {
    color: #9CA3AF !important;
}

html.theme-dark .leaflet-popup-tip {
    background: #000000 !important;
}

/* 12. Terms & Conditions High-Contrast Readability */
html.theme-dark .chamfer-box h2,
html.theme-dark section h2,
html.theme-dark .terms-header {
    color: #FFFFFF !important;
}

html.theme-dark .chamfer-box p,
html.theme-dark .chamfer-box ul,
html.theme-dark .chamfer-box li,
html.theme-dark .chamfer-box li span,
html.theme-dark .text-\[\#1F2937\],
html.theme-dark .text-\[\#111827\],
html.theme-dark .text-\[\#4B5563\] {
    color: #E5E7EB !important;
}

html.theme-dark .chamfer-box b,
html.theme-dark .chamfer-box strong,
html.theme-dark .chamfer-box span.font-bold {
    color: #FFFFFF !important;
}

/* Emerald Accents: Bright Vivid Emerald (#1D5D3B / #34D399) instead of muddy dark */
html.theme-dark .text-[#2E8B57],
html.theme-dark .text-emerald-300,
html.theme-dark .chamfer-box .text-\[\#1D5D3B\],
html.theme-dark .chamfer-box .text-\[\#24754A\] {
    color: #2E8B57 !important;
}

html.theme-dark span.w-2.h-2.bg-\[\#1D5D3B\],
html.theme-dark .bg-\[\#1D5D3B\].rounded-full {
    background-color: #1D5D3B !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.7) !important;
}

/* 13. Safari / iOS / macOS 120Hz ProMotion Native Scroll Engine & GPU Acceleration */
html,
body {
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Strictly no universal transitions that cause reflow/jank on scroll */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Completely disable hover effects & repaint/reflow triggers while finger/pointer scrolls */
body.is-scrolling,
body.is-scrolling * {
    pointer-events: none !important;
}

/* Clean static borders without blur, heavy shadows or outlines */
html.theme-dark .tech-card,
html.theme-dark .chamfer-box,
html.theme-dark .card,
html.theme-dark .product-card,
html.theme-dark section .shadow-sm,
html.theme-dark section .shadow-md,
html.theme-dark section .shadow-lg,
html.theme-dark section .shadow-xl,
html.theme-dark section .shadow-2xl,
html.theme-dark section [class*="shadow-"] {
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid #1F2E26 !important;
}

html.theme-dark .tech-card:hover,
html.theme-dark .chamfer-box:hover,
html.theme-dark .product-card:hover {
    box-shadow: none !important;
    outline: none !important;
    border-color: #2D4A3A !important;
}

/* Disable backdrop-filter and heavy filters on long scroll sections to eliminate scroll lag */
html.theme-dark section,
html.theme-dark section *,
html.theme-dark main,
html.theme-dark main * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Re-enable light blur strictly for top header */
header,
header.sticky {
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

/* GPU Hardware Composite Acceleration (120 FPS Video Layer) */
.product-card,
.catalog-grid,
#catalogGrid,
main,
section,
header,
.scroll-section,
.tech-card,
.chamfer-box,
#calculator {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
    will-change: transform;
}

/* 14. Header Action Buttons (Profile, Settings, Burger) - Strictly In-Place Behavior (No lateral shifts) */
.header-action-btn,
#settingsBtn,
#options-btn,
#burger-btn,
#mobileMenuBtn,
a[title="Особистий кабінет"] {
    transform: scale(1) !important;
    transform-origin: center center !important;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease !important;
    will-change: transform;
}

.header-action-btn:hover,
#settingsBtn:hover,
#options-btn:hover,
#burger-btn:hover,
#mobileMenuBtn:hover,
a[title="Особистий кабінет"]:hover {
    transform: scale(1.06) !important;
}

.header-action-btn:active,
#settingsBtn:active,
#options-btn:active,
#burger-btn:active,
#mobileMenuBtn:active,
a[title="Особистий кабінет"]:active {
    transform: scale(0.95) !important;
}

/* Mobile Menu Dark Mode Styling */
html.theme-dark #mobile-menu,
html.theme-dark #mobileMenu {
    background-color: #0A0D0C !important;
    border-color: #1F2E26 !important;
}

html.theme-dark #mobile-menu a,
html.theme-dark #mobileMenu a {
    color: #FFFFFF !important;
    border-bottom: 1px solid #1F2E26 !important;
}

html.theme-dark #mobile-menu a:last-child,
html.theme-dark #mobileMenu a:last-child {
    border-bottom: none !important;
}

html.theme-dark #mobile-menu a:hover,
html.theme-dark #mobileMenu a:hover {
    color: #2E8B57 !important;
    background-color: rgba(29, 93, 59, 0.2) !important;
}

/* 15. MUVIO Native Logo Preloader Animations */
@keyframes glowBreatheLight {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(29, 93, 59, 0.3));
        opacity: 0.95;
    }

    50% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 16px rgba(29, 93, 59, 0.55));
        opacity: 1;
    }
}

@keyframes glowBreatheDark {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(46, 139, 87, 0.6));
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 3px rgba(46, 139, 87, 0.85));
        opacity: 1;
    }
}

@keyframes muvioProgress {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(200%);
    }
}

.glow-breathe,
.animate-muvio-breathe {
    animation: glowBreatheLight 2s ease-in-out infinite;
}

html.theme-dark .glow-breathe,
html.theme-dark .animate-muvio-breathe {
    animation: glowBreatheDark 2s ease-in-out infinite;
}

.animate-muvio-progress,
.preloader-bar-line {
    animation: muvioProgress 1.4s ease-in-out infinite;
    will-change: transform;
}

/* 16. Header Action Icons (Profile & Gear & Burger) in Dark Theme */
html.theme-dark a[title="Особистий кабінет"],
html.theme-dark a[title="Особистий кабінет"] svg,
html.theme-dark a[title="Особистий кабінет"] span,
html.theme-dark #settingsBtn,
html.theme-dark #settingsBtn svg,
html.theme-dark #settingsBtn span,
html.theme-dark #options-btn,
html.theme-dark #options-btn svg,
html.theme-dark #options-btn span,
html.theme-dark #burger-btn,
html.theme-dark #burger-btn svg {
    color: #E5E7EB !important;
}

html.theme-dark a[title="Особистий кабінет"]:hover,
html.theme-dark a[title="Особистий кабінет"]:hover svg,
html.theme-dark a[title="Особистий кабінет"]:hover span,
html.theme-dark #settingsBtn:hover,
html.theme-dark #settingsBtn:hover svg,
html.theme-dark #settingsBtn:hover span,
html.theme-dark #options-btn:hover,
html.theme-dark #options-btn:hover svg,
html.theme-dark #options-btn:hover span,
html.theme-dark #burger-btn:hover,
html.theme-dark #burger-btn:hover svg {
    color: #2E8B57 !important;
}

/* 17. Cabinet Rental Control Buttons */
html.theme-dark #cabinet-btn-pay {
    background: linear-gradient(135deg, #1D5D3B 0%, #059669 100%) !important;
    background-color: #1D5D3B !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 10px 24px -6px rgba(16, 185, 129, 0.35) !important;
}

html.theme-dark #cabinet-btn-pay:hover {
    background: linear-gradient(135deg, #1D5D3B 0%, #047857 100%) !important;
    box-shadow: 0 14px 28px -6px rgba(16, 185, 129, 0.45) !important;
    filter: brightness(1.06) !important;
}

html.theme-dark #cabinet-btn-buyout {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #2E8B57 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: none !important;
}

html.theme-dark #cabinet-btn-buyout:hover {
    background-color: rgba(16, 185, 129, 0.22) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

html.theme-dark #cabinet-btn-buyout i,
html.theme-dark #cabinet-btn-buyout svg {
    color: #2E8B57 !important;
}

html.theme-dark #cabinet-btn-breakdown {
    background-color: rgba(239, 68, 68, 0.08) !important;
    color: #F87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    box-shadow: none !important;
}

html.theme-dark #cabinet-btn-breakdown:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #FCA5A5 !important;
}

html.theme-dark #cabinet-btn-breakdown i,
html.theme-dark #cabinet-btn-breakdown svg {
    color: #F87171 !important;
}

/* 18. Fix Status Badges in Cabinet (Pills styling with live emerald glow) */
html.theme-dark .badge-status-active,
html.theme-dark [data-status="active"],
html.theme-dark [data-status="paid"],
html.theme-dark #rentalStatusBadge,
html.theme-dark #userStatusBadge[data-status="active"] {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #2E8B57 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important;
    clip-path: none !important;
}

/* 19. Apple-like Smooth UX, Micro-Animations & Tactile Feedback */
html {
    scroll-behavior: smooth !important;
}

[id] {
    scroll-margin-top: 5.5rem;
}

button,
.chamfer-btn,
.mobile-nav-link,
a.btn,
a.chamfer-btn,
.calc-pill-btn,
.calc-addon-card,
.faq-trigger {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button:active,
.chamfer-btn:active,
a.chamfer-btn:active,
.calc-pill-btn:active,
.calc-addon-card:active,
.faq-trigger:active,
.mobile-nav-link:active {
    transform: scale(0.98) !important;
}

/* 20. FAQ Section in Dark Theme */
html.theme-dark #faq {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

html.theme-dark .faq-item {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

html.theme-dark .faq-item:hover {
    border-color: rgba(40, 122, 78, 0.5) !important;
}

html.theme-dark .faq-trigger {
    color: #FFFFFF !important;
}

html.theme-dark .faq-trigger.is-open {
    color: #2E8B57 !important;
}

html.theme-dark .faq-trigger.is-open span:first-child>span:first-child,
html.theme-dark .faq-trigger span:first-child>span:first-child.bg-\[\#1D5D3B\]\/10,
html.theme-dark .faq-icon-wrap {
    background-color: rgba(29, 93, 59, 0.2) !important;
    color: #2E8B57 !important;
}

html.theme-dark .faq-trigger .faq-icon,
html.theme-dark .faq-trigger .faq-icon svg,
html.theme-dark .faq-trigger .faq-icon i {
    color: #2E8B57 !important;
    stroke: #2E8B57 !important;
}

html.theme-dark .faq-content {
    color: #9CA3AF !important;
    border-color: #222222 !important;
}

/* 21. Active Navigation Link Indicator (Emerald in Light, Deep Emerald in Dark) */
nav a.nav-link-active,
.mobile-nav-link.nav-link-active {
    color: #1D5D3B !important;
    border-bottom: 2px solid #1D5D3B !important;
    font-weight: 700 !important;
}

html.theme-dark nav a.nav-link-active,
html.theme-dark .mobile-nav-link.nav-link-active {
    color: #2E8B57 !important;
    border-bottom: 2px solid #1D5D3B !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* ==========================================================================
   22. HERO SECTION & CATALOG - THEME-SYNCHRONIZED DARK THEME OVERRIDES
   ========================================================================== */
html.theme-dark #hero-section,
html.theme-dark .hero-section,
html.dark #hero-section,
html.dark .hero-section,
body.dark #hero-section,
body.dark .hero-section,
[data-theme="dark"] #hero-section,
[data-theme="dark"] .hero-section,
html.theme-dark .hero-slide,
html.dark .hero-slide,
body.dark .hero-slide,
[data-theme="dark"] .hero-slide,
html.dark #heroSlide1,
html.dark #heroSlide2,
html.dark #heroSlide3,
body.dark #heroSlide1,
body.dark #heroSlide2,
body.dark #heroSlide3,
html.dark .slide-crosser-clean,
body.dark .slide-crosser-clean,
html.dark .slide-bike-clean,
body.dark .slide-bike-clean,
html.dark .slide-bruiser,
body.dark .slide-bruiser,
html.dark .slide-crosser,
body.dark .slide-crosser {
    background-color: #080A0C !important;
    background: #080A0C !important;
    border-bottom: none !important;
}

html.theme-dark #catalog,
body.dark #catalog {
    background-color: #000000 !important;
    background-image: none !important;
}

html.theme-dark #catalog h1,
html.theme-dark #catalog h2,
html.theme-dark #catalog h3,
html.theme-dark #catalog .catalog-title,
html.dark #catalog h1,
html.dark #catalog h2,
html.dark #catalog h3,
html.dark #catalog .catalog-title,
body.dark #catalog h1,
body.dark #catalog h2,
body.dark #catalog h3,
body.dark #catalog .catalog-title {
    color: #FFFFFF !important;
}

html.theme-dark #catalog p,
html.theme-dark #catalog .catalog-subtitle,
html.dark #catalog p,
html.dark #catalog .catalog-subtitle,
body.dark #catalog p,
body.dark #catalog .catalog-subtitle {
    color: #94A3B8 !important;
}

html.theme-dark #hero-section::before,
body.dark #hero-section::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

body.dark .hero::after,
html.dark .hero::after,
[data-theme="dark"] .hero::after,
body.theme-dark .hero::after,
html.theme-dark .hero::after,
.dark .hero::after,
.theme-dark .hero::after,
body.dark .hero-section::after,
html.dark .hero-section::after,
[data-theme="dark"] .hero-section::after,
body.theme-dark .hero-section::after,
html.theme-dark .hero-section::after,
.dark .hero-section::after,
.theme-dark .hero-section::after,
body.dark #hero-section::after,
html.dark #hero-section::after,
[data-theme="dark"] #hero-section::after,
body.theme-dark #hero-section::after,
html.theme-dark #hero-section::after,
.dark #hero-section::after,
.theme-dark #hero-section::after,
body.dark #hero::after,
html.dark #hero::after,
[data-theme="dark"] #hero::after,
body.theme-dark #hero::after,
html.theme-dark #hero::after {
    opacity: 1 !important;
}

html.theme-dark #hero-section h1,
body.dark #hero-section h1 {
    color: #FFFFFF !important;
}

html.theme-dark #hero-section p,
body.dark #hero-section p {
    color: #E2E8F0 !important;
}

html.theme-dark #hero-section .hero-calc-btn,
body.dark #hero-section .hero-calc-btn {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
}

html.theme-dark #hero-section .hero-calc-btn:hover,
body.dark #hero-section .hero-calc-btn:hover {
    border-color: #2E8B57 !important;
    color: #FFFFFF !important;
}

html.theme-dark #hero-section .hero-statusbar,
body.dark #hero-section .hero-statusbar {
    border-color: var(--border-subtle) !important;
}

html.theme-dark #hero-section .hero-statusbar>div>div,
body.dark #hero-section .hero-statusbar>div>div {
    border-color: var(--border-subtle) !important;
}

html.theme-dark #hero-section .hero-statusbar .text-\[\#0F172A\],
body.dark #hero-section .hero-statusbar .text-\[\#0F172A\] {
    color: var(--text-main) !important;
}

html.theme-dark #hero-section .hero-statusbar .text-\[\#64748B\],
body.dark #hero-section .hero-statusbar .text-\[\#64748B\] {
    color: var(--text-muted) !important;
}

/* MUVIO Header Logo Image: Dark Mode Invert + Screen (Zero White Box) */
html.theme-dark header img,
html.dark header img,
body.theme-dark header img,
body.dark header img,
.theme-dark header img,
.dark header img,
[data-theme="dark"] header img,
html.dark .header-logo-img,
html.theme-dark .header-logo-img,
body.dark .header-logo-img,
body.theme-dark .header-logo-img,
.dark .header-logo-img,
.theme-dark .header-logo-img,
[data-theme="dark"] .header-logo-img,
html.dark .header .logo img,
body.dark .header .logo img,
.dark-theme .header-logo img,
.dark-theme .header-logo-img {
    filter: brightness(0) invert(1) !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ==========================================================================
   23. CATALOG FLEET CARDS - DAY / NIGHT HEADLIGHT CROSSFADE (CINEMATIC FLARE)
   ========================================================================== */
.fleet-card [class*="overflow-hidden"],
.tech-card [class*="overflow-hidden"],
.vehicle-card [class*="overflow-hidden"],
#catalog [class*="overflow-hidden"] {
    position: relative !important;
    overflow: hidden !important;
}

.fleet-card .img-day,
.tech-card .img-day,
.vehicle-card .img-day,
#catalog .img-day,
.img-day,
.scooter-img-day {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    transition: opacity 0.15s ease-in-out !important;
    will-change: opacity;
}

.fleet-card .img-night,
.tech-card .img-night,
.vehicle-card .img-night,
#catalog .img-night,
.img-night,
.scooter-img-night {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-in-out !important;
    will-change: opacity;
}

/* Dark Theme: Day photo crossfades out */
html.dark .img-day,
html.dark .scooter-img-day,
html.theme-dark .img-day,
html.theme-dark .scooter-img-day,
.dark .img-day,
.dark .scooter-img-day,
.theme-dark .img-day,
.theme-dark .scooter-img-day,
[data-theme="dark"] .img-day,
[data-theme="dark"] .scooter-img-day,
html.dark #catalog .img-day,
html.theme-dark #catalog .img-day,
.dark #catalog .img-day,
.theme-dark #catalog .img-day,
[data-theme="dark"] #catalog .img-day,
html.dark .fleet-card .img-day,
html.theme-dark .fleet-card .img-day,
.dark .fleet-card .img-day,
.theme-dark .fleet-card .img-day,
[data-theme="dark"] .fleet-card .img-day {
    opacity: 0 !important;
}

/* Dark Theme: Night photo with glowing headlights crossfades in */
html.dark .img-night,
html.dark .scooter-img-night,
html.theme-dark .img-night,
html.theme-dark .scooter-img-night,
.dark .img-night,
.dark .scooter-img-night,
.theme-dark .img-night,
.theme-dark .scooter-img-night,
[data-theme="dark"] .img-night,
[data-theme="dark"] .scooter-img-night,
html.dark #catalog .img-night,
html.theme-dark #catalog .img-night,
.dark #catalog .img-night,
.theme-dark #catalog .img-night,
[data-theme="dark"] #catalog .img-night,
html.dark .fleet-card .img-night,
html.theme-dark .fleet-card .img-night,
.dark .fleet-card .img-night,
.theme-dark .fleet-card .img-night,
[data-theme="dark"] .fleet-card .img-night {
    opacity: 1 !important;
}

/* ==========================================================================
   FOOTER LOGO IN DARK THEME
   ========================================================================== */
html.dark .footer-logo-mark,
html.theme-dark .footer-logo-mark,
body.dark .footer-logo-mark,
body.theme-dark .footer-logo-mark,
.dark .footer-logo-mark,
.theme-dark .footer-logo-mark,
[data-theme="dark"] .footer-logo-mark {
    fill: #2E8B57 !important;
}

html.dark .footer-logo-letters,
html.theme-dark .footer-logo-letters,
body.dark .footer-logo-letters,
body.theme-dark .footer-logo-letters,
.dark .footer-logo-letters,
.theme-dark .footer-logo-letters,
[data-theme="dark"] .footer-logo-letters {
    fill: #FFFFFF !important;
}

/* ==========================================================================
   PROMO SHOWCASE SECTIONS (DARK THEME)
   ========================================================================== */
.promo-section {
    margin-top: 100px !important;
    padding: 100px 0 !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
    contain: paint !important;
    width: 100% !important;
}

.promo-section-alt {
    margin-top: 0 !important;
    padding: 100px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    contain: paint !important;
    width: 100% !important;
}

.promo-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 580px;
}

.promo-col-bike {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    overflow: hidden !important;
}

.promo-col-bike-text {
    flex: 0 0 500px !important;
    max-width: 500px !important;
    padding-left: 32px !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.promo-col-scooter-text {
    flex: 0 0 500px !important;
    max-width: 500px !important;
    padding-right: 32px !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.promo-col-scooter {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
    overflow: hidden !important;
}

.promo-bike-img,
.bike-promo img,
.promo-bike-section img,
.promo-scooter-img,
img.promo-scooter-img,
.scooter-promo img,
.promo-scooter-section img {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    mask: none !important;
    -webkit-mask: none !important;
    box-shadow: none !important;
    drop-shadow: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    pointer-events: none;
}

@media (max-width: 1023px) {
    .promo-container {
        flex-direction: column !important;
        text-align: center !important;
        padding: 0 24px !important;
        gap: 36px !important;
        min-height: auto;
    }
    .promo-col-bike,
    .promo-col-scooter {
        width: 100% !important;
        justify-content: center !important;
    }
    .promo-col-bike-text,
    .promo-col-scooter-text {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .promo-fade-text {
        align-items: center !important;
        text-align: center !important;
    }
    .promo-bike-img {
        height: auto !important;
        max-height: 380px !important;
        width: 100% !important;
        max-width: 500px !important;
        margin-left: 0 !important;
        margin: 0 auto !important;
    }
    .promo-scooter-img,
    img.promo-scooter-img {
        height: auto !important;
        max-height: 380px !important;
        width: 100% !important;
        max-width: 500px !important;
        margin-right: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
    }
}

/* ==========================================================================
   STRICT LIGHT & DARK THEME TEXT CONTRAST ENGINE
   ========================================================================== */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h1,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h2,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h3,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h4,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h5,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h6,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .catalog-title,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .page-title,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .section-title {
    color: #111111 !important; /* Строгий контрастный черный для светлой темы */
}

html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) p,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .section-desc {
    color: #555555 !important; /* Нейтральный серый читаемый цвет */
}

html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .section-badge,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .catalog-badge {
    color: #047857 !important; /* Читаемый насыщенный зеленый для бейджа */
}

/* Белый цвет текста (#FFFFFF) разрешен ИСКЛЮЧИТЕЛЬНО внутри html.dark / body.dark! */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .catalog-title,
html.dark .page-title,
html.dark .section-title,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.theme-dark .catalog-title,
html.theme-dark .page-title,
html.theme-dark .section-title,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark .catalog-title,
body.dark .page-title,
body.dark .section-title {
    color: #FFFFFF !important;
}

html.dark .catalog-subtitle,
html.dark p,
html.dark .section-desc,
html.theme-dark .catalog-subtitle,
html.theme-dark p,
html.theme-dark .section-desc,
body.dark .catalog-subtitle,
body.dark p,
body.dark .section-desc {
    color: #94A3B8 !important;
}

/* Hero section white text ONLY in dark mode */
html.dark #hero-section h1,
html.dark #hero-section p,
html.dark #hero-section .hero-subtitle,
html.dark .hero-text-content h1,
html.dark .hero-text-content p,
html.dark .hero h1,
html.dark .hero p,
body.dark #hero-section h1,
body.dark #hero-section p,
body.dark #hero-section .hero-subtitle,
body.dark .hero-text-content h1,
body.dark .hero-text-content p,
body.dark .hero h1,
body.dark .hero p {
    color: #FFFFFF !important;
}

.bg-\[\#1D5D3B\] p,
.bg-\[\#1D5D3B\] h3,
.bg-\[\#1D5D3B\] span,
.muvio-btn-primary,
.muvio-btn-primary span,
.muvio-btn-primary i,
.chamfer-btn.bg-\[\#1D5D3B\],
[class*="bg-[#1D5D3B]"] p,
[class*="bg-[#1D5D3B]"] h3,
[class*="bg-[#1D5D3B]"] span,
a.bg-\[\#1D5D3B\],
a.bg-\[\#1D5D3B\] span,
a.bg-\[\#1D5D3B\],
a.bg-\[\#1D5D3B\] span,
button.bg-\[\#1D5D3B\],
button.bg-\[\#1D5D3B\] span {
    color: #FFFFFF !important;
}

/* ==========================================================================
   ULTIMATE LIGHT THEME TEXT CONTRAST & MODAL CLOSE BUTTON STYLES
   ========================================================================== */
.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #111111;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 100;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-close-btn:hover {
    background-color: rgba(17, 17, 17, 0.08);
}

html.dark .modal-close-btn,
body.dark .modal-close-btn,
.dark .modal-close-btn {
    color: #FFFFFF !important;
}

html.dark .modal-close-btn:hover,
body.dark .modal-close-btn:hover,
.dark .modal-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ТОТАЛЬНИЙ ЗАХИСТ ВІД БІЛОГО ТЕКСТУ В СВІТЛІЙ ТЕМІ (БЕЗ HERO-SECTION) */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) body:not(#hero-section),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h1:not(#hero-section *),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h2:not(#hero-section *),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h3:not(#hero-section *),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h4:not(#hero-section *),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h5:not(#hero-section *),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) h6:not(#hero-section *),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) p:not(#hero-section *),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) span:not(#hero-section *):not(button *):not([class*="btn"] *):not(a.btn *):not(.muvio-btn-primary):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#229ED9]"]):not([class*="bg-[#1D5D3B]"]):not([class*="bg-emerald"]):not([class*="bg-blue"]):not([class*="bg-amber"]):not([class*="bg-zinc-800"]):not(.text-white-force),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a:not(#hero-section *):not(button *):not([class*="btn"]):not([class*="btn"] *):not(.btn-primary):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#229ED9]"]):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#16472D]"]),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) div:not(#hero-section *):not(button *):not([class*="btn"] *):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#229ED9]"]):not([class*="bg-[#1D5D3B]"]):not([class*="bg-[#16472D]"]):not(#userAvatar),
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) label, html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) li,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .tab-content, html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .order-item, html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .cabinet-card {
    color: #111111 !important;
}

html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .text-muted, html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .section-desc, html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) p.desc {
    color: #555555 !important;
}

html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) input, html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) select, html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) textarea {
    color: #111111 !important;
    background-color: #FFFFFF !important;
}

/* Збереження білого тексту на кольорових кнопках та бейджах у світлій темі */
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#1D5D3B\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#1D5D3B\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#1D5D3B\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#1D5D3B\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#229ED9\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#229ED9\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#229ED9\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#229ED9\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#1D5D3B\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) button.bg-\[\#1D5D3B\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#1D5D3B\],
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) a.bg-\[\#1D5D3B\] *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .pd-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .pd-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .pd-bundle-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .pd-bundle-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .bundle-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .bundle-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .part-card-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .part-card-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .rec-card-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .rec-card-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .rec-buy-btn,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) .rec-buy-btn *,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #userAvatar,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #ordersCountBadge,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #cartCount,
html:not(.dark):not(.theme-dark):not(.dark-theme):not([data-theme="dark"]) #wishlistCount {
    color: #FFFFFF !important;
}

/* СТРОГИЙ БІЛИЙ КОЛІР ДЛЯ ВСІХ ЗЕЛЕНИХ КНОПОК ТА ЕЛЕМЕНТІВ MUVIO (#1D5D3B, #1D5D3B, #16472D) */
.pd-buy-btn,
.pd-buy-btn *,
.pd-bundle-buy-btn,
.pd-bundle-buy-btn *,
.bundle-buy-btn,
.bundle-buy-btn *,
.part-card-buy-btn,
.part-card-buy-btn *,
.rec-card-btn,
.rec-card-btn *,
.rec-buy-btn,
.rec-buy-btn *,
.muvio-btn-primary,
.muvio-btn-primary *,
button[class*="bg-[#1D5D3B]"],
button[class*="bg-[#1D5D3B]"] *,
a[class*="bg-[#1D5D3B]"],
a[class*="bg-[#1D5D3B]"] *,
button[class*="bg-[#1D5D3B]"],
button[class*="bg-[#1D5D3B]"] *,
a[class*="bg-[#1D5D3B]"],
a[class*="bg-[#1D5D3B]"] *,
button[class*="bg-[#16472D]"],
button[class*="bg-[#16472D]"] *,
a[class*="bg-[#16472D]"],
a[class*="bg-[#16472D]"] * {
    color: #FFFFFF !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
/* ==========================================================================
   Тонкий шрифт по всьому сайту (стиль як у верхнього меню).
   Жирним лишаються тільки вибрані / активні елементи.
   Щоб повернути як було - видаліть цей блок до кінця файлу.
   ========================================================================== */
html:not(#_) body *:not(svg):not(path) { font-weight: 400 !important; }
html:not(#_) body .hs-on,
html:not(#_) body .hs-cur,
html:not(#_) body .active,
html:not(#_) body .is-active,
html:not(#_) body .on,
html:not(#_) body .selected,
html:not(#_) body [aria-selected="true"],
html:not(#_) body [aria-current="page"],
html:not(#_) body [aria-pressed="true"],
html:not(#_) body .cat-active,
html:not(#_) body .tab-active,
html:not(#_) body .active *,
html:not(#_) body [aria-selected="true"] * { font-weight: 700 !important; }

/* ===== Підвал (footer): на темній темі повністю білий, на світлій лишається зеленим ===== */
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer{--ft-logo-filter:none;background-color:#FFFFFF !important;color:#111827 !important;border-top:1px solid rgba(0,0,0,.12) !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer *{color:#111827 !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer a:hover,
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer a:hover *{color:#1D5D3B !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer .muvio-ft-h,
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer .muvio-ft-h *{color:#1D5D3B !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer [class*="bg-emerald-800"]{background-color:rgba(29,93,59,.10) !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer [class*="bg-emerald-800"],
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer [class*="bg-emerald-800"] *{color:#1D5D3B !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer [class*="border-emerald-800"]{border-color:rgba(0,0,0,.12) !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer a.chamfer-btn,
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer a.chamfer-btn *{color:#FFFFFF !important}
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer a.chamfer-btn:hover,
:is(html.dark, html.theme-dark, html[data-theme="dark"]):not(#_):not(#__):not(#___):not(#____) footer.muvio-footer a.chamfer-btn:hover *{color:#FFFFFF !important}