/* ============================================================
   OI Age Gate — UX enhancements (mobile-first card + scroll fix)
   Enqueued after base gate.css; all rules scoped to .oiag-* classes.
   ============================================================ */

/* 1) SCROLL FIX — prevent clipping of tall content (underage/error state) */
.oiag-gate__content {
	justify-content: flex-start;
	align-items: stretch;
	overflow-y: auto;
	max-height: 100dvh;
	-webkit-overflow-scrolling: touch;
}
.oiag-gate__content-inner {
	margin: auto;
	width: 100%;
	padding-block: clamp(20px, 5vh, 48px);
}

/* 2) MOBILE-FIRST CARD LAYOUT (≤ 640px) */
@media (max-width: 640px) {
	.oiag-gate-shell {
		padding: 16px;
		min-height: 100dvh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.oiag-gate {
		flex-direction: column;
		width: 100%;
		max-width: 420px;
		max-height: calc(100dvh - 32px);
		border-radius: var(--oiag-radius);
		overflow: hidden;
		background: var(--oiag-surface);
		box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	}
	.oiag-gate__media {
		width: 100%;
		height: 160px;
		flex: 0 0 auto;
	}
	.oiag-gate__media--mobile-hidden {
		display: none;
	}
	.oiag-gate__content {
		width: 100%;
		max-height: none;
		padding: 20px 20px 24px;
	}
	.oiag-gate__content-inner {
		padding-block: 0;
	}
}

/* 3) LARGE TAP TARGETS — selects (age + state forms) */
.oiag-field select,
.oiag-gate select,
.oiag-dob-group select {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 16px; /* prevents iOS auto-zoom on focus */
	border: 1px solid #d9d9d9;
	border-radius: calc(var(--oiag-radius) * .66);
	background: #fff;
	color: var(--oiag-body);
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b5545' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	box-sizing: border-box;
}

/* 4) SUBMIT / CTA button */
.oiag-submit {
	width: 100%;
	min-height: 52px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .03em;
	border: 0;
	border-radius: calc(var(--oiag-radius) * .66);
	background: var(--oiag-primary);
	color: var(--oiag-primary-text);
	cursor: pointer;
	transition: filter .15s ease;
}
.oiag-submit:hover {
	filter: brightness(.94);
}
.oiag-submit:focus-visible {
	outline: 3px solid var(--oiag-primary);
	outline-offset: 2px;
	opacity: .85;
}

/* 5) DOB three-column grid: Month / Day / Year on one row */
@media (min-width: 768px) {
	.oiag-grid-selects {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
}

.oiag-gate__img > :not(noscript):not(script) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.oiag-gate__img noscript,
.oiag-gate__img noscript img {
	display: block;
	width: 100%;
	height: 100%;
}

.oiag-gate__img noscript img {
	position: absolute;
	inset: 0;
}

.oiag-gate__img script {
	display: none !important;
}

/* 6) SPACING / TYPOGRAPHY polish */
.oiag-gate__logo { margin: 0 auto 12px; }
.oiag-gate__title { text-align: center; margin: 0 0 16px; }
.oiag-gate__state-subheading,
.oiag-gate__subheading { text-align: center; }
.oiag-field { display: block; margin-bottom: 14px; }
.oiag-field__label { display: block; margin-bottom: 6px; font-weight: 600; }
.oiag-step__actions { margin-top: 8px; }
.oiag-gate__disclaimer { margin-top: 14px; font-size: 12px; opacity: .75; text-align: center; }

/* 7) ELEMENTOR POPUP SUPPRESSION — hide popups while gate is active */
html.oiag-locked .elementor-location-popup,
body.oiag-locked .elementor-location-popup,
html.oiag-locked .elementor-popup-modal,
body.oiag-locked .elementor-popup-modal,
html.oiag-locked [data-elementor-type="popup"],
body.oiag-locked [data-elementor-type="popup"] {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Belt-and-suspenders: keep the overlay gate above everything */
.oiag-gate-shell--overlay {
	z-index: 2147483647;
}

/* 8) ERROR / LOCKED state readability */
.oiag-gate__locked {
	max-width: 420px;
	margin-inline: auto;
	text-align: center;
	padding: 8px 4px;
}
.oiag-gate__alert {
	background: #fdeaea;
	color: #8a2b2b;
	border: 1px solid #f3c2c2;
	border-radius: calc(var(--oiag-radius) * .5);
	padding: 10px 14px;
	font-weight: 600;
}