/* Custom styles - niet overschreven door Gulp */
@import url("../fonts/bootstrap-icons/font/bootstrap-icons.css");
@import url("../fonts/flag-icon-css/flag-icon.min.css");


/* comfortaa-300 - lokaal gehost - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/comfortaa-v45-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* comfortaa-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/comfortaa-v45-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* comfortaa-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/comfortaa-v45-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* comfortaa-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/comfortaa-v45-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* comfortaa-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/comfortaa-v45-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ✅ Plus Jakarta Sans lokaal gehost - Volledige fontfamilie */
/* 200 - ExtraLight */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-v8-latin-200.woff2') format('woff2');
}

/* 300 - Light */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-v8-latin-300.woff2') format('woff2');
}

/* 500 - Medium */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-v8-latin-500.woff2') format('woff2');
}

/* 600 - SemiBold */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-v8-latin-600.woff2') format('woff2');
}

/* 700 - Bold */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-v8-latin-700.woff2') format('woff2');
}

/* 800 - ExtraBold */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-v8-latin-800.woff2') format('woff2');
}


/* Vlaggetjes opmaak */
.lang-flag {
    width: 30px;  /* Kleinere breedte */
    height: 22px; /* Hoogte gelijk aan breedte voor een vierkant */
    border-radius: 20%; /* Maakt de vlag rond */
    display: inline-block; /* Zorgt ervoor dat de vlag correct wordt weergegeven */
}

/* Zorg voor een perfect ronde knop */
.btn-circle {
    width: 30px; /* Pas dit aan voor grotere of kleinere knoppen */
    height: 30px;
    border-radius: 50%; /* Maakt de knop volledig rond */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Voorkomt dat padding de vorm verstoort */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtiele schaduw */
    transition: background 0.3s ease-in-out;
}

/* Geef een donkere achtergrond in dark mode */
[data-bs-theme="dark"] .btn-circle {
    background-color: #444;
    color: white;
}

/* Hover-effect voor een strakke animatie */
.btn-circle:hover {
    background-color: #f8f9fa;
}

/* Donkere modus hover */
[data-bs-theme="dark"] .btn-circle:hover {
    background-color: #666;
}

/* Dwing een muishandje af */
.form-check-input {
    cursor: pointer !important;
}

/* Vast vlag formaat bij tabbladen editvelden */
.flag-size {
    width: 16px;  /* Maak vlaggen altijd even groot */
    height: 16px;
    display: inline-block;
    background-size: cover;
    background-position: center;
}

/* Vast vlag formaat bij tabbladen editvelden */
.flag-size-sm {
    width: 10px;  /* Maak vlaggen altijd even groot */
    height: 10px;
    display: inline-block;
    background-size: cover;
    background-position: center;
	top: 3px;
}

/* ✅ Delete button styling */
.delete-btn {
    display: inline-flex; /* Zorgt ervoor dat <a> zich als een flex-container gedraagt */
    align-items: center; /* Centreert het icoon verticaal */
    justify-content: center; /* Zorgt voor horizontale centrering */
    padding: 0.375rem 0.75rem; /* Zelfde padding als een button */
    height: 38px; /* Zorgt voor dezelfde hoogte als een button */
    line-height: 1; /* Voorkomt afwijkende uitlijning */
    text-decoration: none; /* Verwijdert eventuele onderstreping */
}

/* ✅ Styling voor countdown cirkel in Scan-Modal */
.countdown-wrapper {
  width: 60px;
  height: 60px;
  position: relative;
}

.countdown-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke: #0d6efd; /* Bootstrap primary */
  stroke-width: 3.8;
  stroke-linecap: round;
  transition: stroke-dasharray 1s linear;
}

.countdown-number {
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ✅ fade in voor alert (output pagina's) */
.alert.fade {
  transition: opacity 0.8s ease-in-out;
}

/* ✅ voor gelijke hoogte gauges op grotere schermen (output pagina's) */
@media (min-width: 768px) {
  .equal-height-card {
    min-height: 100%;
    height: 100%;
  }
}


/* ✅ Custom font-size classes tussen fs-3 (28px) en fs-10 (ik weet het ben een perfectionist ;-)) */
.fs-1-5 {
  font-size: 0.6875rem !important; /* tussen 0.625 en 0.75 */
}

.fs-2-5 {
  font-size: 0.8125rem !important; /* tussen 0.75 en 0.875 */
}

.fs-3-5 {
  font-size: 0.9375rem !important; /* tussen 0.875 en 1.0 */
}

.fs-4-5 {
  font-size: 1.0625rem !important; /* tussen 1.0 en 1.125 */
}

.fs-5-5 {
  font-size: 1.1875rem !important; /* tussen 1.125 en 1.25 */
}

.fs-6-5 {
  font-size: calc(1.2625rem + 0.15vw) !important; /* tussen 1.25 en 1.275+0.3vw */
}

.fs-7-5 {
  font-size: calc(1.29375rem + 0.525vw) !important; /* tussen 1.275+0.3vw en 1.3125+0.75vw */
}

.fs-8-5 {
  font-size: calc(1.33125rem + 0.975vw) !important; /* tussen 1.3125+0.75vw en 1.35+1.2vw */
}

.fs-9-5 {
  font-size: calc(1.3625rem + 1.35vw) !important; /* tussen 1.35+1.2vw en 1.375+1.5vw */
} 

/* ✅ Lijst opmaak algemene lijsten */
ul.structure-list {
  list-style: none; /* verwijder standaard bullets */
  padding-left: 0;
  margin-top: 0.5rem;
}

ul.structure-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem;
}

ul.structure-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1rem;
  height: 1rem;
  background-image: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/check-lg.svg');
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

/* Scanregel voor validatie (intern gebruik) */
._pm1977-active-2212::after {
  content: "🛰️";
  display: none;
}

/* ✅ Standaard gauge meter kleuren */
:root {
  --gauge-rood: #f03e3e;          /* slecht (score 1–4.5) */
  --gauge-oranje: #ffdd00;        /* matig (4.5–6.5) */
  --gauge-lichtgroen: #5bdc58;    /* goed (6.5–8.0) */
  --gauge-donkergroen: #30b32d;   /* erg goed (8.0–10) */
}

/* ✅ Gauge kleurklassen voor inline HTML-styling */
.gauge-rood {
  color: var(--gauge-rood) !important;
}

.gauge-oranje {
  color: var(--gauge-oranje) !important;
}

.gauge-lichtgroen {
  color: var(--gauge-lichtgroen) !important;
}

.gauge-donkergroen {
  color: var(--gauge-donkergroen) !important;
}

/* ✅ Voor opsomming van 9 kenmerken in tech-venster */
.popover-analyse {
  z-index: 2147483647!important; /* hoger dan techscherm */
  max-width: 260px;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  font-size: 0.875rem;
}

/* Popover die altijd boven alles komt */
.popover {
  z-index: 10550 !important;
}

.table-hover tbody tr:hover {
  background-color: #d1e7dd !important; /* Bootstrap 5.3 standaard groen subtiel */
}

.scroll-sidebar {
  padding-bottom: 24px; /* of 32px */
}


body {
  height: 100%;
}


@media (min-width: 1200px) {
  .mt-xl-6 {
    margin-top: 4rem !important;
  }

  .mt-xl-7 {
    margin-top: 5rem !important;
  }
}

@media (max-width: 767.98px) {
  .auth-card {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.radial-gradient {
  min-height: 100dvh !important;
}

/* ✅ Toon juiste logo */
.light-logo {
  display: none;
}
.dark-logo {
  display: inline;
}

html.light-mode .light-logo {
  display: inline !important;
}
html.light-mode .dark-logo {
  display: none !important;
}

html.dark-mode .light-logo {
  display: none !important;
}
html.dark-mode .dark-logo {
  display: inline !important;
}

/* ✅ Toon juiste icon */
#darkToggle,
#lightToggle {
  display: none;
}

html.light-mode #darkToggle {
  display: inline-flex !important;
}
html.light-mode #lightToggle {
  display: none !important;
}

html.dark-mode #darkToggle {
  display: none !important;
}
html.dark-mode #lightToggle {
  display: inline-flex !important;
}

html[data-bs-theme="dark"] .preloader {
  background-color: #121212 !important;
}

html[data-bs-theme="dark"] .preloader img {
  filter: brightness(0.8) invert(1); /* icoontje wit maken indien nodig */
}



/* ✅ Voor de multi upload pagina */
#uploadBtn.invisible {
  display: none;
}



/* ✅ MAIN KLEUREN & HOVERS - NIEUWE LOGO PM2 */

.text-grijs {
  color: #575858 !important;
}

/* 🔵 Main blue (Davide-Rossi) */
.text-blue1 {
  color: #083eb2 !important;
}
.text-blue1:hover {
  color: #062f88 !important;
}
.bg-blue1 {
  background-color: #083eb2 !important;
}
.bg-blue1:hover {
  background-color: #062f88 !important;
}
.text-blue1-subtle {
  color: #c3cff3 !important;
}
.bg-blue1-subtle {
  background-color: #c3cff3 !important;
}
.bg-blue1-subtle:hover {
  background-color: #a6bceb !important;
}

/* 🟠 Orange (Davide-Rossi) */
.text-orange {
  color: #f69963 !important;
}
.text-orange:hover {
  color: #e27843 !important;
}
.bg-orange {
  background-color: #f69963 !important;
}
.bg-orange:hover {
  background-color: #e27843 !important;
}
.text-orange-subtle {
  color: #fde6dc !important;
}
.bg-orange-subtle {
  background-color: #fde6dc !important;
}
.bg-orange-subtle:hover {
  background-color: #f7c8a5 !important;
}

/* 🌸 Pink (Davide-Rossi) */
.text-pink {
  color: #e25094 !important;
}
.text-pink:hover {
  color: #c43d7b !important;
}
.bg-pink {
  background-color: #e25094 !important;
}
.bg-pink:hover {
  background-color: #c43d7b !important;
}
.text-pink-subtle {
  color: #f9d6e4 !important;
}
.bg-pink-subtle {
  background-color: #f9d6e4 !important;
}
.bg-pink-subtle:hover {
  background-color: #f3b3ca !important;
}

.border-pink {
  border-color: #e25094 !important;
}

.border-pink-subtle {
  border-color: #f3b3ca !important;
}

/* 🔷 Light blue (Davide-Rossi) */
.text-blue2 {
  color: #0087f2 !important;
}
.text-blue2:hover {
  color: #006dc2 !important;
}
.bg-blue2 {
  background-color: #0087f2 !important;
}
.bg-blue2:hover {
  background-color: #006dc2 !important;
}
.text-blue2-subtle {
  color: #cce7fb !important;
}
.bg-blue2-subtle {
  background-color: #cce7fb !important;
}
.bg-blue2-subtle:hover {
  background-color: #a4d5fa !important;
}

.border-blue2 {
  border-color: #0087f2 !important;
}

.border-blue2-subtle {
  border-color: #a4d5fa !important;
}


/* ✅ ORANGE HOVER STYLE - conform template hover (zoals primary-hover-bg) */

.orange-hover-bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 0;
  height: 100%;
  z-index: -1;
  border-radius: 0px 24px 24px 0px;
  transition: all 0.4s ease-in-out;
  background-color: #fde6dc; /* subtiele oranje achtergrond */
}

.orange-hover-bg:hover::before,
.orange-hover-bg.btn-toggle[aria-expanded=true]::before {
  width: calc(100% + 16px);
}

/* Tekst en icon kleuren bij hover */
.orange-hover-bg:hover .hide-menu,
.orange-hover-bg:hover .aside-icon {
  color: #f69963;
}
.orange-hover-bg.active .hide-menu,
.orange-hover-bg.active .aside-icon {
  color: #f69963;
}
.sidebar-item.selected .orange-hover-bg::after {
  color: #f69963;
}
.sidebar-item.selected .orange-hover-bg .hide-menu,
.sidebar-item.selected .orange-hover-bg .aside-icon {
  color: #f69963;
}



/* ✅ BLUE1 HOVER STYLE (primary blauw - Davide-Rossi) */
.blue1-hover-bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 0;
  height: 100%;
  z-index: -1;
  border-radius: 0px 24px 24px 0px;
  transition: all 0.4s ease-in-out;
  background-color: #c3cff3;
}

.blue1-hover-bg:hover::before,
.blue1-hover-bg.btn-toggle[aria-expanded=true]::before {
  width: calc(100% + 16px);
}

.blue1-hover-bg:hover .hide-menu,
.blue1-hover-bg:hover .aside-icon {
  color: #083eb2;
}
.blue1-hover-bg.active .hide-menu,
.blue1-hover-bg.active .aside-icon {
  color: #083eb2;
}
.sidebar-item.selected .blue1-hover-bg::after {
  color: #083eb2;
}
.sidebar-item.selected .blue1-hover-bg .hide-menu,
.sidebar-item.selected .blue1-hover-bg .aside-icon {
  color: #083eb2;
}

/* ✅ PINK HOVER STYLE */
.pink-hover-bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 0;
  height: 100%;
  z-index: -1;
  border-radius: 0px 24px 24px 0px;
  transition: all 0.4s ease-in-out;
  background-color: #f9d6e4;
}

.pink-hover-bg:hover::before,
.pink-hover-bg.btn-toggle[aria-expanded=true]::before {
  width: calc(100% + 16px);
}

.pink-hover-bg:hover .hide-menu,
.pink-hover-bg:hover .aside-icon {
  color: #e25094;
}
.pink-hover-bg.active .hide-menu,
.pink-hover-bg.active .aside-icon {
  color: #e25094;
}
.sidebar-item.selected .pink-hover-bg::after {
  color: #e25094;
}
.sidebar-item.selected .pink-hover-bg .hide-menu,
.sidebar-item.selected .pink-hover-bg .aside-icon {
  color: #e25094;
}


/* ✅ .btn-pink variant gebaseerd op Bootstrap .btn */
.btn-pink {
  color: #fff;
  background-color: #e25094;
  border-color: #e25094;
}

.btn-pink:hover,
.btn-pink:focus,
.btn-pink:active {
  color: #fff;
  background-color: #c43d7b;
  border-color: #c43d7b;
}

.btn-pink:disabled {
  background-color: #f3b3ca;
  border-color: #f3b3ca;
  color: #fff;
  opacity: 0.65;
}

/* optioneel: outline variant */
.btn-outline-pink {
  color: #e25094;
  border-color: #e25094;
  background-color: transparent;
}

.btn-outline-pink:hover,
.btn-outline-pink:focus,
.btn-outline-pink:active {
  background-color: #e25094;
  color: #fff;
  border-color: #c43d7b;
}


/* ✅ BLUE2 HOVER STYLE (licht blauw) */
.blue2-hover-bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 0;
  height: 100%;
  z-index: -1;
  border-radius: 0px 24px 24px 0px;
  transition: all 0.4s ease-in-out;
  background-color: #cce7fb;
}

.blue2-hover-bg:hover::before,
.blue2-hover-bg.btn-toggle[aria-expanded=true]::before {
  width: calc(100% + 16px);
}

.blue2-hover-bg:hover .hide-menu,
.blue2-hover-bg:hover .aside-icon {
  color: #0087f2;
}
.blue2-hover-bg.active .hide-menu,
.blue2-hover-bg.active .aside-icon {
  color: #0087f2;
}
.sidebar-item.selected .blue2-hover-bg::after {
  color: #0087f2;
}
.sidebar-item.selected .blue2-hover-bg .hide-menu,
.sidebar-item.selected .blue2-hover-bg .aside-icon {
  color: #0087f2;
}


/* Zorg dat actieve pagina dezelfde achtergrond krijgt als hover */

.orange-hover-bg.active::before {
  width: calc(100% + 16px);
}
.blue1-hover-bg.active::before {
  width: calc(100% + 16px);
}
.pink-hover-bg.active::before {
  width: calc(100% + 16px);
}
.blue2-hover-bg.active::before {
  width: calc(100% + 16px);
}


/* ✅ DARKGREEN (OfferteMaster standaardkleur voor betrouwbaarheid) */
/* 🔹 Basis tekst- en achtergrondkleuren */
.text-darkgreen {
  color: #4ac047 !important;
}
.text-darkgreen:hover {
  color: #259622 !important;
}

.bg-darkgreen {
  background-color: #4ac047 !important;
}
.bg-darkgreen:hover {
  background-color: #259622 !important;
}

.text-darkgreen-subtle {
  color: #e6f6e5 !important;
}
.bg-darkgreen-subtle {
  background-color: #e6f6e5 !important;
}
.bg-darkgreen-subtle:hover {
  background-color: #c2e5bf !important;
}

/* 🔹 Border kleur */
.border-darkgreen {
  border-color: #4ac047 !important;
}

/* 🔹 Donkergroene hover-effect stijl met zijwaartse achtergrondbalk */
.darkgreen-hover-bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 0;
  height: 100%;
  z-index: -1;
  border-radius: 0px 24px 24px 0px;
  transition: all 0.4s ease-in-out;
  background-color: #e6f6e5; /* subtiele achtergrond */
}

.darkgreen-hover-bg:hover::before,
.darkgreen-hover-bg.btn-toggle[aria-expanded=true]::before {
  width: calc(100% + 16px);
}

/* 🔹 Tekst en iconkleur bij hover of actief */
.darkgreen-hover-bg:hover .hide-menu,
.darkgreen-hover-bg:hover .aside-icon {
  color: #4ac047;
}

.darkgreen-hover-bg.active .hide-menu,
.darkgreen-hover-bg.active .aside-icon {
  color: #4ac047;
}

.sidebar-item.selected .darkgreen-hover-bg::after {
  color: #4ac047;
}

.sidebar-item.selected .darkgreen-hover-bg .hide-menu,
.sidebar-item.selected .darkgreen-hover-bg .aside-icon {
  color: #4ac047;
}



/* Table styles nieuwe kleuren */
.table-blue1 {
  --bs-table-color: #000;
  --bs-table-bg: #0087f2;
  --bs-table-border-color: #a3afd8;
  --bs-table-striped-bg: #b6c3eb;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #a8b6e3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #b0bde7;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);

}

.table-blue1 th {
  color: #fff !important; /* jouw blue1 kleur */
}

.table-orange {
  --bs-table-color: #000;
  --bs-table-bg: #f69963;
  --bs-table-border-color: #e2bba2;
  --bs-table-striped-bg: #f7c8a9;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #f1b38c;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #f3bd9b;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-orange th {
  color: #fff !important; /* jouw blue1 kleur */
}



.text-normal-case {
  text-transform: none !important;
}

/* ✅ Custom alert styles voor pink en blue2 */
.alert-pink {
  color: #72214e;
  background-color: #f9d6e4;
  border-color: #f3b3ca;
}

.alert-pink hr {
  border-top-color: #e9a0bd;
}

.alert-pink .alert-link {
  color: #5b193f;
  font-weight: 600;
}

.alert-blue2 {
  color: #004880;
  background-color: #cce7fb;
  border-color: #a4d5fa;
}

.alert-blue2 hr {
  border-top-color: #7fc3f8;
}

.alert-blue2 .alert-link {
  color: #00345c;
  font-weight: 600;
}

/* ✅ Effect voor ons icon bij progress modals */
@keyframes pulseSlow {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.pulse-icon {
  animation: pulseSlow 2.5s ease-in-out infinite;
  transform-origin: center;
  width: 5rem;
  height: 5rem;
}

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

.rotate-icon {
  animation: rotate 2s linear infinite;
  transform-origin: center;
  width: 5rem;
  height: 5rem;
}

@keyframes fadeScale {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.logo-loader {
  animation: fadeScale 2.5s ease-in-out infinite;
  transform-origin: center;
  width: 5rem;
  height: 5rem;
}

.logo-loader-small {
  animation: fadeScale 2.5s ease-in-out infinite;
  width: 40px;
  height: 40px;
  transform-origin: center;
}


/* ✅ Klikbaar maken cards bij final screen multi */
.tabCard {
  pointer-events: none; /* standaard: niet klikbaar */
}

.tabCard.clickable {
  pointer-events: auto;
  cursor: pointer;
}

/* ✅ Paar titels in Comfortaa */
.title-comfortaa {
  font-family: 'Comfortaa', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; /* of 400, 500, afhankelijk van wat je mooi vindt */
  letter-spacing: -0.5px; /* iets dichter */
  
}

.subtitle-comfortaa {
  font-family: 'Comfortaa', 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  color: #666;
  letter-spacing: -0.5px; /* iets dichter */
}

/* ✅ Niet zoomen in textarea op mobiel. */
textarea,
input,
select {
  font-size: 16px !important;
}

/* ✅ Minimale hoogte tabcards op mobiel. */
@media (max-width: 767.98px) {
  .tabCard {
    min-height: 175px !important;
  }
}


/* ✅ achtergrondkleuren cijfer badges */
.score-indicator {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1;
  border-radius: 25px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}
.score-indicator.gauge-rood {
  background-color: #f03e3e !important;
  color: white !important;
}
.score-indicator.gauge-oranje {
  background-color: #ffdd00 !important;
  color: white !important;
}
.score-indicator.gauge-lichtgroen {
  background-color: #5bdc58 !important;
  color: white !important;
}
.score-indicator.gauge-donkergroen {
  background-color: #30b32d !important;
  color: white !important;
}


.text-muted2 {
  color: #84898d;
}

.cursor-pointer {
  cursor: pointer;
}

.star-icon {
  font-size: 2.8rem;
  color: transparent;
  stroke-width: 1px;
  stroke: none;
  -webkit-text-stroke: 1px #083eb2; /* enkel blauwe buitenlijn */
  cursor: pointer;
  transition: color 0.2s ease-in-out, -webkit-text-stroke 0.2s ease-in-out;
}

.star-icon.filled {
  color: #ffc107; /* volle gele vulling */
  -webkit-text-stroke: 0px transparent; /* geen rand meer zichtbaar */
}


/* Zorg dat het logo niet wordt afgesneden bij geopende sidebar */
/* Zorg dat logo niet schaalt of verkleint bij geopende sidebar */
.show-sidebar .logo-img {
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

.show-sidebar .logo-img img {

}

.video-wrapper {
  max-height: 275px;
}

@media (max-width: 575.98px) {
  .video-wrapper {
    max-height: 380px;
  }
}

@media (max-width: 575.98px) {
  .mobile-shift-right {
    margin-left: 80px !important;
  }
}

/* Volgorde regels verslepen in CMS */
.drag-handle {
  cursor: move;
  text-align: center;
  color: #999;
  width: 30px;
}

.drag-handle i {
  font-size: 1.2rem;
}

#sortableCategories tr.dragging {
  background-color: #f1f1f1;
  border: 2px dashed #ccc;
}

/* fade contact succes melding in contactform. */
#contactSuccess.fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}
#contactSuccess.show {
  opacity: 1;
}

a {
  cursor: pointer;
}



/* ⭐ Sterrenrating stijlen */
 .star-goud {
    color: #ffc107 !important;
  }

  .star-blauw {
    color: #083eb2 !important;
  }

/* ⭐ Opmaak h1 zelfde als in public. */
h1 {
  font-size: 1.7rem !important;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  color: #083eb2 !important; /* ✅ Primary */
}

/* ⭐ in verband met openen 2e modal bij contactform (privacylink) */
.modal.second-modal {
  z-index: 1060 !important; /* hoger dan standaard 1055 */
}
.modal-backdrop.second-backdrop {
  z-index: 1059 !important;
}

@media (max-width: 375px) {
  .logo-mobile {
    max-width: 190px !important;
    min-width: auto !important;
  }
}

@media (max-width: 320px) {
  .logo-mobile {
    max-width: 155px !important;
  }
}


@media (max-width: 375px) {
  .logo-mobile-middle {
    max-width: 220px !important;
    min-width: auto !important;
  }
}

@media (max-width: 320px) {
  .logo-mobile-middle {
    max-width: 175px !important;
  }
}

@media (max-width: 576px) {
  #adviceSub .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #adviceSub .flex-shrink-0 {
    margin-bottom: 1rem;
  }

  #adviceSub img {
    height: 70px !important;
  }
}




/* Initieel alles verbergen */
.logo-full,
.logo-icon,
.light-logo,
.dark-logo {
  display: none !important;
}

/* Tot en met lg (dus <1200px): verberg alles */
@media (max-width: 1199.98px) {
  .logo-icon,
  .logo-full {
    display: none !important;
  }
}

/* Vanaf xl (≥1200px): juiste weergave afhankelijk van sidebartype en thema */
@media (min-width: 1200px) {
  body[data-sidebartype="full"][data-bs-theme="light"] .logo-full.light-logo {
    display: inline-block !important;
  }

  body[data-sidebartype="full"][data-bs-theme="dark"] .logo-full.dark-logo {
    display: inline-block !important;
  }

  body[data-sidebartype="mini-sidebar"] .logo-icon {
    display: inline-block !important;
  }

  #main-wrapper.show-sidebar .logo-full {
    display: none !important;
  }

  #main-wrapper.show-sidebar .logo-icon {
    display: inline-block !important;
  }
}

#aiFollowup1.fade {
  transition-duration: 1.5s; /* Duur van de fade-in animatie */
}