/* ═══════════════════════════════════════════════════════════════
   Electrik.NG — Auth Layout  (Login, Register, ForgotPassword, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* ── Split shell ── */
.auth-shell {
  display: grid;
  grid-template-columns: 460px 1fr;
  min-height: 100vh;
}

/* ── Brand panel ── */
.brand-panel {
  background: linear-gradient(160deg, #1E3A6E 0%, #1A56A0 45%, #0E7C7B 100%);
  padding: 48px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Decorative blobs */
.bp-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.bp-blob-1 { width: 280px; height: 280px; background: rgba(255,255,255,.06); top: -60px; right: -60px; }
.bp-blob-2 { width: 240px; height: 240px; background: rgba(13,207,155,.07); bottom: 40px; left: -50px; }

/* Logo */
.brand-logo { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.brand-logo-mark {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
}
.brand-logo-mark svg { width: 18px; height: 18px; }
.brand-wordmark {
  font-family: var(--font-h);
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}

/* Body copy */
.brand-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.brand-headline {
  font-family: var(--font-h);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
.brand-headline em { font-style: normal; color: rgba(255,255,255,.55); }
.brand-sub {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 300px;
}

/* Stats row */
.stats-row { display: flex; gap: 24px; }
.stat-box {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 18px;
}
.stat-val {
  font-family: var(--font-h);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.stat-lbl {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.brand-footer {
  position: relative;
  z-index: 1;
  font-size: .75rem;
  color: rgba(255,255,255,.3);
}

/* ── Form panel ── */
.form-panel {
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  overflow-y: auto;
}
.form-card {
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  box-shadow: var(--shadow-md);
  animation: authSlideUp .4s ease both;
}
@keyframes authSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-title {
  font-family: var(--font-h);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.form-subtitle {
  font-size: .88rem;
  color: var(--gray-500);
  margin-bottom: 28px;
}
.form-subtitle a { color: var(--blue); font-weight: 600; }
.form-subtitle a:hover { text-decoration: underline; }

/* ── Forgot / Remember rows ── */
.forgot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.forgot-row .field-label { margin: 0; }
.forgot-link { font-size: .8rem; font-weight: 600; color: var(--blue); }
.forgot-link:hover { text-decoration: underline; }

.remember-row { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.remember-row input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
  border-radius: 4px;
}
.remember-row label { font-size: .84rem; color: var(--gray-600); cursor: pointer; }

/* ── Countdown (lockout timer) ── */
.countdown-inline { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .form-panel { padding: 32px 20px; }
}


/* ---- Forgot Password ---- */
.fp-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
.fp-topbar { height: 60px; background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
.fp-logo { display: flex; align-items: center; gap: 9px; }
.fp-logo-mark { width: 32px; height: 32px; background: var(--blue); border-radius: 8px; display: grid; place-items: center; }
.fp-logo-mark svg { width: 16px; height: 16px; }
.fp-logo-word { font-family: var(--font-h); font-size: 1.05rem; font-weight: 800; color: var(--gray-900); letter-spacing: -.02em; }
.fp-back { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--gray-500); transition: color var(--ease); }
.fp-back:hover { color: var(--gray-900); }
.fp-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px 64px; }
.fp-card { width: 100%; max-width: 460px; background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 48px 44px; box-shadow: var(--shadow-md); animation: authSlideUp .4s ease both; }
.fp-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 24px; }
.fp-icon.lock { background: var(--blue-l); border: 2px solid var(--blue-m); }
.fp-icon.sent { background: var(--green-l); border: 2px solid var(--green-m); }
.fp-title { font-family: var(--font-h); font-size: 1.5rem; font-weight: 800; color: var(--gray-900); letter-spacing: -.025em; margin-bottom: 10px; }
.fp-body { font-size: .9rem; color: var(--gray-500); line-height: 1.75; margin-bottom: 28px; }
.email-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--blue-l); border: 1px solid var(--blue-m); border-radius: 8px; padding: 8px 14px; font-size: .86rem; font-weight: 600; color: var(--blue); margin-bottom: 20px; word-break: break-all; }
.view { display: none; }
.view.active { display: block; }
@media (max-width: 540px) { .fp-card { padding: 32px 22px; border-radius: 16px; } }


/* ---- Reset Password ---- */
.rp-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--surface);}
.rp-topbar{height:60px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;}
.rp-logo{display:flex;align-items:center;gap:9px;}
.rp-logo-mark{width:32px;height:32px;background:var(--blue);border-radius:8px;display:grid;place-items:center;}
.rp-logo-mark svg{width:16px;height:16px;}
.rp-logo-word{font-family:var(--font-h);font-size:1.05rem;font-weight:800;color:var(--gray-900);letter-spacing:-.02em;}
.rp-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 16px 64px;}
.rp-card{width:100%;max-width:460px;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:48px 44px;box-shadow:var(--shadow-md);animation:authSlideUp .4s ease both;}
.view{display:none;}.view.active{display:block;}
.icon-wrap{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin-bottom:24px;position:relative;}
.icon-wrap.key{background:var(--blue-l);border:2px solid var(--blue-m);}
.icon-wrap.done{background:var(--green-l);border:2px solid var(--green-m);}
.icon-wrap.expired{background:var(--red-l);border:2px solid var(--red-m);}
.icon-wrap::before{content:'';position:absolute;inset:-8px;border-radius:50%;animation:ringPulse 2.6s ease-out infinite;}
.icon-wrap.done::before{border:2px solid var(--green-m);}
.icon-wrap.key::before{border:2px solid var(--blue-m);}
.icon-wrap.expired::before{border:2px solid var(--red-m);}
@keyframes ringPulse{0%{opacity:.7;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.2)}}
.check-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;fill:none;stroke:var(--green-l);animation:circleDraw .6s cubic-bezier(.65,0,.45,1) forwards;}
.check-tick-path{stroke-dasharray:48;stroke-dashoffset:48;stroke-width:3.5;fill:none;stroke:var(--green);animation:tickDraw .4s .6s cubic-bezier(.65,0,.45,1) forwards;}
.err-circle{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:166;stroke-dashoffset:166;animation:circleDraw .6s cubic-bezier(.65,0,.45,1) forwards;}
.err-line1,.err-line2{stroke:var(--red);stroke-width:3.5;stroke-linecap:round;}
.err-line1{stroke-dasharray:30;stroke-dashoffset:30;animation:tickDraw .3s .65s ease forwards;}
.err-line2{stroke-dasharray:30;stroke-dashoffset:30;animation:tickDraw .3s .8s ease forwards;}
@keyframes circleDraw{100%{stroke-dashoffset:0}}
@keyframes tickDraw{100%{stroke-dashoffset:0}}
.rp-title{font-family:var(--font-h);font-size:1.5rem;font-weight:800;letter-spacing:-.025em;margin-bottom:10px;}
.rp-title.reset{color:var(--gray-900);}.rp-title.done{color:#047857;}.rp-title.expired{color:var(--red);}
.rp-body{font-size:.9rem;color:var(--gray-500);line-height:1.75;margin-bottom:28px;}
.req-list{background:var(--gray-100);border-radius:10px;padding:14px 16px;margin-bottom:18px;}
.req-list-title{font-size:.75rem;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;}
.req-item{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--gray-500);transition:color .2s;margin-bottom:7px;}
.req-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--gray-200);display:grid;place-items:center;flex-shrink:0;transition:all .2s;}
.req-item.met{color:var(--green);}.req-item.met .req-dot{background:var(--green);border-color:var(--green);}
.strength-wrap{margin-top:8px;display:none;}.strength-wrap.show{display:block;}
.strength-bar{display:flex;gap:4px;margin-bottom:5px;}
.strength-seg{height:4px;flex:1;border-radius:2px;background:var(--gray-200);transition:background .3s;}
.strength-seg.weak{background:var(--red);}.strength-seg.fair{background:var(--amber);}.strength-seg.good{background:#3B82F6;}.strength-seg.strong{background:var(--green);}
.strength-label{font-size:.72rem;font-weight:600;color:var(--gray-400);}
.strength-label.weak{color:var(--red);}.strength-label.fair{color:var(--amber);}.strength-label.good{color:#3B82F6;}.strength-label.strong{color:var(--green);}
.btn-rp-primary{width:100%;height:48px;background:var(--blue);color:#fff;border-radius:8px;font-size:.95rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:background var(--ease),box-shadow var(--ease),transform var(--ease);cursor:pointer;position:relative;text-decoration:none;margin-bottom:12px;}
.btn-rp-primary:hover:not(:disabled){background:var(--blue-d);box-shadow:0 6px 20px rgba(26,86,160,.3);transform:translateY(-1px);}
.btn-rp-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-rp-primary.loading .btn-text{opacity:0;}.btn-rp-primary.loading .btn-spinner{display:flex;}
.btn-rp-secondary{width:100%;height:44px;border:1.5px solid var(--blue-m);background:transparent;color:var(--blue);border-radius:8px;font-size:.9rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--ease);cursor:pointer;margin-bottom:12px;text-decoration:none;}
.btn-rp-secondary:hover{background:var(--blue-l);border-color:var(--blue);}
@media(max-width:540px){.rp-card{padding:32px 22px;border-radius:16px;}.rp-main{padding:24px 12px 80px;}}