/* ==========================================================================
   RupeeBiz auth pages (Login / Register / Forgot) — page-specific styles.

   Extracted from the marketing site's login.html / register.html inline
   <style> blocks, plus the WebForms adaptations at the bottom. Everything
   else (tokens, .field, .btn, .glass, ...) comes from site.css / tailwind.css.
   ========================================================================== */

/* ── split layout ─────────────────────────────────────────────────────── */
.login-wrap { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
@media (min-width: 1024px) {
  .login-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.login-wrap > * { min-width: 0; }

/* brand panel (left) */
.login-brand { position: relative; overflow: hidden; }
.login-brand-inner { position: relative; z-index: 2; }

.login-usp { display: flex; gap: .85rem; align-items: flex-start; }
.login-usp .ic {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: grid; place-items: center;
  color: var(--rb-mint); background: rgba(95,227,208,.10); border: 1px solid rgba(95,227,208,.28);
}

/* form panel (right) */
.login-card { width: 100%; max-width: 27rem; }
.login-card-wide { max-width: 44rem; }

/* input with a trailing action (password eye) */
.field-affix { position: relative; }
.field-affix .field { padding-right: 3.1rem; }
.pw-toggle {
  position: absolute; top: 50%; right: .55rem; transform: translateY(-50%);
  width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .55rem;
  border: 0; background: transparent; color: #8A94C4; cursor: pointer; transition: color .25s;
}
.pw-toggle:hover { color: #fff; }
.pw-toggle .eye-off { display: none; }
.pw-toggle.is-shown .eye-on { display: none; }
.pw-toggle.is-shown .eye-off { display: block; }

/* divider */
.login-or { display: flex; align-items: center; gap: 1rem; color: #7f89ba; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.login-or::before, .login-or::after { content: ''; height: 1px; flex: 1; background: rgba(255,255,255,.12); }

/* OTP boxes */
.otp-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.otp-box {
  width: 100%; aspect-ratio: 1 / 1; text-align: center; font-size: 1.25rem; font-weight: 800;
  color: #fff; border-radius: .8rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.otp-box:focus { outline: none; border-color: var(--rb-mint); background: rgba(95,227,208,.08); box-shadow: 0 0 0 3px rgba(95,227,208,.18); }

/* remember / forgot row */
.login-check { display: inline-flex; align-items: center; gap: .55rem; font-size: .82rem; color: #b7c0e8; cursor: pointer; }
.login-check input { width: 1.05rem; height: 1.05rem; border-radius: .35rem; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); accent-color: var(--rb-mint); }

.login-slim-footer a { transition: color .25s; }
.login-slim-footer a:hover { color: var(--rb-mint); }

/* ── register stepper (from register.html) ────────────────────────────── */
.step-dot .dot {
  width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; color: #8A94C4;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  transition: background .35s, color .35s, border-color .35s, transform .35s;
}
.step-dot.is-current .dot { background: var(--rb-grad-cta); color: #fff; border-color: transparent; transform: scale(1.08); }
.step-dot.is-done .dot   { background: rgba(95,227,208,.16); color: var(--rb-mint); border-color: rgba(95,227,208,.45); }
.step-dot.is-current .step-label { color: #fff; }
.step-label { transition: color .35s; }

/* ── WebForms adaptations ─────────────────────────────────────────────── */

/* server-side alert banner (bootstrap_alert.alert contract used by ShowAlert) */
.rb-alert {
  border-radius: .9rem; padding: .9rem 1.1rem; font-size: .85rem; line-height: 1.5;
  margin-bottom: 1.1rem; border: 1px solid transparent;
}
.rb-alert-success { border-color: rgba(95,227,208,.4);  background: rgba(95,227,208,.08);  color: #9BEFDF; }
.rb-alert-danger  { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); color: #FCA5A5; }
.rb-alert-warning { border-color: rgba(251,191,36,.4);  background: rgba(251,191,36,.08);  color: #FDE68A; }
.rb-alert-info    { border-color: rgba(96,165,250,.4);  background: rgba(96,165,250,.08);  color: #BFDBFE; }

/* asp validators render as inline spans — style them like the design's err-msg */
.rb-validator { display: block; color: #FCA5A5; font-size: .75rem; margin-top: .3rem; }

/* asp:CheckBox renders input inside a span — keep the design's checkbox look */
.login-check input[type="checkbox"] { margin: 0; }

/* the real OTP value lives in a hidden server TextBox the boxes sync into */
.otp-hidden { display: none !important; }

/* referral pill on register */
.rb-referral {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600;
  color: var(--rb-mint); background: rgba(95,227,208,.08); border: 1px solid rgba(95,227,208,.3);
  border-radius: 999px; padding: .35rem .9rem; margin-bottom: 1rem;
}

/* keep native selects readable in the dark theme on Windows */
select.field option { background-color: #0B1130; color: #fff; }