/* ============================================================
   NUVASTAY — Login / Auth Page
   ============================================================ */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  position: relative;
  overflow: hidden;
}

/* Subtle glow background */
.auth-page::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(227, 192, 106, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Card */
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background:    var(--bg-card);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding:       36px 32px;
  box-shadow:    var(--shadow-md);
}

/* Back button (top-left inside card) */
.auth-card__back {
  position: absolute;
  top: 14px;
  left: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.auth-card__back:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}
.auth-card__back .material-symbols-outlined { font-size: 22px; }

/* Wide variant for forms with more fields (e.g. signup step 3) */
.auth-card--wide { max-width: 540px; }

@media (max-width: 480px) {
  .auth-card { padding: 28px 20px; }
}

/* Brand block */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  text-align: center;
}
.auth-brand__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.auth-brand__name {
  font-family: var(--font-title);
  font-size: clamp(1.0rem, 4vw, 2.8rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

/* Header */
.auth-header { margin-bottom: 24px; }
.auth-header__title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.auth-header__subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* Form */
.auth-form { display: grid; gap: 20px; }

.auth-form__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-form__link {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: color var(--transition);
}
.auth-form__link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.auth-divider__text {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Social buttons */
.auth-socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:    var(--bg-secondary);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding:       12px;
  color:         var(--text-primary);
  font-size:     0.86rem;
  font-weight:   600;
  cursor:        pointer;
  transition: background var(--transition), border-color var(--transition);
}
.auth-social-btn:hover {
  background:   rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
.auth-social-btn svg { flex-shrink: 0; }

/* Footer link */
.auth-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.auth-footer__link {
  font-weight: 700;
  color: var(--color-primary);
  margin-left: 4px;
  transition: color var(--transition);
}
.auth-footer__link:hover { color: var(--color-primary-hover); }

/* Step indicator (multi-step flows) */
.auth-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}
.auth-steps__bar {
  height: 3px;
  width: 40px;
  border-radius: 9px;
  background: var(--border-subtle);
  transition: background var(--transition);
}
.auth-steps__bar--active { background: var(--color-primary); }

/* OTP (one-time password) digit inputs */
.otp-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.otp-input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  background:    var(--bg-secondary);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color:         var(--text-primary);
  caret-color:   var(--color-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.otp-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(227, 192, 106, 0.12);
}
.otp-input.is-filled { border-color: rgba(227, 192, 106, 0.4); }
.otp-sep {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 2px;
  flex-shrink: 0;
}

@media (max-width: 360px) {
  .otp-input { width: 40px; height: 48px; font-size: 1.2rem; }
}

/* Terms note */
.auth-terms {
  margin-top: 20px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.auth-terms__link {
  color: var(--color-primary);
  font-weight: 600;
  transition: color var(--transition);
}
.auth-terms__link:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* Page footer (below card) */
.page-footer {
  margin-top: 28px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.page-footer__links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 8px;
}
.page-footer__link {
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.page-footer__link:hover { color: var(--text-secondary); }
.page-footer__copy {
  font-size: 0.65rem;
  color: #333;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}