/* Lavender Form front-end styles. Deliberately light-touch -- a form embedded
   in a theme should look like it belongs to that theme, not to a plugin.

   Every color/spacing/radius value below reads from a --lavender-form-*
   custom property with the plugin's normal built-in value as its fallback,
   so a bare form (no CSS vars set) looks exactly as it always has. Only
   lavender-form-pro's page-builder styling layer (Stage 5, Days 95-98) ever
   sets these vars, inline on the .lavender-form-wrap element it renders --
   see Lavender_Form_Render::render_form()'s $style parameter and the
   lavender_form_wrapper_css_vars filter. */

.lavender-form-wrap {
	max-width: var( --lavender-form-max-width, 560px );
}

.lavender-form-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lavender-form-form[hidden] {
	display: none;
}

.lavender-form-field {
	margin: 0 0 var( --lavender-form-field-spacing, 16px );
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Radio and multi-option checkbox fields render as a <fieldset>/<legend> instead of a
   <p>/<label> (see class-lavender-form-render.php) -- browsers draw a border/inset padding
   on <fieldset> by default, which this resets so it sits flush like every other field. */
fieldset.lavender-form-field {
	border: none;
	padding: 0;
}

.lavender-form-field label,
.lavender-form-field legend {
	font-weight: 600;
	font-size: 0.95em;
	padding: 0;
	color: var( --lavender-form-label-color, inherit );
}

.lavender-form-required {
	color: #b32d2e;
}

.lavender-form-field input[type="text"],
.lavender-form-field input[type="email"],
.lavender-form-field input[type="tel"],
.lavender-form-field input[type="number"],
.lavender-form-field input[type="url"],
.lavender-form-field select,
.lavender-form-field textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var( --lavender-form-input-border-color, #ccc );
	border-radius: var( --lavender-form-input-border-radius, 5px );
	font-size: 1em;
	font-family: inherit;
	background: var( --lavender-form-input-bg, #fff );
	color: var( --lavender-form-input-text-color, #1d2327 );
}

.lavender-form-field input:focus,
.lavender-form-field select:focus,
.lavender-form-field textarea:focus {
	outline: none;
	border-color: var( --lavender-form-primary-color, #8c5fbc );
	box-shadow: 0 0 0 2px var( --lavender-form-primary-color-shadow, rgba(140, 95, 188, 0.2) );
}

.lavender-form-field input.is-invalid,
.lavender-form-field select.is-invalid,
.lavender-form-field textarea.is-invalid {
	border-color: #b32d2e;
}

.lavender-form-field textarea {
	resize: vertical;
}

.lavender-form-choice-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lavender-form-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	cursor: pointer;
}

.lavender-form-choice input {
	width: auto;
}

.lavender-form-field-error {
	color: #b32d2e;
	font-size: 0.85em;
}

/* Percentage (%) and Currency Amount ($) fields -- Aug 29, 2026 batch: a single flex row
   pairing the real <input type="number"> with a fixed-width prefix/suffix chip, so the
   symbol reads as part of the control instead of a separate floating label. */
.lavender-form-suffixed-input,
.lavender-form-prefixed-input {
	display: flex;
	align-items: stretch;
}

.lavender-form-field .lavender-form-suffixed-input input,
.lavender-form-field .lavender-form-prefixed-input input {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.lavender-form-prefix,
.lavender-form-suffix {
	display: flex;
	align-items: center;
	padding: 0 11px;
	background: #f0f0f1;
	border: 1px solid var( --lavender-form-input-border-color, #ccc );
	color: #50575e;
	font-size: 0.9em;
	flex-shrink: 0;
}

.lavender-form-prefix {
	border-right: none;
	border-radius: var( --lavender-form-input-border-radius, 5px ) 0 0 var( --lavender-form-input-border-radius, 5px );
}

.lavender-form-suffix {
	border-left: none;
	border-radius: 0 var( --lavender-form-input-border-radius, 5px ) var( --lavender-form-input-border-radius, 5px ) 0;
}

.lavender-form-prefixed-input input {
	border-radius: 0 var( --lavender-form-input-border-radius, 5px ) var( --lavender-form-input-border-radius, 5px ) 0;
}

.lavender-form-suffixed-input input {
	border-radius: var( --lavender-form-input-border-radius, 5px ) 0 0 var( --lavender-form-input-border-radius, 5px );
}

/* GDPR/Consent field -- the legal text block shown above the agreement checkbox. */
.lavender-form-consent-text {
	font-size: 0.85em;
	color: #50575e;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: var( --lavender-form-input-border-radius, 5px );
	padding: 10px 12px;
	margin-bottom: 6px;
	max-height: 160px;
	overflow-y: auto;
}

.lavender-form-submit {
	align-self: flex-start;
	margin-top: 8px;
	background: var( --lavender-form-primary-color, #8c5fbc );
	color: var( --lavender-form-button-text-color, #fff );
	border: none;
	border-radius: var( --lavender-form-button-border-radius, 5px );
	padding: 11px 22px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lavender-form-submit:hover {
	background: var( --lavender-form-primary-color-hover, #7a4fa8 );
}

.lavender-form-submit:disabled {
	background: var( --lavender-form-primary-color-disabled, #c3aee0 );
	cursor: not-allowed;
}

.lavender-form-message {
	padding: 12px 14px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 0.95em;
}

.lavender-form-message--success {
	background: #e6f4ea;
	color: #1b5e20;
	border: 1px solid #b7dfc0;
}

.lavender-form-message--error {
	background: #fce8e6;
	color: #8a2424;
	border: 1px solid #f3b3b0;
}

/* ---------- Pro trial notice (Stage 6/7, Lavender_Form_Pro_Trial) ---------- */
/* Prepended outside .lavender-form-wrap by Lavender_Form_Render::render_form() --
   only ever shown to a logged-in user who can also edit the form (see that method's
   current_user_can() gate), never to an anonymous site visitor. Informational only --
   nothing on this form is blocked, so this never needs an alarming red treatment. */

.lavender-form-trial-notice {
	background: #fdf6ea;
	border: 1px solid #e0b64a;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 14px;
	font-size: 0.92em;
	color: #6b4a06;
	max-width: 560px;
}

/* ---------- Locked Pro field (Stage 6/7, Lavender_Form_Pro_Trial::locked_field_markup()) ---------- */
/* Replaces ONE field's own markup inline, in the form, right where the field itself would
   sit -- only ever rendered for a logged-in editor (locked_field_markup() checks
   current_user_can() itself); an anonymous visitor never sees this at all, the field is
   simply absent for them. Deliberately more prominent than the trial notice above -- this is
   the moment most likely to convert a trial user into a paying customer, so it earns real
   visual weight (brand-purple gradient, a clear CTA button) rather than looking like an error. */

.lavender-form-locked-field {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 var( --lavender-form-field-spacing, 16px );
	padding: 18px 20px;
	border-radius: 10px;
	background: linear-gradient( 135deg, #f4edfb 0%, #ede4f9 100% );
	border: 1px solid #d9c3ee;
	max-width: 560px;
}

.lavender-form-locked-field__icon {
	flex: 0 0 auto;
	font-size: 22px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #8c5fbc;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lavender-form-locked-field__eyebrow {
	margin: 0 0 2px;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8c5fbc;
}

.lavender-form-locked-field__title {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 1.02em;
	color: #3a2559;
}

.lavender-form-locked-field__copy {
	margin: 0 0 12px;
	font-size: 0.92em;
	color: #4d3a68;
	line-height: 1.5;
}

.lavender-form-locked-field__cta {
	display: inline-block;
	background: #8c5fbc;
	color: #fff;
	font-weight: 600;
	font-size: 0.92em;
	text-decoration: none;
	padding: 9px 16px;
	border-radius: 5px;
	transition: background 0.15s ease;
}

.lavender-form-locked-field__cta:hover {
	background: #7a4fa8;
	color: #fff;
}

.lavender-form-locked-field__alt {
	margin: 10px 0 0;
	font-size: 0.82em;
	color: #6b5a86;
}