/* ================= FORM PRIMITIVES (dùng chung nhiều trang) ================= */
/* Biến dùng chung xem tại :root trong style.css. Dùng cho mọi form nhập liệu trên site
   (login.html, contact.html...) để không lặp lại style input/label/textarea ở từng trang. */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-100);
}

.form-field input,
.form-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(30, 27, 22, 0.18);
  border-radius: 8px;
  background-color: #fff;
  font-family: var(--font-manrope);
  font-size: 15px;
  color: var(--color-gray-100);
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-slate);
  opacity: 0.7;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-teal);
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row .form-field {
  flex: 1;
  min-width: 0;
}

@media screen and (max-width: 480px) {
  .form-row {
    flex-direction: column;
  }
}

/* Banner báo lỗi/thành công dùng chung mọi form (Liên hệ, Đăng nhập/Đăng ký,
   Thanh toán...) - trước đây chỉ có ở contact.css dưới tên .contact-alert,
   đổi tên chung + chuyển về đây để không phải nạp contact.css ở trang không
   liên quan tới Liên hệ. */
.form-alert {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-family: var(--font-manrope);
  font-size: 14px;
}

.form-alert--success { color: #2f6846; background: #edf7f0; }
.form-alert--error { color: #8a302c; background: #fff0ef; }
.form-alert ul { margin: 0; padding-left: 20px; }