/**
 * Form primitives: checkbox, text field with suffix, removable chip.
 * (Figma check box 168:11238, input-custome 185:13630, Chip 185:13479.)
 */
.c-checkbox {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--color-secondary);
  cursor: pointer;
}

.c-field {
  display: grid;
  gap: var(--space-1);
}

.c-field__label {
  color: var(--color-text-muted);
  font-family: var(--font-family-caption);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xs);
}

.c-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.75rem;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-white);
}

.c-field__control:focus-within {
  border-color: var(--color-focus);
}

.c-field__input {
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  appearance: textfield;
}

.c-field__input:focus {
  outline: none;
}

.c-field__input::-webkit-inner-spin-button,
.c-field__input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.c-field__suffix {
  color: var(--color-text-disabled);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 1.75rem;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-xl);
  background: var(--color-gray-50);
  color: var(--color-text-disabled);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-s);
  text-decoration: none;
}

.c-chip:hover {
  background: var(--color-gray-100);
}

.c-input,
.c-textarea,
.c-select {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.c-textarea {
  resize: vertical;
}

/* Select chevron: vuesax/outline/arrow-down (Figma input-custome) at the
   inline end, which is the left in this RTL-only theme. */
.c-select {
  padding-inline-end: calc(var(--space-8) + var(--space-2));
  appearance: none;
  background: var(--color-white) url("../../icons/arrow-down-16.svg") no-repeat left var(--space-4) center;
}

.c-input:focus,
.c-textarea:focus,
.c-select:focus {
  border-color: var(--color-focus);
  outline: none;
}

.c-notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.c-notice--success {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.c-notice--error {
  background: var(--color-error-50);
  color: var(--color-error-700);
}

/* WooCommerce notices (its own CSS is not loaded on themed templates). */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  list-style: none;
}

.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
  outline: none;
}

.woocommerce-message {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.woocommerce-info {
  background: var(--color-info-50);
  color: var(--color-info-700);
}

.woocommerce-error {
  background: var(--color-error-50);
  color: var(--color-error-700);
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  order: 2;
  color: inherit;
  font-weight: var(--font-weight-bold);
}