/**
 * Unsolve Cookie Consent — frontend styling
 * Kleuren komen via CSS-variabelen uit de backend-instellingen.
 */

.ucc-root {
	--ucc-accent: #2563eb;
	--ucc-bg: #ffffff;
	--ucc-text: #1a1a1a;
	--ucc-radius: 12px;
	--ucc-muted: rgba(0, 0, 0, .06);
	--ucc-border: rgba(0, 0, 0, .1);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ucc-text);
}

.ucc-root[hidden] {
	display: none;
}

.ucc-root.ucc-theme-dark {
	--ucc-bg: #1c1f26;
	--ucc-text: #f3f4f6;
	--ucc-muted: rgba(255, 255, 255, .08);
	--ucc-border: rgba(255, 255, 255, .14);
}

/* ---------- Banner ---------- */
.ucc-banner {
	position: fixed;
	z-index: 999999;
	background: var(--ucc-bg);
	color: var(--ucc-text);
	box-shadow: 0 6px 30px rgba(0, 0, 0, .18);
	border: 1px solid var(--ucc-border);
	border-radius: var(--ucc-radius);
	padding: 22px 24px;
	box-sizing: border-box;
}

.ucc-banner[hidden] { display: none; }
.ucc-banner__content { margin-bottom: 16px; }
.ucc-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.ucc-body { margin: 0; font-size: 14px; opacity: .9; }
.ucc-link { color: var(--ucc-accent); text-decoration: underline; margin-left: 4px; }

.ucc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}

/* Compacte kaart (modal/hoek): knoppen netjes verdelen i.p.v. rafelig
   wrappen. Secundaire knoppen delen een rij; de primaire krijgt zijn
   eigen volle regel zodat "Alles accepteren" niet loshangt. */
.ucc-pos-center .ucc-banner__actions .ucc-btn,
.ucc-pos-bottom-left .ucc-banner__actions .ucc-btn,
.ucc-pos-bottom-right .ucc-banner__actions .ucc-btn,
.ucc-modal__foot .ucc-btn {
	flex: 1 1 auto;
	min-width: 130px;
	text-align: center;
}
.ucc-pos-center .ucc-banner__actions .ucc-btn--primary,
.ucc-pos-bottom-left .ucc-banner__actions .ucc-btn--primary,
.ucc-pos-bottom-right .ucc-banner__actions .ucc-btn--primary,
.ucc-modal__foot .ucc-btn--primary {
	flex-basis: 100%;
}

/* Posities */
.ucc-pos-bottom .ucc-banner { left: 20px; right: 20px; bottom: 20px; max-width: 1100px; margin: 0 auto; }
.ucc-pos-bottom-left .ucc-banner { left: 20px; bottom: 20px; max-width: 420px; }
.ucc-pos-bottom-right .ucc-banner { right: 20px; bottom: 20px; max-width: 420px; }
.ucc-pos-center .ucc-banner {
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	max-width: 480px; width: calc(100% - 40px);
}
/* Verdonkerende achtergrond alleen tonen zolang de banner écht zichtbaar is.
   Zonder deze koppeling blijft de overlay hangen zodra de banner verborgen is
   (na een keuze of bij een terugkerende bezoeker), omdat #ucc-root zichtbaar
   blijft voor het heropen-icoon en de modal. */
.ucc-pos-center:has(.ucc-banner:not([hidden]))::before {
	content: ""; position: fixed; inset: 0; z-index: 999998;
	background: rgba(0, 0, 0, .5);
}

/* Bar-layout: alles op één rij waar mogelijk */
.ucc-layout-bar.ucc-pos-bottom .ucc-banner {
	display: flex; align-items: center; gap: 20px;
	max-width: none; left: 0; right: 0; bottom: 0; border-radius: 0;
}
.ucc-layout-bar.ucc-pos-bottom .ucc-banner__content { margin-bottom: 0; flex: 1; }

/* ---------- Knoppen ---------- */
/* Reset zodat thema-/Elementor-stijlen (randen, schaduw, hoofdletters,
   min-hoogte, volle breedte) onze knoppen niet overschrijven. */
#ucc-root button,
#ucc-root .ucc-btn {
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	min-height: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}

#ucc-root .ucc-btn {
	display: inline-block !important;
	border: 1px solid transparent !important;
	border-radius: calc(var(--ucc-radius) * .6) !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer;
	transition: opacity .15s, background .15s;
}
#ucc-root .ucc-btn:hover { opacity: .88; }
#ucc-root .ucc-btn--primary { background: var(--ucc-accent) !important; color: #fff !important; border-color: var(--ucc-accent) !important; }
#ucc-root .ucc-btn--secondary { background: var(--ucc-muted) !important; color: var(--ucc-text) !important; border-color: transparent !important; }
#ucc-root .ucc-btn--ghost { background: transparent !important; color: var(--ucc-text) !important; border-color: var(--ucc-border) !important; }

#ucc-root .ucc-close {
	position: absolute; top: 10px; right: 12px;
	background: none !important; border: 0 !important; padding: 0 !important;
	font-size: 24px; line-height: 1;
	cursor: pointer; color: var(--ucc-text); opacity: .6;
}
#ucc-root .ucc-close:hover { opacity: 1; }

/* ---------- Modal ---------- */
.ucc-modal { position: fixed; inset: 0; z-index: 1000000; }
.ucc-modal[hidden] { display: none; }
.ucc-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.ucc-modal__dialog {
	position: relative; z-index: 1;
	display: flex; flex-direction: column;
	background: var(--ucc-bg); color: var(--ucc-text);
	width: min(560px, calc(100% - 40px));
	/* vh als fallback; dvh volgt de zichtbare hoogte op iOS Safari, zodat de
	   footer met "Alles accepteren" niet onder de browserbalk verdwijnt. */
	max-height: 85vh;
	max-height: 85dvh;
	overflow: hidden;
	margin: 7vh auto 0;
	border-radius: var(--ucc-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.ucc-modal__head {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 24px; border-bottom: 1px solid var(--ucc-border);
}
.ucc-modal__head .ucc-title { margin: 0; }
/* Alleen de body scrollt; head en foot blijven staan zodat de knoppen altijd
   in beeld zijn. */
.ucc-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 24px 16px;
}
.ucc-modal__foot {
	flex: 0 0 auto;
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end;
	padding: 16px 24px; border-top: 1px solid var(--ucc-border);
	/* Ruimte vrijhouden voor de iOS home-indicator / onderbalk. */
	padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
#ucc-root .ucc-modal__head .ucc-close { position: static; }

/* ---------- Categorie-rij ---------- */
.ucc-cat { padding: 16px 0; border-bottom: 1px solid var(--ucc-border); }
.ucc-cat:last-child { border-bottom: 0; }
.ucc-cat__head { display: flex; align-items: center; gap: 12px; }
.ucc-cat__label { font-weight: 600; }
.ucc-cat__badge { font-style: normal; font-size: 12px; opacity: .6; margin-left: 6px; font-weight: 400; }
.ucc-cat__desc { margin: 8px 0 0 56px; font-size: 13px; opacity: .8; }

/* Toggle-switch */
.ucc-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; }
.ucc-switch input { opacity: 0; width: 0; height: 0; }
.ucc-switch__slider {
	position: absolute; inset: 0; cursor: pointer;
	background: #cbd5e1; border-radius: 999px; transition: .2s;
}
.ucc-switch__slider::before {
	content: ""; position: absolute; height: 18px; width: 18px;
	left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s;
}
.ucc-switch input:checked + .ucc-switch__slider { background: var(--ucc-accent); }
.ucc-switch input:checked + .ucc-switch__slider::before { transform: translateX(20px); }
.ucc-switch input:disabled + .ucc-switch__slider { opacity: .65; cursor: not-allowed; }

/* ---------- Heropen-widget ---------- */
#ucc-root .ucc-reopen {
	position: fixed !important;
	left: auto; right: auto; top: auto; bottom: auto;
	z-index: 999997;
	width: 46px !important; height: 46px !important; min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important; border-radius: 50% !important;
	background: var(--ucc-reopen-bg, var(--ucc-accent)) !important;
	color: var(--ucc-reopen-icon, #fff) !important;
	cursor: pointer;
	display: flex !important; align-items: center; justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25) !important;
}
/* Hoek + offset instelbaar via de backend (CSS-variabelen op #ucc-root). */
#ucc-root .ucc-reopen--bottom-left  { left: var(--ucc-reopen-x, 18px);  bottom: var(--ucc-reopen-y, 18px); }
#ucc-root .ucc-reopen--bottom-right { right: var(--ucc-reopen-x, 18px); bottom: var(--ucc-reopen-y, 18px); }
#ucc-root .ucc-reopen--top-left     { left: var(--ucc-reopen-x, 18px);  top: var(--ucc-reopen-y, 18px); }
#ucc-root .ucc-reopen--top-right    { right: var(--ucc-reopen-x, 18px); top: var(--ucc-reopen-y, 18px); }
#ucc-root .ucc-reopen[hidden] { display: none !important; }
#ucc-root .ucc-reopen:hover { opacity: .9; }
#ucc-root .ucc-reopen svg { width: 22px; height: 22px; }

/* ---------- Mobiel ---------- */
@media (max-width: 600px) {
	.ucc-pos-bottom .ucc-banner,
	.ucc-pos-bottom-left .ucc-banner,
	.ucc-pos-bottom-right .ucc-banner {
		left: 10px; right: 10px; max-width: none;
		/* Boven de iOS home-indicator / onderbalk houden. */
		bottom: calc(10px + env(safe-area-inset-bottom));
	}
	.ucc-banner__actions .ucc-btn { flex: 1 1 auto; min-width: 130px; text-align: center; }
	.ucc-banner__actions .ucc-btn--primary { flex-basis: 100%; }
	.ucc-layout-bar.ucc-pos-bottom .ucc-banner { display: block; }
	.ucc-layout-bar.ucc-pos-bottom .ucc-banner__content { margin-bottom: 16px; }

	/* Modal: kleinere marge + meer hoogte zodat de footer met "Alles accepteren"
	   altijd binnen de zichtbare viewport valt op mobiel. */
	.ucc-modal__dialog {
		margin: 3vh auto;
		max-height: 92vh;
		max-height: 92dvh;
	}
}