/**
 * FormForge front-end styles.
 *
 * Scoped under .ff- so themes are never affected, and driven by custom
 * properties so a theme can restyle the form without overriding selectors.
 * Contrast values are chosen to clear WCAG AA at 4.5:1 against white.
 */

.ff-form-wrap {
	--ff-border: #6b7280;
	--ff-border-focus: #1d4ed8;
	--ff-error: #b91c1c;
	--ff-text: #1f2937;
	--ff-muted: #4b5563;
	--ff-radius: 6px;
	--ff-gap: 1.25rem;

	color: var(--ff-text);
}

.ff-form__fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ff-gap);
}

.ff-field {
	flex: 1 1 100%;
	min-width: 0;
}

.ff-field--half { flex: 1 1 calc(50% - var(--ff-gap)); }
.ff-field--third { flex: 1 1 calc(33.333% - var(--ff-gap)); }

.ff-label,
.ff-legend {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

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

.ff-description {
	color: var(--ff-muted);
	font-size: 0.875rem;
	margin: 0 0 0.4rem;
}

.ff-input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	background: #fff;
	color: inherit;
	font: inherit;
}

.ff-textarea { min-height: 8rem; resize: vertical; }

/* Focus is never removed, only restyled. */
.ff-input:focus-visible,
.ff-button:focus-visible,
.ff-choice input:focus-visible {
	outline: 3px solid var(--ff-border-focus);
	outline-offset: 2px;
}

/* Errors are marked by border, icon-free text, and an announced message -
   never by colour alone, which excludes colour-blind users. */
.ff-input[aria-invalid="true"],
.ff-fieldset[aria-invalid="true"] {
	border-color: var(--ff-error);
	border-width: 2px;
}

.ff-error {
	color: var(--ff-error);
	font-size: 0.875rem;
	margin: 0.35rem 0 0;
	font-weight: 600;
}

.ff-fieldset {
	border: 1px solid transparent;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.ff-choices { display: flex; flex-direction: column; gap: 0.4rem; }
.ff-choice { display: flex; align-items: center; gap: 0.5rem; }
.ff-choice label { font-weight: 400; }

.ff-rating { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.ff-errors {
	border: 2px solid var(--ff-error);
	border-radius: var(--ff-radius);
	padding: 1rem;
	margin-bottom: var(--ff-gap);
}

.ff-errors__title { margin: 0 0 0.5rem; font-size: 1rem; }
.ff-errors__list { margin: 0; padding-left: 1.25rem; }

.ff-button {
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: var(--ff-radius);
	background: var(--ff-border-focus);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ff-button[disabled] { opacity: 0.65; cursor: not-allowed; }

.ff-form__actions { margin-top: var(--ff-gap); }

/* Hidden from sight and from assistive technology, but still a normal input
   to anything filling every field on the page. */
.ff-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ff-spinner {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 0.5em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ff-spin 0.7s linear infinite;
}

@keyframes ff-spin { to { transform: rotate(360deg); } }

/* Respect a user's stated preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
	.ff-spinner { animation: none; }
}

.ff-page-break { flex: 1 1 100%; height: 0; }

/* Themes do not reliably define this, and the templates depend on it to keep
   required-field and rating labels available to screen readers. */
.ff-form-wrap .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The confirmation takes its colour from the form's own accent rather than a
   fixed green. A form is dropped onto pages with very different palettes, and a
   hardcoded colour is wrong on most of them. Every value here is a custom
   property so the Elementor controls can drive it per placement. */
.ff-status--success {
	background: var(--ff-success-bg, transparent);
	color: var(--ff-success-color, inherit);
	border: var(--ff-success-border-width, 1px) solid var(--ff-success-border, var(--ff-border-focus));
	border-radius: var(--ff-success-radius, var(--ff-radius));
	padding: var(--ff-success-padding, 1.1rem 1.25rem);
	font-weight: 500;
	line-height: 1.6;
	text-align: var(--ff-success-align, left);
}

/* Phone: dialling code and number sit on one row and collapse gracefully. */
.ff-phone { display: flex; gap: 8px; }
.ff-phone__code { flex: 0 0 auto; width: auto; min-width: 7.5rem; }
.ff-phone__number { flex: 1 1 auto; min-width: 0; }

/* The code and the number stay on one row at every width. Stacking them made
   a single phone number look like two separate questions, which is worse on a
   small screen than a slightly narrower number field. */
.ff-phone { flex-wrap: nowrap; }

/* The `hidden` attribute must win over the spinner's own display rule; without
   this the loader is visible from the moment the page renders. */
.ff-spinner[hidden],
[hidden] { display: none !important; }

/* Combined date and time slot. */
.ff-datetime { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ff-datetime__part { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; }

.ff-sublabel {
	font-size: 0.75rem;
	color: var(--ff-muted);
	margin-bottom: 0.25rem;
	font-weight: 500;
}

.ff-field--datetime .ff-legend { padding: 0; }

.ff-form__title { margin: 0 0 0.35rem; }
.ff-form__description { margin: 0 0 1.25rem; color: var(--ff-muted); }

/* The asterisk is off unless the form asks for it. aria-required and the
   screen reader text stay in the markup either way, so assistive technology is
   told which fields are required even when nothing is drawn. */
.ff-form-wrap:not([data-ff-always-required]) .ff-required { display: none; }

/* An unanswered required field is marked on the field itself: a heavier red
   border plus a warning glyph drawn inside the control. The glyph matters -
   colour alone would leave the error invisible to a colour-blind visitor, and
   a background image costs no vertical space, which a line of text does. */
.ff-field.has-error .ff-input,
.ff-field.has-error .ff-combo__button,
.ff-field.has-error .ff-fieldset {
	border-color: var(--ff-error);
	border-width: 2px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b91c1c'%3E%3Cpath d='M8 1.5a1 1 0 0 1 .87.5l6 10.5A1 1 0 0 1 14 14H2a1 1 0 0 1-.87-1.5l6-10.5A1 1 0 0 1 8 1.5Zm0 3.75a.75.75 0 0 0-.75.75v3a.75.75 0 0 0 1.5 0v-3A.75.75 0 0 0 8 5.25Zm0 6.75a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 1rem 1rem;
	padding-right: 2.4rem;
}

/* Selects already carry their own arrow on the right, so the glyph moves left
   of it rather than sitting underneath it. */
.ff-field.has-error select.ff-input { background-position: right 1.9rem center; }
.ff-field.has-error .ff-combo__button { background-position: right 1.6rem center; }

/* Fieldset-based fields wrap their controls, so the glyph goes on the legend
   line where there is room for it. */
.ff-field.has-error .ff-fieldset {
	background-image: none;
	border-width: 0;
	padding-right: 0;
}

.ff-field--datetime.has-error .ff-input,
.ff-field--choice.has-error .ff-choice input {
	border-color: var(--ff-error);
}

/* The message stays in the document and stays linked by aria-describedby, so
   it is read out on focus, but it is not drawn unless the form asks for it.
   That keeps the layout from jumping while every error remains announced. */
.ff-form-wrap:not([data-ff-error-text]) .ff-error:not([hidden]) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The summary stays in the accessibility tree while taking no visual space. */
.ff-errors--sr:not([hidden]) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Classic theme: keep the native country select narrow so the number field
   keeps most of the row. */
.ff-phone__code { width: auto; max-width: 7rem; flex: 0 0 auto; }