/* Shared theme surfaces and states. Loaded after the existing component styles. */
html { color-scheme: light; background: #fff; }
html[data-theme="dark"] { color-scheme: dark; background: #0a0a0a; }
body.light-mode {
    color-scheme: light;
    --ui-accent: #17663e;
    --ui-action: #183b2a;
    --ui-action-hover: #24563b;
    --ui-on-action: #fff;
    --ui-field-border: #7c8c80;
    --ui-error: #ac2432;
    --ui-error-surface: #fff0f1;
    --ui-success-surface: #eaf6ee;
    --ui-shadow: 0 5px 18px rgba(20, 43, 29, .09);
}
body.dark-mode {
    color-scheme: dark;
    --primary-green: #8cdeb0;
    --primary-green-dark: #65c591;
    --primary-green-light: #b0edc9;
    --ui-accent: #8cdeb0;
    --ui-action: #8cdeb0;
    --ui-action-hover: #b0edc9;
    --ui-on-action: #102219;
    --ui-field-border: #66796c;
    --ui-error: #ffabb2;
    --ui-error-surface: #321a20;
    --ui-success-surface: #152c20;
    --ui-shadow: 0 5px 18px rgba(0, 0, 0, .22);
}
body { accent-color: var(--ui-accent); }
body ::selection { background: var(--ui-action); color: var(--ui-on-action); }
body:is(.light-mode, .dark-mode) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 4px;
}
body:is(.light-mode, .dark-mode) :is(input, select, textarea) { color-scheme: inherit; }

/* The video hero is intentionally a dark photographic surface in both themes. */
body.light-mode #hero { background: #090c0b !important; }
body #hero .hero-loading { background: #090c0b; }
body #hero .loading-spinner { border-color: #385343; border-top-color: #a9e2c1; }
body #hero .down-arrow { color: #fff; }

/* Match fixed navigation on the homepage, articles, privacy and error pages. */
body:is(.light-mode, .dark-mode) :is(#languageToggle, #themeToggle, #menuToggle) {
    --control-fill: rgba(22, 32, 32, .88);
    --control-ink: #eeefea;
    --control-edge: rgba(224, 238, 233, .38);
    --control-hover: rgba(37, 65, 61, .96);
    --control-accent: #98d5c7;
    box-sizing: border-box;
    width: 48px; height: 48px; top: 28px; padding: 0;
    border: 1px solid var(--control-edge); border-radius: 50%;
    color: var(--control-ink); background: var(--control-fill);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    transform: none !important;
}
body.light-mode :is(#languageToggle, #themeToggle, #menuToggle):not([data-control-surface="dark"]) {
    --control-fill: rgba(234, 238, 234, .94);
    --control-ink: #253630;
    --control-edge: rgba(37, 54, 48, .34);
    --control-hover: #dbe8e1;
    --control-accent: #3e7c69;
}
body:is(.light-mode, .dark-mode) #languageToggle { left: 28px; }
body:is(.light-mode, .dark-mode) #themeToggle { left: 88px; }
body:is(.light-mode, .dark-mode) #menuToggle { right: 28px; gap: 5px; }
body:is(.light-mode, .dark-mode) :is(#languageToggle, #themeToggle, #menuToggle):hover {
    background: var(--control-hover); border-color: var(--control-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
body:is(.light-mode, .dark-mode) :is(#languageToggle, #themeToggle, #menuToggle):focus-visible {
    outline-color: var(--control-accent);
}
body:is(.light-mode, .dark-mode) #languageToggle .language-flag {
    color: inherit; font-size: 12px; font-weight: 600;
    letter-spacing: .035em; text-shadow: none; transform: none !important;
}
body:is(.light-mode, .dark-mode) #themeToggle .theme-icon {
    color: inherit; width: 20px; height: 20px; stroke-width: 1.6;
}
body:is(.light-mode, .dark-mode) #menuToggle .menu-toggle-bar {
    background: currentColor; width: 21px; height: 1.5px;
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
body:is(.light-mode, .dark-mode) #menuToggle.active .menu-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body:is(.light-mode, .dark-mode) #menuToggle.active .menu-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Both menus have identical geometry; the light pearl/green gradient is preserved. */
body #menuOverlay { overflow-y: auto; overscroll-behavior: contain; }
body.dark-mode #menuOverlay {
    background: radial-gradient(ellipse at 110% 10%, #254335, transparent 65%), linear-gradient(160deg, #131e18, #090d0b);
    border-left: 1px solid #385343;
}
body.dark-mode #menuOverlay::before { background: none; animation: none; }
body.dark-mode #menuOverlay .menu-link {
    border: 1px solid #46604f; background: #15271d; color: #f3f6ef;
    box-shadow: none; transform: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
body.dark-mode #menuOverlay .menu-link .menu-text { color: inherit; font-weight: 500; letter-spacing: .015em; }
body.dark-mode #menuOverlay .menu-link::before { background: #294c39; color: #e3f4e8; border: 1px solid #739d81; font-weight: 600; transform: none; }
body.dark-mode #menuOverlay .menu-link:is(:hover, :focus-visible, .active) { background: #284e37; border-color: #8cdeb0; box-shadow: none; }
body.dark-mode #menuOverlay .menu-link:is(:hover, :focus-visible, .active)::before { background: #8cdeb0; color: #102219; border-color: #8cdeb0; }
body.dark-mode #menuOverlay .menu-footer { border-top: 1px solid #385343; }
body.dark-mode #menuOverlay .menu-contact-link { background: #142219; color: #edf4ee; border: 1px solid #46604f; font-weight: 500; box-shadow: none; }
body.dark-mode #menuOverlay .menu-contact-link:is(:hover, :focus-visible) { background: #284e37; border-color: #8cdeb0; color: #fff; transform: none; }

/* Explicit foreground/background pairs avoid contrast changing with a parent surface. */
body:is(.light-mode, .dark-mode) :is(.cta-button-primary, .cta-button-inventory, .transport-cta-btn, .contact-card-btn,
    .form-submit-btn, .report-sample-link, .standalone-cta-btn, .error-search-submit,
    .error-cta-button, .product-btn, .buy-btn, .eshop-cta-btn) {
    background: var(--ui-action); color: var(--ui-on-action);
    border-color: var(--ui-action); box-shadow: var(--ui-shadow);
    animation: none; opacity: 1;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body:is(.light-mode, .dark-mode) :is(.cta-button-primary, .cta-button-inventory, .transport-cta-btn, .contact-card-btn,
    .form-submit-btn, .report-sample-link, .standalone-cta-btn, .error-search-submit,
    .error-cta-button, .product-btn, .buy-btn, .eshop-cta-btn):is(:hover, :focus-visible) {
    background: var(--ui-action-hover); color: var(--ui-on-action);
    box-shadow: var(--ui-shadow); transform: none; opacity: 1; animation: none;
}
body:is(.light-mode, .dark-mode) :is(.step-number, .financing-step-number, .usp-icon, .badge-popular) {
    background: var(--ui-action); color: var(--ui-on-action); box-shadow: none; animation: none;
}
body .usp-icon :is(svg, .checkmark) { color: var(--ui-on-action); }
body:is(.light-mode, .dark-mode) :is(.usp-card, .process-step, .feature-card, .checklist-card, .financing-step,
    .why-matters-card, .transport-card, .contact-card, .error-nav-card, .product-card) {
    box-shadow: var(--ui-shadow);
}
body:is(.light-mode, .dark-mode) :is(.usp-card, .process-step, .feature-card, .checklist-card, .financing-step,
    .why-matters-card, .transport-card, .contact-card, .error-nav-card, .product-card):hover {
    border-color: var(--ui-accent); box-shadow: var(--ui-shadow); transform: translateY(-3px);
}
body .usp-card:hover .usp-icon { box-shadow: none; transform: none; }
body .footer-created-by { opacity: 1; }
body.light-mode .particles-container { opacity: .18; }
body.dark-mode .particles-container { opacity: .3; }
body #backToTop {
    background: var(--card-bg); color: var(--text-white);
    border: 1px solid var(--ui-field-border); box-shadow: var(--ui-shadow);
}
body #backToTop svg { color: inherit; }
body #backToTop:hover { background: var(--ui-action); color: var(--ui-on-action); border-color: var(--ui-action); box-shadow: var(--ui-shadow); }
body .cb-carousel-divider { opacity: 1; }
body .cb-carousel-purchase a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
body .cb-filter-more summary, body .cb-filter-reset { min-height: 44px; display: flex; align-items: center; }
body .cb-filter-more summary::before { content: '+'; margin-right: 8px; }
body .cb-filter-more[open] summary::before { content: '−'; }

/* Native selects, checks, validation and autofill must match the selected theme. */
body:is(.light-mode, .dark-mode) :is(.form-input, .form-select, .form-textarea, .cb-inventory-filters input, .cb-inventory-filters select) {
    border-color: var(--ui-field-border); caret-color: var(--ui-accent);
}
body:is(.light-mode, .dark-mode) :is(.form-input, .form-select, .form-textarea):focus {
    border-color: var(--ui-accent); outline: 2px solid var(--ui-accent); outline-offset: 2px; box-shadow: none;
}
body.light-mode .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2317663e' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
body .form-select option { background: var(--primary-bg); color: var(--text-light); }
body:is(.light-mode, .dark-mode) :is(.radio-label, .checkbox-label) input { accent-color: var(--ui-accent); }
body .form-error { color: var(--ui-error); }
body .form-error-message { color: var(--ui-error); background: var(--ui-error-surface); border-color: var(--ui-error); }
body .form-success { color: var(--ui-accent); background: var(--ui-success-surface); border-color: var(--ui-accent); }
body .form-submit-btn:disabled { opacity: .65; cursor: wait; transform: none; }
body input:autofill { color: var(--text-light); background: var(--card-bg); }
body input:-webkit-autofill { -webkit-text-fill-color: var(--text-light); box-shadow: inset 0 0 0 100px var(--card-bg); }

body .privacy-policy-page { background: var(--primary-bg); }
body #importFormContent { scroll-margin-top: 96px; }
body .privacy-section a { text-decoration: underline; text-underline-offset: 3px; }
body:is(.light-mode, .dark-mode) .lightbox-close:hover { color: var(--ui-on-action); background: var(--ui-action); }
body.light-mode .lightbox-close { background: #eaf0eb; color: #183b2a; }

/* WordPress post template previously forced white backgrounds in dark mode. */
body.single main { background: var(--primary-bg) !important; }
body.single main > div { background: var(--card-bg) !important; box-shadow: var(--ui-shadow) !important; }
body.single article h1 { color: var(--text-white) !important; }
body.single article > div { color: var(--text-light) !important; border-color: var(--border-color) !important; }
body.single article > div:first-of-type { color: var(--text-muted) !important; }
body.single article a { color: var(--ui-accent); text-underline-offset: 4px; }
body.single article a:hover { color: var(--text-white); }

/* Synchronize theme colors without overriding slide, hover or carousel transforms. */
body.theme-transition :is(section, main, article, h1, h2, h3, h4, p, span, li, label,
    input, select, textarea, .contact-form, .process-step, .checklist-card, .financing-step,
    .payment-terms-card, .why-matters-card, .cb-carousel, .cb-carousel-stage) {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: .2s; transition-timing-function: ease;
}
body.theme-transition #menuOverlay { transition: transform .35s ease; }
@media (max-width: 700px) {
    body:is(.light-mode, .dark-mode) :is(#languageToggle, #themeToggle, #menuToggle) { width: 44px; height: 44px; top: 20px; }
    body:is(.light-mode, .dark-mode) #languageToggle { left: 20px; }
    body:is(.light-mode, .dark-mode) #themeToggle { left: 76px; }
    body:is(.light-mode, .dark-mode) #menuToggle { right: 20px; }
    body.single main > div { padding: 28px 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    body *, body *::before, body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    body .section-animate { opacity: 1; transform: none; }
}