/* =====================================================================
   🎨 LIMESURVEY CUSTOM.CSS - ONDERWIJSINSPECTIE THEME
   
   👤 AUTEUR: Kurt Maenhout
   📅 LAATSTE UPDATE: 20250827
   🔧 WIJZIGING: Correcte CSS architectuur met eenvoudige basis selectors en specifieke verberg-regels
   
   📋 INHOUD:
   • Globale styling en achtergrond
   • Typography en fonts  
   • Navigatie en header
   • Container styling met uniforme borders
   • Question components en styling
   • Form elements en buttons (eenvoudige basis architectuur)
   • Advanced features (maps, progress bar)
   • 🎯 KURTBTN SYSTEEM (eenvoudige basis + krachtige verberg-regels)
   • Slider styling
   • Overige componenten  
   • Responsive design
   
   ⚠️  BELANGRIJKE ARCHITECTUUR VERBETERING:
   In plaats van complexe selectors gebruikt deze versie:
   1. Eenvoudige basis selectors voor normale functionaliteit
   2. Zeer krachtige verberg-regels die alleen "Anders" velden raken
   
   💡 VOOR BEGINNERS:
   • rem = relative unit (1rem = 16px standaard)
   • px = pixels (absolute unit)
   • Padding = ruimte BINNEN een element (tussen inhoud en rand)
   • Margin = ruimte BUITEN een element (afstand tot andere elementen)
   • Border = de lijn/rand rondom een element
   ===================================================================== */

/* =====================================================================
   🌍 GLOBALE STYLING EN ACHTERGROND
   ===================================================================== */

/* Basis body styling voor alle pagina types */
body, 
html body, 
body.lang-nl, 
body.brand-logo,
.bootstrap body {
  color: #443939 !important;                    /* Donkergrijze tekst voor goede leesbaarheid */
  background-color: transparent !important;     /* Transparante achtergrond zodat patroon zichtbaar is */
  background-image: url("../files/background-pattern.png") !important;
  background-attachment: fixed !important;      /* Patroon blijft op plaats bij scrollen */
  background-size: auto !important;             /* Originele grootte van patroon */
  background-repeat: repeat !important;         /* Patroon herhaalt over hele pagina */
}

/* Basis kleurenschema voor headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #443939;                               /* Consistente kleur voor alle titels */
}

.text-muted {
  color: #6c757d !important;                    /* Lichtgrijze kleur voor minder belangrijke tekst */
}

/* Navigatie achtergrond */
.navbar-default,
.navbar-light,
.navbar.bg-light {
  background: white !important;                 /* Witte achtergrond voor navigatiebalk */
}

/* =====================================================================
   📝 TYPOGRAPHY EN FONTS
   ===================================================================== */

/* Font definitie - Flanders Art Sans Bold */
@font-face {
  font-family: "Flanders Art Sans";
  src: url("../fonts/sans/bold/FlandersArtSans-Bold.eot");
  src: url("../fonts/sans/bold/FlandersArtSans-Bold.eot?#iefix") format("embedded-opentype"),
       url("../fonts/sans/bold/FlandersArtSans-Bold.woff") format("woff"),
       url("../fonts/sans/bold/FlandersArtSans-Bold.ttf") format("truetype");
  font-weight: 700;                             /* Bold gewicht = 700 */
  font-style: normal;
}

/* Font definitie - Flanders Art Sans Regular */
@font-face {
  font-family: "Flanders Art Sans";
  src: url("../fonts/sans/regular/FlandersArtSans-Regular.eot");
  src: url("../fonts/sans/regular/FlandersArtSans-Regular.eot?#iefix") format("embedded-opentype"),
       url("../fonts/sans/regular/FlandersArtSans-Regular.woff") format("woff"),
       url("../fonts/sans/regular/FlandersArtSans-Regular.ttf") format("truetype");
  font-weight: 400;                             /* Normal gewicht = 400 */
  font-style: normal;
}

/* Font toepassing op body en headings */
body.font-noto,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.group-title {
  font-family: "Flanders Art Sans", Arial, Helvetica, sans-serif !important;
}

/* =====================================================================
   🧭 NAVIGATIE EN HEADER
   ===================================================================== */

.navbar-brand {
  height: auto;
  padding-top: 0.3125rem;                       /* 5px - kleine ruimte boven logo */
  padding-bottom: 0.3125rem;                    /* 5px - kleine ruimte onder logo */
}

.navbar-brand.logo-container {
  padding: 0.625rem 0 0.3125rem 1rem;          /* 10px boven, 5px onder, 16px links */
}

.navbar-brand .logo {
  max-width: 200px;                             /* Logo maximaal 200px breed */
}

.logo-container > img {
  padding: 0;                                   /* Geen extra ruimte rond logo afbeelding */
}

/* Verberg survey naam op welkomstpagina */
h1.survey-name {
  display: none !important;
}

/* =====================================================================
   📦 CONTAINER STYLING - UNIFORME BORDERS (BELANGRIJKSTE SECTIE)
   ===================================================================== */

/* Outer frame container */
#outerframeContainer {
  padding-top: 1rem;                            /* 16px ruimte boven container */
  padding-bottom: 1rem;                         /* 16px ruimte onder container */
  min-height: 150px;                            /* Minimale hoogte 150px */
}

/* 🔑 HOOFDREGEL: Question container met uniforme gele border */
.question-container {
  border: 1px solid #ffe406 !important;        /* Gele rand van 1px rondom elke vraag */
  background-color: #ffffffcc !important;      /* Witte achtergrond met lichte transparantie */
  margin-bottom: 1.25rem !important;           /* 20px ruimte onder elke vraag */
  padding: 3px !important;                      /* 3px ruimte binnen de gele rand - CRUCIAAL voor uniforme border */
  box-sizing: border-box !important;           /* Zorgt dat padding binnen de totale grootte blijft */
}

/* Bootstrap overrides voor vraag containers */
.row.question-container,
div[class*="question"].row {
  margin-left: 0 !important;                   /* Geen negatieve margin links */
  margin-right: 0 !important;                  /* Geen negatieve margin rechts */
}

.question-container.col-12,
.question-container[class*="col-"] {
  padding-left: 3px !important;                /* Uniforme 3px padding aan alle kanten */
  padding-right: 3px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* Welcome en survey containers */
#welcome-container,
#surveys-list-container {
  background-color: #ffffffcc !important;      /* Zelfde achtergrond als vragen */
  border: 1px solid #ffe406 !important;        /* Zelfde gele rand als vragen */
  padding: 1rem;                                /* 16px ruimte binnen container */
  margin-bottom: 1rem;                          /* 16px ruimte onder container */
}

h1.survey-name {
  text-align: center;                           /* Survey naam gecentreerd */
}

/* =====================================================================
   📝 QUESTION COMPONENTS EN STYLING
   ===================================================================== */

/* 🟡 Question title container - gele achtergrond balk */
.question-title-container {
  background-color: #F0D70F !important;        /* Heldergele achtergrond voor vraag titels */
  color: #443939 !important;                   /* Donkergrijze tekst voor contrast */
  font-family: "Flanders Art Sans", Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;                  /* 16px = standaard tekstgrootte */
  font-weight: 400 !important;                 /* Normale dikte (niet bold) */
  font-style: normal;
  letter-spacing: 0.5px;                       /* Lichte ruimte tussen letters voor leesbaarheid */
    padding-top: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.5rem !important;                  /* 8px ruimte rondom vraag titel */
  margin: 0 !important;                        /* Geen extra ruimte buiten titel balk */
  border: none !important;                     /* Geen extra rand om titel */
  width: 100%;                                 /* Titel neemt volledige breedte */
  box-sizing: border-box;
}

/* Verberg verplichte asterisk (*) tekens */
sup.text-danger.fa.fa-asterisk.small,
.text-danger.fa-asterisk {
  display: none !important;                    /* Asterisk wordt niet getoond */
}

/* Mixed font weights binnen question titles */
.question-title-container strong,
.question-title-container b,
.question-title-container .title-bold {
  font-weight: 700 !important;                 /* Bold tekst = gewicht 700 */
}

.question-title-container .title-normal {
  font-weight: 400 !important;                 /* Normale tekst = gewicht 400 */
}

.question-title-container em,
.question-title-container i,
.question-title-container .title-italic {
  font-style: italic !important;               /* Cursieve tekst */
  font-weight: 400 !important;                 /* Cursief blijft normaal gewicht */
}

/* Question text styling - ruimte onder titel */
.question-text,
div[class*="question-text"] {
  border: 0px solid #ffe406 !important;        /* Geen zichtbare rand (0px) */
  padding-top: 0.25rem !important;                /* Geen ruimte boven tekst */
  padding-bottom: 0.25rem !important;             /* Geen ruimte onder tekst */
  padding-left: 0.5rem !important;             /* 8px ruimte links van tekst */
  padding-right: 0.5rem !important;            /* 8px ruimte rechts van tekst */
  background-color: #f8f9fa !important;        /* Lichtgrijze achtergrond */
    margin-top: 0rem !important;
    margin-right: 0px !important;
    margin-bottom: 0rem !important;
    margin-left: 0px !important;
}

/* Content areas binnen containers */
.question-help-container,
.question-valid-container,
.answer-container {
  padding: 0.5rem !important;                  /* 8px ruimte binnen elk gebied */
  margin: 0 !important;                        /* Geen extra ruimte buiten */
  border: none !important;                     /* Geen randen */
}

/* Group styling */
.group-title {
  font-family: "Flanders Art Sans", Arial, Helvetica, sans-serif !important;
}

.group-description {
  margin-bottom: 1rem;                         /* 16px ruimte onder groep beschrijving */
}

/* =====================================================================
   💬 HELP TEKST EN INSTRUCTIES
   ===================================================================== */

/* Help tekst styling met info icoon */
.question-help,
.question-help-container,
.ls-question-help,
.ls-questionhelp {
  margin-top: 0.1rem !important;               /* 1.6px kleine ruimte boven */
  margin-bottom: 0.1rem !important;            /* 1.6px kleine ruimte onder */
  padding: 0.25rem 0 !important;               /* 4px ruimte boven/onder binnen element */
  font-style: normal !important;               /* Normale tekst (niet cursief) */
  color: #6c757d !important;                   /* Grijze kleur voor help tekst */
  padding-left: 0.25rem !important;            /* 4px ruimte links */
}

/* Instructie tekst styling */
.question-valid-container,
.answer-instruction,
div[class*="instruction"] {
  margin-top: 0.1rem !important;               /* 1.6px kleine ruimte boven */
  margin-bottom: 0.5rem !important;            /* 8px ruimte onder instructies */
  padding: 0.1rem 0 !important;                /* 1.6px ruimte boven/onder binnen */
  font-weight: normal !important;              /* Normale tekst dikte */
  color: #000000 !important;                   /* Zwarte tekst voor instructies */
  border-bottom: 1px solid #e9ecef !important; /* Dunne grijze lijn onder instructies */
  padding-left: 0.25rem !important;            /* 4px ruimte links */
}

.question-valid-container.col-12 {
  padding-left: 0.25rem !important;            /* 4px ruimte links voor brede containers */
}

/* Help icoontjes toevoegen */
.question-help::before,
.ls-questionhelp::before {
  content: "ℹ️" !important;                     /* Info emoji voor help tekst */
  margin-right: 0.5rem !important;             /* 8px ruimte na emoji */
  vertical-align: middle !important;           /* Emoji uitgelijnd met tekst */
}

.question-valid-container .ls-questionhelp::before {
  content: "✅" !important;                     /* Vinkje emoji voor instructies */
  margin-right: 0.5rem !important;             /* 8px ruimte na emoji */
  vertical-align: middle !important;           /* Emoji uitgelijnd met tekst */
}

/* Lege containers gele achtergrond geven */
/*.question-valid-container.col-12:empty,*/
/*.question-valid-container.col-12:not(:has(*)) {*/
/*  background-color: #F0D70F !important;*/        /* Gele achtergrond voor lege areas */
/*  min-height: 0.2rem !important;*/               /* 3.2px minimale hoogte */
/*  border: none !important;*/                     /* Geen rand */
/*  margin: 0 !important;*/                        /* Geen extra ruimte */
/*  padding: 0.25rem !important;*/                 /* 4px ruimte binnen */
/*}*/

/* Lege containers volledig verbergen in plaats van geel kleuren */
.question-valid-container.col-12:empty,
.question-valid-container.col-12:not(:has(*)) {
  display: none !important;                    /* Volledig verbergen - geen gele balk meer */
  height: 0 !important;                        /* Hoogte op nul */
  min-height: 0 !important;                    /* Minimale hoogte op nul */
  padding: 0 !important;                       /* Geen padding */
  margin: 0 !important;                        /* Geen margin */
  border: none !important;                     /* Geen rand */
  overflow: hidden !important;                 /* Verberg eventuele overflow */
}

/* Verberg lege child elements */
/*.question-valid-container .ls-questionhelp:empty,*/
/*.question-valid-container .answer-instruction:empty {*/
/*  display: none !important;*/                    /* Lege help elementen worden verborgen */
/*  margin: 0 !important;*/
/*  padding: 0 !important;*/
/*  border: none !important;*/
/*}*/

/* Ook alle lege child elementen van question-valid-container verbergen */
.question-valid-container.col-12:empty *,
.question-valid-container.col-12:not(:has(*)) * {
  display: none !important;
}

/* =====================================================================
   ☑️ FORM ELEMENTS EN ANSWER OPTIONS (EENVOUDIGE BASIS ARCHITECTUUR)
   ===================================================================== */

/* Uniforme styling voor alle antwoordopties (radio buttons en checkboxes) */
.list-radio .form-check:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.list-radio .answer-item:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.list-radio li:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.ls-answers.radio-list .form-check:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.ls-answers.radio-list .answer-item:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.multiple-opt .form-check:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.list-checkbox .form-check:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.checkbox-list .form-check:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.ls-answers.checkbox-list .form-check:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.list-checkbox .answer-item:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden),
.list-checkbox li:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden) {
  margin-bottom: 0.5rem !important;            /* 8px ruimte onder elke antwoordoptie */
  min-height: 1.5rem !important;               /* 24px minimale hoogte voor clickbaarheid */
  line-height: 1 !important;                   /* Compacte lijnhoogte */
  padding-top: 0.25rem !important;             /* 4px ruimte boven */
  padding-bottom: 0.25rem !important;          /* 4px ruimte onder */
  display: flex !important;                    /* Flexbox voor goede uitlijning */
  align-items: center !important;              /* Verticaal gecentreerd */
}

/* Verborgen items volledig verbergen */
.list-radio .form-check[style*="display: none"],
.list-checkbox .form-check[style*="display: none"],
.multiple-opt .form-check[style*="display: none"],
.list-radio .answer-item[style*="display: none"],
.list-checkbox .answer-item[style*="display: none"],
.list-radio li[style*="display: none"],
.list-checkbox li[style*="display: none"],
.ls-answers .form-check[style*="display: none"],
.ls-answers .answer-item[style*="display: none"],
.ls-irrelevant,
.hidden {
  display: none !important;                    /* Volledig verborgen - niet zichtbaar */
}

/* Bootstrap 5 form check containers */
.form-check:not([style*="display: none"]):not(.ls-irrelevant):not(.hidden) {
  margin-bottom: 0.5rem !important;            /* 8px ruimte onder form checks */
  min-height: 1.5rem !important;               /* 24px minimale hoogte */
  display: flex !important;                    /* Flexbox layout */
  align-items: center !important;              /* Verticaal gecentreerd */
}

/* Input elementen (radio buttons en checkboxes) */
.list-radio input[type="radio"]:not(.ls-irrelevant),
.list-checkbox input[type="checkbox"]:not(.ls-irrelevant),
.multiple-opt input[type="checkbox"]:not(.ls-irrelevant),
.checkbox-list input[type="checkbox"]:not(.ls-irrelevant),
.form-check-input:not(.ls-irrelevant) {
  margin-top: 0 !important;                    /* Geen extra ruimte boven input */
  margin-right: 0.75rem !important;            /* 12px ruimte rechts van checkbox/radio */
  flex-shrink: 0 !important;                   /* Input behoudt vaste grootte */
}

/* Label teksten naast inputs */
.list-radio label:not(.ls-irrelevant),
.list-checkbox label:not(.ls-irrelevant),
.multiple-opt label:not(.ls-irrelevant),
.checkbox-list label:not(.ls-irrelevant),
.form-check-label:not(.ls-irrelevant) {
  margin-bottom: 0 !important;                 /* Geen extra ruimte onder labels */
  line-height: 1.4 !important;                 /* Comfortabele lijnhoogte voor leesbaarheid */
  cursor: pointer !important;                  /* Hand cursor bij hover over label */
}

/* Container hiërarchie cleanup */
.answer-container.col-12 {
  padding-top: 0rem !important;                /* Geen ruimte boven antwoord gebied */
  padding-bottom: 0rem !important;             /* Geen ruimte onder antwoord gebied */
}

.ls-answers.answers-list.radio-list.row,
.ls-answers.checkbox-list.answers-list,
.ls-answers.checkbox-list.answers-list.row {
  padding-top: 0 !important;                   /* Geen ruimte boven antwoord lijsten */
  padding-bottom: 0 !important;                /* Geen ruimte onder antwoord lijsten */
  margin-left: 0 !important;                   /* Geen negatieve margin links */
  margin-right: 0 !important;                  /* Geen negatieve margin rechts */
}

/* Laatste items geen extra margin */
.answer-item.radio-item:last-child,
.list-radio .form-check:last-child,
.list-radio .answer-item:last-child,
.list-radio li:last-child,
.multiple-opt .form-check:last-child,
.list-checkbox .form-check:last-child,
.checkbox-list .form-check:last-child,
.ls-answers.checkbox-list .form-check:last-child,
.list-checkbox .answer-item:last-child,
.list-checkbox li:last-child {
  margin-bottom: 0 !important;                 /* Laatste item heeft geen ruimte onder */
}

/* =====================================================================
   🎯 BUTTON STYLING (ALGEMEEN)
   ===================================================================== */

/* Primary buttons - geel met donkergrijze tekst */
.btn-primary {
  background-color: #F0D70F !important;        /* Heldergele achtergrond */
  border-color: #F0D70F !important;            /* Heldergele rand */
  color: #443939 !important;                   /* Donkergrijze tekst voor contrast */
}

/* Primary button hover effect - lichter geel */
.btn-primary:hover {
  background-color: #f6e76f !important;        /* Lichtere gele tint bij hover */
  border-color: #f6e76f !important;            /* Lichtere gele rand bij hover */
  color: #443939 !important;                   /* Tekst blijft donkergrijs */
}

/* Primary button active/focus states - blauwgroen */
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
  color: #fff !important;                      /* Witte tekst bij actieve staat */
  background-color: #1C7074 !important;        /* Blauwgroene achtergrond */
  border-color: #1C7074 !important;            /* Blauwgroene rand */
  box-shadow: 0 0 0 0.25rem rgba(28, 112, 116, 0.5) !important; /* Gekleurde schaduw voor focus */
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus {
  color: #fff !important;                      /* Witte tekst */
  background-color: #1C7074 !important;        /* Blauwgroene achtergrond */
  border-color: #1C7074 !important;            /* Blauwgroene rand */
}

/* Submit buttons styling */
#ls-button-submit,
#ls-button-previous {
  text-transform: uppercase;                    /* HOOFDLETTERS voor submit buttons */
}

/* MYBTN systeem - alternatieve kleuren voor speciale buttons */
.mybtn .btn-primary {
  background-color: maroon !important;         /* Donkerrode achtergrond */
  border-color: #2473B9 !important;            /* Blauwe rand */
}

.mybtn .btn-primary:hover {
  background-color: green !important;          /* Groene achtergrond bij hover */
  border-color: #2473B9 !important;            /* Blauwe rand blijft */
}

.mybtn .btn-primary:active,
.mybtn .btn-primary.active,
.mybtn .btn-check:checked + .btn-primary {
  background-color: #76C1E2 !important;        /* Lichtblauwe achtergrond bij selectie */
  border-color: #76C1E2 !important;            /* Lichtblauwe rand bij selectie */
}

/* =====================================================================
   📊 PROGRESS BAR
   ===================================================================== */

/* Progress bar container */
.progress,
.top-container .progress,
.survey-progress,
.survey-progress .progress {
  background-color: #eee !important;           /* Lichtgrijze achtergrond voor lege balk */
  box-shadow: none;                             /* Geen schaduw */
  border-radius: 0;                             /* Scherpe hoeken (geen ronde hoeken) */
  height: 1rem;                                 /* 16px hoogte voor progress bar */
}

/* Progress bar vulling */
.progress-bar,
.top-container .progress-bar,
.survey-progress .progress-bar,
.progress .progress-bar {
  background-color: #443939 !important;        /* Donkergrijze vulling toont voortgang */
  box-shadow: none;                             /* Geen schaduw op vulling */
}

/* =====================================================================
   🗺️ LEAFLET MAPS INTEGRATION
   ===================================================================== */

/* Map container styling */
#mapdynamic {
  height: 400px;                                /* 400px hoogte voor desktop kaarten */
  width: 100%;                                  /* Volledige breedte van container */
  max-width: 100%;                              /* Niet breder dan container */
  position: relative;                           /* Relatieve positionering voor child elements */
  z-index: 1;                                   /* Laag z-index voor map basis */
  overflow: hidden;                             /* Inhoud buiten grenzen wordt afgesneden */
  margin: 15px 0;                               /* 15px ruimte boven en onder kaart */
  border-radius: 8px;                           /* 8px ronde hoeken */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);   /* Subtiele schaduw onder kaart */
}

/* Leaflet canvas element */
.leaflet-container canvas {
  width: 100% !important;                       /* Canvas vult volledige breedte */
  height: 100% !important;                      /* Canvas vult volledige hoogte */
  position: absolute !important;                /* Absolute positionering */
  top: 0 !important;                            /* Uitgelijnd met bovenkant */
  left: 0 !important;                           /* Uitgelijnd met linkerkant */
  z-index: 1 !important;                        /* Laag z-index voor canvas */
}

/* Leaflet control elements */
.leaflet-control-container {
  z-index: 2 !important;                        /* Hoger z-index voor controls */
  position: relative;                           /* Relatieve positionering */
}

.leaflet-pane {
  z-index: 1 !important;                        /* Laag z-index voor map lagen */
}

.leaflet-top, 
.leaflet-bottom {
  z-index: 2 !important;                        /* Hoger z-index voor top/bottom controls */
}

.dynamic-map {
  position: relative;                           /* Relatieve positionering */
  overflow: visible;                            /* Inhoud mag zichtbaar zijn buiten grenzen */
}

.dynamic-map .hidden {
  display: none;                                /* Verborgen map elementen */
}

.leaflet-interactive {
  stroke-linecap: round;                        /* Ronde uiteinden voor lijnen */
  stroke-linejoin: round;                       /* Ronde verbindingen tussen lijnsegmenten */
}

/* =====================================================================
   🎯 KURTBTN SYSTEEM - EENVOUDIGE BASIS + KRACHTIGE VERBERG-REGELS
   
   📝 SECTIE OVERZICHT:
   Deze sectie gebruikt een twee-laags architectuur:
   1. Eenvoudige basis selectors voor normale functionaliteit
   2. Zeer krachtige verberg-regels die specifiek "Anders" velden targeten
   
   🔧 KRITIEKE ARCHITECTUUR VERBETERING:
   Door eenvoudige basis selectors te behouden werken de kleuren onmiddellijk.
   Alleen waar nodig worden specifieke verberg-regels toegevoegd.
   
   🎨 KLEURENSCHEMA LOGICA:
   • Optie 1 (rood spectrum): Negatief/slecht/helemaal oneens
   • Optie 2 (oranje spectrum): Matig/neutraal/eerder oneens  
   • Optie 3 (groen spectrum): Positief/goed/eerder eens
   • Optie 4 (blauw spectrum): Zeer positief/excellent/helemaal eens
   ===================================================================== */

/* =====================================================================
   🎯 KURTBTN SYSTEEM - VERHOOGDE SPECIFICITEIT VOOR DIRECTE KLEURWEERGAVE
   
   📝 SECTIE OVERZICHT:
   Deze sectie gebruikt verhoogde CSS specificiteit om te garanderen dat
   de KURTBTN kleuren onmiddellijk correct weergegeven worden.
   
   🔧 KRITIEKE ARCHITECTUUR:
   Door meer specifieke selectors te gebruiken (.kurtbtn.question-container)
   winnen deze regels van de algemene .btn-primary regels.
   
   🎨 KLEURENSCHEMA LOGICA:
   • Optie 1 (rood spectrum): Negatief/slecht/helemaal oneens
   • Optie 2 (oranje spectrum): Matig/neutraal/eerder oneens  
   • Optie 3 (groen spectrum): Positief/goed/eerder eens
   • Optie 4 (blauw spectrum): Zeer positief/excellent/helemaal eens
   ===================================================================== */

/* 🎨 KLEURGECODEERDE KNOPPEN - OPTIE 1: ROOD SPECTRUM (NEGATIEF) */
.kurtbtn.question-container [id$="1"] .button-item,
.kurtbtn.question-container [id$="1"] .btn-check + .btn,
.kurtbtn [id$="1"] .button-item.btn,
.kurtbtn [id$="1"] .btn-check + .btn.btn-primary {
  background-color: #FDEDEC !important;        /* Lichtroze achtergrond voor normale staat */
  border-color: #FDEDEC !important;            /* Lichtroze rand voor normale staat */
}

.kurtbtn.question-container [id$="1"] .button-item:hover,
.kurtbtn.question-container [id$="1"] .btn-check + .btn:hover,
.kurtbtn [id$="1"] .button-item.btn:hover,
.kurtbtn [id$="1"] .btn-check + .btn.btn-primary:hover {
  background-color: #F5B7B1 !important;        /* Donkerder roze bij hover - visuele feedback */
  border-color: #F5B7B1 !important;            /* Donkerder roze rand bij hover */
}

.kurtbtn.question-container [id$="1"] .button-item:active,
.kurtbtn.question-container [id$="1"] .button-item.active,
.kurtbtn.question-container [id$="1"] .btn-check:checked + .button-item,
.kurtbtn.question-container [id$="1"] .btn-check:checked + .btn,
.kurtbtn [id$="1"] .button-item.btn:active,
.kurtbtn [id$="1"] .button-item.btn.active,
.kurtbtn [id$="1"] .btn-check:checked + .button-item.btn,
.kurtbtn [id$="1"] .btn-check:checked + .btn.btn-primary {
  background-color: #E74C3C !important;        /* Helderrood bij selectie - duidelijk onderscheid */
  border-color: #E5E7EB !important;            /* Neutrale grijze rand bij selectie */
  border-width: 3px !important;                /* Dikke rand (3px) om selectie visueel te benadrukken */
  box-shadow: 0 4px 8px rgba(176, 58, 46, 0.3) !important; /* Rode schaduw voor diepte-effect */
}

/* 🎨 KLEURGECODEERDE KNOPPEN - OPTIE 2: ORANJE SPECTRUM (NEUTRAAL) */
.kurtbtn.question-container [id$="2"] .button-item,
.kurtbtn.question-container [id$="2"] .btn-check + .btn,
.kurtbtn [id$="2"] .button-item.btn,
.kurtbtn [id$="2"] .btn-check + .btn.btn-primary {
  background-color: #FEF5E7 !important;        /* Lichtoranje achtergrond voor normale staat */
  border-color: #FEF5E7 !important;            /* Lichtoranje rand voor normale staat */
}

.kurtbtn.question-container [id$="2"] .button-item:hover,
.kurtbtn.question-container [id$="2"] .btn-check + .btn:hover,
.kurtbtn [id$="2"] .button-item.btn:hover,
.kurtbtn [id$="2"] .btn-check + .btn.btn-primary:hover {
  background-color: #FAD7A0 !important;        /* Donkerder oranje bij hover */
  border-color: #FAD7A0 !important;            /* Donkerder oranje rand bij hover */
}

.kurtbtn.question-container [id$="2"] .button-item:active,
.kurtbtn.question-container [id$="2"] .button-item.active,
.kurtbtn.question-container [id$="2"] .btn-check:checked + .button-item,
.kurtbtn.question-container [id$="2"] .btn-check:checked + .btn,
.kurtbtn [id$="2"] .button-item.btn:active,
.kurtbtn [id$="2"] .button-item.btn.active,
.kurtbtn [id$="2"] .btn-check:checked + .button-item.btn,
.kurtbtn [id$="2"] .btn-check:checked + .btn.btn-primary {
  background-color: #F39C12 !important;        /* Helderoranje bij selectie */
  border-color: #E5E7EB !important;            /* Neutrale grijze rand bij selectie */
  border-width: 3px !important;                /* Dikke rand (3px) om selectie te benadrukken */
  box-shadow: 0 4px 8px rgba(185, 119, 14, 0.3) !important; /* Oranje schaduw voor diepte-effect */
}

/* 🎨 KLEURGECODEERDE KNOPPEN - OPTIE 3: GROEN SPECTRUM (POSITIEF) */
.kurtbtn.question-container [id$="3"] .button-item,
.kurtbtn.question-container [id$="3"] .btn-check + .btn,
.kurtbtn [id$="3"] .button-item.btn,
.kurtbtn [id$="3"] .btn-check + .btn.btn-primary {
  background-color: #E9F7EF !important;        /* Lichtgroene achtergrond voor normale staat */
  border-color: #E9F7EF !important;            /* Lichtgroene rand voor normale staat */
}

.kurtbtn.question-container [id$="3"] .button-item:hover,
.kurtbtn.question-container [id$="3"] .btn-check + .btn:hover,
.kurtbtn [id$="3"] .button-item.btn:hover,
.kurtbtn [id$="3"] .btn-check + .btn.btn-primary:hover {
  background-color: #A9DFBF !important;        /* Donkerder groen bij hover */
  border-color: #A9DFBF !important;            /* Donkerder groene rand bij hover */
}

.kurtbtn.question-container [id$="3"] .button-item:active,
.kurtbtn.question-container [id$="3"] .button-item.active,
.kurtbtn.question-container [id$="3"] .btn-check:checked + .button-item,
.kurtbtn.question-container [id$="3"] .btn-check:checked + .btn,
.kurtbtn [id$="3"] .button-item.btn:active,
.kurtbtn [id$="3"] .button-item.btn.active,
.kurtbtn [id$="3"] .btn-check:checked + .button-item.btn,
.kurtbtn [id$="3"] .btn-check:checked + .btn.btn-primary {
  background-color: #27AE60 !important;        /* Heldergroen bij selectie */
  border-color: #E5E7EB !important;            /* Neutrale grijze rand bij selectie */
  border-width: 3px !important;                /* Dikke rand (3px) om selectie te benadrukken */
  box-shadow: 0 4px 8px rgba(35, 155, 86, 0.3) !important; /* Groene schaduw voor diepte-effect */
}

/* 🎨 KLEURGECODEERDE KNOPPEN - OPTIE 4: BLAUW SPECTRUM (ZEER POSITIEF) */
.kurtbtn.question-container [id$="4"] .button-item,
.kurtbtn.question-container [id$="4"] .btn-check + .btn,
.kurtbtn [id$="4"] .button-item.btn,
.kurtbtn [id$="4"] .btn-check + .btn.btn-primary {
  background-color: #EBF5FB !important;        /* Lichtblauwe achtergrond voor normale staat */
  border-color: #EBF5FB !important;            /* Lichtblauwe rand voor normale staat */
}

.kurtbtn.question-container [id$="4"] .button-item:hover,
.kurtbtn.question-container [id$="4"] .btn-check + .btn:hover,
.kurtbtn [id$="4"] .button-item.btn:hover,
.kurtbtn [id$="4"] .btn-check + .btn.btn-primary:hover {
  background-color: #AED6F1 !important;        /* Donkerder blauw bij hover */
  border-color: #AED6F1 !important;            /* Donkerder blauwe rand bij hover */
}

.kurtbtn.question-container [id$="4"] .button-item:active,
.kurtbtn.question-container [id$="4"] .button-item.active,
.kurtbtn.question-container [id$="4"] .btn-check:checked + .button-item,
.kurtbtn.question-container [id$="4"] .btn-check:checked + .btn,
.kurtbtn [id$="4"] .button-item.btn:active,
.kurtbtn [id$="4"] .button-item.btn.active,
.kurtbtn [id$="4"] .btn-check:checked + .button-item.btn,
.kurtbtn [id$="4"] .btn-check:checked + .btn.btn-primary {
  background-color: #3498DB !important;        /* Helderblauw bij selectie */
  border-color: #E5E7EB !important;            /* Neutrale grijze rand bij selectie */
  border-width: 3px !important;                /* Dikke rand (3px) om selectie te benadrukken */
  box-shadow: 0 4px 8px rgba(40, 116, 166, 0.3) !important; /* Blauwe schaduw voor diepte-effect */
}

/* 🎨 KLEURGECODEERDE KNOPPEN - OPTIE J: GROEN SPECTRUM (JA) */
.kurtbtn.question-container [id$="J"] .button-item,
.kurtbtn.question-container [id$="J"] .btn-check + .btn,
.kurtbtn [id$="J"] .button-item.btn,
.kurtbtn [id$="J"] .btn-check + .btn.btn-primary {
  background-color: #E9F7EF !important;        /* Lichtgroene achtergrond voor normale staat */
  border-color: #E9F7EF !important;            /* Lichtgroene rand voor normale staat */
}

.kurtbtn.question-container [id$="J"] .button-item:hover,
.kurtbtn.question-container [id$="J"] .btn-check + .btn:hover,
.kurtbtn [id$="J"] .button-item.btn:hover,
.kurtbtn [id$="J"] .btn-check + .btn.btn-primary:hover {
  background-color: #A9DFBF !important;        /* Donkerder groen bij hover */
  border-color: #A9DFBF !important;            /* Donkerder groene rand bij hover */
}

.kurtbtn.question-container [id$="J"] .button-item:active,
.kurtbtn.question-container [id$="J"] .button-item.active,
.kurtbtn.question-container [id$="J"] .btn-check:checked + .button-item,
.kurtbtn.question-container [id$="J"] .btn-check:checked + .btn,
.kurtbtn [id$="J"] .button-item.btn:active,
.kurtbtn [id$="J"] .button-item.btn.active,
.kurtbtn [id$="J"] .btn-check:checked + .button-item.btn,
.kurtbtn [id$="J"] .btn-check:checked + .btn.btn-primary {
  background-color: #27AE60 !important;        /* Heldergroen bij selectie */
  border-color: #E5E7EB !important;            /* Neutrale grijze rand bij selectie */
  border-width: 3px !important;                /* Dikke rand (3px) om selectie te benadrukken */
  box-shadow: 0 4px 8px rgba(35, 155, 86, 0.3) !important; /* Groene schaduw voor diepte-effect */
}

/* 🎨 KLEURGECODEERDE KNOPPEN - OPTIE N: ROOD SPECTRUM (NEE) */
.kurtbtn.question-container [id$="N"] .button-item,
.kurtbtn.question-container [id$="N"] .btn-check + .btn,
.kurtbtn [id$="N"] .button-item.btn,
.kurtbtn [id$="N"] .btn-check + .btn.btn-primary {
  background-color: #FDEDEC !important;        /* Lichtroze achtergrond voor normale staat */
  border-color: #FDEDEC !important;            /* Lichtroze rand voor normale staat */
}

.kurtbtn.question-container [id$="N"] .button-item:hover,
.kurtbtn.question-container [id$="N"] .btn-check + .btn:hover,
.kurtbtn [id$="N"] .button-item.btn:hover,
.kurtbtn [id$="N"] .btn-check + .btn.btn-primary:hover {
  background-color: #F5B7B1 !important;        /* Donkerder roze bij hover - visuele feedback */
  border-color: #F5B7B1 !important;            /* Donkerder roze rand bij hover */
}

.kurtbtn.question-container [id$="N"] .button-item:active,
.kurtbtn.question-container [id$="N"] .button-item.active,
.kurtbtn.question-container [id$="N"] .btn-check:checked + .button-item,
.kurtbtn.question-container [id$="N"] .btn-check:checked + .btn,
.kurtbtn [id$="N"] .button-item.btn:active,
.kurtbtn [id$="N"] .button-item.btn.active,
.kurtbtn [id$="N"] .btn-check:checked + .button-item.btn,
.kurtbtn [id$="N"] .btn-check:checked + .btn.btn-primary {
  background-color: #E74C3C !important;        /* Helderrood bij selectie - duidelijk onderscheid */
  border-color: #E5E7EB !important;            /* Neutrale grijze rand bij selectie */
  border-width: 3px !important;                /* Dikke rand (3px) om selectie visueel te benadrukken */
  box-shadow: 0 4px 8px rgba(176, 58, 46, 0.3) !important; /* Rode schaduw voor diepte-effect */
}

/* =====================================================================
   🚫 KRACHTIGE VERBERG-REGELS - SPECIFIEK VOOR "ANDERS" VELDEN
   
   🔑 STRATEGIE: Deze regels hebben zeer hoge specificiteit en targeten
   alleen "Anders" velden wanneer LimeSurvey die wil verbergen.
   
   ⚡ VOORDEEL: Normale KURTBTN functionaliteit blijft eenvoudig en werkend,
   terwijl native verberging perfect gerespecteerd wordt.
   ===================================================================== */

/* NATIVE LIMESURVEY VERBERG CLASSES - MAXIMALE PRIORITEIT VOOR "ANDERS" VELDEN */
.kurtbtn .ls-js-hidden,
.kurtbtn .ls-irrelevant,
.kurtbtn .hidden,
.kurtbtn [style*="display: none"],
.kurtbtn [style*="display:none"],
.kurtbtn .form-check.ls-js-hidden,
.kurtbtn .form-check.ls-irrelevant,
.kurtbtn .form-check.hidden,
.kurtbtn .form-check[style*="display: none"],
.kurtbtn .form-check[style*="display:none"],
.kurtbtn .answer-item.ls-js-hidden,
.kurtbtn .answer-item.ls-irrelevant,
.kurtbtn .answer-item.hidden,
.kurtbtn .answer-item[style*="display: none"],
.kurtbtn .answer-item[style*="display:none"],
.kurtbtn .bootstrap-buttons-div.ls-js-hidden,
.kurtbtn .bootstrap-buttons-div.ls-irrelevant,
.kurtbtn .bootstrap-buttons-div.hidden,
.kurtbtn .bootstrap-buttons-div[style*="display: none"],
.kurtbtn .bootstrap-buttons-div[style*="display:none"],
.kurtbtn div[id*="other"].ls-js-hidden,
.kurtbtn div[id*="other"].ls-irrelevant,
.kurtbtn div[id*="other"].hidden,
.kurtbtn div[id*="other"][style*="display: none"],
.kurtbtn div[id*="other"][style*="display:none"],
.kurtbtn [id*="othertext"].ls-js-hidden,
.kurtbtn [id*="othertext"].ls-irrelevant,
.kurtbtn [id*="othertext"].hidden,
.kurtbtn [id*="othertext"][style*="display: none"],
.kurtbtn [id*="othertext"][style*="display:none"],
.kurtbtn .row[id*="other"].ls-js-hidden,
.kurtbtn .row[id*="other"].ls-irrelevant,
.kurtbtn .row[id*="other"].hidden,
.kurtbtn .row[id*="other"][style*="display: none"],
.kurtbtn .row[id*="other"][style*="display:none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -10000px !important;
  top: -10000px !important;
  z-index: -9999 !important;
}

/* EXTRA ZEKERHEID - TEKSTGEBASEERDE "ANDERS" DETECTIE */
.kurtbtn label[for*="other"],
.kurtbtn input[id*="other"],
.kurtbtn textarea[id*="other"],
.kurtbtn div[class*="other"] {
  /* Alleen verbergen als LimeSurvey het markeert als verborgen */
}

.kurtbtn label[for*="other"].ls-js-hidden,
.kurtbtn label[for*="other"].ls-irrelevant,
.kurtbtn label[for*="other"].hidden,
.kurtbtn label[for*="other"][style*="display: none"],
.kurtbtn input[id*="other"].ls-js-hidden,
.kurtbtn input[id*="other"].ls-irrelevant,
.kurtbtn input[id*="other"].hidden,
.kurtbtn input[id*="other"][style*="display: none"],
.kurtbtn textarea[id*="other"].ls-js-hidden,
.kurtbtn textarea[id*="other"].ls-irrelevant,
.kurtbtn textarea[id*="other"].hidden,
.kurtbtn textarea[id*="other"][style*="display: none"],
.kurtbtn div[class*="other"].ls-js-hidden,
.kurtbtn div[class*="other"].ls-irrelevant,
.kurtbtn div[class*="other"].hidden,
.kurtbtn div[class*="other"][style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -10000px !important;
  top: -10000px !important;
  z-index: -9999 !important;
}

/* =====================================================================
   🔧 KURTBTN CONTAINER AANPASSINGEN (EENVOUDIG BEHOUDEN)
   ===================================================================== */

/* Versterkte visuele scheiding - alle KURTBTN vragen */
.kurtbtn.question-container {
  border: 2px solid #F0D70F !important;        /* Dikkere gele rand voor betere zichtbaarheid */
  border-radius: 4px !important;               /* Lichte afronding voor modern uiterlijk */
}

/* Button hoogte aanpassing - alleen voor schaalvragen */
.kurtbtn.question-container [id$="1"] .button-item,
.kurtbtn.question-container [id$="1"] .btn-check + .btn,
.kurtbtn.question-container [id$="2"] .button-item,
.kurtbtn.question-container [id$="2"] .btn-check + .btn,
.kurtbtn.question-container [id$="3"] .button-item,
.kurtbtn.question-container [id$="3"] .btn-check + .btn,
.kurtbtn.question-container [id$="4"] .button-item,
.kurtbtn.question-container [id$="4"] .btn-check + .btn,
.kurtbtn [id$="1"] .button-item.btn,
.kurtbtn [id$="1"] .btn-check + .btn.btn-primary,
.kurtbtn [id$="2"] .button-item.btn,
.kurtbtn [id$="2"] .btn-check + .btn.btn-primary,
.kurtbtn [id$="3"] .button-item.btn,
.kurtbtn [id$="3"] .btn-check + .btn.btn-primary,
.kurtbtn [id$="4"] .button-item.btn,
.kurtbtn [id$="4"] .btn-check + .btn.btn-primary {
  min-height: 1rem !important;                 /* Compacte hoogte: 16px i.p.v. standaard 24px */
  padding-top: 0.125rem !important;            /* Minimale bovenpading: 2px */
  padding-bottom: 0.125rem !important;         /* Minimale onderpading: 2px */
  padding-left: 0.375rem !important;           /* Horizontale padding behouden: 6px voor leesbaarheid */
  padding-right: 0.375rem !important;          /* Horizontale padding behouden: 6px voor leesbaarheid */
  line-height: 1.2 !important;                 /* Compacte lijnhoogte voor betere tekstweergave */
}

/* Form-check container centering fix - alleen voor schaalvragen */
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3:nth-child(1) .form-check.col-12,
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3:nth-child(2) .form-check.col-12,
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3:nth-child(3) .form-check.col-12,
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3:nth-child(4) .form-check.col-12 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Labels binnen form-check centreren */
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3:nth-child(1) .form-check.col-12 .btn,
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3:nth-child(2) .form-check.col-12 .btn,
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3:nth-child(3) .form-check.col-12 .btn,
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3:nth-child(4) .form-check.col-12 .btn {
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
  width: auto !important;                       /* Override Bootstrap's .w-100 class */
  max-width: 90% !important;                    /* Prevent button from being too wide */
  min-width: 120px !important;                  /* Ensure minimum clickable width */
}

/* Alternatieve selector voor alle kurtbtn form-check containers */
.kurtbtn .form-check.col-12 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.25rem !important;                  /* Small padding for visual spacing */
}

/* Override Bootstrap's w-100 class specifically for KURTBTN buttons */
.kurtbtn .form-check.col-12 .btn.w-100 {
  width: auto !important;                       /* Remove full width */
  max-width: 85% !important;                    /* Limit maximum width */
  margin: 0 auto !important;                    /* Center the button */
  flex-shrink: 0 !important;                    /* Prevent button from shrinking */
}

/* Ensure the button text is centered */
.kurtbtn .form-check.col-12 .btn {
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

/* Parent bootstrap-buttons-div also needs centering */
.kurtbtn .bootstrap-buttons-div.col-12.col-sm-3 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.25rem !important;
}

/* Verberg question-valid-container - alleen voor schaalvragen */
.kurtbtn:has([id$="1"]) .question-valid-container,
.kurtbtn:has([id$="2"]) .question-valid-container,
.kurtbtn:has([id$="3"]) .question-valid-container,
.kurtbtn:has([id$="4"]) .question-valid-container,
.kurtbtn:has([id$="1"]) .question-valid-container.col-12,
.kurtbtn:has([id$="2"]) .question-valid-container.col-12,
.kurtbtn:has([id$="3"]) .question-valid-container.col-12,
.kurtbtn:has([id$="4"]) .question-valid-container.col-12 {
  display: none !important;                    /* Volledig verbergen - geen storende gele balk */
}

/* Ook alle child elementen verbergen - alleen voor schaalvragen */
.kurtbtn:has([id$="1"]) .question-valid-container *,
.kurtbtn:has([id$="2"]) .question-valid-container *,
.kurtbtn:has([id$="3"]) .question-valid-container *,
.kurtbtn:has([id$="4"]) .question-valid-container *,
.kurtbtn:has([id$="1"]) .question-valid-container.col-12 *,
.kurtbtn:has([id$="2"]) .question-valid-container.col-12 *,
.kurtbtn:has([id$="3"]) .question-valid-container.col-12 *,
.kurtbtn:has([id$="4"]) .question-valid-container.col-12 * {
  display: none !important;                    /* Alle inhoud van container verbergen */
}

/* Compacte spacing - alleen voor schaalvragen */
.kurtbtn:has([id$="1"]) .answer-container,
.kurtbtn:has([id$="2"]) .answer-container,
.kurtbtn:has([id$="3"]) .answer-container,
.kurtbtn:has([id$="4"]) .answer-container,
.kurtbtn:has([id$="1"]) .answer-container.col-12,
.kurtbtn:has([id$="2"]) .answer-container.col-12,
.kurtbtn:has([id$="3"]) .answer-container.col-12,
.kurtbtn:has([id$="4"]) .answer-container.col-12 {
  padding-top: 0rem !important;                /* Geen padding boven: 0px */
  padding-bottom: 0rem !important;             /* Geen padding onder: 0px */
  margin-top: 0.5rem !important;               /* Kleine margin boven: 8px voor scheiding van titel */
  margin-bottom: 0rem !important;              /* Geen margin onder: 0px */
}

/* Button lijst containers - minimale spacing */
.kurtbtn:has([id$="1"]) .ls-answers.answers-list.radio-list,
.kurtbtn:has([id$="2"]) .ls-answers.answers-list.radio-list,
.kurtbtn:has([id$="3"]) .ls-answers.answers-list.radio-list,
.kurtbtn:has([id$="4"]) .ls-answers.answers-list.radio-list,
.kurtbtn:has([id$="1"]) .ls-answers.answers-list.radio-list.row,
.kurtbtn:has([id$="2"]) .ls-answers.answers-list.radio-list.row,
.kurtbtn:has([id$="3"]) .ls-answers.answers-list.radio-list.row,
.kurtbtn:has([id$="4"]) .ls-answers.answers-list.radio-list.row {
  padding-top: 0rem !important;                /* Geen padding boven: 0px */
  padding-bottom: 0rem !important;             /* Geen padding onder: 0px */
  margin-top: 0rem !important;                 /* Geen margin boven: 0px */
  margin-bottom: 0rem !important;              /* Geen margin onder: 0px */
}

/* Vraag container spacing - met correcte margin-bottom overschrijvingen */
.kurtbtn:has([id$="1"]) .question-container,
.kurtbtn:has([id$="2"]) .question-container,
.kurtbtn:has([id$="3"]) .question-container,
.kurtbtn:has([id$="4"]) .question-container {
  padding-bottom: 2px !important;              /* Minimale padding onder: 2px (gelijk aan boven) */
  margin-bottom: 1.5rem !important;            /* Verhoogde ruimte tussen schaalvragen: 24px */
}

/* Ja/Nee vragen - ook verhoogde margin */
.kurtbtn:has([id$="J"]) .question-container,
.kurtbtn:has([id$="N"]) .question-container {
  margin-bottom: 1.5rem !important;            /* Verhoogde ruimte tussen J/N vragen: 24px */
}

/* Question text container - minimale tekst spacing */
.kurtbtn:has([id$="1"]) .question-text,
.kurtbtn:has([id$="2"]) .question-text,
.kurtbtn:has([id$="3"]) .question-text,
.kurtbtn:has([id$="4"]) .question-text,
.kurtbtn:has([id$="1"]) div[class*="question-text"],
.kurtbtn:has([id$="2"]) div[class*="question-text"],
.kurtbtn:has([id$="3"]) div[class*="question-text"],
.kurtbtn:has([id$="4"]) div[class*="question-text"] {
  margin-top: 0rem !important;                 /* Geen margin boven: 0px */
  margin-bottom: 0rem !important;              /* Geen margin onder: 0px */
  padding-bottom: 0rem !important;             /* Geen padding onder: 0px */
}

/* =====================================================================
   📱 RESPONSIVE DESIGN VOOR KURTBTN - ALLEEN SCHAALVRAGEN (1-4)
   ===================================================================== */

@media (max-width: 768px) {
  /* Button hoogte aanpassingen voor mobiel - alleen schaalvragen */
  .kurtbtn.question-container [id$="1"] .btn,
  .kurtbtn.question-container [id$="2"] .btn,
  .kurtbtn.question-container [id$="3"] .btn,
  .kurtbtn.question-container [id$="4"] .btn,
  .kurtbtn [id$="1"] .btn.btn-primary,
  .kurtbtn [id$="2"] .btn.btn-primary,
  .kurtbtn [id$="3"] .btn.btn-primary,
  .kurtbtn [id$="4"] .btn.btn-primary {
    font-size: 0.85rem;                         /* Kleinere tekst op mobiel: 13.6px */
    padding: 0.125rem 0.375rem;                 /* Compacte padding: 2px boven/onder, 6px links/rechts */
    min-height: 0.875rem !important;            /* Nog lagere hoogte op mobiel: 14px */
  }
  
  /* Container aanpassingen voor mobiel - alle KURTBTN vragen */
  .kurtbtn.question-container {
    margin-bottom: 1.25rem !important;         /* Compactere ruimte tussen vragen op mobiel: 20px */
  }
  
  .kurtbtn.question-container:has([id$="1"]) .question-title-container,
  .kurtbtn.question-container:has([id$="2"]) .question-title-container,
  .kurtbtn.question-container:has([id$="3"]) .question-title-container,
  .kurtbtn.question-container:has([id$="4"]) .question-title-container {
    padding: 0.2rem !important;                /* Compacte padding op mobiel: 3.2px */
    font-size: 0.9rem !important;              /* Kleinere tekst op mobiel: 14.4px */
  }
  
  /* Button containers mobiele aanpassing - behoud centering */
  .kurtbtn.question-container [id$="1"],
  .kurtbtn.question-container [id$="2"], 
  .kurtbtn.question-container [id$="3"],
  .kurtbtn.question-container [id$="4"] {
    min-height: 2rem !important;                /* Lagere container hoogte op mobiel: 32px */
  }
}

/* =====================================================================
   🎚️ SLIDER STYLING
   ===================================================================== */

/* Slider list items */
.slider-list li {
  border-bottom: 1px dotted #555;              /* Gestippelde lijn onder elke slider */
  padding-bottom: 1rem;                        /* 16px ruimte onder slider */
}

.slider-list li:last-child {
  border-bottom: none;                          /* Laatste slider heeft geen lijn onder */
  padding-bottom: 0;                           /* Laatste slider heeft geen ruimte onder */
}

.slider-list label {
  margin-bottom: 1rem;                          /* 16px ruimte onder slider labels */
}

/* Slider track (de balk waar de slider over beweegt) */
.slider-list .slider-track {
  background-image: none;                       /* Geen achtergrond afbeelding */
  background-color: #ddd;                       /* Lichtgrijze achtergrond voor track */
  box-shadow: none;                             /* Geen schaduw */
  border-radius: 0;                             /* Scherpe hoeken */
}

/* Slider selection (het gevulde deel van de balk) */
.slider-list .slider-selection {
  background-image: none;                       /* Geen achtergrond afbeelding */
  background-color: #003C68;                    /* Donkerblauwe vulling */
  box-shadow: none;                             /* Geen schaduw */
  border-radius: 0;                             /* Scherpe hoeken */
}

/* Slider labels links en rechts */
.slider-list .slider-left,
.slider-list .slider-right {
  margin-top: 0.4375rem;                        /* 7px ruimte boven labels voor uitlijning */
}

/* Slider handle voordat gebruiker ermee heeft geinteracteerd */
.slider-untouched .slider-handle {
  background-color: grey;                       /* Grijze kleur voor niet-gebruikte slider */
}

/* =====================================================================
   🔧 OVERIGE COMPONENTEN
   ===================================================================== */

/* Input groups */
.input-group-text {
  color: white;                                 /* Witte tekst in input group addons */
}

/* Special elements */
.question-number,
.question-code {
  font-style: italic;                           /* Cursieve tekst voor vraag nummers en codes */
}

#navigator-container {
  margin-bottom: 1rem;                          /* 16px ruimte onder navigatie container */
}

/* Hidden questions - voor conditionele logica */
.question-container.mijn-verborgen-vraag,
div[id^="question"].mijn-verborgen-vraag,
.question-item.mijn-verborgen-vraag,
.question-wrapper.mijn-verborgen-vraag {
  display: none !important;                    /* Vragen met class 'mijn-verborgen-vraag' worden verborgen */
}

/* Utility classes */
.center {
  display: block;                               /* Block display voor afbeeldingen */
  margin-left: auto;                            /* Automatische linker margin voor centrering */
  margin-right: auto;                           /* Automatische rechter margin voor centrering */
}

/* =====================================================================
   📱 RESPONSIVE DESIGN
   ===================================================================== */

/* Tablet en mobiele aanpassingen */
@media (max-width: 768px) {
  .question-container {
    margin-bottom: 1rem !important;            /* 16px ruimte onder vragen op kleine schermen */
  }
  
  .question-title-container {
    padding: 0.4rem !important;                /* 6.4px padding voor titels op kleine schermen */
    font-size: 1rem;                           /* 16px tekstgrootte behouden op mobiel */
  }
  
  #mapdynamic {
    height: 300px;                              /* 300px hoogte voor kaarten op mobiele apparaten */
  }
}

/* =====================================================================
   ✅ EINDE VOI_CUSTOM.CSS - CORRECTE ARCHITECTUUR VERSIE
   
   📋 SAMENVATTING KRITIEKE VERBETERINGEN:
   • Eenvoudige basis selectors voor KURTBTN functionaliteit (werken onmiddellijk)
   • Zeer specifieke verberg-regels die alleen "Anders" velden targeten
   • Twee-laags architectuur: basis functionaliteit + gerichte native ondersteuning
   • Alle styling blijft visueel identiek aan de originele versie
   • Native LimeSurvey functionaliteit wordt perfect gerespecteerd
   
   🎯 KURTBTN SECTIE VOORDELEN:
   • Onmiddellijke weergave van juiste kleuren bij laden van vraag
   • Werkt naadloos samen met LimeSurvey's native verberging
   • Eenvoudige onderhoudbare code structuur
   • Geen JavaScript workarounds nodig
   • Robuust tegen toekomstige LimeSurvey updates
   
   🔧 TECHNISCHE ARCHITECTUUR:
   • Basis KURTBTN selectors: eenvoudig en direct werkend
   • Verberg-regels: zeer specifiek en alleen voor "Anders" velden
   • Cascade-vriendelijke opbouw die CSS natuurlijk laat werken
   • Respecteert LimeSurvey's semantic HTML structuur
   
   ⚠️ ARCHITECTUUR LESSEN:
   Het originele probleem was dat ik probeerde om elke selector "beschermd"
   te maken tegen verberging, wat complexiteit en falen veroorzaakte.
   De correcte aanpak is: eenvoudige basis + gerichte verberg-regels.
   
   📝 CHANGELOG:
   • 20250827: Volledige herarchitectuur met twee-laags systeem
   • 20250827: Eenvoudige basis selectors voor onmiddellijke kleurweergave
   • 20250827: Zeer krachtige verberg-regels specifiek voor "Anders" velden
   • 20250827: Eliminatie van complexe :not() selectors in basis functionaliteit
   • 20250827: Behoud van alle visuele styling en layout functionaliteit
   ===================================================================== */