/* vehicles.css */
body.modalOpen{overflow:hidden}

.vehicleModal{
  position:fixed;
  inset:0;
  z-index:220;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.vehicleModal.open{display:flex}

.vehicleModalOverlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,0.62);
  backdrop-filter:blur(12px);
}

.vehicleModalCard{
  position:relative;
  width:min(1280px, 98vw);
  max-height:96vh;
  max-height:96dvh;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:calc(var(--radius) + 10px);
  background:rgba(255,255,255,0.94);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 28px 90px rgba(2,6,23,0.22);
  display:flex;
  flex-direction:column;
}

.vehicleModalClose{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.90);
  cursor:pointer;
  font-size:26px;
  line-height:1;
  color:rgba(15,23,42,0.78);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 140ms ease, background 140ms ease;
  z-index:5;
}

.vehicleModalClose:hover{background:rgba(255,255,255,0.98);transform:translateY(-1px)}
.vehicleModalClose:active{transform:translateY(0)}

.vehicleModalHead{
  padding:22px 20px 18px;
  text-align:center;
  border-bottom:1px solid rgba(15,23,42,0.08);
  background:
    radial-gradient(120% 220% at 18% 0%, rgba(var(--brandRgb),0.14), transparent 56%),
    radial-gradient(120% 220% at 82% 120%, rgba(var(--brandRgb),0.10), transparent 58%),
    rgba(255,255,255,0.72);
}

.vehicleModalTitle{
  font-weight:950;
  letter-spacing:-0.03em;
  font-size:20px;
  line-height:1.2;
  color:rgba(15,23,42,0.92);
}

.vehicleModalPrice{
  margin-top:10px;
  font-size:22px;
  font-weight:950;
  color:rgba(var(--brandRgb),0.98);
  letter-spacing:-0.02em;
}

.vmContent{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
  gap:14px;
  padding:14px;
  align-items:stretch;
  min-height:0;
  flex:1;
}

.vmGallery{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.vmViewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  border-radius:calc(var(--radius) + 4px);
  border:1px solid rgba(15,23,42,0.10);
  background:linear-gradient(135deg, rgba(var(--brandRgb),0.14), rgba(var(--brandDarkRgb),0.06));
  box-shadow:0 18px 60px rgba(2,6,23,0.08);
  aspect-ratio:16/10;
  touch-action:pan-x pan-y;
}

.vmViewport::-webkit-scrollbar{width:0;height:0;display:none}

.vmTrack{
  display:flex;
  height:100%;
}

.vmSlide{
  flex:0 0 100%;
  scroll-snap-align:center;
  height:100%;
}

.vmSlide img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:auto;
  cursor:zoom-in;
}

.vmPriceUnder{
  text-align:center;
  font-size:24px;
  font-weight:950;
  color:rgba(var(--brandRgb),0.98);
  letter-spacing:-0.02em;
  margin-top:0;
  padding-top:2px;
}

.vmNav{
  position:absolute;
  top:calc(50% - 20px);
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.88);
  box-shadow:0 12px 34px rgba(2,6,23,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform 140ms ease, background 140ms ease;
  z-index:3;
}

.vmNav:hover{background:rgba(255,255,255,0.98);transform:translateY(-1px)}
.vmNav:active{transform:translateY(0)}
.vmNav svg{width:20px;height:20px;stroke:rgba(15,23,42,0.82);stroke-width:2;fill:none}
.vmNav.prev{left:12px}
.vmNav.next{right:12px}
.vmNav.hidden{display:none}

.vmThumbs{
  display:flex;
  gap:10px;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:2px 2px 0;
}

.vmThumbs::-webkit-scrollbar{width:0;height:0;display:none}

.vmThumb{
  flex:0 0 auto;
  width:86px;
  height:58px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.10);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  cursor:pointer;
  opacity:0.74;
  transition:transform 140ms ease, opacity 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.vmThumb:hover{transform:translateY(-1px);opacity:0.92}
.vmThumb.active{
  opacity:1;
  border-color:rgba(var(--brandRgb),0.56);
  box-shadow:0 0 0 4px rgba(var(--brandRgb),0.14);
}

.vmSide{
  min-width:0;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:2px 2px 0;
}

.vmSide::-webkit-scrollbar{width:0;height:0;display:none}

.vmSpecsGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.vmSpec{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.78);
  box-shadow:0 14px 44px rgba(2,6,23,0.06);
}

.vmSpecIcon{
  width:38px;
  height:38px;
  border-radius:16px;
  border:1px solid rgba(var(--brandRgb),0.20);
  background:rgba(var(--brandRgb),0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
}

.vmSpecIcon svg{
  width:18px;
  height:18px;
  stroke:rgba(var(--brandRgb),0.98);
  stroke-width:2;
  fill:none;
}

.vmSpecText{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.vmSpecLabel{
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:10px;
  color:rgba(15,23,42,0.54);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vmSpecValue{
  font-weight:950;
  color:rgba(15,23,42,0.86);
  font-size:13px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vmActions{
  margin-top:12px;
  display:grid;
  gap:10px;
}

.vmActions .btn{width:100%}

.imageViewer{
  position:fixed;
  inset:0;
  z-index:240;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.imageViewer.open{display:flex}

.imageViewerOverlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,0.76);
  backdrop-filter:blur(12px);
}

.imageViewerCard{
  position:relative;
  width:min(1120px, 96vw);
  max-height:94vh;
  max-height:94dvh;
  overflow:hidden;
  border-radius:calc(var(--radius) + 10px);
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  box-shadow:0 34px 120px rgba(0,0,0,0.42);
  display:flex;
  flex-direction:column;
  padding:14px 14px 12px;
}

.imageViewerClose{
  position:absolute;
  top:12px;
  right:12px;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.10);
  cursor:pointer;
  font-size:26px;
  line-height:1;
  color:rgba(255,255,255,0.90);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 140ms ease, background 140ms ease;
  z-index:5;
}

.imageViewerClose:hover{background:rgba(255,255,255,0.14);transform:translateY(-1px)}
.imageViewerClose:active{transform:translateY(0)}

.ivViewport{
  width:100%;
  flex:1;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  border-radius:calc(var(--radius) + 6px);
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(2,6,23,0.22);
  touch-action:pan-x pan-y;
}

.ivViewport::-webkit-scrollbar{width:0;height:0;display:none}

.ivTrack{
  display:flex;
  height:100%;
}

.ivSlide{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}

.ivSlide img{
  max-width:100%;
  max-height:100%;
  height:auto;
  width:auto;
  border-radius:calc(var(--radius) + 6px);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 22px 70px rgba(0,0,0,0.38);
  pointer-events:none;
}

.ivNav{
  position:absolute;
  top:calc(50% - 22px);
  width:50px;
  height:50px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform 140ms ease, background 140ms ease;
  z-index:4;
}

.ivNav:hover{background:rgba(255,255,255,0.14);transform:translateY(-1px)}
.ivNav:active{transform:translateY(0)}
.ivNav svg{width:22px;height:22px;stroke:rgba(255,255,255,0.92);stroke-width:2;fill:none}
.ivNav.prev{left:16px}
.ivNav.next{right:16px}
.ivNav.hidden{display:none}

.ivDots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding-top:10px;
}

.ivDot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.42);
  background:rgba(255,255,255,0.18);
  cursor:pointer;
  padding:0;
}

.ivDot.active{
  background:rgba(255,255,255,0.86);
  border-color:rgba(255,255,255,0.86);
}

.catalogQuick{
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items:end;
}

.vehiclePrice{
  padding:12px 16px 0;
  text-align:center;
  font-size:20px;
  font-weight:950;
  color:rgba(var(--brandRgb),0.98);
  letter-spacing:-0.02em;
}

@media (max-width:1020px){
  .vmContent{grid-template-columns:1fr;gap:12px}
  .vmSpecsGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .vehicleModalCard{max-height:96vh;max-height:96dvh}
}

@media (max-width:900px){
  .catalogQuick{grid-template-columns:1fr}
}

@media (max-width:520px){
  .vmSpecsGrid{grid-template-columns:1fr}
  .vmThumb{width:76px;height:52px}
  .vmNav.prev{left:10px}
  .vmNav.next{right:10px}
  .vehicleModalHead{padding:20px 16px 14px}
  .vmContent{padding:12px}
  .vmPriceUnder{font-size:22px}
}