/*
 * EDS Consent — structural styles with neutral defaults.
 * Themes restyle everything through these custom properties (and may add classes
 * to the root via the eds_consent_root_class filter).
 */

.eds-consent,
.eds-embed {
	--eds-consent-bg: #ffffff;
	--eds-consent-fg: #1d1d1f;
	--eds-consent-muted: #5f6368;
	--eds-consent-border: rgb(0 0 0 / .14);
	--eds-consent-btn-bg: #1d1d1f;
	--eds-consent-btn-fg: #ffffff;
	--eds-consent-btn-border: #1d1d1f;
	--eds-consent-quiet-fg: #1d1d1f;
	--eds-consent-focus: #1a73e8;
	--eds-consent-radius: 6px;
	--eds-consent-btn-radius: 6px;
	--eds-consent-font: inherit;
	--eds-consent-title-font: inherit;
	--eds-consent-shadow: 0 18px 50px rgb(0 0 0 / .22);
	--eds-consent-backdrop: rgb(0 0 0 / .45);
	--eds-consent-z: 100000;
	--eds-consent-speed: 250ms;
}

/* Hidden must win over any display rule below. */
.eds-consent [hidden],
.eds-embed [hidden] { display: none !important; }

.eds-consent {
	font-family: var(--eds-consent-font);
	color: var(--eds-consent-fg);
}

.eds-consent__banner {
	position: fixed;
	inset: auto 16px 16px 16px;
	z-index: var(--eds-consent-z);
	max-width: 760px;
	margin-inline: auto;
	padding: 22px 24px;
	border: 1px solid var(--eds-consent-border);
	border-radius: var(--eds-consent-radius);
	background: var(--eds-consent-bg);
	box-shadow: var(--eds-consent-shadow);
	animation: eds-consent-in var(--eds-consent-speed) ease-out both;
}

.eds-consent__title {
	margin: 0 0 8px;
	font-family: var(--eds-consent-title-font);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--eds-consent-fg);
}

.eds-consent__text,
.eds-consent__category-desc,
.eds-consent__category-services {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--eds-consent-muted);
}

.eds-consent__link { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.eds-consent__preview-flag { margin: 0 0 10px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--eds-consent-muted); }

.eds-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* Accept and Reject share one style: equal prominence by design. */
.eds-consent__btn {
	flex: 1 1 180px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--eds-consent-btn-border);
	border-radius: var(--eds-consent-btn-radius);
	background: var(--eds-consent-btn-bg);
	color: var(--eds-consent-btn-fg);
	font: inherit;
	font-size: .875rem;
	font-weight: 500;
	cursor: pointer;
}

.eds-consent__btn--quiet {
	border-color: var(--eds-consent-border);
	background: transparent;
	color: var(--eds-consent-quiet-fg);
}

.eds-consent button:focus-visible,
.eds-consent a:focus-visible,
.eds-consent input:focus-visible,
.eds-embed button:focus-visible,
.eds-consent__panel:focus-visible {
	outline: 2px solid var(--eds-consent-focus);
	outline-offset: 2px;
}

/* Preferences dialog */
.eds-consent__dialog {
	position: fixed;
	inset: 0;
	z-index: calc(var(--eds-consent-z) + 1);
	display: grid;
	place-items: center;
	padding: 16px;
}

.eds-consent__backdrop { position: absolute; inset: 0; background: var(--eds-consent-backdrop); }

.eds-consent__panel {
	position: relative;
	width: min(640px, 100%);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	padding: 28px 24px 24px;
	border-radius: var(--eds-consent-radius);
	background: var(--eds-consent-bg);
	box-shadow: var(--eds-consent-shadow);
	animation: eds-consent-in var(--eds-consent-speed) ease-out both;
}

.eds-consent__panel:focus { outline: none; }

.eds-consent__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--eds-consent-fg);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.eds-consent__categories { margin: 18px 0 0; padding: 0; list-style: none; }

.eds-consent__category {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 16px 0;
	border-top: 1px solid var(--eds-consent-border);
}

.eds-consent__category-title { margin: 0 0 4px; font-size: 1rem; color: var(--eds-consent-fg); }
.eds-consent__category-title label { cursor: pointer; }
.eds-consent__category-services { margin-top: 6px; font-size: .8125rem; }

.eds-consent__switch { display: inline-flex; flex: none; align-items: center; gap: 8px; }
.eds-consent__switch-state { font-size: .8125rem; color: var(--eds-consent-muted); }

.eds-consent__switch input {
	position: relative;
	width: 44px;
	height: 24px;
	margin: 0;
	border: 1px solid var(--eds-consent-border);
	border-radius: 999px;
	background: var(--eds-consent-border);
	appearance: none;
	cursor: pointer;
	transition: background-color var(--eds-consent-speed);
}

.eds-consent__switch input::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--eds-consent-bg);
	transition: transform var(--eds-consent-speed);
}

.eds-consent__switch input:checked { border-color: var(--eds-consent-btn-bg); background: var(--eds-consent-btn-bg); }
.eds-consent__switch input:checked::after { transform: translateX(20px); }
.eds-consent__switch input:disabled { cursor: not-allowed; opacity: .6; }

/* Click-to-load embeds */
.eds-embed { position: relative; }

.eds-embed__placeholder {
	display: grid;
	gap: 10px;
	align-content: center;
	justify-items: start;
	min-height: 240px;
	height: 100%;
	padding: clamp(20px, 4vw, 40px);
	border: 1px solid var(--eds-consent-border);
	border-radius: var(--eds-consent-radius);
	background: var(--eds-consent-bg);
	color: var(--eds-consent-fg);
}

.eds-embed__title { margin: 0; font-family: var(--eds-consent-title-font); font-size: 1.125rem; }
.eds-embed__text { margin: 0; max-width: 52ch; font-size: .875rem; line-height: 1.6; color: var(--eds-consent-muted); }
.eds-embed__privacy { color: inherit; }

.eds-embed__button {
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--eds-consent-btn-border);
	border-radius: var(--eds-consent-btn-radius);
	background: var(--eds-consent-btn-bg);
	color: var(--eds-consent-btn-fg);
	font: inherit;
	font-size: .875rem;
	cursor: pointer;
}

.eds-consent-open {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

@keyframes eds-consent-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.eds-consent__banner,
	.eds-consent__panel { animation: none; }
	.eds-consent__switch input,
	.eds-consent__switch input::after { transition: none; }
}

@media (max-width: 600px) {
	.eds-consent__banner { inset: auto 8px 8px 8px; padding: 18px 16px; }
	.eds-consent__btn { flex-basis: 100%; }
}