/* Electrical3 EV charger selector — portable widget.

   Self-contained on purpose. Everything is scoped under .evs so it can be
   dropped onto any page, including one built in something else, without
   inheriting or fighting that page's styles. It carries its own dark surface
   rather than borrowing the background it lands on, so it looks deliberate
   on a white landing page and on the dark section of the main site alike.

   The only thing it takes from outside is the brand blue, and it falls back
   to the literal if --blue is not defined. */

.evs-host{container-type:inline-size}

.evs{
  --evs-blue:var(--blue,#1457B8);
  --evs-ink:#14130F;
  --evs-card:#1E1D1B;
  --evs-panel:#26251F;
  --evs-line:rgba(255,255,255,.14);
  --evs-mute:#B9B7B4;
  --evs-good:#4CC77C;
  color:#fff;
  background:var(--evs-card);
  border-radius:8px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  font-family:inherit;
  text-align:left;
}

.evs *{box-sizing:border-box}

.evs .evs-ask{padding:34px;border-radius:8px 0 0 8px}
.evs .evs-out{border-radius:0 8px 8px 0}
.evs .evs-out{
  background:var(--evs-panel);
  padding:34px;
  display:flex;
  flex-direction:column;
  gap:16px;
  justify-content:center;

  /* THE PRICE PANEL HUGS ITS CONTENT AND FOLLOWS THE READER.

     As a plain grid cell it stretched to match the questions column — 1,243px
     of panel holding one sentence, which `justify-content:center` then parked
     in the middle of, with six hundred pixels of empty grey above it and six
     hundred below. It read as a rendering fault rather than as a panel waiting
     for an answer.

     `align-self:start` stops the stretch. Sticky keeps it beside whichever
     question is being answered, so the price is on screen at the moment it
     changes rather than scrolled off the top — which is the whole point of
     putting it next to the questions instead of under them.

     Top offset clears the sticky site header. */
  align-self:start;
  position:sticky;
  top:116px;
}

.evs h3{
  font-size:var(--fs-lead,22px);font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 6px;line-height:1.15;
}
.evs .evs-hint{color:var(--evs-mute);font-size:var(--fs-small,15px);line-height:1.5;margin:0 0 24px}

/* questions */
.evs fieldset{border:0;padding:0;margin:0 0 22px}
.evs legend{
  font-size:var(--fs-tiny,13px);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--evs-mute);padding:0;margin-bottom:10px;
}
.evs .evs-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.evs .evs-opts.evs-stack{grid-template-columns:1fr}

.evs .evs-opt{position:relative}
.evs .evs-opt input{
  position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;
  margin:0;cursor:pointer;
}
/* THE ANSWER BUTTONS.

   These are the only controls on the page and they were the weakest thing on
   it: 43px tall (under the 44px minimum for a thumb, and nine short of every
   other button on the site), a 6px radius where the site uses 8px, a 0.8px
   border that renders as a grey hairline, weight 400, no shadow, and — on the
   label itself — cursor:default. Nothing about them said "press me". They read
   as a list of text, which is why picking an answer felt like nothing
   happened.

   Now: proper height, the site's radius, a real border, weight 700, a pointer,
   and a hover that lifts. Selected still goes solid blue, but with the same
   raised treatment the site's other buttons use so choosing feels physical. */
.evs .evs-opt span{
  display:flex;align-items:center;min-height:48px;padding:12px 18px;
  border:1px solid var(--evs-line);
  border-radius:8px;font-size:var(--fs-small,15px);font-weight:700;line-height:1.3;
  cursor:pointer;
  transition:border-color .12s,background .12s,transform .12s,box-shadow .12s;
}
.evs .evs-opt input:hover + span{
  border-color:rgba(255,255,255,.4);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.evs .evs-opt input:checked + span{
  background:var(--evs-blue);border-color:var(--evs-blue);font-weight:800;
  box-shadow:0 3px 0 rgba(0,0,0,.22);transform:none;
}
.evs .evs-opt input:focus-visible + span{outline:3px solid #fff;outline-offset:2px}

/* surge upsell */
.evs .evs-up{
  border:1px solid var(--evs-line);border-radius:6px;
  padding:16px 18px;margin-top:4px;background:rgba(255,255,255,.03);
}
.evs .evs-up-head{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  font-size:var(--fs-body,18px);line-height:1.3;
}
.evs .evs-up-head input{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:22px;height:22px;border:2px solid var(--evs-mute);border-radius:4px;
  cursor:pointer;position:relative;background:transparent;
}
.evs .evs-up-head input:checked{background:var(--evs-blue);border-color:var(--evs-blue)}
.evs .evs-up-head input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg);
}
.evs .evs-up-head input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.evs .evs-up-price{
  font-style:normal;color:var(--evs-blue);font-weight:800;margin-left:8px;
  font-variant-numeric:tabular-nums;
}
.evs .evs-up-head input:checked + span .evs-up-price{color:var(--evs-good)}
.evs .evs-up-why{
  font-size:var(--fs-small,15px);line-height:1.55;color:var(--evs-mute);margin:12px 0 0;
}

/* result */
.evs .evs-eyebrow{
  font-size:var(--fs-tiny,13px);font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--evs-mute);margin:0;
}
.evs .evs-price{
  font-size:var(--fs-3xl,58px);font-weight:800;line-height:1;margin:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.evs .evs-price small{font-size:var(--fs-body,18px);font-weight:700;color:var(--evs-mute);margin-left:8px;letter-spacing:0}
.evs .evs-charger{margin:0;font-size:var(--fs-body,18px);font-weight:700;line-height:1.35}
.evs .evs-spec{margin:0;font-size:var(--fs-small,15px);color:var(--evs-mute);line-height:1.5}

.evs ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.evs ul li{font-size:var(--fs-small,15px);line-height:1.45;padding-left:22px;position:relative;color:#E8E7E4}
.evs ul li::before{
  content:"";position:absolute;left:2px;top:.48em;width:9px;height:9px;
  border-radius:50%;background:var(--evs-good);
}

.evs .evs-add{
  border-top:1px solid var(--evs-line);padding-top:14px;
  font-size:var(--fs-small,15px);color:var(--evs-mute);line-height:1.5;margin:0;
}
.evs .evs-add b{color:#fff}

.evs .evs-note{font-size:var(--fs-tiny,13px);color:var(--evs-mute);line-height:1.5;margin:0}

.evs .evs-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.evs .evs-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 24px;border-radius:8px;text-decoration:none;
  font-size:var(--fs-body,18px);font-weight:900;letter-spacing:.01em;
  border:1px solid transparent;
}
.evs .evs-btn-blue{background:#ffb700;color:#101827;box-shadow:0 5px 0 #d39600;transition:transform .12s ease,box-shadow .12s ease}
.evs .evs-btn-blue:hover{transform:translateY(2px);box-shadow:0 3px 0 #d39600}
.evs .evs-btn-blue:active{transform:translateY(5px);box-shadow:0 0 0 #d39600}
.evs .evs-btn-ghost{border-color:var(--evs-line);color:#fff}
.evs .evs-btn-ghost:hover{border-color:#fff}

/* one column once the widget itself is narrow, not when the window is —
   so it behaves the same in a wide page and in a narrow column */
@container (max-width: 720px){
  .evs{grid-template-columns:1fr}
  .evs .evs-ask,.evs .evs-out{padding:26px}
    .evs .evs-ask{border-radius:8px 8px 0 0}
    .evs .evs-out{position:static;align-self:stretch;top:auto;border-radius:0 0 8px 8px}
  .evs .evs-price{font-size:var(--fs-2xl,40px)}
}
@supports not (container-type: inline-size){
  @media (max-width: 860px){
    .evs{grid-template-columns:1fr}
    .evs .evs-ask,.evs .evs-out{padding:26px}
    .evs .evs-ask{border-radius:8px 8px 0 0}
    .evs .evs-out{position:static;align-self:stretch;top:auto;border-radius:0 0 8px 8px}
    .evs .evs-price{font-size:var(--fs-2xl,40px)}
  }
}

@media (prefers-reduced-motion: reduce){
  .evs .evs-opt span{transition:none}
}


/* ---------------------------------------------------------------- light --
   Add class "light" alongside "evs-host" and the widget takes the page's
   colouring instead of its own dark card:

       <div id="ev-selector" class="light"></div>

   Only the tokens move. Every rule above keeps working, so the two skins
   cannot drift apart the way a second stylesheet would.                    */

.evs-host.light .evs{
  --evs-card:#ffffff;
  --evs-panel:#f4f6fa;
  --evs-line:#dbe1ea;
  --evs-mute:#5a6b85;
  color:#0f2b5b;
  border:1px solid #dbe1ea;
  box-shadow:0 10px 30px rgba(15,43,91,.07);
}
.evs-host.light .evs h3{color:#0f2b5b}
.evs-host.light .evs .evs-opt span{border-color:#cfd7e3;background:#fff;color:#0f2b5b}
.evs-host.light .evs .evs-opt input:hover + span{border-color:var(--evs-blue)}
.evs-host.light .evs .evs-opt span{border-color:#c3cddb;background:#fff;color:#0f2b5b}
.evs-host.light .evs .evs-opt input:hover + span{border-color:var(--evs-blue);box-shadow:0 4px 12px rgba(15,43,91,.14)}
.evs-host.light .evs .evs-opt input:checked + span{background:var(--evs-blue);border-color:var(--evs-blue);color:#fff;box-shadow:0 3px 0 #0d3f86}
.evs-host.light .evs .evs-opt input:focus-visible + span{outline-color:var(--evs-blue)}
.evs-host.light .evs .evs-price{color:#0f2b5b}
.evs-host.light .evs .evs-charger{color:#0f2b5b}
.evs-host.light .evs ul li{color:#33415c}
.evs-host.light .evs .evs-add b{color:#0f2b5b}
.evs-host.light .evs .evs-up{background:#fff;border-color:#dbe1ea}
.evs-host.light .evs .evs-up-head{color:#0f2b5b}
.evs-host.light .evs .evs-up-head input{border-color:#9aa8bd}
.evs-host.light .evs .evs-btn-ghost{border-color:#c3cddb;color:#0f2b5b}
.evs-host.light .evs .evs-btn-ghost:hover{border-color:var(--evs-blue);color:var(--evs-blue)}
.evs-host.light .evs .evs-up-head input:checked + span .evs-up-price{color:#1B7A3D}

/* ---- blurred gate (pre-unlock) ---- */
.evs .evs-blurred{filter:blur(8px);pointer-events:none;user-select:none;opacity:.6}
.evs .evs-gate-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:0 26px;margin:8px 0;
  font-family:inherit;font-size:var(--fs-body,18px);font-weight:900;
  letter-spacing:.01em;color:#101827;background:#ffb700;
  border:0;border-radius:8px;box-shadow:0 5px 0 #d39600;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.evs .evs-gate-btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #d39600}
.evs .evs-gate-btn:active{transform:translateY(5px);box-shadow:0 0 0 #d39600}
.evs .evs-gate-btn:focus-visible{outline:3px solid #0f2b5b;outline-offset:3px}

/* ---- lead-capture popup overlay ---- */
.evs-overlay{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  padding:16px;
}
.evs-modal{
  background:#fff;color:#1a1a1a;border-radius:12px;
  max-width:440px;width:100%;padding:36px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative;
  text-align:center;
}
.evs-modal-icon{font-size:var(--fs-2xl,40px);margin:0 0 8px;line-height:1}
.evs-modal-title{font-size:var(--fs-lead,22px);font-weight:800;margin:0 0 8px;color:#0f2b5b}
.evs-modal-sub{font-size:var(--fs-small,15px);color:#5a6b85;margin:0 0 22px;line-height:1.5}
.evs-modal-form{text-align:left}
.evs-modal-field{margin-bottom:14px}
.evs-modal-field label{
  display:block;font-size:var(--fs-tiny,13px);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#5a6b85;margin-bottom:5px;
}
.evs-modal-input{
  display:block;width:100%;padding:12px 14px;
  font-family:inherit;font-size:var(--fs-small,15px);
  border:1px solid #cfd7e3;border-radius:6px;
  background:#f8f9fb;color:#1a1a1a;transition:border-color .15s;
}
.evs-modal-input:focus{outline:none;border-color:var(--blue,#1457B8);box-shadow:0 0 0 3px rgba(20,87,184,.15)}
.evs-modal-err{color:#dc2626;font-size:var(--fs-small,15px);font-weight:600;min-height:20px;margin:4px 0 0;text-align:center}
.evs-modal-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:0 26px;margin-top:16px;
  font-family:inherit;font-size:var(--fs-body,18px);font-weight:900;
  letter-spacing:.01em;color:#101827;background:#ffb700;
  border:0;border-radius:8px;box-shadow:0 5px 0 #d39600;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.evs-modal-btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #d39600}
.evs-modal-btn:active{transform:translateY(5px);box-shadow:0 0 0 #d39600}
.evs-modal-btn:focus-visible{outline:3px solid #0f2b5b;outline-offset:3px}
.evs-modal-btn:disabled{opacity:.6;cursor:wait}
.evs-modal-privacy{
  font-size:var(--fs-micro,11px);color:#8b95a5;line-height:1.55;margin:14px 0 0;
  text-align:center;font-style:italic;
}