/**
 * Checkpost front-end styles.
 *
 * Every selector is scoped under the `checkpost-` prefix so nothing here can
 * collide with theme styles. Colors/fonts/z-index come from CSS custom
 * properties written inline per-request in class-checkpost-frontend.php
 * (build_dynamic_css()) so admin design changes never require editing
 * this file. This same stylesheet is also loaded on the admin settings
 * page (see Checkpost_Admin::enqueue_assets()) so the live preview can reuse
 * these rules — keep that in mind before adding anything scoped to a
 * bare element selector.
 *
 * Table of Contents:
 * 1.0 - Scroll Lock & Visibility
 * 2.0 - Overlay
 * 3.0 - Popup Position
 * 4.0 - Entrance Animation
 * 5.0 - Background Image
 * 6.0 - Modal Card
 * 7.0 - Logo
 * 8.0 - Typography
 * 9.0 - Confirmation Checkbox
 * 10.0 - Actions & Buttons
 * 11.0 - Date of Birth Fields
 * 12.0 - Responsive
 * 13.0 - Test Mode Reset Button
 */

/* ==========================================================================
   1.0 - Scroll Lock & Visibility
   ========================================================================== */

/* Locked by default on gated pages (body.checkpost-gate-active is added by
   Checkpost_Frontend::add_body_class() — see class-checkpost-frontend.php — whenever
   Checkpost_Scope::should_show_gate() is true) until JS proves the visitor is
   already verified (see the .checkpost-verified override below). Scoped to
   that class, rather than a bare `body` selector, because this
   stylesheet is also loaded on the admin settings page for the live
   preview and must never touch wp-admin's own scrolling. */
body.checkpost-gate-active {
	overflow: hidden;
}

html.checkpost-verified body.checkpost-gate-active {
	overflow: auto;
}

/* `html.checkpost-verified .checkpost-overlay` already outranks the base `.checkpost-overlay`
   rule below on specificity alone (0,2,1 vs 0,1,0), so no !important is
   needed here. */
html.checkpost-verified .checkpost-overlay,
html.checkpost-verified .checkpost-bg-media-wrap {
	display: none;
}

/* ==========================================================================
   2.0 - Overlay
   ========================================================================== */

.checkpost-overlay {
	position: fixed;
	inset: 0;
	z-index: var( --checkpost-z-index, 999999 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	font-family: var( --checkpost-font-family, sans-serif );
}

/* The dialog takes focus from code when it appears (see showGate() in
   checkpost-frontend.js) so screen readers start at its heading. It isn't a
   control a visitor can tab to, so it gets no focus ring; the buttons
   and fields inside keep theirs. */
.checkpost-overlay:focus {
	outline: none;
}

/* No dimming at all — the overlay box itself still exists (fixed,
   full-viewport) to block interaction with the page and center the
   modal, it just paints nothing behind it. A background image, if
   configured, shows through at full strength since there's no scrim. */
.checkpost-overlay--none {
	background-color: transparent;
}

.checkpost-overlay--solid {
	background-color: var( --checkpost-overlay-color, #000 );
}

.checkpost-overlay--tint {
	background-color: rgba( var( --checkpost-overlay-rgb, 0, 0, 0 ), var( --checkpost-overlay-opacity, 0.85 ) );
}

.checkpost-overlay--blur {
	background-color: rgba( var( --checkpost-overlay-rgb, 0, 0, 0 ), calc( var( --checkpost-overlay-opacity, 0.85 ) * 0.55 ) );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

/* ==========================================================================
   3.0 - Popup Position
   ========================================================================== */

/* Center (default) needs no override — it's the flex-centering already
   on .checkpost-overlay above. */

/* Top Bar / Bottom Bar: #checkpost-overlay still covers and blocks the entire
   viewport — that's the gate's whole job, in every position — but the
   visible card docks flush to the top or bottom edge as a full-width bar
   instead of floating in the middle. Laid out as a flex row across
   .checkpost-modal's existing children (no extra markup needed), which wraps
   down to a stacked layout on narrow screens for free — the same
   mechanism both bars share, so their rules stay grouped together. */
.checkpost-overlay--position-top,
.checkpost-overlay--position-bottom {
	padding: 0;
}

.checkpost-overlay--position-top {
	align-items: flex-start;
}

.checkpost-overlay--position-bottom {
	align-items: flex-end;
}

.checkpost-overlay--position-top .checkpost-modal,
.checkpost-overlay--position-bottom .checkpost-modal {
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 28px;
	text-align: left;
}

.checkpost-overlay--position-top .checkpost-heading,
.checkpost-overlay--position-top .checkpost-body,
.checkpost-overlay--position-bottom .checkpost-heading,
.checkpost-overlay--position-bottom .checkpost-body {
	margin: 0;
}

.checkpost-overlay--position-top .checkpost-logo,
.checkpost-overlay--position-bottom .checkpost-logo {
	margin: 0;
	max-height: calc( var( --checkpost-logo-size, 60px ) * 0.6 );
}

/* Full Page: the card becomes the entire viewport — a splash-style
   takeover instead of a floating card. Popup Width has no effect here
   (always full width); Popup Padding still applies as breathing room
   around the centered content. */
.checkpost-overlay--position-fullpage {
	padding: 0;
}

.checkpost-overlay--position-fullpage .checkpost-modal {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   4.0 - Entrance Animation
   ========================================================================== */

@keyframes checkpost-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Direction-specific slide-ins: which one plays is picked by matching
   #checkpost-overlay's Popup Position class alongside .checkpost-overlay--animation-slide
   below — Top Bar/Center/Full Page fall through to the "from above"
   default, and Bottom Bar overrides to "from below". */
@keyframes checkpost-slide-in-top {
	from {
		opacity: 0;
		transform: translateY( -24px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@keyframes checkpost-slide-in-bottom {
	from {
		opacity: 0;
		transform: translateY( 24px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@keyframes checkpost-zoom-in {
	from {
		opacity: 0;
		transform: scale( 0.9 );
	}

	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

/* Plays once on page load for visitors who actually see the gate. Verified
   visitors never see it: the no-flash script (class-checkpost-frontend.php)
   flags <html class="checkpost-verified"> before the page paints, which sets
   #checkpost-overlay to display:none — an element that's never rendered never
   runs its animation, so nothing plays or wastes a cycle for them. */
.checkpost-overlay--animation-fade {
	animation: checkpost-fade-in 0.4s ease both;
}

/* Slide and Zoom both fade the dimmed background in quickly while the
   card itself gets a beat of its own, more prominent motion — the
   overlay's own fade keeps the two in sync instead of the card arriving
   into an empty page. */
.checkpost-overlay--animation-slide,
.checkpost-overlay--animation-zoom {
	animation: checkpost-fade-in 0.3s ease both;
}

/* Default slide direction (Center, Full Page, Top Bar): from above. */
.checkpost-overlay--animation-slide .checkpost-modal {
	animation: checkpost-slide-in-top 0.4s ease both;
}

/* Bottom Bar: from below. */
.checkpost-overlay--position-bottom.checkpost-overlay--animation-slide .checkpost-modal {
	animation: checkpost-slide-in-bottom 0.4s ease both;
}

/* Zoom: same scale+fade regardless of position. Not offered for Top Bar/
   Bottom Bar at all (see tab-layout.php and checkpost-admin.js) — a full-width
   bar "zooming in" from 90% reads as visually broken, so this rule is
   only ever reached for Center/Full Page. */
.checkpost-overlay--animation-zoom .checkpost-modal {
	animation: checkpost-zoom-in 0.35s ease both;
}

@media ( prefers-reduced-motion: reduce ) {
	.checkpost-overlay--animation-fade,
	.checkpost-overlay--animation-slide,
	.checkpost-overlay--animation-slide .checkpost-modal,
	.checkpost-overlay--animation-zoom,
	.checkpost-overlay--animation-zoom .checkpost-modal {
		animation: none;
	}
}

/* ==========================================================================
   5.0 - Background Image
   ========================================================================== */

/* A sibling positioned *behind* #checkpost-overlay, not a child of it — see the
   long comment on Checkpost_Frontend::render_background_media() for why an
   opaque background image painted directly on the overlay itself
   would hide its own tint/blur color. One z-index below the overlay so
   that color composites over the media exactly like it would over the
   plain page. */
.checkpost-bg-media-wrap {
	position: fixed;
	inset: 0;
	z-index: calc( var( --checkpost-z-index, 999999 ) - 1 );
	overflow: hidden;
	background-color: #000;
}

.checkpost-bg-media-el {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate( -50%, -50% );
	pointer-events: none;
	border: 0;
}

/* ==========================================================================
   6.0 - Modal Card
   ========================================================================== */

.checkpost-modal {
	color: var( --checkpost-text-color, #333 );
	width: 100%;
	max-width: var( --checkpost-modal-max-width, 460px );
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	border-radius: 10px;
	padding: var( --checkpost-modal-padding-y, 36px ) var( --checkpost-modal-padding-x, 30px );
	text-align: center;
}

.checkpost-modal--solid {
	background: var( --checkpost-modal-bg, #fff );
	box-shadow: 0 25px 70px rgba( 0, 0, 0, 0.35 );
}

/* No card at all — heading/body/button colors are still whatever the
   admin set (Style tab pre-fills them to white as a starting point when
   this is picked, purely as a convenience default; nothing forces or
   locks them). Relies entirely on Overlay Style / a background image
   for contrast, since there's no card surface underneath. */
.checkpost-modal--transparent {
	background: transparent;
	box-shadow: none;
}

/* ==========================================================================
   7.0 - Logo
   ========================================================================== */

.checkpost-logo {
	display: block;
	max-height: var( --checkpost-logo-size, 60px );
	max-width: 80%;
	margin: 0 auto 18px;
}

/* .checkpost-logo/.checkpost-actions each set their own `display`, which would
   otherwise outrank the browser's default `[hidden]{display:none}` UA
   rule — the admin live preview toggles both via the hidden attribute
   (see assets/js/checkpost-admin.js), so this keeps that working correctly. */
.checkpost-logo[hidden] {
	display: none;
}

/* ==========================================================================
   8.0 - Typography
   ========================================================================== */

.checkpost-heading {
	color: var( --checkpost-heading-color, #1a1a1a );
	margin: 0 0 12px;
	font-size: var( --checkpost-font-size-heading, 24px );
	/* Fixed, not tied to the Font Weight setting (which only covers body
	   text, buttons, and the DOB fields) — the heading stays visually
	   distinct from body copy regardless, the way most typographic
	   systems keep headings bold. Explicit rather than relying on the
	   browser's default <h2> bold, which a theme's own heading reset
	   could otherwise override — the same class of conflict buttons and
	   selects already needed hardening against elsewhere in this file. */
	font-weight: 700;
	line-height: 1.3;
}

.checkpost-body {
	color: var( --checkpost-text-color, #4a4a4a );
	margin: 0 0 26px;
	font-size: var( --checkpost-font-size-body, 15px );
	font-weight: var( --checkpost-font-weight, 400 );
	line-height: 1.6;
}

.checkpost-body p {
	margin: 0 0 10px;
}

.checkpost-body p:last-child {
	margin-bottom: 0;
}

.checkpost-underage-message {
	color: var( --checkpost-underage-text-color, #c0392b );
	margin: 0 0 18px;
	font-size: var( --checkpost-font-size-body, 14px );
	font-weight: var( --checkpost-font-weight, 400 );
}

/* Empty until verification fails. It stays rendered rather than hidden,
   because a live region has to be in the page before text is inserted
   for screen readers to announce it, so it just takes no space. */
.checkpost-underage-message:empty {
	margin: 0;
}

/* ==========================================================================
   9.0 - Confirmation Checkbox
   ========================================================================== */

/* width:100% matters specifically in DOB mode, where this is a flex-item
   sibling of .checkpost-dob-row/.checkpost-btn-dob-submit inside .checkpost-actions--dob
   (a flex-wrap row) — without it, the checkbox could sit beside the
   submit button instead of stacking above it on its own line. Harmless
   in Buttons mode, where it's a plain block-level sibling of .checkpost-actions
   and already full-width by default. */
.checkpost-confirm-checkbox {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-bottom: 16px;
	text-align: left;
	cursor: pointer;
	color: var( --checkpost-text-color, #4a4a4a );
	font-size: var( --checkpost-font-size-body, 15px );
	font-weight: var( --checkpost-font-weight, 400 );
	line-height: 1.4;
}

.checkpost-confirm-checkbox[hidden] {
	display: none;
}

/* Simple Yes/No mode only: the checkbox is a direct child of .checkpost-modal
   (a sibling of .checkpost-body), so its unset margin-top collapses with
   .checkpost-body's 26px margin-bottom — landing well above the 16px this row
   already keeps to the buttons below it. Pull it up so the gap above
   matches the gap below. Excluded from Top/Bottom Bar, where .checkpost-modal
   is a flex row (gap-based spacing, margins never collapse there) and a
   negative margin would just shift the row instead of tightening a
   collapsed gap; Date of Birth mode is unaffected since that instance
   nests inside .checkpost-actions--dob, not directly inside .checkpost-modal. */
.checkpost-modal > .checkpost-confirm-checkbox {
	margin-top: -10px;
}

.checkpost-overlay--position-top .checkpost-modal > .checkpost-confirm-checkbox,
.checkpost-overlay--position-bottom .checkpost-modal > .checkpost-confirm-checkbox {
	margin-top: 0;
}

/* Reset + accent-color at the same deliberately over-specific selector
   the buttons/selects already use — see the long comment on .checkpost-overlay
   .checkpost-modal .checkpost-btn below for why <input> types need this to survive
   theme CSS. accent-color recolors the native checkmark/box to match the
   popup's own button color without needing a fully custom control. */
.checkpost-overlay .checkpost-modal .checkpost-confirm-checkbox input[type='checkbox'] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var( --checkpost-button-bg, #1a1a1a );
	cursor: pointer;
}

/* ==========================================================================
   10.0 - Actions & Buttons
   ========================================================================== */

.checkpost-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.checkpost-actions[hidden] {
	display: none;
}

/* Layout only — deliberately left at low specificity (0,1,0) so the admin
   live preview can still shrink padding/font-size via its own
   `.checkpost-preview-overlay .checkpost-btn` rule (0,2,0) in checkpost-admin.css. */
.checkpost-btn {
	border-radius: 4px;
	padding: 12px 30px;
	font-family: inherit;
	font-size: var( --checkpost-font-size-button, 15px );
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Colors are split into their own deliberately over-specific (0,3,0)
   rule because <button> is the single most aggressively styled element
   in WordPress themes. A plain `.checkpost-btn` (0,1,0) loses the cascade to
   commonplace theme selectors like `.site button`, `.entry-content
   button` (0,1,1) or `#page button` (1,0,1), which is why the admin's
   Button colors appeared to save but never showed up on the live site.
   Heading/body colors were unaffected because themes rarely target
   h2/div that aggressively.
   `background-image: none` matters just as much as the specificity: many
   themes paint buttons with a gradient, and a background-image always
   paints on top of an element's own background-color — the same trap
   that once hid the overlay tint behind a background image.
   Everything reset here is theme chrome (gradients, bevels, text
   shadows, borders) that would otherwise leak into the gate's buttons
   and fight the admin's chosen colors. */
.checkpost-overlay .checkpost-modal .checkpost-btn {
	background-color: var( --checkpost-button-bg, #1a1a1a );
	background-image: none;
	color: var( --checkpost-button-text, #fff );
	border: none;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	/* Same over-specificity reasoning as everything else here: many
	   themes set their own button font-weight (bolded CTAs are common),
	   which a plain low-specificity rule would lose to. */
	font-weight: var( --checkpost-font-weight, 400 );
}

.checkpost-overlay .checkpost-modal .checkpost-btn:hover,
.checkpost-overlay .checkpost-modal .checkpost-btn:focus,
.checkpost-overlay .checkpost-modal .checkpost-btn:active {
	background-color: var( --checkpost-button-hover-bg, #3a3a3a );
	background-image: none;
	color: var( --checkpost-button-hover-text, var( --checkpost-button-text, #fff ) );
}

/* Confirmation-checkbox gating (see checkpost-frontend.js): the confirm/submit
   button starts disabled and stays that way until the checkbox is
   ticked. Same specificity as the :hover/:focus/:active rule above and
   declared after it, so a disabled-but-hovered button still reads as
   disabled rather than flashing its hover color. */
.checkpost-overlay .checkpost-modal .checkpost-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Stripping the theme's button chrome above can take its focus ring with
   it, so restore an explicit keyboard-focus indicator. currentColor keeps
   it visible against whichever button colors the admin picked. */
.checkpost-overlay .checkpost-modal .checkpost-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   11.0 - Date of Birth Fields
   ========================================================================== */

.checkpost-dob-row {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: nowrap;
	margin-bottom: 16px;
}

.checkpost-dob-select {
	flex: 1 1 0;
	min-width: 0;
	font-family: inherit;
	font-size: var( --checkpost-font-size-control, 14px );
}

/* Same over-specific treatment as the buttons above, and for the same
   reason: <select> is heavily themed, and a theme's own select styling
   (dark backgrounds especially) can otherwise render these dropdowns
   unreadable inside the gate. */
.checkpost-overlay .checkpost-modal .checkpost-dob-select {
	padding: 9px 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	background-image: none;
	color: #1a1a1a;
	box-shadow: none;
	text-shadow: none;
	height: auto;
	font-weight: var( --checkpost-font-weight, 400 );
}

/* Manual-entry date-of-birth mode (render_dob_text_form()) — same
   .checkpost-dob-row flex layout and box treatment as .checkpost-dob-select above,
   just for <input> instead of <select>. Unlike .checkpost-dob-select (which
   flex-grows to fill the row, since a dropdown needs room to show
   whichever full month/day/year label is selected), these are fixed-
   width and sized to just fit a couple of typed digits — flex-growing
   them to a third of the row each would look oversized for 2-4
   characters. Year gets a bit more room for its 4 digits. text-
   align:center keeps typed digits centered under the DD/MM/YYYY
   placeholder like a real date field, and the reset below is the same
   "themes heavily style form controls" fix already applied to
   .checkpost-dob-select and .checkpost-btn — critically, the fixed width/flex-basis
   have to live in that same over-specific block too, not just the
   colors: a theme's own `input[type="text"]` rule (very commonly
   width:100%) can otherwise beat a plain .checkpost-dob-input selector, and
   with .checkpost-dob-row's flex-wrap:nowrap that stretched input forces the
   whole row to overflow past the popup's edge instead of just looking
   too wide. */
.checkpost-dob-input {
	font-family: inherit;
	font-size: var( --checkpost-font-size-control, 14px );
	text-align: center;
}

.checkpost-overlay .checkpost-modal .checkpost-dob-input {
	/* flex-basis is axis-dependent — in the <480px column-direction
	   layout below, a pixel flex-basis sets *height* (the main axis in
	   column mode), not width, which produced tall square boxes on
	   mobile instead of compact fields. flex-basis:auto (via "auto" in
	   the shorthand) sidesteps that entirely by deferring to the width
	   property below regardless of which axis is "main" at the time. */
	flex: 0 0 auto;
	width: 52px;
	padding: 9px 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	background-image: none;
	color: #1a1a1a;
	box-shadow: none;
	text-shadow: none;
	height: auto;
	font-weight: var( --checkpost-font-weight, 400 );
}

.checkpost-overlay .checkpost-modal .checkpost-dob-input[data-checkpost-dob='year'] {
	width: 68px;
}

.checkpost-dob-error {
	color: #c0392b;
	font-size: var( --checkpost-font-size-control, 13px );
	margin: 0 0 14px;
}

.checkpost-actions--dob .checkpost-btn-dob-submit {
	width: 100%;
	max-width: 240px;
}

/* ==========================================================================
   12.0 - Responsive
   ========================================================================== */

@media ( max-width: 480px ) {
	.checkpost-modal {
		padding: var( --checkpost-modal-padding-mobile-y, 26px ) var( --checkpost-modal-padding-mobile-x, 20px );
	}

	.checkpost-dob-row {
		flex-direction: column;
		align-items: stretch;
	}

	.checkpost-dob-select,
	.checkpost-dob-input {
		min-width: 0;
	}
}

/* ==========================================================================
   13.0 - Test Mode Reset Button
   ========================================================================== */

/* Admin-only dev tool (see render_test_mode_reset_button() in
   class-checkpost-frontend.php) — deliberately hardcoded to a wp-admin-style
   palette instead of the --checkpost-* custom properties every other rule in
   this file uses, since this should look like a plugin utility, not part
   of the age gate's own themeable design. Positioned outside #checkpost-overlay
   and never hidden by the `html.checkpost-verified .checkpost-overlay` rule, so it
   stays visible after verifying too — an admin needs to see it precisely
   when they want to re-test. */
.checkpost-test-mode-reset {
	position: fixed;
	z-index: calc( var( --checkpost-z-index, 999999 ) + 1 );
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	background: #1d2327;
	color: #fff;
	border: none;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.3 );
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.checkpost-test-mode-reset:hover,
.checkpost-test-mode-reset:focus {
	background: #2271b1;
	outline: none;
}

.checkpost-test-mode-reset__icon {
	font-size: 14px;
	line-height: 1;
}

@media ( max-width: 480px ) {
	.checkpost-test-mode-reset {
		left: 8px;
		bottom: 8px;
	}
}