/* EV charger quote form — /ev-charger-quote.html (27 Oct 2026, v2).
   The EVNEX estimate-form look in Amped Up colours: a dark photo panel on the
   left, a cream workspace on the right, one white card with a big radius, pill
   fields, pill buttons, one question per screen with a slide between screens.
   Built on /assets/theme-pages.css tokens. No figures, no prices. */

:root{--evq-gold:#c9a24a;--evq-gold-dark:#b68a2e;--evq-gold-soft:#fbf6ea;--evq-line:#d6cfbf;--evq-ink:#14213d;--evq-navy-deep:#0c1326}
body.evq-body{background:#f3f0e8}

/* ── shell: left panel + right workspace ─────────────────────────────────── */
.evq-shell{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100vh - 100px)}
@media(max-width:900px){.evq-shell{grid-template-columns:1fr}}

.evq-panel{position:relative;color:#fff;padding:40px 30px;overflow:hidden;background:var(--evq-navy-deep)}
.evq-panel .bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;opacity:.55}
.evq-panel .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,19,38,.55) 0%,rgba(12,19,38,.82) 55%,rgba(12,19,38,.96) 100%)}
.evq-panel .in{position:relative;display:flex;flex-direction:column;gap:18px;min-height:100%}
.evq-panel .brand{font-family:'Satoshi',system-ui,sans-serif;font-weight:900;font-size:13px;letter-spacing:.9px;text-transform:uppercase;color:var(--evq-gold)}
.evq-panel h1{color:#fff;font-weight:500;font-size:clamp(30px,3vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0}
.evq-panel .lead{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.55;margin:0}
.evq-points{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.evq-points li{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.94);color:#283042;border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.4;font-weight:500}
.evq-points li svg{flex:none;width:26px;height:26px;color:var(--evq-gold-dark)}
.evq-help{margin-top:auto;background:rgba(255,255,255,.94);border-radius:18px;padding:18px;color:#283042}
.evq-help strong{display:block;font-size:19px;color:var(--evq-ink);margin-bottom:4px}
.evq-help p{margin:0 0 12px;font-size:14px;color:#5a6478}
.evq-help a{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--evq-ink);color:#fff;font-weight:800;font-size:15px;text-decoration:none}
@media(max-width:900px){
 .evq-panel{padding:22px 20px 20px}
 .evq-panel .in{gap:10px}
 .evq-panel h1{font-size:26px}
 .evq-panel .lead{font-size:14px}
 .evq-points,.evq-help{display:none}
}

.evq-work{padding:26px 22px 60px}
@media(min-width:901px){.evq-work{padding:34px 40px 80px}}
.evq-inner{max-width:640px;margin:0 auto}

/* ── progress ─────────────────────────────────────────────────────────────── */
.evq-progress{list-style:none;display:flex;gap:4px;padding:0;margin:0 0 18px;flex-wrap:wrap;align-items:center}
.evq-progress li{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;color:#9a917c;padding:6px 4px}
.evq-progress li svg{width:17px;height:17px;flex:none}
.evq-progress li:not(:last-child):after{content:"\203A";color:#c9c2b2;font-size:18px;margin-left:6px;font-weight:400}
.evq-progress li.is-current{color:var(--evq-gold-dark)}
.evq-progress li.is-done{color:var(--evq-ink);cursor:pointer}
.evq-progress li.is-done:hover{text-decoration:underline}

/* ── the card ─────────────────────────────────────────────────────────────── */
.evq-card{scroll-margin-top:118px;background:#fff;border-radius:28px 28px 96px 28px;box-shadow:0 18px 50px rgba(20,33,61,.10);padding:40px 38px 46px;margin:0;position:relative;overflow:hidden}
@media(max-width:600px){.evq-card{padding:28px 20px 40px;border-radius:22px 22px 64px 22px}}
.evq-card[hidden]{display:none}

.evq-screen h2{margin:0 0 8px;font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.12;color:var(--evq-ink);outline:none}
.evq-screen .sub{font-size:15.5px;margin:0 0 22px;color:#5a6478;line-height:1.55}
.evq-screen .sub a{color:var(--evq-gold-dark);font-weight:700}
.evq-screen .q{display:block;font-weight:700;color:var(--evq-ink);font-size:15.5px;margin:0 0 10px}
.evq-screen .q .req{color:var(--evq-gold-dark)}

/* slide between screens */
.evq-screen{animation:none}
.evq-screen.is-in{animation:evqIn .3s cubic-bezier(.2,.7,.2,1) both}
.evq-screen.is-in-back{animation:evqInBack .3s cubic-bezier(.2,.7,.2,1) both}
.evq-screen.is-out{animation:evqOut .18s ease-in both}
.evq-screen.is-out-back{animation:evqOutBack .18s ease-in both}
@keyframes evqIn{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes evqInBack{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes evqOut{to{opacity:0;transform:translateX(-30px)}}
@keyframes evqOutBack{to{opacity:0;transform:translateX(30px)}}
@media(prefers-reduced-motion:reduce){.evq-screen.is-in,.evq-screen.is-in-back,.evq-screen.is-out,.evq-screen.is-out-back{animation:none}}

/* pill fields */
.evq-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.evq-fields{grid-template-columns:1fr}}
.evq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.evq-field label{font-size:13.5px;font-weight:700;color:var(--evq-ink);padding-left:6px}
.evq-field input,.evq-field select{width:100%;padding:15px 20px;border-radius:999px;border:1.5px solid var(--evq-line);background:#fff;color:#283042;font-size:16px;font-family:inherit}
.evq-field textarea{width:100%;padding:15px 20px;border-radius:22px;border:1.5px solid var(--evq-line);background:#fff;color:#283042;font-size:16px;font-family:inherit;min-height:96px;resize:vertical}
.evq-field input:focus,.evq-field select:focus,.evq-field textarea:focus{outline:3px solid rgba(201,162,74,.45);outline-offset:2px;border-color:var(--evq-gold-dark)}
.evq-field input::placeholder,.evq-field textarea::placeholder{color:#8a8470;opacity:1}
.evq-check{display:flex;align-items:center;gap:10px;font-size:15px;color:#283042;margin-top:14px;cursor:pointer;padding-left:6px}
.evq-check input{width:20px;height:20px;accent-color:var(--evq-ink)}

/* option tiles */
.evq-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.evq-tiles.one{grid-template-columns:1fr}
.evq-tile{text-align:left;padding:15px 18px;border:1.5px solid var(--evq-line);border-radius:16px;background:#fff;color:#283042;font:inherit;cursor:pointer;line-height:1.4;display:flex;flex-direction:column;gap:3px;position:relative;transition:border-color .15s,background .15s,transform .15s}
.evq-tile:hover{border-color:var(--evq-ink)}
.evq-tile:active{transform:scale(.985)}
.evq-tile:focus-visible{outline:3px solid rgba(201,162,74,.5);outline-offset:2px}
.evq-tile.is-on{border-color:var(--evq-gold);background:var(--evq-gold-soft);box-shadow:0 0 0 1.5px var(--evq-gold) inset}
.evq-tile strong{font-size:16px;color:var(--evq-ink);font-weight:700}
.evq-tile .spec{font-size:13px;color:#5a6478}
.evq-tile .tag{align-self:flex-start;font-size:10.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--evq-gold-dark);background:rgba(201,162,74,.16);padding:3px 9px;border-radius:999px;margin-bottom:3px}

/* charger screens: cards with a thumbnail, and one big photo that swaps */
.evq-pick{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:start}
@media(max-width:1100px){.evq-pick{grid-template-columns:1fr}}
.evq-pick .evq-tiles{grid-template-columns:1fr}
.evq-tile.has-thumb{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}
.evq-tile.has-thumb .txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.evq-tile.has-thumb img{width:64px;height:64px;flex:none;border-radius:12px;object-fit:cover;background:#f3f0e8}
.evq-stage{margin:0;position:sticky;top:116px}
@media(max-width:1100px){.evq-stage{position:static;order:-1;max-width:420px;margin:0 auto 4px}}
.evq-stage .ph{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#f3f0e8;border:1px solid #e9e4d6}
@media(max-width:1100px){.evq-stage .ph{aspect-ratio:16/10}}
.evq-stage img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .22s ease,transform .3s ease}
.evq-stage.is-swapping img{opacity:0;transform:scale(1.03)}
.evq-stage figcaption{font-size:13px;color:#5a6478;margin-top:8px;text-align:center;min-height:18px}
.evq-divider{font-size:12px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;color:#9a917c;margin:16px 0 8px}

details.evq-how{margin:14px 0 0;font-size:14px;color:#42506b}
details.evq-how summary{cursor:pointer;font-weight:700;color:var(--evq-gold-dark)}
details.evq-how p{margin:8px 0 0;font-size:14px;line-height:1.55}

.evq-photos ol{margin:4px 0 14px 18px;padding:0;color:#42506b;font-size:15px;line-height:1.6}
.evq-photos .amped-photos{margin-top:4px}

.evq-error{margin:16px 0 0;padding:12px 16px;border-radius:14px;background:#fdecec;color:#8a1c1c;font-size:14.5px;font-weight:700}
.evq-error[hidden]{display:none}

/* Previous / Next pills, EVNEX style */
.evq-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.evq-pill{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;border:1.5px solid var(--evq-ink);background:#fff;color:var(--evq-ink);font:inherit;font-weight:800;font-size:15.5px;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s}
.evq-pill.gold{border-color:transparent;background:linear-gradient(135deg,#dca82c,#c4901c);color:var(--evq-navy-deep);margin-left:auto;box-shadow:0 8px 22px rgba(201,162,74,.35)}
.evq-pill:hover{transform:translateY(-1px)}
.evq-pill.gold:hover{box-shadow:0 10px 26px rgba(201,162,74,.45)}
.evq-pill:focus-visible{outline:3px solid rgba(201,162,74,.5);outline-offset:2px}
.evq-pill[disabled]{opacity:.7;cursor:wait;transform:none}
.evq-pill .chev{font-size:20px;line-height:1;font-weight:400}
.evq-fine{font-size:13px;color:#5a6478;margin:16px 0 0;line-height:1.5}
.evq-skip{background:none;border:0;color:#5a6478;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:8px 0}

/* the live one-line summary the intake reads; kept in the form for the unsent-form flag, never shown */
.evq-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ── success ─────────────────────────────────────────────────────────────── */
.evq-success{background:#fff;border-radius:28px 28px 96px 28px;box-shadow:0 18px 50px rgba(20,33,61,.10);padding:40px 38px 46px;margin:0}
@media(max-width:600px){.evq-success{padding:28px 20px 40px;border-radius:22px 22px 64px 22px}}
.evq-success[hidden]{display:none}
.evq-success h2{margin:0 0 10px;font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:-.02em;color:var(--evq-ink);outline:none}
.evq-success .grid{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:18px;align-items:start}
@media(max-width:600px){.evq-success .grid{grid-template-columns:1fr}}
.evq-success img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;background:#f3f0e8}
.evq-success img[hidden]{display:none}
.evq-success ul{list-style:none;padding:0;margin:14px 0}
.evq-success li{padding:9px 0;border-top:1px solid #ebe7db;color:#42506b;font-size:15px}
.evq-success .next li{display:flex;gap:10px}
.evq-success .next li:before{content:"\2713";color:var(--evq-gold-dark);font-weight:900}
.evq-success p strong{color:var(--evq-ink)}