/* login.css — auth card + Google button + spinner (S7). Requires base.css. */
/* ==================== Login (Session 7) ==================== */

/* Card fade-in on load */
@keyframes authFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-card {
  animation: authFadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 24px 60px -20px rgba(245, 182, 34, 0.45),
              0 8px 20px -10px rgba(11, 46, 99, 0.12);
}

/* Form input — pill style with focus ring */
.auth-input {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 15px;
  color: #0C2340;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-input::placeholder {
  color: #9BAAC2;
}

.auth-input.is-error {
  border-color: #E01000 !important;
  background-color: rgba(224, 16, 0, 0.04);
}

.auth-input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(224, 16, 0, 0.18) !important;
}

/* Show/hide password eye button — 44×44px min tap target (01-mandatory.md
   rule 2). The 18px icon + Tailwind p-1.5 (6px) padding rendered a 30×30px
   box; box-sizing:border-box means fixing width/height here just insets the
   existing padding, icon stays visually centered. #passwordInput's
   padding-right is widened to match so the bigger box doesn't sit over the
   typed text. */
.password-toggle {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  background-color: rgba(11, 46, 99, 0.06);
}

#passwordInput {
  padding-right: 60px;
}

/* Inline error message */
.auth-error-msg {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* .auth-error-msg{display:flex} và Tailwind .hidden{display:none} có cùng độ ưu tiên
   (0,1,0) — login.css load sau tailwind.css nên display:flex luôn thắng, lỗi hiện
   sẵn dù JS đã gắn đúng class hidden. Nâng độ ưu tiên riêng cho tổ hợp 2 class. */
.auth-error-msg.hidden {
  display: none;
}

/* ============ Google button (official branding) ============ */
/* height/font-size matched to #loginSubmit's rendered size (52px / 16px) —
   both are equal-weight primary actions stacked in the same form, they
   should read as the same proportion (2026-09 typography fix). */
.google-btn {
  height: 52px;
  background-color: #FFFFFF;
  color: #3C4043;
  border: 1px solid #DADCE0;
  border-radius: 9999px;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  position: relative;
}

.google-btn:hover {
  background-color: #F8F9FA;
  border-color: #C0C4C8;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.16), 0 4px 12px -4px rgba(60, 64, 67, 0.12);
}

.google-btn:active {
  transform: scale(0.985);
  background-color: #F1F3F4;
}

.google-btn:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.google-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.google-btn.is-loading .google-btn-icon {
  display: none;
}

.google-btn.is-loading .google-btn-text::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -3px;
  border: 2px solid #DADCE0;
  border-top-color: #3C4043;
  border-radius: 50%;
  animation: authSpin 0.8s linear infinite;
}

.google-btn.is-loading .google-btn-text {
  font-size: 14px;
}

/* ============ Spinner (used in submit button + Google btn) ============ */
@keyframes authSpin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: authSpin 0.8s linear infinite;
}