/* ===========================
   Smooth scroll + nav active
   =========================== */
html {
  scroll-behavior: smooth;
}
.ace-responsive-menu li a.active {
  font-weight: 700;
}

/* ===========================
   Cars section styles
   =========================== */
#cars .badge.bg-teal {
  background: #1fb5a9;
}
#cars .car-label {
  font-size: 0.85rem;
  color: #777;
}
/* chips look like screenshot */
#cars .badge.rounded-pill.border {
  border: 1px solid #e6e6e6;
  padding: .45rem .6rem;
  font-size: .8rem;
}

/* ===========================
   Global body + listing header
   =========================== */
body {
  background-color: #f8f9fa;
  font-family: Arial, sans-serif;
}
.listing-header {
  background: #212529;
  color: white;
  padding: 1rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* ===========================
   Car card styles
   =========================== */
.car-card {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  transition: 0.3s;
}
.car-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.car-img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}
.car-details {
  padding: 1rem;
}
.car-title {
  font-size: 1.25rem;
  font-weight: bold;
}
.car-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #198754;
}
.btn-request {
  margin-top: 10px;
  width: 100%;
}

/* ===========================
   Listing rows
   =========================== */
.listing-row { }

/* ===========================
   Top meta
   =========================== */
.top-meta {
  background:#f5f6f7;
  border-radius:4px 4px 0 0;
}
.meta-pill {
  color:#333;
}

/* ===========================
   Negotiation badges
   =========================== */
.badge.negotiation {
  background:#13a6a0;
  color:#fff;
  padding:8px 14px;
  border-radius:6px;
  font-weight:700;
}
.badge.negotiation-lg {
  background:#13a6a0;
  color:#fff;
  padding:10px 16px;
  border-radius:6px;
  font-weight:700;
}

/* ===========================
   Image + Ready badge
   =========================== */
.listing-thumb {
  width:100%;
  height:auto;
  object-fit:cover;
}
.ready-badge {
  position:absolute;
  left:24px;
  bottom:28px;
  background:#19b24a;
  color:#fff;
  padding:6px 10px;
  border-radius:4px;
  font-weight:700;
  font-size:0.85rem;
}

/* ===========================
   Title / Price
   =========================== */
.listing-title {
  font-size:1.25rem;
  margin:0;
}
.price-large {
  font-size:1.5rem;
  color:#0a6a6a;
  font-weight:700;
}

/* ===========================
   Feature chips
   =========================== */
.feature-chip {
  display:inline-block;
  background:#eef3f3;
  border-radius:16px;
  padding:6px 10px;
  margin-right:8px;
  margin-bottom:8px;
  font-size:0.85rem;
  color:#333;
  border:1px solid #e0e0e0;
}

/* ===========================
   Meta chips
   =========================== */
.chip {
  display:inline-block;
  background:#fff;
  border-radius:16px;
  padding:6px 10px;
  margin-right:8px;
  margin-bottom:8px;
  font-size:0.78rem;
  color:#666;
  border:1px solid #e6e6e6;
}

/* ===========================
   Price bubble
   =========================== */
.price-bubble {
  background:linear-gradient(90deg,#12a6a0,#0f8c86);
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  text-align:right;
}
.price-bubble .price-line {
  font-weight:700;
}
.price-bubble .price-amount {
  font-size:1.25rem;
  margin-left:8px;
}
.price-bubble .price-sub {
  font-size:0.8rem;
  opacity:0.9;
}

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width: 767px) {
  .listing-row .ready-badge {
    left:12px;
    bottom:12px;
  }
  .listing-title {
    font-size:1.05rem;
  }
}





      html { scroll-behavior: smooth; } /* simple smooth scroll */
      /* optional: highlight active nav item */
      .ace-responsive-menu li a.active { font-weight: 700; }
 

  #cars .badge.bg-teal { background: #1fb5a9; }
  #cars .car-label { font-size: 0.85rem; color: #777; }
  #cars .badge.rounded-pill.border { border: 1px solid #e6e6e6; padding: .45rem .6rem; font-size: .8rem; }
 
  body {
      background-color: #f8f9fa;
      font-family: Arial, sans-serif;
    }
    .listing-header {
      background: #212529;
      color: white;
      padding: 1rem;
      text-align: center;
      font-size: 1.5rem;
      font-weight: bold;
      text-transform: uppercase;
    }
    .car-card {
      background: white;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      overflow: hidden;
      transition: 0.3s;
    }
    .car-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .car-img {
      height: 200px;
      object-fit: cover;
      width: 100%;
    }
    .car-details {
      padding: 1rem;
    }
    .car-title {
      font-size: 1.25rem;
      font-weight: bold;
    }
    .car-price {
      font-size: 1.1rem;
      font-weight: bold;
      color: #198754;
    }
    .btn-request {
      margin-top: 10px;
      width: 100%;
    }

  .listing-row { }

  /* top meta */
  .top-meta { background:#f5f6f7; border-radius:4px 4px 0 0; }
  .meta-pill { color:#333; }

  /* negotiation badge */
  .badge.negotiation { background:#13a6a0; color:#fff; padding:8px 14px; border-radius:6px; font-weight:700; }
  .badge.negotiation-lg { background:#13a6a0; color:#fff; padding:10px 16px; border-radius:6px; font-weight:700; }

  /* image and ready badge */
  .listing-thumb { width:100%; height:auto; object-fit:cover; }
  .ready-badge { position:absolute; left:24px; bottom:28px; background:#19b24a; color:#fff; padding:6px 10px; border-radius:4px; font-weight:700; font-size:0.85rem; }

  /* title / price */
  .listing-title { font-size:1.25rem; margin:0; }
  .price-large { font-size:1.5rem; color:#0a6a6a; font-weight:700; }

  /* features chips */
  .feature-chip { display:inline-block; background:#eef3f3; border-radius:16px; padding:6px 10px; margin-right:8px; margin-bottom:8px; font-size:0.85rem; color:#333; border:1px solid #e0e0e0; }

  /* meta chips */
  .chip { display:inline-block; background:#fff; border-radius:16px; padding:6px 10px; margin-right:8px; margin-bottom:8px; font-size:0.78rem; color:#666; border:1px solid #e6e6e6; }

  /* price bubble (for second card style) */
  .price-bubble { background:linear-gradient(90deg,#12a6a0,#0f8c86); color:#fff; padding:8px 12px; border-radius:6px; text-align:right; }
  .price-bubble .price-line { font-weight:700; }
  .price-bubble .price-amount { font-size:1.25rem; margin-left:8px; }
  .price-bubble .price-sub { font-size:0.8rem; opacity:0.9; }

  /* responsive tweaks */
  @media (max-width: 767px) {
    .listing-row .ready-badge { left:12px; bottom:12px; }
    .listing-title { font-size:1.05rem; }
  }