/* =========================================================
   DUITJOM — AUTH SUB-PAGES (Register / Forgot Password)
   Reuses the visual language of auth/login.css so these pages
   read as a natural continuation of the login screen:
   blue fintech palette, translucent glass card, soft orbs.
   Standalone stylesheet — no Tailwind dependency.
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

body.auth-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 2rem 1rem 1.5rem;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: #0f172a;
  background: #f4f8ff;
  -webkit-text-size-adjust: 100%;
  animation: authPageIn .35s ease both;
}

@keyframes authPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

a { cursor: pointer; }

/* =========================================================
   BACKGROUND — matches the login screen treatment
   ========================================================= */
.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(135deg, #eaf3ff 0%, #f9fbff 48%, #e8fff8 100%);
}

.auth-backdrop::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .28) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  opacity: .48;
}

.auth-orb {
  position: absolute;
  display: block;
  width: 15rem;
  height: 15rem;
  border-radius: 999px;
  filter: blur(8px);
  opacity: .58;
  animation: authOrbFloat 12s ease-in-out infinite alternate;
}

.auth-orb-one   { top: -6rem; left: -5rem; background: #8ec5ff; }
.auth-orb-two   { right: -6rem; bottom: -7rem; background: #79e6c2; animation-delay: -4s; animation-duration: 15s; }
.auth-orb-three { top: 36%; left: 40%; width: 9rem; height: 9rem; background: #c9a7ff; opacity: .24; animation-delay: -7s; animation-duration: 18s; }

@keyframes authOrbFloat {
  0%   { transform: translate3d(-8px, 8px, 0) scale(.94); }
  50%  { transform: translate3d(18px, -14px, 0) scale(1.06); }
  100% { transform: translate3d(-4px, 18px, 0) scale(1); }
}

/* =========================================================
   BRAND
   ========================================================= */
.auth-brand {
  width: min(100%, 28rem);
}

.auth-brand-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem;
  border-radius: .7rem;
  color: #0f172a;
  text-decoration: none;
}

.auth-brand-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.auth-brand-logo {
  height: 2rem;
  width: auto;
  object-fit: contain;
}

.auth-brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.auth-brand-name span {
  color: #38bdf8;
}

/* =========================================================
   CARD
   ========================================================= */
.auth-shell {
  width: min(100%, 28rem);
}

.auth-card {
  padding: clamp(1.25rem, 4.5vw, 1.85rem);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 45px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.auth-kicker {
  margin: 0 0 .55rem;
  /* Uppercase micro-type: #1d4ed8 lifts this to ~6.4:1 on white. */
  color: #1d4ed8;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.auth-title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.45rem, 6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.auth-subtitle {
  margin: .65rem 0 1.35rem;
  color: #64748b;
  font-size: .82rem;
  line-height: 1.6;
}

/* =========================================================
   FORM
   ========================================================= */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-field {
  display: flex;
  flex-direction: column;
  margin-bottom: .95rem;
}

.auth-label {
  margin-bottom: .35rem;
  color: #334155;
  font-size: .72rem;
  font-weight: 700;
}

.auth-input {
  width: 100%;
  min-height: 2.85rem;
  padding: .7rem .85rem;
  border: 1px solid #dbe4f0;
  border-radius: .8rem;
  background: rgba(248, 250, 252, .9);
  color: #0f172a;
  font-family: inherit;
  font-size: .82rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.auth-input::placeholder {
  /* Placeholder text is still text: #6b7280 clears AA on white. */
  color: #6b7280;
  opacity: 1;
}

.auth-input:hover {
  border-color: #c7d7ea;
}

.auth-input:focus {
  border-color: #60a5fa;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .18);
}

.auth-input:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.auth-input:invalid:not(:placeholder-shown) {
  border-color: #fca5a5;
}

/* #64748b keeps these helper lines above the WCAG AA 4.5:1 contrast floor
   on white (#94a3b8 measured only ~2.6:1). */
.auth-hint {
  margin: .4rem .15rem 0;
  color: #64748b;
  font-size: .7rem;
  line-height: 1.5;
}

/* =========================================================
   TURNSTILE + BUTTONS
   ========================================================= */
.auth-turnstile {
  display: flex;
  justify-content: center;
  margin: 1.1rem 0 1.25rem;
}

.auth-primary,
.auth-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.9rem;
  padding: .7rem 1rem;
  gap: .55rem;
  border-radius: .85rem;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  touch-action: manipulation;
}

.auth-primary {
  border: 1px solid #2563eb;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  box-shadow: 0 9px 20px rgba(37, 99, 235, .2);
}

.auth-primary:hover:not(:disabled) {
  box-shadow: 0 12px 24px rgba(37, 99, 235, .27);
  transform: translateY(-1px);
}

.auth-primary:focus-visible,
.auth-secondary:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

.auth-primary:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.auth-secondary {
  border: 1px solid #dbe4f0;
  background: #fff;
  color: #475569;
  text-decoration: none;
}

.auth-secondary:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

/* =========================================================
   MESSAGES
   ========================================================= */
.auth-message {
  margin: .9rem .1rem 0;
  padding: .7rem .85rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

.auth-message[hidden] {
  display: none;
}

.auth-message.is-success {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.auth-message.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.auth-message.is-info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.auth-note {
  margin: 1rem 0 0;
  padding: .75rem .85rem;
  border: 1px dashed #c7d7ea;
  border-radius: .75rem;
  background: rgba(248, 250, 252, .9);
  color: #475569;
  font-size: .74rem;
  line-height: 1.6;
}

/* =========================================================
   FOOT LINKS — real anchors, 44px touch targets
   ========================================================= */
.auth-switch-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25rem .5rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid #eaf0f7;
  text-align: center;
}

.auth-switch-text {
  color: #64748b;
  font-size: .76rem;
  font-weight: 600;
}

.auth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .35rem .4rem;
  border-radius: .5rem;
  color: #2563eb;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(37, 99, 235, .12);
}

.auth-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.auth-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
  text-decoration: underline;
}

.auth-switch-sep {
  color: #cbd5e1;
  font-size: .7rem;
  user-select: none;
}

/* =========================================================
   FOOTER
   ========================================================= */
.auth-footer {
  width: min(100%, 28rem);
  text-align: center;
}

.auth-footer p {
  margin: 0;
  color: #475569;
  font-size: .72rem;
  line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 480px) {
  body.auth-page {
    padding: 1.25rem .9rem 1rem;
    justify-content: flex-start;
  }

  .auth-card {
    border-radius: 1.1rem;
  }
}

/* Stack the two foot links on very narrow screens. */
@media (max-width: 360px) {
  .auth-switch-links {
    flex-direction: column;
    gap: 0;
  }

  .auth-switch-sep {
    display: none;
  }

  .auth-link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-page {
    animation: none;
  }

  .auth-orb {
    animation: none;
  }

  .auth-primary,
  .auth-input,
  .auth-link {
    transition: none;
  }
}