/* engage.css v1 - styles for engage.js (floating call button + card, talking-video bubble,
   sale-date question popup, call-back card). Every element is position:fixed and injected after
   DOMContentLoaded, so nothing here moves page content. All rules are scoped under .wse; site
   themes style bare <button>/<a>, so each control resets them explicitly. Colours are CSS
   variables that engage.js overrides from WSLA_ENGAGE.theme. */
.wse{--wse-slate:#12314F;--wse-slate-deep:#0B2039;--wse-brick:#B4431F;--wse-brick-dark:#8A2E17;--wse-green:#2DA44E;--wse-ink:#24313F;--wse-muted:#5A6B7B;--wse-line:#DCE3EC;--wse-soft:#EEF3F8;--wse-star:#E8A317;--wse-display:"Montserrat",-apple-system,"Segoe UI",sans-serif;--wse-body:inherit;--wse-z:100000;--wse-mb:76px;font-family:var(--wse-body);font-size:16px;line-height:1.45;color:var(--wse-ink);text-align:left}
.wse *,.wse *:before,.wse *:after{box-sizing:border-box}
.wse [hidden]{display:none!important}
.wse p{margin:0}
.wse button{-webkit-appearance:none;appearance:none;margin:0;border:0;border-radius:0;background:none;color:inherit;padding:0;font:inherit;line-height:inherit;text-align:inherit;text-transform:none;letter-spacing:normal;white-space:normal;box-shadow:none;transition:none;cursor:pointer;width:auto;min-height:0}
.wse button:where(:hover,:focus,:active){background:none;color:inherit;border-color:transparent}
.wse a{text-decoration:none}
.wse :focus-visible{outline:3px solid var(--wse-star);outline-offset:2px}
.wse svg{display:block;fill:currentColor}
.wse .wse-sentinel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* floating call button (left) + its card */
.wse .wse-fab{position:fixed;left:14px;top:48%;z-index:var(--wse-z);width:64px;height:64px;border-radius:50%;background:var(--wse-green);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 8px 22px rgba(0,0,0,.3);font-family:var(--wse-display);font-size:10px;font-weight:700;line-height:1;text-align:center}
.wse .wse-fab:hover,.wse .wse-fab:focus{color:#fff;background:#25903F}
.wse .wse-fab svg{width:22px;height:22px}
.wse .wse-callcard{position:fixed;left:86px;top:48%;transform:translateY(-10px);z-index:var(--wse-z);width:268px;max-width:calc(100vw - 100px);background:#fff;border:1px solid var(--wse-line);border-radius:10px;padding:12px 14px 14px;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:15px}
.wse .wse-callcard b{display:block;font-family:var(--wse-display);color:var(--wse-slate);font-size:19px;font-variant-numeric:tabular-nums}
.wse .wse-callcard p{margin:4px 0 12px;color:var(--wse-ink)}
.wse .wse-row{display:flex;gap:8px}
.wse .wse-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;padding:11px 10px;font-family:var(--wse-display);font-weight:700;font-size:15px;line-height:1.1;color:#fff;background:var(--wse-slate)}
.wse .wse-btn svg{width:17px;height:17px}
.wse .wse-btn:hover,.wse .wse-btn:focus{color:#fff;background:var(--wse-slate-deep)}
.wse .wse-btn-call{background:var(--wse-green)}
.wse .wse-btn-call:hover,.wse .wse-btn-call:focus{background:#25903F}

/* talking-video bubble (bottom right) */
.wse .wse-bub{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:var(--wse-z);width:min(250px,calc(100vw - 28px));border-radius:14px;overflow:hidden;background:#000;color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:14px}
.wse .wse-vf{position:relative;height:300px;background:#111}
.wse .wse-vf video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 15%;background:#111}
.wse .wse-ctrls{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;pointer-events:none}
.wse .wse-ctrls span{display:inline-flex;gap:6px;pointer-events:auto}
.wse .wse-ctrl{width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,.88);color:#111;display:inline-grid;place-items:center}
.wse .wse-ctrl:hover,.wse .wse-ctrl:focus{background:#fff;color:#111}
.wse .wse-ctrl svg{width:16px;height:16px}
.wse .wse-ctrl[aria-disabled="true"]{opacity:.5;cursor:default}
.wse .wse-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85) 45%);line-height:1.35}
.wse .wse-cap b{font-family:var(--wse-display)}
/* sound (2026-10-15c): round sound button in the control row + "Tap for sound" hint while muted */
.wse .wse-ctrl.wse-snd-btn{border-radius:50%}
.wse .wse-snd{display:flex;width:max-content;align-items:center;gap:5px;margin-top:6px;padding:3px 9px 3px 7px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;font-family:var(--wse-display);font-size:12px;font-weight:700;line-height:1.2}
.wse .wse-snd:hover,.wse .wse-snd:focus{background:rgba(255,255,255,.32);color:#fff}
.wse .wse-snd svg{width:14px;height:14px}
.wse .wse-opts{display:grid;gap:7px;padding:10px 12px 12px;background:var(--wse-slate-deep)}
.wse .wse-opt{display:flex;gap:8px;align-items:center;width:100%;text-align:left;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:9px 12px;font-size:14px;line-height:1.25}
.wse .wse-opt:before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid #fff;flex:0 0 auto}
.wse .wse-opt:hover,.wse .wse-opt:focus{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.55)}
.wse .wse-reply{padding:12px;background:var(--wse-slate-deep);line-height:1.4;border-top:1px solid rgba(255,255,255,.12)}
.wse .wse-go{display:block;width:100%;margin-top:10px;background:var(--wse-brick);color:#fff;border-radius:8px;padding:11px 8px;font-family:var(--wse-display);font-weight:700;font-size:14px;line-height:1.2;text-align:center}
.wse .wse-go:hover,.wse .wse-go:focus{background:var(--wse-brick-dark);color:#fff}
.wse .wse-again{display:inline-block;margin-top:8px;font-size:12px;text-decoration:underline;color:#fff;opacity:.8}
.wse .wse-again:hover,.wse .wse-again:focus{color:#fff;opacity:1}
.wse .wse-bub.is-x{width:min(360px,calc(100vw - 28px))}
.wse .wse-bub.is-x .wse-vf{height:min(440px,58vh)}
/* enlarged = watching: drop the intro line so the burned-in video captions stay clear (2026-10-15) */
.wse .wse-bub.is-x .wse-cap{display:none}
/* minimised: a round thumbnail that reopens the bubble */
.wse .wse-mini{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:var(--wse-z);width:68px;height:68px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.35);background:#111 center 15%/cover no-repeat}
.wse .wse-mini:hover,.wse .wse-mini:focus{border-color:#fff}
.wse .wse-mini i{position:absolute;right:4px;bottom:4px;width:20px;height:20px;border-radius:50%;background:var(--wse-brick);display:grid;place-items:center}
.wse .wse-mini i svg{width:11px;height:11px;fill:#fff}

/* stepping aside so a lead form is never covered (engage.js avoidSelector) */
.wse .is-away{visibility:hidden;opacity:0;pointer-events:none}

/* question popup + call-back card (modal) */
.wse .wse-scrim{position:fixed;inset:0;z-index:calc(var(--wse-z) + 10);background:rgba(10,20,35,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.wse .wse-q{position:relative;width:100%;max-width:420px;background:#fff;color:var(--wse-ink);border-radius:10px;padding:32px 26px 22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.wse .wse-qt{font-size:22px;font-weight:600;line-height:1.3;color:var(--wse-slate)}
.wse .wse-qrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:22px}
.wse .wse-qbtn{font-size:18px;color:var(--wse-muted);padding:10px 16px;border-radius:999px}
.wse .wse-qbtn:hover,.wse .wse-qbtn:focus{color:var(--wse-slate);background:var(--wse-soft)}
.wse .wse-qyes{border:2px solid var(--wse-green);color:var(--wse-green);padding:9px 28px;font-weight:600}
.wse .wse-qyes:hover,.wse .wse-qyes:focus{background:var(--wse-green);color:#fff}
.wse .wse-x{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--wse-muted)}
.wse .wse-x:hover,.wse .wse-x:focus{background:var(--wse-soft);color:var(--wse-slate)}
.wse .wse-x svg{width:20px;height:20px}
.wse .wse-cb{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:14px;padding:18px 16px 12px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.wse .wse-cbh{display:flex;gap:12px;align-items:center;margin:0 40px 12px 0}
.wse .wse-cbh svg{width:34px;height:34px;flex:0 0 auto;fill:var(--wse-green)}
.wse .wse-cbh b{display:block;font-family:var(--wse-display);font-size:18px;color:var(--wse-slate);line-height:1.2}
.wse .wse-cbh span{font-size:14px;color:var(--wse-muted)}
.wse .wse-cb iframe{display:block;width:100%;border:0;border-radius:10px;background:#fff}

@media (max-width:860px){
  .wse .wse-bub{width:min(170px,calc(100vw - 28px));bottom:calc(var(--wse-mb) + env(safe-area-inset-bottom,0px))}
  .wse .wse-vf{height:150px}
  .wse .wse-cap{font-size:12px;padding:20px 8px 6px}
  .wse .wse-opts{padding:6px 8px 8px;gap:5px}
  .wse .wse-opt{font-size:12px;padding:6px 9px}
  .wse .wse-opt:before{width:8px;height:8px}
  .wse .wse-reply{font-size:12.5px;padding:9px}
  .wse .wse-go{font-size:13px;padding:10px 6px}
  .wse .wse-ctrl{width:26px;height:26px}
  .wse .wse-ctrl svg{width:14px;height:14px}
  .wse .wse-ctrls{top:6px;left:6px;right:6px}
  .wse .wse-ctrls span{gap:4px}
  .wse .wse-bub.is-x{width:min(360px,calc(100vw - 28px))}
  .wse .wse-bub.is-x .wse-vf{height:45vh}
  .wse .wse-mini{bottom:calc(var(--wse-mb) + env(safe-area-inset-bottom,0px));width:60px;height:60px}
  .wse .wse-fab{top:auto;bottom:calc(var(--wse-mb) + 8px + env(safe-area-inset-bottom,0px));left:12px;width:56px;height:56px}
  .wse .wse-callcard{top:auto;transform:none;left:76px;bottom:calc(var(--wse-mb) + 8px + env(safe-area-inset-bottom,0px))}
  .wse .wse-qt{font-size:20px}
}
@media (prefers-reduced-motion:no-preference){
  .wse .wse-scrim{animation:wse-fade .2s ease}
  .wse .wse-q,.wse .wse-cb{animation:wse-up .25s ease}
  .wse .wse-bub,.wse .wse-mini{animation:wse-in .35s ease both}
  .wse .wse-fab,.wse .wse-mini{transition:opacity .2s ease,visibility .2s ease}
  @keyframes wse-fade{from{opacity:0}to{opacity:1}}
  @keyframes wse-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes wse-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media print{.wse{display:none!important}}