/**
 * Component — Cookie consent (cookie consent pass, 6 Oct 2026; NOT
 * design-locked)
 *
 * Markup: modules/frontend/views/consent.php. Behaviour:
 * assets/js/components/consent.js.
 *
 * A compact panel at the very TOP of the page (in the page flow, above
 * the site header — not over content), deep navy with the EC pearlescent
 * lower edge. It disappears once a choice is made. Desktop: text and
 * actions on one line; phones: a short paragraph, Accept / Essential only
 * side by side and "Manage preferences" as a text link.
 */

.ec-consent {
	position: relative;
	z-index: calc(var(--ec-z-modal, 1000) - 1);
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, rgba(44, 213, 227, 0.1), rgba(124, 236, 243, 0.55) 30%, rgba(249, 194, 236, 0.45) 60%, rgba(44, 213, 227, 0.1)) 1;
	background:
		radial-gradient(ellipse 40% 120% at 0% 0%, rgba(44, 213, 227, 0.1), rgba(44, 213, 227, 0) 70%),
		linear-gradient(180deg, #0d1b2f, #091423);
	color: var(--ec-color-text-secondary);
}

.ec-consent[hidden] {
	display: none;
}

.ec-consent__inner {
	display: flex;
	align-items: center;
	gap: var(--ec-space-4) var(--ec-space-6);
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--ec-space-3) var(--ec-gutter, var(--ec-space-4));
	box-sizing: border-box;
}

.ec-consent__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ec-consent__title {
	margin: 0 0 0.15rem;
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-body-sm);
	font-weight: var(--ec-font-weight-bold);
}

.ec-consent__body {
	margin: 0;
	font-size: var(--ec-font-size-caption);
	line-height: 1.5;
}

.ec-consent__body a {
	color: var(--ec-color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ec-consent__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ec-space-2) var(--ec-space-3);
}

.ec-consent__actions .ec-button {
	min-height: 2.75rem;
	white-space: nowrap;
}

.ec-consent__manage {
	min-height: 2.75rem;
	padding: 0 var(--ec-space-2);
	border: 0;
	border-radius: var(--ec-radius-sm);
	background: none;
	color: var(--ec-color-accent);
	font: inherit;
	font-size: var(--ec-font-size-body-sm);
	font-weight: var(--ec-font-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.ec-consent__inline-manage {
	display: none;
}

.ec-consent__manage--inline {
	min-height: 0;
	padding: 0;
	font-size: inherit;
}

.ec-consent__manage:focus-visible,
.ec-consent__body a:focus-visible,
.ec-consent-prefs__switch:focus-visible,
.ec-site-footer__consent:focus-visible {
	outline: none;
	box-shadow: var(--ec-focus-ring);
}

@media (max-width: 899px) {
	.ec-consent__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--ec-space-3);
	}

	.ec-consent__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.ec-consent__actions .ec-button {
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	}

	/* Phones/tablets: "Manage preferences" joins the text, so the two
	   choices sit on one row */
	.ec-consent__inline-manage {
		display: inline;
	}

	.ec-consent__manage--row {
		display: none;
	}

	.ec-consent__inner {
		padding-top: var(--ec-space-3);
		padding-bottom: var(--ec-space-3);
	}
}

/* ----- Preferences dialog ------------------------------------------- */

.ec-consent-prefs {
	z-index: calc(var(--ec-z-modal) + 2);
}

.ec-consent-prefs .ec-modal__backdrop {
	background-color: rgba(3, 7, 13, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ec-consent-prefs [hidden] {
	display: none !important;
}

.ec-consent-prefs__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ec-space-4);
	max-width: 32rem;
	padding: var(--ec-space-5);
	box-sizing: border-box;
	border: 1px solid transparent;
	background:
		linear-gradient(180deg, #102038, #0a1626) padding-box,
		linear-gradient(140deg, rgba(124, 236, 243, 0.5), rgba(249, 194, 236, 0.35) 55%, rgba(124, 236, 243, 0.15)) border-box;
	overscroll-behavior: contain;
}

.ec-consent-prefs__title {
	margin: 0;
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-h4);
	font-weight: var(--ec-font-weight-bold);
}

.ec-consent-prefs__intro {
	margin: 0;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	line-height: 1.5;
}

.ec-consent-prefs__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(150, 192, 228, 0.12);
}

.ec-consent-prefs__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--ec-space-4);
	padding: var(--ec-space-3) 0;
	border-bottom: 1px solid rgba(150, 192, 228, 0.12);
}

.ec-consent-prefs__name {
	display: block;
	margin: 0;
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-body-sm);
	font-weight: var(--ec-font-weight-semibold);
}

.ec-consent-prefs__desc {
	margin: 0.15rem 0 0;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-caption);
	line-height: 1.5;
}

.ec-consent-prefs__always {
	color: var(--ec-color-accent-strong);
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-semibold);
	white-space: nowrap;
}

/* A switch from a native checkbox (role="switch") */
.ec-consent-prefs__switch {
	position: relative;
	flex-shrink: 0;
	width: 2.75rem;
	height: 1.5rem;
	margin: 0;
	border: 1px solid rgba(150, 192, 228, 0.35);
	border-radius: var(--ec-radius-full);
	background: rgba(3, 9, 16, 0.6);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.ec-consent-prefs__switch::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0.2rem;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: #a5b7cb;
	transform: translateY(-50%);
	transition: left 150ms ease, background-color 150ms ease;
}

.ec-consent-prefs__switch:checked {
	border-color: transparent;
	background: linear-gradient(90deg, #2cd5e3, #7cecf3 60%, #f9c2ec);
}

.ec-consent-prefs__switch:checked::after {
	left: calc(100% - 1.25rem);
	background: #03141a;
}

.ec-consent-prefs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-space-3);
}

.ec-consent-prefs__actions .ec-button {
	flex: 1 1 auto;
	justify-content: center;
	min-height: 2.75rem;
}

/* Footer: "Cookie settings" reopens the dialog */
.ec-site-footer__consent {
	padding: 0;
	border: 0;
	border-radius: var(--ec-radius-sm);
	background: none;
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}

@media (max-width: 639px) {
	.ec-consent-prefs {
		align-items: flex-end;
		padding: 0;
	}

	.ec-consent-prefs__panel {
		max-width: none;
		max-height: 88vh;
		max-height: 88dvh;
		padding-bottom: calc(var(--ec-space-5) + env(safe-area-inset-bottom, 0px));
		border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
	}

	.ec-consent-prefs__actions .ec-button {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-consent-prefs__switch,
	.ec-consent-prefs__switch::after {
		transition: none;
	}
}