/* BSO Enquête - Kindvriendelijke versie met 100% ZICHTBARE RADIO SELECTIE */

:root {
  --primary-bg: #5640A8;     /* Donker paars achtergrond */
  --gradient-bg-light: #5640A8; /* Lichtere paars voor gradient */
  --title-bg: #FF5A81;      /* Roze voor de titel */
  --button-color: #FF8A4B;  /* Oranje voor knoppen */
  --active-color: #FF5A81;  /* Roze voor actieve elementen */
  --border-color: #FF8A4B;  /* Oranje voor randen */
  --slider-left: #5640A8;   /* Paars voor linkerkant slider */
  --slider-right: #FF8A4B;  /* Oranje voor rechterkant slider */
  --slider-handle: #FFD64B; /* Geel voor slider handle */
  --progress-gradient: linear-gradient(90deg, #31EBA9, #FFD64B); /* Voortgangsbalk */
  --text-color: #5640A8;    /* Paars voor teksten */
  --white: #FFFFFF;
  --light-bg: #F8F8FF;      /* Lichte achtergrond */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --border-radius: 16px;
  --border-radius-xl: 30px;
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

body {
  background-color: var(--primary-bg);
  background-image: linear-gradient(135deg, var(--primary-bg), var(--gradient-bg-light));
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
}

/* Container voor de hele enquête */
.bso-enquete-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1.5rem;
  position: relative;
}

/* Titel styling */
.bso-enquete-titel {
text-align: center;
  padding: 0.8rem 4rem;
  margin-bottom: -2px;
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--white);
  background-color: var(--title-bg);
  border-radius: var(--border-radius);
  position: relative;
  box-shadow: var(--shadow);
  display: inline-block;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  z-index: 5;
}

/* Hoofdvraag container */
.bso-section {
  background: var(--white);
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin-bottom: 30px;
  position: relative;
  border: 3px solid var(--border-color);
}

/* Vraag nummer indicator */
.bso-vraag-nummer {
  background: var(--button-color);
  color: white;
  font-weight: 700;
  display: inline-block;
  padding: 0.6rem 2rem;
  border-radius: 30px;
  font-size: 1.2rem;
  position: absolute;
  top: -20px;
  left: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* Vraag tekst */
.bso-section h3 {
  color: var(--text-color);
  font-size: 2.2rem;
  margin: 25px 0 40px 0;
  text-align: center;
  font-weight: 700;
}

/* Formulier elementen */
.bso-form-group {
  margin-bottom: 30px;
  text-align: center;
}

.bso-form-group label {
  display: block;
  margin-bottom: 15px;
  font-weight: 700;
  color: var(--text-color);
  font-size: 1.3rem;
}

.bso-form-group input[type="text"],
.bso-form-group select {
  width: 80%;
  max-width: 350px;
  padding: 15px 20px;
  border: 3px solid var(--primary-bg);
  border-radius: 50px;
  font-size: 1.2rem;
  text-align: center;
  transition: all 0.3s;
  font-family: inherit;
  background: white;
}

.bso-form-group input[type="text"]:focus,
.bso-form-group select:focus {
  border-color: var(--button-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 138, 75, 0.3);
}

/* ===== VERBETERDE RADIO BUTTON STYLING COMPATIBEL MET ALLE HTML STRUCTUREN ===== */
.bso-radio-group {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Style voor de container */
.bso-radio-group label {
  position: relative;
  cursor: pointer;
  padding: 12px 30px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color);
  background: var(--light-bg);
  border: 3px solid #D0D0D0;
  border-radius: 50px;
  transition: all 0.3s;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin: 0;
  text-align: center;
}

/* De radio button zelf verbergen (maar functionaliteit behouden) */
.bso-radio-group input[type="radio"] {
  /* Verberg visueel maar behoud toegankelijkheid */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* ZEER BELANGRIJK: CSS specifiek voor de HTML structuur waar input BINNEN label zit */
/* Dit werkt als de HTML structuur is: 
   <label><input type="radio">Jongen</label> */
.bso-radio-group label:has(input[type="radio"]:checked) {
  background: var(--active-color);
  color: white;
  border-color: var(--active-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(255, 90, 129, 0.3);
}

/* Extra fallback voor browsers die :has() niet ondersteunen */
.bso-radio-group input[type="radio"]:checked + span {
  color: white;
  font-weight: bold;
}

/* Duidelijke indicator bij de geselecteerde radio button */
.bso-radio-group label:has(input[type="radio"]:checked)::after {
  content: '✓';
  position: absolute;
  right: 15px;
  font-size: 1.2rem;
}

/* Een tweede fallback-methode - JavaScript toevoegt 'selected' class */
.bso-radio-group label.selected {
  background: var(--active-color);
  color: white;
  border-color: var(--active-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(255, 90, 129, 0.3);
}

/* Hover effect voor betere interactie */
.bso-radio-group label:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: var(--active-color);
}

/* FALLBACK - Als niets werkt, gebruik een inline styling */
/* Dit wordt toegevoegd via JavaScript */
.radio-checked {
  background: var(--active-color) !important;
  color: white !important;
  border-color: var(--active-color) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 10px rgba(255, 90, 129, 0.3) !important;
}

/* KINDVRIENDELIJKE SLIDER VRAAG STYLING */
.bso-vergelijking-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
  position: relative;
  background: var(--light-bg);
  padding: 25px;
  border-radius: var(--border-radius);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Opties aan zijkanten met emoji's */
.bso-vergelijking-opties {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}

.bso-vergelijking-optie {
  flex: 0 0 140px;
  text-align: center;
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 15px 10px;
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

/* Voeg emoji's toe aan opties voor kindvriendelijkheid */
.bso-optie-links::before {
  content: "👈";
  font-size: 2rem;
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
}

.bso-optie-rechts::before {
  content: "👉";
  font-size: 2rem;
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
}

.bso-optie-links {
  border-left: 16px solid var(--slider-left);
  transform: rotate(-2deg);
}

.bso-optie-rechts {
  border-right: 16px solid var(--slider-right);
  transform: rotate(2deg);
}

.bso-vergelijking-optie:hover {
  transform: translateY(-5px) rotate(0);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.bso-vergelijking-optie h4 {
  color: var(--text-color);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 10px 0;
}

.bso-optie-afbeelding {
  margin: 10px 0;
  text-align: center;
}

.bso-optie-afbeelding img {
  max-width: 90%;
  height: auto;
  max-height: 250px;
  border-radius: 10px;
  transition: transform 0.3s;
  border: 3px solid #F0F0F0;
}

.bso-optie-links .bso-optie-afbeelding img {
  border-color: var(--slider-left);
}

.bso-optie-rechts .bso-optie-afbeelding img {
  border-color: var(--slider-right);
}

.bso-optie-afbeelding img:hover {
  transform: scale(1.1);
}

/* DUIDELIJKERE EN KINDVRIENDELIJKERE SLIDER */
.bso-vergelijking-slider-container {
  width: 100%;
  max-width: 600px;
  padding: 20px;
  margin: 20px auto;
  position: relative;
  background: white;
  border-radius: 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Vraag "Wat vind jij leuker?" boven de slider */
.bso-vergelijking-slider-container::before {
  content: "Wat vind jij leuker?";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color);
  background: white;
  padding: 5px 15px;
  border-radius: 20px;
  border: 2px solid var(--button-color);
}

/* Achtergrond bar van de slider */
.bso-slider {
  height: 16px;
  background: #F0F0F0;
  border-radius: 20px;
  position: relative;
  margin: 0 auto;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(0, 0, 0, 0.1);
}

/* Visuele gradient voor slider - kindvriendelijke kleuren */
.bso-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to right, var(--slider-left) 0%, var(--slider-left) 50%, var(--slider-right) 50%, var(--slider-right) 100%);
  border-radius: 20px;
  z-index: 1;
  pointer-events: none; /* Belangrijk om interactie niet te blokkeren */
}

/* Veel grotere en duidelijkere slider handle met smiley */
.ui-slider-handle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--slider-handle) !important;
  border: 4px solid white !important;
  top: -14px !important;
  margin-left: -20px !important; /* Correctie voor centrering */
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.2s !important;
  z-index: 2 !important; /* Hoger dan de achtergrond */
  /* Voeg smiley toe aan slider handle */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Smiley in slider handle */
.ui-slider-handle::after {
  content: "😀";
  font-size: 20px;
}

.ui-slider-handle:active,
.ui-slider-handle:focus {
  transform: scale(1.3);
  outline: none;
}

/* Toon uiteinden van de slider duidelijker met pijltjes */
.bso-vergelijking-slider-container::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-color);
}

/* Volgende button */
.bso-btn-group {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.bso-btn {
  padding: 15px 40px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  transition: all 0.3s;
  font-family: inherit;
  text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.bso-btn-primary {
  background: var(--button-color);
  color: var(--white);
}

.bso-btn-primary::after {
  content: " →";
}

.bso-btn-primary:hover {
  background: #FF7B36;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.bso-btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bso-btn-secondary {
  background: var(--primary-bg);
  color: var(--white);
}

.bso-btn-secondary::before {
  content: "← ";
}

.bso-btn-secondary:hover {
  background: #4B36A0;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.bso-btn-success {
  background: #31EBA9;
  color: var(--text-color);
}

.bso-btn-success:hover {
  background: #25D996;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Verbeterde voortgangsbalk */
.bso-voortgang-balk-container {
  margin-top: 20px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.bso-voortgang-balk {
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
}

.bso-voortgang-indicator {
  height: 100%;
  background: var(--progress-gradient);
  border-radius: 20px;
  transition: width 0.5s ease;
  animation: pulse 1.5s infinite;
}

/* Pulserende animatie voor voortgangsbalk */
@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* Hoofdstuk intro styling verbeterd */
.bso-hoofdstuk-intro {
  text-align: center;
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: var(--shadow);
  margin-bottom: 25px;
  border: 3px solid var(--border-color);
  position: relative;
}

/* Leuke decoratie voor hoofdstuk intro */
.bso-hoofdstuk-intro::before {
  content: "🎮";
  font-size: 2rem;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--border-color);
	z-index:9;
}

.bso-hoofdstuk-intro h3 {
  color: var(--text-color);
  font-size: 2rem;
  margin: 25px 0 30px 0;
  font-weight: 700;
}

.bso-hoofdstuk-intro p {
  font-size: 1.3rem;
  color: var(--text-color);
  max-width: 90%;
  margin: 0 auto 30px auto;
  line-height: 1.5;
}

/* Intro en bedankt schermen */
#bso-stap-intro,
#bso-stap-bedankt {
  text-align: center;
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: var(--shadow);
  margin-bottom: 25px;
  border: 3px solid var(--border-color);
  position: relative;
}

/* Intro scherm decoratie */
#bso-stap-intro::before {
  content: "👋";
  font-size: 2rem;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--border-color);
z-index:9;
}

/* Bedankt scherm decoratie */
#bso-stap-bedankt::before {
  content: "🎉";
  font-size: 2rem;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #31EBA9;
	z-index:9;
}

#bso-stap-intro h3,
#bso-stap-bedankt h3 {
  color: var(--text-color);
  font-size: 2.2rem;
  margin: 25px 0 30px 0;
  font-weight: 700;
}

#bso-stap-bedankt h3 {
  color: #31EBA9;
}

#bso-stap-bedankt p {
  font-size: 1.3rem;
  color: var(--text-color);
  margin-bottom: 30px;
}

/* SORTEERVRAGEN STYLING - KINDVRIENDELIJK */
.bso-sorteer-container {
  margin: 30px 0;
}

.bso-sorteer-instructie {
  margin-bottom: 25px;
  color: var(--text-color);
  text-align: center;
  background: var(--light-bg);
  padding: 15px;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--border-color);
}

/* Voeg pictogram toe aan instructie */
.bso-sorteer-instructie::before {
  content: "👆";
  font-size: 1.3rem;
  margin-right: 10px;
  vertical-align: middle;

}

.bso-sorteerbare-lijst {
  border: 3px solid var(--primary-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 0 auto 20px auto;
  max-width: 90%;
  background: white;
  box-shadow: var(--shadow);
}

.bso-sorteer-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: white;
  border-bottom: 2px solid var(--primary-bg);
  cursor: move;
  transition: all 0.3s;
  position: relative;
  min-height: 60px;
}

.bso-sorteer-item:last-child {
  border-bottom: none;
}

.bso-sorteer-item:hover {
  background-color: #F8F8FF;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Duidelijkere grip-hendel */
.bso-sorteer-handle {
  width: 36px;
  height: 36px;
  margin-right: 15px;
  color: white;
  cursor: grab;
  background: var(--primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Toon duidelijk dat dit versleepbaar is */
.bso-sorteer-handle::before {
  content: "≡";
  font-size: 20px;
  font-weight: bold;
}

.bso-sorteer-handle:active {
  cursor: grabbing;
  background: var(--button-color);
}

.bso-sorteer-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.bso-sorteer-content h4 {
  margin: 0;
  flex: 1;
  font-weight: 700;
  color: var(--text-color);
  font-size: 1.2rem;
}

.bso-sorteer-afbeelding {
  width: 70px;
  height: 70px;
  margin-left: 15px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s;
  border: 3px solid var(--button-color);
}

.bso-sorteer-afbeelding:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.bso-sorteer-afbeelding img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* UI-sortable specifieke stijlen */
.ui-sortable-helper {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
  border: 3px solid var(--button-color) !important;
  z-index: 9999;
  background: white !important;
  transform: rotate(2deg) scale(1.05);
}

.ui-state-highlight {
  height: 90px;
  background-color: #F0F7FF !important;
  border: 3px dashed var(--primary-bg) !important;
  border-radius: 10px;
  margin: 5px 0;
}

/* Positienummers toevoegen */
.bso-sorteer-item:before {
  content: attr(data-positie);
  position: absolute;
  right: 0px;
  top: 15%;
  transform: translateY(-50%);
  background: var(--button-color);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid white;
}

/* Visuele indicatie van volgorde */
.bso-sorteer-item[data-positie="1"] {
  background: #F0FFF7;
  border-left: 16px solid #31EBA9;
}

.bso-sorteer-item[data-positie="1"]:after {
  content: "★ Favoriet!";
  position: absolute;
  right: 115px;
  font-size: 1rem;
  color: white;
  font-weight: 700;
  background: #31EBA9;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  z-index:2;
}

.bso-sorteer-item[data-positie="1"]:before {
  background: #31EBA9;
  transform: translateY(-50%) scale(1.2);
  box-shadow: 0 4px 10px rgba(49, 235, 169, 0.4);
}

/* Responsieve stijlen */
@media (max-width: 768px) {
  .bso-vergelijking-container {
    flex-direction: column;
    padding: 15px;
  }
  
  .bso-vergelijking-opties {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  
  .bso-vergelijking-optie {
    margin: 0 auto;
    width: 80%;
    max-width: 250px;
  }
  
  .bso-optie-links::before,
  .bso-optie-rechts::before {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .bso-optie-links::before {
    left: -25px;
  }
  
  .bso-optie-rechts::before {
    right: -25px;
  }
  
  .bso-radio-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .bso-radio-group label {
    width: 80%;
    max-width: 250px;
  }
  
  .bso-sorteer-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .bso-sorteer-afbeelding {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    height: auto;
    max-height: 100px;
  }
  
  .bso-sorteer-item[data-positie="1"]:after {
    display: none;
  }
  
  .bso-enquete-container {
    padding: 1rem;
    margin: 1rem;
    max-width: calc(100% - 2rem);
  }
  
  .bso-section,
  .bso-hoofdstuk-intro,
  #bso-stap-intro,
  #bso-stap-bedankt {
    padding: 25px 15px;
  }
  
  .bso-enquete-titel {
    font-size: 2rem;
    width: 90%;
    padding: 10px 15px;
  }
  
  .bso-section h3 {
    font-size: 1.8rem;
    margin: 30px 0;
  }
  
  .ui-slider-handle {
    transform: scale(0.9);
  }
  
  .ui-slider-handle::after {
    font-size: 18px;
  }
}














/* Verbeterde CSS voor de sorteeritems in de BSO Activiteiten Enquête */

/* ===== VERBETERDE SORTEERVRAGEN STYLING ===== */
.bso-sorteer-container {
    margin: 30px 0;
}

/* Nieuwe Top 5 interface styling */
.bso-top5-interface {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bso-top5-drop-zone {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 3px dashed var(--primary-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    min-height: 80px;
}

.bso-top5-drop-zone h4 {
    margin: 0 0 15px 0;
    color: var(--primary-bg);
    text-align: center;
    font-weight: 700;
}

.bso-top5-selected-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 50px;
}

.bso-top5-selected-list.empty::after {
    content: "Sleep hier je top 5 favorieten naartoe";
    display: block;
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
}

/* Opties carousel */
.bso-opties-carousel {
    background: var(--light-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    border: 2px solid var(--border-color);
}

.bso-opties-carousel h4 {
    margin: 0 0 15px 0;
    color: var(--text-color);
    text-align: center;
    font-weight: 700;
}

.bso-carousel-container {
    position: relative;
    overflow: hidden;
}

.bso-carousel-track {
    display: flex;
    transition: transform 0.3s ease;
    gap: 15px;
}

.bso-carousel-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.bso-carousel-btn {
    background: var(--button-color);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.bso-carousel-btn:hover:not(:disabled) {
    background: var(--active-color);
    transform: scale(1.1);
}

.bso-carousel-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Optie tegels in carousel */
.bso-optie-tegel {
    flex: 0 0 calc(50% - 7.5px);
    background: white;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: 0; /* Geen padding, we doen dit handmatig */
    cursor: grab;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0; /* Geen gap, afbeelding en tekst sluiten aan */
    min-height: 120px; /* Iets hoger voor meer impact */
    position: relative;
    overflow: hidden; /* Belangrijk voor de afbeelding */
}

.bso-optie-tegel:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    border-color: var(--active-color);
}

.bso-optie-tegel:active {
    cursor: grabbing;
}

.bso-optie-tegel .bso-tegel-afbeelding {
    width: 50%; /* Exacte helft van de tegel */
    height: 100%; /* Volledige hoogte van de tegel */
    border-radius: 9px 0 0 9px; /* Aangepast aan tegel border radius */
    overflow: hidden;
    flex-shrink: 0;
    border: none; /* Geen aparte border, tegel border is genoeg */
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.bso-optie-tegel .bso-tegel-afbeelding img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bso-optie-tegel .bso-tegel-titel {
    font-weight: 700;
    color: var(--text-color);
    flex: 1;
}

/* Top 5 item styling (compacter) */
.bso-top5-item {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--active-color);
    border-radius: 10px;
    padding: 10px 15px;
    cursor: move;
    transition: all 0.3s;
    position: relative;
}

.bso-top5-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 10px rgba(255, 90, 129, 0.3);
}

.bso-top5-item .bso-positie-nummer {
    background: var(--active-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 15px;
    flex-shrink: 0;
}

.bso-top5-item .bso-item-afbeelding {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}

.bso-top5-item .bso-item-afbeelding img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bso-top5-item .bso-item-titel {
    font-weight: 600;
    color: var(--text-color);
    flex: 1;
}

.bso-top5-item .bso-remove-btn {
    background: #ff4757;
    color: white;
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.bso-top5-item .bso-remove-btn:hover {
    background: #ff3742;
    transform: scale(1.1);
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
    .bso-optie-tegel {
        flex: 0 0 100%;
    }
    
    .bso-top5-interface {
        gap: 15px;
    }
    
    .bso-carousel-track {
        gap: 10px;
    }
}

.bso-optie-tegel .bso-tegel-titel {
    font-weight: 700;
    color: var(--text-color);
    flex: 1;
    padding: 10px 15px; /* Minder verticale padding voor meer ruimte */
    margin-left: 50%; /* Ruimte maken voor de afbeelding - exacte helft */
    display: flex;
    align-items: center;
    justify-content: center; /* Centreer tekst in de rechterhelft */
    min-height: 120px; /* Zelfde hoogte als de tegel */
    text-align: center; /* Extra centrering */
    
    /* Tekstafhandeling voor lange titels */
    font-size: 1rem; /* Startgrootte */
    line-height: 1.2; /* Compactere regelhoogte */
    word-wrap: break-word; /* Breek lange woorden */
    overflow-wrap: break-word; /* Extra ondersteuning voor woordbreking */
    hyphens: auto; /* Automatische woordafbreking */
    
    /* Flexibele tekstgrootte */
    min-font-size: 0.8rem; /* Minimale grootte */
    max-height: 80px; /* Maximale hoogte voor tekst */
    overflow: hidden; /* Verberg overflow */
}

/* Automatische tekstgrootteaanpassing voor zeer lange titels */
.bso-optie-tegel .bso-tegel-titel:has(+ :nth-child(n+25)) {
    font-size: 0.9rem; /* Kleinere tekst voor lange titels */
}

/* Nog kleiner voor extreem lange titels */
.bso-optie-tegel .bso-tegel-titel:has(+ :nth-child(n+40)) {
    font-size: 0.8rem;
}

/* Voor tegels zonder afbeelding */
.bso-optie-tegel:not(:has(.bso-tegel-afbeelding)) .bso-tegel-titel {
    margin-left: 0; /* Geen marge als er geen afbeelding is */
    padding: 15px; /* Normale padding */
    justify-content: center; /* Centreer de tekst */
}
/* Fallback voor browsers zonder :has() support */
.bso-optie-tegel.no-image .bso-tegel-titel {
    margin-left: 0;
    padding: 15px;
    justify-content: center;
}

/* Fallback CSS voor lange titels */
.bso-tegel-titel.lange-titel {
    font-size: 0.9rem !important;
}

.bso-tegel-titel.zeer-lange-titel {
    font-size: 0.8rem !important;
}

.bso-sorteer-instructie {
    margin-bottom: 25px;
    color: var(--text-color);
    text-align: center;
    background: var(--light-bg);
    padding: 15px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--border-color);
}

/* Voeg pictogram toe aan instructie */
.bso-sorteer-instructie::before {
    content: "👆";
    font-size: 1.3rem;
    margin-right: 10px;
    vertical-align: middle;
}

.bso-sorteerbare-lijst {
    border: 3px solid var(--primary-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: 0 auto 20px auto;
    max-width: 95%;
    background: white;
    box-shadow: var(--shadow);
}

/* Verbeterde sorteer items - nu met grotere afbeeldingen en betere layout */
.bso-sorteer-item {
    display: flex;
    padding: 15px;
    background: white;
    border-bottom: 2px solid var(--primary-bg);
    cursor: move;
    transition: all 0.3s;
    position: relative;
    min-height: 100px; /* Verhoogde minimale hoogte */
    align-items: center;
}

.bso-sorteer-item:last-child {
    border-bottom: none;
}

.bso-sorteer-item:hover {
    background-color: #F8F8FF;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Duidelijkere grip-hendel */
.bso-sorteer-handle {
    width: 36px;
    height: 36px;
    margin-right: 15px;
    color: white;
    cursor: grab;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* Toon duidelijk dat dit versleepbaar is */
.bso-sorteer-handle::before {
    content: "≡";
    font-size: 20px;
    font-weight: bold;
}

.bso-sorteer-handle:active {
    cursor: grabbing;
    background: var(--button-color);
}

/* Verbeterde sorteer content layout */
.bso-sorteer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 10px;
}

.bso-sorteer-content h4 {
    margin: 0;
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.2rem;
    flex: 1;
}

/* Sterk verbeterde afbeelding container */
.bso-sorteer-afbeelding {
    width: 120px;     /* Veel grotere breedte (was 70px) */
    height: 120px;    /* Veel grotere hoogte (was 70px) */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
    border: 3px solid var(--button-color);
    flex-shrink: 0;   /* Voorkomt dat de afbeelding krimpt */
    position: relative;
    z-index: 2;       /* Zorgt dat de afbeelding boven andere elementen verschijnt */
}

.bso-sorteer-afbeelding:hover {
    transform: scale(1.1);
    z-index: 5;       /* Verhoog z-index bij hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.bso-sorteer-afbeelding img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

.bso-sorteer-afbeelding:hover img {
    transform: scale(1.05);  /* Subtiel zoom-effect op hover */
}

/* Verbeterde positienummers */
.bso-sorteer-item:before {
    content: attr(data-positie);
    position: absolute;
    right: 0px;      /* Meer ruimte aan de rechterkant (was 15px) */
    top: 15%;
    transform: translateY(-50%);
    background: var(--button-color);
    color: white;
    width: 40px;      /* Iets groter (was 36px) */
    height: 40px;     /* Iets groter (was 36px) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem; /* Iets groter (was 1.2rem) */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid white;
    z-index: 5;        /* Onder de afbeelding bij hover */
}

/* Speciale stijl voor favoriet (#1 positie) */
.bso-sorteer-item[data-positie="1"] {
    background: #F0FFF7;
    border-left: 16px solid #31EBA9;
}

.bso-sorteer-item[data-positie="1"]:after {
    content: "★ Favoriet!";
    position: absolute;
    right: 80px;      /* Meer ruimte (was 60px) */
    font-size: 1rem;
    color: white;
    font-weight: 700;
    background: #31EBA9;
    padding: 5px 15px; /* Meer padding */
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.bso-sorteer-item[data-positie="1"]:before {
    background: #31EBA9;
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 4px 10px rgba(49, 235, 169, 0.4);
}

/* Verbeterde UI-sortable specifieke stijlen */
.ui-sortable-helper {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
    border: 3px solid var(--button-color) !important;
    z-index: 9999;
    background: white !important;
    transform: rotate(1deg) scale(1.03);
}

.ui-state-highlight {
    height: 120px;
    background-color: #F0F7FF !important;
    border: 3px dashed var(--primary-bg) !important;
    border-radius: 10px;
    margin: 5px 0;
}

/* Responsieve stijlen voor tablets en mobiel */
@media (max-width: 768px) {
    .bso-sorteer-item {
        padding: 15px 10px; /* Iets minder padding */
    }
    
    .bso-sorteer-content {
        flex-direction: row; /* Behoud horizontale layout voor tablet */
        gap: 5px;            /* Kleinere gap */
    }
    
    .bso-sorteer-afbeelding {
        width: 100px;    /* Iets kleiner op tablet */
        height: 100px;   /* Iets kleiner op tablet */
    }
    
    .bso-sorteer-item:before {
        right: 15px;    /* Iets minder ruimte rechts */
    }
    
    .bso-sorteer-item[data-positie="1"]:after {
        right: 70px;   /* Aanpassing voor tablet */
        font-size: 0.9rem;
    }
}

/* Extra kleine schermen (smartphones) */
@media (max-width: 480px) {
    .bso-sorteer-content {
        flex-direction: column; /* Stapel op zeer kleine schermen */
        align-items: flex-start;
    }
    
    .bso-sorteer-afbeelding {
        width: 90px;     /* Nog iets kleiner op mobiel */
        height: 90px;    /* Nog iets kleiner op mobiel */
        margin-top: 10px;
    }
    
    .bso-sorteer-item[data-positie="1"]:after {
        display: none;   /* Verberg favoriet label op mobiel */
    }
    
    .bso-sorteer-item {
        padding-right: 50px; /* Ruimte maken voor het positienummer */
    }
}


/* Verbeterde links-rechts positionering voor de slider opties */

/* Container blijft flexbox maar met aanpassingen voor items */
.bso-vergelijking-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0;
    position: relative;
    background: var(--light-bg);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Voeg dit toe om ruimte te maken voor de opties */
    padding-left: 50px;
    padding-right: 50px;
}

/* Linker optie specifiek naar links positioneren */
.bso-vergelijking-optie.bso-optie-links {
    align-self: flex-start; /* Belangrijk: align naar links */
    border-left: 16px solid var(--slider-left);
    transform: translateX(-30px) rotate(-2deg);
    margin-right: auto; /* Duwt het item helemaal naar links */
}

/* Rechter optie specifiek naar rechts positioneren */
.bso-vergelijking-optie.bso-optie-rechts {
    align-self: flex-end; /* Belangrijk: align naar rechts */
    border-right: 16px solid var(--slider-right);
    transform: translateX(30px) rotate(2deg);
    margin-left: auto; /* Duwt het item helemaal naar rechts */
}

/* Vergelijkingsopties styling */
.bso-vergelijking-optie {
    flex: 0 0 auto; /* Laat het item niet groeien of krimpen */
    max-width: 300px; /* Maximale breedte instellen */
    text-align: center;
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 15px 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    position: relative;
    z-index: 2;
}

/* Slider container in het midden houden */
.bso-vergelijking-slider-container {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    margin: 20px auto;
    position: relative;
    background: white;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    align-self: center; /* Zorg dat het in het midden blijft */
}

/* Lijn toevoegen om relatie tussen opties te verduidelijken */
.bso-slider::before {
    background: linear-gradient(to right, var(--slider-left) 0%, var(--slider-left) 50%, var(--slider-right) 50%, var(--slider-right) 100%);
    opacity: 0.8; /* Iets transparanter voor betere zichtbaarheid */
}

/* Pijlen voor visuele aanwijzing toevoegen */
.bso-optie-links::before {
    content: "👈";
    font-size: 2rem;
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.bso-optie-rechts::before {
    content: "👉";
    font-size: 2rem;
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Vraag "Wat vind jij leuker?" centraal en opvallend maken */
.bso-vergelijking-slider-container::before {
    content: "Wat vind jij leuker?";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
    background: white;
    padding: 8px 20px;
    border-radius: 20px;
    border: 2px solid var(--button-color);
    z-index: 3;
}

/* Responsieve aanpassingen */
@media (max-width: 768px) {
    .bso-vergelijking-optie.bso-optie-links {
        transform: translateX(-20px) rotate(-2deg);
    }
    
    .bso-vergelijking-optie.bso-optie-rechts {
        transform: translateX(20px) rotate(2deg);
    }
    
    .bso-vergelijking-optie {
        max-width: 250px; /* Iets smaller op tablets */
    }
}

/* Kleinere schermen (mobiel) */
@media (max-width: 480px) {
    .bso-vergelijking-container {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .bso-vergelijking-optie.bso-optie-links,
    .bso-vergelijking-optie.bso-optie-rechts {
        transform: none; /* Geen rotatie op kleine schermen */
        max-width: 200px; /* Nog smaller op mobiel */
    }
}


/* Top 5 sorteervraag styling - Verbeterde versie */
.bso-top5-lijst .bso-sorteer-item {
    position: relative;
    padding-right: 220px; /* Extra ruimte voor knoppen en labels */
}

/* Positionering van de selectieknop */
.bso-optie-select {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 15px;
    background: #5640A8;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    z-index: 10; /* Zorgt dat de knop boven andere elementen komt */
    min-width: 120px; /* Zorgt voor consistente breedte */
    text-align: center;
}

.bso-optie-select:hover {
    background: #FF5A81;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Styling voor geselecteerde items */
.bso-sorteer-item.geselecteerd {
    border-left: 6px solid #FF5A81;
    background-color: #FFF0F5;
}

.bso-sorteer-item.geselecteerd .bso-optie-select {
    background: #FF5A81;
}

/* Opacity-aanpassingen voor visuele indicatie */
.bso-top5-lijst .bso-sorteer-item:not(.geselecteerd) {
    opacity: 0.7;
}

.bso-top5-lijst .bso-sorteer-item.geselecteerd {
    opacity: 1;
}

/* Positie-label styling en positionering */
.bso-positie-label {
    position: absolute;
    right: 150px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #5640A8;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 15px;
    z-index: 5;
    min-width: 60px;
    text-align: center;
}

.bso-sorteer-item.geselecteerd .bso-positie-label {
    background-color: #FFF0F5;
    border: 1px solid #FF5A81;
}

/* Aanpassingen voor mobiele weergave */
@media (max-width: 768px) {
    .bso-top5-lijst .bso-sorteer-item {
        padding-right: 150px; /* Minder ruimte op mobiel */
    }
    
    .bso-positie-label {
        right: 120px;
        min-width: 40px;
        font-size: 0.9em;
        padding: 3px 8px;
    }
    
    .bso-optie-select {
        right: 15px;
        min-width: 90px;
        padding: 6px 10px;
        font-size: 0.9em;
    }
}

/* Aanpassing voor zeer kleine schermen */
@media (max-width: 480px) {
    .bso-top5-lijst .bso-sorteer-item {
        padding-right: 110px;
    }
    
    .bso-positie-label {
        right: 100px;
        min-width: 30px;
        font-size: 0.8em;
        padding: 2px 5px;
    }
    
    .bso-optie-select {
        right: 10px;
        min-width: 80px;
        padding: 5px 8px;
        font-size: 0.8em;
    }
}

/* Top 5 sorteervraag styling - Verbeterde versie 3 */
.bso-top5-lijst {
    border: 2px dashed #5640A8;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(86, 64, 168, 0.05);
}

.bso-top5-instructie {
    background-color: #5640A8;
    color: white;
    padding: 10px 15px;
    border-radius: 8px 8px 0 0;
    margin-top: 20px;
    font-weight: 600;
    text-align: center;
}

/* Basisstijl voor sorteer-items */
.bso-top5-lijst .bso-sorteer-item {
    position: relative;
    padding-right: 280px !important; /* Belangrijke fix voor extra ruimte rechts */
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: visible !important; /* Cruciaal om elementen buiten de container te laten zien */
    min-height: 80px; /* Zorgt voor voldoende hoogte */
}

/* Styling voor de sorteer-content */
.bso-top5-lijst .bso-sorteer-content {
    max-width: calc(100% - 280px); /* Zorgt dat content niet onder knoppen loopt */
}

/* Styling voor geselecteerde items */
.bso-sorteer-item.geselecteerd {
    border-left: 6px solid #FF5A81;
    background-color: #FFF0F5;
    box-shadow: 0 3px 8px rgba(255, 90, 129, 0.2);
    transform: translateY(-1px);
}

/* Opvallende roze strook aan de linkerkant voor duidelijke indicatie */
.bso-sorteer-item[data-positie="1"] { border-left: 10px solid #FF5A81; }
.bso-sorteer-item[data-positie="2"] { border-left: 8px solid #FF6D92; }
.bso-sorteer-item[data-positie="3"] { border-left: 6px solid #FF7FA3; }
.bso-sorteer-item[data-positie="4"] { border-left: 4px solid #FF91B4; }
.bso-sorteer-item[data-positie="5"] { border-left: 2px solid #FFA3C5; }

/* Styling voor positie-labels - belangrijke positionering fix */
.bso-positie-label {
    position: absolute !important;
    right: 145px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background-color: #FF5A81;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    min-width: 90px;
    text-align: center;
    z-index: 5;
}

/* Niet-geselecteerde items hebben een grijze label */
.bso-sorteer-item:not(.geselecteerd) .bso-positie-label {
    background-color: #E0E0E0;
    color: #666;
}

/* Styling voor selectie-knoppen - belangrijke positionering fix */
.bso-optie-select {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 6px 15px;
    background: #5640A8;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    z-index: 5;
    min-width: 110px;
    text-align: center;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.bso-optie-select:hover {
    background: #FF5A81;
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Styling voor deselecteer-knop */
.bso-sorteer-item.geselecteerd .bso-optie-select {
    background: #FF5A81;
}

.bso-sorteer-item.geselecteerd .bso-optie-select:hover {
    background: #ff3c6c;
}

/* Opacity aanpassingen voor visuele indicatie */
.bso-top5-lijst .bso-sorteer-item:not(.geselecteerd) {
    opacity: 0.8;
}

.bso-top5-lijst .bso-sorteer-item.geselecteerd {
    opacity: 1;
}

/* Sorteerbare lijst styling voor Top 5 */
.bso-top5-lijst .ui-sortable-helper {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border: 2px solid #FF5A81;
}

.bso-top5-lijst .ui-state-highlight {
    border: 2px dashed #FF5A81;
    background-color: #FFF0F5;
    height: 70px;
}

/* Fix voor afbeeldingen in sorteer items */
.bso-top5-lijst .bso-sorteer-afbeelding {
    max-width: 125px;
    height: auto;
    margin-left: 15px;
    z-index: 1;
}

/* Aanpassingen voor mobiele weergave */
@media (max-width: 768px) {
    .bso-top5-lijst .bso-sorteer-item {
        padding-right: 230px !important; /* Minder ruimte op mobiel */
    }
    
    .bso-positie-label {
        right: 120px !important;
        min-width: 70px;
        font-size: 0.8rem;
        padding: 4px 8px;
    }
    
    .bso-optie-select {
        right: 10px !important;
        min-width: 100px;
        font-size: 0.8rem;
        padding: 5px 10px;
    }
    
    .bso-top5-lijst .bso-sorteer-content {
        max-width: calc(100% - 230px);
    }
}

/* Aanpassingen voor kleine schermen */
@media (max-width: 480px) {
    .bso-top5-lijst .bso-sorteer-item {
        padding-right: 200px !important;
    }
    
    .bso-positie-label {
        right: 105px !important;
        min-width: 60px;
        font-size: 0.75rem;
    }
    
    .bso-optie-select {
        right: 10px !important;
        min-width: 85px;
        font-size: 0.75rem;
    }
    
    .bso-top5-lijst .bso-sorteer-content {
        max-width: calc(100% - 200px);
    }
}

/* Fix voor mogelijke conflicten met bestaande styling */
.bso-top5-lijst .bso-sorteer-item * {
    box-sizing: border-box;
}

/* Extra fix voor het menu-icon (drie streepjes) */
.bso-top5-lijst .bso-sorteer-handle {
    z-index: 1;
    position: relative;
}

/* Extra opvallende stijl voor eerste positie */
.bso-sorteer-item[data-positie="1"] {
    background-color: #FFF0F5;
    border: 1px solid #FF5A81;
    border-left-width: 10px;
	color: white;
}

.bso-sorteer-item[data-positie="1"] .bso-positie-label {
    background-color: #FF5A81;
    box-shadow: 0 3px 8px rgba(255, 90, 129, 0.4);
    font-weight: 700;
	color:white;
}




/* Autocomplete container */
.bso-autocomplete-container {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

/* Autocomplete dropdown */
.bso-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 3px solid var(--primary-bg);
    border-top: none;
    border-radius: 0 0 25px 25px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Autocomplete opties */
.bso-autocomplete-option {
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid #F0F0F0;
    font-size: 1.1rem;
    color: var(--text-color);
}

.bso-autocomplete-option:last-child {
    border-bottom: none;
}

.bso-autocomplete-option:hover,
.bso-autocomplete-option.active {
    background-color: var(--active-color);
    color: white;
    transform: translateX(5px);
}

.bso-autocomplete-option strong {
    font-weight: 700;
    color: inherit;
}

/* Geen resultaten styling */
.bso-autocomplete-no-results {
    padding: 15px 20px;
    color: #666;
    font-style: italic;
    text-align: center;
    background-color: #F8F8F8;
}

/* Input field specifieke styling voor autocomplete */
.bso-autocomplete-container input[type="text"] {
    position: relative;
    z-index: 1;
}


/* Responsive aanpassingen */
@media (max-width: 768px) {
    .bso-autocomplete-container {
        max-width: 100%;
        width: 90%;
    }
    
    .bso-autocomplete-option {
        padding: 10px 15px;
        font-size: 1rem;
    }
    
    .bso-autocomplete-dropdown {
        max-height: 150px;
    }
}

/* Loading indicator (optioneel voor toekomstige uitbreidingen) */
.bso-autocomplete-loading {  
    padding: 15px 20px;
    text-align: center;
    color: #666;
}

.bso-autocomplete-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-bg);
    border-radius: 50%;
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Accessibility verbeteringen */
.bso-autocomplete-option:focus {
    outline: 2px solid var(--active-color);
    outline-offset: -2px;
}

/* Scroll styling voor dropdown */
.bso-autocomplete-dropdown::-webkit-scrollbar {
    width: 8px;
}

.bso-autocomplete-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.bso-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: var(--primary-bg);
    border-radius: 4px;
}

.bso-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--active-color);
}




/* Speciale styling voor leeftijd radio buttons */
.bso-radio-group label span small {
    display: block;
    font-size: 0.8rem;
    color: rgba(86, 64, 168, 0.7);
    margin-top: 2px;
    font-weight: normal;
}

/* Hover effect voor leeftijd opties */
.bso-radio-group label:hover span small {
    color: white;
}

/* Actieve staat voor leeftijd opties */
.bso-radio-group label:has(input[type="radio"]:checked) span small,
.bso-radio-group label.selected span small {
    color: white;
    font-weight: 600;
}

/* Responsive aanpassingen voor leeftijd */
@media (max-width: 480px) {
    .bso-radio-group label span {
        font-size: 1rem;
        padding: 8px 15px;
    }
    
    .bso-radio-group label span small {
        font-size: 0.7rem;
    }
}



.bso-radio-group label span small {
    display: block;
    font-size: 0.8rem;
    color: rgba(86, 64, 168, 0.7);
    margin-top: 2px;
    font-weight: normal;
    line-height: 1.2;
}

/* Hover effect voor leeftijd opties */
.bso-radio-group label:hover span small {
    color: white;
}

/* Actieve staat voor leeftijd opties */
.bso-radio-group label:has(input[type="radio"]:checked) span small,
.bso-radio-group label.selected span small,
.bso-radio-group label.radio-checked span small {
    color: white;
    font-weight: 600;
}

/* Emoji styling in de leeftijd labels */
.bso-radio-group label span {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}

/* Responsive aanpassingen voor leeftijd */
@media (max-width: 768px) {
    .bso-radio-group label span {
        font-size: 1.1rem;
        padding: 12px 20px;
    }
    
    .bso-radio-group label span small {
        font-size: 0.75rem;
        margin-top: 3px;
    }
}

@media (max-width: 480px) {
    .bso-radio-group label span {
        font-size: 1rem;
        padding: 10px 15px;
    }
    
    .bso-radio-group label span small {
        font-size: 0.7rem;
    }
    
    /* Stack de leeftijd opties verticaal op zeer kleine schermen */
    .bso-form-group .bso-radio-group {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .bso-form-group .bso-radio-group label {
        width: 80%;
        max-width: 200px;
        margin-bottom: 10px;
    }
}

/* Extra visuele feedback voor de leeftijd groepen */
.bso-radio-group label[data-age-group="4-6"]:has(input:checked) {
    background: linear-gradient(135deg, #FF5A81, #FF8A4B);
}

.bso-radio-group label[data-age-group="7-9"]:has(input:checked) {
    background: linear-gradient(135deg, #5640A8, #FF5A81);
}

.bso-radio-group label[data-age-group="10+"]:has(input:checked) {
    background: linear-gradient(135deg, #31EBA9, #5640A8);
}

/* Fallback voor browsers zonder :has() support */
.bso-radio-group label.selected[data-age-group="4-6"] {
    background: linear-gradient(135deg, #FF5A81, #FF8A4B);
}

.bso-radio-group label.selected[data-age-group="7-9"] {
    background: linear-gradient(135deg, #5640A8, #FF5A81);
}

.bso-radio-group label.selected[data-age-group="10+"] {
    background: linear-gradient(135deg, #31EBA9, #5640A8);
}




/* Speciale styling voor antwoord type radio buttons */
.bso-radio-group label[data-answer-type="individueel"]:has(input:checked) {
    background: linear-gradient(135deg, #31EBA9, #5640A8);
}

.bso-radio-group label[data-answer-type="groep"]:has(input:checked) {
    background: linear-gradient(135deg, #FF8A4B, #FF5A81);
}

/* Fallback voor browsers zonder :has() support */
.bso-radio-group label.selected[data-answer-type="individueel"] {
    background: linear-gradient(135deg, #31EBA9, #5640A8);
}

.bso-radio-group label.selected[data-answer-type="groep"] {
    background: linear-gradient(135deg, #FF8A4B, #FF5A81);
}

/* Hover effects voor antwoord types */
.bso-radio-group label[data-answer-type="individueel"]:hover {
    border-color: #31EBA9;
    transform: translateY(-2px);
}

.bso-radio-group label[data-answer-type="groep"]:hover {
    border-color: #FF8A4B;
    transform: translateY(-2px);
}

/* Responsive styling voor antwoord type */
@media (max-width: 480px) {
    .bso-radio-group label[data-answer-type] span {
        font-size: 1rem;
        padding: 10px 15px;
    }
    
    .bso-radio-group label[data-answer-type] span small {
        font-size: 0.7rem;
        margin-top: 3px;
    }
}


/* Verbeterde Top 5 drop zone styling */
.bso-top5-drop-zone {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 3px dashed var(--primary-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    min-height: 150px; /* Verhoogd voor betere zichtbaarheid */
    position: relative;
}

.bso-top5-selected-list.empty {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bso-top5-selected-list.empty::after {
    content: "Sleep hier je top 5 favorieten naartoe";
    display: block;
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
}

/* Hover effect voor drop zone */
.bso-top5-drop-zone.ui-droppable-hover {
    border-color: var(--active-color);
    background: linear-gradient(135deg, #fff0f5, #ffffff);
}

/* Verbeterde tegel styling voor duidelijkere interactie */
.bso-optie-tegel {
    flex: 0 0 calc(50% - 7.5px);
    background: white;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    cursor: grab;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 80px;
    position: relative;
}

.bso-optie-tegel:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    border-color: var(--active-color);
}

.bso-optie-tegel:active,
.bso-optie-tegel.ui-draggable-dragging {
    cursor: grabbing;
    transform: rotate(5deg) scale(1.05);
    z-index: 1000;
}

/* Helper voor dragging */
.ui-draggable-helper {
    border: 3px solid var(--active-color) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
    transform: rotate(5deg) !important;
}




/* Smiley indicators voor sorteer vragen met 4 opties */
.bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie]::after {
    position: absolute;
    right: 150px; /* Naast het positienummer */
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    z-index: 3;
    background: white;
    padding: 5px 8px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
}

/* Alleen voor sorteerlijsten met precies 4 items (niet voor Top 5) */
.bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie="1"]::after {
    content: "😃"; /* :D - Zeer blij */
    border-color: #31EBA9;
}

.bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie="2"]::after {
    content: "🙂"; /* :) - Blij */
    border-color: #FFD64B;
}

.bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie="3"]::after {
    content: "😐"; /* :| - Neutraal */
    border-color: #FF8A4B;
}

.bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie="4"]::after {
    content: "😞"; /* :( - Verdrietig */
    border-color: #FF5A81;
}

/* Hover effect voor smiley indicators */
.bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie]:hover::after {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Instructie tekst aanpassing voor 4-opties sorteervragen */
.bso-sorteerbare-lijst.heeft-4-opties + .bso-sorteer-instructie-extra {
    margin-top: 15px;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-color);
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bso-sorteer-instructie-extra::before {
    content: "😃 🙂 😐 😞";
    display: block;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

/* Responsive aanpassingen voor smileys */
@media (max-width: 768px) {
    .bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie]::after {
        right: 120px; /* Aangepast voor kleinere schermen */
        font-size: 1.5rem;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) {
    .bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie]::after {
        right: 100px;
        font-size: 1.3rem;
        padding: 2px 4px;
    }
    
    /* Verberg smileys op zeer kleine schermen om ruimte te besparen */
    .bso-sorteerbare-lijst.heeft-4-opties .bso-sorteerbare-lijst:not(.bso-top5-lijst).heeft-4-opties .bso-sorteer-item[data-positie]::after {
        display: none;
    }
}




/* Feedback sectie styling */
.bso-feedback-section {
    margin-top: 30px;
    padding: 20px;
    background: var(--light-bg);
    border-radius: var(--border-radius);
}

.bso-feedback-section h4 {
    color: var(--text-color);
    font-size: 1.3rem;
    margin-bottom: 15px;
    text-align: center;
}

/* Smiley rating */
.bso-smiley-rating {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 40px 0;
}

.smiley-option {
    cursor: pointer;
    text-align: center;
    padding: 15px;
    border-radius: 15px;
    transition: all 0.3s;
    border: 3px solid transparent;
}

.smiley-option:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.5);
}

.smiley-option.selected {
    background: white;
    border-color: var(--active-color);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.smiley-option input[type="radio"] {
    display: none;
}

.smiley-option .smiley {
    font-size: 3rem;
    display: block;
    margin-bottom: 5px;
}

.smiley-option .smiley-text {
    font-size: 0.9rem;
    color: var(--text-color);
    font-weight: 600;
}

/* Feedback tekst */
.bso-feedback-text {
    margin: 30px 0;
}

.bso-feedback-text textarea {
    width: 100%;
    padding: 15px;
    border: 3px solid var(--primary-bg);
    border-radius: 15px;
    font-size: 1.1rem;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
}

.bso-feedback-text textarea:focus {
    outline: none;
    border-color: var(--button-color);
    box-shadow: 0 0 0 3px rgba(255, 138, 75, 0.3);
}

/* Upload area */
.bso-feedback-upload {
    margin-top: 30px;
}

.upload-area {
    border: 3px dashed var(--primary-bg);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: white;
}

.upload-area:hover {
    border-color: var(--button-color);
    background: rgba(255, 138, 75, 0.05);
}

.upload-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.upload-preview {
    text-align: center;
}

.upload-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.bso-btn-small {
    padding: 5px 15px;
    font-size: 0.9rem;
    background: var(--button-color);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

/* Definitief bedankt scherm */
.bso-bedankt-animatie {
    text-align: center;
    margin: 30px 0;
}

.bedankt-emoji {
    font-size: 5rem;
    display: inline-block;
}

.bedankt-emoji.animate {
    animation: bounce 1s ease-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .bso-smiley-rating {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .smiley-option {
        flex: 0 0 calc(50% - 10px);
    }
}


/* Styling voor enkele keuze vragen */
.bso-single-choice-container {
    margin: 30px 0;
}

.bso-single-instructie {
    margin-bottom: 25px;
    color: var(--text-color);
    text-align: center;
    background: var(--light-bg);
    padding: 15px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--border-color);
}

.bso-single-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.bso-single-option {
    flex: 0 0 calc(33.333% - 20px);
    max-width: 250px;
    margin-bottom: 20px;
}

.bso-single-label {
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.bso-single-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bso-single-content {
    border: 3px solid #ddd;
    border-radius: var(--border-radius);
    background: white;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.bso-single-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.bso-single-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.bso-single-title {
    padding: 15px 10px;
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.1rem;
    line-height: 1.3;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Geselecteerd effect */
.bso-single-radio:checked + .bso-single-content {
    border-color: var(--active-color);
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(255, 90, 129, 0.3);
}

.bso-single-radio:checked + .bso-single-content::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: var(--active-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}

.bso-single-radio:checked + .bso-single-content .bso-single-title {
    color: var(--active-color);
}

.bso-single-label:hover .bso-single-content {
    border-color: var(--button-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.bso-single-label:hover .bso-single-image img {
    transform: scale(1.05);
}

/* Responsieve aanpassingen */
@media (max-width: 768px) {
    .bso-single-options {
        gap: 15px;
    }
    
    .bso-single-option {
        flex: 0 0 calc(50% - 15px);
    }
    
    .bso-single-image {
        height: 120px;
    }
}

@media (max-width: 480px) {
    .bso-single-option {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .bso-single-image {
        height: 180px;
    }
}


/* Styling voor open invulveld vragen */
.bso-open-field-container {
    margin: 30px 0;
}

.bso-open-instructie {
    margin-bottom: 15px;
    color: var(--text-color);
    text-align: center;
    background: var(--light-bg);
    padding: 15px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--border-color);
}

.bso-open-field {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.bso-open-textarea {
    width: 100%;
    padding: 15px;
    border: 3px solid var(--primary-bg);
    border-radius: var(--border-radius);
    font-size: 1.2rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    background: white;
    transition: all 0.3s;
}

.bso-open-textarea:focus {
    border-color: var(--button-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 138, 75, 0.3);
    transform: translateY(-2px);
}

.bso-open-textarea::placeholder {
    color: #999;
    font-style: italic;
    opacity: 0.7;
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
    .bso-open-field {
        max-width: 100%;
    }
    
    .bso-open-textarea {
        font-size: 1rem;
        padding: 12px;
    }
}



/* Standaard emoji (als fallback) */
.bso-hoofdstuk-intro::before {
    content: "🎮";
    font-size: 2rem;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--border-color);
    z-index: 9;
}

/* Specifieke emoji's per hoofdstuk op basis van de feedback */

/* Zomervakantie - feest emoji */
#bso-hoofdstuk-intro-vakanties::before {
    content: "🎉";
}

/* Voorjaarsvakantie - narcis/bloem */
#bso-hoofdstuk-intro-voorjaarsvakantie::before {
    content: "🌸";
}

/* Meivakantie - bal */
#bso-hoofdstuk-intro-meivakantie::before {
    content: "⚽";
}

/* Herfstvakantie - herfst emoji (blad) */
#bso-hoofdstuk-intro-herfstvakantie::before {
    content: "🍂";
}

/* Kerstvakantie - kerstboom */
#bso-hoofdstuk-intro-kerstvakantie::before {
    content: "🎄";
}

/* Als je ook emoji's wilt voor andere hoofdstukken die mogelijk bestaan */
#bso-hoofdstuk-intro-activiteiten::before {
    content: "🎯";
}

#bso-hoofdstuk-intro-feestdagen::before {
    content: "🎊";
}

/* Samen & Spel */
#bso-hoofdstuk-intro-samen__spel::before {
    content: "🤝";
}

/* Fantasie & Maken */
#bso-hoofdstuk-intro-fantasie_maken::before {
    content: "🎨";
}

/* Groen & Gezond */
#bso-hoofdstuk-intro-groen__gezond::before {
    content: "🌱";
}

/* Sport & Bewegen */
#bso-hoofdstuk-intro-sport_en_bewegen::before {
    content: "🏃";
}

/* Wijs & Ontdekken */
#bso-hoofdstuk-intro-wijs__ontdekken::before {
    content: "🔬";
}

/* Podium & Expressie */
#bso-hoofdstuk-intro-podium_en_expressie::before {
    content: "🎭";
}

/* Projecten en Workshops */
#bso-hoofdstuk-intro-projecten_en_workshop::before {
    content: "🛠️";
}



.bso-single-subtitle {
 font-size: 0.85em;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.3;
  font-weight: normal;
  margin-top: -10px;
}

.bso-single-content {
    text-align: center;
}

.bso-single-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}



.bso-sorteer-instructie {
  display: none;
}






/* Top 5 Drop Zone Styling */
.bso-top5-drop-zone {
    margin-bottom: 30px;
}

.bso-top5-selected-list {
    min-height: 120px;
    border: 3px dashed #e0e0e0;
    border-radius: 15px;
    padding: 15px;
    background: #f9f9f9;
    transition: all 0.3s ease;
}

.bso-top5-selected-list.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.bso-top5-selected-list.empty::after {
    content: "Sleep hier je favorieten...";
    font-style: italic;
}

.bso-top5-selected-list.drop-active {
    border-color: #4CAF50;
    background: #f5fff5;
}

.bso-top5-selected-list.drop-hover {
    background: #e8f5e9;
    border-color: #2E7D32;
}

/* Top 5 Items */
.bso-top5-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: move;
    transition: all 0.2s ease;
}

.bso-top5-item:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.position-number {
    width: 35px;
    height: 35px;
    background: #4CAF50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.bso-top5-image {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 8px;
}

.bso-top5-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bso-top5-titel {
    flex: 1;
    font-weight: 500;
    color: #333;
}

.remove-from-top5 {
    width: 30px;
    height: 30px;
    background: #f44336;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: all 0.2s ease;
}

.remove-from-top5:hover {
    background: #d32f2f;
    transform: scale(1.1);
}

/* Sortable placeholder */
.sortable-placeholder {
    background: #e3f2fd;
    border: 2px dashed #2196F3;
    height: 70px;
    margin-bottom: 10px;
    border-radius: 10px;
}

/* Markeer items die al in top 5 staan */
.bso-optie-tegel.in-top5 {
    opacity: 0.5;
    position: relative;
}

.bso-optie-tegel.in-top5::after {
    content: "✓";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #4CAF50;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}