/* ═══════════════════════════════════════════════════════════════════════════════════
   RESULTS + BOOKING PANEL
   The shared shell behind "pick your car" on both journeys: the rideshare fleet
   (inventory.html) and the daily-rental booking (reserve.html). Same rail, same card,
   same panel — only the copy and the numbers differ, which is the whole point.

   inventory.html still carries its own copy of these rules inline; this file is the one
   reserve.html reads, and the two are kept identical by hand until they are merged.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────────────────────── */
.bc{display:grid;gap:22px;align-items:start;}
@media(min-width:1000px){.bc{grid-template-columns:300px 1fr;gap:28px;}}
.bc,.bc > *,.bc-side,.bc-main,.bc-panel,.bc-grp,.bc-grid,.bc-grid > *{min-width:0;}

.bc-side{display:grid;gap:14px;}
@media(min-width:1000px){.bc-side{position:sticky;top:96px;}}
.bc-panel{background:#fff;border:1px solid #E6E8EE;border-radius:16px;padding:18px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);}
.bc-panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px;}
.bc-panel-h b{font-size:15px;font-weight:800;color:#0a0a0a;}
.bc-reset{background:none;border:none;padding:0;font-family:inherit;font-size:13px;
  font-weight:700;color:#0a0a0a;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.bc-reset:hover{color:var(--red,#E8001D);}
.bc-grp{border-top:1px solid #EDEFF3;padding-top:15px;margin-top:15px;}
.bc-grp:first-child{border-top:none;padding-top:0;margin-top:0;}
.bc-grp:empty{display:none;}
.bc-lab{display:block;font-size:14px;font-weight:800;color:#0a0a0a;margin-bottom:11px;}
.bc-count-line{margin-top:16px;font-size:13.5px;color:#667085;}

/* ── Heading, sort, categories ────────────────────────────────────────────────── */
.bc-count{font-family:var(--font-display),'Inter',sans-serif;font-size:clamp(28px,5vw,40px);
  font-weight:900;letter-spacing:-.01em;line-height:1.05;color:#0a0a0a;margin:0 0 16px;}
.bc-tools{margin-bottom:18px;}
.bc-sort{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #E6E8EE;
  border-radius:99px;padding:11px 20px;box-shadow:0 1px 2px rgba(16,24,40,.04);cursor:pointer;}
.bc-sort svg{width:17px;height:17px;color:#0a0a0a;flex-shrink:0;}
.bc-sort span{font-size:15px;font-weight:600;color:#0a0a0a;white-space:nowrap;}
.bc-sort select{border:none;background:none;outline:none;font-family:inherit;font-size:15px;
  font-weight:600;color:#0a0a0a;cursor:pointer;}
.bc-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;margin-bottom:18px;}
.bc-cats::-webkit-scrollbar{display:none;}
.bc-cat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:none;border:none;font-family:inherit;padding:8px 14px;border-radius:12px;cursor:pointer;
  color:#0a0a0a;transition:background .14s,color .14s;}
.bc-cat:hover{background:#EDEFF3;}
.bc-cat.on{background:#111316;color:#fff;}
.bc-cat svg{width:26px;height:26px;}
.bc-cat span{font-size:13px;font-weight:600;white-space:nowrap;}

/* ── Price display toggle + facets ────────────────────────────────────────────── */
.bc-seg{display:grid;grid-template-columns:1fr 1fr;background:#F2F3F6;border-radius:10px;padding:4px;}
.bc-seg button{border:none;background:none;font-family:inherit;font-size:15px;font-weight:700;
  color:#475467;padding:11px 6px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s;}
.bc-seg button.on{background:#111316;color:#fff;}
.bc-f{display:flex;align-items:center;gap:11px;padding:7px 0;cursor:pointer;font-size:14.5px;color:#344054;}
.bc-f input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex-shrink:0;
  border:1.8px solid #C9CED8;border-radius:5px;cursor:pointer;position:relative;
  transition:background .15s,border-color .15s;}
.bc-f input:checked{background:var(--red,#E8001D);border-color:var(--red,#E8001D);}
.bc-f input:checked:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(43deg);}
.bc-f em{margin-left:auto;font-style:normal;font-size:14px;color:#98A2B3;}

/* ── The card ─────────────────────────────────────────────────────────────────── */
.bc-grid{display:grid;gap:16px;}
/* An empty or loading message is a statement about the whole list, so it spans the row
   rather than sitting squeezed in the first column. */
.bc-grid > .empty-msg,.bc-grid > .inv-empty{grid-column:1 / -1;text-align:center;
  padding:48px 24px;background:#fff;border:1px solid #E6E8EE;border-radius:16px;
  font-size:15px;color:#667085;line-height:1.6;}
.bc-grid > .empty-msg strong,.bc-grid > .inv-empty strong{display:block;font-size:18px;
  color:#0a0a0a;margin-bottom:6px;}
.bc-grid .inv-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  text-align:left;border:none;padding:0;cursor:pointer;border-radius:16px;overflow:hidden;
  background:#EDEFF3;box-shadow:0 1px 3px rgba(16,24,40,.1);font-family:inherit;
  aspect-ratio:4/5;min-height:340px;isolation:isolate;
  transition:box-shadow .25s,transform .25s;}
.bc-grid .inv-card:hover{box-shadow:0 18px 40px -14px rgba(16,24,40,.45);transform:translateY(-3px);}
.vc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;z-index:0;transition:transform .6s cubic-bezier(.2,.85,.25,1);}
.bc-grid .inv-card:hover .vc-img{transform:scale(1.05);}
.vc-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,10,12,.58) 0%,rgba(9,10,12,.10) 26%,
    rgba(9,10,12,0) 46%,rgba(9,10,12,.55) 70%,rgba(9,10,12,.93) 100%);}
.vc-ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  background:linear-gradient(160deg,#2B3037,#0C0E11);color:rgba(255,255,255,.5);font-size:13px;}
.vc-top{position:relative;z-index:2;padding:16px 16px 0;display:flex;align-items:flex-start;
  justify-content:space-between;gap:10px;margin-bottom:auto;}
.vc-hot{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);
  color:#0a0a0a;border-radius:99px;padding:6px 12px;font-size:12.5px;font-weight:700;}
.vc-hot svg{width:14px;height:14px;color:var(--red,#E8001D);}
.vc-sold{display:inline-flex;align-items:center;background:rgba(9,10,12,.72);color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:5px 12px;
  font-size:12px;font-weight:700;}
.vc-shots{display:inline-flex;align-items:center;gap:5px;background:rgba(9,10,12,.6);
  border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:5px 11px;
  font-size:12.5px;font-weight:700;color:#fff;}
.vc-shots svg{width:13px;height:13px;}
.vc-body{position:relative;z-index:2;padding:0 18px 18px;}
.vc-name{font-family:var(--font-display),'Inter',sans-serif;font-size:25px;font-weight:800;
  letter-spacing:-.02em;line-height:1.08;color:#fff;margin-bottom:10px;
  text-shadow:0 1px 14px rgba(0,0,0,.4);}
.vc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.vc-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:5px 10px;font-size:12.5px;
  font-weight:600;color:#fff;white-space:nowrap;}
.vc-chip svg{width:13px;height:13px;opacity:.85;}
.vc-chip.brand{background:rgba(232,0,29,.24);border-color:rgba(255,120,135,.55);color:#FFD7DC;}
.vc-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.vc-price{min-width:0;}
.vc-price-l{font-size:12.5px;color:rgba(255,255,255,.75);margin-bottom:2px;}
.vc-price-v{font-family:var(--font-display),'Inter',sans-serif;color:#fff;line-height:.95;
  font-weight:800;letter-spacing:-.02em;}
.vc-price-v i{font-style:normal;font-size:16px;font-weight:700;vertical-align:.5em;margin-right:1px;}
.vc-price-v b{font-size:34px;font-weight:800;}
.vc-price-v u{text-decoration:none;font-size:18px;font-weight:700;}
.vc-go{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:background .2s,color .2s,transform .2s;}
.vc-go svg{width:18px;height:18px;}
.bc-grid .inv-card:hover .vc-go{background:#fff;color:#0a0a0a;border-color:#fff;transform:translateX(3px);}
@media(min-width:760px){.bc-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1180px){
  .bc-grid{grid-template-columns:repeat(3,1fr);gap:20px;}
  .bc-grid .inv-card{aspect-ratio:3/4;}
}
@media(max-width:620px){
  .vc-name{font-size:22px;}
  .vc-price-v b{font-size:30px;}
  .vc-go{width:40px;height:40px;}
}

/* ── The panel that opens under the row ───────────────────────────────────────── */
.bc-detail{grid-column:1/-1;display:grid;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 8px 30px -10px rgba(16,24,40,.28);border:1px solid #E6E8EE;}
@media(min-width:900px){.bc-detail{grid-template-columns:1.15fr 1fr;}}
.bcd-car{position:relative;background:linear-gradient(160deg,#20242B,#0C0E11);color:#fff;
  padding:24px 24px 20px;display:flex;flex-direction:column;min-height:300px;}
.bcd-name{font-family:var(--font-display),'Inter',sans-serif;font-size:26px;font-weight:900;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.05;margin-bottom:10px;}
.bcd-specs{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:rgba(255,255,255,.88);}
.bcd-specs span{display:inline-flex;align-items:center;gap:7px;}
.bcd-specs svg{width:15px;height:15px;opacity:.8;}
.bcd-stage{position:relative;flex:1;margin-top:14px;border-radius:12px;overflow:hidden;
  min-height:240px;background:rgba(0,0,0,.25);}
.bcd-track{display:flex;height:100%;min-height:240px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.bcd-track::-webkit-scrollbar{display:none;}
.bcd-track img{flex:0 0 100%;width:100%;height:100%;min-height:240px;object-fit:cover;
  scroll-snap-align:center;cursor:zoom-in;}
.bcd-arw{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border:none;border-radius:50%;background:rgba(255,255,255,.92);color:#0a0a0a;font-size:22px;
  line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s;
  box-shadow:0 2px 10px rgba(0,0,0,.28);}
.bcd-arw:hover{background:#fff;}
.bcd-arw.l{left:10px;} .bcd-arw.r{right:10px;}
.bcd-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px;}
.bcd-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);
  cursor:pointer;transition:width .2s,background .2s;}
.bcd-dots i.on{background:#fff;width:20px;border-radius:99px;}
@media(min-width:900px){.bcd-stage,.bcd-track,.bcd-track img{min-height:300px;}}

.bcd-book{position:relative;padding:22px 22px 24px;display:flex;flex-direction:column;}
.bcd-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:none;background:#F2F3F6;color:#344054;font-size:19px;line-height:1;cursor:pointer;
  transition:background .15s;}
.bcd-x:hover{background:#E6E8EE;}
.bcd-h{font-size:15px;font-weight:800;color:#0a0a0a;margin-bottom:12px;}
.bcd-opts{display:grid;gap:10px;margin-bottom:22px;}
.bcd-opt{position:relative;display:flex;align-items:center;gap:13px;border:1.5px solid #E3E6EC;
  border-radius:12px;padding:16px 18px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.bcd-opt.on{border-color:#111316;box-shadow:inset 0 0 0 1px #111316;}
.bcd-opt input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;
  border:2px solid #C9CED8;border-radius:50%;cursor:pointer;position:relative;transition:border-color .15s;}
.bcd-opt input:checked{border-color:#111316;}
.bcd-opt input:checked:after{content:"";position:absolute;inset:3px;border-radius:50%;background:#111316;}
.bcd-opt-b{flex:1;min-width:0;}
.bcd-opt-t{display:block;font-size:16px;font-weight:700;color:#0a0a0a;line-height:1.3;}
.bcd-opt-s{display:block;font-size:13.5px;color:#667085;line-height:1.45;margin-top:2px;}
.bcd-opt-p{flex:0 0 auto;font-size:14px;font-weight:600;color:#0a0a0a;white-space:nowrap;}
.bcd-opt-tag{flex:0 0 auto;background:var(--red,#E8001D);color:#fff;border-radius:99px;
  padding:4px 11px;font-size:12px;font-weight:700;white-space:nowrap;}
.bcd-mile{display:flex;align-items:center;gap:13px;border:1.5px solid #111316;border-radius:12px;
  padding:16px 18px;margin-bottom:22px;}
.bcd-f{display:flex;align-items:center;gap:11px;border:1.5px solid #DDE1E8;border-radius:11px;
  padding:0 13px;min-height:52px;margin-bottom:10px;transition:border-color .15s,box-shadow .15s;}
.bcd-f:focus-within{border-color:var(--red,#E8001D);box-shadow:0 0 0 3.5px rgba(232,0,29,.1);}
.bcd-f svg{flex-shrink:0;color:#0a0a0a;width:18px;height:18px;}
.bcd-f select,.bcd-f input{flex:1;border:none;background:none;outline:none;font-family:inherit;
  font-size:15px;font-weight:600;color:#0a0a0a;min-width:0;appearance:none;-webkit-appearance:none;}
.bcd-lines{margin-top:auto;padding-top:18px;}
.bcd-total{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-top:1px solid #EDEFF3;padding-top:18px;}
.bcd-total-p{display:block;flex:1 1 auto;min-width:0;}
.bcd-total-p b{font-family:var(--font-display),'Inter',sans-serif;font-size:32px;font-weight:900;
  color:#0a0a0a;letter-spacing:-.01em;line-height:1;}
.bcd-total-p b i{font-style:normal;font-size:17px;font-weight:800;vertical-align:.35em;margin-right:1px;}
.bcd-total-p em{font-style:normal;font-size:15px;font-weight:600;color:#475467;}
.bcd-total-s{display:block;font-size:13.5px;color:#667085;margin-top:3px;}
.bcd-details{display:inline-block;margin-top:6px;font-size:14px;font-weight:600;color:#0a0a0a;
  text-decoration:underline;text-underline-offset:3px;}
.bcd-details:hover{color:var(--red,#E8001D);}
.bcd-next{display:block;border:none;border-radius:12px;background:var(--red,#E8001D);color:#fff;
  font-family:inherit;font-size:16px;font-weight:800;padding:16px 30px;text-align:center;
  text-decoration:none;cursor:pointer;transition:background .16s;}
.bcd-next:hover{background:#C5001A;}
.bcd-total .bcd-next{width:auto;flex:0 0 auto;min-width:150px;}
.bcd-note{font-size:12px;color:#98A2B3;text-align:center;margin-top:10px;}
@media(max-width:620px){
  .bcd-total{flex-direction:column;align-items:stretch;}
  .bcd-total .bcd-next{width:100%;}
  .bcd-opt{flex-wrap:wrap;row-gap:8px;padding:15px 16px;}
  .bcd-opt-b{flex:1 1 calc(100% - 35px);}
  .bcd-opt-tag{margin-left:35px;}
  .bcd-opt-p{margin-left:auto;}
  .bcd-car{padding:20px 18px 16px;}
  .bcd-book{padding:18px 18px 20px;}
  .bcd-name{font-size:22px;}
}
.inv-card.sel{outline:2px solid var(--red,#E8001D);outline-offset:-2px;position:relative;}
.inv-card.sel:after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;
  transform:translateX(-50%) rotate(45deg);background:var(--red,#E8001D);border-radius:3px;}

/* ═══ REVIEW YOUR BOOKING ════════════════════════════════════════════════════════
   The second half of the rental journey: a fixed header carrying the running total,
   the form on the left, and the booking itself pinned on the right. */
/* A proper bar: it spans the page, has its own gutters, and its two halves sit on the
   same line. It was a floating white slab with the content pinned to the top of it. */
.rv-head{position:sticky;top:0;z-index:40;background:#fff;border:1px solid #EDEFF3;
  border-radius:14px;padding:16px 22px;margin-bottom:24px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;box-shadow:0 1px 3px rgba(16,24,40,.06);}
.rv-back{display:inline-flex;align-items:center;gap:12px;background:none;border:none;
  font-family:inherit;cursor:pointer;padding:0;color:#0a0a0a;}
.rv-back svg{width:22px;height:22px;}
/* Same weight and tracking as the page's other headings — the 900 uppercase was a
   different voice from everything under it. */
.rv-back b{font-family:var(--font-display),'Inter',sans-serif;font-size:clamp(19px,2.6vw,26px);
  font-weight:800;letter-spacing:-.02em;text-transform:none;}
.rv-tot{text-align:right;flex:0 0 auto;}
.rv-tot-v{font-family:var(--font-display),'Inter',sans-serif;font-size:clamp(19px,2.6vw,26px);
  font-weight:800;color:#0a0a0a;letter-spacing:-.02em;white-space:nowrap;}
.rv-tot-v span{font-size:15px;font-weight:700;color:#475467;margin-right:4px;}
.rv-tot a{display:inline-block;margin-top:3px;font-size:13.5px;font-weight:600;color:#0a0a0a;
  text-decoration:underline;text-underline-offset:3px;}
.rv-tot a:hover{color:var(--red,#E8001D);}
/* On a phone the title was wrapping to three lines and dragging the back arrow out of
   line with it. Title and arrow share the first row, the total sits under them. */
@media(max-width:620px){
  .rv-head{flex-wrap:wrap;row-gap:10px;padding:14px 16px;margin-bottom:18px;align-items:flex-start;}
  .rv-back{align-items:center;gap:9px;flex:1 1 100%;}
  .rv-back b{font-size:19px;line-height:1.15;}
  .rv-back svg{width:19px;height:19px;flex:0 0 auto;}
  .rv-tot{flex:1 1 100%;text-align:left;display:flex;align-items:baseline;gap:12px;}
  .rv-tot-v{font-size:21px;}
  .rv-tot a{margin-top:0;}
}

.rv-side{background:#F7F8FA;border:1px solid #EDEFF3;border-radius:16px;padding:22px;}
@media(min-width:900px){.rv-side{position:sticky;top:112px;}}
.rv-veh{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.rv-veh img{width:78px;height:56px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#E6E8EE;}
.rv-veh b{display:block;font-size:17px;font-weight:800;color:#0a0a0a;line-height:1.25;}
.rv-veh span{display:block;font-size:13.5px;color:#667085;margin-top:2px;}
.rv-h{font-size:16px;font-weight:800;color:#0a0a0a;margin-bottom:12px;}
.rv-leg{display:grid;grid-template-columns:auto 1fr;gap:0 13px;margin-bottom:22px;}
.rv-leg-ic{display:grid;place-items:center;width:26px;height:26px;color:#0a0a0a;}
.rv-leg-ic svg{width:20px;height:20px;}
.rv-leg-line{width:2px;background:#D9DDE6;justify-self:center;margin:3px 0;border-radius:2px;}
.rv-leg-b{padding-bottom:16px;}
.rv-leg-b:last-child{padding-bottom:0;}
.rv-leg-b i{display:block;font-style:normal;font-size:12.5px;color:#667085;}
.rv-leg-b b{display:block;font-size:15px;font-weight:700;color:#0a0a0a;line-height:1.3;margin-top:1px;}
.rv-leg-b span{display:block;font-size:14px;color:#344054;margin-top:1px;}
.rv-inc{border-top:1px solid #E6E8EE;padding-top:18px;}
.rv-inc div{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:#344054;
  line-height:1.5;padding:6px 0;}
.rv-inc svg{flex:0 0 auto;width:17px;height:17px;color:#16A34A;margin-top:2px;}

/* ── Price details, in the same language as the booking card above it ─────────── */
.side-summary{background:#F7F8FA!important;border:1px solid #EDEFF3!important;
  border-radius:16px!important;padding:22px!important;box-shadow:none!important;
  margin-top:14px;}
.side-summary-title{font-family:var(--font-display),'Inter',sans-serif!important;
  font-size:16px!important;font-weight:800!important;letter-spacing:-.01em!important;
  text-transform:none!important;color:#0a0a0a!important;margin-bottom:14px!important;
  padding-bottom:0!important;border-bottom:none!important;}
.side-summary .side-row{font-size:14px!important;padding:9px 0!important;
  border-bottom:1px solid #E6E8EE!important;}
.side-summary .side-row .sl{color:#667085!important;}
.side-summary .side-row .sv{color:#0a0a0a!important;font-weight:600!important;}
.side-summary .side-total{border-top:1px solid #0a0a0a!important;padding-top:13px!important;
  margin-top:6px!important;font-size:17px!important;}