/* age-gate.css — blocking 18+ modal with BeGambleAware deny redirect. */

.age-gate {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(14, 23, 38, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: var(--s-24);
	/* display set by JS — do not force display here (rule 2) */
}

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

/* Scrumline-tick top decoration on age-gate card */
.age-gate__card::before {
	content: '';
	position: absolute;
	top: var(--s-24);
	left: 50%;
	transform: translateX(-50%);
	width: 68px;
	height: 1px;
	background-image: linear-gradient(to right,
		var(--c-accent) 0 20px,
		transparent 20px 24px,
		var(--c-accent) 24px 44px,
		transparent 44px 48px,
		var(--c-accent) 48px 68px
	);
}

.age-gate__logo {
	width: 44px;
	height: 44px;
	margin: var(--s-16) auto var(--s-24);
}

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

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

.age-gate__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	margin-bottom: var(--s-24);
}

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

/* Compliance strip (mini 3-logo row) */
.age-gate__compliance {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--s-16);
	padding-top: var(--s-24);
	border-top: 1px solid var(--c-border);
	margin-top: var(--s-16);
	flex-wrap: wrap;
}

.age-gate__compliance img {
	height: 20px;
	width: auto;
}

.age-gate__mini-18 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 20px;
	border: 1.5px solid var(--c-accent);
	border-radius: var(--r-sm);
	font-family: var(--f-heading);
	font-weight: 600;
	font-size: 0.625rem;
	color: var(--c-text);
}

.age-gate__tos {
	font-size: 0.75rem;
	color: var(--c-text-dim);
	margin-top: var(--s-16);
	line-height: 1.6;
}

.age-gate__tos a {
	color: var(--c-accent-sec);
	border-bottom: 1px solid transparent;
}

.age-gate__tos a:hover {
	border-bottom-color: var(--c-accent-sec);
}