@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ul li {
  padding: 0;
  list-style: none;
  margin: 0;
}

a {
  text-decoration: none;
  transition: all 0.8s ease-in-out;
  cursor: pointer;
}

body {
  font-family: "Urbanist", sans-serif;
}

button {
  transition: all 0.8s ease-in-out;
}

.car-cards {
  padding: 60px 0 0;
}

.car-card {
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px #00000040;
  border-radius: 10px;
}

.media-card-image-wrapper {
  position: relative;
  width: 100%;
  height: 262px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.media-card-image-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
  filter: blur(18px);
  transform: scale(1.15);
  z-index: 0;
  pointer-events: none;
}

.media-card-image-main {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 262px;
  max-height: 262px;
  object-fit: contain;
  border-radius: 10px 10px 0 0;
  background: transparent;
  filter: drop-shadow(0px 0px 4px #00000040);
  touch-action: pan-y;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.car-media {
  position: relative;
}

.media-card-action-btn-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
  left: 0;
  padding: 16px 16px 0;
  pointer-events: none;
}

.media-card-action-btn-box > * {
  pointer-events: auto;
}

.badge-top {
  display: inline-flex;
  padding: 8px 6px;
  border-radius: 10px;
  font:
    600 14px/20px "Urbanist",
    sans-serif;
  color: #ffffff;
  align-items: center;
  gap: 2px;
  text-transform: uppercase;
}

.badge-new {
  background: #5f005266;
  border: 0.5px solid #ffffff;
}

.badge-featured {
  background: #00000066;
  border: 0.5px solid #ffffff;
}

.badge-value {
  background: #42a80566;
  border: 0.5px solid #42a80566;
}

.badge-icon {
  width: 16px !important;
  height: 16px;
}

.badge-top {
  animation: badge-shake 3.2s ease-in-out infinite;
  animation-delay: var(--badge-delay, 0s);
}

@keyframes badge-shake {
  0%,
  85%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  88% {
    transform: translateX(-3px) rotate(-2deg);
  }

  91% {
    transform: translateX(3px) rotate(2deg);
  }

  94% {
    transform: translateX(-2px) rotate(-1deg);
  }

  97% {
    transform: translateX(2px) rotate(1deg);
  }
}

.heart-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.heart-icon {
  width: 20px;
  height: 20px;
}

.heart-icon.filled,
.heart-btn:hover .heart-icon,
.heart-btn.active .heart-icon {
  display: none !important;
}

.heart-btn:hover .heart-icon.filled,
.heart-btn.active .heart-icon.filled {
  display: block !important;
}

.about-car-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  padding: 12px;
  bottom: 24px;
  left: 0;
  z-index: 4;
  pointer-events: none;
}

.about-car-main > * {
  pointer-events: auto;
}

.about-car-main > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #42a80594;
  color: #ffffff;
  font:
    600 14px/20px "Urbanist",
    sans-serif;
  padding: 6px 21px;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0px 0px 7px 0px #ffffff;
}

.owner-type {
  background: #ffffff;
  padding: 6px 12px;
  display: inline-flex;
  gap: 5px;
  border-radius: 20px;
  font:
    500 14px / 20px "Urbanist",
    sans-serif;
  color: #5f0052;
  align-items: center;
}

.car-details-icon {
  width: 12px !important;
  height: 12px;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  animation: online-blink 3.4s ease-in-out infinite;
}

@keyframes online-blink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  }

  50% {
    opacity: 0.35;
    box-shadow: 0 0 0 4px rgba(143, 143, 143, 0);
  }
}

.car-card .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 16px;
}

.car-card .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c2d3ff;
  display: block;
}

.car-card .owl-dots .owl-dot.active span {
  background: #05309d;
}

.car-details {
  padding: 17px 16px 20px;
  border-bottom: 0.5px solid #d9d9d9;
}

.car-name {
  font:
    700 22px/28px "Urbanist",
    sans-serif;
  padding: 0 0 16px;
}

.car-loc {
  display: flex;
  align-items: center;
  gap: 14px;
  font:
    500 16px/22px "Urbanist",
    sans-serif;
  color: #757575;
  padding: 0 0 21px;
}

.car-loction {
  width: 24px !important;
  height: 24px;
}

.tags-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font:
    500 14px/20px "Urbanist",
    sans-serif;
  padding: 11px;
  border-radius: 13px;
}

.tag-history {
  background: #f0f9f0;
  color: #147e10;
}

.tag-deal {
  background: #f8f4f8;
  color: #5f0052;
}

.tag-icon {
  width: 20px !important;
  height: 20px;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 16px 27px;
}

.price-block .price {
  font:
    700 34px/40px "Urbanist",
    sans-serif;
  color: #147e10;
}

.price-block .price-note {
  font:
    500 16px/22px "Urbanist",
    sans-serif;
  color: #5f0052;
}

.btn-offer {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 43px;
  background: #5f0052;
  color: #ffffff;
  border: none;
  border-radius: 19px;
  font:
    700 20px/26px "Urbanist",
    sans-serif;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 10px #dcaad5;
  z-index: 2;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.make-offer-icon {
  width: 18px;
  height: 18px;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.btn-offer:hover {
  transform: translateY(-4px);
  background: #5f0052;
  box-shadow: 0 14px 30px rgba(101, 0, 95, 0.3);
}

.btn-offer:hover .make-offer-icon {
  transform: translateX(5px);
}

.btn-offer:active {
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  .owner-type {
    padding: 6px 10px;
    font:
      500 12px / 18px "Urbanist",
      sans-serif;
  }

  .tag {
    gap: 5px;
    font:
      500 12px/18px "Urbanist",
      sans-serif;
  }

  .tag-icon {
    width: 14px !important;
    height: 14px;
  }

  .car-name {
    font:
      700 20px/26px "Urbanist",
      sans-serif;
    padding: 0 0 10px;
  }

  .car-loc {
    gap: 5px;
    font:
      500 14px/20px "Urbanist",
      sans-serif;
    padding: 0 0 11px;
  }

  .car-loction {
    width: 16px !important;
    height: 16px;
  }

  .price-block .price {
    font:
      700 24px/30px "Urbanist",
      sans-serif;
  }

  .btn-offer {
    padding: 12px 23px;
    font:
      700 18px/24px "Urbanist",
      sans-serif;
    border-radius: 10px;
  }

  .price-block .price-note {
    font:
      500 12px/18px "Urbanist",
      sans-serif;
    color: #5f0052;
  }

  .make-offer-icon {
    width: 16px !important;
    height: 16px;
  }

  .car-card {
    margin: 1px;
  }

  .price-row {
    padding: 14px;
  }
}

@media (max-width: 768px) {
  .media-card-image-main,
  .media-card-image-wrapper,
  .media-card-image-main {
    height: 210px;
    max-height: 210px;
  }

  .car-name {
    font:
      700 16px/22px "Urbanist",
      sans-serif;
    padding: 0 0 13px;
  }

  .car-loction {
    width: 19px !important;
    height: 19px;
  }

  .car-loc {
    font:
      500 12px/18px "Urbanist",
      sans-serif;
    padding: 0 0 16px;
  }

  .media-card-action-btn-box {
    padding: 13px 13px 0;
  }

  .badge-icon {
    width: 12px !important;
    height: 12px;
  }

  .badge-top {
    padding: 7px 9px;
    font:
      600 10px/16px "Urbanist",
      sans-serif;
  }

  .heart-btn {
    width: 28px;
    height: 28px;
  }

  .heart-icon {
    width: 16px !important;
    height: 16px;
  }

  .online-pill {
    font:
      600 12px/18px "Urbanist",
      sans-serif;
    padding: 5px 15px;
    border-radius: 10px;
  }

  .car-card .owl-dots {
    margin-top: 12px;
  }

  .tag {
    gap: 6px;
    font:
      500 12px/18px "Urbanist",
      sans-serif;
    padding: 8px 6px;
    border-radius: 6px;
  }

  .tag-icon {
    width: 14px !important;
    height: 14px;
  }

  .car-details {
    padding: 13px 12px 16px;
  }

  .price-row {
    gap: 16px;
    padding: 21px 13px 24px;
  }

  .price-block .price {
    font:
      700 24px/30px "Urbanist",
      sans-serif;
  }

  .price-block .price-note {
    font:
      500 12px/18px "Urbanist",
      sans-serif;
  }

  .btn-offer {
    gap: 10px;
    padding: 11px 34px;
    border-radius: 10px;
    font:
      700 16px/22px "Urbanist",
      sans-serif;
  }

  .car-card {
    margin: 1px !important;
  }
}