/* 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(250, 170, 141, 0.45),
              0 8px 20px -10px rgba(255, 64, 0, 0.12);
}

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

.auth-input::placeholder {
  color: #B8AFA6;
}

.auth-input.is-error {
  border-color: #FF4000 !important;
  background-color: rgba(255, 64, 0, 0.04);
}

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

/* Show/hide password eye button */
.password-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  background-color: rgba(255, 64, 0, 0.06);
}

/* Inline error message */
.auth-error-msg {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============ Google button (official branding) ============ */
.google-btn {
  height: 48px;
  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: 15px;
  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(254, 239, 221, 0.4);
  border-top-color: #FEEFDD;
  border-radius: 50%;
  animation: authSpin 0.8s linear infinite;
}