/**
 * 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;
	background: var(--ucc-bg); color: var(--ucc-text);
	width: min(560px, calc(100% - 40px));
	max-height: 85vh; overflow: auto;
	margin: 7vh auto 0;
	border-radius: var(--ucc-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.ucc-modal__head {
	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; }
.ucc-modal__body { padding: 8px 24px 16px; }
.ucc-modal__foot {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end;
	padding: 16px 24px; border-top: 1px solid var(--ucc-border);
}
#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; bottom: 10px; max-width: none;
	}
	.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; }
}