/* car.css — smooth slider + title badge + gold styles */
.car-page .car-wrap{ max-width: 1100px; padding: 24px 16px; margin: 0 auto; }

.car-slider .slider-viewport{ position: relative; width: 100%; aspect-ratio: 16/9; background:#0b0f14; border-radius: 14px; overflow: hidden; border:1px solid #1f2a36; }
.car-slider .slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity .6s cubic-bezier(.22,.61,.36,1), visibility .6s; display:flex; align-items:center; justify-content:center; }
.car-slider .slide.is-active{ opacity:1; visibility:visible; }
.car-slider .slide img{ width:100%; height:100%; object-fit:cover; }

.car-slider .nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid #2a3a4e; background:rgba(10,15,22,.6); color:#e9f1fb; cursor:pointer; }
.car-slider .nav:hover{ background:rgba(10,15,22,.85); }
.car-slider .nav.prev{ left:10px; }
.car-slider .nav.next{ right:10px; }

.car-slider .thumbs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.car-slider .thumb{ border:1px solid #1f2a36; background:#0b121a; border-radius:10px; padding:0; cursor:pointer; }
.car-slider .thumb.is-active{ outline:2px solid #ffd166; }
.car-slider .thumb img{ width:86px; height:60px; object-fit:cover; border-radius:8px; display:block; }

.car-cta{ margin-top:18px; }

/* Title + badge row */
.title-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.car-title{ margin:0; font-size:22px; color:#ffd166; letter-spacing:.2px; }

.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; line-height:1.4; border:1px solid #2a3a4e; background:#0f1823; color:#c8d7e8; }
.badge-available{ border-color:#1f4d48; background:#0c1d1a; color:#68ffd7; }
.badge-limited{ border-color:#8e6c1a; background:#1b1404; color:#ffd166; }
.badge-unavailable{ border-color:#4d1f2a; background:#1d0c10; color:#ff92a9; }

/* Price + CTA */
.price-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; }
.price-row .price{ font-size:18px; }
.price-row .btn-cta{ display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid #8e6c1a; background:#1b1404; color:#ffd166; text-decoration:none; }

/* Details */
.car-details{ margin-top:18px; }
/* GOLD details button */
.car-details .details-toggle{ display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid #8e6c1a; background:#1b1404; color:#ffd166; cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.car-details .details-toggle:hover{ background:#231807; border-color:#a67c1a; color:#ffdb7a; }

/* Details panel */
.car-details .details-panel{ margin-top:10px; border:1px solid #1f2a36; background:#0e151e; border-radius:12px; padding:12px; }
/* Make the text inside the dropdown box gold */
.car-details .details-panel,
.car-details .details-panel p,
.car-details .details-panel li,
.car-details .details-panel h1,
.car-details .details-panel h2,
.car-details .details-panel h3,
.car-details .details-panel h4,
.car-details .details-panel h5,
.car-details .details-panel strong,
.car-details .details-panel b,
.car-details .details-panel em,
.car-details .details-panel span { color:#ffd166; }
.car-details .details-panel a { color:#ffd166; text-decoration: underline; text-decoration-color:#ffd166; }

/* Specs list */
.car-details .specs{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:8px 16px; }
.car-details .specs li strong{ color:#ffd166; }

@media (max-width: 720px){
  .car-slider .slider-viewport{ aspect-ratio: 4/3; }
  .car-slider .thumb img{ width:72px; height:52px; }
  .car-title{ font-size:20px; }
}