/**
 * Age gate - Del Maguey.
 *
 * Markup and behaviour belong to the pr-agegate-v2 plugin; this file only
 * restyles it, so nothing here touches plugin internals beyond class names.
 *
 * The plugin prints its own inline <style> at wp_footer (modal width, modal
 * background, border and logo width all come from its admin screen), and that
 * loads AFTER this file - hence !important on the properties it also sets.
 *
 * Layout follows the approved Pernod Ricard reference (Codigo 1530, full-date
 * variant): centred logo, two lines of copy, MM / DD / YYYY fields with the
 * submit butted against the last one, a pre-checked "Remember me" with its
 * help line, then the legal line.
 *
 * Two things CSS cannot do here, both plugin-side:
 * - US visitors always get all three date fields. The plugin LDA data marks
 *   the US `full: true`, so it never collapses to the year-only variant.
 * - "Remember me" pre-checked is the `remember_me_checked` admin setting.
 */

/* ---- Scrim ---------------------------------------------------------- */
/* Black, not green. The plugin builds this from its `overlay_background_color`
   and `overlay_opacity` admin settings and prints them inline at wp_footer,
   which is why this needs !important. Changing those two settings in WP Admin
   would do the same thing - this rule just makes the result independent of
   however a given environment happens to be configured. */
#pr_age_gate .agegate_overlay {
	background-color: rgba(0, 0, 0, 0.5) !important;
	background-image: none !important;
}

/* ---- Dialog shell --------------------------------------------------- */
#pr_age_gate .agegate_dialog {
	max-width: 900px !important;
	background-color: var(--dm-bg-default-primary) !important;
	border: 0 !important;
	border-radius: 4px !important;
}

.agegate_dialog.agegate_center-fix-xy {
	overflow: visible !important;
}

/* The previous build floated popup-back.jpg behind the modal. The approved
   design is a flat cream ground, so the layer is off. The image is still
   injected from inc/enqueue/global.php if it is ever wanted back. */
.agegate_dialog::before {
	display: none !important;
}

#pr_age_gate .agegate_content {
	background-color: transparent !important;
	padding: 56px 40px 48px !important;
	text-align: center !important;
	border-radius: 4px !important;
}

/* ---- Logo ----------------------------------------------------------- */
#pr_age_gate .agegate_logo,
#pr_age_gate .agegate_logo img {
	display: block !important;
	width: auto !important;
	max-width: 220px !important;
	height: auto !important;
	margin: 0 auto 36px !important;
}

/* ---- Copy ----------------------------------------------------------- */
/* "You have to be over 21 to enter this site". The old build rendered this as
   90px italic display type; the reference sets it as plain body copy. */
#pr_age_gate p.agegate_text.agegate_over18 {
	margin: 0 0 30px !important;
	color: var(--dm-fg-default-primary) !important;
	font-family: var(--font-sans, "Roboto Condensed", sans-serif) !important;
	font-style: normal !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
}

#pr_age_gate .agegate_subtitle {
	margin: 0 0 20px !important;
	color: var(--dm-fg-default-primary) !important;
	font-family: var(--font-sans, "Roboto Condensed", sans-serif) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
}

/* ---- Date fields + submit ------------------------------------------- */
/* One row: three fields then the button. The plugin orders the fields from the
   country LDA `format`, which is mm-dd-yyyy for the US. */
#pr_age_gate .agegate_inputs_container {
	display: flex !important;
	align-items: stretch !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 0 0 30px !important;
}

/* Force all three fields (MM / DD / YYYY).
 *
 * The plugin always renders day, month and year into the DOM; when the visitor
 * country is `full: false` it merely sets an inline `display:none` on day and
 * month, which is why only YYYY showed. A stylesheet !important beats that
 * inline style.
 *
 * This is not cosmetic. The plugin gates validation on visibility, not on the
 * `full` flag:
 *
 *     (this.isMonthInputVisible() && !this.validateMonth()) ||
 *     (this.isDayInputVisible()   && !this.validateDay())
 *
 * and both checks read getComputedStyle().display, which honours !important.
 * So forcing the fields visible also makes the plugin validate them and build
 * a real YYYY-MM-DD birthdate instead of defaulting the missing parts to -01.
 *
 * Trade-off: this opts out of the plugin progressive reveal, where it asks for
 * month (then day) only when the year alone sits exactly on the age boundary.
 * Delete this block to hand that behaviour back.
 */
#pr_age_gate .age-gate_input[name="day"],
#pr_age_gate .age-gate_input[name="month"],
#pr_age_gate .age-gate_input[name="year"],
#pr_age_gate .age-gate__day-input-wrapper,
#pr_age_gate .age-gate__month-input-wrapper,
#pr_age_gate .age-gate__year-input-wrapper {
	display: inline-block !important;
}

#pr_age_gate .age-gate_input {
	width: 120px !important;
	max-width: 120px !important;
	height: 56px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	background: var(--dm-bg-default-white) !important;
	border: 1px solid var(--dm-border-default-dark) !important;
	border-radius: 0 !important;
	color: var(--dm-fg-default-primary) !important;
	font-family: var(--font-sans, "Roboto Condensed", sans-serif) !important;
	font-size: 16px !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-align: left !important;
}

#pr_age_gate .age-gate_input::placeholder {
	color: var(--dm-fg-default-secondary) !important;
	opacity: 1 !important;
}

#pr_age_gate .age-gate_input:focus-visible {
	outline: 2px solid var(--dm-border-default-dark-strong) !important;
	outline-offset: 1px !important;
}

/* The reference butts the submit against the last field. The previous build
   hid this button outright because the old custom JS auto-submitted. */
#pr_age_gate .agegate_submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 56px !important;
	margin: 0 !important;
	padding: 0 28px !important;
	background: var(--dm-bg-default-tertiary) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--dm-fg-default-white) !important;
	font-family: var(--font-sans, "Roboto Condensed", sans-serif) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background-color .3s cubic-bezier(0, 0, .2, 1), color .3s cubic-bezier(0, 0, .2, 1) !important;
}

/* Matches the site-wide tertiary button state from button-fx.css. */
#pr_age_gate .agegate_submit:hover,
#pr_age_gate .agegate_submit:focus-visible,
#pr_age_gate .agegate_submit:active {
	background: var(--dm-bg-accent-yellow) !important;
	color: var(--dm-fg-default-primary) !important;
}

/* Not part of the reference layout. */
#pr_age_gate .agegate_change_country {
	display: none !important;
}

/* ---- Remember me ---------------------------------------------------- */
/* Checkbox and label on one line, help text wrapped onto the next. The help
   element class is configurable in the plugin content JSON, so it is matched
   positionally as whatever follows the label span. */
#pr_age_gate .agegate_rememberMe {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 0 30px !important;
}

#pr_age_gate .agegate_rememberMe span {
	display: inline-flex !important;
	align-items: center !important;
	color: var(--dm-fg-default-primary) !important;
	font-family: var(--font-sans, "Roboto Condensed", sans-serif) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

#pr_age_gate .agegate_rememberMe input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--dm-bg-default-white) !important;
	border: 1px solid var(--dm-border-default-dark-strong) !important;
	border-radius: 2px !important;
	position: relative !important;
	cursor: pointer !important;
}

#pr_age_gate .agegate_rememberMe input[type="checkbox"]:checked {
	background: var(--dm-bg-default-tertiary) !important;
	border-color: var(--dm-bg-default-tertiary) !important;
}

#pr_age_gate .agegate_rememberMe input[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 5px !important;
	top: 1px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid var(--dm-fg-default-white) !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}

/* The help line, pushed onto its own row under the checkbox. */
#pr_age_gate .agegate_rememberMe span ~ * {
	flex: 0 0 100% !important;
	margin: 0 !important;
	color: var(--dm-fg-default-primary) !important;
	font-family: var(--font-sans, "Roboto Condensed", sans-serif) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}

/* ---- Legal ---------------------------------------------------------- */
#pr_age_gate .agegate_text.agegate_generalConditions,
#pr_age_gate .agegate_text.agegate_generalConditions p {
	max-width: 600px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	color: var(--dm-fg-default-primary) !important;
	font-family: var(--font-sans, "Roboto Condensed", sans-serif) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}

#pr_age_gate .agegate_text.agegate_generalConditions a {
	color: inherit !important;
	text-decoration: underline !important;
}

/* ---- Error states --------------------------------------------------- */
#pr_age_gate .agegate_field-error-message,
#pr_age_gate .agegate_tooyoung-message {
	color: var(--dm-fg-error-primary) !important;
	font-family: var(--font-sans, "Roboto Condensed", sans-serif) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}

/* ---- Mobile --------------------------------------------------------- */
@media (max-width: 768px) {
	#pr_age_gate .agegate_content {
		padding: 40px 20px 36px !important;
	}

	#pr_age_gate .agegate_logo,
	#pr_age_gate .agegate_logo img {
		max-width: 150px !important;
		margin-bottom: 26px !important;
	}

	#pr_age_gate p.agegate_text.agegate_over18 {
		font-size: 17px !important;
		margin-bottom: 22px !important;
	}

	#pr_age_gate .agegate_subtitle {
		font-size: 16px !important;
	}

	/* Three fields plus the button do not fit on a phone, so the button drops
	   to its own full-width row and the fields share the row above. */
	#pr_age_gate .age-gate_input {
		width: auto !important;
		max-width: none !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		height: 52px !important;
		padding: 0 10px !important;
		text-align: center !important;
	}

	#pr_age_gate .agegate_submit {
		flex: 0 0 100% !important;
		height: 52px !important;
		margin-top: 4px !important;
	}

	#pr_age_gate .agegate_rememberMe span {
		font-size: 16px !important;
	}
}