/* Viewlo guided tour (coachmarks) */
.vlt-overlay { position: fixed; inset: 0; z-index: 90000; }
/* Dim only — used by the visitor demo, where the page underneath is the
   thing being demonstrated and has to stay draggable. */
.vlt-overlay.vlt-pass { pointer-events: none; }
.vlt-spot {
  position: absolute;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(11, 18, 36, 0.62);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}
.vlt-card {
  position: fixed; z-index: 90002;
  background: var(--vl-white, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  width: min(340px, 92vw);
  padding: 18px 18px 16px;
  animation: vltIn 0.2s ease;
}
@keyframes vltIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vlt-step { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--vl-blue, #2453ff); margin: 0 0 6px; }
.vlt-card h3 { margin: 0 0 7px; font-size: 17px; color: var(--vl-navy, #0b1224); letter-spacing: -0.3px; }
.vlt-card p  { margin: 0 0 16px; font-size: 14px; color: var(--vl-slate-600, #56607a); line-height: 1.6; }
.vlt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vlt-dots { display: flex; gap: 5px; }
.vlt-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--vl-slate-200, #dde2ec); transition: all 0.2s; }
.vlt-dot.on { background: var(--vl-blue, #2453ff); width: 18px; }
.vlt-btns { display: flex; gap: 8px; }
/* Skip / close control — sits inside the card's top-right corner. */
.vlt-x {
  position: absolute; top: 9px; right: 10px; z-index: 1;
  width: 26px; height: 26px; padding: 0; line-height: 24px; text-align: center;
  border: none; border-radius: 999px; background: var(--vl-slate-100, #f1f5f9);
  color: var(--vl-slate-600, #56607a); font-size: 19px; font-weight: 400;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.vlt-x:hover { background: var(--vl-slate-200, #e2e8f0); color: var(--vl-navy, #0b1224); }
/* keep header text clear of the corner button */
.vlt-card .vlt-step, .vlt-card h3 { padding-right: 30px; }
@media (max-width: 520px) {
  .vlt-card { left: 4vw !important; right: 4vw; width: auto; }
}