/* ==========================================================================
   CookieMonster in de huisstijl van NEuE

   Colours and fonts come from the plugin settings (functions/cookiemonster.php),
   so the plugin's own stylesheet already uses them. This file only does shape:
   card bottom right, square buttons like .button, serif title.
   Loads after the plugin, so !important only where the plugin uses it too.
   ========================================================================== */


/* --- Banner: card bottom right, not a full-width bar --------------------- */

.cookiemonster-banner-wrapper.cookiemonster-bottom {
  left: auto;
  right: 24px;
  bottom: 24px;
  width: auto;
  max-width: min(520px, calc(100vw - 48px));
}

.cookiemonster-banner {
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 32px;
  border: 1px solid #00ffb9;
  border-radius: 0;
  background: #04122d;
  color: #00ffb9;
  box-shadow: 0 0 0 1px #04122d, 0 20px 60px -20px rgba(0, 255, 185, .25);
}

.cookiemonster-banner-text {
  font-size: 16px;
  line-height: 21px;
  min-width: 0;
}

.cookiemonster-banner-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookiemonster-banner-buttons {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.cookiemonster-banner .cookiemonster-btn {
  flex: 1 1 auto;
}


/* --- Buttons: same as the site's .button ---------------------------------- */

.cookiemonster-banner .cookiemonster-btn,
.cookiemonster-box .cookiemonster-btn {
  border-radius: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  transition: background-color .35s, border-color .35s, color .35s;
}

/* Alles accepteren: green, the site's hover state */
.cookiemonster-banner .cookiemonster-btn-accept,
.cookiemonster-box .cookiemonster-btn-accept {
  background: #00ffb9;
  border-color: #00ffb9;
  color: #04122d;
}

/* Weigeren: just as full, in blue */
.cookiemonster-banner .cookiemonster-btn-reject,
.cookiemonster-box .cookiemonster-btn-reject {
  background: #5A5CCF;
  border-color: #5A5CCF;
  color: #FFFFFF;
}

/* Details, Selectie opslaan: the quiet choice, outline like .button */
.cookiemonster-banner .cookiemonster-btn-details,
.cookiemonster-box .cookiemonster-btn-save {
  background: transparent;
  border-color: #00ffb9;
  color: #00ffb9;
}

.cookiemonster-banner .cookiemonster-btn:hover,
.cookiemonster-box .cookiemonster-btn:hover {
  filter: none;
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #04122d;
}

.cookiemonster-btn:focus-visible,
.cookiemonster-toggle-icon:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}


/* --- Details pop-up -------------------------------------------------------- */

.cookiemonster-dialog-wrapper {
  background: rgba(4, 18, 45, .75);
}

.cookiemonster-box {
  border: 1px solid #00ffb9;
  border-radius: 0;
  background: #04122d;
  color: #00ffb9;
  box-shadow: none;
}

.cookiemonster-title {
  font-family: baskerville-poster-pt, Arial, Helvetica, serif;
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
}

.cookiemonster-close {
  color: #00ffb9;
  opacity: 1;
}

.cookiemonster-text {
  font-size: 16px;
  line-height: 21px;
}

.cookiemonster-buttons {
  border-top-color: rgba(0, 255, 185, .2);
}

.cookiemonster-group {
  border-color: rgba(0, 255, 185, .35);
  border-radius: 0;
}

.cookiemonster-group-details {
  border-top-color: rgba(0, 255, 185, .2);
}

.cookiemonster-entity-row {
  border-bottom-color: rgba(0, 255, 185, .12);
}

/* Switch knob in navy on green, grey track when off */
.cookiemonster-group-toggle::after,
.cookiemonster-service-toggle::after {
  background: #04122d;
  box-shadow: none;
}

.cookiemonster-group-toggle:not(.on),
.cookiemonster-service-toggle:not(.on) {
  background: #E2E2E2;
}


/* --- Cookie button bottom right -------------------------------------------- */

.cookiemonster-toggle-widget.cookiemonster-bottom-right {
  right: 24px;
  bottom: 24px;
}

.cookiemonster-toggle-icon {
  background: #04122d;
  color: #00ffb9;
  border: 1px solid #00ffb9;
  box-shadow: none;
}

.cookiemonster-toggle-icon:hover {
  filter: none;
  background: #00ffb9;
  color: #04122d;
}


/* --- Toegankelijkheid: no serif, as on the rest of the site ---------------- */

body.toegankelijkheid .cookiemonster-title {
  font-family: GeneralSans, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 26px;
}


/* --- Small screens --------------------------------------------------------- */

@media (max-width: 600px) {
  .cookiemonster-banner-wrapper.cookiemonster-bottom {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }

  .cookiemonster-banner {
    padding: 20px;
    gap: 16px;
  }

  .cookiemonster-title {
    font-size: 26px;
    line-height: 26px;
  }

  .cookiemonster-toggle-widget.cookiemonster-bottom-right {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookiemonster-banner-wrapper,
  .cookiemonster-toggle-widget,
  .cookiemonster-btn {
    transition: none !important;
    animation: none !important;
  }
}