/**
 * On-Demand Forms — form card styling.
 *
 * Two things to know about this file.
 *
 * 1. Everything is scoped under `.on-demand-forms`. In the theme these rules
 *    were bare element selectors — `form`, `input`, `label`, `.btn` — which
 *    was fine in a stylesheet that owned the whole page and is not fine in a
 *    plugin that has to live inside somebody else's.
 *
 * 2. Colours are read as `var(--name, fallback)`. A theme that already defines
 *    these custom properties on :root gets the form in its own palette for
 *    free; a theme that does not gets the fallbacks, and the form still looks
 *    finished. Defining any of them is how you re-skin it.
 */

.on-demand-forms {
	text-align: left;
	position: relative;
	z-index: 5;
	max-width: 640px;
	/* No top margin: the surrounding page or theme decides the gap above the
	   form. A margin here fought whatever the page already had. */
	margin: 0 auto;
}

.on-demand-forms *,
.on-demand-forms *::before,
.on-demand-forms *::after {
	box-sizing: border-box;
}

.on-demand-forms .form-card {
	background: var(--white, #FFFFFF);
	border-radius: 20px;
	box-shadow: var(--shadow, 0 4px 20px rgba(20, 64, 58, .10));
	border: 1px solid var(--line, #D9D5CA);
	overflow: hidden;
}

.on-demand-forms .form-head {
	background: var(--sage-light, #E4EEE9);
	padding: 20px 24px;
	border-bottom: 1px solid var(--line, #D9D5CA);
	text-align: center;
}

.on-demand-forms .form-head h2 {
	font-size: 22px;
	margin: 0 0 4px;
	color: var(--evergreen, #010C54);
}

.on-demand-forms .form-head p {
	font-size: 16px;
	margin: 0;
	color: var(--ink-soft, #4A554F);
}

/* ---------------------------------------------------------------- progress */

.on-demand-forms .progress {
	padding: 20px 24px 4px;
}

.on-demand-forms .progress-bar {
	height: 10px;
	background: var(--sage-light, #E4EEE9);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 12px;
}

.on-demand-forms .progress-fill {
	height: 100%;
	width: 25%;
	background: linear-gradient(90deg, var(--sage, #3E7A66), var(--blue, #2E7DB2));
	border-radius: 999px;
	transition: width .4s ease;
}

.on-demand-forms .steps-labels {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--ink-soft, #4A554F);
}

.on-demand-forms .steps-labels span {
	flex: 1;
	text-align: center;
	font-weight: 700;
	line-height: 1.3;
}

.on-demand-forms .steps-labels span.active {
	color: var(--evergreen, #010C54);
}

.on-demand-forms .steps-labels span.done {
	color: var(--sage, #3E7A66);
}

/* ------------------------------------------------------------------- steps */

.on-demand-forms form {
	padding: 20px 24px 28px;
	margin: 0;
}

.on-demand-forms .step {
	display: none;
}

.on-demand-forms .step.active {
	display: block;
	animation: odwmfFadeUp .35s ease;
}

@keyframes odwmfFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.on-demand-forms .step.active,
	.on-demand-forms .thanks.show {
		animation: none;
	}

	.on-demand-forms .progress-fill {
		transition: none;
	}
}

.on-demand-forms .step h3 {
	font-size: 22px;
	margin: 0 0 10px;
	line-height: 1.2;
	color: var(--evergreen, #010C54);
}

.on-demand-forms .step .why {
	font-size: 16px;
	color: var(--ink-soft, #4A554F);
	margin: 0 0 20px;
}

/* ------------------------------------------------------------------ fields */

.on-demand-forms .field {
	margin-bottom: 20px;
}

.on-demand-forms label {
	display: block;
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 8px;
	color: var(--evergreen, #010C54);
}

.on-demand-forms label .opt {
	font-weight: 400;
	color: var(--ink-soft, #4A554F);
	font-size: 15px;
}

.on-demand-forms input,
.on-demand-forms select,
.on-demand-forms textarea {
	width: 100%;
	min-height: 58px;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 19px;
	color: var(--ink, #1E2622);
	border: 2px solid var(--line, #D9D5CA);
	border-radius: var(--radius, 14px);
	background: var(--white, #FFFFFF);
}

.on-demand-forms input:focus,
.on-demand-forms select:focus,
.on-demand-forms textarea:focus {
	border-color: var(--sage, #3E7A66);
	outline: 3px solid rgba(62, 122, 102, .25);
	outline-offset: 0;
}

.on-demand-forms textarea {
	/* min-height above is sized for a single-line control; a textarea should
	   stand at its rows= height and only grow. Vertical resize only, so dragging
	   it cannot break the half/full column it sits in. */
	min-height: 0;
	height: auto;
	line-height: 1.5;
	resize: vertical;
	display: block;
}

.on-demand-forms select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23010C54' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 48px;
}

.on-demand-forms .hint {
	font-size: 15px;
	color: var(--evergreen, #010C54);
	margin: 6px 0 0;
}

.on-demand-forms .err {
	display: none;
	font-size: 16px;
	color: var(--error, #B3261E);
	font-weight: 700;
	margin: 6px 0 0;
}

.on-demand-forms .field.invalid input,
.on-demand-forms .field.invalid select,
.on-demand-forms .field.invalid textarea {
	border-color: var(--error, #B3261E);
}

.on-demand-forms .field.invalid .err {
	display: block;
}

/* The consent checkbox sits inline with its wording, so it must not stretch
   to the full-width rule above. */
.on-demand-forms .consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink, #1E2622);
}

.on-demand-forms .consent-label input[type="checkbox"] {
	width: 24px;
	min-height: 0;
	height: 24px;
	flex: 0 0 24px;
	margin-top: 3px;
	padding: 0;
}

/* reCAPTCHA v2 checkbox */
.on-demand-forms .recaptcha-field {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.on-demand-forms .recaptcha-field .err {
	text-align: center;
}

/* Honeypot: invisible to humans, tempting to spam bots. Kept out of the
   accessibility tree with aria-hidden in the markup as well, so a screen
   reader never announces it either. */
.on-demand-forms .hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------- radio pills */

.on-demand-forms .pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.on-demand-forms .pill-group input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	min-height: 0;
}

.on-demand-forms .pill-group label.pill {
	flex: 1 1 calc(50% - 5px);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 58px;
	padding: 12px 14px;
	border: 2px solid var(--line, #D9D5CA);
	border-radius: var(--radius, 14px);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink, #1E2622);
	cursor: pointer;
	background: var(--white, #FFFFFF);
}

.on-demand-forms .pill-group label.pill:hover {
	border-color: var(--sage, #3E7A66);
}

.on-demand-forms .pill-group input:checked + label.pill {
	background: var(--sage-light, #E4EEE9);
	border-color: var(--sage, #3E7A66);
	color: var(--evergreen, #010C54);
}

.on-demand-forms .pill-group input:focus-visible + label.pill {
	outline: 3px solid var(--blue, #2E7DB2);
	outline-offset: 2px;
}

.on-demand-forms .pill-group.full label.pill {
	flex: 1 1 100%;
}

/* ----------------------------------------------------------------- buttons */

.on-demand-forms .btn-row {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.on-demand-forms .btn {
	flex: 1;
	min-height: 60px;
	border: none;
	border-radius: var(--radius, 14px);
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.on-demand-forms .btn-next {
	background: var(--blue, #2E7DB2);
	color: #fff;
}

.on-demand-forms .btn-next:hover {
	background: var(--blue-dark, #1F5E8A);
}

.on-demand-forms .btn-back {
	background: var(--white, #FFFFFF);
	color: var(--ink-soft, #4A554F);
	border: 2px solid var(--line, #D9D5CA);
	flex: 0 0 auto;
	padding: 0 22px;
	font-size: 18px;
}

.on-demand-forms .btn-back:hover {
	border-color: var(--sage, #3E7A66);
	color: var(--evergreen, #010C54);
}

.on-demand-forms .btn-submit {
	background: var(--evergreen, #010C54);
	color: #fff;
}

.on-demand-forms .btn-submit:hover {
	background: var(--evergreen-deep, #010732);
}

.on-demand-forms .btn[disabled] {
	opacity: .6;
	cursor: wait;
}

/* ------------------------------------------------------------ privacy note */

.on-demand-forms .privacy-note {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	font-size: 15px;
	color: var(--ink-soft, #4A554F);
	padding: 16px 24px;
	border-top: 1px solid var(--line, #D9D5CA);
	background: #FCFBF8;
}

.on-demand-forms .privacy-note svg {
	width: 20px;
	height: 20px;
	color: var(--sage, #3E7A66);
	flex-shrink: 0;
}

/* --------------------------------------------------------------- thank you */

.on-demand-forms .thanks {
	display: none;
	text-align: center;
	padding: 48px 28px;
}

.on-demand-forms .thanks.show {
	display: block;
	animation: odwmfFadeUp .4s ease;
}

.on-demand-forms .thanks .check {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--sage-light, #E4EEE9);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.on-demand-forms .thanks .check svg {
	width: 38px;
	height: 38px;
	color: var(--success, #2E6B4F);
}

.on-demand-forms .thanks h3 {
	font-size: 26px;
	margin: 0 0 10px;
	color: var(--evergreen, #010C54);
}

.on-demand-forms .thanks p {
	color: var(--ink-soft, #4A554F);
	max-width: 420px;
	margin: 0 auto 10px;
}

/* The call button is defined here rather than borrowed from the theme, so the
   thank-you panel is complete on its own. */
.on-demand-forms .thanks .call-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--blue, #2E7DB2);
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	padding: 12px 18px;
	border-radius: 999px;
	white-space: nowrap;
	min-height: 48px;
	margin-top: 16px;
}

.on-demand-forms .thanks .call-btn:hover {
	background: var(--blue-dark, #1F5E8A);
}

.on-demand-forms .thanks .call-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* ----------------------------------------------------------------- narrow */

@media (max-width: 480px) {
	.on-demand-forms .progress {
		padding: 16px 18px 4px;
	}

	.on-demand-forms .steps-labels span {
		font-size: 11.5px;
	}

	.on-demand-forms .pill-group label.pill {
		flex: 1 1 100%;
	}
}

/* The v2 widget is a fixed 302px wide. Below roughly 360px of usable form
   width it overflows the card, so scale it down rather than let it clip. */
@media (max-width: 380px) {
	.on-demand-forms .recaptcha-field .g-recaptcha {
		transform: scale(.85);
		transform-origin: center top;
	}

	.on-demand-forms .recaptcha-field {
		margin-bottom: 8px;
	}
}

/* Half-width fields, side by side once there is room for them. */
.on-demand-forms .fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.on-demand-forms .field {
	flex: 1 1 100%;
}

@media (min-width: 520px) {
	.on-demand-forms .field--half {
		flex: 1 1 calc(50% - 8px);
	}
}

/* Editor-only notice when a shortcode points at a form that is gone. */
.odwmf-admin-notice {
	padding: 12px 16px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #50575e;
	font-size: 15px;
}

/* A problem the server reported. Sits with the form rather than in an alert
   box, so it can be read alongside the fields it refers to and does not have
   to be dismissed before anything can be corrected. */
.on-demand-forms .form-error {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: var(--radius, 14px);
	background: #FDECEA;
	border: 1px solid var(--error, #B3261E);
	color: var(--error, #B3261E);
	font-size: 16px;
	font-weight: 700;
}

/* The reCAPTCHA widget behaves as a required field, so it uses the same
   invalid state as one. */
.on-demand-forms .recaptcha-field.invalid .err {
	display: block;
}

/* ------------------------------------------------------- HTML content block

   A block of prose inside a form, so it needs the vertical rhythm a labelled
   control does not. Scoped to .field--html and additive only: nothing here
   changes how any existing field renders. */

.on-demand-forms .field--html > :first-child {
	margin-top: 0;
}

.on-demand-forms .field--html > :last-child {
	margin-bottom: 0;
}

.on-demand-forms .field--html p,
.on-demand-forms .field--html ul,
.on-demand-forms .field--html ol {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink, #1E2622);
}

.on-demand-forms .field--html h3,
.on-demand-forms .field--html h4 {
	margin: 0 0 6px;
	color: var(--evergreen, #010C54);
}

.on-demand-forms .field--html ul,
.on-demand-forms .field--html ol {
	padding-left: 20px;
}

.on-demand-forms .field--html img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius, 14px);
}

.on-demand-forms .field--html hr {
	border: 0;
	border-top: 1px solid var(--line, #D9D5CA);
	margin: 14px 0;
}

/* ------------------------------------------------------- hidden field labels

   A label hidden with "Hide label" is taken off screen, not removed. Screen
   readers still announce it, so the field keeps its accessible name — display:
   none would leave it as an unlabelled box to anyone not looking at it. */

.on-demand-forms .odwmf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------- custom content block

   The editable block above the privacy note. Prose spacing, like the HTML
   field, since it holds the same kind of content. Additive only. */

.on-demand-forms .custom-content {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink, #1E2622);
}

.on-demand-forms .custom-content > :first-child {
	margin-top: 0;
}

.on-demand-forms .custom-content > :last-child {
	margin-bottom: 0;
}

.on-demand-forms .custom-content p,
.on-demand-forms .custom-content ul,
.on-demand-forms .custom-content ol {
	margin: 0 0 8px;
}

.on-demand-forms .custom-content img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------- the hidden attribute wins

   The browser's own rule is [hidden]{display:none} — a single attribute
   selector, less specific than any of the class rules above it. So a `display`
   declared on a class silently defeats it, and an element that PHP and the
   script both believe is hidden renders anyway.

   That is exactly what kept the Next button on screen on a step set to move on
   by itself: .btn declares display:inline-flex, which outranks [hidden].

   Scoped to the form so it cannot reach anything the theme owns, and last in
   the file so it outranks everything above it. */

.on-demand-forms [hidden] {
	display: none !important;
}