/**
 * Relevant Forms front-end styles.
 */

.relevant-forms {
	max-width: 640px;
}

.relevant-forms-field {
	margin-bottom: 1rem;
}

.relevant-forms-field > label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.relevant-forms-field input[type="text"],
.relevant-forms-field input[type="email"],
.relevant-forms-field input[type="tel"],
.relevant-forms-field input[type="url"],
.relevant-forms-field input[type="date"],
.relevant-forms-field select,
.relevant-forms-field textarea {
	width: 100%;
	max-width: 100%;
}

/*
 * Number fields take a third of the text-field width: they hold short
 * numeric answers, and a full-width box overstates them.
 */
.relevant-forms-field input[type="number"] {
	width: calc( 100% / 3 );
	max-width: calc( 100% / 3 );
}

/*
 * Block editor embeds: the editor's Color and Typography panels write
 * inherited styles (color, font-size) onto the block wrapper. Form controls
 * do not inherit either property by default, so bridge them here — scoped
 * to the block so shortcode embeds keep their previous look. The field
 * wrapper class lifts the selector above plain `input[type=…]` theme rules
 * (e.g. Divi's) that tie on specificity and win on order.
 */
.wp-block-relevant-forms-form-selector .relevant-forms-field :is(input, select, textarea) {
	color: inherit;
	font-size: inherit;
}

.relevant-forms-help {
	color: #555;
	font-size: 0.9em;
	margin: 0.25rem 0 0;
}

.relevant-forms-error {
	color: #b32d2e;
	font-weight: 600;
	margin: 0.25rem 0 0;
}

.relevant-forms-success {
	background: #edfaef;
	border: 1px solid #46b450;
	border-radius: 3px;
	color: #1e6b22;
	padding: 0.75rem 1rem;
}

.relevant-forms-payment-notice {
	background: #fcf9e8;
	border: 1px solid #dba617;
	border-radius: 3px;
	color: #8a6d3b;
	padding: 0.75rem 1rem;
}

.relevant-forms-payment-amount,
.relevant-forms-payment-total {
	font-weight: 600;
	margin: 0.25rem 0 0;
}

.relevant-forms-payment-input {
	max-width: 12rem;
}

.relevant-forms-choice {
	display: block;
	margin: 0.25rem 0;
}

.relevant-forms-choice label {
	display: inline;
	font-weight: 400;
	margin-left: 0.25rem;
}

/*
 * Buttons adopt the theme's button styling through WordPress's
 * `wp-element-button` class. WordPress prints the default button element
 * styles (theme.json `styles.elements.button`) as Global Styles on the
 * front end, and themes override them with their own.
 *
 * The rule below restores that core fallback look in contexts that strip
 * WordPress's Global Styles entirely — the Divi 5 Visual Builder preview
 * does, which left the buttons looking like bare browser controls there.
 * It is wrapped in `:where()` so it carries ZERO specificity: every theme
 * and Global Styles rule always wins, and it only ever applies where
 * nothing else styles the button at all.
 */
:where(.relevant-forms) :where(.wp-element-button) {
	background-color: #32373c;
	border-width: 0;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
	text-transform: inherit;
}

.relevant-forms-submit,
.relevant-forms-page-back,
.relevant-forms-page-next {
	cursor: pointer;
}

.relevant-forms-page-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Honeypot: visually hidden but present in the DOM. */
.relevant-forms-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

/* Section separator fields: an optional heading above a horizontal rule. */

.relevant-forms-section-title {
	margin: 0 0 0.5em;
}

.relevant-forms-section-separator {
	border: 0;
	border-top: 1px solid currentColor;
	margin: 0.5em 0 0;
	opacity: 0.4;
}

/* Realtime character counter for limited paragraph fields ("28/500"). */

.relevant-forms-char-count {
	color: #646970;
	font-size: 0.875em;
	margin: 0.25em 0 0;
	text-align: right;
}

/* Conditional fields: keep the hidden attribute authoritative. */

.relevant-forms-field[hidden] {
	display: none;
}

/* Multi-page forms: one page is visible at a time, navigation sits at the
   bottom of each page and the step indicator doubles as the page eyebrow. */

.relevant-forms-page[hidden],
.relevant-forms-submit-row[hidden] {
	display: none;
}

.relevant-forms-page-indicator {
	color: #646970;
	font-size: 0.8125em;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 0.5em;
	text-transform: uppercase;
}

.relevant-forms-page-title {
	margin: 0 0 1em;
}

.relevant-forms-page-nav {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.relevant-forms-page-back,
.relevant-forms-page-next {
	cursor: pointer;
}

.relevant-forms-page-next {
	margin-left: auto;
}

/* Page break dividers only show when every page is stacked (no JavaScript). */

.relevant-forms-pagebreak {
	border: 0;
	border-top: 1px solid currentColor;
	margin: 1.5em 0;
	opacity: 0.4;
}

/* Content blocks: author-provided HTML between fields. */

.relevant-forms-content-title {
	margin: 0 0 0.5em;
}

.relevant-forms-content > :first-child {
	margin-top: 0;
}

.relevant-forms-content > :last-child {
	margin-bottom: 0;
}

.relevant-forms-content img {
	height: auto;
	max-width: 100%;
}

/* Entry preview: an optional review step listing the visitor's own answers. */

.relevant-forms-preview-heading {
	margin: 0 0 0.5em;
}

.relevant-forms-preview-notice {
	background: #f0f6fc;
	border-left: 4px solid #72aee6;
	margin: 0 0 1em;
	padding: 0.75em 1em;
	white-space: pre-line;
}

.relevant-forms-preview-rows {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.relevant-forms-preview-row {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0.5em 0;
}

.relevant-forms-preview-row[hidden],
.relevant-forms-preview-empty[hidden] {
	display: none;
}

.relevant-forms-preview-label {
	display: block;
	font-weight: 600;
}

.relevant-forms-preview-value {
	display: block;
	white-space: pre-line;
}

.relevant-forms-preview-empty {
	color: #646970;
	font-style: italic;
	margin: 0.75em 0 0;
}

/* Table styles put labels and values side by side. */

.relevant-forms-entry-preview--table .relevant-forms-preview-row,
.relevant-forms-entry-preview--table_compact .relevant-forms-preview-row {
	display: grid;
	gap: 0 1em;
	grid-template-columns: minmax(140px, 40%) 1fr;
}

/* Compact styles tighten the row spacing. */

.relevant-forms-entry-preview--compact .relevant-forms-preview-row,
.relevant-forms-entry-preview--table_compact .relevant-forms-preview-row {
	padding: 0.25em 0;
}