/**
 * OpenLabs — Pre-checkout gate (`.checkout-gate`).
 *
 * A standalone interstitial that renders directly inside <main id="site-main">
 * with NO theme container wrapping it, so this surface owns its own vertical
 * padding and centered column. Two steps: confirm researcher status, then pick
 * a payment method, before continuing to WooCommerce checkout.
 *
 * Design tokens (--ink, --violet, --grad, --radius-lg, etc.) are defined
 * globally in :root via app.css; everything here is scoped under .checkout-gate
 * so nothing leaks onto the rest of the site. No !important.
 */

/* ============================================================ *
 *  Surface shell — own padding + centered column
 * ============================================================ */
.checkout-gate {
	padding: 3.5rem 1.25rem 4.5rem;
	width: 100%;
}

/* Fill the whole content area (between header and footer) with the mist surface
   on the gate page only. This stylesheet loads only on the gate, and the body
   gets `.openlabs-gate-page` from the plugin, so it stays scoped to this page.
   Flexing the body makes #site-main grow to fill the viewport so the mist
   reaches the footer even when the content is short. */
body.openlabs-gate-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body.openlabs-gate-page #site-main {
	flex: 1 0 auto;
	background: var(--mist);
}

/* Centered reading column — narrow so the two steps stay focused. */
.checkout-gate__inner {
	max-width: 620px;
	margin-inline: auto;
}

/* ============================================================ *
 *  Header
 * ============================================================ */
.checkout-gate__head {
	text-align: center;
	margin-bottom: 2rem;
}

.checkout-gate__title {
	margin: 0;
	font-size: clamp(1.7rem, 4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.checkout-gate__sub {
	margin: 0.65rem auto 0;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--muted);
}

/* ============================================================ *
 *  Inline status banners — error / empty cart
 * ============================================================ */
/* Error: red-tinted banner with a left accent bar. */
.checkout-gate__error {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(210, 59, 111, 0.25);
	border-left: 4px solid #d23b6f;
	border-radius: var(--radius);
	background: rgba(210, 59, 111, 0.07);
	color: #d23b6f;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.5;
}

/* Empty cart: quiet, centered, with a violet link. */
.checkout-gate__empty {
	margin: 0 0 1.5rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.98rem;
	line-height: 1.55;
}
.checkout-gate__empty a {
	color: var(--violet-600);
	font-weight: 600;
	text-decoration: none;
}
.checkout-gate__empty a:hover {
	text-decoration: underline;
}

/* ============================================================ *
 *  Form — stacked steps + continue button
 * ============================================================ */
.checkout-gate__form {
	/* opt out of any global <form> max-width clamp; this column is the cap */
	max-width: none;
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* ============================================================ *
 *  Step card
 * ============================================================ */
.gate-step {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 1.5rem 1.6rem;
}

.gate-step__title {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.1rem;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

/* Circular violet badge holding the step number. */
.gate-step__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	background: var(--grad);
	box-shadow: var(--shadow-violet);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}

/* ============================================================ *
 *  Step 1 — researcher consent
 * ============================================================ */
.gate-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.95rem 1rem;
	border: 1.5px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--paper);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gate-consent:hover {
	border-color: var(--violet-300);
}

/* Native checkbox — branded accent, comfortably sized, nudged onto the text. */
.gate-consent input[type='checkbox'] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.1rem 0 0;
	accent-color: var(--violet);
	cursor: pointer;
}

.gate-consent__text {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--ink-2);
}

/* Ticked: subtle violet tint + border to signal the step is satisfied. */
.gate-consent.is-checked {
	border-color: var(--violet);
	background: var(--violet-100);
}

/* Keyboard a11y — visible ring around the row when the box is focused. */
.gate-consent:focus-within {
	border-color: var(--violet);
	box-shadow: 0 0 0 3px var(--violet-100);
}

/* ============================================================ *
 *  Step 2 — payment method picker
 * ============================================================ */
.gate-methods {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Selectable card. The native radio is visually hidden but kept accessible. */
.gate-method {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.1rem;
	border: 1.5px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--paper);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease;
}
.gate-method:hover {
	border-color: var(--violet-300);
}

/* Hide the real radio without removing it from the a11y tree. */
.gate-method input[type='radio'] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.gate-method__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1 1 auto;
	min-width: 0;
}
.gate-method__name {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}
.gate-method__desc {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--muted);
}

/* Custom radio indicator — empty ring by default. */
.gate-method__check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid var(--line-2);
	border-radius: 999px;
	background: var(--paper);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Selected: violet border + faint tint, filled violet dot in the indicator. */
.gate-method.is-selected {
	border-color: var(--violet);
	background: var(--violet-100);
}
.gate-method.is-selected .gate-method__check {
	border-color: var(--violet);
	background: var(--violet);
	/* inner white gap creates the classic filled-radio dot */
	box-shadow: inset 0 0 0 4px var(--paper);
}

/* Keyboard a11y — visible ring when the hidden radio is focused. */
.gate-method:focus-within {
	border-color: var(--violet);
	box-shadow: 0 0 0 3px var(--violet-100);
}

/* ============================================================ *
 *  Continue button + helper note
 * ============================================================ */
.gate-continue {
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.95rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--grad);
	box-shadow: var(--shadow-violet);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease,
		background-color 0.15s ease;
}
.gate-continue:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 16px 36px -10px var(--violet-glow);
}
.gate-continue:focus-visible {
	outline: 2px solid var(--violet);
	outline-offset: 2px;
}

/* Inactive until both steps are complete. */
.gate-continue:disabled {
	background: var(--mist-2);
	box-shadow: none;
	color: var(--muted-2);
	cursor: not-allowed;
	transform: none;
}

.checkout-gate__note {
	margin: 0.85rem 0 0;
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--muted-2);
}

/* ============================================================ *
 *  Responsive — tighten padding on small screens, stay single-column
 * ============================================================ */
@media (max-width: 36em) {
	.checkout-gate {
		padding: 2.25rem 1rem 3rem;
	}
	.gate-step {
		padding: 1.25rem 1.2rem;
	}
	.checkout-gate__head {
		margin-bottom: 1.5rem;
	}
}

/* ============================================================ *
 *  "Why only crypto or Zelle?" disclosure (step 2)
 * ============================================================ */
.gate-why-wrap {
	position: relative;
	display: inline-block; /* shrink to the button width so hover only fires on the button, not the full-width row */
	margin: 0 0 1.15rem;
}
.gate-why {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	border: 1.5px solid var(--violet-300);
	border-radius: 999px;
	background: var(--violet-100);
	color: var(--violet-600);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.gate-why:hover { border-color: var(--violet); }
.gate-why:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.gate-why__icon { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.gate-why[aria-expanded="true"] {
	background: var(--violet);
	border-color: var(--violet);
	color: #fff;
}

.gate-why__pop {
	/* Animated reveal: fades + eases down "from the top" (sits just under the
	   button). Uses opacity/visibility/transform — not display — so it can
	   transition; visibility flips only after the fade so the closed popover
	   can't be focused, hovered, or clicked. */
	transform-origin: top left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0s linear 0.16s;
	position: absolute;
	top: calc(100% + 0.55rem);
	left: 0;
	z-index: 30;
	width: min(380px, 86vw);
	padding: 1.05rem 1.15rem;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: 0 18px 44px -14px rgba(17, 21, 42, 0.28);
	text-align: left;
}
.gate-why-wrap.is-open .gate-why__pop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
/* Pointer hover reveal only — deliberately NOT :focus-within. The button keeps
   focus after a click, so a focus-within trigger would instantly re-open the
   popover that the same click just closed (and would block tap-to-toggle on
   touch). Click / Enter / Space drive .is-open; Esc + outside-click close it. */
@media (hover: hover) {
	.gate-why-wrap:hover .gate-why__pop {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition: opacity 0.16s ease-out, transform 0.16s ease-out;
	}
}
.gate-why__pop::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 1.6rem;
	width: 12px;
	height: 12px;
	background: var(--paper);
	border-top: 1px solid var(--line-2);
	border-left: 1px solid var(--line-2);
	transform: rotate(45deg);
}
.gate-why__pop p {
	margin: 0 0 0.7rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ink-2);
}
.gate-why__pop p:last-child { margin-bottom: 0; }
.gate-why__pop strong { color: var(--ink); font-weight: 600; }

/* Mobile: widen the popover to span most of the screen (minus a small buffer)
   and nudge it left so it roughly tracks the step card rather than hanging off
   the narrow pill. The fade + slide reads fine on touch, so it stays on. */
@media (max-width: 36em) {
	.gate-why__pop {
		/* Align to the step-card's content box: pull left by the card's side
		   padding (so the popover's left edge meets the card edge) and size to
		   the viewport minus the card's symmetric side gaps. Near-full width on
		   any phone, and it can't run off the right edge. */
		width: calc(100vw - 4.75rem);
		margin-left: -1.2rem;
	}
}

/* Respect reduced-motion: keep a quick fade, drop the vertical movement. */
@media (prefers-reduced-motion: reduce) {
	.gate-why__pop {
		transition: opacity 0.12s linear, visibility 0s linear 0.12s;
		transform: none;
	}
	.gate-why-wrap.is-open .gate-why__pop,
	.gate-why-wrap:hover .gate-why__pop,
	.gate-why-wrap:focus-within .gate-why__pop {
		transform: none;
	}
}