/*
 * Styles the plugin's [lm_diagnosis_form] / [lm_lead_form] shortcode output. Layers on
 * top of the plugin's own lm-frontend.css (layout/box-model) — mostly visual design
 * (color, borders, radius, focus states). All fields use the plugin's default
 * label-above-input stacked layout for a consistent rhythm across both forms.
 *
 * .lm-form-card is a theme-authored wrapper (not part of the plugin's markup) placed
 * around the shortcode output on Area pages — see single-lm_area.php.
 */

.lm-form-card {
	padding: var( --lm-space-4 );
	background-color: var( --lm-color-bg );
	border: 1px solid var( --lm-color-border );
	border-radius: var( --lm-radius-card );
	box-shadow: 0 1px 2px rgba( 18, 23, 29, 0.04 );
}

.lm-form-card .lm-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	max-width: none;
	margin: 0;
}

/*
 * The button is always the last <p> the plugin renders before .lm-form-result (see
 * class-lm-shortcodes.php) — pushing it to the bottom of the flex column is what keeps
 * both forms' submit buttons vertically aligned regardless of field count.
 */
.lm-form-card .lm-form p:last-of-type {
	margin-top: auto;
	margin-bottom: 0;
}

.lm-form label {
	color: var( --lm-color-text );
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.4em;
}

.lm-form textarea {
	min-height: 8em;
}

.lm-form input,
.lm-form textarea {
	font-family: var( --lm-font-body );
	font-size: 1rem;
	padding: 0.65em 0.75em;
	border: 1px solid var( --lm-color-border );
	border-radius: var( --lm-radius-button );
	background-color: var( --lm-color-bg );
	color: var( --lm-color-text );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lm-form input::placeholder,
.lm-form textarea::placeholder {
	color: var( --lm-color-text-muted );
}

.lm-form input:hover,
.lm-form textarea:hover {
	border-color: #c9d0d6;
}

.lm-form input:focus,
.lm-form textarea:focus {
	outline: none;
	border-color: var( --lm-color-primary );
	box-shadow: 0 0 0 3px rgba( 255, 88, 0, 0.15 );
}

.lm-form textarea {
	resize: vertical;
}

.lm-form button {
	font-family: var( --lm-font-body );
	font-weight: 900;
	font-size: 0.95rem;
	padding: 12px 24px;
	border: none;
	border-radius: var( --lm-radius-button );
	background-color: var( --lm-color-primary );
	color: var( --lm-color-white );
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.lm-form button:hover:not( :disabled ) {
	background-color: var( --lm-color-primary-hover );
	transform: translateY( -1px );
}

.lm-form-result {
	font-size: 0.9rem;
	font-weight: 600;
}

.lm-form-result:not( :empty ) {
	padding: 0.75em 1em;
	border-radius: var( --lm-radius-button );
	background-color: var( --lm-color-surface-alt );
}

.lm-form-result--success {
	background-color: rgba( 46, 125, 50, 0.1 );
}

.lm-form-result--error {
	background-color: rgba( 179, 45, 46, 0.1 );
}

.lm-form-error {
	color: var( --lm-color-error );
	font-weight: 600;
}