/* COLUCA GOOGLE + CONSENT UI V1.030.16 */

.google-consent-scrim {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background:
    radial-gradient(circle at 50% 100%, rgba(54,127,255,.10), transparent 38%),
    rgba(1,4,12,.76);
  -webkit-backdrop-filter: blur(5px) saturate(82%);
  backdrop-filter: blur(5px) saturate(82%);
  pointer-events: auto;
}

.google-consent-scrim[hidden] {
  display: none !important;
}

.google-consent-banner {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  z-index: 2147483647;

  width: min(720px, calc(100% - 32px));
  max-height: calc(100dvh - 44px);
  overflow: auto;

  transform: translateX(-50%);

  padding: 17px 18px;

  border: 1px solid transparent;
  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(7,13,29,.995),
      rgba(2,7,18,.998)
    ) padding-box,
    linear-gradient(
      110deg,
      #a34fff 0%,
      #7358ff 25%,
      #367fff 48%,
      #20d5eb 70%,
      #7358ff 88%,
      #a34fff 100%
    ) border-box;

  box-shadow:
    0 28px 90px rgba(0,0,0,.72),
    0 0 8px rgba(163,79,255,.35),
    0 0 16px rgba(54,127,255,.20);

  color: #eef4ff;

  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);

  overscroll-behavior: contain;
}

.google-consent-banner[hidden] {
  display: none !important;
}

.google-consent-banner__copy {
  display: grid;
  gap: 6px;
}

.google-consent-banner__copy strong {
  font-size: .95rem;
  line-height: 1.3;
}

.google-consent-banner__copy p {
  margin: 0;
  color: #b5c1d8;
  font-size: .78rem;
  line-height: 1.55;
}

.google-consent-banner__copy a {
  color: #72c8ff;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.google-consent-banner__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.google-consent-banner button,
.footer-cookie-settings {
  font: inherit;
  cursor: pointer;
}

.google-consent-banner button {
  min-height: 42px;
  padding: 8px 14px;

  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.15);

  background: #0b1730;
  color: #edf4ff;

  font-size: .76rem;
  font-weight: 800;
}

.google-consent-banner button:hover {
  border-color: rgba(114,200,255,.42);
}

.google-consent-banner button:focus-visible,
.google-consent-banner a:focus-visible {
  outline: 3px solid rgba(32,213,235,.78);
  outline-offset: 3px;
}

.google-consent-banner button[data-google-consent-grant] {
  border-color: rgba(74,124,255,.48);
  background: linear-gradient(135deg,#355fe0,#6e4fd8);
}

.footer-cookie-settings {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: inherit;
}

.footer-cookie-settings:hover {
  color: #fff;
}


/* ==========================================================
   CONSENT SAFE MODE
   ========================================================== */

html.coluca-consent-open,
html.coluca-consent-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.coluca-consent-open
body > *:not(.google-consent-banner):not(.google-consent-scrim) {
  pointer-events: none !important;
}


/* Banner/scrim moeten boven ELKE player/equalizerlaag staan. */
html.coluca-consent-open .google-consent-scrim {
  pointer-events: auto !important;
  z-index: 2147483646 !important;
}

html.coluca-consent-open .google-consent-banner {
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}


/* ==========================================================
   MOBILE / TABLET
   ========================================================== */

@media (max-width: 620px) {
  .google-consent-banner {
    left: 10px;
    right: 10px;

    bottom:
      max(
        10px,
        env(safe-area-inset-bottom, 0px)
      );

    width: auto;
    max-height:
      calc(
        100dvh -
        20px -
        env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px)
      );

    transform: none;

    padding: 16px 15px;
    border-radius: 17px;
  }

  .google-consent-banner__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .google-consent-banner button {
    width: 100%;
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .google-consent-banner,
  .google-consent-scrim {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}