/*
 * Souve Form UI Foundation 1.4.6-b1
 * Shared presentation layer only. Scoped to .souve-form-ui / [data-souve-form-ui].
 * It does not own validation, field definitions or submit behavior.
 */

.souve-form-ui,
[data-souve-form-ui] {
  --souve-form-surface: #fff;
  --souve-field-height: var(--wd-form-height, 42px);
  --souve-field-bg: var(--wd-form-bg, #fff);
  --souve-field-text: var(--wd-form-color, #111);
  --souve-field-placeholder: #8b8b8b;
  --souve-field-border-width: var(--wd-form-brd-width, 1px);
  --souve-field-border: var(--wd-form-brd-color, #d9d9d9);
  --souve-field-border-focus: var(--wd-form-brd-color-focus, #111);
  --souve-field-radius: var(--wd-form-brd-radius, 4px);
  --souve-field-label: #111;
  --souve-field-label-bg: var(--souve-form-surface, #fff);
  --souve-field-error: #d92d20;
  --souve-field-success: #1f9d55;
  --souve-field-disabled-bg: #f5f5f5;
  --souve-field-inline: 14px;
  --souve-field-textarea-min-height: 96px;
  --souve-field-transition: 150ms ease;

  /* Compatibility with the existing Souve toggle tokens. */
  --souve-toggle-w: var(--souve-tg-w, 32px);
  --souve-toggle-h: var(--souve-tg-h, 18px);
  --souve-toggle-gap: var(--souve-tg-pad, 8px);
  --souve-toggle-off: var(--souve-tg-off, #dcdcdc);
  --souve-toggle-on: var(--souve-tg-on, #111);
  --souve-toggle-knob: var(--souve-tg-knob, #fff);
}

/* ---------- Shared field state ---------- */
.souve-form-ui .souve-field-ui,
[data-souve-form-ui] .souve-field-ui {
  position: relative;
  box-sizing: border-box;
}

.souve-form-ui .souve-field-ui [data-souve-form-ui-label],
[data-souve-form-ui] .souve-field-ui [data-souve-form-ui-label] {
  color: var(--souve-field-label);
  box-sizing: border-box;
}

.souve-form-ui .souve-field-ui [data-souve-form-ui-label] label,
[data-souve-form-ui] .souve-field-ui [data-souve-form-ui-label] label {
  margin: 0;
  color: inherit;
  font: inherit;
}

.souve-form-ui .souve-field-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
.souve-form-ui .souve-field-ui textarea,
.souve-form-ui .souve-field-ui select,
.souve-form-ui .souve-field-ui .select2-container .select2-selection,
.souve-form-ui .souve-field-ui .choices__inner,
[data-souve-form-ui] .souve-field-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
[data-souve-form-ui] .souve-field-ui textarea,
[data-souve-form-ui] .souve-field-ui select,
[data-souve-form-ui] .souve-field-ui .select2-container .select2-selection,
[data-souve-form-ui] .souve-field-ui .choices__inner {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--souve-field-height);
  border: var(--souve-field-border-width) solid var(--souve-field-border);
  border-radius: var(--souve-field-radius);
  background: var(--souve-field-bg);
  color: var(--souve-field-text);
  box-shadow: none;
  outline: 0;
  transition: border-color var(--souve-field-transition), background-color var(--souve-field-transition), color var(--souve-field-transition);
}

.souve-form-ui .souve-field-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
.souve-form-ui .souve-field-ui textarea,
.souve-form-ui .souve-field-ui select,
[data-souve-form-ui] .souve-field-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
[data-souve-form-ui] .souve-field-ui textarea,
[data-souve-form-ui] .souve-field-ui select {
  padding-inline: var(--souve-field-inline);
}

.souve-form-ui .souve-field-ui textarea,
[data-souve-form-ui] .souve-field-ui textarea {
  min-height: var(--souve-field-textarea-min-height);
  padding-block: 11px;
  resize: vertical;
}

.souve-form-ui .souve-field-ui input::placeholder,
.souve-form-ui .souve-field-ui textarea::placeholder,
[data-souve-form-ui] .souve-field-ui input::placeholder,
[data-souve-form-ui] .souve-field-ui textarea::placeholder {
  color: var(--souve-field-placeholder);
}

.souve-form-ui .souve-field-ui.is-focused input:not([type="checkbox"]):not([type="radio"]),
.souve-form-ui .souve-field-ui.is-focused textarea,
.souve-form-ui .souve-field-ui.is-focused select,
.souve-form-ui .souve-field-ui.is-focused .select2-container .select2-selection,
.souve-form-ui .souve-field-ui.is-focused .choices__inner,
[data-souve-form-ui] .souve-field-ui.is-focused input:not([type="checkbox"]):not([type="radio"]),
[data-souve-form-ui] .souve-field-ui.is-focused textarea,
[data-souve-form-ui] .souve-field-ui.is-focused select,
[data-souve-form-ui] .souve-field-ui.is-focused .select2-container .select2-selection,
[data-souve-form-ui] .souve-field-ui.is-focused .choices__inner {
  border-color: var(--souve-field-border-focus);
}

.souve-form-ui .souve-field-ui.has-error input:not([type="checkbox"]):not([type="radio"]),
.souve-form-ui .souve-field-ui.has-error textarea,
.souve-form-ui .souve-field-ui.has-error select,
.souve-form-ui .souve-field-ui.has-error .select2-container .select2-selection,
.souve-form-ui .souve-field-ui.has-error .choices__inner,
[data-souve-form-ui] .souve-field-ui.has-error input:not([type="checkbox"]):not([type="radio"]),
[data-souve-form-ui] .souve-field-ui.has-error textarea,
[data-souve-form-ui] .souve-field-ui.has-error select,
[data-souve-form-ui] .souve-field-ui.has-error .select2-container .select2-selection,
[data-souve-form-ui] .souve-field-ui.has-error .choices__inner {
  border-color: var(--souve-field-error) !important;
}

.souve-form-ui .souve-field-ui.is-valid input:not([type="checkbox"]):not([type="radio"]),
.souve-form-ui .souve-field-ui.is-valid textarea,
.souve-form-ui .souve-field-ui.is-valid select,
.souve-form-ui .souve-field-ui.is-valid .select2-container .select2-selection,
.souve-form-ui .souve-field-ui.is-valid .choices__inner,
[data-souve-form-ui] .souve-field-ui.is-valid input:not([type="checkbox"]):not([type="radio"]),
[data-souve-form-ui] .souve-field-ui.is-valid textarea,
[data-souve-form-ui] .souve-field-ui.is-valid select,
[data-souve-form-ui] .souve-field-ui.is-valid .select2-container .select2-selection,
[data-souve-form-ui] .souve-field-ui.is-valid .choices__inner {
  border-color: var(--souve-field-success) !important;
}

.souve-form-ui .souve-field-ui.has-error [data-souve-form-ui-label],
[data-souve-form-ui] .souve-field-ui.has-error [data-souve-form-ui-label] {
  color: var(--souve-field-error);
}

.souve-form-ui .souve-field-ui.is-valid [data-souve-form-ui-label],
[data-souve-form-ui] .souve-field-ui.is-valid [data-souve-form-ui-label] {
  color: var(--souve-field-success);
}

.souve-form-ui .souve-field-ui.is-disabled input,
.souve-form-ui .souve-field-ui.is-disabled textarea,
.souve-form-ui .souve-field-ui.is-disabled select,
.souve-form-ui .souve-field-ui.is-disabled .select2-container .select2-selection,
.souve-form-ui .souve-field-ui.is-disabled .choices__inner,
[data-souve-form-ui] .souve-field-ui.is-disabled input,
[data-souve-form-ui] .souve-field-ui.is-disabled textarea,
[data-souve-form-ui] .souve-field-ui.is-disabled select,
[data-souve-form-ui] .souve-field-ui.is-disabled .select2-container .select2-selection,
[data-souve-form-ui] .souve-field-ui.is-disabled .choices__inner {
  background: var(--souve-field-disabled-bg);
  opacity: .7;
  cursor: not-allowed;
}

/* ---------- Standard ---------- */
.souve-form-ui--standard .souve-field-ui > [data-souve-form-ui-label],
[data-souve-form-ui][data-souve-form-ui-layout="standard"] .souve-field-ui > [data-souve-form-ui-label],
.souve-form-ui .souve-field-layout--standard > [data-souve-form-ui-label],
[data-souve-form-ui] .souve-field-layout--standard > [data-souve-form-ui-label] {
  position: static !important;
  display: block !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: none !important;
  transform: none !important;
  pointer-events: auto !important;
}

.souve-form-ui--standard .souve-field-ui,
[data-souve-form-ui][data-souve-form-ui-layout="standard"] .souve-field-ui,
.souve-form-ui .souve-field-layout--standard,
[data-souve-form-ui] .souve-field-layout--standard {
  padding-top: 0 !important;
}

/* ---------- Floating Outline ---------- */
.souve-form-ui--floating-outline .souve-field-ui:not(.souve-choice-ui),
[data-souve-form-ui][data-souve-form-ui-layout="floating-outline"] .souve-field-ui:not(.souve-choice-ui),
.souve-form-ui .souve-field-layout--floating-outline,
[data-souve-form-ui] .souve-field-layout--floating-outline {
  padding-top: 8px;
}

.souve-form-ui--floating-outline .souve-field-ui:not(.souve-choice-ui) > [data-souve-form-ui-label],
[data-souve-form-ui][data-souve-form-ui-layout="floating-outline"] .souve-field-ui:not(.souve-choice-ui) > [data-souve-form-ui-label],
.souve-form-ui .souve-field-layout--floating-outline > [data-souve-form-ui-label],
[data-souve-form-ui] .souve-field-layout--floating-outline > [data-souve-form-ui-label] {
  position: absolute !important;
  z-index: 3;
  top: 8px;
  left: 12px;
  width: auto;
  max-width: calc(100% - 24px);
  margin: 0 !important;
  padding: 0 6px !important;
  background: var(--souve-field-label-bg) !important;
  transform: translateY(-50%) scale(.85) !important;
  transform-origin: left center;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none !important;
}

/* ---------- Inset Label ---------- */
.souve-form-ui--inset-label .souve-field-ui:not(.souve-choice-ui) > [data-souve-form-ui-label],
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui:not(.souve-choice-ui) > [data-souve-form-ui-label],
.souve-form-ui .souve-field-layout--inset-label > [data-souve-form-ui-label],
[data-souve-form-ui] .souve-field-layout--inset-label > [data-souve-form-ui-label] {
  position: absolute !important;
  z-index: 3;
  left: var(--souve-field-inline);
  top: calc(var(--souve-field-height) / 2);
  width: auto;
  max-width: calc(100% - (var(--souve-field-inline) * 2));
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--souve-field-placeholder);
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%) !important;
  transform-origin: left top;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none !important;
  transition: top var(--souve-field-transition), font-size var(--souve-field-transition), color var(--souve-field-transition), transform var(--souve-field-transition);
}

.souve-form-ui--inset-label .souve-field-ui:not(.souve-choice-ui).is-focused > [data-souve-form-ui-label],
.souve-form-ui--inset-label .souve-field-ui:not(.souve-choice-ui).has-value > [data-souve-form-ui-label],
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui:not(.souve-choice-ui).is-focused > [data-souve-form-ui-label],
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui:not(.souve-choice-ui).has-value > [data-souve-form-ui-label],
.souve-form-ui .souve-field-layout--inset-label.is-focused > [data-souve-form-ui-label],
.souve-form-ui .souve-field-layout--inset-label.has-value > [data-souve-form-ui-label],
[data-souve-form-ui] .souve-field-layout--inset-label.is-focused > [data-souve-form-ui-label],
[data-souve-form-ui] .souve-field-layout--inset-label.has-value > [data-souve-form-ui-label] {
  top: 8px;
  color: var(--souve-field-label);
  font-size: 11px;
  font-weight: 500;
  transform: none !important;
}

.souve-form-ui--inset-label .souve-field-ui:not(.souve-choice-ui) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.souve-form-ui--inset-label .souve-field-ui:not(.souve-choice-ui) select,
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui:not(.souve-choice-ui) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui:not(.souve-choice-ui) select,
.souve-form-ui .souve-field-layout--inset-label input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.souve-form-ui .souve-field-layout--inset-label select,
[data-souve-form-ui] .souve-field-layout--inset-label input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-souve-form-ui] .souve-field-layout--inset-label select {
  padding-top: 16px;
  padding-bottom: 3px;
}

.souve-form-ui--inset-label .souve-field-ui:not(.souve-choice-ui) textarea,
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui:not(.souve-choice-ui) textarea,
.souve-form-ui .souve-field-layout--inset-label textarea,
[data-souve-form-ui] .souve-field-layout--inset-label textarea {
  padding-top: 23px;
}

.souve-form-ui--inset-label .souve-field-ui:not(.souve-choice-ui):not(.is-focused):not(.has-value) input::placeholder,
.souve-form-ui--inset-label .souve-field-ui:not(.souve-choice-ui):not(.is-focused):not(.has-value) textarea::placeholder,
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui:not(.souve-choice-ui):not(.is-focused):not(.has-value) input::placeholder,
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui:not(.souve-choice-ui):not(.is-focused):not(.has-value) textarea::placeholder,
.souve-form-ui .souve-field-layout--inset-label:not(.is-focused):not(.has-value) input::placeholder,
.souve-form-ui .souve-field-layout--inset-label:not(.is-focused):not(.has-value) textarea::placeholder,
[data-souve-form-ui] .souve-field-layout--inset-label:not(.is-focused):not(.has-value) input::placeholder,
[data-souve-form-ui] .souve-field-layout--inset-label:not(.is-focused):not(.has-value) textarea::placeholder {
  color: transparent;
}

/* Reset padding when a per-field override changes back from Inset. */
.souve-form-ui .souve-field-layout--standard input:not([type="checkbox"]):not([type="radio"]),
.souve-form-ui .souve-field-layout--standard select,
.souve-form-ui .souve-field-layout--floating-outline input:not([type="checkbox"]):not([type="radio"]),
.souve-form-ui .souve-field-layout--floating-outline select,
[data-souve-form-ui] .souve-field-layout--standard input:not([type="checkbox"]):not([type="radio"]),
[data-souve-form-ui] .souve-field-layout--standard select,
[data-souve-form-ui] .souve-field-layout--floating-outline input:not([type="checkbox"]):not([type="radio"]),
[data-souve-form-ui] .souve-field-layout--floating-outline select {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.souve-form-ui .souve-field-layout--standard textarea,
.souve-form-ui .souve-field-layout--floating-outline textarea,
[data-souve-form-ui] .souve-field-layout--standard textarea,
[data-souve-form-ui] .souve-field-layout--floating-outline textarea {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* ---------- Select2 ---------- */
.souve-form-ui .select2-container,
[data-souve-form-ui] .select2-container {
  width: 100% !important;
}

.souve-form-ui .select2-container .select2-selection--single,
[data-souve-form-ui] .select2-container .select2-selection--single {
  height: var(--souve-field-height);
  display: flex;
  align-items: center;
}

.souve-form-ui .select2-container .select2-selection--single .select2-selection__rendered,
[data-souve-form-ui] .select2-container .select2-selection--single .select2-selection__rendered {
  width: 100%;
  padding-inline: var(--souve-field-inline) 40px;
  line-height: normal;
}

.souve-form-ui--inset-label .souve-field-ui .select2-container .select2-selection--single .select2-selection__rendered,
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui .select2-container .select2-selection--single .select2-selection__rendered,
.souve-form-ui .souve-field-layout--inset-label .select2-container .select2-selection--single .select2-selection__rendered,
[data-souve-form-ui] .souve-field-layout--inset-label .select2-container .select2-selection--single .select2-selection__rendered {
  padding-top: 12px;
}

/* ---------- Choices.js ---------- */
.souve-form-ui .choices,
[data-souve-form-ui] .choices {
  width: 100%;
  margin-bottom: 0;
}

.souve-form-ui .choices__inner,
[data-souve-form-ui] .choices__inner {
  display: flex;
  align-items: center;
  padding-inline: var(--souve-field-inline) 40px;
}

.souve-form-ui--inset-label .souve-field-ui .choices__inner,
[data-souve-form-ui][data-souve-form-ui-layout="inset-label"] .souve-field-ui .choices__inner,
.souve-form-ui .souve-field-layout--inset-label .choices__inner,
[data-souve-form-ui] .souve-field-layout--inset-label .choices__inner {
  padding-top: 12px;
}

/* ---------- Opt-in checkbox -> toggle ---------- */
.souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox {
  position: relative;
  cursor: pointer;
}

.souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox input[type="checkbox"],
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox > span,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox > span {
  position: relative;
  display: inline-block;
  padding-left: calc(var(--souve-toggle-w) + var(--souve-toggle-gap));
  min-height: var(--souve-toggle-h);
  line-height: 1.2;
  cursor: pointer;
}

.souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox > span::before,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--souve-toggle-w);
  height: var(--souve-toggle-h);
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--souve-toggle-off);
  transition: background-color var(--souve-field-transition);
}

.souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox > span::after,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox > span::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: calc(var(--souve-toggle-h) - 4px);
  height: calc(var(--souve-toggle-h) - 4px);
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--souve-toggle-knob);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--souve-field-transition);
}

.souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked + span::before,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked + span::before {
  background: var(--souve-toggle-on);
}

.souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked + span::after,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked + span::after {
  transform: translate(calc(var(--souve-toggle-w) - var(--souve-toggle-h)), -50%);
}

.souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox input[type="checkbox"]:focus-visible + span::before,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .woocommerce-form__label-for-checkbox input[type="checkbox"]:focus-visible + span::before {
  outline: 2px solid var(--souve-field-border-focus);
  outline-offset: 2px;
}

/* Checkout Field Editor / THWCFE markup. */
@supports selector(:has(*)) {
  .souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"]),
  [data-souve-form-ui].souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"]) {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: calc(var(--souve-toggle-w) + var(--souve-toggle-gap));
    min-height: var(--souve-toggle-h);
    line-height: 1.2;
    cursor: pointer;
  }

  .souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"]) > input.thwcfe-input-field,
  [data-souve-form-ui].souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"]) > input.thwcfe-input-field {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"])::before,
  [data-souve-form-ui].souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"])::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--souve-toggle-w);
    height: var(--souve-toggle-h);
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--souve-toggle-off);
    transition: background-color var(--souve-field-transition);
  }

  .souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"])::after,
  [data-souve-form-ui].souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"])::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: calc(var(--souve-toggle-h) - 4px);
    height: calc(var(--souve-toggle-h) - 4px);
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--souve-toggle-knob);
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform var(--souve-field-transition);
  }

  .souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"]:checked)::before,
  [data-souve-form-ui].souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"]:checked)::before {
    background: var(--souve-toggle-on);
  }

  .souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"]:checked)::after,
  [data-souve-form-ui].souve-form-ui--toggle-checkboxes label.checkbox:has(> input.thwcfe-input-field[type="checkbox"]:checked)::after {
    transform: translate(calc(var(--souve-toggle-w) - var(--souve-toggle-h)), -50%);
  }
}

/* Fluent Forms checkbox markup. */
.souve-form-ui--toggle-checkboxes .ff-el-form-check-label,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"],
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"] + span,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"] + span {
  position: relative;
  display: inline-block;
  padding-left: calc(var(--souve-toggle-w) + var(--souve-toggle-gap));
  min-height: var(--souve-toggle-h);
  line-height: 1.2;
}

.souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"] + span::before,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"] + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--souve-toggle-w);
  height: var(--souve-toggle-h);
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--souve-toggle-off);
  transition: background-color var(--souve-field-transition);
}

.souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"] + span::after,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"] + span::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: calc(var(--souve-toggle-h) - 4px);
  height: calc(var(--souve-toggle-h) - 4px);
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--souve-toggle-knob);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--souve-field-transition);
}

.souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"]:checked + span::before,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"]:checked + span::before {
  background: var(--souve-toggle-on);
}

.souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"]:checked + span::after,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"]:checked + span::after {
  transform: translate(calc(var(--souve-toggle-w) - var(--souve-toggle-h)), -50%);
}

/* ---------- Opt-in custom radio ---------- */
.souve-form-ui--custom-radios input[type="radio"],
[data-souve-form-ui].souve-form-ui--custom-radios input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--souve-field-border);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: border-color var(--souve-field-transition);
}

.souve-form-ui--custom-radios input[type="radio"]::before,
[data-souve-form-ui].souve-form-ui--custom-radios input[type="radio"]::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
}

.souve-form-ui--custom-radios input[type="radio"]:checked,
[data-souve-form-ui].souve-form-ui--custom-radios input[type="radio"]:checked {
  border-color: var(--souve-toggle-on);
}

.souve-form-ui--custom-radios input[type="radio"]:checked::before,
[data-souve-form-ui].souve-form-ui--custom-radios input[type="radio"]:checked::before {
  background: var(--souve-toggle-on);
}

.souve-form-ui--custom-radios input[type="radio"]:focus-visible,
[data-souve-form-ui].souve-form-ui--custom-radios input[type="radio"]:focus-visible {
  outline: 2px solid var(--souve-field-border-focus);
  outline-offset: 2px;
}

/* Choice-state hardening. */
.souve-form-ui--toggle-checkboxes .ff-el-form-check-label::before,
.souve-form-ui--toggle-checkboxes .ff-el-form-check-label::after,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label::before,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label::after {
  content: none !important;
}

.souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"]:focus-visible + span::before,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes .ff-el-form-check-label > input.ff-el-form-check-input[type="checkbox"]:focus-visible + span::before {
  outline: 2px solid var(--souve-field-border-focus);
  outline-offset: 2px;
}

.souve-form-ui--toggle-checkboxes input[type="checkbox"]:disabled + span,
[data-souve-form-ui].souve-form-ui--toggle-checkboxes input[type="checkbox"]:disabled + span,
.souve-form-ui--custom-radios input[type="radio"]:disabled,
[data-souve-form-ui].souve-form-ui--custom-radios input[type="radio"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}