/* Login page scoped styles */
:root {
  /* rely on existing variables in styles.css; no overrides here */
}

.login-page {
  background: radial-gradient(900px 450px at 60% 0%, #F5F1FF 0%, #FFF 60%);
}

.login-card {
  background: var(--clr-bg, #fff);
  border: 1px solid var(--clr-border, #E5E1FA);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(17, 12, 46, 0.08);
  padding: 28px;
}

.login-card__title {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.2;
  color: var(--clr-text, #131022);
  letter-spacing: -0.2px;
  margin: 0 0 6px;
}

.login-card__subtitle {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--clr-muted, #6B6E76);
  font-size: 14px;
  margin: 0;
}

.login-form .form-label {
  font-weight: 600;
  color: var(--clr-text, #131022);
}

.login-form .form-control {
  border-radius: 14px;
  border: 1px solid var(--clr-border, #E5E1FA);
  padding: 10px 14px;
  font-size: 15px;
}

.login-form .form-control:focus {
  border-color: var(--clr-primary, #6B4EFF);
  box-shadow: 0 0 0 4px rgba(107, 78, 255, 0.12);
}

.login-form .form-text {
  color: var(--clr-muted, #6B6E76);
}

.login-form .form-check-input {
  border-radius: 6px;
  border: 1px solid var(--clr-border, #E5E1FA);
}

.login-form .form-check-input:focus {
  border-color: var(--clr-primary, #6B4EFF);
  box-shadow: 0 0 0 3px rgba(107, 78, 255, 0.18);
}

.login-form__link {
  color: var(--clr-muted, #6B6E76);
  text-decoration: none;
}

.login-form__link:hover,
.login-form__link:focus {
  color: var(--clr-primary, #6B4EFF);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.login-submit-btn {
  height: 48px;
  font-weight: 600;
  border-radius: 9999px;
}

@media (max-width: 767.98px) {
  .login-card {
    padding: 22px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-form .form-control:focus,
  .login-form .form-check-input:focus {
    transition: none;
  }
}

/* Single OTP code input styling */
.otp-code-input {
  letter-spacing: 0.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 22px;
  padding-left: 1.1em; /* compensate for letter-spacing for 6 chars */
}

.otp-code-input::placeholder {
  letter-spacing: 0.6em;
  color: var(--clr-border, #E5E1FA);
}

@media (max-width: 575.98px) {
  .otp-code-input {
    font-size: 20px;
  }
}