/* Login / OTP verification — see design-specs/account/login-otp.md */

.auth-header {
  background: #fff; border-bottom: 1px solid var(--color-grey-300); height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.auth-header__logo { width: 64px; height: 64px; }

.auth-page {
  background: var(--color-grey-50); min-height: calc(100vh - 120px);
  display: flex; align-items: center; justify-content: center; padding: 40px 20px 120px;
}
.auth-card {
  background: #fff; border-radius: 16px; padding: 40px; width: 483px; max-width: 100%;
  display: flex; flex-direction: column; gap: 17px;
}
.auth-card form { display: flex; flex-direction: column; gap: 16px; }

.btn-sso-google, .btn-sso-apple {
  width: 100%; border-radius: 8px; padding: 8px 16px; display: flex; align-items: center; justify-content: center;
  gap: 8px; font: 500 20px/23px var(--font-body); border: none; cursor: not-allowed; height: 56px;
}
.btn-sso-google { background: var(--color-grey-50); color: #000; }
.btn-sso-apple { background: #000; color: #fff; }

.divider { display: flex; align-items: center; gap: 8px; width: 100%; }
.divider hr { flex: 1; height: 1px; background: var(--color-grey-300); border: none; margin: 0; }
.divider span { font: 400 13px/16px var(--font-body); color: #000; white-space: nowrap; }

.form-input {
  width: 100%; height: 56px; background: #fff; border: 1px solid var(--color-grey-400); border-radius: 8px;
  padding: 0 16px; font: 300 16px/18px var(--font-body); color: #000;
}
.form-input::placeholder { color: var(--color-grey-500); }
.form-input:focus { outline: none; border-color: var(--color-brand-red); box-shadow: 0 0 0 3px rgba(175, 34, 52, 0.15); }

.btn-primary {
  width: 100%; height: 56px; background: var(--color-grey-500); border-radius: 8px; border: none;
  font: 500 20px/23px var(--font-body); color: #fff; cursor: pointer;
}
.btn-primary:hover { background: var(--color-brand-red); }

.btn-link-secondary {
  width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; background: none;
  border: none; font: 500 16px/20px var(--font-body); color: #0F0F0F; text-decoration: none;
}

/* OTP */
.otp-card { gap: 24px; }
.otp-title { font: 500 24px/32px var(--font-body); color: #000; text-align: center; margin: 0; }
.otp-subtitle-block { display: flex; flex-direction: column; }
.otp-subtitle { font: 300 16px/18px var(--font-body); color: #000; text-align: center; margin: 0; }
.otp-email { font: 500 16px/20px var(--font-body); color: #000; text-align: center; margin: 0; }
.otp-input {
  width: 100%; height: 56px; border: 1px solid var(--color-grey-300); border-radius: 8px; padding: 8px 16px;
  font: 300 16px/18px var(--font-body); color: #000; text-align: center; letter-spacing: 4px;
}
.otp-input::placeholder { color: var(--color-grey-500); letter-spacing: normal; }
.otp-input:focus { outline: none; border-color: var(--color-brand-red); box-shadow: 0 0 0 3px rgba(175, 34, 52, 0.15); }

.otp-resend-row { display: flex; align-items: center; justify-content: center; gap: 3px; height: 56px; font-size: 16px; color: #0F0F0F; }
.otp-resend-row .prompt { font-weight: 300; line-height: 18px; }
.otp-resend-row .timer { font-weight: 500; line-height: 20px; }
.otp-resend-row .resend-link { background: none; border: none; font-weight: 500; line-height: 20px; text-decoration: underline; cursor: pointer; color: var(--color-brand-red); }
.otp-back-link { display: flex; align-items: center; justify-content: center; height: 56px; font: 300 16px/18px var(--font-body); color: #0F0F0F; text-decoration: underline; }

@media (max-width: 480px) {
  .auth-header { height: auto; padding: 16px 0; }
  .auth-header__logo { width: 40px; height: 40px; }
  .auth-card { width: 100%; max-width: 389px; padding: 40px 20px; gap: 12px; }
  .btn-sso-google, .btn-sso-apple { height: 48px; font-size: 16px; line-height: 20px; }
  .btn-primary { height: 48px; font-size: 16px; line-height: 20px; }
  .otp-card { padding: 20px; }
  .otp-title { font-size: 20px; line-height: 23px; }
}