/* Visuosofts lead-capture slide-in — /assets/vs-lead-capture.css
 * Spec: lead-capture/DESIGN.md §4 (layout) + §5 (visual).
 * Bottom-right card; z-index 1800: above the FAB (1500) and
 * back-to-top (1200), below the cookie banner (2500), search overlay
 * (3000) and modal (10000). position:fixed + transform/opacity-only
 * animation — zero layout shift by construction.
 * Uses the site theme vars from css/style.css (:root). */

.vs-lc {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1800;
  box-sizing: border-box;
  width: 360px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.16);
  padding: 24px 24px 16px;
  font-family: 'Barlow', 'Segoe UI', sans-serif;
  /* Entrance starts offset + transparent; .vs-lc--visible settles it.
     Hidden state is the [hidden] attribute — never merely off-screen. */
  transform: translate(12px, 8px);
  opacity: 0;
  transition: transform .28s var(--ease-out) .04s, opacity .24s var(--ease-out) .04s;
}

.vs-lc[hidden] { display: none !important; }

.vs-lc--visible {
  transform: none;
  opacity: 1;
}

/* Exit runs shorter and ease-in (§5.4); used for dismiss, Esc, yield. */
.vs-lc--leaving {
  transition: transform .18s ease-in, opacity .13s ease-in;
}

/* The accent bar does not animate on exit — it rides the card out. */
.vs-lc--leaving .vs-lc-bar { transition: none; transform: scaleX(1); }

/* Reduced motion (§5.4): no transform, no slide, no bar animation —
   a hard show/hide. The JS adds .vs-lc--static; the media query
   below enforces the same without JS. */
.vs-lc--static { transition: none !important; transition-delay: 0ms !important; transform: none !important; }
.vs-lc--static .vs-lc-bar { transition: none !important; }
.vs-lc--static .vs-lc-cta, .vs-lc--static .vs-lc-notks, .vs-lc--static .vs-lc-close { transition: none !important; }

/* While the card is visible it covers the bottom-right back-to-top
   button (44px, right/bottom 22px, z 1200) exactly — suppress that
   button for as long as the card is open (JS toggles body.vs-lead-open
   on show and removes it on any hide: dismiss, CTA-less close, yield). */
body.vs-lead-open .vs-back-to-top { opacity: 0; pointer-events: none; }

/* 3px accent bar (§5.2): decorative, var(--red) — never text.
   scaleX 0→1 origin-left across the entrance, the site's card motif. */
.vs-lc-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease-out);
}

.vs-lc--visible .vs-lc-bar { transform: scaleX(1); }

.vs-lc-variant[hidden] { display: none !important; }

.vs-lc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-right: 52px; /* never runs under the close button */
  /* --red-dark, NOT --red: #E80C0D on white is ~4.0:1 and fails AA
     for small text; --red-dark is ~5.9:1 (§7). */
  color: var(--red-dark);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.vs-lc-glyph { width: 16px; height: 16px; flex: none; }

/* Display-styled text, deliberately NOT a heading element (§7):
   the card must stay out of every page's heading outline. */
.vs-lc-title {
  margin: 0 0 10px;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}

.vs-lc-body {
  margin: 0 0 18px;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--text-light, var(--muted));
}

.vs-lc-cta {
  display: block;
  min-height: 48px;
  background: var(--red-dark);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.25;
  text-indent: .1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 15px 18px;
  border: 1px solid var(--red-dark);
  border-radius: 6px;
  transition: background-color .14s ease-out, box-shadow .14s ease-out;
}

.vs-lc-cta:hover { background: var(--red); border-color: var(--red); }
.vs-lc-cta:active { background: var(--red-dark); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); transition-duration: .06s; }
.vs-lc-cta:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }

.vs-lc-notks {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 8px auto 0;
  padding: 13px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-light, var(--muted));
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color .14s ease-out, background-color .14s ease-out;
}

.vs-lc-notks:hover { color: var(--red-dark); background: var(--surface3, #f5f5f5); text-decoration: underline; text-underline-offset: 3px; }
.vs-lc-notks:active { color: var(--text); background: var(--border2, rgba(0,0,0,.05)); transition-duration: .06s; }
.vs-lc-notks:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }

.vs-lc-close {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-light, var(--muted));
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .14s ease-out, color .14s ease-out;
}

.vs-lc-close:hover { color: var(--red-dark); background: var(--red-subtle, rgba(250, 14, 15, .05)); }
.vs-lc-close:active { background: rgba(250,14,15,.12); transition-duration: .06s; }
.vs-lc-close:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }

/* Mobile (≤600px, §4.3): full-width card docked ABOVE the FAB row —
   bottom 84px = FAB inset 16px + FAB height 52px + 16px clearance.
   It never covers the FAB (bottom-left) or back-to-top. */
@media (max-width: 600px) {
  .vs-lc {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 50px));
    width: auto;
    max-width: none;
    padding: 20px 20px 16px;
    transform: translateY(12px);
  }

  .vs-lc--visible { transform: none; }
  .vs-lc--static { transform: none !important; }

  .vs-lc-eyebrow { margin-bottom: 8px; }
  .vs-lc-title { font-size: 1.5625rem; margin-bottom: 8px; }
  .vs-lc-body { margin-bottom: 16px; }
  .vs-lc-notks { margin-top: 8px; }
}

/* 481–600px: right-dock at 400px instead of stretching full-width. */
@media (min-width: 481px) and (max-width: 600px) {
  .vs-lc { left: auto; width: 400px; max-width: calc(100vw - 32px); }
}

/* Short viewports: the card scrolls internally rather than clipping. */
@media (max-height: 480px) {
  .vs-lc { overflow-y: auto; }
}

@media (forced-colors: active) {
  .vs-lc-cta:focus-visible, .vs-lc-notks:focus-visible, .vs-lc-close:focus-visible { outline-color: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-lc { transition: none; transform: none; transition-delay: 0ms; }
  .vs-lc--leaving { transition: none; }
  .vs-lc-bar { transition: none; }
  .vs-lc-cta, .vs-lc-notks, .vs-lc-close { transition: none; }
}

/* Print (§3): never — alongside .vs-fab/.vs-cookie in the site's
   print stylesheet. */
@media print {
  .vs-lc { display: none !important; }
}