/**
 * Roadmap accent utilities — CSS-variable driven (no Tailwind CDN required).
 * Uses --sdc-rm-accent from inc/roadmap-palettes.php.
 *
 * IMPORTANT: Never use "body.sdc-roadmap-body," as a standalone comma selector —
 * that applies accent styles to the whole page background.
 */

/* ── Accent color utilities ─────────────────────────────────────── */
body.sdc-roadmap-body .text-swissRed,
body.sdc-layout-swiss .text-swissRed {
    color: var(--sdc-rm-accent, #FF3333) !important;
}

body.sdc-roadmap-body .bg-swissRed,
body.sdc-layout-swiss .bg-swissRed {
    background-color: var(--sdc-rm-accent, #FF3333) !important;
}

body.sdc-roadmap-body .border-swissRed,
body.sdc-layout-swiss .border-swissRed {
    border-color: var(--sdc-rm-accent, #FF3333) !important;
}

body.sdc-roadmap-body .accent-swissRed,
body.sdc-layout-swiss .accent-swissRed {
    accent-color: var(--sdc-rm-accent, #FF3333) !important;
}

body.sdc-roadmap-body .hover\:text-swissRed:hover,
body.sdc-layout-swiss .hover\:text-swissRed:hover,
body.sdc-roadmap-body a.hover\:text-swissRed:hover,
body.sdc-layout-swiss a.hover\:text-swissRed:hover {
    color: var(--sdc-rm-accent, #FF3333) !important;
}

body.sdc-roadmap-body .hover\:bg-swissRed:hover,
body.sdc-layout-swiss .hover\:bg-swissRed:hover {
    background-color: var(--sdc-rm-accent, #FF3333) !important;
}

body.sdc-roadmap-body .group:hover .group-hover\:bg-swissRed,
body.sdc-layout-swiss .group:hover .group-hover\:bg-swissRed {
    background-color: var(--sdc-rm-accent, #FF3333) !important;
}

body.sdc-roadmap-body .focus\:border-swissRed:focus,
body.sdc-layout-swiss .focus\:border-swissRed:focus {
    border-color: var(--sdc-rm-accent, #FF3333) !important;
}

/* Search / CTA hovers */
body.sdc-roadmap-body button.hover\:bg-swissRed:hover,
body.sdc-layout-swiss button.hover\:bg-swissRed:hover,
body.sdc-roadmap-body a.bg-swissRed.hover\:bg-black:hover,
body.sdc-layout-swiss a.bg-swissRed.hover\:bg-black:hover {
    background-color: var(--sdc-rm-accent-hover, #000000) !important;
}

body.sdc-roadmap-body a.bg-swissRed:hover,
body.sdc-layout-swiss a.bg-swissRed:hover {
    background-color: var(--sdc-rm-accent-hover, #000000) !important;
}

/* ── Page background (light / dark) — NOT accent ─────────────────── */
body.sdc-roadmap-body.bg-white,
body.sdc-layout-swiss.bg-white {
    background-color: #ffffff !important;
}

html[data-theme="dark"] body.sdc-roadmap-body,
html[data-theme="dark"] body.sdc-layout-swiss,
html.dark body.sdc-roadmap-body.dark\:bg-darkBg,
html.dark body.sdc-layout-swiss.dark\:bg-darkBg {
    background-color: var(--sdc-rm-dark-bg, #0B0B0F) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .dark\:bg-darkBg,
html[data-theme="dark"] body.sdc-layout-swiss .dark\:bg-darkBg,
html.dark body.sdc-roadmap-body .dark\:bg-darkBg,
html.dark body.sdc-layout-swiss .dark\:bg-darkBg {
    background-color: var(--sdc-rm-dark-bg, #0B0B0F) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .dark\:bg-darkCard,
html[data-theme="dark"] body.sdc-layout-swiss .dark\:bg-darkCard,
html.dark body.sdc-roadmap-body .dark\:bg-darkCard,
html.dark body.sdc-layout-swiss .dark\:bg-darkCard {
    background-color: var(--sdc-rm-dark-card, #12121A) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .dark\:border-swissRed,
html[data-theme="dark"] body.sdc-layout-swiss .dark\:border-swissRed,
html.dark body.sdc-roadmap-body .dark\:border-swissRed,
html.dark body.sdc-layout-swiss .dark\:border-swissRed {
    border-color: var(--sdc-rm-accent, #FF3333) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .dark\:bg-swissRed,
html[data-theme="dark"] body.sdc-layout-swiss .dark\:bg-swissRed,
html.dark body.sdc-roadmap-body .dark\:bg-swissRed,
html.dark body.sdc-layout-swiss .dark\:bg-swissRed {
    background-color: var(--sdc-rm-accent, #FF3333) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .dark\:hover\:bg-swissRed:hover,
html[data-theme="dark"] body.sdc-layout-swiss .dark\:hover\:bg-swissRed:hover,
html.dark body.sdc-roadmap-body .dark\:hover\:bg-swissRed:hover,
html.dark body.sdc-layout-swiss .dark\:hover\:bg-swissRed:hover {
    background-color: var(--sdc-rm-accent, #FF3333) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .dark\:hover\:text-swissRed:hover,
html[data-theme="dark"] body.sdc-layout-swiss .dark\:hover\:text-swissRed:hover,
html.dark body.sdc-roadmap-body .dark\:hover\:text-swissRed:hover,
html.dark body.sdc-layout-swiss .dark\:hover\:text-swissRed:hover {
    color: var(--sdc-rm-accent, #FF3333) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .dark\:group-hover\:bg-swissRed,
html[data-theme="dark"] body.sdc-layout-swiss .dark\:group-hover\:bg-swissRed,
html.dark body.sdc-roadmap-body .dark\:group-hover\:bg-swissRed,
html.dark body.sdc-layout-swiss .dark\:group-hover\:bg-swissRed {
    background-color: var(--sdc-rm-accent, #FF3333) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .sdc-roadmap-header,
html[data-theme="dark"] body.sdc-layout-swiss .sdc-roadmap-header,
html.dark body.sdc-roadmap-body .sdc-roadmap-header,
html.dark body.sdc-layout-swiss .sdc-roadmap-header {
    background-color: color-mix(in srgb, var(--sdc-rm-dark-bg, #0B0B0F) 95%, transparent) !important;
}

html[data-theme="dark"] body.sdc-roadmap-body .dark\:shadow-\[8px_8px_0px_0px_rgba\(255\,51\,51\,1\)\],
html[data-theme="dark"] body.sdc-layout-swiss .dark\:shadow-\[8px_8px_0px_0px_rgba\(255\,51\,51\,1\)\],
html.dark body.sdc-roadmap-body .dark\:shadow-\[8px_8px_0px_0px_rgba\(255\,51\,51\,1\)\],
html.dark body.sdc-layout-swiss .dark\:shadow-\[8px_8px_0px_0px_rgba\(255\,51\,51\,1\)\] {
    box-shadow: 8px 8px 0 0 rgba(var(--sdc-rm-dark-shadow-rgb, 255, 51, 51), 1) !important;
}

/* Pricing toggle active state */
body.sdc-roadmap-body #pricingToggleBtn.bg-swissRed,
body.sdc-layout-swiss #pricingToggleBtn.bg-swissRed {
    background-color: var(--sdc-rm-accent, #FF3333) !important;
}

/* Playground load-balancer flash */
body.sdc-roadmap-body #loadBalancerBox.border-swissRed,
body.sdc-layout-swiss #loadBalancerBox.border-swissRed {
    border-color: var(--sdc-rm-accent, #FF3333) !important;
}

/* Scoped accent links / buttons in shell regions */
body.sdc-roadmap-body .sdc-roadmap-main a.text-swissRed,
body.sdc-layout-swiss .sdc-roadmap-main a.text-swissRed,
body.sdc-roadmap-body .sdc-roadmap-footer a.hover\:text-swissRed:hover,
body.sdc-layout-swiss .sdc-roadmap-footer a.hover\:text-swissRed:hover,
body.sdc-roadmap-body .sdc-roadmap-header a.hover\:text-swissRed:hover,
body.sdc-layout-swiss .sdc-roadmap-header a.hover\:text-swissRed:hover {
    color: var(--sdc-rm-accent, #FF3333) !important;
}

body.sdc-roadmap-body .sdc-roadmap-main a.bg-swissRed,
body.sdc-layout-swiss .sdc-roadmap-main a.bg-swissRed,
body.sdc-roadmap-body .sdc-roadmap-main button.bg-swissRed,
body.sdc-layout-swiss .sdc-roadmap-main button.bg-swissRed {
    background-color: var(--sdc-rm-accent, #FF3333) !important;
    color: #fff !important;
}

body.sdc-roadmap-body .sdc-roadmap-main .border-swissRed,
body.sdc-layout-swiss .sdc-roadmap-main .border-swissRed {
    border-color: var(--sdc-rm-accent, #FF3333) !important;
}