/**
 * LeadPilot form styles.
 *
 * Everything visual is driven by custom properties written per form, so one
 * page can hold several forms that look nothing alike. Nothing here uses !important
 * except the two accessibility helpers, so a theme can still override.
 */

.lp-form {
	max-width: var( --lp-max-width, 640px );
	font-family: var( --lp-font, inherit );
	font-size: var( --lp-font-size, 16px );
	/*
	 * `inherit`, not a near-black default.
	 *
	 * The form paints no background of its own, so a hard-coded dark text
	 * colour is a bet that the page behind it is light. On a dark theme that
	 * bet loses completely: measured at **1.07:1** -- every label on the form
	 * was near-black on near-black, and a visitor could not read what any
	 * field was asking for. Photographed before the change; it is not subtle.
	 *
	 * Inheriting takes whatever the theme uses for body text, which is the one
	 * colour known to work against the background the theme actually paints.
	 * A form's own `--lp-text` still overrides this, so anything set in the
	 * builder is unaffected.
	 */
	color: var( --lp-text, inherit );
	box-sizing: border-box;
}

.lp-form *,
.lp-form *::before,
.lp-form *::after {
	box-sizing: inherit;
}

.lp-form-title {
	margin: 0 0 .75em;
	font-size: 1.4em;
	line-height: 1.25;
}

.lp-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var( --lp-gap, 18px );
}

/* Widths ------------------------------------------------------------------ */

.lp-field {
	flex: 0 0 100%;
	min-width: 0;
}

.lp-w-half { flex: 0 0 calc( 50% - ( var( --lp-gap, 18px ) / 2 ) ); }
.lp-w-third { flex: 0 0 calc( 33.333% - ( var( --lp-gap, 18px ) * 2 / 3 ) ); }
.lp-w-two-thirds { flex: 0 0 calc( 66.666% - ( var( --lp-gap, 18px ) / 3 ) ); }
.lp-w-quarter { flex: 0 0 calc( 25% - ( var( --lp-gap, 18px ) * 3 / 4 ) ); }

@media ( max-width: 600px ) {
	.lp-w-half,
	.lp-w-third,
	.lp-w-two-thirds,
	.lp-w-quarter {
		flex: 0 0 100%;
	}
}

/* Labels ------------------------------------------------------------------ */

.lp-label {
	display: block;
	margin: 0 0 6px;
	color: var( --lp-label, inherit );
	font-size: var( --lp-label-size, 14px );
	font-weight: var( --lp-label-weight, 600 );
	line-height: 1.35;
}

.lp-req {
	color: var( --lp-required, #dc2626 );
	margin-left: 2px;
}

/*
 * Scoped to the form. .lp-help is also the Help screen's inline code chip
 * (lp-help.css), and both stylesheets load on the form builder.
 */
.lp-form .lp-help {
	margin: 0 0 6px;
	color: var( --lp-help, #6b7280 );
	font-size: .85em;
	line-height: 1.45;
}

.lp-sr,
.lp-labels-hidden .lp-label:not( .lp-sublabel ) {
	position: absolute !important;
	width: 1px !important;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Label to the left of the control. */
.lp-labels-left .lp-field {
	display: grid;
	grid-template-columns: minmax( 90px, 30% ) 1fr;
	align-items: start;
	column-gap: 12px;
}

.lp-labels-left .lp-label {
	padding-top: calc( var( --lp-pad-y, 11px ) + 1px );
	margin: 0;
}

.lp-labels-left .lp-help,
.lp-labels-left .lp-error {
	grid-column: 2;
}

/* Controls ---------------------------------------------------------------- */

.lp-form input[type="text"],
.lp-form input[type="email"],
.lp-form input[type="tel"],
.lp-form input[type="url"],
.lp-form input[type="number"],
.lp-form input[type="date"],
.lp-form input[type="time"],
.lp-form select,
.lp-form textarea {
	display: block;
	width: 100%;
	padding: var( --lp-pad-y, 11px ) var( --lp-pad-x, 13px );
	font-family: inherit;
	font-size: 1em;
	line-height: 1.4;
	color: var( --lp-input-text, #111827 );
	background: var( --lp-input-bg, #fff );
	border: var( --lp-bw, 1px ) solid var( --lp-input-border, #d1d5db );
	border-radius: var( --lp-radius, 8px );
	box-shadow: var( --lp-shadow, none );
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.lp-form select {
	background-image: linear-gradient( 45deg, transparent 50%, currentColor 50% ), linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position: calc( 100% - 18px ) calc( 50% + 2px ), calc( 100% - 13px ) calc( 50% + 2px );
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px;
}

.lp-form select[multiple] {
	background-image: none;
	padding-right: var( --lp-pad-x, 13px );
	min-height: 120px;
}

.lp-form textarea {
	resize: vertical;
	min-height: 90px;
}

.lp-form ::placeholder {
	color: var( --lp-placeholder, #9ca3af );
	opacity: 1;
}

.lp-form input:focus,
.lp-form select:focus,
.lp-form textarea:focus {
	outline: none;
	border-color: var( --lp-focus, #0f766e );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --lp-focus, #0f766e ) 25%, transparent );
}

/* Browsers without color-mix still get a visible ring. */
@supports not ( color: color-mix( in srgb, red 50%, blue ) ) {
	.lp-form input:focus,
	.lp-form select:focus,
	.lp-form textarea:focus {
		box-shadow: 0 0 0 3px rgba( 15, 118, 110, .25 );
	}
}

/* Label inside the control. */
.lp-labels-inside .lp-label {
	position: absolute;
	margin: 0;
	padding: 4px 0 0 calc( var( --lp-pad-x, 13px ) + 1px );
	font-size: .72em;
	pointer-events: none;
	opacity: .8;
}

.lp-labels-inside .lp-field {
	position: relative;
}

.lp-labels-inside input,
.lp-labels-inside select,
.lp-labels-inside textarea {
	padding-top: calc( var( --lp-pad-y, 11px ) + 10px );
}

/* Choices ----------------------------------------------------------------- */

.lp-group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.lp-group > .lp-label {
	padding: 0;
}

.lp-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lp-choice {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	line-height: 1.45;
	cursor: pointer;
}

.lp-choice input {
	margin: 3px 0 0;
	accent-color: var( --lp-accent, #0f766e );
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

.lp-consent span {
	font-size: .92em;
}

.lp-subgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * Scoped to the subgrid it lives in. .lp-sub is also the small grey line
 * under a name in admin tables (lp-admin.css), which loads alongside this on
 * the form builder -- and `flex: 1 1 calc(50% - 5px)` on that would be wrong.
 */
.lp-subgrid .lp-sub {
	flex: 1 1 calc( 50% - 5px );
	min-width: 0;
}

.lp-subgrid .lp-sub-full {
	flex: 0 0 100%;
}

.lp-sublabel {
	display: block;
	margin: 0 0 4px;
	font-size: .78em;
	color: var( --lp-help, #6b7280 );
}

/* Rating ------------------------------------------------------------------ */

.lp-rating {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	font-size: 1.7em;
	line-height: 1;
}

.lp-star {
	cursor: pointer;
	color: #d1d5db;
	transition: color .12s ease;
}

.lp-star input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.lp-star:hover,
.lp-star:hover ~ .lp-star,
.lp-star:has( input:checked ),
.lp-star:has( input:checked ) ~ .lp-star {
	color: var( --lp-accent, #0f766e );
}

.lp-star:has( input:focus-visible ) {
	outline: 2px solid var( --lp-focus, #0f766e );
	outline-offset: 2px;
	border-radius: 3px;
}

/* Range ------------------------------------------------------------------- */

.lp-range {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lp-range input[type="range"] {
	flex: 1 1 auto;
	accent-color: var( --lp-accent, #0f766e );
}

.lp-range-out {
	min-width: 2.5em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var( --lp-accent, #0f766e );
}

/* Layout blocks ----------------------------------------------------------- */

.lp-heading h4 {
	margin: .4em 0 .2em;
	font-size: 1.15em;
	line-height: 1.3;
}

.lp-divider hr {
	border: 0;
	border-top: 1px solid var( --lp-input-border, #d1d5db );
	margin: .4em 0;
}

.lp-paragraph p {
	margin: 0 0 .6em;
	line-height: 1.55;
}

.lp-page-title {
	margin: 0 0 .8em;
	font-size: 1.1em;
}

/* Progress ---------------------------------------------------------------- */

.lp-progress {
	height: 6px;
	border-radius: 99px;
	background: var( --lp-input-border, #e5e7eb );
	overflow: hidden;
	margin-bottom: 8px;
}

.lp-progress-bar {
	height: 100%;
	background: var( --lp-accent, #0f766e );
	transition: width .25s ease;
}

.lp-step-count {
	margin: 0 0 16px;
	font-size: .82em;
	color: var( --lp-help, #6b7280 );
}

/* Buttons ----------------------------------------------------------------- */

/* Scoped: .lp-actions is also an admin button row (lp-admin.css). */
.lp-form .lp-actions {
	display: flex;
	gap: 10px;
	margin-top: var( --lp-gap, 18px );
}

.lp-align-center { justify-content: center; }
.lp-align-right { justify-content: flex-end; }

.lp-btn {
	display: inline-block;
	padding: var( --lp-btn-pad-y, 12px ) var( --lp-btn-pad-x, 22px );
	font-family: inherit;
	font-size: var( --lp-btn-size, 16px );
	font-weight: var( --lp-btn-weight, 600 );
	line-height: 1.2;
	color: var( --lp-btn-text, #fff );
	background: var( --lp-btn-bg, #0f766e );
	border: 0;
	border-radius: var( --lp-btn-radius, 8px );
	cursor: pointer;
	transition: background-color .15s ease, transform .05s ease;
}

.lp-btn:hover {
	background: var( --lp-btn-hover, #115e59 );
}

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

.lp-btn:focus-visible {
	outline: 3px solid var( --lp-focus, #0f766e );
	outline-offset: 2px;
}

.lp-btn[disabled] {
	opacity: .65;
	cursor: progress;
}

.lp-btn-full {
	width: 100%;
}

.lp-prev {
	background: transparent;
	color: var( --lp-text, #111827 );
	border: 1px solid var( --lp-input-border, #d1d5db );
}

.lp-prev:hover {
	background: rgba( 0, 0, 0, .04 );
}

/* Feedback ---------------------------------------------------------------- */

/*
 * The per-field message carries its own background for the same reason the
 * alert does: red on the page is 4.83:1 against white and 3.91:1 against a
 * dark theme, and which one a visitor gets is decided by somebody else's
 * stylesheet. An opaque chip is 5.66:1 wherever it lands.
 */
.lp-error {
	margin: 6px 0 0;
	padding: 3px 8px;
	display: inline-block;
	border-radius: var( --lp-radius-sm, 4px );
	background: var( --lp-error-bg, #fdecec );
	font-size: .82em;
	color: var( --lp-error-text, #b91c1c );
}

/*
 * An error element with nothing in it must not paint.
 *
 * As plain text an empty one was invisible; the moment it gained padding and a
 * background it became a small pink box under every field that was perfectly
 * fine. Found by photographing the form, not by measuring it -- the contrast
 * numbers were all correct while this was on screen.
 */
.lp-error:empty {
	display: none;
}

.lp-has-error input,
.lp-has-error select,
.lp-has-error textarea {
	border-color: var( --lp-error, #dc2626 );
}

.lp-form-alert {
	margin: 0 0 14px;
	padding: 11px 14px;
	border-radius: var( --lp-radius, 8px );
	background: var( --lp-success-bg, #ecfdf5 );
	color: var( --lp-success-text, #065f46 );
	font-size: .9em;
}

/*
 * Measured, not eyeballed: #dc2626 on a 10% tint of itself over white is
 * 4.13:1, under WCAG AA's 4.5:1 for body text. The alert that tells somebody
 * their submission failed was the least readable text on the form.
 *
 * Two changes, and the second matters more than the first:
 *
 * 1. A darker red for the text. #b91c1c gives 5.66:1 here.
 * 2. **An opaque background.** The old one mixed with `transparent`, so what it
 *    actually composited against was whatever the theme put behind it -- on a
 *    dark theme, dark red on near-black. A contrast ratio you cannot compute is
 *    not a contrast ratio, and an error message is the wrong place to gamble.
 *
 * `--lp-error` still carries the border and asterisk colour, where the 3:1
 * threshold for non-text applies and #dc2626 is fine. `--lp-error-text` is
 * separate so a site can override one without breaking the other.
 */
.lp-alert-error {
	background: var( --lp-error-bg, #fdecec );
	color: var( --lp-error-text, #b91c1c );
}

.lp-form-success {
	padding: 18px 20px;
	border-radius: var( --lp-radius, 8px );
	background: var( --lp-success-bg, #ecfdf5 );
	color: var( --lp-success-text, #065f46 );
	line-height: 1.55;
}

.lp-form-success:focus {
	outline: 2px solid var( --lp-accent, #0f766e );
	outline-offset: 2px;
}

.lp-form-closed,
.lp-form-missing {
	padding: 14px 16px;
	border-radius: 8px;
	background: #f3f4f6;
	color: #374151;
	font-size: .92em;
}

.lp-sending {
	opacity: .75;
	pointer-events: none;
}

/* The honeypot must be unreachable for people but present for bots. */
.lp-hp {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Dark theme -------------------------------------------------------------- */

.lp-theme-dark {
	--lp-text: #e5e7eb;
	--lp-label: #e5e7eb;
	--lp-help: #9ca3af;
	--lp-input-bg: #111827;
	--lp-input-text: #f9fafb;
	--lp-input-border: #374151;
	--lp-placeholder: #6b7280;
}

.lp-theme-dark .lp-prev:hover {
	background: rgba( 255, 255, 255, .08 );
}

.lp-theme-dark .lp-form-closed {
	background: #1f2937;
	color: #e5e7eb;
}

@media ( prefers-reduced-motion: reduce ) {
	.lp-form * {
		transition: none !important;
	}
}

/*
 * A form that could not load its configuration. It cannot submit anything, so
 * it says so and stops looking usable rather than accepting a lead and losing
 * it. See the boot guard in lp-form.js.
 *
 * Deliberately NOT `opacity: .55` on the form, which was the first attempt:
 * that took the labels to 3.52:1 against white and put the whole form below
 * WCAG AA. A form that has failed is exactly the wrong moment to make the text
 * harder to read. The disabled button, the cursor and the message carry it.
 */
.lp-form-unconfigured .lp-submit {
	cursor: not-allowed;
	opacity: .6;
}

.lp-form-unconfigured .lp-form-el {
	border-left: 3px solid var( --lp-error, #dc2626 );
	padding-left: 14px;
}