/* ============================================================
📁 FILE : static/css/forgot_password.css
============================================================ */
:root{
  --fg:#ffffff;
  --fg-dim:rgba(255,255,255,.86);
  --fg-soft:rgba(255,255,255,.72);
  --outline:rgba(255,255,255,.52);
  --outline-2:rgba(255,255,255,.14);
  --accent:#60a5fa;
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#000;
}

/* background konsisten dengan index */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("/static/img/background/bg.jpg") center/cover no-repeat;
  filter:contrast(1.02) saturate(1.02) brightness(.86);
  z-index:-2;
  pointer-events:none;
  width:100vw;height:100vh;
}
@supports (height:100lvh){
  body::before{width:100lvw;height:100lvh}
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.18) 28%,
    rgba(0,0,0,.28) 60%,
    rgba(0,0,0,.40) 100%);
  z-index:-1;
}

/* layout */
.auth{
  min-height:100vh;
  padding:10svh 16px 8svh;
  display:grid;
  place-items:center;
}
@supports (height:100svh){
  .auth{min-height:100svh;padding:10svh 16px 8svh}
}
.phone.forgot-card{
  width:100%;
  max-width:420px;
  padding:30px;
  border-radius:5px;
}

/* brand */
.brand-in-card{margin:30px 0 60px;text-align:center}
.brand-link{display:inline-flex}
.brand-logo{display:block;height:44px;width:auto;object-fit:contain;opacity:.94}

/* headings */
.title{
  margin:0 0 6px 0;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-dim);
  text-align:center;
}
.subtitle{
  margin:0 0 18px 0;
  color:var(--fg-soft);
  font-size:14px;
  text-align:center;
}

/* error bar konsisten */
.auth-error{
  display:none;
  align-items:center;
  gap:8px;
  margin:0 0 10px 0;
  color:#ffd1d1;
  font-size:13px;
}
.auth-error i{opacity:.95}

/* fields */
.field{display:grid;gap:8px;margin-bottom:16px}
.label-text{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.input-wrap{position:relative}
input[type="tel"]{
  width:100%;
  min-height:50px;
  font-size:16px;
  line-height:1.3;
  padding:0 14px;
  color:#000;
  background:var(--fg);
  border:2px solid transparent;
  border-radius:5px;
  outline:none;
}
input::placeholder{color:rgba(0,0,0,.2)}
input:focus{border-color:var(--accent)}

/* inline error */
.error-message{
  display:none;
  align-items:center;
  gap:8px;
  margin-top:6px;
  color:#ffd1d1;
  font-size:13px;
}
.field.has-error .error-message{display:flex}
.shake{animation:shake .42s ease}
@keyframes shake{
  20%{transform:translateX(-3px)}
  40%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}

.ok-message{
  display:none;
  align-items:center;
  gap:8px;
  margin-top:6px;
  color:#86efac;
  font-size:.9rem;
}
.field.has-ok .ok-message{ display:flex }

.login-divider{height:1px;background:transparent;margin:16px 0}

/* submit button (ghost, konsisten) */
.btn-submit{
  width:100%;
  min-height:50px;
  border-radius:5px;
  color:var(--fg);
  background:transparent;
  border:1px solid var(--fg);
  display:grid;
  place-items:center;
  text-transform:uppercase;
  letter-spacing:.18em;
  position:relative;
  overflow:hidden;
  cursor:not-allowed;
}
.btn-submit:hover{background:var(--outline-2)}
.btn-submit[disabled]{
  color:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.38);
  opacity:.72;
  cursor:not-allowed;
}
.btn-submit[disabled]:hover{
  background: none;
}
.btn-submit:not([disabled]){ cursor:pointer }

/* loading overlay: percent & text berdampingan + track berjarak */
.btn-submit .loading-bar{opacity:0;transition:opacity .2s ease}
.btn-submit.loading{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 22px rgba(0,0,0,.35)}
.btn-submit.loading .btn-text{opacity:0}
.btn-submit.loading .loading-bar{opacity:1}

.loading-bar{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding-bottom:18px; text-align:center;
}
.loading-bar::before{
  content:""; position:absolute; left:14px; right:14px; bottom:10px; height:1px;
  background:rgba(255,255,255,.28);
}
.bar-fill{
  position:absolute; left:14px; bottom:10px; height:2px;
  width:calc((100% - 28px) * var(--p, 0));
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,.25) 100%);
  background-size:200% 100%;
  animation:shimmer 1.2s linear infinite;
  box-shadow:0 0 18px rgba(255,255,255,.45);
  transition:width .08s linear;
}
.bar-fill::after{
  content:""; position:absolute; right:-6px; top:50%; width:8px; height:8px; transform:translateY(-50%);
  border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.15), 0 0 14px rgba(255,255,255,.6);
}
.progress-text{
  font-size:13px; letter-spacing:.22em; font-variant-numeric:tabular-nums; min-width:3ch; opacity:.95;
}
.note-text{font-size:11px; opacity:.7; letter-spacing:.08em}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

/* footer */
.foot{margin-top:16px; display:grid; gap:10px; justify-items:start}
.meta{margin:0; color:var(--fg-soft)}
.link-accent{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; opacity:.85}
.link-accent:hover{opacity:1; border-bottom-color:var(--accent)}

@media (max-width:520px){
  .auth{padding:8svh 14px 6svh}
  .phone.forgot-card{padding:0 30px 0 30px}
  input[type="tel"]{font-size:16px}
  .brand-logo{height:40px}
}