/* Explicit components and opt-in adapters for native WooCommerce controls. */
.ov-field,
.ov-wc-controls #page .wc-block-components-text-input {
  --ov-field-border: var(--color-border-control);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  width: 100%;
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.ov-field__label,
.ov-wc-controls #page .ov-field__label,
.ov-wc-controls #page .wc-block-components-text-input label {
  display: block;
  margin: 0;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-label);
  overflow-wrap: anywhere;
}

.ov-field__frame {
  position: relative;
  min-width: 0;
}

.ov-field .ov-field__control,
.ov-wc-controls #page .ov-field .ov-field__control,
.ov-wc-controls #page .ov-field .select2-selection--single,
.ov-wc-controls #page .wc-block-components-text-input input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--height-56);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  border: var(--focus-width) solid var(--ov-field-border);
  border-radius: var(--radius-16);
  background: var(--ov-field-background, var(--color-bg-surface));
  color: var(--color-text-primary);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: var(--font-size-field);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-field);
  letter-spacing: 0;
  transition:
    border-color var(--transition-interactive),
    background-color var(--transition-interactive);
}

.ov-field__control::placeholder,
.ov-wc-controls #page .wc-block-components-text-input input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
.ov-field textarea.ov-field__control {
  min-height: calc(var(--height-56) * 2 + var(--spacing-32));
  resize: vertical;
}
.ov-field select.ov-field__control {
  appearance: none;
  cursor: pointer;
}
.ov-field select.ov-field__control:has(option:checked[value=""]) {
  color: var(--color-text-muted);
}
.ov-field select.ov-field__control option {
  color: var(--color-text-primary);
}

.ov-field[data-kind="select"] .ov-field__control,
.ov-field[data-kind="password"] .ov-field__control {
  padding-inline-end: calc(var(--spacing-16) + var(--action-target-min));
}
.ov-field[data-status-icon]:is([data-state="error"], [data-state="valid"])
  .ov-field__control {
  padding-inline-end: calc(var(--spacing-16) + var(--spacing-32));
}

.ov-field[data-state="error"],
.ov-wc-controls #page .wc-block-components-text-input.has-error {
  --ov-field-border: var(--color-feedback-error-ink);
}
.ov-field[data-state="valid"] {
  --ov-field-border: var(--color-feedback-success-ink);
}
.ov-field .ov-field__control:focus,
.ov-wc-controls #page .ov-field .ov-field__control:focus,
.ov-wc-controls
  #page
  .ov-field
  .select2-container--focus
  .select2-selection--single,
.ov-wc-controls
  #page
  .ov-field
  .select2-container--open
  .select2-selection--single,
.ov-wc-controls #page .wc-block-components-text-input input:focus {
  border-color: var(--color-border-focus);
  outline: none;
  box-shadow: none;
  background: var(--ov-field-background, var(--color-bg-surface));
}
.ov-field:has(.ov-field__control:disabled),
.ov-wc-controls #page .wc-block-components-text-input:has(input:disabled) {
  opacity: 0.5;
}
.ov-field .ov-field__control:disabled,
.ov-wc-controls #page .ov-field .ov-field__control:disabled,
.ov-wc-controls #page .wc-block-components-text-input input:disabled {
  cursor: not-allowed;
  opacity: 1;
}
.ov-field .ov-field__control[readonly] {
  cursor: text;
}
.ov-field[data-kind="select"] .ov-field__control:is(:disabled, [readonly]),
.ov-field textarea.ov-field__control:is(:disabled, [readonly]) {
  background: var(--color-bg-subtle);
}

.ov-field__help,
.ov-field__feedback,
.ov-wc-controls #page .coupon-error-notice,
.ov-wc-controls #page .wc-block-components-validation-error {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small);
  overflow-wrap: anywhere;
}
.ov-field[data-state="error"] .ov-field__feedback,
.ov-wc-controls #page .coupon-error-notice,
.ov-wc-controls #page .wc-block-components-validation-error,
.ov-field__status--error {
  color: var(--color-feedback-error-ink);
}
.ov-field[data-state="valid"] .ov-field__feedback,
.ov-field__status--valid {
  color: var(--color-feedback-success-ink);
}

.ov-field__status,
.ov-field__chevron {
  position: absolute;
  inset-inline-end: var(--spacing-16);
  top: var(--spacing-16);
  pointer-events: none;
}
.ov-field__status {
  display: none;
}
.ov-field[data-state="error"] .ov-field__status--error,
.ov-field[data-state="valid"] .ov-field__status--valid {
  display: block;
}
.ov-field__frame .ov-icon {
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.ov-field__toggle {
  position: absolute;
  inset-inline-end: calc(var(--spacing-12) / 2);
  top: calc(var(--spacing-12) / 2);
  display: grid;
  place-items: center;
  width: var(--action-target-min);
  height: var(--action-target-min);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--transition-interactive);
}
@media (hover: hover) {
  .ov-field__toggle:hover:not(:disabled) {
    background: var(--color-bg-subtle);
  }
}
.ov-field__toggle:focus-visible,
.ov-options__input:focus-visible {
  outline: var(--focus-width) solid var(--color-border-focus);
  outline-offset: var(--focus-offset);
}
.ov-field__toggle:focus:not(:focus-visible) {
  outline: none;
}
.ov-field__toggle:disabled {
  background: transparent;
  cursor: not-allowed;
  opacity: 1 !important;
}

.ov-options {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  letter-spacing: 0;
}
.ov-options__title {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--spacing-8);
  padding: 0;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h4);
  overflow-wrap: anywhere;
}
.ov-options__choices {
  display: grid;
  gap: var(--spacing-12);
  min-width: 0;
  margin: var(--spacing-12) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.ov-options__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: var(--action-target-min);
  margin: 0;
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  cursor: pointer;
}
.ov-options__option > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ov-options .ov-options__input {
  flex: none;
  width: var(--spacing-24);
  height: var(--spacing-24);
  margin: 0;
  appearance: none;
  border: var(--focus-width) solid var(--color-border-control);
  border-radius: var(--radius-8);
  background: var(--color-bg-surface);
  cursor: inherit;
}
.ov-options .ov-options__input[type="radio"] {
  border-radius: var(--radius-full);
}
.ov-options .ov-options__input:checked {
  border-color: var(--color-bg-action-primary);
  background: var(--color-bg-action-primary);
}
.ov-options .ov-options__input[type="radio"]:checked {
  border-width: calc(var(--spacing-12) / 2);
  background: var(--color-text-primary);
}
.ov-options__check {
  position: absolute;
  inset-inline-start: calc(var(--spacing-8) + var(--focus-width));
  display: none;
  color: var(--color-text-primary);
  pointer-events: none;
}
.ov-options__check .ov-icon {
  width: var(--spacing-20);
  height: var(--spacing-20);
}
.ov-options__input:checked + .ov-options__check {
  display: block;
}
.ov-options:disabled {
  opacity: 0.5;
}
.ov-options:disabled .ov-field {
  opacity: 1;
}
.ov-options__option:has(:disabled) {
  cursor: not-allowed;
}
.ov-options__empty {
  margin: var(--spacing-8) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}
.ov-options__loading {
  display: grid;
  gap: var(--spacing-16);
  padding: var(--spacing-24) var(--spacing-8);
}
.ov-options__loading > [aria-hidden] {
  display: block;
  height: var(--spacing-20);
  border-radius: var(--radius-8);
  background: var(--color-bg-subtle);
}
.ov-options__loading > [aria-hidden]:last-child {
  width: 65%;
}
.ov-options__apply {
  margin-top: var(--spacing-12);
}
.ov-options__apply .ov-button {
  width: 100%;
}
.ov-options__apply :is(.ov-button__content, .ov-button__progress) {
  width: 100%;
  justify-content: space-between;
  text-align: start;
}
.ov-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  min-width: 0;
  margin: 0;
  padding: var(--spacing-40);
  border: 2px dashed var(--color-border-control);
  border-radius: var(--radius-16);
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--transition-interactive),
    opacity var(--transition-interactive);
}
.ov-upload__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  max-width: 100%;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.ov-upload__title {
  color: var(--color-text-primary);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}
.ov-upload__icon {
  display: flex;
  margin-bottom: var(--spacing-16);
  color: var(--color-text-primary);
  transition: all var(--transition-interactive);
  transform: translateY(var(--spacing-12));
}
@media (max-width: 767px) {
  .ov-upload__icon {
    margin-bottom: 0;
    transform: unset;
  }
}
.ov-upload__icon .ov-icon {
  width: var(--spacing-32);
  height: var(--spacing-32);
}
.ov-upload .ov-upload__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: inherit;
}
.ov-upload:is(:focus-within, .is-dragging) {
  border-color: var(--color-border-focus);
}
.ov-upload:hover:not(:has(:disabled)) {
  border-color: var(--ov-pink);
}
.ov-upload:hover:not(:has(:disabled)) .ov-upload__icon {
  color: var(--ov-pink);
  transform: translateY(0);
}
.ov-upload:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.ov-upload [hidden],
.ov-field [hidden],
.ov-options [hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ov-upload,
  .ov-upload__icon,
  .ov-field .ov-field__control,
  .ov-wc-controls #page .ov-field .ov-field__control,
  .ov-wc-controls #page .ov-field .select2-selection--single,
  .ov-wc-controls #page .ov-field .select2-selection__arrow,
  .ov-wc-controls #page .wc-block-components-text-input input,
  .ov-field__toggle {
    transition: none;
  }
}
@media (max-width: 767px) {
  .ov-upload {
    padding: 15px;
  }
  .ov-assembly-form .ov-assembly-purpose div:has(> .ov-assembly-choice) {
    grid-template-columns: 1fr !important;
  }
  .ov-assembly-choice__label {
    line-height: 1;
    font-size: var(--font-size-field);
  }
}
@media (forced-colors: active) {
  .ov-options .ov-options__input {
    appearance: auto;
    border: revert;
    background: revert;
  }
  .ov-options__input:checked + .ov-options__check {
    display: none;
  }
  .ov-field .ov-field__control,
  .ov-wc-controls #page .ov-field .ov-field__control,
  .ov-wc-controls #page .ov-field .select2-selection--single,
  .ov-wc-controls #page .wc-block-components-text-input input {
    border-color: CanvasText;
  }
  .ov-field .ov-field__control:focus,
  .ov-wc-controls #page .ov-field .ov-field__control:focus,
  .ov-wc-controls
    #page
    .ov-field
    .select2-container--focus
    .select2-selection--single,
  .ov-wc-controls
    #page
    .ov-field
    .select2-container--open
    .select2-selection--single,
  .ov-wc-controls #page .wc-block-components-text-input input:focus {
    outline: var(--focus-width) solid Highlight;
    outline-offset: var(--focus-offset);
  }
  .ov-field:has(.ov-field__control:disabled),
  .ov-wc-controls #page .wc-block-components-text-input:has(input:disabled),
  .ov-options:disabled {
    opacity: 1;
  }
  .ov-field .ov-field__control:disabled,
  .ov-wc-controls #page .wc-block-components-text-input input:disabled {
    color: GrayText;
    border-color: GrayText;
  }
}
/* Native floating labels become the kit's external labels without replacing inputs. */
.ov-wc-controls #page .wc-block-components-text-input label {
  position: static;
  order: -1;
  max-width: 100%;
  color: var(--color-text-primary);
  transform: none;
  cursor: inherit;
}
/* SelectWoo retains its search and keyboard behavior, using the same field shell. */
.ov-wc-controls #page .ov-field .select2-selection--single {
  height: auto;
  padding-inline-end: calc(var(--spacing-16) + var(--spacing-24));
}
.ov-wc-controls #page .ov-field .select2-selection__rendered {
  padding: 0;
  color: inherit;
  line-height: inherit;
}
.ov-wc-controls #page .ov-field .select2-selection__arrow {
  top: 0;
  right: var(--spacing-16);
  width: var(--spacing-16);
  height: 100%;
  background: url("../icons/select-chevron.svg") center / contain no-repeat;
  transition: transform var(--transition-interactive);
}
.ov-wc-controls #page .ov-field .select2-selection__arrow b {
  display: none;
}
.ov-wc-controls
  #page
  .ov-field
  .select2-container--open
  .select2-selection__arrow {
  transform: rotate(180deg);
}
.ov-wc-controls #page .ov-field.woocommerce-invalid,
.ov-wc-controls #page .ov-field:has(.has-error) {
  --ov-field-border: var(--color-feedback-error-ink);
}
#page .show-password-input::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-color: var(--color-text-primary);
  -webkit-mask: url("../icons/eye.svg") center / contain no-repeat;
  mask: url("../icons/eye.svg") center / contain no-repeat;
}
#page .show-password-input.display-password::after {
  -webkit-mask-image: url("../icons/eye-off.svg");
  mask-image: url("../icons/eye-off.svg");
}
@media (forced-colors: active) {
  #page .show-password-input::after {
    forced-color-adjust: none;
    background-color: ButtonText;
  }
}