/* forms.css — CF7 form design (Figma "Formularze": node 164-103682).
 *
 * Everything is scoped under `.udi-form` (the form-embed wrapper) so the
 * legacy blog sidebar form (.askform) keeps its own styling.
 *
 * States per Figma:
 *  - default: border grey-500, text grey-900, placeholder grey-700
 *  - hover:   border grey-600
 *  - focus:   border grey-900 (open select: bottom corners squared)
 *  - error:   border/label/hint accent red
 *  - disabled: border grey-400, text grey-600, asterisk red-200
 */

/* ---------- Embed wrapper (section + article/case-study block) ---------- */

.section.form-embed { padding-block: var(--space-5xl); }

/* Inside an article / case-study column the block flows with the content. */
.form-embed--block { margin-block: var(--space-3xl); }

/* Block width (mobile always 100%) + horizontal position, set per embed in ACF. */
.form-embed--w100 { width: 100%; }
.form-embed--w66 { width: 66%; }
.form-embed--w50 { width: 50%; }
.form-embed--w33 { width: 33.333%; }
.form-embed--pos-left { margin-inline: 0 auto; }
.form-embed--pos-center { margin-inline: auto; }
.form-embed--pos-right { margin-inline: auto 0; }

.form-embed__header { display: flex; flex-direction: column; margin-bottom: var(--space-l); }
.form-embed__heading {
  font: 400 var(--fs-h-l) / var(--lh-h-l) var(--font-heading);
  letter-spacing: var(--ls-h-l);
  color: var(--color-grey-900);
}
.form-embed__heading em { font-style: italic; }
.form-embed__desc {
  margin-top: var(--space-2x);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-700);
}

/* ---------- Form flow ---------- */

.udi-form .wpcf7-form p { margin: 0; }
.udi-form .wpcf7-form p + p { margin-top: var(--space-2x); }
/* Consent + submit sit 20px below the field stack (Figma group gap) —
   regardless of what precedes them (paragraph, fieldset or a conditional div). */
.udi-form .wpcf7-form p:has(.wpcf7-acceptance),
.udi-form .wpcf7-form p:has(.wpcf7-submit) { margin-top: var(--space-m); }

/* Consent + privacy hint sit tight together: CF7's <br> between them plus the
   paragraph line-height opened a ~28px hole — stack as flex and drop the <br>. */
.udi-form .wpcf7-form p:has(.wpcf7-acceptance) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.udi-form .wpcf7-form p:has(.wpcf7-acceptance) br { display: none; }

/* Conditional group (<div data-udi-show-when>): keep the question rhythm around it. */
.udi-form .wpcf7-form fieldset + div[data-udi-show-when],
.udi-form .wpcf7-form p + div[data-udi-show-when] { margin-top: var(--space-xs); }

.udi-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
/* Figma questionnaire rhythm: 12px between a radio question and its follow-up
   "Jeśli tak…" input; 16px between consecutive question items.
   (.wpcf7-form in the selectors outranks the `.wpcf7-form p { margin: 0 }` reset.) */
.udi-form .wpcf7-form fieldset + p { margin-top: var(--space-xs); }
.udi-form .wpcf7-form fieldset + fieldset,
.udi-form .wpcf7-form p + fieldset { margin-top: var(--space-s); }

/* In-form section heading + intro text (health questionnaire pattern):
   <h3 class="udi-form__section">1. Dane Pacjenta</h3> */
.udi-form .udi-form__section {
  margin: var(--space-l) 0 var(--space-xs);
  font: 600 var(--fs-body-m) / var(--lh-body-m) var(--font-body);
  color: var(--color-grey-900);
}
.udi-form .udi-form__section:first-child { margin-top: 0; }
.udi-form .wpcf7-form p,
.udi-form .wpcf7-form legend { max-width: 100%; }

/* Vertical option group: [checkbox … class:udi-form__stack] / radio alike. */
.udi-form .udi-form__stack.wpcf7-checkbox,
.udi-form .udi-form__stack.wpcf7-radio,
.udi-form .udi-form__stack { flex-direction: column; align-items: flex-start; gap: var(--space-s); }

/* ---------- Labels ---------- */

.udi-form label,
.udi-form legend {
  display: block;
  padding: 0;
  font: 400 var(--fs-caption) / var(--lh-caption) var(--font-body);
  letter-spacing: var(--ls-caption);
  color: var(--color-grey-900);
}
.udi-form .udi-form__req { color: var(--color-accent); }
.udi-form label:has(.wpcf7-not-valid) { color: var(--color-accent); }
.udi-form label:has(.wpcf7-form-control:disabled) { color: var(--color-grey-600); }
.udi-form label:has(.wpcf7-form-control:disabled) .udi-form__req { color: #f59e9e; }

.udi-form .wpcf7-form-control-wrap { display: block; position: relative; }

/* Helper message under a field; --indent aligns with checkbox label text. */
.udi-form .udi-form__hint {
  display: block;
  font: 400 var(--fs-caption) / var(--lh-caption) var(--font-body);
  letter-spacing: var(--ls-caption);
  color: var(--color-grey-600);
}
.udi-form .udi-form__hint--indent { padding-left: var(--space-xl); }
.udi-form .udi-form__hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.udi-form .udi-form__hint a:hover { text-decoration: none; }

/* CF7 per-field validation message. */
.udi-form .wpcf7-not-valid-tip {
  display: block;
  font: 400 var(--fs-caption) / var(--lh-caption) var(--font-body);
  letter-spacing: var(--ls-caption);
  color: var(--color-accent);
}

/* ---------- Text inputs / textarea / native select ---------- */

.udi-form input[type="text"],
.udi-form input[type="email"],
.udi-form input[type="tel"],
.udi-form input[type="url"],
.udi-form input[type="number"],
.udi-form input[type="date"],
.udi-form textarea,
.udi-form select,
.udi-select__trigger {
  display: block;
  width: 100%;
  padding: var(--space-2x);
  border: 1px solid var(--color-grey-500);
  border-radius: var(--radius-s);
  background-color: var(--color-white);
  font: 400 var(--fs-body-s) / var(--lh-body-s) var(--font-body);
  color: var(--color-grey-900);
  appearance: none;
  transition: border-color .15s ease, background-color .15s ease;
}

/* Size M (Figma Size=M): taller vertical padding. */
.udi-form--m input[type="text"],
.udi-form--m input[type="email"],
.udi-form--m input[type="tel"],
.udi-form--m input[type="url"],
.udi-form--m input[type="number"],
.udi-form--m input[type="date"],
.udi-form--m select,
.udi-form--m .udi-select__trigger { padding-block: var(--space-xs); }

.udi-form ::placeholder { color: var(--color-grey-700); opacity: 1; }

.udi-form input:not(:disabled):hover,
.udi-form textarea:not(:disabled):hover,
.udi-form select:not(:disabled):hover { border-color: var(--color-grey-600); }

.udi-form input:focus,
.udi-form textarea:focus,
.udi-form select:focus { outline: none; border-color: var(--color-grey-900); }

.udi-form .wpcf7-not-valid { border-color: var(--color-accent); }

.udi-form input:disabled,
.udi-form textarea:disabled,
.udi-form select:disabled {
  border-color: var(--color-grey-400);
  color: var(--color-grey-600);
  cursor: not-allowed;
}
.udi-form input:disabled::placeholder,
.udi-form textarea:disabled::placeholder { color: var(--color-grey-600); }

/* Message-field height in px — Ustawienia → Formularze (inline style sets
   --udi-textarea-h on :root) or per embed (on the .udi-form wrapper). It must be
   `height`, not `min-height`: the textarea's own `rows` attribute (CF7 renders
   rows="10" ≈ 298px) beats any floor, so a floor could only ever make the field
   taller. Unset = `auto`, i.e. the rows-driven height CF7 gives it. */
.udi-form textarea { height: var(--udi-textarea-h, auto); min-height: 40px; resize: vertical; }

/* Native select fallback (no JS): chevron as background image. */
.udi-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.92 8.95L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.08 8.95' stroke='%23CECECE' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2x) center;
  background-size: 24px 24px;
}
.udi-form select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.92 8.95L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.08 8.95' stroke='%23E7E7E7' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.udi-form select.wpcf7-not-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.92 8.95L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.08 8.95' stroke='%23E70D0D' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Custom select (JS-enhanced combobox) ---------- */

.udi-select { position: relative; }
.udi-select select.udi-select__native-hidden { display: none; }

.udi-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2x);
  text-align: left;
  cursor: pointer;
}
.udi-select__value {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udi-select__value.is-placeholder { color: var(--color-grey-700); }

.udi-select__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: var(--color-grey-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.92 8.95L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.08 8.95' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.92 8.95L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.08 8.95' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s ease;
}

.udi-select__trigger:hover { border-color: var(--color-grey-600); }
.udi-select__trigger:focus-visible { outline: none; border-color: var(--color-grey-900); }
.udi-select.is-open .udi-select__trigger {
  border-color: var(--color-grey-900);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.udi-select.is-open .udi-select__icon { transform: rotate(180deg); }

.udi-select.is-error .udi-select__trigger { border-color: var(--color-accent); }
.udi-select.is-error .udi-select__icon { background-color: var(--color-accent); }

.udi-select.is-disabled .udi-select__trigger {
  border-color: var(--color-grey-400);
  color: var(--color-grey-600);
  cursor: not-allowed;
}
.udi-select.is-disabled .udi-select__icon { background-color: var(--color-grey-400); }

.udi-select__menu {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  margin: 0;
  padding: var(--space-3xs) var(--space-2x);
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  max-height: 228px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-grey-500) transparent;
}
.udi-select.is-open .udi-select__menu { display: block; }
/* The listbox takes programmatic focus when opened — the active-option
   highlight is the visible indicator, not an outline on the list itself. */
.udi-select__menu:focus,
.udi-select__menu:focus-visible { outline: none; }
.udi-select__menu::-webkit-scrollbar { width: 6px; }
.udi-select__menu::-webkit-scrollbar-thumb { background: var(--color-grey-500); border-radius: var(--radius-pill); }

.udi-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-2x);
  min-height: 48px;
  padding: var(--space-2x);
  border-radius: var(--radius-s);
  font: 400 var(--fs-body-s) / var(--lh-body-s) var(--font-body);
  color: var(--color-grey-900);
  cursor: pointer;
}
.udi-select__option-text {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.udi-select__option:hover,
.udi-select__option.is-active { background: var(--color-grey-100); }
.udi-select__option[aria-disabled="true"] { color: var(--color-grey-600); cursor: default; background: none; }

/* Tick on the selected option. */
.udi-select__option[aria-selected="true"]::after {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: var(--color-grey-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.75 7.75L15.36 14.22C13.22 16.78 12.16 18.06 10.75 18.06C9.34 18.06 8.28 16.78 6.14 14.22L4.75 12.55' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.75 7.75L15.36 14.22C13.22 16.78 12.16 18.06 10.75 18.06C9.34 18.06 8.28 16.78 6.14 14.22L4.75 12.55' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Checkbox / radio / acceptance ---------- */

.udi-form .wpcf7-checkbox,
.udi-form .wpcf7-radio,
.udi-form .wpcf7-acceptance { display: flex; flex-wrap: wrap; gap: 10px; }

.udi-form .wpcf7-list-item { display: block; margin: 0; }

.udi-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2x);
  font: 500 var(--fs-caption) / var(--lh-caption) var(--font-body);
  letter-spacing: var(--ls-caption);
  color: var(--color-grey-900);
  cursor: pointer;
}
/* Radio options are single-line → vertically center the label with the circle.
   Checkbox/acceptance keep flex-start so a multi-line consent stays aligned to
   its first line. */
.udi-form .wpcf7-radio .wpcf7-list-item label { align-items: center; }

.udi-form input[type="checkbox"],
.udi-form input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0;
  border: 1px solid var(--color-grey-500);
  background: var(--color-white) center / 12px 12px no-repeat;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.udi-form input[type="checkbox"] { border-radius: var(--radius-s); }
.udi-form input[type="radio"] { border-radius: var(--radius-pill); }

.udi-form input[type="checkbox"]:checked {
  border-color: var(--color-grey-900);
  background-color: var(--color-grey-900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3.5L7.3 6.73C6.24 8.02 5.7 8.66 5 8.66C4.3 8.66 3.76 8.02 2.7 6.73L2 5.9' stroke='%23F9F9F9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.udi-form input[type="radio"]:checked {
  border-color: var(--color-grey-900);
  background: radial-gradient(circle, var(--color-grey-100) 0 4px, var(--color-grey-900) 4.5px);
}

/* Figma focus ring: 1px, 2px outside the box, radius follows the control. */
.udi-form input[type="checkbox"]:focus-visible,
.udi-form input[type="radio"]:focus-visible {
  outline: 1px solid var(--color-grey-900);
  outline-offset: 1px;
}

/* Error: CF7 puts .wpcf7-not-valid on the group span. */
.udi-form .wpcf7-not-valid input[type="checkbox"],
.udi-form .wpcf7-not-valid input[type="radio"] { border-color: var(--color-accent); }
.udi-form .wpcf7-not-valid input[type="checkbox"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.udi-form .wpcf7-not-valid input[type="radio"]:checked {
  background: radial-gradient(circle, var(--color-grey-100) 0 4px, var(--color-accent) 4.5px);
  border-color: var(--color-accent);
}
.udi-form .wpcf7-not-valid input[type="checkbox"]:focus-visible,
.udi-form .wpcf7-not-valid input[type="radio"]:focus-visible { outline-color: var(--color-accent); }

.udi-form input[type="checkbox"]:disabled,
.udi-form input[type="radio"]:disabled {
  background-color: var(--color-grey-200);
  border-color: var(--color-grey-500);
  cursor: not-allowed;
}
.udi-form input[type="checkbox"]:disabled:checked { background-color: var(--color-grey-500); border-color: var(--color-grey-500); }
.udi-form input[type="radio"]:disabled:checked { background: radial-gradient(circle, var(--color-grey-100) 0 4px, var(--color-grey-500) 4.5px); }

/* ---------- Upload (drag & drop, JS-enhanced) ---------- */

.udi-upload input[type="file"].udi-upload__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.udi-upload__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-2x);
  border: 1px dashed var(--color-grey-500);
  border-radius: var(--radius-s);
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.udi-upload__drop:hover,
.udi-upload.is-drag .udi-upload__drop { background: var(--color-grey-100); }
.udi-upload:focus-within .udi-upload__drop { border-color: var(--color-grey-900); }
.udi-upload:has(.wpcf7-not-valid) .udi-upload__drop { border-color: var(--color-accent); }

.udi-upload__icon {
  width: 24px;
  height: 24px;
  background-color: var(--color-grey-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.4 6.32L15.89 3.49C19.7 2.22 21.77 4.3 20.51 8.11L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.92 14.08L7.4 13.24C1.69 11.34 1.69 8.23 7.4 6.32Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.11 13.65L13.69 10.06' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.4 6.32L15.89 3.49C19.7 2.22 21.77 4.3 20.51 8.11L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.92 14.08L7.4 13.24C1.69 11.34 1.69 8.23 7.4 6.32Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.11 13.65L13.69 10.06' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.udi-upload__text {
  font: 400 var(--fs-body-s) / var(--lh-body-s) var(--font-body);
  color: var(--color-grey-900);
}
.udi-upload__link { text-decoration: underline; text-underline-position: from-font; }

.udi-upload__files {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: var(--space-3xs) 0 0;
  padding: 0;
  list-style: none;
}
.udi-upload__file {
  display: flex;
  align-items: center;
  gap: var(--space-2x);
  padding: var(--space-3xs) var(--space-2x);
  background: var(--color-grey-100);
  border: 1px dashed var(--color-grey-500);
  border-radius: var(--radius-s);
}
.udi-upload__file-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 var(--fs-body-s) / var(--lh-body-s) var(--font-body);
  color: var(--color-grey-900);
}
.udi-upload__file-status {
  font: 400 var(--fs-caption) / var(--lh-caption) var(--font-body);
  letter-spacing: var(--ls-caption);
  color: var(--color-grey-600);
}
.udi-upload__remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background-color: var(--color-grey-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.17 14.83L14.83 9.17' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.83 14.83L9.17 9.17' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.17 14.83L14.83 9.17' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.83 14.83L9.17 9.17' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
.udi-upload__remove:hover,
.udi-upload__remove:focus-visible { background-color: var(--color-grey-900); outline: none; }

.udi-upload__file.is-error {
  background: var(--color-red-100);
  border-color: var(--color-accent);
}
.udi-upload__file.is-error .udi-upload__file-status { color: var(--color-accent); }
.udi-upload__file.is-error .udi-upload__remove { background-color: var(--color-accent); }

/* ---------- Submit button (design-system primary, full width) ---------- */

.udi-form .wpcf7-submit {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2x) var(--space-xl);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--color-grey-900);
  color: var(--color-grey-100);
  font: 500 var(--fs-body-s) / var(--lh-body-s) var(--font-body);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.udi-form .wpcf7-submit:hover { background: var(--color-black); text-decoration: underline; text-underline-offset: 2px; }
.udi-form .wpcf7-submit:focus-visible { outline: 2px solid var(--color-grey-900); outline-offset: 2px; text-decoration: none; }
.udi-form .wpcf7-submit:disabled { background: var(--color-grey-500); color: var(--color-grey-800); cursor: not-allowed; }

.udi-form .wpcf7-spinner { display: block; margin: var(--space-2x) auto 0; }

/* ---------- Response banners (success green / error red) ---------- */

.udi-form .wpcf7-response-output {
  margin: var(--space-m) 0 0;
  padding: 10px var(--space-s);
  border: 0 !important; /* CF7 core sets a coloured border inline-style-like specificity */
  border-radius: var(--radius-s);
  font: 400 var(--fs-caption) / var(--lh-caption) var(--font-body);
  letter-spacing: var(--ls-caption);
  color: var(--color-grey-900);
  background: var(--color-grey-100);
}
.udi-form form.sent .wpcf7-response-output {
  background: #cdf9cc;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2x);
}
/* Success tick-in-circle (Figma voucher banner). */
.udi-form form.sent .wpcf7-response-output::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-color: var(--color-grey-900);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.udi-form form.invalid .wpcf7-response-output,
.udi-form form.unaccepted .wpcf7-response-output,
.udi-form form.failed .wpcf7-response-output,
.udi-form form.spam .wpcf7-response-output,
.udi-form form.aborted .wpcf7-response-output,
.udi-form form.payment-required .wpcf7-response-output { background: var(--color-red-100); }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .section.form-embed { padding-block: var(--space-3xl); }
  .form-embed--w66,
  .form-embed--w50,
  .form-embed--w33 { width: 100%; }
}

/* iOS/Safari zooms the page in when a focused control's font-size is below 16px.
   Every form control goes to 16px on touch screens so tapping a field never
   rescales the layout. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  /* :not() pair keeps this above the per-type rules above (…input[type="text"]). */
  .udi-form input:not([type="checkbox"]):not([type="radio"]),
  .udi-form textarea,
  .udi-form select,
  .udi-form .udi-select__trigger,
  .udi-form .udi-select__option {
    font-size: 16px;
  }
}