/* =====================================================================
   Phartenaas — age-gate.css
   Full-screen blocking modal overlay (NIET banner).
   Zichtbaar/verborgen wordt door JS beheerd via inline style — CSS geeft
   alleen de finale stijl (zie rules.md #2).
   ===================================================================== */

.ph-age-gate {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(26, 21, 19, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	align-items: center;
	justify-content: center;
	padding: var(--s-24);
	/* JS toggles display: flex / none — geen display rule hier */
}

.ph-age-gate__card {
	position: relative;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-48) var(--s-32) var(--s-32);
	max-width: 420px;
	width: 100%;
	text-align: center;
}

.ph-age-gate__card::before {
	content: '';
	position: absolute;
	top: var(--s-16);
	left: var(--s-32);
	width: 40%;
	max-width: 120px;
	height: 1px;
	background: var(--c-accent);
}

.ph-age-gate__logo {
	margin: 0 auto var(--s-24);
	width: 120px;
	height: auto;
}

.ph-age-gate__title {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1.625rem;
	color: var(--c-white);
	margin-bottom: var(--s-16);
}

.ph-age-gate__body {
	color: var(--c-text-dim);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: var(--s-32);
}

.ph-age-gate__actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	margin-bottom: var(--s-24);
}

@media (min-width: 480px) {
	.ph-age-gate__actions {
		flex-direction: row-reverse;
		justify-content: center;
	}
}

.ph-age-gate__note {
	font-size: 0.75rem;
	color: var(--c-text-dim);
	line-height: 1.6;
}

.ph-age-gate__note a {
	color: var(--c-accent-sec);
	text-decoration: underline;
}