/* ═══════════════════════════════════════════════════════════
   iReliance LTD — Auth Pages — Deep Navy-Purple Theme
   ═══════════════════════════════════════════════════════════ */
:root {
  --primary: #6c63ff;
  --primary-d: #4f46e5;
  --gold:   #f0a500;
  --gold-d: #c8860a;
  --dark:   #13151a;
  --dark2:  #181b22;
  --card:   #1c1f28;
  --card2:  #1e2230;
  --border: #2c3040;
  --text:   #dde1ec;
  --muted:  #7a8099;
  --green:  #2ecc71;
  --red:    #e74c3c;
}
.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}
.me-1{margin-right:.25rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}
.d-flex{display:flex!important}.d-block{display:block!important}.align-items-center{align-items:center!important}
.justify-content-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}
.text-center{text-align:center!important}
.row{display:flex;flex-wrap:wrap;gap:.75rem}
.col-6{flex:1 1 calc(50% - .375rem);min-width:0}
@media(max-width:480px){.col-6{flex:1 1 100%}}

body.auth-page {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(108,99,255,.08) 0%, transparent 50%),
              linear-gradient(180deg, var(--dark) 0%, #161920 50%, var(--dark) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, sans-serif;
  padding: 1.5rem;
}

.auth-wrapper { width: 100%; max-width: 460px; }

.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.3rem; color: #000; margin: 0 auto 10px;
}
.auth-logo strong { display: block; color: #eef0f6; font-size: 1.1rem; font-weight: 800; }
.auth-logo span { display: block; color: var(--muted); font-size: .82rem; margin-top: .3rem; }

.auth-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.75rem; }
.auth-tab {
  flex: 1; text-align: center; padding: .75rem;
  color: var(--muted); font-weight: 600; font-size: .95rem;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .2s; text-decoration: none;
}
.auth-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.auth-tab:hover:not(.active) { color: var(--text); }

.auth-box h4 { color: #eef0f6; font-weight: 800; margin-bottom: .35rem; font-size: 1.2rem; }
.auth-box .sub { color: var(--muted); font-size: .88rem; margin-bottom: 1.5rem; }

.form-label-bn { color: #b0b8cc; font-size: .82rem; font-weight: 600; margin-bottom: .4rem; display: block; }

.form-control-bn {
  width: 100%; background: var(--card2); border: 1px solid var(--border);
  border-radius: 10px; padding: .75rem 1rem; color: var(--text);
  font-size: .95rem; transition: border-color .2s; outline: none;
  box-sizing: border-box; min-width: 0;
}
.form-control-bn:focus { border-color: var(--primary); background: var(--card2); }
.form-control-bn::placeholder { color: var(--muted); opacity: .5; }

.input-group-bn { position: relative; }
.input-group-bn .form-control-bn { padding-right: 3rem; }
.input-group-bn .eye-btn {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 0;
  font-size: 1rem; transition: color .15s;
}
.input-group-bn .eye-btn:hover { color: var(--primary); }

.btn-auth {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  color: #fff; font-weight: 800; font-size: 1rem; padding: .9rem;
  border: none; border-radius: 10px; cursor: pointer;
  transition: all .2s; margin-top: .5rem;
}
.btn-auth:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,99,255,.35); }
.btn-auth:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.auth-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }

.pwd-strength { height: 4px; border-radius: 2px; margin-top: .4rem; background: var(--card2); overflow: hidden; }
.pwd-strength-bar { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }
.pwd-label { font-size: .75rem; color: var(--muted); margin-top: .25rem; }

.alert-bn {
  background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.25);
  color: #f5a9a0; border-radius: 10px; padding: .75rem 1rem;
  font-size: .88rem; margin-bottom: 1rem;
}
.alert-bn-success {
  background: rgba(46,204,113,.08); border: 1px solid rgba(46,204,113,.25);
  color: #7ee8a2; border-radius: 10px; padding: .75rem 1rem;
  font-size: .88rem; margin-bottom: 1rem;
}

.form-check-bn { display: flex; align-items: center; gap: .5rem; color: #b0b8cc !important; }
.form-check-bn input[type=checkbox] { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.form-check-bn label, .form-check-bn span { color: #b0b8cc !important; font-size: .85rem; cursor: pointer; }

.back-home { text-align: center; margin-top: 1.25rem; }
.back-home a { color: var(--muted); font-size: .85rem; text-decoration: none; }
.back-home a:hover { color: var(--primary); }

.auth-promo-strip {
  background: rgba(240,165,0,.07);
  border: 1px solid rgba(240,165,0,.18);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 10px; font-size: .8rem;
}
.auth-promo-strip .promo-icon { font-size: 1.2rem; flex-shrink: 0; }
.auth-promo-strip .promo-text { color: #c8ccd8; }
.auth-promo-strip .promo-text strong { color: var(--gold); }