/* ──────────────────────────────────────────────────────
   Bold Auto Transport – Lead v3  ·  Two-Column + Trust
   ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#0b7dda;--blue-l:#e8f4fd;
  --green:#16a34a;--green-l:#f0fdf4;
  --dark:#0f172a;
  --g50:#f8fafc;--g100:#f1f5f9;--g200:#e2e8f0;--g300:#cbd5e1;
  --g400:#94a3b8;--g500:#64748b;--g700:#334155;--g900:#0f172a;
  --r:14px;--font:'Inter',system-ui,sans-serif;
}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:#f0f4f8;color:var(--g900);min-height:100vh}
.hidden{display:none!important}

/* ── HEADER ───────────────────────────────────────── */
.lh{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;background:#fff;
  border-bottom:1px solid var(--g200);
  position:sticky;top:0;z-index:100;
}
.lh-logo img{height:32px}
.lh-right{display:flex;align-items:center;gap:24px}
.lh-steps{display:flex;align-items:center;gap:6px}
.hs{
  display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;color:var(--g500);
  padding:7px 16px;border-radius:8px;transition:all .25s;
}
.hs-num{
  width:24px;height:24px;border-radius:50%;
  background:var(--g200);color:var(--g500);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;transition:all .25s;
}
.hs.active{background:var(--blue-l);color:var(--blue)}
.hs.active .hs-num{background:var(--blue);color:#fff}
.hs.done{color:var(--green)}
.hs.done .hs-num{background:var(--green);color:#fff}
.hs-sep{color:var(--g300);font-size:16px;font-weight:600}
.lh-phone{
  display:flex;align-items:center;gap:6px;
  font-size:15px;font-weight:700;color:var(--blue);text-decoration:none;
  padding:8px 16px;border-radius:10px;
  background:var(--blue-l);transition:all .2s;
}
.lh-phone:hover{background:var(--blue);color:#fff}
.lh-phone svg{flex-shrink:0}

/* ── Mobile step dots ──────────────────────────────── */
.lh-dots{display:none;align-items:center;gap:8px}
.hd{
  width:26px;height:26px;border-radius:50%;
  background:var(--g200);color:var(--g500);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;transition:all .25s;
}
.hd.active{background:var(--blue);color:#fff}
.hd.done{background:var(--green);color:#fff}

/* ── PROGRESS ─────────────────────────────────────── */
.prog{height:3px;background:var(--g200);position:sticky;top:57px;z-index:99}
.prog-fill{height:100%;width:33%;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .5s ease}

/* ── LAYOUT ───────────────────────────────────────── */
.layout{
  max-width:1120px;
  margin:0 auto;
  padding:32px 24px 80px;
  display:grid;
  grid-template-columns:1fr 360px;
  gap:28px;
  align-items:start;
}
.form-col{min-width:0}
@media(max-width:900px){
  .layout{grid-template-columns:1fr;max-width:600px}
  .sidebar{order:-1}
}

/* ── STEP / CARD ──────────────────────────────────── */
.step{animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.card{
  background:#fff;border-radius:var(--r);
  padding:32px 28px 28px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  border:1px solid var(--g200);
}
.badge{
  display:inline-block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;
  color:var(--blue);background:var(--blue-l);
  padding:4px 10px;border-radius:6px;margin-bottom:14px;
}
.card h1{font-size:24px;font-weight:800;line-height:1.3;margin-bottom:6px}
.hl{color:var(--blue)}
.sub{font-size:14px;color:var(--g500);margin-bottom:22px;line-height:1.5}

/* ── STEP GUIDE CALLOUTS ─────────────────────────── */
.step-guide{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;margin-bottom:20px;
  background:linear-gradient(135deg,#e8f4fd 0%,#dbeafe 100%);
  border:1px solid #93c5fd;border-radius:12px;
  animation:guideSlide .4s ease both;
  position:relative;overflow:hidden;
}
.step-guide::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--blue);border-radius:4px 0 0 4px;
}
.step-guide-final{
  background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
  border-color:#86efac;
}
.step-guide-final::before{background:var(--green)}
.step-guide-icon{
  font-size:20px;flex-shrink:0;
  animation:guidePulse 2s ease-in-out infinite;
}
.step-guide-text{
  font-size:13px;font-weight:500;color:var(--g700);line-height:1.5;
}
.step-guide-text strong{font-weight:700;color:var(--g900)}
@keyframes guideSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes guidePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ── GUIDED HIGHLIGHT GLOW ───────────────────────── */
.guide-glow .fi{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(11,125,218,.15);
  animation:glowPulse 2s ease-in-out infinite;
}
.guide-glow .fi:focus{animation:none}
.guide-glow label{color:var(--blue)!important}
.guide-glow .dot{animation:dotPulse 2s ease-in-out infinite}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(11,125,218,.1)}
  50%{box-shadow:0 0 0 6px rgba(11,125,218,.2)}
}
@keyframes dotPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.4)}
}
/* combo variant — works when glow is on .combo or parent of .combo */
.guide-glow .combo-input,
.combo.guide-glow .combo-input{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(11,125,218,.15);
  animation:glowPulse 2s ease-in-out infinite;
}
.combo.guide-glow .combo-arrow{color:var(--blue);animation:dotPulse 2s ease-in-out infinite}
.combo.guide-glow .combo-input:focus{animation:none}
/* button glow */
.guide-glow-btn{
  animation:btnGlow 2s ease-in-out infinite!important;
  transform:none!important;
}
@keyframes btnGlow{
  0%,100%{box-shadow:0 4px 14px rgba(11,125,218,.3),0 1px 3px rgba(0,0,0,.06)}
  50%{box-shadow:0 4px 20px rgba(11,125,218,.5),0 0 0 4px rgba(11,125,218,.15)}
}
.guide-glow-btn.btn-go{
  animation:btnGlowGreen 2s ease-in-out infinite!important;
}
@keyframes btnGlowGreen{
  0%,100%{box-shadow:0 4px 14px rgba(22,163,74,.3),0 1px 3px rgba(0,0,0,.06)}
  50%{box-shadow:0 4px 20px rgba(22,163,74,.5),0 0 0 4px rgba(22,163,74,.15)}
}

/* ── FORM ─────────────────────────────────────────── */
.fg{margin-bottom:14px;position:relative}
.fg.sm{margin-bottom:0}
.fg label{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--g500);margin-bottom:5px;
}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot.blue{background:var(--blue)}.dot.green{background:var(--green)}
.iw{position:relative}
.fi{
  width:100%;height:48px;padding:0 36px 0 14px;
  font-size:15px;font-weight:500;font-family:var(--font);
  color:var(--g900);background:var(--g50);
  border:2px solid var(--g200);border-radius:10px;outline:none;
  transition:border .2s,box-shadow .2s,background .2s;
}
.fi::placeholder{color:var(--g400)}
.fi:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(11,125,218,.1)}
.fi.error{border-color:#ef4444}
.fc{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:18px;color:var(--g400);cursor:pointer;display:none;
  background:none;border:none;line-height:1;
}
.fi:not(:placeholder-shown)~.fc{display:block}

/* ── AUTOCOMPLETE ─────────────────────────────────── */
.acl{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border:1px solid var(--g200);
  border-radius:10px;box-shadow:0 10px 36px rgba(0,0,0,.1);
  z-index:50;overflow:hidden;display:none;max-height:220px;overflow-y:auto;
}
.acl.open{display:block}
.aci{padding:11px 14px;font-size:14px;color:var(--g700);cursor:pointer;border-bottom:1px solid var(--g100);transition:background .1s}
.aci:last-child{border-bottom:none}
.aci:hover,.aci.active{background:var(--blue-l);color:var(--blue)}

/* ── SWAP ─────────────────────────────────────────── */
.swap-row{display:flex;justify-content:center;margin:-4px 0}
.swap{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--g200);background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:var(--g400);cursor:pointer;transition:all .2s;z-index:2;
}
.swap:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}

/* ── BUTTONS ──────────────────────────────────────── */
.brow{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.btn-next{
  width:100%;height:54px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#0b7dda 0%,#0969b8 100%);color:#fff;
  font-size:16px;font-weight:700;font-family:var(--font);letter-spacing:.3px;
  cursor:pointer;transition:all .25s ease;
  box-shadow:0 4px 14px rgba(11,125,218,.3), 0 1px 3px rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
}
.btn-next::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);
  pointer-events:none;
}
.btn-next:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(11,125,218,.4), 0 2px 6px rgba(0,0,0,.08);
  background:linear-gradient(135deg,#0a8aef 0%,#0b7dda 100%);
}
.btn-next:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px rgba(11,125,218,.3)}
.btn-next:disabled{
  background:var(--g200);color:var(--g400);cursor:not-allowed;
  box-shadow:none;opacity:.7;
}
.btn-next:disabled::after{display:none}
.btn-go{
  width:100%;height:56px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#16a34a 0%,#15803d 100%);color:#fff;
  font-size:17px;font-weight:700;font-family:var(--font);letter-spacing:.3px;
  cursor:pointer;transition:all .25s ease;
  box-shadow:0 4px 14px rgba(22,163,74,.3), 0 1px 3px rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
}
.btn-go::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 50%);
  pointer-events:none;
}
.btn-go:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(22,163,74,.4), 0 2px 6px rgba(0,0,0,.08);
  background:linear-gradient(135deg,#1db954 0%,#16a34a 100%);
}
.btn-go:active{transform:translateY(0);box-shadow:0 2px 8px rgba(22,163,74,.3)}
.btn-back{
  width:100%;height:46px;padding:0 18px;border-radius:12px;
  border:none;background:var(--g100);
  color:var(--g500);font-size:13px;font-weight:600;font-family:var(--font);
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn-back:hover{background:var(--g200);color:var(--g700)}
.btn-back:active{background:var(--g300)}

/* ── VEHICLE GRID ─────────────────────────────────── */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.vb{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 6px 10px;border:2px solid var(--g200);border-radius:14px;
  background:#fff;cursor:pointer;transition:all .25s ease;font-family:var(--font);
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.vb:hover{
  border-color:var(--blue);background:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(11,125,218,.12);
}
.vb.selected{
  border-color:var(--blue);
  background:linear-gradient(135deg,#e8f4fd,#dbeafe);
  box-shadow:0 2px 8px rgba(11,125,218,.15);
}
.vb-check{
  position:absolute;top:5px;right:5px;
  width:18px;height:18px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:none;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;line-height:1;
  box-shadow:0 1px 3px rgba(11,125,218,.3);
}
.vb.selected .vb-check{display:flex}
.vb img{width:44px;height:32px;object-fit:contain;transition:transform .2s}
.vb:hover img{transform:scale(1.08)}
.vb .si{display:none}.vb .di{display:block}
.vb.selected .si{display:block}.vb.selected .di{display:none}
.vb span{font-size:11px;font-weight:700;color:var(--g500);transition:color .2s}
.vb:hover span{color:var(--blue)}
.vb.selected span{color:var(--blue);font-weight:800}

/* ── YMM SECTION ─────────────────────────────────── */
.ymm-section{margin-bottom:18px}
.ymm-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--g500);margin-bottom:10px}
.ymm{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:0}

/* ── SEARCHABLE COMBO BOX ─────────────────────────── */
.combo{position:relative}
.combo-input{
  padding-right:36px;cursor:text;
  background-image:none;
}
.combo.disabled .combo-input,
.combo-input:disabled{background:var(--g100);color:var(--g400);cursor:not-allowed;border-color:var(--g200)}
.combo.disabled .combo-arrow{color:var(--g300)}
.combo-arrow{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--g500);pointer-events:none;transition:transform .2s, color .2s;
}
.combo.open .combo-arrow{transform:translateY(-50%) rotate(180deg);color:var(--blue)}
.combo-list{
  display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:#fff;border:1.5px solid var(--g200);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:220px;overflow-y:auto;z-index:50;
  scrollbar-width:thin;
}
.combo.open .combo-list{display:block}
.combo-item{
  padding:10px 14px;font-size:14px;color:var(--g700);
  cursor:pointer;transition:background .1s;
  border-bottom:1px solid var(--g100);
  font-family:var(--font);
}
.combo-item:last-child{border-bottom:none}
.combo-item:hover,.combo-item.active{background:var(--blue-l);color:var(--blue)}
.combo-item.active{font-weight:600}
.combo-item mark{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px}
.combo-empty{
  padding:14px;text-align:center;font-size:13px;color:var(--g400);font-style:italic;
}
.sel-loading{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--g400);font-weight:500;
  margin-top:4px;padding-left:2px;
}
.sel-spinner{
  display:inline-block;width:12px;height:12px;
  border:2px solid var(--g200);border-top-color:var(--blue);
  border-radius:50%;animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── TRANSPORT SECTION (Step 3) ──────────────────── */
.transport-section{margin-bottom:16px}
.ts-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--g500);margin-bottom:8px}
.running-section{margin-bottom:16px}

/* ── OPT CARDS ────────────────────────────────────── */
.opts{display:flex;flex-direction:column;gap:8px;margin-bottom:0}
.oc{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:2px solid var(--g200);border-radius:12px;
  background:var(--g50);cursor:pointer;transition:all .2s;text-align:left;font-family:var(--font);
}
.oc:hover{border-color:var(--g300)}
.oc.selected{border-color:var(--blue);background:var(--blue-l)}
.or{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--g300);position:relative;transition:all .2s;
}
.oc.selected .or{border-color:var(--blue)}
.oc.selected .or::after{content:'';position:absolute;top:3px;left:3px;width:8px;height:8px;background:var(--blue);border-radius:50%}
.oc-info{flex:1;min-width:0}
.oc strong{display:block;font-size:14px;font-weight:700}
.oc small{font-size:12px;color:var(--g500)}
.oc-price{
  font-size:12px;font-weight:700;color:var(--green);
  background:var(--green-l);padding:4px 10px;border-radius:6px;
  flex-shrink:0;white-space:nowrap;
}
.oc-price-extra{color:#d97706;background:#fefce8}
.oc.selected .oc-price-extra{color:#d97706;background:#fef3c7}

/* ── TOGGLE ───────────────────────────────────────── */
.trow{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border:2px solid var(--g200);border-radius:12px;
  background:var(--g50);cursor:pointer;font-size:14px;font-weight:600;color:var(--g700);
  margin-bottom:4px;
}
.trow-info{display:flex;flex-direction:column;gap:2px}
.trow-label{font-size:14px;font-weight:600;color:var(--g700)}
.trow-sub{font-size:11px;font-weight:500;color:var(--green)}
.trow-sub.extra{color:#d97706}
.trow input{display:none}
.tt{width:42px;height:22px;border-radius:22px;background:var(--g300);position:relative;transition:.25s;flex-shrink:0}
.trow input:checked~.tt{background:var(--blue)}
.tb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.25s}
.trow input:checked~.tt .tb{transform:translateX(20px)}

/* ── DATE PILLS ───────────────────────────────────── */
.dp{border:none;margin-bottom:16px}
.dp legend{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--g500);margin-bottom:8px}
.pills{display:flex;gap:8px;margin-bottom:10px}
.pill{
  flex:1;height:42px;border:2px solid var(--g200);border-radius:10px;
  background:var(--g50);font-size:13px;font-weight:600;color:var(--g700);
  cursor:pointer;transition:all .2s;font-family:var(--font);
  position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
}
.pill:hover{border-color:var(--g300)}
.pill.selected{border-color:var(--blue);background:var(--blue-l);color:var(--blue)}
.pill-badge{
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  background:#16a34a;color:#fff;
  padding:2px 6px;border-radius:4px;line-height:1.2;
}
.pill.selected .pill-badge{background:#0b7dda}

/* ── DATE WINDOW (flexible) ──────────────────────── */
.date-window{margin-bottom:12px}
.dw-label{font-size:12px;color:var(--g500);font-weight:500;margin-bottom:8px}
.fi-date{cursor:pointer;padding-right:14px}

/* ── RANGE TRIGGER BUTTON ────────────────────────── */
.range-trigger{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:12px 16px;
  background:var(--g50);border:2px solid var(--g200);border-radius:10px;
  cursor:pointer;transition:all .2s;font-family:var(--font);
  text-align:left;
}
.range-trigger:hover{border-color:var(--g300);background:#fff}
.range-trigger.has-range{border-color:var(--green);background:var(--green-l)}
.rt-col{display:flex;flex-direction:column;flex:1;min-width:0}
.rt-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--g400);margin-bottom:2px}
.rt-val{font-size:15px;font-weight:600;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.range-trigger.has-range .rt-val{color:var(--green)}
.rt-arrow{font-size:16px;color:var(--g300);font-weight:600;flex-shrink:0}
.rt-icon{color:var(--g400);flex-shrink:0;margin-left:auto}

/* ── DATE SINGLE (specific) ──────────────────────── */
.date-single{margin-bottom:12px}

/* ── CUSTOM CALENDAR ─────────────────────────────── */
.cal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.3);z-index:200;
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.cal{
  background:#fff;border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  width:320px;padding:20px;
  animation:scaleIn .2s ease;
}
@keyframes scaleIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-title{font-size:16px;font-weight:800;color:var(--g900)}
.cal-nav{
  width:32px;height:32px;border-radius:8px;
  border:1px solid var(--g200);background:#fff;
  font-size:18px;color:var(--g700);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.cal-nav:hover{background:var(--blue-l);color:var(--blue);border-color:var(--blue)}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.cal-days span{font-size:11px;font-weight:700;color:var(--g400);text-align:center;padding:4px 0;text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{
  height:38px;border-radius:8px;border:none;
  background:transparent;font-size:14px;font-weight:500;
  color:var(--g900);cursor:pointer;transition:all .15s;
  font-family:var(--font);
}
.cal-day:hover:not(.disabled):not(.selected){background:var(--blue-l);color:var(--blue)}
.cal-day.selected{background:var(--blue);color:#fff;font-weight:700}
.cal-day.today{border:2px solid var(--blue)}
.cal-day.disabled{color:var(--g300);cursor:default}
.cal-day.other-month{color:var(--g300)}
.cal-foot{display:flex;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--g100)}
.cal-today,.cal-clear{
  font-size:13px;font-weight:600;font-family:var(--font);
  border:none;background:none;cursor:pointer;
  padding:6px 12px;border-radius:6px;transition:all .15s;
}
.cal-today{color:var(--blue)}.cal-today:hover{background:var(--blue-l)}
.cal-clear{color:var(--g500)}.cal-clear:hover{background:var(--g100)}

/* ── RANGE HEADER (inside calendar) ──────────────── */
.cal-range-hdr{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:14px;
  background:var(--blue-l);border-radius:10px;
}
.crh-col{display:flex;flex-direction:column;flex:1;min-width:0}
.crh-col.active{background:#fff;border-radius:8px;padding:6px 10px;margin:-6px -10px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.crh-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--g400)}
.crh-val{font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crh-arrow{font-size:14px;color:var(--g400);font-weight:600;flex-shrink:0}

/* ── RANGE DAY STATES ────────────────────────────── */
.cal-day.range-start{background:var(--blue);color:#fff;border-radius:8px 0 0 8px;font-weight:700}
.cal-day.range-end{background:var(--blue);color:#fff;border-radius:0 8px 8px 0;font-weight:700}
.cal-day.range-start.range-end{border-radius:8px}
.cal-day.in-range{background:var(--blue-l);color:var(--blue);border-radius:0}
.cal-day.in-range:hover{background:#d0e8f7}
.cal-day.range-hover{background:var(--blue-l);color:var(--blue);border-radius:0;opacity:.7}
.cal-day.range-hover-end{border-radius:0 8px 8px 0;opacity:.7}

/* ── PRICE BOX ────────────────────────────────────── */
.price-box{
  background:linear-gradient(135deg,#0b7dda08,#16a34a08);
  border:2px solid #0b7dda20;
  border-radius:12px;padding:18px 20px;
  margin-bottom:16px;
}
.price-inner{display:flex;align-items:flex-start;gap:20px}
.price-left{flex-shrink:0}
.price-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--g500);margin-bottom:4px}
.price-val{font-size:30px;font-weight:900;color:var(--blue)}
.price-breakdown{flex:1;min-width:0}
.pb-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px}
.pb-row span{color:var(--g500);font-weight:500}
.pb-row strong{color:var(--g700);font-weight:600}
.pb-extra strong{color:#d97706}
.price-note{font-size:11px;color:var(--g400);margin-top:8px;text-align:center}

/* ── FIELD HINTS ──────────────────────────────────── */
.field-hint{
  display:block;font-size:11px;font-weight:500;
  color:#ef4444;margin-top:4px;padding-left:2px;
}
.fi.valid{border-color:var(--green)}
.fi.valid:focus{box-shadow:0 0 0 3px rgba(22,163,74,.1)}

/* ── SIDEBAR PRICE ────────────────────────────────── */
.sb-price-val{color:var(--blue)!important;font-size:16px!important}

/* ── TWO COL ──────────────────────────────────────── */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── EXTRAS (collapsible shipping options) ────────── */
.extras{margin-top:6px;margin-bottom:6px}
.extras-toggle{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:10px 0;
  background:none;border:none;
  font-size:13px;font-weight:600;color:var(--g500);
  cursor:pointer;transition:color .2s;font-family:var(--font);
}
.extras-toggle:hover{color:var(--blue)}
.extras-toggle svg:first-child{flex-shrink:0;color:var(--g400)}
.extras-toggle span{flex:1;text-align:left}
.extras-chevron{flex-shrink:0;transition:transform .25s}
.extras.open .extras-chevron{transform:rotate(180deg)}
.extras.open .extras-toggle svg:first-child{display:none}
.extras-body{
  padding:4px 0 0;
  display:flex;flex-direction:column;gap:0;
}
.extras-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
  border-top:1px solid var(--g100);
}
.extras-row:last-child{border-bottom:none}
.extras-info{display:flex;flex-direction:column;gap:1px}
.extras-label{font-size:14px;font-weight:600;color:var(--g700)}
.extras-sub{font-size:11px;font-weight:500;color:var(--g400)}
.extras-switch{cursor:pointer;flex-shrink:0}
.extras-switch input{display:none}
.extras-switch .tt{width:42px;height:22px;border-radius:22px;background:var(--g300);position:relative;transition:.25s;display:block}
.extras-switch input:checked~.tt{background:var(--blue)}
.extras-switch .tb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.25s}
.extras-switch input:checked~.tt .tb{transform:translateX(20px)}

/* ── FINE PRINT ───────────────────────────────────── */
.fp{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:11px;color:var(--g400);justify-content:center;font-weight:500}
.bs{display:flex;align-items:center;gap:5px}

/* ── SUCCESS ──────────────────────────────────────── */
.card-ok{text-align:center;padding:40px 28px}
.ok-icon{width:72px;height:72px;border-radius:50%;background:var(--green-l);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.done-sum{text-align:left;background:var(--g50);border-radius:12px;padding:16px;margin:18px 0 22px}
.done-sum .sb-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--g200);font-size:13px}
.done-sum .sb-row:last-child{border-bottom:none}
.done-sum .sb-row span{color:var(--g500)}
.done-sum .sb-row strong{color:var(--g900)}
.btn-call{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px;background:linear-gradient(135deg,#16a34a 0%,#15803d 100%);color:#fff;
  border-radius:14px;font-weight:700;font-size:16px;text-decoration:none;text-align:center;
  box-shadow:0 4px 14px rgba(22,163,74,.3);transition:all .25s;margin-bottom:10px;
  position:relative;overflow:hidden;
}
.btn-call::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 50%);
  pointer-events:none;
}
.btn-call:hover{
  background:linear-gradient(135deg,#1db954 0%,#16a34a 100%);color:#fff;
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(22,163,74,.4);
}
.link-home{display:block;font-size:14px;font-weight:600;color:var(--g500);text-decoration:none}
.link-home:hover{color:var(--g700)}

/* ═══════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════ */
.sidebar{
  position:sticky;top:72px;
  display:flex;flex-direction:column;gap:14px;
}

/* ── Call CTA Card ───────────────────────────────── */
.sb-call-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-radius:14px;
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff;text-decoration:none;
  box-shadow:0 4px 14px rgba(22,163,74,.25);
  transition:all .25s;position:relative;overflow:hidden;
}
.sb-call-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%);
  pointer-events:none;
}
.sb-call-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(22,163,74,.35);color:#fff}
.sb-call-left{display:flex;align-items:center;gap:10px}
.sb-call-left svg{flex-shrink:0;opacity:.9}
.sb-call-left strong{display:block;font-size:12px;font-weight:700;opacity:.9}
.sb-call-left span{display:block;font-size:16px;font-weight:800;letter-spacing:.3px}
.sb-call-badge{
  font-size:10px;font-weight:800;text-transform:uppercase;
  background:rgba(255,255,255,.2);padding:4px 10px;border-radius:6px;
  letter-spacing:.5px;flex-shrink:0;
}

/* ── Card base ───────────────────────────────────── */
.sb-card{
  background:#fff;border:1px solid var(--g200);
  border-radius:16px;padding:0;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  overflow:hidden;
}

/* ── Summary Card ────────────────────────────────── */
.sb-summary-card{border:none;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.sb-summary-header{
  display:flex;align-items:center;gap:8px;
  padding:14px 20px;
  background:linear-gradient(135deg,#0b7dda,#0969b8);
  color:#fff;font-size:14px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;
}
.sb-summary-header svg{flex-shrink:0;opacity:.85}
.sb-summary-body{padding:6px 20px 16px}
.sb-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--g100);font-size:13px;
}
.sb-row:last-child{border-bottom:none}
.sb-row span{
  display:flex;align-items:center;gap:6px;
  color:var(--g400);font-weight:600;
}
.sb-row span svg{flex-shrink:0;color:var(--g300)}
.sb-row strong{color:var(--g900);font-weight:700;text-align:right;max-width:55%;word-break:break-word}

/* ── Why Bold ────────────────────────────────────── */
.sb-why{border:none;background:linear-gradient(135deg,#f0fdf4,#dcfce7);box-shadow:0 2px 10px rgba(22,163,74,.08)}
.sb-why-header{
  display:flex;align-items:center;gap:8px;
  padding:14px 20px 0;
  font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;color:#15803d;
}
.sb-why-header svg{flex-shrink:0}
.sb-checks{list-style:none;display:flex;flex-direction:column;gap:6px;padding:14px 20px 18px}
.sb-checks li{
  font-size:13px;font-weight:500;color:var(--g700);
  padding-left:24px;position:relative;line-height:1.5;
}
.sb-checks li::before{
  content:'✓';position:absolute;left:0;top:1px;
  font-weight:900;color:var(--green);font-size:14px;
}

/* ── Reviews ─────────────────────────────────────── */
.sb-review{padding:18px 20px!important;background:#fff}
.sb-review-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sb-stars{color:#facc15;font-size:15px;letter-spacing:1px}
.sb-google{height:20px;object-fit:contain}
.sb-quote{font-size:13px;line-height:1.6;color:var(--g700);margin-bottom:14px;font-style:italic}
.sb-author{display:flex;align-items:center;gap:10px}
.sb-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;flex-shrink:0;
}
.sb-author strong{display:block;font-size:13px;font-weight:700;color:var(--g900)}
.sb-author span{font-size:11px;color:var(--g400)}

/* ── Badges ──────────────────────────────────────── */
.sb-badges{padding:18px 20px!important}
.sb-badge-row{display:flex;align-items:flex-start;justify-content:center;gap:18px;flex-wrap:wrap}
.sb-badge-link{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  text-decoration:none;transition:all .2s;opacity:.85;
}
.sb-badge-link:hover{opacity:1;transform:translateY(-1px)}
.sb-badge-link img{height:40px;object-fit:contain}
.sb-badge-label{
  font-size:10px;font-weight:700;color:var(--g500);
  text-transform:uppercase;letter-spacing:.4px;
}
.sb-badge-bbb{color:#00529b}

/* ═══════════════════════════════════════════════════
   MOBILE TRUST STRIP
   ═══════════════════════════════════════════════════ */
.m-trust{display:none}
.m-trust-inner{
  display:flex;align-items:center;justify-content:center;
  gap:6px;padding:8px 12px;
  background:#fff;border-bottom:1px solid var(--g200);
  font-size:11px;font-weight:700;color:var(--g700);
  overflow-x:auto;white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.m-trust-item{display:flex;align-items:center;gap:3px;flex-shrink:0}
.m-trust-icon{font-size:12px}
.m-trust-star{color:#facc15}
.m-trust-bbb{
  font-size:9px;font-weight:900;
  background:#00529b;color:#fff;
  padding:1px 4px;border-radius:3px;
  letter-spacing:.3px;line-height:1.2;
}
.m-trust-sep{color:var(--g300);font-size:10px;flex-shrink:0}

/* ═══════════════════════════════════════════════════
   MOBILE SOCIAL PROOF (below form card)
   ═══════════════════════════════════════════════════ */
.m-proof{display:none}
.m-proof-badges{
  display:flex;align-items:center;justify-content:center;
  gap:16px;padding:16px 16px 10px;
}
.m-proof-badge{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:#fff;border:1px solid var(--g200);border-radius:10px;
  flex:1;min-width:0;
}
.m-proof-badge img{flex-shrink:0}
.m-proof-info{display:flex;flex-direction:column;min-width:0}
.m-proof-stars{color:#facc15;font-size:12px;letter-spacing:1px;line-height:1}
.m-proof-info span{font-size:10px;font-weight:600;color:var(--g500);white-space:nowrap}
.m-proof-grade{
  font-size:15px;font-weight:900;color:#00529b;line-height:1;
}
.m-proof-row{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:4px 16px 14px;padding:10px 14px;
  background:linear-gradient(135deg,#f0f9ff,#f0fdf4);
  border:1px solid #d1e7dd;border-radius:10px;
  font-size:11px;font-weight:700;color:var(--g700);
  letter-spacing:.3px;
}
.m-proof-row svg{color:var(--green);flex-shrink:0}

/* ═══════════════════════════════════════════════════
   MOBILE BOTTOM BAR
   ═══════════════════════════════════════════════════ */
.m-bottom{display:none}
.m-bottom-call{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 16px;border-radius:10px;
  border:2px solid var(--green);background:transparent;color:var(--green);
  font-size:14px;font-weight:700;text-decoration:none;
  transition:all .2s;flex:1;
}
.m-bottom-call:hover{background:var(--green);color:#fff}
.m-bottom-quote{
  display:flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:10px;
  background:linear-gradient(135deg,#0b7dda 0%,#0969b8 100%);color:#fff;
  font-size:14px;font-weight:700;text-decoration:none;
  box-shadow:0 2px 10px rgba(11,125,218,.3);transition:all .2s;flex:1.2;
}
.m-bottom-quote:hover{color:#fff;transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════
   RESPONSIVE – TABLET (≤900px)
   ═══════════════════════════════════════════════════ */
@media(max-width:900px){
  /* Layout: single column, sidebar BELOW form */
  .layout{grid-template-columns:1fr;max-width:600px;padding:20px 16px 100px;gap:20px}
  .sidebar{position:static;order:1;gap:12px}
  .sb-call-card{display:none}
  /* Collapse reviews to one */
  .sb-review + .sb-review{display:none}
  /* Vehicle grid */
  .vgrid{gap:8px}
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE – MOBILE (≤768px)
   ═══════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Header: show dots, hide desktop steps, compact phone */
  .lh{padding:10px 16px}
  .lh-logo img{height:28px}
  .lh-steps{display:none}
  .lh-dots{display:flex}
  .lh-phone{padding:8px 12px;font-size:13px;border-radius:8px}
  .lh-phone-text{display:none}

  /* Progress sticks below thinner header */
  .prog{top:49px}

  /* Show mobile trust strip */
  .m-trust{display:block;position:sticky;top:52px;z-index:98}

  /* Show mobile social proof */
  .m-proof{display:block}

  /* Show mobile bottom bar */
  .m-bottom{
    display:flex;align-items:center;gap:8px;
    position:fixed;bottom:0;left:0;right:0;z-index:100;
    padding:10px 12px;
    background:#fff;border-top:1px solid var(--g200);
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Hide sidebar entirely on phone — trust strip + proof replace it */
  .sidebar{display:none}

  /* Layout full bleed */
  .layout{padding:16px 12px 120px;max-width:100%;gap:0}

  /* Card */
  .card{border-radius:12px;padding:22px 18px 20px;box-shadow:0 1px 8px rgba(0,0,0,.05)}
  .badge{font-size:10px;padding:3px 8px;margin-bottom:10px}
  .card h1{font-size:21px;margin-bottom:4px}
  .step-guide{padding:10px 14px;gap:8px;margin-bottom:16px;border-radius:10px}
  .step-guide-icon{font-size:18px}
  .step-guide-text{font-size:12px}
  .sub{font-size:13px;margin-bottom:18px}

  /* Inputs – bigger touch targets */
  .fi{height:50px;font-size:16px;border-radius:10px}
  .fg label{font-size:10px;margin-bottom:4px}

  /* Autocomplete */
  .acl{border-radius:8px;max-height:200px}
  .aci{padding:13px 14px;font-size:15px}

  /* Buttons – touch friendly */
  .btn-next{height:54px;font-size:16px;border-radius:12px}
  .btn-go{height:56px;font-size:17px;border-radius:12px}
  .btn-back{height:44px;font-size:13px;border-radius:10px}
  .brow{gap:8px;margin-top:18px}

  /* Vehicle grid */
  .vgrid{gap:8px;margin-bottom:16px}
  .vb{padding:12px 4px 8px;border-radius:12px}
  .vb img{width:36px;height:26px}
  .vb span{font-size:10px}
  .vb-check{width:16px;height:16px;font-size:9px;top:4px;right:4px}

  /* YMM stack */
  .ymm{grid-template-columns:1fr;gap:8px;margin-bottom:0}
  .ymm-section{margin-bottom:14px}
  .combo-input{height:50px;font-size:16px}
  .combo-list{max-height:200px}
  .combo-item{padding:13px 14px;font-size:15px}

  /* Transport options */
  .oc{padding:14px 14px;gap:10px}
  .oc strong{font-size:14px}
  .oc-price{font-size:11px;padding:3px 8px}

  /* Toggle row */
  .trow{padding:14px;font-size:14px}

  /* Price box */
  .price-inner{flex-direction:column;gap:10px;align-items:stretch}
  .price-left{text-align:center}

  /* Date pills – uniform height */
  .pills{gap:6px}
  .pill{height:44px;font-size:12px;border-radius:8px}
  .pill-badge{font-size:8px;padding:2px 5px}

  /* Range trigger */
  .range-trigger{padding:10px 14px;gap:8px}
  .rt-val{font-size:14px}

  /* Phone/email full width */
  .twocol{grid-template-columns:1fr;gap:10px}

  /* Calendar: full width on small screens */
  .cal{width:calc(100vw - 32px);max-width:340px;padding:16px}
  .cal-day{height:42px;font-size:15px}
  .cal-nav{width:36px;height:36px;font-size:20px}

  /* Price box */
  .price-box{padding:14px;border-radius:10px}
  .price-val{font-size:28px}

  /* Success */
  .card-ok{padding:30px 18px}
  .ok-icon{width:60px;height:60px;margin-bottom:14px}
  .btn-call{padding:16px;font-size:16px;border-radius:10px}

  /* Swap button */
  .swap-row{margin:-2px 0}
  .swap{width:32px;height:32px}
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE – SMALL PHONES (≤380px)
   ═══════════════════════════════════════════════════ */
@media(max-width:380px){
  .lh{padding:8px 12px}
  .lh-logo img{height:24px}
  .hd{width:22px;height:22px;font-size:10px}
  .layout{padding:12px 8px 120px}
  .card{padding:18px 14px 16px;border-radius:10px}
  .card h1{font-size:18px}
  .step-guide{padding:8px 12px;gap:6px;margin-bottom:12px}
  .step-guide-icon{font-size:16px}
  .step-guide-text{font-size:11px}
  .fi{height:48px;font-size:15px}
  .combo-input{height:48px;font-size:15px}
  .btn-next,.btn-go{height:50px;font-size:15px}
  .vgrid{grid-template-columns:repeat(4,1fr);gap:5px}
  .vb{padding:8px 3px 6px;border-radius:10px}
  .vb img{width:28px;height:22px}
  .vb span{font-size:8px}
  .vb-check{width:14px;height:14px;font-size:8px;top:3px;right:3px}
  .pill{height:40px;font-size:11px}
  .m-trust-inner{font-size:10px;gap:4px;padding:6px 10px}
  .m-proof-badges{gap:8px;padding:12px 10px 8px}
  .m-proof-badge{padding:8px 10px;gap:6px}
  .m-proof-info span{font-size:9px}
  .m-bottom-call,.m-bottom-quote{font-size:13px;padding:10px 12px}
  .cal{width:calc(100vw - 24px);padding:14px}
  .cal-day{height:38px;font-size:14px}
  .oc-price{font-size:10px;padding:2px 6px}
  .price-val{font-size:24px}
  .pb-row{font-size:11px}
}