/* 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;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  font-family:inherit;
  text-align:left;
}

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

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

.evs h3{
  font-size:24px;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:15px;line-height:1.5;margin:0 0 24px}

/* questions */
.evs fieldset{border:0;padding:0;margin:0 0 22px}
.evs legend{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--evs-mute);padding:0;margin-bottom:10px;
}
.evs .evs-opts{display:flex;flex-wrap:wrap;gap:8px}
.evs .evs-opts.evs-stack{flex-direction:column}

.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;
}
.evs .evs-opt span{
  display:block;padding:11px 16px;border:1px solid var(--evs-line);
  border-radius:6px;font-size:15px;line-height:1.3;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.evs .evs-opt input:hover + span{border-color:rgba(255,255,255,.4)}
.evs .evs-opt input:checked + span{
  background:var(--evs-blue);border-color:var(--evs-blue);font-weight:700;
}
.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:16px;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:14px;line-height:1.55;color:var(--evs-mute);margin:12px 0 0;
}

/* result */
.evs .evs-eyebrow{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--evs-mute);margin:0;
}
.evs .evs-price{
  font-size:54px;font-weight:800;line-height:1;margin:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.evs .evs-price small{font-size:16px;font-weight:700;color:var(--evs-mute);margin-left:8px;letter-spacing:0}
.evs .evs-charger{margin:0;font-size:17px;font-weight:700;line-height:1.35}
.evs .evs-spec{margin:0;font-size:14px;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:14.5px;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:14.5px;color:var(--evs-mute);line-height:1.5;margin:0;
}
.evs .evs-add b{color:#fff}

.evs .evs-note{font-size: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-block;padding:14px 22px;border-radius:6px;text-decoration:none;
  font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  border:1px solid transparent;
}
.evs .evs-btn-blue{background:var(--evs-blue);color:#fff}
.evs .evs-btn-blue:hover{filter:brightness(1.12)}
.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-price{font-size:44px}
}
@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-price{font-size:44px}
  }
}

@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 input:checked + span{background:var(--evs-blue);border-color:var(--evs-blue);color:#fff}
.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}