#settingsPanel {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: white;
    color: black;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    align-items: center;
    width: 180px;
    border: 2px solid black;
    font-size: 18px;
    z-index: 9999 !important; /* Zorgt dat het boven andere elementen blijft */

    /* Animatie */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#settingsPanel.active {
    opacity: 1;
    visibility: visible;
}

#settingsPanel button, #settingsPanel select {
    margin: 5px 0;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}

#settingsToggle {
    position: fixed;
    bottom: 60px;
    right: 20px;
    background: #ff9800;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* 🌙 Donker thema */
[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] .container, 
[data-theme="dark"] .content,
[data-theme="dark"] .main-wrapper {
    background-color: #121212 !important;
    color: #ffffff !important;
}

/* Links in donker thema */
[data-theme="dark"] a {
    color: #f4ba18 !important;
}

/* Algemene tekstkleur in donker thema */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #ffffff !important;
}

/* Knoppen in donker thema */
[data-theme="dark"] button {
    background: #333 !important;
    color: white !important;
    border: 1px solid #555 !important;
}

[data-theme="dark"] button:hover {
    background: #444 !important;
}

/* Instellingenpaneel blijft goed zichtbaar */
[data-theme="dark"] #settingsPanel {
    background: #222 !important;
    color: white !important;
    border-color: #444 !important;
}

/* ⚫ Monochroom thema */
[data-theme="mono"],
[data-theme="mono"] body,
[data-theme="mono"] .container,
[data-theme="mono"] .content,
[data-theme="mono"] .main-wrapper {
    filter: grayscale(100%);
    background: white !important;
    color: black !important;
}

/* Voorkomt dat de pagina extreem lang wordt */
[data-theme="mono"] body {
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Zorgt dat #settingsPanel niet naar beneden schiet */
[data-theme="mono"] #settingsPanel {
    position: fixed !important;
    bottom: 100px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
}

/* Algemene tekstkleur in monochroom thema */
[data-theme="mono"] p,
[data-theme="mono"] span,
[data-theme="mono"] h1,
[data-theme="mono"] h2,
[data-theme="mono"] h3,
[data-theme="mono"] h4,
[data-theme="mono"] h5,
[data-theme="mono"] h6 {
    color: black !important;
}

/* ⚠️ Hoog contrast thema */
[data-theme="contrast"],
[data-theme="contrast"] body,
[data-theme="contrast"] .container,
[data-theme="contrast"] .content,
[data-theme="contrast"] .main-wrapper {
    background-color: black !important;
    color: yellow !important;
}

/* Links in hoog contrast thema */
[data-theme="contrast"] a {
    color: cyan !important;
}

/* Algemene tekstkleur in hoog contrast thema */
[data-theme="contrast"] p,
[data-theme="contrast"] span,
[data-theme="contrast"] h1,
[data-theme="contrast"] h2,
[data-theme="contrast"] h3,
[data-theme="contrast"] h4,
[data-theme="contrast"] h5,
[data-theme="contrast"] h6 {
    color: yellow !important;
}

/* Instellingenpaneel blijft goed zichtbaar in hoog contrast */
[data-theme="contrast"] #settingsPanel {
    background: black !important;
    color: yellow !important;
    border-color: yellow !important;
}

/* 🌙 Donker thema: Alles in het midden donker maken */
[data-theme="dark"] #main-section,
[data-theme="dark"] #main-section .container,
[data-theme="dark"] #main-section .main-part,
[data-theme="dark"] #main-section .row,
[data-theme="dark"] #main-section .col-md-6,
[data-theme="dark"] #main-section .left-main-part-midle,
[data-theme="dark"] #main-section .left-main-part-top {
    background-color: #121212 !important;
    color: #ffffff !important;
}

/* ⚫ Monochroom thema: Alles in het midden wit en grijswaarden */
[data-theme="mono"] #main-section,
[data-theme="mono"] #main-section .container,
[data-theme="mono"] #main-section .main-part,
[data-theme="mono"] #main-section .row,
[data-theme="mono"] #main-section .col-md-6,
[data-theme="mono"] #main-section .left-main-part-midle,
[data-theme="mono"] #main-section .left-main-part-top {
    filter: grayscale(100%);
    background: white !important;
    color: black !important;
}

/* ⚠️ Hoog contrast thema: Alles zwart/geel */
[data-theme="contrast"] #main-section,
[data-theme="contrast"] #main-section .container,
[data-theme="contrast"] #main-section .main-part,
[data-theme="contrast"] #main-section .row,
[data-theme="contrast"] #main-section .col-md-6,
[data-theme="contrast"] #main-section .left-main-part-midle,
[data-theme="contrast"] #main-section .left-main-part-top {
    background-color: black !important;
    color: yellow !important;
}

/* Donker thema: Verwijder de lichte achtergrondkleur */
[data-theme="dark"] .right-main-part-top {
    background-color: #121212 !important; 
    color: #ffffff !important;
}

/* Monochroom thema: Grijswaarden toepassen */
[data-theme="mono"] .right-main-part-top {
    filter: grayscale(100%);
    background: white !important;
    color: black !important;
}

/* Hoog contrast thema: Zwart/geel kleuren */
[data-theme="contrast"] .right-main-part-top {
    background-color: black !important;
    color: yellow !important;
}

/* Donker thema: Maak de navbar donker */
[data-theme="dark"] .navbar {
    background-color: #121212 !important; 
    color: #ffffff !important;
}

/* Monochroom thema: Maak de navbar zwart-wit */
[data-theme="mono"] .navbar {
    background-color: #ffffff !important; 
    filter: grayscale(100%);
    color: black !important;
}

/* Hoog contrast thema: Fel contrast */
[data-theme="contrast"] .navbar {
    background-color: black !important;
    color: yellow !important;
}

/* Standaard styling om consistentie te behouden */
#downloadHelper {
    color: #000 !important; /* Zwart standaard */
    background-color: #ff9800 !important; /* Oranje achtergrond */
}

/* Donker thema: Witte tekst voor betere leesbaarheid */
[data-theme="dark"] #downloadHelper {
    color: #ffffff !important; /* Witte tekst */
}

/* Monochroom thema: Grijstinten */
[data-theme="mono"] #downloadHelper {
    color: black !important; /* Zwarte tekst */
    filter: grayscale(100%);
}

/* Hoog contrast thema: Extra opvallend */
[data-theme="contrast"] #downloadHelper {
    color: yellow !important; /* Gele tekst */
    background-color: black !important; /* Zwarte achtergrond voor contrast */
}

/* Algemene stijlen voor instellingenmenu */
#settingsPanel {
    background: #ffffff !important;
    color: #000 !important;
    border: 2px solid #000;
}

/* Knoppen en selectievakjes standaard stijl */
#settingsPanel button, 
#settingsPanel select {
    background: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #ccc;
}

/* 🌙 Donker thema */
[data-theme="dark"] #settingsPanel {
    background: #222 !important;
    color: white !important;
    border-color: #444;
}

[data-theme="dark"] #settingsPanel button, 
[data-theme="dark"] #settingsPanel select {
    background: #444 !important;
    color: white !important;
    border-color: #666;
}

/* ⚫ Monochroom thema */
[data-theme="mono"] #settingsPanel {
    background: #ddd !important;
    color: black !important;
    border-color: #999;
}

[data-theme="mono"] #settingsPanel button, 
[data-theme="mono"] #settingsPanel select {
    background: #bbb !important;
    color: black !important;
    border-color: #888;
}

/* ⚠️ Hoog contrast thema */
[data-theme="contrast"] #settingsPanel {
    background: black !important;
    color: yellow !important;
    border-color: yellow;
}

[data-theme="contrast"] #settingsPanel button, 
[data-theme="contrast"] #settingsPanel select {
    background: yellow !important;
    color: black !important;
    border-color: yellow;
}


/* Reset-knop styling */
#settingsPanel button:last-child {
    background-color: #ccc;
    color: #333;
    font-size: 14px;
}


#themeIndicator {
    position: fixed;
    top: 10px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7); /* Donkere achtergrond */
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
}


#themeSwitcher {
    position: fixed;
    bottom: 20px; /* Dicht bij de rand van de pagina */
    left: 20px; /* Links in plaats van rechts */
    background: white;
    color: black;
    padding: 8px 12px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999 !important;
}

/* Zorgt dat de dropdown netjes is */
#themeSwitcher select {
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
    padding: 5px;
    font-size: 14px;
    cursor: pointer;
}

/* Donker thema - Thema menu blijft leesbaar */
[data-theme="dark"] #themeSwitcher {
    background: #222;
    color: white;
    border-color: #555;
}

[data-theme="dark"] #themeSwitcher select {
    background: #333;
    color: white;
    border: 1px solid #777;
}

/* Monochroom thema - Grijstinten */
[data-theme="mono"] #themeSwitcher {
    background: white;
    color: black;
    border: 1px solid #999;
}

[data-theme="mono"] #themeSwitcher select {
    background: white;
    color: black;
    border: 1px solid #999;
}

/* Hoog contrast thema - Extra zichtbaarheid */
[data-theme="contrast"] #themeSwitcher {
    background: black;
    color: yellow;
    border-color: yellow;
}

[data-theme="contrast"] #themeSwitcher select {
    background: black;
    color: yellow;
    border: 1px solid yellow;
}

/* 🔹 Normale modus: Zwarte tekst op de navbar */
.navbar-light .navbar-nav .nav-link {
    color: black !important;
}

/* 🔹 Zorg dat de hover-kleur niet te licht is */
.navbar-light .navbar-nav .nav-link:hover {
    color: #333 !important;
}

/* 🔹 Donker thema: witte tekst */
[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: white !important;
}

/* 🔹 Donker thema hover: goudkleurig zoals de rest van de site */
[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
    color: #f4ba18 !important;
}


/* Bootstrap 5 offcanvas: keep submenu links visible and clickable on mobile */
@media (max-width: 991.98px) {
    .offcanvas .dropdown-menu {
        position: static;
        float: none;
        transform: none !important;
    }
}

/* CMS blokken: thema-afstemming voor nieuws/split/cta panelen */
[data-theme="dark"] .cms-news-panel,
[data-theme="dark"] .cms-split-text-panel,
[data-theme="dark"] .cms-split-media,
[data-theme="dark"] .cms-cta-panel,
[data-theme="dark"] .cms-news-item {
    background: #1d2734 !important;
    border-color: #3b4a5f !important;
    color: #f4f6f9 !important;
}
[data-theme="dark"] .cms-news-intro,
[data-theme="dark"] .cms-news-date {
    color: #c9d3e1 !important;
}
[data-theme="dark"] .cms-prose blockquote {
    background: #16202b !important;
    border-left-color: #f4ba18 !important;
    color: #d7e1ef !important;
}
[data-theme="dark"] .cms-prose a {
    color: #9ec5ff !important;
}

[data-theme="mono"] .cms-news-panel,
[data-theme="mono"] .cms-split-text-panel,
[data-theme="mono"] .cms-split-media,
[data-theme="mono"] .cms-cta-panel,
[data-theme="mono"] .cms-news-item {
    border-color: #666 !important;
}

[data-theme="contrast"] .cms-news-panel,
[data-theme="contrast"] .cms-split-text-panel,
[data-theme="contrast"] .cms-split-media,
[data-theme="contrast"] .cms-cta-panel,
[data-theme="contrast"] .cms-news-item {
    background: #000 !important;
    border-color: #ff0 !important;
    color: #ff0 !important;
}
[data-theme="contrast"] .cms-news-heading::after {
    background: #ff0 !important;
}
[data-theme="contrast"] .cms-prose a {
    color: #0ff !important;
    text-decoration-color: #0ff !important;
}
[data-theme="contrast"] .cms-prose blockquote {
    border-left-color: #ff0 !important;
    background: #000 !important;
}

/* Mobile bottom action stack: keep fixed controls separated from sticky contact bar */
:root {
    --mobile-fixed-safe-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    --mobile-contactbar-height: 72px;
    --mobile-bottom-stack-gap: 14px;
}

@media (max-width: 768px) {
    #settingsToggle {
        left: 12px;
        right: auto;
        bottom: calc(var(--mobile-fixed-safe-bottom) + var(--mobile-contactbar-height) + var(--mobile-bottom-stack-gap));
        z-index: 1086;
    }

    #settingsPanel {
        left: 12px;
        right: auto;
        bottom: calc(var(--mobile-fixed-safe-bottom) + var(--mobile-contactbar-height) + var(--mobile-bottom-stack-gap) + 56px);
        width: min(220px, calc(100vw - 24px));
        z-index: 1087 !important;
    }

    #themeSwitcher {
        display: none;
    }

    #main-section {
        padding-bottom: calc(var(--mobile-contactbar-height) + env(safe-area-inset-bottom, 0px) + 20px) !important;
    }
}


/* Dark mode contrast hardening for CMS components */
[data-theme="dark"] #main-section,
[data-theme="dark"] #main-section .main-part {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
}

[data-theme="dark"] #main-section h1,
[data-theme="dark"] #main-section h2,
[data-theme="dark"] #main-section h3,
[data-theme="dark"] #main-section h4,
[data-theme="dark"] #main-section h5,
[data-theme="dark"] #main-section h6,
[data-theme="dark"] #main-section p,
[data-theme="dark"] #main-section li,
[data-theme="dark"] #main-section dt,
[data-theme="dark"] #main-section dd,
[data-theme="dark"] #main-section .small,
[data-theme="dark"] #main-section .text-muted,
[data-theme="dark"] #main-section .cms-news-intro,
[data-theme="dark"] #main-section .cms-news-date,
[data-theme="dark"] #main-section .cms-related-link,
[data-theme="dark"] #main-section .cms-related-link span {
    color: #e5e7eb !important;
}

[data-theme="dark"] #main-section .left-main-part-midle,
[data-theme="dark"] #main-section .cms-step-item,
[data-theme="dark"] #main-section .cms-service-info,
[data-theme="dark"] #main-section .cms-card-item,
[data-theme="dark"] #main-section .cms-news-panel,
[data-theme="dark"] #main-section .cms-news-item,
[data-theme="dark"] #main-section .cms-split-text-panel,
[data-theme="dark"] #main-section .cms-split-media,
[data-theme="dark"] #main-section .cms-related-link,
[data-theme="dark"] #main-section .cms-cta-panel {
    background: #1b2634 !important;
    border-color: #2f4054 !important;
}

[data-theme="dark"] #main-section .button,
[data-theme="dark"] #main-section .cms-cta-button,
[data-theme="dark"] #main-section .cms-card-button {
    color: #fff !important;
}

/* Hero/intro leesbaarheid in dark mode (ook bij CMS rich-text output) */
[data-theme="dark"] #main-section .cms-block-hero .cms-prose,
[data-theme="dark"] #main-section .cms-block-hero .cms-prose p,
[data-theme="dark"] #main-section .cms-block-hero .cms-prose li,
[data-theme="dark"] #main-section .cms-block-hero .cms-prose span,
[data-theme="dark"] #main-section .cms-block-hero .cms-prose strong,
[data-theme="dark"] #main-section .cms-block-hero .cms-prose em {
    color: #eef3fa !important;
}

[data-theme="dark"] #main-section .cms-block-hero .cms-prose a {
    color: #8fc7ff !important;
    text-decoration-color: rgba(143, 199, 255, 0.75) !important;
}