/* ========================================
   BIVA V2 — PREMIUM FORM SYSTEM
======================================== */

.form-group {
  display: grid;
  gap: 9px;
}

.form-group + .form-group {
  margin-top: 20px;
}

.form-label {
  color:
    var(--biva-text);

  font-size: 0.88rem;
  font-weight: 750;
}

.form-control {
  width: 100%;
  min-height: 54px;
  padding: 0 17px;

  border:
    1px solid var(--biva-line);

  border-radius:
    var(--biva-radius-md);

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f7fbf9
    );

  color:
    var(--biva-ink);

  font: inherit;
  font-size: 0.95rem;

  box-shadow:
    inset 0 1px 2px
    rgba(3, 44, 35, 0.03);

  transition:
    border-color 170ms ease,
    box-shadow 170ms ease,
    background 170ms ease,
    transform 170ms ease;
}

.form-control::placeholder {
  color:
    var(--biva-subtle);
}

.form-control:hover {
  border-color:
    var(--biva-line-strong);
}

.form-control:focus {
  outline: none;

  border-color:
    var(--biva-green-500);

  background:
    var(--biva-white);

  box-shadow:
    var(--biva-focus-ring),
    inset 0 1px 2px
    rgba(3, 44, 35, 0.02);
}

.form-control:disabled {
  opacity: 0.66;
  cursor: not-allowed;

  background:
    #f0f4f2;
}

textarea.form-control {
  min-height: 130px;
  padding-top: 15px;
  padding-bottom: 15px;
  resize: vertical;
}

select.form-control {
  cursor: pointer;
}

.form-help {
  margin: 7px 0 0;

  color:
    var(--biva-muted);

  font-size: 0.81rem;
  line-height: 1.55;
}

.form-error {
  min-height: 22px;
  margin: 13px 0 0;

  color:
    var(--biva-danger);

  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.5;
}

.form-success {
  min-height: 22px;
  margin: 13px 0 0;

  color:
    var(--biva-success);

  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.5;
}

.form-row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .form-control {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}