/**
 * Front-end styles — Medcare eligibility (split-screen).
 *
 * Reproduces the "Artboard 1" desktop design: left visual, right blue
 * panel with the form. Colors sampled from the mockup.
 */

.mce-eligibility-page {
	--mce-blue: #2980fb;
	--mce-blue-dark: #1f6ae0;
	--mce-green: #57c98a; /* Medcare green (same brand green as the eligible "Call" CTA default). */
	--mce-field-bg: #f5f5f5;
	--mce-field-text: #1d2330;
	--mce-field-placeholder: #9aa0aa;
	--mce-white: #ffffff;
	--mce-radius: 10px;
	--mce-radius-lg: 16px;

	margin: 0;
	background: var(--mce-blue);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--mce-field-text);
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
 * Split layout
 * ------------------------------------------------------------------- */
.mce-split {
	display: grid;
	/* Fixed proportions — identical across form / eligible / not-eligible.
	 * Switching views only changes the RIGHT panel's content, never the
	 * column widths. */
	grid-template-columns: 35% 65%;
	min-height: 100vh;
}

/* ---- Left visual: white, with the Medcare logo centered ---- */
.mce-visual {
	position: relative;
	z-index: 1; /* Sit above the right panel so the shadow stays visible. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: #fff;
	overflow: hidden;
	/* Soft, discreet drop shadow so the white panel detaches from the right. */
	box-shadow: 6px 0 24px rgba( 16, 24, 40, 0.10 );
}

/* ---- Right panel ---- */
.mce-panel {
	background: var(--mce-blue);
	display: flex;
	flex-direction: column;
	padding: 22px clamp( 24px, 5vw, 72px ) 40px;
	color: #fff;
	position: relative;
	z-index: 2; /* Above the aside (z-index:1) so the left shadow falls on it. */
	-webkit-box-shadow: -3px 1px 10px 0px rgba( 0, 0, 0, 0.53 );
	        box-shadow: -3px 1px 10px 0px rgba( 0, 0, 0, 0.53 );
}

.mce-panel__topbar {
	display: flex;
	justify-content: flex-end;
}

.mce-lang {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: #000;
	border: 0;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.mce-lang:hover,
.mce-lang:focus,
.mce-lang:active {
	background: rgba( 255, 255, 255, 0.85 );
	color: #000;
}

/* Language dropdown */
.mce-lang-switch {
	position: relative;
}

.mce-lang__menu {
	position: absolute;
	top: calc( 100% + 6px );
	right: 0;
	z-index: 50;
	min-width: 140px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.22 );
}

.mce-lang__menu[hidden] {
	display: none;
}

.mce-lang__option {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 7px;
	padding: 9px 12px;
	font: inherit;
	font-size: 0.85rem;
	color: #1d2330;
	cursor: pointer;
}

.mce-lang__option:hover,
.mce-lang__option:focus {
	background: #f0f3f8;
}

.mce-panel__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Holds the 580px form fields; caps and centers all panel content.
	 * max-width (not width) → it shrinks with the panel on smaller screens. */
	max-width: 580px;
	width: 100%;
	margin: 0 auto;
}

/* ---- Logo ---- */
.mce-panel__logo {
	display: flex;
	justify-content: center;
	margin-bottom: 26px;
}

.mce-logo {
	display: inline-flex;
	align-items: center;
}

.mce-logo__img {
	display: block;
	height: 30px;
	width: auto;
}

.mce-logo--light {
	background: #fff;
	padding: 10px 22px;
	border-radius: 15px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 );
}

/* ---------------------------------------------------------------------
 * Form
 * ------------------------------------------------------------------- */
/* Title above the form: "Let's check your Eligibility" (2nd word bold). */
.mce-form__title {
	margin: 0 0 26px;
	text-align: center;
	font-size: clamp( 1.4rem, 2.6vw, 1.9rem );
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.mce-form__title strong {
	font-weight: 800;
}

.mce-form__intro {
	margin: 0 0 18px;
	font-size: 0.92rem;
	opacity: 0.9;
}

.mce-field {
	/* 580px on desktop, always centered, shrinks to fit on smaller screens. */
	width: 100%;
	max-width: 580px;
	margin: 0 auto 14px;
}

.mce-field label {
	display: block;
	font-size: 0.82rem;
	margin-bottom: 6px;
	color: rgba( 255, 255, 255, 0.92 );
}

.mce-field input,
.mce-field textarea,
.mce-field select {
	width: 100%;
	box-sizing: border-box;
	background: var(--mce-field-bg);
	border: 1px solid transparent;
	border-radius: var(--mce-radius);
	padding: 12px 14px;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--mce-field-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mce-field textarea {
	min-height: 96px;
	resize: vertical;
}

.mce-field input::placeholder,
.mce-field textarea::placeholder {
	color: var(--mce-field-placeholder);
}

.mce-field input:focus,
.mce-field textarea:focus,
.mce-field select:focus {
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.35 );
}

.mce-field input.mce-invalid,
.mce-field textarea.mce-invalid,
.mce-field select.mce-invalid {
	border-color: #ffd1d1;
	box-shadow: 0 0 0 3px rgba( 255, 120, 120, 0.4 );
}

/* Consent */
.mce-consent {
	display: block;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.4;
	margin: 11px 0 29px;
	color: rgba( 255, 255, 255, 0.92 );
}

/* Custom checkbox: transparent background, white border, white check. */
.mce-consent input {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin: 0 6px 0 0;
	vertical-align: middle;
	display: inline-grid;
	place-content: center;
	background: rgba( 0, 0, 0, 0 );
	border: 2px solid #fff;
	border-radius: 4px;
	cursor: pointer;
}

.mce-consent input::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #fff;
	clip-path: polygon( 14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62% );
	transform: scale( 0 );
	transition: transform 0.12s ease;
}

.mce-consent input:checked::before {
	transform: scale( 1 );
}

.mce-consent input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.35 );
}

.mce-consent input.mce-invalid {
	border-color: #ffd1d1;
	box-shadow: 0 0 0 3px rgba( 255, 120, 120, 0.4 );
}

/* Links */
.mce-link {
	color: #fff;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.mce-link.is-disabled {
	opacity: 0.6;
	cursor: default;
	text-decoration: none;
}

/* Buttons */
.mce-btn {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--mce-radius);
	padding: 14px 18px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.mce-btn--white {
	background: #fff;
	color: var(--mce-blue);
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.15 );
}

.mce-btn--white:hover {
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.22 );
}

/* Submit button: narrower than the 580px field, and centered.
 * Scoped to [data-mce-submit] so the eligible-screen CTAs keep full width. */
.mce-btn[data-mce-submit] {
	width: 100%;
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}

.mce-btn:active {
	transform: translateY( 1px );
}

/* Loading state: shown after the button is clicked with valid fields, while
 * the eligibility check is in flight. The spinner uses currentColor, so it
 * always matches the button's (admin-configured) text color. */
.mce-btn.is-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: wait;
	pointer-events: none;
}

.mce-btn.is-loading::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: mce-spin 0.6s linear infinite;
}

/* Keep the admin colors crisp instead of the browser's default disabled grey. */
.mce-btn:disabled {
	opacity: 1;
}

@keyframes mce-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mce-btn.is-loading::before {
		animation-duration: 1.6s;
	}
}

.mce-form__error {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: rgba( 255, 255, 255, 0.95 );
	color: #b32020;
	border-radius: 8px;
	font-size: 0.86rem;
}

/* ---------------------------------------------------------------------
 * Fullscreen loading overlay — shown on every submission. Dimmed, slightly
 * blurred backdrop (opacity .4); the progress_steps messages displayed
 * large in the center and swapped with a soft fade (form.js).
 * ------------------------------------------------------------------- */
.mce-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 24px;
	background: rgba( 0, 24, 55, 0.4 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mce-loading-overlay.is-visible {
	opacity: 1;
}

.mce-loading-overlay[hidden] {
	display: none;
}

.mce-loading-overlay__spinner {
	width: 64px;
	height: 64px;
	border: 4px solid rgba( 255, 255, 255, 0.25 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: mce-overlay-spin 0.9s linear infinite;
}

@keyframes mce-overlay-spin {
	to { transform: rotate( 360deg ); }
}

/* The current step message — big, readable, swapped with a soft fade. */
.mce-loading-overlay__step {
	margin: 0;
	max-width: 560px;
	min-height: 2.8em; /* Two lines reserved: no layout jump between steps. */
	text-align: center;
	font-size: clamp( 1.15rem, 2.6vw, 1.6rem );
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.35 );
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.mce-loading-overlay__step.is-swapping {
	opacity: 0;
	transform: translateY( 6px );
}

/* One dot per step, filled as the process advances. */
.mce-loading-overlay__dots {
	display: flex;
	gap: 8px;
}

.mce-loading-overlay__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.35 );
	transition: background 0.3s ease, transform 0.3s ease;
}

.mce-loading-overlay__dot.is-active {
	background: #fff;
	transform: scale( 1.25 );
}

.mce-loading-overlay__hint {
	margin: 0;
	font-size: 0.9rem;
	color: rgba( 255, 255, 255, 0.8 );
}

@media ( prefers-reduced-motion: reduce ) {
	.mce-loading-overlay,
	.mce-loading-overlay__step,
	.mce-loading-overlay__dot {
		transition: none;
	}
	.mce-loading-overlay__spinner {
		animation-duration: 1.6s;
	}
}

/* ---------------------------------------------------------------------
 * "Almost there" panel — progressive disclosure (State + ZIP), shown only
 * when the first lookup needs more details. Soft fade/slide via .is-visible.
 * ------------------------------------------------------------------- */
.mce-form__more-info {
	margin: 16px 0 0;
	padding: 18px 20px 20px;
	background: rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: var(--mce-radius-lg);
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.mce-form__more-info.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.mce-form__more-info[hidden] {
	display: none;
}

.mce-form__more-info-title {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff;
}

.mce-form__more-info-text {
	margin: 0 0 14px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: rgba( 255, 255, 255, 0.92 );
}

/* Same look as the regular form fields; stacked, button last. */
.mce-form__more-info select,
.mce-form__more-info input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 12px;
	background: var(--mce-field-bg);
	border: 1px solid transparent;
	border-radius: var(--mce-radius);
	padding: 12px 14px;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--mce-field-text);
}

.mce-form__more-info select:focus,
.mce-form__more-info input:focus {
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.35 );
}

.mce-form__more-info-error {
	margin: -4px 0 12px;
	padding: 8px 12px;
	background: rgba( 255, 255, 255, 0.95 );
	color: #b32020;
	border-radius: 8px;
	font-size: 0.82rem;
}

/* "You will be eligible on {date}" — top of the not-eligible view, shown
   only for the not_yet_eligible status (filled by form.js). */
.mce-result__not-yet {
	margin: 0 0 18px;
	padding: 12px 16px;
	background: rgba( 255, 255, 255, 0.15 );
	border-radius: var(--mce-radius);
	font-size: 1rem;
	line-height: 1.5;
	color: #fff;
}

.mce-result__not-yet[hidden] {
	display: none;
}

.mce-panel__footer {
	margin-top: 18px;
	text-align: center;
	font-size: 0.82rem;
}

/* ---------------------------------------------------------------------
 * Result state
 * ------------------------------------------------------------------- */
.mce-result {
	text-align: center;
}

.mce-result__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba( 255, 255, 255, 0.2 );
	border-radius: 999px;
	padding: 10px 22px;
	font-size: 1.3rem;
	margin-bottom: 18px;
}

.mce-result__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	color: var(--mce-blue);
	font-weight: 700;
}

.mce-result__lead {
	font-size: 1rem;
	line-height: 1.5;
	opacity: 0.95;
}

/* ---------------------------------------------------------------------
 * Terms modal
 * ------------------------------------------------------------------- */
.mce-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.mce-modal[hidden] {
	display: none;
}

.mce-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 10, 20, 40, 0.45 );
}

.mce-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #2b2f36;
	width: 72%;
	max-width: 90%;
	max-height: 82vh;
	overflow: hidden; /* Keep every corner rounded; scrolling lives on the body. */
	border-radius: var(--mce-radius-lg);
	padding: 45px;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.3 );
}

.mce-modal__close {
	position: absolute;
	top: 14px;
	right: 18px;
	border: 0;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
}

.mce-modal__title {
	margin: 0 0 16px;
	font-size: 1.2rem;
	text-decoration: underline;
}

.mce-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	margin-top: 30px;
	margin-bottom: -30px;
	padding-right: 14px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #444b55;

	/* Thinner scrollbar (Firefox). */
	scrollbar-width: thin;
	scrollbar-color: rgba( 0, 0, 0, 0.25 ) transparent;
}

/* Thinner scrollbar (WebKit/Chromium). */
.mce-modal__body::-webkit-scrollbar {
	width: 6px;
}

.mce-modal__body::-webkit-scrollbar-thumb {
	background: rgba( 0, 0, 0, 0.25 );
	border-radius: 999px;
}

.mce-modal__body::-webkit-scrollbar-track {
	background: transparent;
}

/* ---------------------------------------------------------------------
 * Responsive — baseline mobile collapse (refined once the mobile
 * mockup is available).
 * ------------------------------------------------------------------- */
@media ( max-width: 860px ) {
	.mce-split {
		grid-template-columns: 1fr; /* Stack on small screens. */
		position: relative;
	}

	/* Move the language switch up into the white visual: the topbar is
	 * lifted out of the panel flow and pinned to the top of the stacked
	 * split, which lays it over the aside. The panel goes static so the
	 * absolute topbar anchors to .mce-split, not to the panel. */
	.mce-panel {
		position: static;
	}

	.mce-panel__topbar {
		position: absolute;
		top: 20px;
		right: 14px;
		z-index: 3; /* Above the aside (z-index: 1). */
	}

	/* On the white visual the white pill needs an outline to stay visible. */
	.mce-lang {
		border: 1px solid #e3e7ee;
		box-shadow: 0 2px 8px rgba( 16, 24, 40, 0.08 );
	}

	.mce-visual {
		min-height: 37vh;
		/* Static so the overlapping panel (later in the DOM) paints above it —
		 * the base position:relative + z-index:1 would keep it on top. */
		position: static;
		/* Stacked: cast the shadow downward instead of sideways. */
		box-shadow: 0 6px 20px rgba( 16, 24, 40, 0.10 );
	}

	.mce-panel {
		padding: 64px 22px 36px;
		/* Rounded top corners — the white aside shows through behind them,
		 * giving the panel a "sheet" look. */
		border-radius: 30px 30px 0 0;
		/* Overlap the visual so the rounded blue sheet bites into the white.
		 * Must be ≥ the 30px corner radius: any shallower and the corner
		 * cut-outs reveal the BODY's blue background (form.css line ~20)
		 * below the white aside. Both the aside and the panel are static
		 * here, so plain DOM order paints the (later) blue panel over the
		 * white visual — no z-index needed, and the topbar keeps anchoring
		 * to .mce-split. */
		margin-top: -30px;
		/* Stacked: upward shadow so the rounded sheet detaches from the
		 * white visual it overlaps. */
		-webkit-box-shadow: 0px -4px 10px 2px rgba( 0, 0, 0, 0.37 );
		   -moz-box-shadow: 0px -4px 10px 2px rgba( 0, 0, 0, 0.37 );
		        box-shadow: 0px -4px 10px 2px rgba( 0, 0, 0, 0.37 );
	}
}

/* ---------------------------------------------------------------------
 * Left visual: white brand panel (same on every view)
 * ------------------------------------------------------------------- */
.mce-visual__brand {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mce-logo--brand {
	display: inline-flex;
}

.mce-logo--brand .mce-logo__img {
	width: auto;
	height: auto;
	max-width: 240px;
}

/* ---------------------------------------------------------------------
 * Result views (eligible / not-eligible) — screen 2
 * ------------------------------------------------------------------- */
.mce-result__badge {
	/* Anchor for the absolutely-positioned icon below. */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: rgba( 255, 255, 255, 0.15 );
	border-radius: 14px;
	padding: 9px 20px 9px 10px;
	margin-bottom: 20px;
	font-size: 1.5rem;
}

.mce-result__badge--muted {
	padding: 10px 22px;
	font-size: 1.25rem;
}

/* Eligible badge icon (eligibleicon.png): pulled out of the flex flow and
   oversized on purpose — vertically centered, it overflows the badge top
   and bottom so it "pops out" of the pill. */
.mce-result__mark {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY( -50% );
	width: 96px;
	height: 96px;
	object-fit: contain;
}

.mce-result__badge-text {
	font-weight: 400;
	line-height: 1.1;
}

/* The icon is out of flow, so reserve its footprint manually: icon right
   edge = left 10px + 96px = 106px from the badge border, + 10px gap,
   - 10px badge left padding already there. */
.mce-result__mark + .mce-result__badge-text {
	margin-left: 106px;
}

.mce-result__badge-text strong {
	font-weight: 800;
}

.mce-result__hello {
	margin: 0 0 6px;
	font-size: 1rem;
	opacity: 0.95;
}

.mce-result__hello[hidden] {
	display: none;
}

.mce-result__lead {
	max-width: 430px;
	margin: 0 auto;
}

/* Force white text on the result paragraphs. Some themes set a global
 * `p { color: … }` that targets <p> directly and would otherwise beat the
 * white inherited from .mce-panel. */
.mce-result p {
	color: #fff;
}

/* Benefits card + two-column checklist */
.mce-benefits {
	max-width: 521px;
	margin: 22px auto;
	padding: 16px 20px;
	text-align: left;
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 16px;
}

.mce-benefits__title {
	margin: 0 0 10px;
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0.95;
}

.mce-benefits__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 22px;
}

.mce-benefits__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font-size: 0.82rem;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.14 );
}

/* The last two items (bottom row of the 2-column grid) have no divider. */
.mce-benefits__item:nth-last-child( -n + 2 ) {
	border-bottom: 0;
}

.mce-benefits__check {
	flex: 0 0 auto;
	color: #fff;
	font-weight: 700;
}

/* Result CTAs */
.mce-result__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 330px;
	margin: 22px auto 0;
}

.mce-btn--cta,
.mce-btn--callback {
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.15 );
	text-align: center;
	text-decoration: none;
}

.mce-btn--cta:hover,
.mce-btn--callback:hover {
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.22 );
}

.mce-result__hours {
	margin: 14px 0 0;
	text-align: center;
	font-size: 0.72rem;
	opacity: 0.85;
}

.mce-result__footer {
	margin-top: 16px;
	text-align: center;
}

.mce-link--prepare {
	display: inline-block;
	font-size: 0.82rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * Prepare view (full-width, white) — screen 4
 * ------------------------------------------------------------------- */
.mce-prepare {
	min-height: 100vh;
	background: #fff;
	color: #1d2330;
}

.mce-prepare[hidden] {
	display: none;
}

.mce-prepare__topbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px clamp( 20px, 5vw, 60px );
}

.mce-prepare__back {
	position: absolute;
	left: clamp( 20px, 5vw, 60px );
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.9rem;
	color: var(--mce-blue);
	cursor: pointer;
}

.mce-prepare__back-arrow {
	font-size: 1.1rem;
	line-height: 1;
}

.mce-prepare__logo .mce-logo__img {
	width: auto;
	height: auto;
	max-width: 170px;
}

.mce-prepare__inner {
	/* max-width caps it on large screens; it shrinks fluidly on smaller ones. */
	max-width: 1046px;
	margin: 0 auto;
	padding: 36px clamp( 20px, 5vw, 60px ) 60px;
}

/* Two centered columns: left = intro text, right = the cards. */
.mce-prepare__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 28px, 4vw, 56px );
	align-items: start;
}

.mce-prepare__title {
	margin: 0 0 14px;
	font-size: clamp( 1.6rem, 3vw, 2.3rem );
	font-weight: 500;
	color: #1d2330;
}

/* Rich-text content block below the title (wp_editor output). */
.mce-prepare__content {
	max-width: 660px;
	color: #5a626e;
	line-height: 1.6;
}

.mce-prepare__content p {
	margin: 0 0 12px;
}

.mce-prepare__content p:last-child {
	margin-bottom: 0;
}

.mce-prepare__content strong {
	color: #1d2330;
}

.mce-prepare__content a {
	color: var(--mce-blue);
}

.mce-prepare__content ul,
.mce-prepare__content ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

/* Cards stacked in a single column (right block). */
.mce-prepare__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Full-width card: icon column (left) + text column (right). */
.mce-prepare__card {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 14px;
	border-radius: 14px;
	color: #fff;
}

/* Neutralize the theme's generic button :hover styles on every screen of the
   eligibility page (scoped to the standalone template's body class, which
   also out-specifies the theme's bare `button:hover` rule). */
.mce-eligibility-page button:hover,
.mce-eligibility-page a.button:hover,
.mce-eligibility-page input[type="button"]:hover,
.mce-eligibility-page input[type="reset"]:hover,
.mce-eligibility-page input[type="submit"]:hover {
	border-color: none;
	background-color: none;
	color: #fff;
}

/* Alternate colors automatically, whatever the number of cards.
 * --mce-card-1 / --mce-card-2 are injected inline from the admin settings
 * (Prepare screen → Card background colors); they fall back to the brand
 * green / blue when not set. */
.mce-prepare__card:nth-child( odd ) {
	background: var(--mce-card-1, var(--mce-green));
}

.mce-prepare__card:nth-child( even ) {
	background: var(--mce-card-2, var(--mce-blue));
}

.mce-prepare__card-icon {
	flex: 0 0 auto; /* Sizes to the icon (size set inline from admin settings). */
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mce-prepare__card-icon i {
	display: block;
	line-height: 1;
}

.mce-prepare__card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.mce-prepare__card-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.mce-prepare__card-desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #fff;
	opacity: 0.9;
}

/* Prepare view: stack the two columns on narrower screens. */
@media ( max-width: 768px ) {
	.mce-prepare__grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 520px ) {
	.mce-benefits__list {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Full-height mode — desktop AND tall screens only.
 *
 * Fires ONLY above the mobile breakpoint (min-width: 861px) AND when the
 * viewport is at least 800px tall. It fits the split-screen views into a
 * single viewport with no scrolling, by compressing vertical SPACING only —
 * never the font sizes (clamp() floors keep text/fields readable for a
 * senior audience).
 *
 * On short screens (tablet landscape, small laptops) OR when a user zooms in
 * (which shrinks the CSS viewport height), this query simply stops matching
 * and the default, freely-scrollable layout takes over. Nothing is forced by
 * default, so scrolling and zoom are never blocked.
 *
 * The prepare view is intentionally NOT affected: while it is shown the split
 * is hidden, and it keeps its own tall, scrollable layout.
 * ------------------------------------------------------------------- */
@media ( min-width: 861px ) and ( min-height: 800px ) {
	.mce-split {
		height: 100vh;    /* Fallback for browsers without dvh support. */
		height: 100dvh;
		overflow: hidden; /* No page-level scrollbar in this mode. */
	}

	/* Safety net: if content ever exceeds the viewport (e.g. many admin-added
	 * fields), the panel scrolls internally instead of clipping. In the normal
	 * case everything fits, so no scrollbar is shown. */
	.mce-panel {
		overflow-y: auto;
		padding-top: clamp( 14px, 2vh, 22px );
		padding-bottom: clamp( 18px, 3vh, 40px );
	}

	/* Center vertically with auto margins — degrades gracefully (no clipped
	 * top if content overflows, unlike justify-content: center on a scroller). */
	.mce-panel__inner {
		flex: 0 1 auto;
		margin-top: auto;
		margin-bottom: auto;
	}

	/* Compress vertical spacing only; fonts keep their readable sizes. */
	.mce-form__title {
		margin-bottom: clamp( 14px, 2.4vh, 26px );
	}

	.mce-field {
		margin-bottom: clamp( 9px, 1.5vh, 14px );
	}

	.mce-field input,
	.mce-field select,
	.mce-field textarea {
		padding-top: clamp( 10px, 1.5vh, 12px );
		padding-bottom: clamp( 10px, 1.5vh, 12px );
	}

	.mce-consent {
		margin-top: clamp( 6px, 1.1vh, 11px );
		margin-bottom: clamp( 16px, 2.9vh, 29px );
	}

	.mce-btn {
		padding-top: clamp( 11px, 1.6vh, 14px );
		padding-bottom: clamp( 11px, 1.6vh, 14px );
	}

	.mce-panel__footer {
		margin-top: clamp( 10px, 1.6vh, 18px );
	}
}

/* ============ Honeypot (anti-bot decoy — never visible to humans) ============ */
/* Kept in the DOM and submittable, but removed from view, layout, the tab order
   and assistive tech. Real users leave it empty; naive bots fill it and the
   server returns a fake not-eligible result. */
.mce-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}