/* ============================================================
   Reset Password LDAP — page styles
   Ported from "Reset Password LDAP.dc.html" (Qiscus DS 2026).
   ============================================================ */

/* The [hidden] attribute must win over component display:flex/grid rules. */
[hidden] { display: none !important; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

.shell {
  display: flex;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-secondary);
}

/* ===== Hero ===== */
.hero {
  flex: 0 0 42%;
  max-width: 560px;
  min-width: 340px;
  background: linear-gradient(150deg, #20AEB8 0%, #4FBF9B 48%, #91C964 100%);
  color: #ffffff;
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero__logo {
  display: inline-flex; align-items: center;
  background: #fff; padding: 10px 16px; border-radius: 12px; align-self: flex-start;
}
.hero__logo img { height: 26px; width: auto; display: block; }
.hero__body { max-width: 400px; }
.hero__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; opacity: .85; margin-bottom: 16px;
}
.hero__title { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 16px; }
.hero__lede { font-size: 16px; line-height: 26px; margin: 0 0 36px; opacity: .92; }
.hero__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.hero__list li { display: flex; gap: 14px; align-items: flex-start; }
.hero__ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: #fff;
}
.hero__li-title { font-weight: 600; font-size: 15px; line-height: 22px; }
.hero__li-desc { font-size: 13px; line-height: 20px; opacity: .85; }
.hero__foot { font-size: 12px; opacity: .8; }

/* ===== Panel ===== */
.panel { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: 40px 24px; overflow-y: auto; }
.panel__inner { width: 100%; max-width: 452px; display: flex; flex-direction: column; gap: 20px; }
.panel__top { display: flex; align-items: center; justify-content: flex-end; }
.help-link { font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.help-link .ic { color: var(--icon-brand-primary); }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 4px; background: var(--bg-tertiary); padding: 4px; border-radius: 12px; }
.tab {
  flex: 1; padding: 9px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text-secondary);
  font: 500 14px/20px var(--font-sans); cursor: pointer;
}
.tab.is-active {
  background: var(--bg-primary); color: var(--text-primary);
  font-weight: 600; box-shadow: var(--shadow-xs);
}

/* ===== Card ===== */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 28px;
}

/* ===== Stepper ===== */
.stepper { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.stepper__dots { display: flex; align-items: center; gap: 8px; }
.stepper__bar { width: 22px; height: 2px; border-radius: 2px; background: var(--border-primary); }
.stepper__label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font-sans); flex: 0 0 auto;
  background: var(--bg-tertiary); color: var(--text-tertiary);
}
.dot.is-active {
  background: var(--bg-brand-primary); color: var(--text-brand-primary);
  border: 1.5px solid var(--border-brand-secondary);
}
.dot.is-done { background: var(--bg-brand-secondary); color: #fff; }

/* ===== Step ===== */
.step__lede { font-size: 14px; line-height: 22px; color: var(--text-secondary); margin: 6px 0 22px; }
.step h2 { font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.step--center { text-align: center; padding: 12px 0; }
.btn-block { width: 100%; }

/* ===== Delivery tiles ===== */
.delivery-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
.delivery { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.tile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  font-family: var(--font-sans); background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  transition: border-color .12s, background .12s;
}
.tile.is-selected { border: 1.5px solid var(--border-brand-secondary); background: var(--bg-brand-primary); }
.tile:disabled { opacity: .55; cursor: not-allowed; }
.tile__ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tile__ico--email { background: var(--bg-info-primary); color: var(--icon-info-primary); }
.tile__ico--slack { background: #F4EDFB; color: #6B3FA0; }
.tile__text { flex: 1 1 auto; }
.tile__name { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.tile__sub { display: block; font-size: 12px; color: var(--text-tertiary); }
.tile__radio {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-input);
}
.tile.is-selected .tile__radio { border: 1.5px solid var(--border-brand-secondary); }
.tile__dot { width: 0; height: 0; border-radius: 50%; background: var(--bg-brand-secondary); transition: width .1s, height .1s; }
.tile.is-selected .tile__dot { width: 10px; height: 10px; }

/* ===== OTP ===== */
.otp { display: flex; gap: 10px; margin-bottom: 20px; }
.otp__box {
  width: 100%; height: 56px; text-align: center;
  font: 700 22px/1 var(--font-sans); color: var(--text-primary);
  border: 1px solid var(--border-secondary); border-radius: 12px;
  outline: none; background: var(--bg-primary);
}
.otp__box:focus { border-color: var(--border-brand-secondary); }
.otp.is-error .otp__box { border-color: var(--border-error-secondary); }
.otp-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-error-primary); margin: -8px 0 16px; }
.otp-hint .ic { color: var(--icon-error-primary); }
.resend-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-tertiary); margin-bottom: 24px; }

/* ===== Password strength + policy ===== */
.strength { height: 6px; border-radius: 3px; background: var(--bg-tertiary); overflow: hidden; margin: 10px 0 6px; }
.strength__bar { height: 100%; border-radius: 3px; width: 0; background: var(--text-tertiary); transition: width .2s ease, background .2s ease; }
.strength__label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 16px; }
.policy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 20px; }
.policy__item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); }
.policy__item .ic { color: var(--text-tertiary); }
.policy__item.is-ok { color: var(--text-success-primary); }
.policy__item.is-ok .ic { color: var(--text-success-primary); }
.match-msg { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 16px; }
.match-msg--err { color: var(--text-error-primary); }
.match-msg--err .ic { color: var(--icon-error-primary); }
.match-msg--ok { color: var(--text-success-primary); }
.match-msg--ok .ic { color: var(--icon-success-primary); }

/* ===== Success ===== */
.success-ring {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg-success-primary); color: var(--icon-success-primary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.step--center h2 { margin-bottom: 8px; }
.step--center .step__lede { margin: 0 0 24px; }

/* ===== Status ===== */
.acct-head { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border-primary); border-radius: 12px; margin-bottom: 16px; }
.acct-avatar {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  background: var(--bg-brand-primary); color: var(--text-brand-primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.acct-head__id { flex: 1 1 auto; min-width: 0; }
.acct-head__name { font-size: 15px; font-weight: 600; }
.acct-head__uid { font-size: 13px; color: var(--text-tertiary); font-family: var(--font-mono); }
.kv { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.kv__row { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--border-primary); }
.kv__row--last { border-bottom: 0; }
.kv__k { font-size: 13px; color: var(--text-secondary); }
.kv__v { font-size: 13px; font-weight: 500; }
.expiry { padding: 16px; border: 1px solid var(--border-primary); border-radius: 12px; margin-bottom: 20px; }
.expiry__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.expiry__k { font-size: 13px; font-weight: 600; }
.expiry__v { font-size: 15px; font-weight: 700; color: var(--text-success-primary); }
.expiry__track { height: 6px; border-radius: 3px; background: var(--bg-tertiary); overflow: hidden; }
.expiry__fill { height: 100%; border-radius: 3px; width: 0; background: var(--text-success-primary); }

.footer-note { text-align: center; font-size: 12px; color: var(--text-tertiary); margin: 4px 0 8px; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .hero {
    flex: none; max-width: none; width: 100%;
    padding: 32px 28px; flex-direction: column; gap: 24px;
  }
  .hero__title { font-size: 30px; line-height: 38px; }
  .hero__lede { margin-bottom: 8px; }
  .hero__list { gap: 14px; }
  .hero__foot { display: none; }
}
@media (max-width: 480px) {
  .panel { padding: 24px 14px; }
  .card { padding: 20px; }
  .policy { grid-template-columns: 1fr; }
  .otp__box { height: 48px; font-size: 18px; }
}