/* details.css — vehicle detail page (Schophil Car) */

/* root */
:root{
  --bg:#fff;
  --text:#111827;
  --muted:#6b7280;
  --accent: #FF0000;
  --container:1200px;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial;background:var(--bg);color:var(--text)}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.96);backdrop-filter:blur(6px);z-index:60;padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;color:var(--text)}
.logo .accent{color:var(--accent)}
.header-nav{display:flex;gap:12px}
.btn-primary{background:linear-gradient(90deg,var(--accent),#ff9f57);border:0;padding:8px 14px;border-radius:10px;color:#fff;font-weight:700}
.btn-link{color:var(--muted);text-decoration:none;padding:6px}

/* hero vehicle */
.hero-vehicle{display:grid;grid-template-columns:1fr 380px;gap:28px;padding:28px 0;align-items:start}
.gallery{display:flex;flex-direction:column;gap:12px}
.hero-media{background: #f7f7f7;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(2,6,23,0.06)}
.hero-media img{width:100%;height:500px;display:block;transition:transform .6s ease,opacity .5s}
.thumbs{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.thumb{border-radius:8px;padding:4px;background:transparent;border:0;cursor:pointer;opacity:.85}
.thumb img{width:72px;height:48px;object-fit:cover;border-radius:6px;display:block}
.thumb.active{outline:2px solid rgba(255,127,42,0.18);opacity:1}

/* booking panel / aside */
.booking-panel{background:linear-gradient(180deg,#fff,#fff);border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.06);padding:18px;position:relative}
.booking-panel .price{margin:12px 0}
.price .big{font-size:28px;font-weight:800}
.price .per{color:var(--muted);margin-left:6px}
.panel-inner .muted{color:var(--muted);font-size:0.9rem}
.meta-list{list-style:none;padding:0;margin:12px 0 0 0;color:var(--muted)}
.meta-list li{margin:6px 0;font-size:0.95rem}

/* details content */
.details{padding:28px 0 60px}
.intro h1{margin:0;font-size:28px}
.lead{color:var(--muted);margin-top:8px}
.content-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;margin-top:20px;align-items:start}
.left-col .card, .right-col .card{background:#fff;border-radius:10px;padding:16px;box-shadow:0 8px 24px rgba(2,6,23,0.04);margin-bottom:18px}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.spec{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.spec-val{font-weight:800;font-size:1.05rem}
.spec-label{color:var(--muted);font-size:0.9rem}
.features-list{list-style:disc;padding-left:18px;margin:6px 0}

/* more toggle */
.more .toggle-more{background:transparent;border:1px solid rgba(16,24,40,0.06);padding:8px 10px;border-radius:8px;cursor:pointer}
.more-body{margin-top:12px;color:var(--muted)}

/* sticky right column on larger screens */
.price-card.sticky{position:sticky;top:90px}
.gallery-mini img{width:72px;height:48px;object-fit:cover;border-radius:6px;margin-right:8px}

/* footer */
.site-footer{padding:36px 0;border-top:1px solid rgba(16,24,40,0.03);background:transparent}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}

/* small helpers */
.muted{color:var(--muted)}
.card{overflow:visible}

/* reveal animation */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* responsive */
@media (max-width:980px){
  .hero-vehicle{grid-template-columns:1fr 320px}
  .content-grid{grid-template-columns:1fr 300px}
}
@media (max-width:760px){
  .hero-vehicle{grid-template-columns:1fr;gap:18px}
  .content-grid{grid-template-columns:1fr}
  .booking-panel{order:2;width:100%}
  .price-card.sticky{position:static}
  .hero-media img{max-height:52vh;object-fit:cover}
  .thumb img{width:64px;height:44px}
}

@media (max-width: 768px) {
  .hero-vehicle {
    display: flex;
    flex-direction: column; /* stack gallery + booking */
    padding: 12px;          /* reduce side padding */
    gap: 12px;
  }

  .hero-media {
    width: 100%;
    max-width: 100%;
    overflow: hidden;       /* prevents image overflow */
    border-radius: 12px;
  }

  .hero-media img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;      /* fills container nicely */
  }

  .thumbs {
    justify-content: center;
    flex-wrap: wrap;
  }
}