/* BDS Pay RTG-8G Auth & Access Premium UI */
:root {
  --bds-auth-bg: #f6f7fb;
  --bds-auth-surface: #ffffff;
  --bds-auth-ink: #121826;
  --bds-auth-muted: #667085;
  --bds-auth-line: #e6e9f0;
  --bds-auth-primary: #4f46e5;
  --bds-auth-primary-dark: #4038c8;
  --bds-auth-primary-soft: #eef0ff;
  --bds-auth-success: #07865f;
  --bds-auth-danger: #c73957;
  --bds-auth-shadow: 0 24px 70px rgba(20, 28, 52, .10);
}

html, body.bds-auth-body { min-height: 100%; }
body.bds-auth-body {
  margin: 0;
  color: var(--bds-auth-ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(79,70,229,.09), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(60,174,163,.08), transparent 28%),
    var(--bds-auth-bg);
  -webkit-font-smoothing: antialiased;
}

.bds-auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(520px, 1.12fr);
}

.bds-auth-story {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vw, 72px);
  background: linear-gradient(145deg, #161a38 0%, #25235b 58%, #3933a3 100%);
  color: #fff;
}
.bds-auth-story::before,
.bds-auth-story::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.bds-auth-story::before {
  width: 340px; height: 340px; right: -160px; top: -130px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 50px rgba(255,255,255,.025), 0 0 0 100px rgba(255,255,255,.018);
}
.bds-auth-story::after {
  width: 220px; height: 220px; left: -100px; bottom: -100px;
  background: rgba(255,255,255,.045);
}

.bds-auth-brand,
.bds-auth-story-copy,
.bds-auth-trust { position: relative; z-index: 1; }
.bds-auth-brand { display: flex; align-items: center; gap: 14px; text-decoration: none !important; color: #fff !important; }
.bds-auth-brand-logo {
  width: 46px; height: 46px; border-radius: 14px; object-fit: contain;
  padding: 7px; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.bds-auth-brand-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.bds-auth-brand-sub { display: block; margin-top: 3px; color: rgba(255,255,255,.65); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

.bds-auth-story-copy { max-width: 520px; margin: auto 0; padding: 64px 0; }
.bds-auth-story-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #c7c9ff; }
.bds-auth-story-kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: #a9adff; }
.bds-auth-story h2 { color: #fff; font-size: clamp(2rem, 3.2vw, 3.45rem); line-height: 1.06; letter-spacing: -.045em; margin: 0 0 20px; font-weight: 800; }
.bds-auth-story p { color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.75; margin: 0; max-width: 46ch; }
.bds-auth-trust { display: flex; flex-wrap: wrap; gap: 10px; }
.bds-auth-trust span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.78); font-size: .74rem; font-weight: 700; }
.bds-auth-trust i { color: #b6ffdf; }

.bds-auth-main { display: flex; align-items: center; justify-content: center; padding: clamp(26px, 5vw, 72px); }
.bds-auth-panel { width: min(100%, 560px); }
.bds-auth-panel--wide { width: min(100%, 720px); }
.bds-auth-mobile-brand { display: none; margin-bottom: 28px; }
.bds-auth-mobile-brand .bds-auth-brand { color: var(--bds-auth-ink) !important; }
.bds-auth-mobile-brand .bds-auth-brand-sub { color: var(--bds-auth-muted); }
.bds-auth-mobile-brand .bds-auth-brand-logo { border-color: var(--bds-auth-line); box-shadow: 0 8px 24px rgba(20,28,52,.08); }

.bds-auth-card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(224,227,236,.95);
  border-radius: 24px;
  box-shadow: var(--bds-auth-shadow);
  padding: clamp(26px, 4vw, 42px);
  backdrop-filter: blur(10px);
}
.bds-auth-eyebrow { margin-bottom: 9px; color: var(--bds-auth-primary); font-size: .7rem; letter-spacing: .13em; font-weight: 800; text-transform: uppercase; }
.bds-auth-card h1 { margin: 0; color: var(--bds-auth-ink); font-size: clamp(1.85rem, 3vw, 2.35rem); line-height: 1.12; letter-spacing: -.04em; font-weight: 800; }
.bds-auth-lead { margin: 10px 0 28px; color: var(--bds-auth-muted); line-height: 1.65; }

.bds-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.bds-auth-field { margin-bottom: 18px; }
.bds-auth-field label,
.bds-auth-label-row label { display: block; margin: 0 0 8px; color: #344054; font-size: .84rem; font-weight: 750; }
.bds-auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.bds-auth-label-row label { margin: 0; }
.bds-auth-label-row a { font-size: .78rem; font-weight: 750; color: var(--bds-auth-primary); }

.bds-auth-input-wrap { position: relative; }
.bds-auth-input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #98a2b3; font-size: 1rem; pointer-events: none; }
.bds-auth-input-wrap .form-control { padding-left: 44px; }
.bds-auth-input-wrap .form-control.has-toggle { padding-right: 48px; }
.bds-auth-card .form-control {
  height: 50px;
  border: 1px solid #d8dce7;
  border-radius: 12px;
  background: #fbfcfe;
  color: var(--bds-auth-ink);
  font-size: .9rem;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.bds-auth-card .form-control:focus {
  background: #fff;
  border-color: #aaa6ff;
  box-shadow: 0 0 0 4px rgba(79,70,229,.10);
}
.bds-auth-card .form-control::placeholder { color: #a7adba; }
.bds-auth-password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: #7b8496; cursor: pointer;
}
.bds-auth-password-toggle:hover, .bds-auth-password-toggle:focus { background: #f0f1f6; color: var(--bds-auth-primary); outline: none; }

.bds-auth-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; color: var(--bds-auth-muted); font-size: .82rem; line-height: 1.5; }
.bds-auth-check input { margin-top: 3px; accent-color: var(--bds-auth-primary); }
.bds-auth-check a { color: var(--bds-auth-primary); font-weight: 700; }

.bds-auth-submit.btn {
  min-height: 50px;
  border-radius: 12px;
  border-color: var(--bds-auth-primary);
  background: linear-gradient(135deg, #5951ef, #4640d5);
  box-shadow: 0 10px 26px rgba(79,70,229,.24);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .005em;
}
.bds-auth-submit.btn:hover, .bds-auth-submit.btn:focus { border-color: var(--bds-auth-primary-dark); background: var(--bds-auth-primary-dark); }
.bds-auth-submit.btn.btn-success { border-color: var(--bds-auth-success); background: var(--bds-auth-success); box-shadow: 0 10px 26px rgba(7,134,95,.18); }

.bds-auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: #98a2b3; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.bds-auth-divider::before, .bds-auth-divider::after { content: ""; height: 1px; background: var(--bds-auth-line); flex: 1; }
.bds-auth-social.btn { min-height: 48px; border-radius: 12px; border-color: #d8dce7; color: #344054; font-weight: 750; background: #fff; }
.bds-auth-social.btn:hover { border-color: #babed0; background: #f9fafc; }
.bds-auth-social svg { margin-right: 8px; vertical-align: -4px; }

.bds-auth-footer { margin-top: 22px; text-align: center; color: var(--bds-auth-muted); font-size: .84rem; }
.bds-auth-footer a { color: var(--bds-auth-primary); font-weight: 800; }
.bds-auth-footnote { margin-top: 20px; color: #98a2b3; text-align: center; font-size: .72rem; line-height: 1.55; }

.bds-auth-state-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; margin-bottom: 20px; background: var(--bds-auth-primary-soft); color: var(--bds-auth-primary); font-size: 1.35rem; }
.bds-auth-state-icon.success { background: #eaf8f3; color: var(--bds-auth-success); }
.bds-auth-info { padding: 13px 15px; border: 1px solid #e3e6ef; border-radius: 12px; background: #f8f9fc; color: #667085; font-size: .8rem; line-height: 1.55; margin-bottom: 18px; }
.bds-auth-code .form-control { text-align: center; letter-spacing: .35em; font-size: 1.1rem; font-weight: 800; padding-left: 12px; }

.pwindicator { margin-top: 7px; }
.pwindicator .bar { height: 4px; border-radius: 6px; background: #e6e8ef; }
.pwindicator .label { margin-top: 5px; color: #98a2b3; font-size: .7rem; }

@media (max-width: 991.98px) {
  .bds-auth-shell { grid-template-columns: 1fr; }
  .bds-auth-story { display: none; }
  .bds-auth-main { min-height: 100vh; min-height: 100dvh; padding: 28px 20px; align-items: flex-start; }
  .bds-auth-mobile-brand { display: block; }
  .bds-auth-panel { margin: auto; }
}

@media (max-width: 575.98px) {
  .bds-auth-main { padding: 20px 14px 28px; }
  .bds-auth-card { border-radius: 20px; padding: 24px 19px; box-shadow: 0 16px 42px rgba(20,28,52,.09); }
  .bds-auth-grid { grid-template-columns: 1fr; gap: 0; }
  .bds-auth-label-row { align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .bds-auth-card .form-control, .bds-auth-submit.btn { transition: none; }
}