/*
 * Portón de verificación de edad.
 *
 * Se carga sólo cuando hay que pintarlo. Para el cliente que ya confirmó —que
 * será la mayoría del tráfico recurrente— este archivo no llega al navegador.
 */

.halo-agegate {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--40);
	background: rgba(11, 9, 8, 0.92);
	/*
	 * El desenfoque deja entrever el catálogo detrás. Es intencional: comunica
	 * que hay una tienda real al otro lado sin dejarla usable.
	 */
	backdrop-filter: blur(14px);
}

/*
 * Mientras el aviso está en pantalla, la página no se desplaza. Se aplica desde
 * el propio aviso con :has() en lugar de con una clase en el cuerpo, para que
 * funcione aunque el script no llegue a ejecutarse.
 */
body:has(.halo-agegate) {
	overflow: hidden;
}

.halo-agegate__panel {
	width: min(440px, 100%);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--halo);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.halo-agegate__panel .halo-icon {
	color: var(--wp--preset--color--crimson-300);
}

.halo-agegate__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xlarge);
	letter-spacing: var(--wp--custom--tracking--heading);
	text-wrap: balance;
}

.halo-agegate__text {
	margin: 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--smoke);
}

.halo-agegate__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
}

/*
 * El botón afirmativo es la acción principal y lleva el carmesí de marca.
 * Blanco sobre #B22222 da 6.7:1 de contraste, muy por encima del mínimo.
 */
.halo-agegate__yes {
	min-height: 52px;
	padding: 0 var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--crimson);
	border: 1px solid var(--wp--preset--color--crimson);
	border-radius: 8px;
	color: #fff;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background var(--wp--custom--transition--fast);
}

.halo-agegate__yes:hover { background: var(--wp--preset--color--crimson-500); }
.halo-agegate__yes:active { background: var(--wp--preset--color--crimson-900); }

.halo-agegate__yes[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/*
 * La salida es un enlace discreto, no un botón secundario con el mismo peso
 * visual. Presentar las dos opciones igual de destacadas en un aviso legal es
 * una forma sutil de empujar hacia la equivocada.
 */
.halo-agegate__no {
	min-height: 44px;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--smoke);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.halo-agegate__no:hover { color: var(--wp--preset--color--vapor); }

.halo-agegate__error {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--crimson-300);
}

.halo-agegate__legal {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.6;
	color: var(--wp--preset--color--smoke);
	max-width: 34ch;
}

@media (prefers-reduced-motion: no-preference) {
	.halo-agegate__panel {
		animation: halo-agegate-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	@keyframes halo-agegate-in {
		from { opacity: 0; transform: translateY(12px) scale(0.98); }
		to { opacity: 1; transform: none; }
	}
}