/*
 * SP Forms — front-end styles.
 *
 * Split into two layers, the same way Contact Form 7 keeps its stylesheet
 * theme-friendly:
 *
 *   1. STRUCTURE — functional, plugin-specific chrome (layout, response
 *      output, validation tips, spinner). Always applied. Deliberately does
 *      NOT set the appearance (border, background, colour, font) of inputs,
 *      textareas, selects or buttons, so the active theme's own form-control
 *      styles show through.
 *
 *   2. DEFAULT SKIN — an opinionated "boxed" look for the fields and submit
 *      button, scoped under `.sp-form-default-skin`. The renderer adds that
 *      class only when the form is NOT asked to inherit the theme. Turn it off
 *      (shortcode `theme_style="1"`, or the `sp_forms_default_theme_style`
 *      filter) and the fields inherit the theme instead — exactly like CF7.
 */

/* ------------------------------------------------------------------ *
 * 1. STRUCTURE — always applied, theme-neutral
 * ------------------------------------------------------------------ */

.sp-form {
	margin: 1em 0;
}

.sp-form label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 600;
}

/* Column layout: [columns][column]…[/column][column]…[/column][/columns] */
.sp-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 0.5em;
}

.sp-form-row .sp-form-col {
	flex: 1 1 0;
	min-width: 220px;
}

/* Stack columns on narrow screens. */
@media ( max-width: 600px ) {
	.sp-form-row .sp-form-col {
		flex: 1 1 100%;
	}
}

/* Fields fill their container and inherit the theme's typography. Nothing
   here dictates borders, padding, colour or background — that is left to the
   theme (or to the default skin below). */
.sp-form-control {
	box-sizing: border-box;
	max-width: 100%;
	font: inherit;
	color: inherit;
}

.sp-form input.sp-form-control,
.sp-form textarea.sp-form-control,
.sp-form select.sp-form-control {
	width: 100%;
}

.sp-form textarea.sp-form-control {
	resize: vertical;
}

.sp-form-checkbox-group .sp-form-list-item,
.sp-form-radio-group .sp-form-list-item {
	display: block;
	margin: 0.25em 0;
	font-weight: 400;
}

.sp-form-field-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 400;
}

/* Response + validation states (functional — kept theme-neutral). */
.sp-form-response-output {
	margin: 1em 0 0;
	padding: 0.6em 0.9em;
	border-radius: 4px;
	display: none;
}

.sp-form.sp-form-sent .sp-form-response-output {
	display: block;
	border: 1px solid #46b450;
	background: #ecf7ed;
	color: #1e6823;
}

.sp-form.sp-form-invalid .sp-form-response-output,
.sp-form.sp-form-failed .sp-form-response-output {
	display: block;
	border: 1px solid #dc3232;
	background: #fbeaea;
	color: #8a1f1f;
}

.sp-form-not-valid-tip {
	display: block;
	color: #dc3232;
	font-size: 0.85em;
	font-weight: 400;
	margin-top: 0.2em;
}

.sp-form-control.sp-form-not-valid {
	border-color: #dc3232;
}

.sp-form-spinner {
	display: none;
	margin-left: 0.6em;
	vertical-align: middle;
}

.sp-form.sp-form-submitting .sp-form-spinner {
	display: inline-block;
}

/* CF7-compatible state hooks live on the form element. Keeping these aliases
   makes the bundled structural behavior agree with CF7-targeted scripts/CSS. */
.sp-form form.sent .sp-form-response-output,
.sp-form form.invalid .sp-form-response-output,
.sp-form form.failed .sp-form-response-output {
	display: block;
}

/* ------------------------------------------------------------------ *
 * 2. DEFAULT SKIN — opinionated look, opt-out via theme_style
 * ------------------------------------------------------------------ *
 * Everything below is scoped to `.sp-form-default-skin`, which the renderer
 * omits when the form is asked to inherit the theme. This is the only place
 * that paints borders/backgrounds/colours onto the controls, so removing the
 * wrapper class hands full control of appearance back to the theme.
 */

.sp-form-default-skin .sp-form-control {
	display: inline-block;
	padding: 0.5em 0.6em;
	margin: 0.25em 0;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 1em;
	line-height: 1.4;
	background: #fff;
	color: #1e1e1e;
}

.sp-form-default-skin .sp-form-control::placeholder {
	color: #a0a0a0;
	opacity: 1;
}

.sp-form-default-skin textarea.sp-form-control {
	min-height: 6em;
}

/* The submit button colour tracks the active theme. `--sp-form-accent` is set
   inline (server-side) from the theme.json palette when a brand colour can be
   found; otherwise it falls back to the plugin blue. `--sp-form-accent-contrast`
   is the auto-picked readable text colour for that background. */
.sp-form-default-skin .sp-form-submit {
	display: inline-block;
	padding: 0.6em 1.4em;
	margin-top: 0.5em;
	border: 0;
	border-radius: 4px;
	background: var( --sp-form-accent, #2271b1 );
	color: var( --sp-form-accent-contrast, #fff );
	font-size: 1em;
	cursor: pointer;
}

/* Darken on hover. Using a brightness filter (rather than a fixed colour)
   keeps the hover state correct for whatever accent the theme resolves to,
   and works in every browser without needing to compute a darker shade. */
.sp-form-default-skin .sp-form-submit:hover {
	filter: brightness( 0.92 );
}

.sp-form-default-skin .sp-form-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}