/*
 * Forminator, wearing the design.
 *
 * The forms are built and maintained in Forminator (the owner's choice over the
 * custom blocks SPEC §8 proposed), and the plugin module
 * DynamixDev\Forms\Forminator_Design removes every stylesheet it ships. This
 * file is the only thing styling them, and it maps its markup onto the design's
 * own components, one for one:
 *
 *   form.forminator-custom-form   →  the children of `.form`
 *   .forminator-row               →  the row of fields
 *   .forminator-col               →  `.field`
 *   .forminator-label             →  `.field label` / `.legend`
 *   .forminator-input|textarea    →  `.input`
 *   label.forminator-checkbox     →  `.filter` chip
 *   .forminator-response-message  →  the sent state
 *
 * Loaded after dx-wp.css. If a Forminator update changes its markup, the right
 * fix is here — never in dx.css, and never by editing the design.
 */

/* ---------------------------------------------------------------------------
 * 1. Shell. `.dx-form` (the block wrapper) and the loading placeholder must
 *    leave no box, so the <form> becomes a direct child of `.form` and inherits
 *    its 20px gaps, exactly like the fields of the reference.
 * ------------------------------------------------------------------------- */
.dx .dx-form {
	display: contents;
}

.dx div.forminator-ui.forminator-custom-form {
	display: none;
}

/* The inline `display:none` Forminator ships with is removed server-side (see
 * Forms\Forminator_Design), so no !important here: the plugin must still be able
 * to hide the form when a submission succeeds. */
.dx form.forminator-custom-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

/* Forminator's honeypot is a real field it hides with its own stylesheet, which
 * is gone: without this it shows up as a stray label inside the form. */
.dx .forminator-hidden {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 2. Rows and fields. Each wrapper of the form definition is its own row, like
 *    the `.row` / `.field` children of the reference: Name and Email share the
 *    first one at `col-6` each, everything else takes a row of its own. The
 *    16px gap is the one the reference puts between Name and Email; the 20px
 *    between rows comes from the form above.
 * ------------------------------------------------------------------------- */
.dx .forminator-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
}

.dx .forminator-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dx .forminator-col-6 {
	flex: 1 1 200px;
}

.dx .forminator-col-12 {
	flex: 0 0 100%;
}

.dx .forminator-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.dx .forminator-label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

/* The design does not mark required fields with an asterisk; `required` and
 * `aria-required` stay on the input, which is what assistive tech reads. */
.dx .forminator-required {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 3. Inputs: the design's `.input`.
 * ------------------------------------------------------------------------- */
.dx .forminator-input,
.dx .forminator-textarea,
.dx select.forminator-select--field {
	min-height: 52px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1.5px solid var(--line);
	font: inherit;
	font-size: 16px;
	background: #fff;
	color: var(--ink);
	width: 100%;
	appearance: auto;
}

.dx .forminator-input:focus,
.dx .forminator-textarea:focus,
.dx select.forminator-select--field:focus {
	border-color: var(--teal);
	outline: none;
	box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.18);
}

.dx .forminator-textarea {
	padding: 14px 16px;
	resize: vertical;
	min-height: 120px;
}

/* ---------------------------------------------------------------------------
 * 4. "What do you need?": a checkbox group that looks like the design's chips.
 *    Checkboxes are better semantics than the reference's aria-pressed buttons
 *    for a multi-select, and they look identical.
 * ------------------------------------------------------------------------- */
.dx .forminator-field-checkbox .forminator-field {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

/* The reference's group label is a <legend>, and a legend carries 2px of
 * inline padding from the browser. Forminator uses a <span>, so the text would
 * start two pixels to the left. */
.dx .forminator-field-checkbox .forminator-label {
	flex: 0 0 100%;
	margin: 0 0 2px;
	padding-inline: 2px;
}

.dx label.forminator-checkbox {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	/* The reference chip is a <button>, whose content the browser centres half a
	 * pixel higher than a flex box does. One pixel of bottom padding lands the
	 * label on the same row of pixels. */
	padding: 0 18px 1px;
	border-radius: 999px;
	border: 1.5px solid #b9cdbf;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
	margin: 0;
}

.dx label.forminator-checkbox:has(input:checked) {
	background: var(--night);
	border-color: var(--night);
	color: #fff;
	font-weight: 600;
}

.dx label.forminator-checkbox input,
.dx .forminator-checkbox-box {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}

.dx label.forminator-checkbox:has(input:focus-visible) {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 5. Submit. The button carries the design's classes (added by the plugin
 *    module); the three wrappers around it must not generate a box, so it lands
 *    as a direct child of the form.
 * ------------------------------------------------------------------------- */
.dx .forminator-row-last,
.dx .forminator-row-last .forminator-col,
.dx .forminator-row-last .forminator-field {
	display: contents;
}

/* ---------------------------------------------------------------------------
 * 6. Messages. The error box is empty and hidden until it has something to say;
 *    the success box is the sent state of the design.
 * ------------------------------------------------------------------------- */
.dx .forminator-response-message[aria-hidden="true"],
.dx .forminator-response-message:empty {
	display: none;
}

.dx .forminator-response-message.forminator-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

/* Sent: the box becomes the centred panel of the design, and the heading and
 * the note of the form step aside. */
.dx .form:has(.forminator-success) {
	align-items: center;
	text-align: center;
	padding: 48px 36px;
}

.dx .form:has(.forminator-success) > :not(.dx-form) {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 7. SOS: one field and a button on the same line (SPEC §9, Contact 3).
 * ------------------------------------------------------------------------- */
.dx .dx-form--sos form.forminator-custom-form {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

.dx .dx-form--sos .forminator-row {
	flex: 1 1 240px;
	gap: 0;
}

.dx .dx-form--sos .forminator-col-12 {
	flex: 1 1 100%;
}

.dx .dx-form--sos .forminator-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}

.dx .dx-form--sos .forminator-input {
	border-color: var(--night);
}

.dx .dx-form--sos .forminator-response-message.forminator-success {
	flex: 0 0 100%;
	align-items: flex-start;
	text-align: left;
}

/* ---------------------------------------------------------------------------
   The error state.

   Forminator ships this already solved, but Forminator_Design drops every one
   of its stylesheets, so what was left was raw text: the summary unstyled, and
   its `forminator-screen-reader-only` list — which is meant for screen readers
   and nothing else — rendered as a visible bullet list repeating what the field
   already says underneath it.

   The design has no red. `--spark` (#FF7A2F) is the only alert colour in the
   palette, and it is used here at full strength for the border and the dot, and
   darkened for text, because #FF7A2F on white is about 2.9:1 and would fail the
   contrast SPEC §10 asks for.
   --------------------------------------------------------------------------- */

.dx .dx-form {
	--dx-alert: #ff7a2f;
	--dx-alert-ink: #9a3b12;
	--dx-alert-bg: #fff4ed;
}

/* The list inside the summary belongs to screen readers: Forminator says so
   with the class, and every message in it is already visible under its field. */
.dx .forminator-response-message .forminator-screen-reader-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The summary stays in the page — it carries role="alert", which is what
   announces the failure — but reads as one quiet line, not a wall.
   The guard is `.forminator-show`, not `:not(:empty)`. Forminator adds that
   class and only then calls jQuery's .show(): with an `:empty` guard the box is
   still display:none at that instant, so jQuery stamps an inline
   `style="display:block"` that beats this rule for good and the badge drops onto
   its own line. The hide rule further up still covers the other case — the
   element left empty and aria-hidden when the browser's own validation stopped
   the submit first. */
.dx .forminator-response-message.forminator-error.forminator-show {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1.5px solid var(--dx-alert);
	background: var(--dx-alert-bg);
	color: var(--dx-alert-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.dx .forminator-response-message.forminator-error.forminator-show::before {
	content: "!";
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--dx-alert);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* The field that is wrong says so on itself. */
.dx .forminator-has_error .forminator-input,
.dx .forminator-has_error .forminator-textarea,
.dx .forminator-has_error select.forminator-select--field,
.dx .dx-form--sos .forminator-has_error .forminator-input {
	border-color: var(--dx-alert);
}

/* aria-invalid is on the input itself and survives a class rename upstream. */
.dx .forminator-input[aria-invalid="true"],
.dx .forminator-textarea[aria-invalid="true"] {
	border-color: var(--dx-alert);
}

/* Without this the field shows an orange border inside a teal focus ring. */
.dx .forminator-has_error .forminator-input:focus,
.dx .forminator-has_error .forminator-textarea:focus,
.dx .forminator-has_error select.forminator-select--field:focus {
	box-shadow: 0 0 0 4px rgba(255, 122, 47, 0.18);
}

.dx .forminator-error-message {
	margin: 0;
	color: var(--dx-alert-ink);
	font-size: 14px;
	line-height: 1.5;
}

/* On the teal band a tinted panel disappears, so there the summary is solid
   white with the same border and ink. */
.dx .dx-form--sos .forminator-response-message.forminator-error.forminator-show {
	flex: 1 1 100%;
	background: #fff;
}

.dx .dx-form--sos .forminator-error-message {
	flex: 1 1 100%;
	color: var(--night);
}

/* Forminator offers logged-in editors an "Edit form" link under the form. It is
   a convenience for the admin and has no place in the design. */
.dx .forminator-edit-module-link,
.dx a.forminator-edit-module {
	display: none;
}