/* ==========================================================================
   Forms — Edge Pharma
   Full visual design for form fields (shared by Contact and, later, Join
   Us). Structural layout (row/group) stays mobile-first; responsive.css
   opens .form__row into two columns at the sm breakpoint.
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, 1fr);
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.form__required {
  color: var(--color-warning);
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  background-color: var(--color-white);
  transition: border-color 200ms var(--ease-default), box-shadow 200ms var(--ease-default);
}

.form__input,
.form__select {
  height: 52px;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-secondary);
}

.form__input:focus-visible,
.form__textarea:focus-visible,
.form__select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 94, 168, 0.15);
}

.form__textarea {
  resize: vertical;
  min-height: 140px;
}

.form__file {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  padding: var(--space-4);
  background-color: var(--color-white);
  transition: border-color 200ms var(--ease-default), box-shadow 200ms var(--ease-default);
}

.form__file::file-selector-button {
  height: 36px;
  margin-right: var(--space-4);
  padding-inline: var(--space-4);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sharp);
  cursor: pointer;
  transition: background-color 200ms var(--ease-default);
}

.form__file::file-selector-button:hover {
  background-color: var(--color-primary-dark);
}

.form__file:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 94, 168, 0.15);
}

.form__hint {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.form__error {
  font-size: var(--fs-caption);
  color: var(--color-warning);
}

.form__checkbox,
.form__radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

.form__checkbox input,
.form__radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.form__checkbox a,
.form__radio a {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}

.form__actions {
  display: flex;
  align-items: center;
}

.form__actions .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .form__actions .btn {
    width: auto;
  }
}