/* Greenbox — Age Gate override (Apple Card minimal)
 * Loaded after plugin's main.css, drives the design via Age Gate v3 CSS variables
 * + targeted selectors for icon, focus states, animation, responsive.
 */

.age-gate__wrapper {
	/* Backdrop: ivoire warm, blur, no harsh dimming */
	--ag-background-color: rgba(250, 250, 247, 0.92);
	--ag-background-opacity: 1;
	--ag-blur: 24px;

	/* Card geometry: Apple-light, generous radius, layered shadow */
	--ag-form-background: #ffffff;
	--ag-form-radius: 24px;
	--ag-form-max-width: 460px;
	--ag-form-padding: 48px 44px 40px;
	--ag-form-shadow:
		0 1px 2px rgba(29, 29, 31, 0.04),
		0 8px 24px rgba(29, 29, 31, 0.06),
		0 32px 64px rgba(29, 29, 31, 0.08);
	--ag-form-border-width: 1px;
	--ag-form-border: solid rgba(29, 29, 31, 0.04);

	/* Wrapper safe-area on mobile */
	--ag-wrapper-padding: 20px;

	/* Typography */
	--ag-text-color: #1d1d1f;
	--ag-text-align: center;
	--ag-text-heading-size: 0;            /* Disabled-title fallback: hide H1 visually */
	--ag-text-heading-margin: 0;
	--ag-text-headline-size: 1.5rem;
	--ag-text-headline-weight: 600;
	--ag-text-headline-margin: 0 0 0.625rem;
	--ag-text-subheadline-size: 0.9375rem;
	--ag-text-subheadline-weight: 400;
	--ag-text-subheadline-margin: 0 auto 1.75rem;
	--ag-text-additional-size: 0.75rem;
	--ag-text-additional-margin: 1.5rem 0 0;
	--ag-text-additional-padding: 1.25rem 0 0;

	/* Fields */
	--ag-fields-width: 100%;
	--ag-fields-margin: 0 auto 1.25rem;
	--ag-input-spacing: 10px;
	--ag-input-background-color: #f5f5f7;
	--ag-input-color: #1d1d1f;
	--ag-input-placeholder-color: #aeaeb2;
	--ag-input-border: solid;
	--ag-input-border-width: 1.5px;
	--ag-input-radius: 12px;
	--ag-input-padding: 0.875rem 0.5rem;
	--ag-input-text-size: 1.0625rem;
	--ag-label-display: block;
	--ag-label-margin: 0 0 0.375rem;

	/* Remember */
	--ag-remember-align: center;
	--ag-remember-margin: 0 0 1.5rem;
	--ag-remember-size: 0.8125rem;
	--ag-remember-weight: 400;
	--ag-remember-spacing: 8px;

	/* Submit button: vert Greenbox pill */
	--ag-button-color-background: #1f4a1f;
	--ag-button-color-hover: #163316;
	--ag-button-color-text: #ffffff;
	--ag-button-color-text-hover: #ffffff;
	--ag-button-radius: 999px;
	--ag-button-padding: 0.875rem 2rem;
	--ag-button-size: 0.9375rem;
	--ag-button-weight: 600;
	--ag-button-margin: 0;
	--ag-submit-margin: 0;

	/* Transition */
	--ag-transition-duration: 280ms;
	--ag-transition-timing: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Font: align with theme system-ui */
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Backdrop: keep ivoire over the hero with strong blur — no dark dim */
.age-gate__background-color {
	background: rgba(250, 250, 247, 0.92);
	opacity: 1;
}

/* Card: borders crisp + tiny inner highlight + entry animation */
.age-gate {
	border-color: rgba(29, 29, 31, 0.06);
	animation: gb-age-card-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes gb-age-card-in {
	from { opacity: 0; transform: translateY(8px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Kill the redundant H1 "Greenbox CBD" entirely (we keep it in DOM for a11y,
 * just hide it visually and collapse the spacing). */
.age-gate__heading,
.age-gate__heading-title {
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

/* Leaf badge before headline — uses theme cannabis-leaf SVG */
.age-gate__headline {
	color: #1d1d1f;
	letter-spacing: -0.012em;
	line-height: 1.25;
}
/* Selector specificity must beat plugin's `.age-gate h2:before { content:none }` */
.age-gate h2.age-gate__headline::before,
.age-gate h1.age-gate__headline::before {
	content: '';
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background-color: #f0f7f0;
	background-image: url('../icons/cannabis-leaf.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
}

/* Subheadline: muted, readable, narrow */
.age-gate__subheadline {
	color: #424245;
	line-height: 1.5;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}

/* Labels above DD/MM/YYYY: eyebrow style */
.age-gate__label {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #86868b;
}

/* Inputs: surface fill, no border by default, focus = white + green halo */
.age-gate input[type='text'].age-gate__input {
	border-color: transparent;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease,
		color 180ms ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}
.age-gate input[type='text'].age-gate__input:hover {
	background-color: #ececef;
}
.age-gate input[type='text'].age-gate__input:focus {
	background-color: #ffffff;
	border-color: #1f4a1f;
	outline: none;
	box-shadow: 0 0 0 4px rgba(31, 74, 31, 0.12);
}

/* Remember checkbox: subtle, brand-aligned */
.age-gate__remember-wrapper {
	color: #86868b;
}
.age-gate__remember {
	gap: 8px;
}
.age-gate__remember input[type='checkbox'] {
	width: 16px;
	height: 16px;
	accent-color: #1f4a1f;
	cursor: pointer;
}
.age-gate__remember-text {
	color: #424245;
}

/* Submit button: pill, lift on hover */
.age-gate__submit {
	width: 100%;
	display: flex;
	justify-content: center;
}
button.age-gate__button,
button.age-gate__submit--yes,
button.age-gate__submit--no {
	min-width: 220px;
	box-shadow: 0 1px 2px rgba(31, 74, 31, 0.18), 0 6px 16px rgba(31, 74, 31, 0.18);
	transition:
		background-color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}
button.age-gate__button:hover,
button.age-gate__submit--yes:hover,
button.age-gate__submit--no:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(31, 74, 31, 0.22), 0 10px 22px rgba(31, 74, 31, 0.24);
}
button.age-gate__button:active,
button.age-gate__submit--yes:active,
button.age-gate__submit--no:active {
	transform: translateY(0);
}
button.age-gate__button:focus-visible,
button.age-gate__submit--yes:focus-visible,
button.age-gate__submit--no:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 4px rgba(31, 74, 31, 0.18),
		0 6px 16px rgba(31, 74, 31, 0.18);
}

/* Errors */
.age-gate__error {
	color: #c0392b;
	font-size: 0.8125rem;
	margin: 0.5rem 0 0;
	font-weight: 500;
}

/* Additional info (THC mention bottom): tiny, muted, subtle top divider */
.age-gate__additional-information {
	color: #86868b;
	font-size: 0.75rem;
	line-height: 1.5;
	border-top: 1px solid #efeff1;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}

/* Tablet ≤ 768 */
@media (max-width: 768px) {
	.age-gate__wrapper {
		--ag-form-padding: 40px 32px 32px;
		--ag-form-max-width: 440px;
	}
}

/* Mobile ≤ 480 */
@media (max-width: 480px) {
	.age-gate__wrapper {
		--ag-form-padding: 32px 22px 28px;
		--ag-form-radius: 20px;
		--ag-form-max-width: calc(100vw - 32px);
		--ag-form-shadow:
			0 1px 2px rgba(29, 29, 31, 0.04),
			0 8px 20px rgba(29, 29, 31, 0.06);
		--ag-text-headline-size: 1.3125rem;
		--ag-text-subheadline-size: 0.9rem;
		--ag-text-subheadline-margin: 0 auto 1.5rem;
		--ag-input-padding: 0.8125rem 0.375rem;
		--ag-input-text-size: 1rem;
		--ag-button-padding: 0.875rem 1.5rem;
	}
	.age-gate__headline::before {
		width: 48px;
		height: 48px;
		background-size: 26px 26px;
		margin-bottom: 16px;
	}
	button.age-gate__button,
	button.age-gate__submit--yes,
	button.age-gate__submit--no {
		width: 100%;
		min-width: 0;
	}
}

/* Reduced motion: kill entry animation */
@media (prefers-reduced-motion: reduce) {
	.age-gate {
		animation: none !important;
	}
}