/* Glassmorphism thema voor vanilla-cookieconsent — zelfde stijl als
   het hero-blok op de homepage: donkere semi-transparante achtergrond,
   blur, witte tekst en goud accent. */

#cc-main {
  --cc-font-family: 'Outfit', system-ui, sans-serif;
  --cc-bg: rgba(44, 44, 44, 0.72);   /* ink met transparantie */
  --cc-primary-color: #ffffff;
  --cc-secondary-color: rgba(255, 255, 255, 0.85);
  --cc-separator-border-color: rgba(255, 255, 255, 0.15);
  --cc-link-color: #c9a84c;

  /* Toggles in voorkeuren-modal */
  --cc-toggle-on-bg: #c9a84c;
  --cc-toggle-off-bg: rgba(255, 255, 255, 0.25);
  --cc-toggle-readonly-bg: rgba(201, 168, 76, 0.35);
  --cc-toggle-on-knob-bg: #2c2c2c;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-knob-bg: #ffffff;
  --cc-toggle-enabled-icon-color: #2c2c2c;
  --cc-toggle-disabled-icon-color: #2c2c2c;
  --cc-toggle-readonly-knob-icon-color: #2c2c2c;

  /* Categorie-blokken in preferences modal (Noodzakelijk/Analytics/Marketing) */
  --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.06);
  --cc-cookie-category-block-border: rgba(255, 255, 255, 0.12);
  --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.1);
  --cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.18);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, 0.06);
  --cc-section-category-border: rgba(255, 255, 255, 0.12);

  /* Footer van pref modal */
  --cc-footer-bg: transparent;
  --cc-footer-color: rgba(255, 255, 255, 0.7);
  --cc-footer-border-color: rgba(255, 255, 255, 0.12);

  --cc-modal-border-radius: 8px;
  --cc-btn-border-radius: 4px;
  --cc-pm-toggle-border-radius: 4px;
  --cc-modal-margin: 1rem;
}

/* ───── Consent modal (de hoek-banner) ───── */
#cc-main .cm--box {
  max-width: 360px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
  background: rgba(44, 44, 44, 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#cc-main .cm__body {
  padding: 0 !important;
  background: transparent !important;
}

#cc-main .cm__texts {
  padding: 1.1rem 1.2rem 0.5rem !important;
}

#cc-main .cm__title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 0.4rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

#cc-main .cm__desc {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 300 !important;
  padding: 0 !important;
}

#cc-main .cm__desc a {
  color: #c9a84c !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

#cc-main .cm__desc a:hover {
  color: #d4b965 !important;
}

/* Knoppen-container: alle drie op één regel */
#cc-main .cm__btns {
  border-top: none !important;
  padding: 0.6rem 1.2rem 1.1rem !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background: transparent !important;
}

#cc-main .cm__btn-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
  grid-auto-columns: unset !important;
  align-items: center !important;
}

#cc-main .cm__btn-group + .cm__btn-group {
  margin-top: 0 !important;
  margin-left: auto !important;
}

#cc-main .cm__btn + .cm__btn {
  margin: 0 !important;
}

/* Basis-knop reset — compact zodat alle drie de knoppen passen */
#cc-main .cm__btn {
  min-height: 0 !important;
  padding: 0.45rem 0.75rem !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  text-align: center !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
  background: transparent !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

/* Primair "Accepteren" (data-role="all") — solid gold, ink tekst (zoals BEKIJK WORKSHOPS) */
#cc-main .cm__btn[data-role="all"] {
  background: #c9a84c !important;
  border-color: #c9a84c !important;
  color: #2c2c2c !important;
}

#cc-main .cm__btn[data-role="all"]:hover {
  background: #d4b965 !important;
  border-color: #d4b965 !important;
  color: #2c2c2c !important;
}

/* Secundair "Weigeren" (data-role="necessary") — outline wit (zoals OFFERTE AANVRAGEN) */
#cc-main .cm__btn[data-role="necessary"] {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

#cc-main .cm__btn[data-role="necessary"]:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Tertiair "Instellingen" (data-cc="show-preferencesModal") — kleine tekstlink rechts */
#cc-main .cm__btn[data-cc="show-preferencesModal"] {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 0.72rem !important;
  padding: 0.45rem 0.25rem !important;
}

#cc-main .cm__btn[data-cc="show-preferencesModal"]:hover {
  color: #c9a84c !important;
  background: transparent !important;
}

/* ───── Preferences modal ───── */
#cc-main .pm {
  background: rgba(30, 30, 30, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

#cc-main .pm__title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  font-size: 1.5rem !important;
}

#cc-main .pm__close-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

#cc-main .pm__close-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

#cc-main .pm__close-btn svg {
  stroke: #ffffff !important;
}

/* Categorie-blokken (Noodzakelijk / Analytics / Marketing) */
#cc-main .pm__section {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

#cc-main .pm__section:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

#cc-main .pm__section-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
}

#cc-main .pm__section-desc,
#cc-main .pm__section p,
#cc-main .pm__section-desc-wrapper {
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.6 !important;
}

#cc-main .pm__section-arrow {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
}

#cc-main .pm__section-arrow svg {
  stroke: #ffffff !important;
}

#cc-main .pm__header,
#cc-main .pm__footer {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: transparent !important;
}

/* Scheidingslijn tussen categoriën */
#cc-main .pm__section-desc-wrapper > :not(:last-child) {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Service items binnen uitgeklapte categoriën */
#cc-main .pm__service:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

#cc-main .pm__service-title {
  color: #ffffff !important;
}

#cc-main .pm__btn {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}

/* "Alles accepteren" in pm — solid gold */
#cc-main .pm__btn[data-role="all"] {
  background: #c9a84c !important;
  border-color: #c9a84c !important;
  color: #2c2c2c !important;
}

#cc-main .pm__btn[data-role="all"]:hover {
  background: #d4b965 !important;
  border-color: #d4b965 !important;
  color: #2c2c2c !important;
}

/* "Alleen noodzakelijk" in pm — outline wit */
#cc-main .pm__btn[data-role="necessary"] {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

#cc-main .pm__btn[data-role="necessary"]:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* "Voorkeuren opslaan" in pm — outline goud */
#cc-main .pm__btn[data-role="save"] {
  background: transparent !important;
  border-color: #c9a84c !important;
  color: #c9a84c !important;
}

#cc-main .pm__btn[data-role="save"]:hover {
  background: #c9a84c !important;
  color: #2c2c2c !important;
}

/* ───── Mobile ───── */
@media (max-width: 480px) {
  #cc-main .cm--box {
    max-width: none !important;
    margin: 0.6rem !important;
  }

  #cc-main .cm__texts { padding: 1rem 1rem 0.5rem !important; }
  #cc-main .cm__btns  { padding: 0.5rem 1rem 1rem !important; }

  #cc-main .cm__title { font-size: 1.15rem !important; }
  #cc-main .cm__desc  { font-size: 0.85rem !important; }
  #cc-main .cm__btn   { font-size: 0.78rem !important; padding: 0.45rem 0.75rem !important; }
}