/**
 * Form control skin — the single source of truth for how Defer Forms fields look.
 *
 * Loaded twice from this one file: on the front end by Form_Styles, and into
 * the admin bundle by ui/shared/styles/admin.css, so the builder preview and
 * the real form can never drift apart.
 *
 * Everything is driven by `--deferforms-*` custom properties declared on the form
 * itself; src/CF7/Design.php writes them from the Design settings. Fonts are
 * inherited from the theme on purpose — we own the shape, not the type.
 */

:is( .wpcf7-form, .deferforms-preview ) {
	/* Type */
	--deferforms-font-size: 1rem;

	/* Colour */
	--deferforms-text: #1b1b22;
	--deferforms-muted: #8a8580;
	--deferforms-bg: #ffffff;
	--deferforms-surface: #ffffff;
	--deferforms-surface-alt: #faf9f7;
	--deferforms-border: #d9d3c9;
	--deferforms-border-hover: #b9b1a3;
	--deferforms-primary: #1b1b22;
	--deferforms-primary-contrast: #ffffff;
	--deferforms-error: #dc2626;

	/* Shape and space */
	--deferforms-radius: 8px;
	--deferforms-control-height: 46px;
	--deferforms-padding-y: 11px;
	--deferforms-padding-x: 14px;
	--deferforms-gap: 18px;

	/* Focus ring. Set --deferforms-ring to 0 to remove it entirely. */
	--deferforms-ring: 3px;
	--deferforms-ring-color: rgba( 27, 27, 34, 0.12 );

	--deferforms-shadow: 0 10px 30px rgba( 27, 27, 34, 0.14 );

	/* The button follows the primary colour unless it is given its own. */
	--deferforms-btn-bg: var( --deferforms-primary );
	--deferforms-btn-text: var( --deferforms-primary-contrast );
	--deferforms-btn-radius: var( --deferforms-radius );

	/*
	 * Icons are whole tokens, not just colours: a data: URI cannot read a custom
	 * property, so the only way to recolour one from settings is to swap the URI.
	 * Design.php rebuilds these with the chosen colours; the values here are the
	 * defaults and must stay in step with the colour tokens above.
	 */
	--deferforms-icon-chevron: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>" );
	--deferforms-icon-tick: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>" );
	--deferforms-icon-check: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>" );
	--deferforms-icon-upload: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='M7 10l5-5 5 5'/><path d='M12 5v12'/></svg>" );
	--deferforms-icon-doc: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/></svg>" );
}

/* The controls that share one box model. Checkboxes, radios and buttons are
   deliberately excluded — they get their own treatment. */
:is( .wpcf7-form, .deferforms-preview ) :is(
	input[type='text'],
	input[type='email'],
	input[type='url'],
	input[type='tel'],
	input[type='number'],
	input[type='date'],
	input[type='time'],
	input[type='password'],
	input[type='search'],
	select,
	textarea
) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: var( --deferforms-control-height );
	margin: 0;
	padding: var( --deferforms-padding-y ) var( --deferforms-padding-x );
	font-family: inherit;
	font-size: var( --deferforms-font-size );
	line-height: 1.4;
	color: var( --deferforms-text );
	background-color: var( --deferforms-bg );
	border: 1px solid var( --deferforms-border );
	border-radius: var( --deferforms-radius );
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is( .wpcf7-form, .deferforms-preview ) :is( input, select, textarea ):hover:not( :disabled ):not( :focus ) {
	border-color: var( --deferforms-border-hover );
}

:is( .wpcf7-form, .deferforms-preview ) :is( input, select, textarea ):focus {
	outline: none;
	border-color: var( --deferforms-primary );
	box-shadow: 0 0 0 var( --deferforms-ring ) var( --deferforms-ring-color );
}

:is( .wpcf7-form, .deferforms-preview ) :is( input, textarea )::placeholder {
	color: var( --deferforms-muted );
	opacity: 1;
}

:is( .wpcf7-form, .deferforms-preview ) :is( input, select, textarea ):disabled {
	background-color: var( --deferforms-surface-alt );
	color: var( --deferforms-muted );
	cursor: not-allowed;
}

:is( .wpcf7-form, .deferforms-preview ) textarea {
	min-height: 120px;
	resize: vertical;
}

/* Native select keeps its own arrow when appearance is reset, so draw one. */
:is( .wpcf7-form, .deferforms-preview ) select:not( [multiple] ) {
	padding-right: calc( var( --deferforms-padding-x ) + 22px );
	background-image: var( --deferforms-icon-chevron );
	background-repeat: no-repeat;
	background-position: right var( --deferforms-padding-x ) center;
	background-size: 16px 16px;
}

:is( .wpcf7-form, .deferforms-preview ) select[multiple] {
	padding: 6px;
}

/* CF7 flags a failed control with this class. */
:is( .wpcf7-form, .deferforms-preview ) :is( input, select, textarea ).wpcf7-not-valid {
	border-color: var( --deferforms-error );
}

/* ---------------------------------------------------------------------------
 * Choice controls — checkbox, radio, acceptance
 *
 * Scoped to `.wpcf7-list-item`, which CF7 wraps every option in. That keeps
 * these rules away from the star-rating widget, whose radios are visually
 * hidden by rating.css and must stay that way.
 * ------------------------------------------------------------------------- */
:is( .wpcf7-form, .deferforms-preview ) :is( .wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance ) {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item {
	margin: 0;
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: inherit;
	font-size: var( --deferforms-font-size );
	line-height: 1.4;
	color: var( --deferforms-text );
	cursor: pointer;
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item :is( input[type='checkbox'], input[type='radio'] ) {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	background-color: var( --deferforms-bg );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 13px 13px;
	border: 1px solid var( --deferforms-border );
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*
 * We draw the whole control ourselves, so nothing else may draw into it.
 * wp-admin/css/forms.css hangs a dashicon tick on `input[type='checkbox']:
 * checked::before` and a white dot on the radio's — neither is undone by
 * `appearance: none`, so the styling preview showed two ticks stacked.
 */
:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item :is( input[type='checkbox'], input[type='radio'] )::before,
:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item :is( input[type='checkbox'], input[type='radio'] )::after {
	content: none;
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item input[type='checkbox'] {
	border-radius: 5px;
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item input[type='radio'] {
	border-radius: 50%;
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item :is( input[type='checkbox'], input[type='radio'] ):hover:not( :disabled ) {
	border-color: var( --deferforms-border-hover );
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item :is( input[type='checkbox'], input[type='radio'] ):checked {
	background-color: var( --deferforms-primary );
	border-color: var( --deferforms-primary );
}

/* Tick drawn as an SVG so it inherits nothing from the theme. */
:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item input[type='checkbox']:checked {
	background-image: var( --deferforms-icon-tick );
}

/* The radio's dot is an inset ring, so it always centres perfectly. */
:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item input[type='radio']:checked {
	box-shadow: inset 0 0 0 4px var( --deferforms-bg );
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item :is( input[type='checkbox'], input[type='radio'] ):focus-visible {
	outline: none;
	box-shadow: 0 0 0 var( --deferforms-ring ) var( --deferforms-ring-color );
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item input[type='radio']:checked:focus-visible {
	box-shadow: inset 0 0 0 4px var( --deferforms-bg ), 0 0 0 var( --deferforms-ring ) var( --deferforms-ring-color );
}

:is( .wpcf7-form, .deferforms-preview ) .wpcf7-list-item :is( input[type='checkbox'], input[type='radio'] ):disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Layout variants. The builder writes these marker classes onto the control. */
:is( .wpcf7-form, .deferforms-preview ) :is( .wpcf7-checkbox, .wpcf7-radio ).deferforms-inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 22px;
}

:is( .wpcf7-form, .deferforms-preview ) :is( .wpcf7-checkbox, .wpcf7-radio ).deferforms-cards {
	gap: 10px;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-cards .wpcf7-list-item {
	border: 1px solid var( --deferforms-border );
	border-radius: var( --deferforms-radius );
	background-color: var( --deferforms-bg );
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-cards .wpcf7-list-item > label {
	width: 100%;
	box-sizing: border-box;
	padding: var( --deferforms-padding-y ) var( --deferforms-padding-x );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-cards .wpcf7-list-item:hover {
	border-color: var( --deferforms-border-hover );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-cards .wpcf7-list-item:has( input:checked ) {
	border-color: var( --deferforms-primary );
	background-color: var( --deferforms-surface-alt );
}

/* ---------------------------------------------------------------------------
 * File input — plain but consistent. The drop zone lands in a later phase.
 * ------------------------------------------------------------------------- */
:is( .wpcf7-form, .deferforms-preview ) input[type='file'] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 9px;
	font-family: inherit;
	font-size: var( --deferforms-font-size );
	color: var( --deferforms-text );
	background-color: var( --deferforms-surface-alt );
	border: 1px dashed var( --deferforms-border );
	border-radius: var( --deferforms-radius );
	cursor: pointer;
}

:is( .wpcf7-form, .deferforms-preview ) input[type='file']::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	font-family: inherit;
	font-size: max( 14px, 0.9em );
	font-weight: 600;
	color: var( --deferforms-text );
	background-color: var( --deferforms-bg );
	border: 1px solid var( --deferforms-border );
	border-radius: calc( var( --deferforms-radius ) - 2px );
	cursor: pointer;
	transition: border-color 0.12s ease;
}

:is( .wpcf7-form, .deferforms-preview ) input[type='file']:hover::file-selector-button {
	border-color: var( --deferforms-border-hover );
}

/* ---------------------------------------------------------------------------
 * Submit
 * ------------------------------------------------------------------------- */
:is( .wpcf7-form, .deferforms-preview ) :is( input[type='submit'], button[type='submit'] ) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var( --deferforms-control-height );
	padding: var( --deferforms-padding-y ) calc( var( --deferforms-padding-x ) * 1.8 );
	font-family: inherit;
	font-size: var( --deferforms-font-size );
	font-weight: 600;
	line-height: 1.2;
	color: var( --deferforms-btn-text );
	background-color: var( --deferforms-btn-bg );
	border: 0;
	border-radius: var( --deferforms-btn-radius );
	cursor: pointer;
	transition: opacity 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

:is( .wpcf7-form, .deferforms-preview ) :is( input[type='submit'], button[type='submit'] ):hover:not( :disabled ) {
	opacity: 0.88;
}

:is( .wpcf7-form, .deferforms-preview ) :is( input[type='submit'], button[type='submit'] ):focus-visible {
	outline: none;
	box-shadow: 0 0 0 var( --deferforms-ring ) var( --deferforms-ring-color );
}

/* ---------------------------------------------------------------------------
 * Select widget (assets/js/select.js)
 *
 * The native <select> stays in the DOM and keeps submitting; it is only pushed
 * out of sight. Everything below is the visible replacement, and the builder
 * preview renders the same class names so both look identical.
 * ------------------------------------------------------------------------- */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-select {
	position: relative;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-height: var( --deferforms-control-height );
	padding: calc( var( --deferforms-padding-y ) - 3px ) var( --deferforms-padding-x );
	font-family: inherit;
	font-size: var( --deferforms-font-size );
	line-height: 1.4;
	text-align: left;
	color: var( --deferforms-text );
	background-color: var( --deferforms-bg );
	border: 1px solid var( --deferforms-border );
	border-radius: var( --deferforms-radius );
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-trigger:hover {
	border-color: var( --deferforms-border-hover );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-trigger:focus-visible,
:is( .wpcf7-form, .deferforms-preview ) .deferforms-select.is-open .deferforms-select-trigger {
	outline: none;
	border-color: var( --deferforms-primary );
	box-shadow: 0 0 0 var( --deferforms-ring ) var( --deferforms-ring-color );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-value {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	min-width: 0;
	overflow: hidden;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select:not( .deferforms-select--multiple ) .deferforms-select-value {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-placeholder {
	color: var( --deferforms-muted );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-image: var( --deferforms-icon-chevron );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	transition: transform 0.15s ease;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select.is-open .deferforms-select-arrow {
	transform: rotate( 180deg );
}

/* Chips (multiple) */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 4px 3px 9px;
	font-size: max( 14px, 0.9em );
	line-height: 1.4;
	color: var( --deferforms-text );
	background-color: var( --deferforms-surface-alt );
	border: 1px solid var( --deferforms-border );
	border-radius: 999px;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	font-size: 15px;
	line-height: 1;
	color: var( --deferforms-muted );
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-chip-remove:hover {
	color: var( --deferforms-primary-contrast );
	background-color: var( --deferforms-primary );
}

/* Panel */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-panel {
	position: absolute;
	z-index: 50;
	top: calc( 100% + 6px );
	right: 0;
	left: 0;
	padding: 6px;
	background-color: var( --deferforms-surface );
	border: 1px solid var( --deferforms-border );
	border-radius: var( --deferforms-radius );
	box-shadow: var( --deferforms-shadow );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-search {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	margin-bottom: 6px;
	padding: 8px 10px;
	font-family: inherit;
	font-size: max( 14px, 0.95em );
	color: var( --deferforms-text );
	background-color: var( --deferforms-bg );
	border: 1px solid var( --deferforms-border );
	border-radius: calc( var( --deferforms-radius ) - 2px );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-list {
	max-height: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	font-size: max( 14px, 0.97em );
	line-height: 1.35;
	color: var( --deferforms-text );
	border-radius: calc( var( --deferforms-radius ) - 3px );
	cursor: pointer;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-option:hover,
:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-option.is-active {
	background-color: var( --deferforms-surface-alt );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-option.is-selected {
	font-weight: 600;
}

/* Tick on the chosen row, drawn rather than typed so no font is involved. */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-option.is-selected::after {
	content: '';
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background-image: var( --deferforms-icon-check );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-option.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-select-empty {
	padding: 10px;
	font-size: max( 14px, 0.95em );
	color: var( --deferforms-muted );
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * File drop zone (assets/js/file.js)
 *
 * The plain `input[type=file]` rules above stay as the no-JS fallback; once the
 * script wraps the input it is hidden and this takes over.
 * ------------------------------------------------------------------------- */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	border: 0;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	padding: 26px 18px;
	font-size: max( 14px, 0.95em );
	line-height: 1.4;
	color: var( --deferforms-text );
	text-align: center;
	background-color: var( --deferforms-surface-alt );
	border: 1.5px dashed var( --deferforms-border );
	border-radius: var( --deferforms-radius );
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-zone:hover,
:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-zone:focus-visible {
	outline: none;
	border-color: var( --deferforms-primary );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-zone.is-dragging {
	border-color: var( --deferforms-primary );
	border-style: solid;
	background-color: var( --deferforms-bg );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-icon {
	width: 26px;
	height: 26px;
	background-image: var( --deferforms-icon-upload );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-hint {
	font-size: max( 14px, 0.9em );
	color: var( --deferforms-muted );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 10px;
	background-color: var( --deferforms-bg );
	border: 1px solid var( --deferforms-border );
	border-radius: var( --deferforms-radius );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-thumb {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	object-fit: cover;
	background-color: var( --deferforms-surface-alt );
	border-radius: calc( var( --deferforms-radius ) - 3px );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-thumb--doc {
	background-image: var( --deferforms-icon-doc );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-name {
	overflow: hidden;
	font-size: max( 14px, 0.95em );
	text-overflow: ellipsis;
	white-space: nowrap;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-size {
	font-size: max( 14px, 0.9em );
	color: var( --deferforms-muted );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-remove {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var( --deferforms-muted );
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-remove:hover {
	color: var( --deferforms-primary-contrast );
	background-color: var( --deferforms-primary );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-file-error {
	margin: 8px 0 0;
	font-size: max( 14px, 0.9em );
	color: var( --deferforms-error );
}

/*
 * The required marker. Contact Form 7 sets aria-required and leaves the visible
 * asterisk to whoever writes the label; validate.js adds one so the front end
 * says the same thing the builder preview does.
 */
/*
 * Our validation message.
 *
 * Only ever shown where CF7 has none of its own — our custom tags are not in its
 * schema, so nobody else says anything about them. It is deliberately identical
 * to `.wpcf7-not-valid-tip`: a visitor should not be able to tell which half of
 * the plugin is talking to them.
 */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-field-error {
	display: block;
	margin-top: 4px;
	font-size: max( 14px, 1em );
	font-weight: normal;
	color: var( --deferforms-error );
}

:is( .wpcf7-form, .deferforms-preview ) .deferforms-required {
	margin-left: 0.25em;
	color: var( --deferforms-error );
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Field caption
 *
 * Form_Serializer wraps a captioned field as `<label>Caption[tag]</label>`, or
 * `<fieldset><legend>` for choice groups — form.css styles that legend, and
 * nothing styled this label, so a text field's caption took whatever the theme
 * gave it while the builder drew it semibold. The two disagreed about the same
 * form; the legend's treatment is the one that wins.
 *
 * Deliberately not a bare `label`: `.wpcf7-list-item > label` is a single
 * option's own label and has its own inline-flex rule above. The containers
 * listed here are the ones a field-level label actually lands in — the form
 * itself, CF7's autop paragraph, a grid column, a conditional or step block.
 * ------------------------------------------------------------------------- */
:is( .wpcf7-form, .deferforms-preview ) > label,
:is( .wpcf7-form, .deferforms-preview ) :is( p, .deferforms-col, .deferforms-if, .deferforms-step ) > label {
	display: block;
	font-weight: 600;
	color: var( --deferforms-text );
}

/* The control sits *inside* the label, so the weight above reaches it — and
   the hint and error lines under a field along with it. */
:is( .wpcf7-form, .deferforms-preview ) label :is( input, select, textarea ),
:is( .wpcf7-form, .deferforms-preview ) label .wpcf7-form-control-wrap {
	font-weight: 400;
}

/*
 * The gap between caption and control.
 *
 * wpautop leaves a <br> between the two, which is what breaks the line today.
 * A block-level wrap breaks it on its own, so with both in place the control
 * would sit a whole blank line down. The <br> goes and the margin takes over,
 * which is also the only way the gap becomes a number we control.
 *
 * validate.js inserts the required star before that <br>; hidden or not, it is
 * still the node after the caption text, so the star lands where it did.
 */
:is( .wpcf7-form, .deferforms-preview ) label > br {
	display: none;
}

:is( .wpcf7-form, .deferforms-preview ) label > .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.35em;
}

/*
 * `hidden` is only a UA-stylesheet rule, so any author `display` beats it — the
 * filtered-out rows above set display:flex and would stay on screen. Restate it
 * with enough specificity for the elements the widgets toggle.
 */
:is( .wpcf7-form, .deferforms-preview ) :is(
	.deferforms-select-option,
	.deferforms-select-panel,
	.deferforms-select-empty
)[hidden] {
	display: none;
}

/*
 * Field rhythm. CF7 wraps each field in a <p> (autop), and our rows, steps and
 * conditional blocks are block-level too — one token drives the spacing of all
 * of them.
 *
 * Deliberately a descendant selector, not a child one: steps.js moves fields
 * into `.deferforms-step` wrappers, conditional fields sit inside `.deferforms-if`, and
 * grid fields inside `.deferforms-col`. A `>` rule reached none of those, so the
 * setting appeared to do nothing on any real form.
 *
 * `margin-top: 0` matters as much as the bottom: the browser's default 1em top
 * margin on <p> would otherwise fight the token.
 *
 * `.deferforms-fieldset` is in the list because wpautop leaves block-level HTML alone,
 * and a captioned radio/checkbox/file group is a <fieldset> — so it never got a
 * <p> to carry the gap, and those fields sat flush against the next one.
 */
:is( .wpcf7-form, .deferforms-preview ) :is( p, .deferforms-fieldset, .deferforms-row, .deferforms-step, .deferforms-if ) {
	margin-top: 0;
	margin-bottom: var( --deferforms-gap );
}

/* No trailing gap under the last field in any container. */
:is( .wpcf7-form, .deferforms-preview ) :is( p, .deferforms-fieldset, .deferforms-row, .deferforms-step, .deferforms-if ):last-child {
	margin-bottom: 0;
}