/* ============================================================
   AGE GATE OVERLAY
   Blocks all interaction until the visitor confirms they are 18+.
   z-index set above Elementor overlays (100000) and the paywall (999998).
   Uses GSG brand palette: dark theme with teal/orange accents.
   ============================================================ */

.gsg-age-gate-backdrop {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(18, 19, 22, 0.95) !important; /* --gsg-primary-dark */
	z-index: 2147483647 !important; /* max 32-bit — above everything */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* ---- Modal ---- */

.gsg-age-gate-modal {
	background: linear-gradient(135deg, #121316 0%, #1a1b1f 100%) !important; /* matches GSG hero cards */
	border: 1px solid #4A5663 !important; /* --gsg-slate-dark */
	border-radius: 12px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
	padding: 48px 40px 40px !important;
	max-width: 480px;
	width: 100%;
	text-align: center;
	animation: gsgAgeGateFadeIn 0.3s ease;
}

@keyframes gsgAgeGateFadeIn {
	from { opacity: 0; transform: scale(0.95); }
	to   { opacity: 1; transform: scale(1); }
}

/* ---- 18+ badge ---- */

.gsg-age-gate-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #E07227 !important; /* --gsg-orange-bright */
	color: #ffffff !important;
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 24px;
	letter-spacing: -0.5px;
}

/* ---- Typography ---- */

.gsg-age-gate-title {
	font-size: 26px !important;
	font-weight: 600 !important;
	margin: 0 0 12px 0 !important;
	color: #ffffff !important; /* --gsg-white */
	line-height: 1.3 !important;
	padding: 0 !important;
}

.gsg-age-gate-description {
	font-size: 15px !important;
	color: #8E99A6 !important; /* --gsg-primary-gray */
	margin: 0 0 32px 0 !important;
	line-height: 1.6 !important;
	padding: 0 !important;
}

.gsg-age-gate-description strong {
	color: #ffffff !important;
}

/* ---- Buttons ---- */

.gsg-age-gate-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gsg-age-gate-button {
	display: inline-block !important;
	padding: 15px 40px !important;
	border-radius: 4px !important; /* --gsg-radius-sm — matches GSG buttons */
	font-size: 17px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
	transition: background 0.3s, transform 0.1s, opacity 0.3s !important;
	line-height: 1.4 !important;
	text-align: center !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.gsg-age-gate-button:active {
	transform: scale(0.98) !important;
}

/* Confirm — GSG teal/cyan accent */
.gsg-age-gate-button-confirm {
	background: #3ECFC4 !important; /* --gsg-cyan-bright */
	color: #121316 !important; /* dark text on bright teal */
}

.gsg-age-gate-button-confirm:hover {
	background: #35CCBD !important; /* --gsg-teal-bright */
	color: #121316 !important;
	opacity: 0.9 !important;
}

/* Deny — subtle dark secondary */
.gsg-age-gate-button-deny {
	background: #4A5663 !important; /* --gsg-slate-dark */
	color: #8E99A6 !important; /* --gsg-primary-gray */
}

.gsg-age-gate-button-deny:hover {
	background: #53616D !important; /* --gsg-slate-medium */
	color: #ffffff !important;
}

/* ---- Mobile ---- */

@media (max-width: 480px) {
	.gsg-age-gate-modal {
		padding: 36px 24px 28px !important;
	}

	.gsg-age-gate-icon {
		width: 60px;
		height: 60px;
		font-size: 20px;
		margin-bottom: 20px;
	}

	.gsg-age-gate-title {
		font-size: 22px !important;
	}

	.gsg-age-gate-description {
		font-size: 14px !important;
		margin-bottom: 24px !important;
	}

	.gsg-age-gate-button {
		padding: 13px 24px !important;
		font-size: 15px !important;
	}
}