/* Карусель автомобилей — тёмная тема */

.cars-carousel {

  position: relative;

  max-width: 1100px;

  margin: 0 auto;

}



.cars-carousel__viewport {

  overflow: hidden;

  border-radius: 16px;

}



.cars-carousel__track {

  display: flex;

  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  will-change: transform;

}



.cars-carousel__slide {

  flex: 0 0 100%;

  padding: 0 4px;

  box-sizing: border-box;

}



.car-card {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 0;

  background: #1a2332;

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);

  border: 1px solid #2d3a4f;

  min-height: 320px;

}



.car-card__image-wrap {

  position: relative;

  background: #111827;

  min-height: 280px;

}



.car-card__image {

  width: 100%;

  height: 100%;

  min-height: 280px;

  object-fit: cover;

  display: block;

}



.car-card__badge {

  position: absolute;

  top: 16px;

  left: 16px;

  background: #f97316;

  color: #fff;

  font-size: 12px;

  font-weight: 600;

  padding: 4px 10px;

  border-radius: 6px;

  text-transform: uppercase;

  letter-spacing: 0.03em;

}



.car-card__body {

  padding: 28px 32px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.car-card__title {

  font-size: 24px;

  font-weight: 700;

  color: #e2e8f0;

  margin: 0 0 8px;

  line-height: 1.2;

}



.car-card__subtitle {

  font-size: 14px;

  color: #94a3b8;

  margin: 0 0 20px;

}



.car-card__specs {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px 16px;

  margin-bottom: 24px;

}



.car-card__spec {

  font-size: 13px;

  color: #cbd5e1;

}



.car-card__spec strong {

  display: block;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: #64748b;

  font-weight: 600;

  margin-bottom: 2px;

}



.car-card__price {

  font-size: 28px;

  font-weight: 800;

  color: #f97316;

  margin-bottom: 16px;

}



.car-card__price-note {

  font-size: 12px;

  color: #64748b;

  margin: -8px 0 16px;

}



.car-card__cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 12px 24px;

  background: #f97316;

  color: #fff;

  font-weight: 600;

  font-size: 14px;

  border-radius: 10px;

  text-decoration: none;

  transition: background 0.2s;

  align-self: flex-start;

}



.car-card__cta:hover {

  background: #ea580c;

}



.cars-carousel__btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  border: 1px solid #2d3a4f;

  background: #1a2332;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #e2e8f0;

  transition: background 0.2s, transform 0.2s, border-color 0.2s;

}



.cars-carousel__btn:hover {

  background: #f97316;

  border-color: #f97316;

  color: #fff;

}



.cars-carousel__btn svg {

  width: 22px;

  height: 22px;

}



.cars-carousel__btn--prev { left: -22px; }

.cars-carousel__btn--next { right: -22px; }



.cars-carousel__dots {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 24px;

}



.cars-carousel__dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  border: none;

  background: #334155;

  cursor: pointer;

  padding: 0;

  transition: background 0.2s, transform 0.2s;

}



.cars-carousel__dot.is-active {

  background: #f97316;

  transform: scale(1.2);

}



.cars-carousel__loading,

.cars-carousel__empty {

  flex: 0 0 100%;

  text-align: center;

  padding: 48px 24px;

  color: #94a3b8;

  font-size: 16px;

  min-height: 280px;

  display: flex;

  align-items: center;

  justify-content: center;

}



@media (max-width: 768px) {

  .car-card {

    grid-template-columns: 1fr;

    min-height: auto;

  }



  .car-card__image-wrap,

  .car-card__image {

    min-height: 200px;

  }



  .car-card__body {

    padding: 20px;

  }



  .car-card__title {

    font-size: 20px;

  }



  .cars-carousel__btn--prev { left: 4px; }

  .cars-carousel__btn--next { right: 4px; }

}