/* Yaaleh Design System - forms.
   Source: YaalehDev/Comercial, branch homolog1404. */

.ds-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-label {
  color: var(--text-neutral-on-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-regular);
}

.ds-help {
  color: var(--text-neutral-on-disabled);
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  line-height: var(--line-height-regular);
}

.ds-input,
.ds-select,
.ds-textarea,
.ds-page .form-control.ds-input,
.ds-page .form-select.ds-select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text-neutral-on-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-regular);
  background: var(--color-white);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--border-radius);
  outline: none;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.ds-textarea {
  min-height: 120px;
  resize: vertical;
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  border-color: var(--focus-ring);
  box-shadow: var(--focus-shadow);
}

.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled,
.ds-field--disabled .ds-input,
.ds-field--disabled .ds-select,
.ds-field--disabled .ds-textarea {
  color: var(--text-neutral-on-disabled);
  background: var(--bg-neutral-disabled);
  cursor: not-allowed;
  opacity: 0.9;
}

.ds-input[readonly],
.ds-textarea[readonly],
.ds-field--readonly .ds-input,
.ds-field--readonly .ds-select,
.ds-field--readonly .ds-textarea {
  background: var(--color-white);
}

.ds-field--error .ds-input,
.ds-field--error .ds-select,
.ds-field--error .ds-textarea,
.ds-input.is-invalid,
.ds-select.is-invalid,
.ds-textarea.is-invalid {
  border-color: var(--color-red-50);
}

.ds-field--error .ds-label {
  color: var(--validation-input-destructive-label);
}

.ds-field--success .ds-input,
.ds-field--success .ds-select,
.ds-field--success .ds-textarea,
.ds-input.is-valid,
.ds-select.is-valid,
.ds-textarea.is-valid {
  border-color: var(--color-green-90);
}

.ds-field--success .ds-label {
  color: var(--validation-input-success-label);
}

.ds-field--warning .ds-input,
.ds-field--warning .ds-select,
.ds-field--warning .ds-textarea {
  border-color: var(--validation-input-warning-border);
}

.ds-field--warning .ds-label {
  color: var(--validation-input-warning-label);
}

.ds-field--share .ds-input,
.ds-field--share .ds-select,
.ds-field--share .ds-textarea {
  border-color: var(--validation-input-share-border);
}

.ds-field--share .ds-label {
  color: var(--validation-input-share-label);
}

.ds-message {
  font-size: var(--font-size-12);
  line-height: var(--line-height-regular);
}

.ds-message--error {
  color: var(--color-red-70);
}

.ds-message--success {
  color: var(--color-green-90);
}

.ds-message--warning {
  color: var(--color-orange-80);
}

.ds-message--share {
  color: var(--color-acqua-80);
}

.ds-check,
.ds-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ds-checkbox,
.ds-radio-input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand-70);
}

.ds-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}