/* ============================================================
   URBAN GRND - consent.css
   Cookiemelding (zie src/scripts/consent.js).
   Onderin beeld, blokkeert de pagina niet. Staat boven de chatknop.
   ============================================================ */
.ugc{
  display:none !important;
  position:fixed; left:16px; right:16px; bottom:16px; z-index:10000;
  max-width:560px; margin-left:auto;
  background:var(--ug-violet-800); color:var(--on-dark);
  border:1px solid var(--border-on-dark); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
}
.ugc.ugc--open{display:block !important}
.ugc-binnen{padding:var(--space-5)}

.ugc-titel{
  font-size:var(--text-h4); color:var(--on-dark); margin:0 0 var(--space-2);
}
.ugc-tekst{margin:0; font-size:var(--text-sm); line-height:var(--leading-normal); color:var(--on-dark-muted)}
.ugc-tekst a{color:var(--ug-amber-300); text-decoration:underline; text-underline-offset:2px}
.ugc-tekst a:hover{color:var(--on-dark)}

/* Keuzes: alleen zichtbaar na "Zelf kiezen" of via Cookie-instellingen */
.ugc-keuzes{display:none; margin-top:var(--space-4); border-top:1px solid var(--border-on-dark)}
.ugc--keuzes .ugc-keuzes{display:block}
.ugc-rij{border-bottom:1px solid var(--border-on-dark)}
.ugc-label{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) 0; cursor:pointer;
}
.ugc-labeltekst{display:flex; flex-direction:column; gap:2px; font-size:var(--text-sm); color:var(--on-dark-muted)}
.ugc-labeltekst strong{color:var(--on-dark); font-weight:700; font-size:var(--text-base)}

/* Schakelaar */
.ugc-schakel{
  appearance:none; -webkit-appearance:none; flex:none; margin:0;
  width:46px; height:26px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.22); position:relative; cursor:pointer;
  transition:background .2s ease;
}
.ugc-schakel::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:var(--ug-white); transition:transform .2s ease;
}
.ugc-schakel:checked{background:var(--action)}
.ugc-schakel:checked::after{transform:translateX(20px)}
.ugc-schakel:disabled{opacity:.55; cursor:not-allowed}
.ugc-label:has(.ugc-schakel:disabled){cursor:default}

/* Knoppen. "Alles accepteren" en "Alleen noodzakelijk" wegen even zwaar:
   weigeren moet net zo makkelijk zijn als accepteren. */
.ugc-knoppen{
  display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4);
}
.ugc-knop{
  flex:1 1 150px; min-height:44px; padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill); border:2px solid var(--action);
  background:var(--action); color:var(--on-action);
  font:700 var(--text-sm)/1.2 var(--font-body); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ugc-knop:hover{background:var(--action-hover); border-color:var(--action-hover)}
.ugc-knop--link{
  flex:0 0 100%; order:3; min-height:auto; padding:var(--space-1) 0;
  background:none; border:0; color:var(--ug-amber-300);
  text-decoration:underline; text-underline-offset:3px; font-weight:500;
}
.ugc-knop--link:hover{background:none; color:var(--on-dark)}
.ugc-knop[data-ugc="bewaar"]{display:none}

/* Met de keuzes open: "Zelf kiezen" weg, "Keuze opslaan" erbij */
.ugc--keuzes .ugc-knop--link{display:none}
.ugc--keuzes .ugc-knop[data-ugc="bewaar"]{display:block; flex-basis:100%; order:3;
  background:transparent; color:var(--on-dark); border-color:var(--border-on-dark)}
.ugc--keuzes .ugc-knop[data-ugc="bewaar"]:hover{border-color:var(--on-dark)}

/* De chatknop zit op dezelfde plek; zolang de melding open staat ligt die eronder. */
@media (max-width:600px){
  .ugc{left:8px; right:8px; bottom:8px; max-height:calc(100dvh - 16px)}
  .ugc-binnen{padding:var(--space-4)}
}

@media (prefers-reduced-motion:no-preference){
  .ugc.ugc--open{animation:ugc-in .25s ease-out}
  @keyframes ugc-in{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
}
#cookies{scroll-margin-top:calc(var(--header-h) + 16px)}