/**
 * DevForms full frontend theme. Own styling, WPForms-compatible class names.
 *
 * Every colour / size / radius / spacing comes from a --wpforms-* custom
 * property. The defaults below are declared on :root (same variable names and
 * default values as WPForms) so a theme or the block editor can override them
 * on :root, on #wpforms-{id}.wpforms-block-{clientId} or inline on the
 * container, exactly like WPForms.
 *
 * GPL v2 or later.
 */

:root {
	/* Field. */
	--wpforms-field-border-radius: 3px;
	--wpforms-field-border-style: solid;
	--wpforms-field-border-size: 1px;
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-border-color: rgba( 0, 0, 0, 0.25 );
	--wpforms-field-border-color-spare: rgba( 0, 0, 0, 0.25 );
	--wpforms-field-text-color: rgba( 0, 0, 0, 0.7 );
	--wpforms-field-menu-color: #ffffff;

	/* Label. */
	--wpforms-label-color: rgba( 0, 0, 0, 0.85 );
	--wpforms-label-sublabel-color: rgba( 0, 0, 0, 0.55 );
	--wpforms-label-error-color: #d63637;

	/* Button. */
	--wpforms-button-border-radius: 3px;
	--wpforms-button-border-style: none;
	--wpforms-button-border-size: 1px;
	--wpforms-button-background-color: #066aab;
	--wpforms-button-border-color: #066aab;
	--wpforms-button-text-color: #ffffff;

	/* Page break. */
	--wpforms-page-break-color: #066aab;

	/* Background. */
	--wpforms-background-image: none;
	--wpforms-background-position: center center;
	--wpforms-background-repeat: no-repeat;
	--wpforms-background-size: cover;
	--wpforms-background-width: 100px;
	--wpforms-background-height: 100px;
	--wpforms-background-color: rgba( 0, 0, 0, 0 );
	--wpforms-background-url: none;

	/* Container. */
	--wpforms-container-padding: 0px;
	--wpforms-container-border-style: none;
	--wpforms-container-border-width: 1px;
	--wpforms-container-border-color: #000000;
	--wpforms-container-border-radius: 3px;
	--wpforms-container-shadow-size-box-shadow: none;

	/* Field size (medium). */
	--wpforms-field-size-input-height: 43px;
	--wpforms-field-size-input-spacing: 15px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-line-height: 19px;
	--wpforms-field-size-padding-h: 14px;
	--wpforms-field-size-checkbox-size: 16px;
	--wpforms-field-size-sublabel-spacing: 5px;
	--wpforms-field-size-icon-size: 1;

	/* Label size (medium). */
	--wpforms-label-size-font-size: 16px;
	--wpforms-label-size-line-height: 19px;
	--wpforms-label-size-sublabel-font-size: 14px;
	--wpforms-label-size-sublabel-line-height: 17px;

	/* Button size (medium). */
	--wpforms-button-size-font-size: 17px;
	--wpforms-button-size-height: 41px;
	--wpforms-button-size-padding-h: 15px;
	--wpforms-button-size-margin-top: 10px;

	/* Misc. */
	--wpforms-loading-opacity: 0.6;

	/* DevForms extras (not WPForms variables; safe to override the same way).
	   --wpforms-focus-ring-color, --wpforms-error-ring-color,
	   --wpforms-optional-badge-background and --wpforms-optional-badge-color are
	   intentionally NOT declared here: rules read them with a fallback to the
	   private --devforms-*-derived values below, so a theme can set them on :root
	   (or anywhere up the tree) and still win over the derived defaults. */
	--devforms-focus-ring-derived: rgba( 6, 106, 171, 0.25 );
	--devforms-error-ring-derived: rgba( 214, 54, 55, 0.2 );
	--devforms-optional-badge-background-derived: rgba( 0, 0, 0, 0.08 );
	--devforms-optional-badge-color-derived: rgba( 0, 0, 0, 0.6 );
	--wpforms-required-badge-background: #d63638;
	--wpforms-required-badge-color: #ffffff;
	--wpforms-transition-duration: 0.15s;
}

/* Focus ring derived from the button colour (25% alpha) where color-mix() exists.
   Declared on the container (not :root) so per-form overrides of the source
   variables (block editor / inline style) feed into the derived values. */
@supports ( color: color-mix( in srgb, red 50%, transparent ) ) {
	.wpforms-container-full,
	.wpforms-confirmation-container-full {
		--devforms-focus-ring-derived: color-mix( in srgb, var( --wpforms-button-background-color ) 25%, transparent );
		--devforms-error-ring-derived: color-mix( in srgb, var( --wpforms-label-error-color ) 20%, transparent );
		/* Derived from the label colour so the grey badge stays legible on dark themes. */
		--devforms-optional-badge-background-derived: color-mix( in srgb, var( --wpforms-label-color ) 10%, transparent );
		--devforms-optional-badge-color-derived: var( --wpforms-label-sublabel-color );
	}
}

.wpforms-container {
	margin: 1.5em auto;
	max-width: 100%;
}

/* Typography: comfortable Japanese line height, proportional kana/kanji spacing. */
.wpforms-container-full,
.wpforms-confirmation-container-full {
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt";
}

.wpforms-container-full :lang(ja) {
	font-feature-settings: "palt";
}

.wpforms-container-full *,
.wpforms-container-full *::before,
.wpforms-container-full *::after {
	box-sizing: border-box;
}

.wpforms-container-full,
.wpforms-confirmation-container-full {
	box-sizing: border-box;
	background-color: var( --wpforms-background-color );
	background-image: var( --wpforms-background-url );
	background-position: var( --wpforms-background-position );
	background-repeat: var( --wpforms-background-repeat );
	background-size: var( --wpforms-background-size );
	border-style: var( --wpforms-container-border-style );
	border-width: var( --wpforms-container-border-width );
	border-color: var( --wpforms-container-border-color );
	border-radius: var( --wpforms-container-border-radius );
	box-shadow: var( --wpforms-container-shadow-size-box-shadow );
	color: var( --wpforms-label-color );
	font-size: var( --wpforms-label-size-font-size );
	line-height: 1.6;
	padding: var( --wpforms-container-padding );
}

/* Loading state while an AJAX submission is in flight. */
.wpforms-container.wpforms-loading {
	opacity: var( --wpforms-loading-opacity );
	pointer-events: none;
}

.wpforms-hidden {
	display: none !important;
}

.wpforms-container .wpforms-title,
.wpforms-container .wpforms-description {
	margin: 0 0 var( --wpforms-field-size-input-spacing ) 0;
}

.wpforms-container .wpforms-title {
	color: var( --wpforms-label-color );
	font-size: calc( var( --wpforms-label-size-font-size ) * 1.5 );
	font-weight: 600;
	line-height: 1.3;
}

.wpforms-container .wpforms-description {
	color: var( --wpforms-label-sublabel-color );
	font-size: var( --wpforms-label-size-sublabel-font-size );
	line-height: 1.6;
}

.wpforms-field-container {
	clear: both;
}

.wpforms-field {
	position: relative;
	margin: 0 0 var( --wpforms-field-size-input-spacing ) 0;
}

/* Labels. */
.wpforms-field-label {
	display: block;
	color: var( --wpforms-label-color );
	font-weight: 600;
	font-size: var( --wpforms-label-size-font-size );
	line-height: var( --wpforms-label-size-line-height );
	float: none;
	margin: 0 0 var( --wpforms-field-size-sublabel-spacing ) 0;
	padding: 0;
}

.wpforms-field fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.wpforms-field legend.wpforms-field-label {
	padding: 0;
	width: 100%;
}

.wpforms-label-hide .wpforms-field-label,
.wpforms-field.wpforms-field-hidden .wpforms-field-label {
	display: none !important;
}

.wpforms-required-label {
	color: var( --wpforms-label-error-color );
}

/* Label badges: "Required" (red) and "Optional" (grey). The asterisk style
   keeps .wpforms-required-label only and is untouched by these rules.
   Selectors are deliberately heavier than the usual WPForms custom-CSS
   snippet "div.wpforms-container-full .wpforms-form .wpforms-required-label
   { color: ... }" (0,3,1) so a legacy asterisk-colour snippet cannot paint
   the badge text in the same red as its background. */
div.wpforms-container-full .wpforms-form .wpforms-required-label.wpforms-required-badge,
div.wpforms-container-full .wpforms-form .wpforms-optional-label {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 6px;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	white-space: nowrap;
	position: relative;
	top: -1px;
}

div.wpforms-container-full .wpforms-form .wpforms-required-label.wpforms-required-badge {
	background: var( --wpforms-required-badge-background );
	color: var( --wpforms-required-badge-color );
}

div.wpforms-container-full .wpforms-form .wpforms-optional-label {
	background: var( --wpforms-optional-badge-background, var( --devforms-optional-badge-background-derived ) );
	color: var( --wpforms-optional-badge-color, var( --devforms-optional-badge-color-derived ) );
}

/* Inputs. */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="url"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field input[type="password"],
.wpforms-field input[type="search"],
.wpforms-field select,
.wpforms-field textarea {
	background-color: var( --wpforms-field-background-color );
	border-radius: var( --wpforms-field-border-radius );
	border-style: var( --wpforms-field-border-style );
	border-width: var( --wpforms-field-border-size );
	border-color: var( --wpforms-field-border-color );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --wpforms-field-text-color );
	font-size: var( --wpforms-field-size-font-size );
	line-height: var( --wpforms-field-size-line-height );
	height: var( --wpforms-field-size-input-height );
	max-width: 100%;
	margin: 0;
	padding: 0 var( --wpforms-field-size-padding-h );
	width: 100%;
}

.wpforms-field select {
	background-color: var( --wpforms-field-menu-color );
}

.wpforms-field select[multiple] {
	height: auto;
	padding: calc( var( --wpforms-field-size-padding-h ) / 2 ) var( --wpforms-field-size-padding-h );
}

.wpforms-field textarea {
	height: auto;
	min-height: calc( var( --wpforms-field-size-input-height ) * 3 );
	padding: calc( var( --wpforms-field-size-padding-h ) / 2 ) var( --wpforms-field-size-padding-h );
	resize: vertical;
}

.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder {
	color: var( --wpforms-field-text-color );
	opacity: 0.5;
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="url"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field input[type="password"],
.wpforms-field input[type="search"],
.wpforms-field select,
.wpforms-field textarea {
	transition: border-color var( --wpforms-transition-duration ) ease, box-shadow var( --wpforms-transition-duration ) ease;
}

.wpforms-field input:hover:not(:focus):not(:disabled),
.wpforms-field select:hover:not(:focus):not(:disabled),
.wpforms-field textarea:hover:not(:focus):not(:disabled) {
	border-color: var( --wpforms-field-border-color-spare );
}

.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
	border-color: var( --wpforms-button-background-color );
	box-shadow: 0 0 0 3px var( --wpforms-focus-ring-color, var( --devforms-focus-ring-derived ) );
	outline: none;
}

.wpforms-field input:disabled,
.wpforms-field select:disabled,
.wpforms-field textarea:disabled,
.wpforms-field input[readonly],
.wpforms-field textarea[readonly] {
	cursor: not-allowed;
	opacity: 0.6;
}

.wpforms-field input.wpforms-error,
.wpforms-field select.wpforms-error,
.wpforms-field textarea.wpforms-error {
	border-color: var( --wpforms-label-error-color );
}

.wpforms-field input.wpforms-error:focus,
.wpforms-field select.wpforms-error:focus,
.wpforms-field textarea.wpforms-error:focus {
	border-color: var( --wpforms-label-error-color );
	box-shadow: 0 0 0 3px var( --wpforms-error-ring-color, var( --devforms-error-ring-derived ) );
}

/* Native select: own chevron so the control matches the text inputs. */
.wpforms-field select:not([multiple]) {
	-webkit-appearance: none;
	appearance: none;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-position: right var( --wpforms-field-size-padding-h ) center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	padding-right: calc( var( --wpforms-field-size-padding-h ) * 2 + 12px );
}

.wpforms-field select:not([multiple])::-ms-expand {
	display: none;
}

/* Sizes. */
.wpforms-field-small {
	max-width: 25%;
}

.wpforms-field-medium {
	max-width: 60%;
}

.wpforms-field-large {
	max-width: 100%;
}

/* Descriptions & sublabels. */
.wpforms-field-description {
	color: var( --wpforms-label-sublabel-color );
	font-size: var( --wpforms-label-size-sublabel-font-size );
	line-height: var( --wpforms-label-size-sublabel-line-height );
	margin: var( --wpforms-field-size-sublabel-spacing ) 0 0 0;
}

.wpforms-field-description.wpforms-field-description-before {
	margin: 0 0 var( --wpforms-field-size-sublabel-spacing ) 0;
}

.wpforms-field-sublabel {
	display: block;
	color: var( --wpforms-label-sublabel-color );
	font-size: var( --wpforms-label-size-sublabel-font-size );
	line-height: var( --wpforms-label-size-sublabel-line-height );
	font-weight: 400;
	margin: var( --wpforms-field-size-sublabel-spacing ) 0 var( --wpforms-field-size-sublabel-spacing ) 0;
}

/* Layout rows (float grid used by name/address/email-confirm). */
.wpforms-field-row {
	clear: both;
}

.wpforms-field-row::after,
.wpforms-field-container::after {
	content: "";
	clear: both;
	display: table;
}

.wpforms-field-row-block {
	box-sizing: border-box;
	padding-right: var( --wpforms-field-size-padding-h );
	float: left;
}

.wpforms-one-half {
	width: 50%;
}

.wpforms-one-third {
	width: 33.33%;
}

.wpforms-two-thirds {
	width: 66.66%;
}

.wpforms-one-fourth {
	width: 25%;
}

.wpforms-two-fourths {
	width: 50%;
}

.wpforms-three-fourths {
	width: 75%;
}

.wpforms-one-fifth {
	width: 20%;
}

.wpforms-two-fifths {
	width: 40%;
}

.wpforms-three-fifths {
	width: 60%;
}

.wpforms-four-fifths {
	width: 80%;
}

.wpforms-one-sixth {
	width: 16.66%;
}

.wpforms-two-sixths {
	width: 33.33%;
}

.wpforms-three-sixths {
	width: 50%;
}

.wpforms-four-sixths {
	width: 66.66%;
}

.wpforms-five-sixths {
	width: 83.33%;
}

.wpforms-first {
	clear: both !important;
	margin-left: 0 !important;
}

/* Choice lists. */
.wpforms-field ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Each choice is a flex row: the box/dot is vertically centred on the first
   text line and multi-line labels wrap under themselves, not under the box. */
.wpforms-field ul li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 calc( var( --wpforms-field-size-sublabel-spacing ) + 3px ) 0;
	clear: both;
}

.wpforms-field ul li label {
	display: inline-block;
	flex: 1 1 auto;
	min-width: 0;
	color: var( --wpforms-field-text-color );
	font-size: var( --wpforms-field-size-font-size );
	line-height: 1.5;
	font-weight: 400;
	cursor: pointer;
	margin: 0;
	position: relative;
	top: 0;
	max-width: 100%;
}

.wpforms-field ul input[type="radio"],
.wpforms-field ul input[type="checkbox"],
.wpforms-field input[type="checkbox"].wpforms-field-gdpr-checkbox {
	accent-color: var( --wpforms-button-background-color );
	flex: 0 0 auto;
	margin: calc( ( var( --wpforms-field-size-font-size ) * 1.5 - var( --wpforms-field-size-checkbox-size ) ) / 2 ) 0 0 0;
	float: none;
	height: var( --wpforms-field-size-checkbox-size );
	width: var( --wpforms-field-size-checkbox-size );
	vertical-align: middle;
	cursor: pointer;
}

.wpforms-field ul input[type="radio"]:focus-visible,
.wpforms-field ul input[type="checkbox"]:focus-visible,
.wpforms-field input[type="checkbox"].wpforms-field-gdpr-checkbox:focus-visible {
	outline: 2px solid var( --wpforms-button-background-color );
	outline-offset: 2px;
}

.wpforms-field ul li.wpforms-selected label {
	color: var( --wpforms-label-color );
}

.wpforms-list-inline ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	clear: none;
}

.wpforms-list-inline ul li {
	display: inline-flex;
	clear: none;
	margin-right: 0;
}

.wpforms-list-2-columns ul,
.wpforms-list-3-columns ul {
	display: grid;
	column-gap: var( --wpforms-field-size-padding-h );
}

.wpforms-list-2-columns ul {
	grid-template-columns: repeat( 2, 1fr );
}

.wpforms-list-3-columns ul {
	grid-template-columns: repeat( 3, 1fr );
}

.wpforms-list-2-columns ul li,
.wpforms-list-3-columns ul li {
	clear: none;
	float: none;
	width: auto;
}

/* Errors. */
.wpforms-error {
	color: var( --wpforms-label-error-color ) !important;
	display: block;
	font-size: var( --wpforms-label-size-sublabel-font-size );
	line-height: var( --wpforms-label-size-sublabel-line-height );
	font-style: normal;
	margin: var( --wpforms-field-size-sublabel-spacing ) 0 0 0;
}

label.wpforms-error,
em.wpforms-error {
	font-weight: 400;
}

.wpforms-error-container,
.wpforms-error-container-general .wpforms-error-container {
	background: var( --wpforms-error-ring-color, var( --devforms-error-ring-derived ) );
	border-style: var( --wpforms-field-border-style );
	border-width: var( --wpforms-field-border-size );
	border-color: var( --wpforms-label-error-color );
	border-left-width: 4px;
	border-radius: var( --wpforms-field-border-radius );
	color: var( --wpforms-label-error-color );
	font-size: var( --wpforms-label-size-sublabel-font-size );
	line-height: 1.6;
	font-weight: 600;
	margin: 0 0 var( --wpforms-field-size-input-spacing ) 0;
	padding: 10px var( --wpforms-field-size-padding-h );
}

.wpforms-error-container p {
	margin: 0;
}

.wpforms-error-container p + p {
	margin-top: var( --wpforms-field-size-sublabel-spacing );
}

.wpforms-error-styled-container .wpforms-error {
	color: var( --wpforms-label-error-color );
}

.wpforms-error-noscript,
.wpforms-field-hp {
	position: absolute !important;
	left: -9000px !important;
}

/* Submit & page buttons. */
.wpforms-submit-container {
	clear: both;
	margin: var( --wpforms-button-size-margin-top ) 0 0 0;
	position: relative;
}

.wpforms-submit,
.wpforms-page-button {
	/* -alt carries the real (transparent) background when the theme uses an outline button. */
	background-color: var( --wpforms-button-background-color-alt, var( --wpforms-button-background-color ) );
	border-style: var( --wpforms-button-border-style );
	border-width: var( --wpforms-button-border-size );
	border-color: var( --wpforms-button-border-color );
	border-radius: var( --wpforms-button-border-radius );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --wpforms-button-text-color-alt, var( --wpforms-button-text-color ) );
	cursor: pointer;
	display: inline-block;
	font-size: var( --wpforms-button-size-font-size );
	font-weight: 500;
	height: var( --wpforms-button-size-height );
	line-height: 1;
	margin: 0;
	padding: 0 var( --wpforms-button-size-padding-h );
	text-decoration: none;
	text-shadow: none;
	min-width: 120px;
	transition: box-shadow var( --wpforms-transition-duration ) ease, opacity var( --wpforms-transition-duration ) ease, transform var( --wpforms-transition-duration ) ease;
}

.wpforms-submit:hover,
.wpforms-submit:focus,
.wpforms-page-button:hover,
.wpforms-page-button:focus {
	background-color: var( --wpforms-button-background-color-alt, var( --wpforms-button-background-color ) );
	color: var( --wpforms-button-text-color-alt, var( --wpforms-button-text-color ) );
	box-shadow: inset 0 0 0 999px rgba( 0, 0, 0, 0.1 );
}

.wpforms-submit:active,
.wpforms-page-button:active {
	box-shadow: inset 0 0 0 999px rgba( 0, 0, 0, 0.18 );
	transform: translateY( 1px );
}

.wpforms-submit:focus-visible,
.wpforms-page-button:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 999px rgba( 0, 0, 0, 0.1 ), 0 0 0 3px var( --wpforms-focus-ring-color, var( --devforms-focus-ring-derived ) );
}

.wpforms-submit:disabled,
.wpforms-submit.wpforms-disabled,
.wpforms-page-button:disabled,
.wpforms-page-button.wpforms-disabled {
	opacity: var( --wpforms-loading-opacity );
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* Secondary look for "Previous" so the forward action stands out. */
.wpforms-page-button.wpforms-page-prev {
	background-color: transparent;
	border-style: solid;
	border-color: var( --wpforms-button-background-color );
	color: var( --wpforms-button-background-color );
}

.wpforms-page-button.wpforms-page-prev:hover,
.wpforms-page-button.wpforms-page-prev:focus {
	background-color: transparent;
	color: var( --wpforms-button-background-color );
	box-shadow: 0 0 0 3px var( --wpforms-focus-ring-color, var( --devforms-focus-ring-derived ) );
}

.wpforms-submit-spinner,
.wpforms-page-button-spinner {
	margin: 0 10px;
	position: relative;
	top: 5px;
	vertical-align: baseline;
}

/* Confirmation (no WPForms variable exists for these colours). */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
	border: 1px solid #bce0b2;
	background: #edfaea;
	border-radius: var( --wpforms-container-border-radius );
	color: #2c6b25;
	font-size: var( --wpforms-label-size-font-size );
	line-height: 1.6;
	margin: 1.5em 0;
	overflow-wrap: break-word;
	padding: 15px var( --wpforms-field-size-padding-h );
}

/* Divider / content. */
.wpforms-divider {
	border: 0;
	color: var( --wpforms-label-color );
	font-size: calc( var( --wpforms-label-size-font-size ) * 1.125 );
	font-weight: 600;
	margin: var( --wpforms-field-size-input-spacing ) 0 calc( var( --wpforms-field-size-input-spacing ) / 2 ) 0;
	padding: 0;
}

hr.wpforms-divider-hr {
	border: 0;
	border-top: var( --wpforms-field-border-size ) var( --wpforms-field-border-style ) var( --wpforms-field-border-color );
	margin: 0 0 var( --wpforms-field-size-input-spacing ) 0;
}

.wpforms-field-html,
.wpforms-field-content {
	color: var( --wpforms-field-text-color );
}

/* Rating (inline SVG icons; colour from --wpforms-rating-color set inline per field). */
.wpforms-field-rating-wrapper {
	--wpforms-rating-color: #e27730;
	display: block;
}

.wpforms-field-rating-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}

.wpforms-field-rating-item {
	cursor: pointer;
	display: inline-flex;
	line-height: 0;
	margin: 0;
	padding: 0;
	position: relative;
}

.wpforms-field-rating-item .wpforms-field-rating-icon {
	display: block;
	fill: var( --wpforms-field-border-color );
	height: calc( 28px * var( --wpforms-field-size-icon-size ) );
	width: calc( 28px * var( --wpforms-field-size-icon-size ) );
	transition: fill 0.15s ease, transform 0.15s ease;
}

.wpforms-field-rating-items.icon-size-small .wpforms-field-rating-icon {
	height: calc( 18px * var( --wpforms-field-size-icon-size ) );
	width: calc( 18px * var( --wpforms-field-size-icon-size ) );
}

.wpforms-field-rating-items.icon-size-large .wpforms-field-rating-icon {
	height: calc( 38px * var( --wpforms-field-size-icon-size ) );
	width: calc( 38px * var( --wpforms-field-size-icon-size ) );
}

.wpforms-field-rating-item.selected .wpforms-field-rating-icon,
.wpforms-field-rating-item.hover .wpforms-field-rating-icon {
	fill: var( --wpforms-rating-color );
}

.wpforms-field-rating-item.hover .wpforms-field-rating-icon {
	transform: scale( 1.1 );
}

.wpforms-field-rating-item input:focus-visible + .wpforms-field-rating-icon {
	outline: 2px solid var( --wpforms-rating-color );
	outline-offset: 2px;
	border-radius: 2px;
}

.wpforms-field-rating-labels {
	display: flex;
	justify-content: space-between;
	gap: var( --wpforms-field-size-padding-h );
	margin: var( --wpforms-field-size-sublabel-spacing ) 0 0 0;
}

.wpforms-field-rating-labels-position-above .wpforms-field-rating-labels {
	margin: 0 0 var( --wpforms-field-size-sublabel-spacing ) 0;
}

.wpforms-field-rating-labels .wpforms-field-sublabel {
	display: inline;
	margin: 0;
}

.wpforms-field-rating-labels .wpforms-field-labels-highest {
	text-align: right;
}

.wpforms-screen-reader-element {
	position: absolute !important;
	clip: rect( 0, 0, 0, 0 ) !important;
	clip-path: inset( 50% ) !important;
	height: 1px !important;
	width: 1px !important;
	border: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: -1px !important;
	white-space: nowrap !important;
}

/* Legacy rating markup (pre-1.1 cached pages). */
.wpforms-rating ul {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.wpforms-rating ul li input {
	position: absolute;
	left: -9999px;
}

/* Number slider. */
.wpforms-field-number-slider input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: var( --wpforms-field-border-color );
	border: 0;
	border-radius: var( --wpforms-field-border-radius );
	height: 8px;
	max-width: 60%;
	width: 100%;
	outline: none;
	padding: 0;
}

.wpforms-field-number-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var( --wpforms-button-background-color );
	border-radius: 50%;
	cursor: pointer;
	height: 20px;
	width: 20px;
}

.wpforms-field-number-slider input[type="range"]::-moz-range-thumb {
	background: var( --wpforms-button-background-color );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 20px;
	width: 20px;
}

.wpforms-field-number-slider-hint,
.wpforms-number-slider-value {
	display: block;
	color: var( --wpforms-label-sublabel-color );
	font-size: var( --wpforms-label-size-sublabel-font-size );
	line-height: var( --wpforms-label-size-sublabel-line-height );
	margin: var( --wpforms-field-size-sublabel-spacing ) 0 0 0;
}

.wpforms-field-number-slider-hint b {
	color: var( --wpforms-label-color );
}

/* Multi-page. */
.wpforms-page {
	display: block;
}

.wpforms-page[style*="display:none"] {
	display: none;
}

.wpforms-pagebreak-left,
.wpforms-pagebreak-right,
.wpforms-pagebreak-center,
.wpforms-pagebreak-split {
	clear: both;
	margin: var( --wpforms-button-size-margin-top ) 0 0 0;
}

.wpforms-pagebreak-left {
	text-align: left;
}

.wpforms-pagebreak-right {
	text-align: right;
}

.wpforms-pagebreak-center {
	text-align: center;
}

.wpforms-pagebreak-split {
	display: flex;
	justify-content: space-between;
}

.wpforms-pagebreak-split .wpforms-page-button-group:only-child:has( .wpforms-page-next ) {
	margin-left: auto;
}

.wpforms-page-button {
	margin-right: 10px;
}

.wpforms-pagebreak-right .wpforms-page-button,
.wpforms-pagebreak-split .wpforms-page-next {
	margin-right: 0;
	margin-left: 10px;
}

.wpforms-pagebreak-right .wpforms-page-button-group:first-child .wpforms-page-button,
.wpforms-pagebreak-split .wpforms-page-prev {
	margin-left: 0;
}

.wpforms-page-button-group {
	display: inline-block;
}

/* Page indicator (progress / circles / connector), coloured by --wpforms-page-break-color. */
.wpforms-page-indicator {
	margin: 0 0 var( --wpforms-field-size-input-spacing ) 0;
	color: var( --wpforms-label-color );
	font-size: var( --wpforms-label-size-font-size );
	line-height: var( --wpforms-label-size-line-height );
	outline: none;
}

.wpforms-page-indicator.progress .wpforms-page-indicator-page-title,
.wpforms-page-indicator.progress .wpforms-page-indicator-steps {
	font-weight: 600;
}

.wpforms-page-indicator.progress .wpforms-page-indicator-page-title:empty {
	display: none;
}

.wpforms-page-indicator.progress .wpforms-page-indicator-steps {
	color: var( --wpforms-label-sublabel-color );
	font-size: var( --wpforms-label-size-sublabel-font-size );
	font-weight: 500;
	margin-left: 8px;
}

.wpforms-page-indicator .wpforms-page-indicator-page-progress-wrap {
	background: var( --wpforms-field-border-color );
	border-radius: 999px;
	height: 8px;
	margin: calc( var( --wpforms-field-size-sublabel-spacing ) + 2px ) 0 0 0;
	overflow: hidden;
}

.wpforms-page-indicator .wpforms-page-indicator-page-progress {
	background: var( --wpforms-page-break-color );
	border-radius: 999px;
	height: 100%;
	transition: width 0.3s ease;
}

.wpforms-page-indicator.circles,
.wpforms-page-indicator.connector {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.wpforms-page-indicator.circles .wpforms-page-indicator-page {
	display: inline-flex;
	align-items: center;
	margin: 0 var( --wpforms-field-size-input-spacing ) var( --wpforms-field-size-sublabel-spacing ) 0;
}

/* Allow page navigation: indicator pages are clickable. */
.wpforms-page-indicator[data-allow-page-navigation="1"] .wpforms-page-indicator-page {
	cursor: pointer;
}

.wpforms-page-indicator .wpforms-page-indicator-page-number {
	background: var( --wpforms-field-border-color );
	border-radius: 50%;
	color: var( --wpforms-button-text-color );
	display: inline-block;
	font-weight: 600;
	height: 40px;
	line-height: 40px;
	text-align: center;
	width: 40px;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-page-indicator .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
	box-shadow: 0 0 0 3px var( --wpforms-focus-ring-color, var( --devforms-focus-ring-derived ) );
}

.wpforms-page-indicator .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
	background: var( --wpforms-page-break-color );
}

.wpforms-page-indicator.circles .wpforms-page-indicator-page-title {
	margin-left: var( --wpforms-field-size-sublabel-spacing );
}

.wpforms-page-indicator .wpforms-page-indicator-page.active .wpforms-page-indicator-page-title {
	font-weight: 600;
}

/* Connector: numbered bars joined into one line, with a triangle under the active step. */
.wpforms-page-indicator.connector .wpforms-page-indicator-page {
	flex: 1 1 0;
	position: relative;
	text-align: center;
	padding: 0 2px;
}

.wpforms-page-indicator.connector .wpforms-page-indicator-page-number {
	border-radius: 0;
	display: block;
	height: 34px;
	line-height: 34px;
	position: relative;
	width: auto;
}

.wpforms-page-indicator.connector .wpforms-page-indicator-page:first-child .wpforms-page-indicator-page-number {
	border-radius: var( --wpforms-field-border-radius ) 0 0 var( --wpforms-field-border-radius );
}

.wpforms-page-indicator.connector .wpforms-page-indicator-page:last-child .wpforms-page-indicator-page-number {
	border-radius: 0 var( --wpforms-field-border-radius ) var( --wpforms-field-border-radius ) 0;
}

.wpforms-page-indicator.connector .wpforms-page-indicator-page-triangle {
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var( --wpforms-page-break-color );
	bottom: -8px;
	display: none;
	height: 0;
	left: 50%;
	margin-left: -8px;
	position: absolute;
	width: 0;
}

.wpforms-page-indicator.connector .wpforms-page-indicator-page.active .wpforms-page-indicator-page-triangle {
	display: block;
}

.wpforms-page-indicator.connector .wpforms-page-indicator-page-title {
	display: block;
	font-size: var( --wpforms-label-size-sublabel-font-size );
	line-height: var( --wpforms-label-size-sublabel-line-height );
	margin-top: calc( var( --wpforms-field-size-sublabel-spacing ) + 6px );
}

/* CAPTCHA container (reCAPTCHA / hCaptcha / Turnstile). */
.wpforms-recaptcha-container {
	clear: both;
	margin: 0 0 var( --wpforms-field-size-input-spacing ) 0;
	padding: 0;
	position: relative;
}

.wpforms-recaptcha-container .g-recaptcha,
.wpforms-recaptcha-container .h-captcha,
.wpforms-recaptcha-container .wpforms-turnstile {
	display: block;
	min-height: 1px;
}

.wpforms-recaptcha-container.wpforms-is-recaptcha-type-invisible,
.wpforms-recaptcha-container.wpforms-is-recaptcha-type-v3 {
	margin: 0;
}

.wpforms-recaptcha-container .wpforms-error {
	display: block;
	margin-top: var( --wpforms-field-size-sublabel-spacing );
}

.wpforms-clear::after {
	content: "";
	clear: both;
	display: table;
}

/* Conditional hiding. */
.wpforms-conditional-hide {
	display: none !important;
}

/* GDPR / inline label (the li flex gap provides the spacing inside lists). */
.wpforms-field-label-inline {
	display: inline-block;
	color: var( --wpforms-field-text-color );
	font-size: var( --wpforms-field-size-font-size );
	line-height: 1.5;
	font-weight: 400;
	margin-left: 8px;
}

.wpforms-field ul li .wpforms-field-label-inline {
	margin-left: 0;
}

/* Date picker inherits inputs; the picker widget is styled by WP core. */
.ui-datepicker .ui-datepicker-title select {
	height: auto;
}

/* Responsive. */
@media (max-width: 600px) {
	.wpforms-field-small,
	.wpforms-field-medium,
	.wpforms-field-large {
		max-width: 100%;
	}

	.wpforms-one-half,
	.wpforms-two-fifths,
	.wpforms-one-fifth,
	.wpforms-three-fifths,
	.wpforms-mobile-full,
	.wpforms-field-row-responsive .wpforms-field-row-block,
	.wpforms-list-2-columns ul li,
	.wpforms-list-3-columns ul li {
		width: 100%;
	}

	.wpforms-field-row-responsive .wpforms-field-row-block,
	.wpforms-mobile-full {
		padding-right: 0;
	}

	.wpforms-list-2-columns ul,
	.wpforms-list-3-columns ul {
		grid-template-columns: 1fr;
	}

	/* Full-width primary action on phones; page buttons share the row. */
	.wpforms-submit-container .wpforms-submit {
		display: block;
		width: 100%;
	}

	.wpforms-pagebreak-left,
	.wpforms-pagebreak-right,
	.wpforms-pagebreak-center,
	.wpforms-pagebreak-split {
		display: flex;
		gap: 10px;
	}

	.wpforms-page-button-group {
		flex: 1 1 0;
	}

	.wpforms-page-button-group .wpforms-page-button {
		display: block;
		width: 100%;
		margin: 0;
	}

	.wpforms-page-indicator.circles .wpforms-page-indicator-page {
		margin-right: var( --wpforms-field-size-sublabel-spacing );
	}
}

/* Reduced motion: drop the decorative transitions. */
@media (prefers-reduced-motion: reduce) {
	.wpforms-container-full *,
	.wpforms-container-full *::before,
	.wpforms-container-full *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.wpforms-submit:active,
	.wpforms-page-button:active {
		transform: none;
	}
}