/* ==========================================================================
   EQUIDEM DESIGN SYSTEM - FORMS (components/forms.css)
   Structured fields, sobri alerts, transparency notes and Select2 theming.
   Functional IDs/classes used by the JS layer are preserved verbatim.
   ========================================================================== */

.field-error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  display: none;
}

.required-marker {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

.form-label .required-marker {
  margin-left: var(--space-1);
}

.personal-details-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background-color: var(--color-bg-surface-alt);
  /* Hidden until donations.js reveals it (it sets an inline display value). */
  display: none;
}

/* State containers toggled by membership.js / donations.js / payment.js */
#success-message,
#sumup-payment-container,
#general-error {
  display: none;
}

#tier-error-wrapper {
  text-align: center;
  margin-top: var(--space-2);
}

.c-error-lg {
  font-size: var(--font-size-base);
}

.step-cta {
  max-width: 400px;
  width: 100%;
}

/* ---- Fields bound to the design system ---- */
.form-control,
.form-select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  color: var(--color-text-main);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.form-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  background-color: var(--color-bg-surface);
  box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.14);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(166, 38, 38, 0.15);
}

.form-check-input {
  accent-color: var(--color-primary);
  border-color: var(--color-border-strong);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.14);
}

/* ---- Alerts (membership/donation status messages) ---- */
.alert {
  border-width: 1px;
  border-radius: var(--radius-md);
}

.alert-success {
  color: var(--color-civic-forest);
  background-color: var(--color-success-light);
  border-color: rgba(30, 94, 58, 0.28);
}

.alert-danger {
  color: var(--color-civic-crimson-dark);
  background-color: var(--color-danger-light);
  border-color: rgba(158, 42, 43, 0.28);
}

.alert-info {
  color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
  border-color: rgba(11, 37, 69, 0.22);
}

/* ---- ETS transparency note (forms, donations, newsletter) ---- */
.c-transparency-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-civic-forest);
  border-radius: var(--radius-sm);
  background-color: var(--color-success-light);
  font-size: var(--font-size-xs);
  line-height: 1.55;
  color: var(--color-text-subheading);
}

.c-transparency-note i {
  color: var(--color-civic-forest);
  margin-top: 2px;
}

/* ---- Select2 overrides ---- */
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.5rem + 2px);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.14);
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  padding-left: 0;
  font-family: var(--font-subheader);
}