/* ==========================================================================
   Bảng Đăng nhập / Đăng ký — lớp trau chuốt riêng
   --------------------------------------------------------------------------
   Chỉ tác động trong phạm vi #login-modal (và phần dùng chung với
   #register-modal). Nạp SAU style.css nên đè được kiểu Bootstrap gốc mà
   không cần !important tràn lan.

   Vẫn giữ nguyên mọi id/class mà index.html đang móc JS vào:
   #login-form, #login-status, #loginBtn1, #remember-me, .form-control,
   .is-invalid, .error-message — file này chỉ lo phần nhìn.
   ========================================================================== */

.auth-modal .modal-dialog {
  max-width: 420px;
}

.auth-modal .modal-content {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(58, 33, 12, .28),
    0 4px 14px rgba(58, 33, 12, .16);
}

/* ---- Đầu bảng ---------------------------------------------------------- */
/* Nền kem rất nhạt (cùng bộ với bảng nav ☰ và menu tài khoản). Màu vàng đậm chỉ còn ở
   viên kim cương dưới chân — nhấn nhá, không phủ mảng.
   display: block chứ không flex: cả cụm tiêu đề canh giữa, nút ✕ tách ra tuyệt đối ở góc
   nên không còn chia header thành hai cột trái/phải nữa. */
.auth-modal .modal-header {
  position: relative;
  display: block;
  /* padding-top 1.6rem: bản có huy hiệu để 2rem để chừa chỗ cho nó, bỏ huy hiệu rồi mà
     giữ nguyên thì tiêu đề bị đẩy xuống, đầu bảng hở một khoảng trống vô cớ. */
  padding: 1.6rem 1.75rem 1.35rem;
  background: linear-gradient(180deg, #fffdf8 0%, #fdf6e6 100%);
  border-bottom: none;
}

/* Nét mảnh ngăn đầu bảng với thân bảng, mờ dần về hai đầu */
.auth-modal .modal-header::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(184, 120, 45, 0) 0%,
    rgba(184, 120, 45, .42) 50%,
    rgba(184, 120, 45, 0) 100%);
}

/* Viên kim cương nhỏ nằm giữa nét mảnh, nửa trên nền kem nửa dưới nền trắng.
   .modal-content có overflow: hidden nên không lo tràn ra ngoài góc bo. */
.auth-modal .modal-header::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: translate(-50%, 50%) rotate(45deg);
  background: linear-gradient(135deg, #f8d675 0%, #c8912f 100%);
}

.auth-modal__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
}

.auth-modal .modal-title {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .4px;
  color: #522546;
}

.auth-modal__subtitle {
  margin: 0;
  font-size: .85rem;
  font-weight: 500;
  color: #8a5a2b;
}

/* Tách khỏi luồng: header nay canh giữa, để nút ✕ nằm trong luồng thì nó chiếm chỗ và
   đẩy cụm tiêu đề lệch sang trái. */
.auth-modal .btn-close {
  position: absolute;
  top: .8rem;
  right: .95rem;
  z-index: 2;
  margin: 0;
  padding: .35rem;
  opacity: .55;
  transition: opacity .2s ease, transform .2s ease;
}

.auth-modal .btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* ---- Thân bảng ------------------------------------------------------------ */
.auth-modal .modal-body {
  padding: 1.6rem 1.75rem 1.75rem;
  background: #fff;
}

.auth-field {
  margin-bottom: 1.15rem;
}

.auth-field__label {
  display: block;
  margin-bottom: .4rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: #522546;
}

.auth-field__control {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.auth-field__icon {
  position: absolute;
  left: 14px;
  top: 15px;
  font-size: .95rem;
  color: #b08b62;
  pointer-events: none;
  transition: color .2s ease;
}

.auth-modal .modal-body .form-control {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 40px;
  font-size: .95rem;
  color: #3a2233;
  background: #fdfaf5;
  border: 1.5px solid #e7d9c6;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.auth-modal .modal-body .form-control::placeholder {
  color: #b7a9b3;
}

.auth-modal .modal-body .form-control:focus {
  outline: none;
  background: #fff;
  border-color: #e0b35a;
  box-shadow: 0 0 0 4px rgba(234, 181, 87, .22);
}

.auth-field__control:focus-within .auth-field__icon {
  color: #d39a43;
}

/* Nút hiện/ẩn mật khẩu */
.auth-field__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #a98f8c;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}

.auth-field__toggle:hover {
  color: #522546;
  background: rgba(82, 37, 70, .06);
}

/* Lỗi kiểm tra dữ liệu (JS thêm .is-invalid + .error-message) */
.auth-modal .modal-body .form-control.is-invalid {
  border-color: #dc3545;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, .12);
}

.auth-modal .error-message {
  flex-basis: 100%;
  width: 100%;
  margin-top: .35rem !important;
  font-size: .78rem;
  color: #dc3545;
}

/* ---- Hàng "ghi nhớ" --------------------------------------------------- */
.auth-modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -.15rem 0 1.15rem;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .84rem;
  color: #6b4f63;
  cursor: pointer;
  user-select: none;
}

.auth-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #d39a43;
  cursor: pointer;
}

/* ---- Trạng thái đăng nhập (thành công / lỗi từ server) --------------- */
.auth-modal__status {
  min-height: 1.1rem;
  margin-bottom: .5rem;
  font-size: .84rem;
  font-weight: 500;
  text-align: center;
}

.auth-modal__status:empty {
  margin-bottom: 0;
}

/* ---- Nút Đăng nhập -------------------------------------------------------- */
.auth-modal .auth-modal__submit {
  width: 100%;
  height: 48px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 12px;
  background: linear-gradient(140deg, #fff1a3 0%, #f6c95f 48%, #e3aa41 100%) !important;
  color: #4a2140 !important;
  border: 1px solid #d8a34c !important;
  box-shadow:
    0 10px 24px rgba(197, 138, 40, .28),
    inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: transform .15s ease, box-shadow .2s ease, background .3s ease;
}

.auth-modal .auth-modal__submit:hover,
.auth-modal .auth-modal__submit:focus {
  background: linear-gradient(140deg, #fff9c9 0%, #ffd777 48%, #efc061 100%) !important;
  box-shadow:
    0 14px 30px rgba(197, 138, 40, .35),
    inset 0 1px 0 rgba(255, 255, 255, .75);
  transform: translateY(-1px);
}

.auth-modal .auth-modal__submit:active {
  transform: translateY(1px);
  box-shadow:
    0 5px 14px rgba(197, 138, 40, .25),
    inset 0 2px 5px rgba(0, 0, 0, .12);
}

/* ---- Chân bảng -------------------------------------------------------- */
.auth-modal__footer {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid #f0e6d8;
  text-align: center;
  font-size: .86rem;
  color: #8a7b86;
}

.auth-modal__footer a {
  margin-left: .35rem;
  font-weight: 700;
  color: #c0392b;
  text-decoration: none;
}

.auth-modal__footer a:hover {
  text-decoration: underline;
}

/* ---- Điện thoại nhỏ ------------------------------------------------------- */
@media (max-width: 480px) {
  .auth-modal .modal-header {
    padding: 1.6rem 1.35rem 1.2rem;
  }

  .auth-modal .modal-body {
    padding: 1.35rem 1.35rem 1.5rem;
  }

  .auth-modal .modal-title {
    font-size: 1.72rem;
  }
}