/* ============================================================
   KESTRIAH LEAD FORM · painel lateral em etapas (#lm-root)
   Customizado para Med Vita (dourado sobre preto).
   ============================================================ */

:root {
  --lf-navy: #171008;
  --lf-navy-dark: #0c0a08;
  --lf-red: #9a7028;
  --lf-red-light: #e1b96a;
  --lf-yellow: #c9a04a;
  --lf-line: #dde1ea;
  --lf-muted: #6b7a8d;
  --lf-ink: #1c1710;
  --lf-font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --lf-font-head: 'Cormorant Garamond', serif;
}

/* ============================================================
   PAINEL LATERAL (DRAWER) - #lm-root
   ============================================================ */
#lm-root .lm-bd {
  position:fixed; inset:0; z-index:9000; background:rgba(8,6,4,.68);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#lm-root .lm-bd.on { opacity:1; pointer-events:all; }

#lm-root .lm-pn {
  position:fixed; top:0; right:0; width:min(500px,100vw); height:100dvh; z-index:9001;
  background:var(--lf-navy-dark); border-left:1px solid rgba(201,160,74,.28);
  box-shadow:-22px 0 64px rgba(0,0,0,.5); display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.32,.72,0,1);
  font-family:var(--lf-font-ui, system-ui, sans-serif);
}
#lm-root .lm-pn::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--lf-yellow),rgba(201,160,74,.12) 85%);
}
#lm-root .lm-pn.on { transform:translateX(0); }

/* header */
#lm-root .lm-hd {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:20px 24px 16px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
}
#lm-root .lm-hd-brand { display:flex; align-items:center; gap:9px; }
#lm-root .lm-hd-brand img { height:24px; width:auto; }
#lm-root .lm-hd-title { font-size:13px; font-weight:700; color:rgba(255,255,255,.72); letter-spacing:.03em; }
#lm-root .lm-x {
  width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:rgba(255,255,255,.6); cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:all .2s; flex-shrink:0;
}
#lm-root .lm-x:hover { background:rgba(255,255,255,.08); color:#fff; }
#lm-root .lm-x:focus-visible { outline:2px solid var(--lf-yellow); outline-offset:2px; }

/* stepper */
#lm-root .lm-st { display:flex; align-items:center; padding:14px 24px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0; }
#lm-root .lm-si { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:rgba(255,255,255,.32); white-space:nowrap; }
#lm-root .lm-si.a { color:rgba(255,255,255,.85); }
#lm-root .lm-si.d { color:var(--lf-yellow); }
#lm-root .lm-si .n {
  width:21px; height:21px; border-radius:50%; border:1.5px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0;
}
#lm-root .lm-si.a .n { border-color:var(--lf-yellow); background:rgba(201,160,74,.18); color:var(--lf-yellow); }
#lm-root .lm-si.d .n { border-color:var(--lf-yellow); background:var(--lf-yellow); color:var(--lf-navy-dark); }
#lm-root .lm-sp { flex:1; height:1px; background:rgba(255,255,255,.1); margin:0 8px; min-width:14px; }

/* body + telas */
#lm-root .lm-by { flex:1; overflow-y:auto; padding:24px; scrollbar-width:thin; scrollbar-color:rgba(201,160,74,.35) transparent; }
#lm-root .lm-by::-webkit-scrollbar { width:5px; }
#lm-root .lm-by::-webkit-scrollbar-thumb { background:rgba(201,160,74,.35); border-radius:3px; }
#lm-root .lm-sc { display:none; animation:lmIn .24s ease; }
#lm-root .lm-sc.on { display:block; }
@keyframes lmIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
#lm-root .lm-ttl { font-family:var(--lf-font-head, system-ui, sans-serif); font-size:1.5rem; font-weight:500; line-height:1.2; color:#fff; letter-spacing:-.01em; margin:0 0 8px; }
#lm-root .lm-sub { font-size:13px; color:rgba(255,255,255,.55); line-height:1.55; margin:0 0 22px; }

/* opções (perfil / necessidade) */
#lm-root .lm-ops { display:flex; flex-direction:column; gap:10px; }
#lm-root .lm-op {
  display:flex; align-items:center; gap:13px; padding:14px 16px; width:100%; text-align:left; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.1); border-radius:13px; background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.82); transition:all .2s; font-family:inherit;
}
#lm-root .lm-op:hover, #lm-root .lm-op.s { border-color:var(--lf-yellow); background:rgba(201,160,74,.1); color:#fff; }
#lm-root .lm-op:focus-visible { outline:2px solid var(--lf-yellow); outline-offset:2px; }
#lm-root .lm-oi {
  width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(201,160,74,.12); border:1px solid rgba(201,160,74,.28); color:var(--lf-yellow);
}
#lm-root .lm-ob strong { display:block; font-size:13.5px; font-weight:600; margin-bottom:3px; }
#lm-root .lm-ob span { font-size:11.5px; color:rgba(255,255,255,.45); }
#lm-root .lm-op.s .lm-ob span, #lm-root .lm-op:hover .lm-ob span { color:rgba(255,255,255,.65); }
#lm-root .lm-ck {
  margin-left:auto; width:19px; height:19px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; border:1.5px solid rgba(255,255,255,.18); color:transparent; transition:all .2s;
}
#lm-root .lm-op.s .lm-ck { border-color:var(--lf-yellow); background:var(--lf-yellow); color:var(--lf-navy-dark); }

/* formulário (etapa 3) */
#lm-root .lm-fw { margin-bottom:14px; }
#lm-root .lm-fw2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
@media (max-width:440px) { #lm-root .lm-fw2 { grid-template-columns:1fr; } }
#lm-root .lm-lb { display:block; font-size:11px; font-weight:600; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
#lm-root .lm-lb em { color:var(--lf-yellow); font-style:normal; }
#lm-root .lm-in, #lm-root .lm-ta {
  width:100%; padding:12px 14px; border:1.5px solid rgba(255,255,255,.12); border-radius:11px;
  background:rgba(255,255,255,.05); color:#fff; font:400 14px/1.4 var(--lf-font-ui, system-ui, sans-serif);
  outline:none; transition:border-color .2s, background .2s; box-sizing:border-box;
}
#lm-root .lm-in::placeholder, #lm-root .lm-ta::placeholder { color:rgba(255,255,255,.28); }
#lm-root .lm-in:focus, #lm-root .lm-ta:focus { border-color:rgba(201,160,74,.6); background:rgba(201,160,74,.05); }
#lm-root .lm-in.err { border-color:#e05a4e; background:rgba(224,90,78,.08); }
#lm-root .lm-ta { resize:vertical; min-height:92px; line-height:1.5; }
#lm-root .lm-priv { font-size:11px; color:rgba(255,255,255,.4); line-height:1.5; margin:6px 0 0; }
#lm-root .lm-priv a { color:var(--lf-yellow); text-decoration:none; }
#lm-root .lm-priv a:hover { text-decoration:underline; }

/* footer (navegação) */
#lm-root .lm-ft {
  padding:16px 24px 20px; border-top:1px solid rgba(255,255,255,.07); display:flex; gap:10px;
  flex-shrink:0; background:var(--lf-navy-dark);
}
#lm-root .lm-bk {
  padding:11px 16px; border-radius:10px; border:1.5px solid rgba(255,255,255,.14); background:transparent;
  color:rgba(255,255,255,.6); font:600 13px/1 var(--lf-font-ui, system-ui, sans-serif); cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:all .2s;
}
#lm-root .lm-bk:hover { border-color:rgba(255,255,255,.3); color:#fff; }
#lm-root .lm-nx {
  flex:1; padding:13px 18px; border-radius:10px; border:none; cursor:pointer; color:#171008;
  font:700 14px/1 var(--lf-font-ui, system-ui, sans-serif); display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,var(--lf-red-light) 0%,var(--lf-yellow) 100%);
  box-shadow:0 8px 22px rgba(201,160,74,.28); transition:transform .2s, box-shadow .2s, opacity .2s;
}
#lm-root .lm-nx:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(201,160,74,.38); }
#lm-root .lm-nx:focus-visible { outline:2px solid var(--lf-yellow); outline-offset:2px; }
#lm-root .lm-nx:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
#lm-root .lm-spin { width:15px; height:15px; border:2.2px solid rgba(23,16,8,.35); border-top-color:#171008; border-radius:50%; animation:lmSpin .7s linear infinite; }
@keyframes lmSpin { to { transform:rotate(360deg); } }

@media (max-width:520px) {
  #lm-root .lm-pn { width:100vw; border-left:none; }
  #lm-root .lm-hd, #lm-root .lm-by, #lm-root .lm-ft, #lm-root .lm-st { padding-inline:16px; }
}
@media (prefers-reduced-motion: reduce) {
  #lm-root .lm-bd, #lm-root .lm-pn, #lm-root .lm-sc { transition:none; animation:none; }
  #lm-root .lm-spin { animation:none; }
}

/* Sucesso (etapa 4) */
#lm-root .lm-ok { text-align:left; }
#lm-root .lm-wa {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:8px; padding:14px 18px; border-radius:999px;
  background:#25D366; color:#fff; font:700 14px/1 var(--lf-font-ui, system-ui, sans-serif);
  text-decoration:none; box-shadow:0 10px 24px rgba(37,211,102,.28);
  transition:transform .2s, box-shadow .2s;
}
#lm-root .lm-wa:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(37,211,102,.36); }