/* ============================================================
   KESTRIAH LEAD FORM · painel lateral em etapas (#lm-root)
   Tokens abaixo podem ser sobrescritos por projeto.
   ============================================================ */

:root {
  --lf-navy: var(--svim-black, #212322);
  --lf-navy-dark: var(--svim-ink, #101112);
  --lf-red: var(--svim-gold, #ffb600);
  --lf-red-light: var(--svim-gold-light, #ffce5c);
  --lf-yellow: var(--svim-gold, #ffb600);
  --lf-line: var(--border-default, #dde1ea);
  --lf-muted: var(--text-muted, #6b7a8d);
  --lf-ink: var(--text-primary, #17171a);
  --lf-font-ui: var(--font-body, system-ui, sans-serif);
  --lf-font-head: var(--font-heading, system-ui, sans-serif);
}

/* Botão principal do drawer usa o mesmo gradiente dourado do .btn--primary
   do Design System Svim; texto escuro para contraste (o template original
   usa texto branco, pensado para um CTA escuro/cinza, não dourado). */
#lm-root .lm-nx { color: var(--svim-black, #17171a); box-shadow: var(--glow-primary, 0 8px 22px rgba(255,182,0,.32)); }

/* ============================================================
   PAINEL LATERAL (DRAWER) - #lm-root
   ============================================================ */
#lm-root .lm-bd {
  position:fixed; inset:0; z-index:9000; background:rgba(0,12,28,.62);
  -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(255,182,0,.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, var(--font-body), 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(255,182,0,.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(255,182,0,.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(255,182,0,.35) transparent; }
#lm-root .lm-by::-webkit-scrollbar { width:5px; }
#lm-root .lm-by::-webkit-scrollbar-thumb { background:rgba(255,182,0,.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, var(--font-heading), system-ui, sans-serif); font-size:1.4rem; font-weight:700; line-height:1.2; color:#fff; letter-spacing:-.02em; 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(255,182,0,.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(255,182,0,.12); border:1px solid rgba(255,182,0,.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); }

/* Divisor entre as opções normais (avançam etapa) e a opção externa
   (ex.: agendar pelo app), repetida em toda etapa "Assunto" (lm-ops). */
#lm-root .lm-ops-div {
  display:flex; align-items:center; gap:10px; margin:2px 0; font-size:11px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.32);
}
#lm-root .lm-ops-div::before, #lm-root .lm-ops-div::after {
  content:""; flex:1; height:1px; background:rgba(255,255,255,.1);
}

/* Opção "externa" (ex.: agendar pelo app): não seleciona/avança etapa, abre link
   em nova aba. Borda tracejada + ícone de link para diferenciar das categorias. */
#lm-root .lm-op--ext { border-style:dashed; }
#lm-root .lm-ext {
  margin-left:auto; width:19px; height:19px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; color:var(--lf-yellow); opacity:.75; transition:opacity .2s;
}
#lm-root .lm-op--ext:hover .lm-ext { opacity:1; }

/* 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(255,182,0,.6); background:rgba(255,182,0,.05); }
#lm-root .lm-in.err { border-color:var(--lf-red-light); background:rgba(231,76,60,.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:#fff;
  font:700 14px/1 var(--lf-font-head, 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-red) 100%);
  box-shadow:0 8px 22px rgba(23,23,26,.32); transition:transform .2s, box-shadow .2s, opacity .2s;
}
#lm-root .lm-nx:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(23,23,26,.42); }
#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(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:lmSpin .7s linear infinite; }
@keyframes lmSpin { to { transform:rotate(360deg); } }

@media (max-width:520px) {
  #lm-root .lm-pn { width:100%; 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-head, 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); }

/* ============================================================
   FORMULÁRIO INLINE - página de contato (.lf-*)
   ============================================================ */
.lf-card {
  background:#fff; border:1px solid #dde1ea; border-radius:20px; padding:2.25rem;
  box-shadow:0 10px 40px rgba(0,44,94,.08);
}
@media (max-width:560px) { .lf-card { padding:1.5rem; } }

.lf-form { width:100%; }
.lf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.lf-field { display:flex; flex-direction:column; margin-bottom:1rem; min-width:0; }
.lf-label { font-family:var(--lf-font-ui, system-ui, sans-serif); font-size:.8rem; font-weight:600; color:var(--lf-ink); margin-bottom:.4rem; letter-spacing:.01em; }
.lf-req { color:var(--lf-red); }
.lf-input, .lf-select, .lf-textarea {
  width:100%; font-family:var(--lf-font-ui, system-ui, sans-serif); font-size:.95rem; color:var(--lf-ink);
  background:#fff; border:1.5px solid var(--lf-line); border-radius:11px; padding:.8rem .95rem;
  transition:border-color .2s, box-shadow .2s; min-height:46px;
}
.lf-textarea { min-height:104px; resize:vertical; line-height:1.55; }
.lf-input::placeholder, .lf-textarea::placeholder { color:#9aa4b4; }
.lf-input:focus, .lf-select:focus, .lf-textarea:focus { outline:none; border-color:var(--lf-navy); box-shadow:0 0 0 3px rgba(0,44,94,.12); }
.lf-input--invalid { border-color:var(--lf-red) !important; box-shadow:0 0 0 3px rgba(23,23,26,.12) !important; }
.lf-error { display:none; color:var(--lf-red); font-size:.78rem; margin-top:.35rem; }
.lf-error.is-visible { display:block; }

.lf-check { display:flex; gap:.6rem; align-items:flex-start; margin:.2rem 0 1rem; }
.lf-check input { width:18px; height:18px; margin-top:.15rem; accent-color:var(--lf-navy); flex:0 0 auto; }
.lf-check span { font-size:.82rem; color:var(--lf-muted); line-height:1.5; }
.lf-check strong { color:var(--lf-ink); font-weight:600; }

.lf-submit {
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:52px;
  padding:.9rem 1.5rem; border:0; cursor:pointer; font-family:var(--lf-font-head, system-ui, sans-serif);
  font-size:1rem; font-weight:600; color:#fff; border-radius:100px;
  background:linear-gradient(135deg,var(--lf-red-light) 0%,var(--lf-red) 52%,var(--lf-navy) 100%);
  box-shadow:0 8px 22px rgba(23,23,26,.32); transition:transform .2s, box-shadow .2s;
}
.lf-submit:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(23,23,26,.4); }
.lf-submit:focus-visible { outline:2px solid var(--lf-yellow); outline-offset:3px; }
.lf-submit[disabled] { opacity:.75; cursor:wait; transform:none; }
.lf-spinner { width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:lf-spin .7s linear infinite; display:none; }
.lf-submit.is-loading .lf-spinner { display:inline-block; }
@keyframes lf-spin { to { transform:rotate(360deg); } }
.lf-hint { font-size:.78rem; color:var(--lf-muted); text-align:center; margin-top:.7rem; }

.lf-intent-label { font-family:var(--lf-font-head, system-ui, sans-serif); font-weight:600; color:var(--lf-ink); font-size:.95rem; margin:0 0 .7rem; }
.lf-intent-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.lf-intent-card {
  display:flex; gap:.85rem; align-items:flex-start; text-align:left; cursor:pointer;
  background:#fff; border:1.5px solid var(--lf-line); border-radius:16px; padding:1.1rem 1.15rem;
  transition:border-color .2s, box-shadow .2s, transform .2s; width:100%;
}
.lf-intent-card:hover { border-color:var(--lf-navy); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,28,58,.1); }
.lf-intent-card:focus-visible { outline:2px solid var(--lf-yellow); outline-offset:2px; }
.lf-intent-card.is-selected { border-color:var(--lf-navy); background:rgba(0,44,94,.04); box-shadow:0 0 0 2px rgba(0,44,94,.25) inset; }
.lf-intent-ic { flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--lf-navy) 0%,var(--lf-navy-dark) 100%); color:var(--lf-yellow); font-size:1.25rem; }
.lf-intent-tt { display:block; font-family:var(--lf-font-head, system-ui, sans-serif); font-weight:600; color:var(--lf-ink); font-size:.98rem; margin-bottom:.2rem; }
.lf-intent-tx { display:block; font-size:.82rem; color:var(--lf-muted); line-height:1.45; }

.lf-badge { display:none; align-items:center; gap:.5rem; width:max-content; max-width:100%; background:rgba(0,44,94,.07); color:var(--lf-navy); font-size:.8rem; font-weight:600; padding:.45rem .8rem; border-radius:100px; margin-bottom:1rem; }
.lf-badge.is-visible { display:inline-flex; }
.lf-badge button { border:0; background:transparent; cursor:pointer; color:var(--lf-navy); display:inline-flex; padding:0; }

.lf-note { display:flex; gap:.55rem; align-items:flex-start; background:rgba(0,44,94,.05); border:1px solid rgba(0,44,94,.12); color:var(--lf-navy); font-size:.85rem; line-height:1.5; padding:.7rem .85rem; border-radius:12px; margin-bottom:1rem; }
.lf-note iconify-icon { flex:0 0 auto; font-size:1.05rem; margin-top:.05rem; color:var(--lf-navy); }
.lf-note[hidden] { display:none; }

@media (max-width:640px) {
  .lf-row { grid-template-columns:1fr; gap:0; }
  .lf-intent-grid { grid-template-columns:1fr; }
}