/* stylelint-disable */

/* ============================================================
   Cookie Consent - Variabelen
   ============================================================ */
:root {
  --color-primary: #4b1c5e;
  --color-primary-contrast: #fff;

  --cc-popup-max-width: 580px;
  --cc-popup-border-radius: 10px;
  --cc-popup-bg: white;
  --cc-popup-margin: 10px;
  --cc-popup-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  --cc-popup-animation-duration: 1s;
  --cc-popup-animation-delay: 0s;

  --cc-button-height: 45px;
  --cc-button-border-radius: 6px;
  --cc-button-font-size: 15px;
  --cc-button-font-weight: 500;
  --cc-button-line-height: 20px;
  --cc-button-gap: 5px;

  --cc-reject-bg: #eaeaea;
  --cc-reject-color: #111;

  --cc-text-font-size: 14px;
  --cc-text-margin-bottom: 30px;

  --cc-prefs-btn-bottom: 0;
  --cc-prefs-btn-right: 15px;
  --cc-prefs-btn-font-size: 13px;
  --cc-prefs-btn-padding: 15px 15px 10px 15px;
  --cc-prefs-btn-border-radius: 10px 10px 0 0;
  --cc-prefs-btn-shadow: rgba(0, 0, 0, 0.4) 0px 7px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  --cc-prefs-btn-translate-offset: 30px;
  --cc-prefs-btn-transition: transform 0.3s ease-in-out;
}

/* ============================================================
   Popup
   ============================================================ */
.termsfeed-com---palette-light.termsfeed-com---nb {
  background: transparent !important;
  max-width: var(--cc-popup-max-width);
}

@media (max-width: 768px) {
  .termsfeed-com---palette-light.termsfeed-com---nb {
    max-width: 100%;
  }
}

.cc-nb-main-container {
  box-shadow: var(--cc-popup-shadow);
  bottom: -50vh;
  -webkit-animation: slideIn var(--cc-popup-animation-duration) forwards;
  -webkit-animation-delay: var(--cc-popup-animation-delay);
  animation: slideIn var(--cc-popup-animation-duration) forwards;
  animation-delay: var(--cc-popup-animation-delay);
  border-radius: var(--cc-popup-border-radius);
  background-color: var(--cc-popup-bg);
  margin: var(--cc-popup-margin);
}

.cc-nb-main-container .cc-nb-text-container {
  margin-bottom: var(--cc-text-margin-bottom);
}

.cc-nb-main-container .cc-nb-text-container .cc-nb-text {
  font-size: var(--cc-text-font-size);
}

.cc-nb-main-container .cc-nb-buttons-container {
  display: flex;
  gap: var(--cc-button-gap);
}

@media (max-width: 768px) {
  .cc-nb-main-container .cc-nb-buttons-container {
    flex-direction: column;
  }
}

.cc-nb-main-container .cc-nb-buttons-container button {
  height: var(--cc-button-height);
  padding: 10px;
  margin: initial;
  width: 100%;
  white-space: nowrap;
  border-radius: var(--cc-button-border-radius);
  cursor: pointer;
  font-size: var(--cc-button-font-size);
  font-weight: var(--cc-button-font-weight);
  text-decoration: none;
  line-height: var(--cc-button-line-height);
  text-align: center;
  flex: initial;
}

.cc-nb-main-container .cc-nb-buttons-container button.cc-nb-okagree {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.cc-nb-main-container .cc-nb-buttons-container button.cc-nb-reject {
  background-color: var(--cc-reject-bg);
  color: var(--cc-reject-color);
}

/* ============================================================
   Settings
   ============================================================ */
.termsfeed-com---pc-dialog .cc-cp-foot button {
  height: var(--cc-button-height);
  padding: 10px 20px;
  white-space: nowrap;
  border-radius: var(--cc-button-border-radius);
  cursor: pointer;
  font-size: var(--cc-button-font-size);
  font-weight: var(--cc-button-font-weight);
  text-decoration: none;
  line-height: var(--cc-button-line-height);
  text-align: center;
}

.termsfeed-com---pc-dialog .cc-cp-foot button.cc-cp-foot-save {
  background-color: var(--color-primary);
  color: white;
}

/* ============================================================
   Voorkeuren knop (floating)
   ============================================================ */
#open_preferences_center {
  position: fixed;
  bottom: var(--cc-prefs-btn-bottom);
  right: var(--cc-prefs-btn-right);
  z-index: 9999;
  text-decoration: none;
  font-size: var(--cc-prefs-btn-font-size);
  padding: var(--cc-prefs-btn-padding);
  border-radius: var(--cc-prefs-btn-border-radius);
  box-shadow: var(--cc-prefs-btn-shadow);
  transform: translateY(var(--cc-prefs-btn-translate-offset));
  transition: var(--cc-prefs-btn-transition);
}

#open_preferences_center:hover {
  transform: translateY(0);
}

@media (max-width: 768px) {
  #open_preferences_center {
    display: none;
  }
}

/* ============================================================
   Animatie
   ============================================================ */
@keyframes slideIn {
  100% {
    bottom: 0;
  }
}