/* ============================================================
   ui-auth.css — auth pages (index / register / forget)
   Loaded after app.css + ui.css. The base auth layout (.aw/.ah/
   .ab/.afg/.af) still lives in app.css; this file only refines it.
   ============================================================ */

/* the auth column is as wide as the app shell after login (#vp: 500px), centred on wide screens */
.aw {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 540px) {
  .aw { box-shadow: 0 0 0 1px var(--border-color), var(--shadow-md); }
  .ah { border-radius: 0 0 28px 28px; }
}

/* hero: gradient that keeps white text ≥4.5:1 */
.ah { background: var(--cta-gradient); }
.ah p { color: var(--on-primary); opacity: .92; font-size: var(--fs-13); }

/* field rows */
.af { padding: 0 var(--sp-12); }
.af .fi { color: var(--font-color2); }
.af input::placeholder { color: var(--hint-color) !important; font-size: var(--fs-13); }

/* password eye: real button with a 44px target */
.af .tp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--tap);
  width: var(--tap);
  height: var(--tap);
  margin-inline-end: calc(-1 * var(--sp-8));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--font-color2);
  font-size: 19px;
  cursor: pointer;
}
.af .tp:active,
.af .tp[aria-pressed="true"] { color: var(--primary-color); }
.af .tp:focus-visible,
.auth-link:focus-visible,
.auth-terms:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* primary CTA */
.auth-cta {
  height: 48px;
  min-height: 48px;
  border-radius: var(--radius-md);
  margin: var(--sp-8) 0 var(--sp-12);
  box-shadow: 0 8px 20px rgba(31, 122, 116, .22);
  font-family: iran, sans-serif;
}
.auth-cta i { font-size: 18px; }

/* secondary: one ghost line */
.auth-alt {
  width: 100%;
  margin-bottom: var(--sp-16);
  font-family: iran, sans-serif;
  font-weight: 500;
  text-decoration: none !important;
}
.auth-alt strong { color: var(--primary-color); font-weight: 700; margin-inline-start: 4px; }
.auth-alt:hover { color: var(--font-color2); }

/* inline text link / text button (forgot password, resend code) */
.auth-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--primary-color);
  font-family: iran, sans-serif;
  font-size: var(--fs-13);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.auth-link[disabled] { color: var(--font-color2); cursor: default; }
.auth-linkrow {
  display: flex;
  justify-content: flex-start;
  margin: calc(-1 * var(--sp-12)) 0 var(--sp-4);
}

/* terms consent row: the whole row is the label (≥44px) */
.al.auth-terms {
  min-height: var(--tap);
  gap: var(--sp-8);
  font-size: var(--fs-13);
  color: var(--font-color2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 0;
}
.al.auth-terms input[type=checkbox] { width: 20px; height: 20px; }

/* forget: step indicator with captions */
.fs {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-24);
  padding: 0;
  color: var(--font-color2);
}
.fs .fstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
}
.fs .fc {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fs .fc.done { background: var(--green); color: #fff; }
.fs .fc.active { border: 2px solid var(--primary-color); background: var(--bg-primary); color: var(--primary-color); }
.fs .fl { flex: 0 0 24px; height: 2px; margin-top: 17px; background: var(--border-color); }
.fs .fl.done { background: var(--green); }
.fs .fcap { font-size: var(--fs-12); line-height: 1.4; text-align: center; }
.fs .fstep[aria-current="step"] .fcap { color: var(--font-color); font-weight: 700; }

/* one-time code field */
.af #newOTP {
  font-size: var(--fs-22) !important;
  font-weight: 700;
  letter-spacing: .5em;
}
.af #newOTP::placeholder { letter-spacing: normal; font-weight: 400; }
.auth-link:hover { color: var(--primary-color); text-decoration: none; }