/* =========================
   Stephen Jones Auto Sales
   Global Stylesheet
   ========================= */

/* ---------- CSS Variables ---------- */
:root{
  --primary-red:#d32f2f;
  --primary-red-dark:#b71c1c;
  --primary-blue:#1479b8;
  --text:#222;
  --muted:#666;
  --bg:#ffffff;
  --bg-soft:#f7f7f8;
  --card:#fff;
  --border:#e7e7ea;
  --shadow:0 6px 16px rgba(0,0,0,.08);
}

/* ---------- Reset-ish ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding-left:1.1rem}
.container{width:min(1100px, 92%);margin-inline:auto}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; box-shadow:var(--shadow);
}
.header-flex{display:flex;align-items:center;gap:1rem; padding:.6rem 0;}
.logo img{height:46px;width:auto;border-radius:6px}
.site-nav ul{display:flex;gap:1rem;align-items:center;list-style:none;margin:0}
.site-nav a{padding:.45rem .7rem;border-radius:8px}
.site-nav a.active,.site-nav a:hover{background:var(--bg-soft)}
.contact{margin-left:auto;display:flex;gap:.75rem;align-items:center}
.menu-toggle{display:none}

/* Mobile nav */
@media (max-width: 900px){
  .menu-toggle{display:block;background:#fff;border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem}
  .site-nav{position:fixed;inset:60px 0 auto 0;background:#fff;padding:1rem;transform:translateY(-120%);transition:transform .25s ease;box-shadow:var(--shadow)}
  .site-nav.active{transform:translateY(0)}
.menu-overlay.active{opacity:1;pointer-events:auto}
  .site-nav ul{flex-direction:column;align-items:flex-start}
  .menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s}
  
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; background:var(--primary-blue); color:#fff;
  padding:.65rem 1rem; border-radius:12px; font-weight:600; transition:transform .1s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary-red)}
.btn.primary:hover{background:var(--primary-red-dark)}
.btn.outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.badge{
  display:inline-block;background:var(--bg-soft); border:1px solid var(--border);
  color:#333; padding:.25rem .5rem; border-radius:999px; font-size:.8rem; margin-right:.35rem;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:#101418 url('hero.jpg') center/cover no-repeat;
  color:#fff; padding:3.5rem 0;
}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero-inner{position:relative;z-index:1;text-align:center}
.hero h1{margin:.2rem 0 0}
.hero p{margin:.3rem 0 1rem;color:#e8e8e8}
.hero-ctas{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* Hero search bar */
.search-bar{
  margin:1rem auto 1.2rem; width:min(1000px, 100%);
  display:grid; grid-template-columns: repeat(6, 1fr); gap:.6rem;
  background:rgba(255,255,255,.9); color:#222; padding:.8rem; border-radius:14px;
}
.search-bar label{font-size:.8rem;color:#333}
.search-bar select,.search-bar input{width:100%;padding:.6rem;border:1px solid var(--border);border-radius:10px}
.search-bar button{padding:.7rem; border:none; border-radius:10px; background:var(--primary-red); color:#fff; font-weight:700}
@media (max-width:900px){
  .search-bar{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width:600px){
  .hero .search-bar{grid-template-columns:1fr;gap:.9rem}
  .hero .search-bar select,
  .hero .search-bar input,
  .hero .search-bar button{width:100%;font-size:1rem;padding:.9rem}
}

/* ---------- Sections ---------- */
h1,h2,h3{margin:.2rem 0 .6rem}
.mini-hero{
  background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:2rem 0; margin:2rem 0
}
.mini-hero .mini-hero-content{text-align:center}

/* ---------- Stock Grid & Cards ---------- */
.stock-grid{
  display:grid; gap:1rem; margin:1rem 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.car-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}
.car-card:hover{transform:translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,.14); border-color:#ddd}
.car-card img{width:100%; aspect-ratio:1/1; object-fit:cover}
.car-card-body{padding:.9rem}
.car-card h3{font-size:1.05rem; margin:.2rem 0 .35rem}
.car-card .price{color:var(--primary-red-dark);font-weight:800;margin:.1rem 0 .35rem}
.car-card .per-month{color:var(--muted); font-size:.92rem; margin:.2rem 0 .6rem}
.car-card .specs{list-style:none;padding:0;margin:0 0 .5rem;color:#333}
.car-card .specs li{margin:.15rem 0}

/* ---------- Filters (stock page) ---------- */
.filter-bar{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:.6rem; background:var(--bg-soft);
  border:1px solid var(--border); padding:.8rem; border-radius:14px; margin:1rem 0;
}
.filter-bar label{font-size:.85rem;color:#333}
.filter-bar select,.filter-bar input{padding:.55rem;border:1px solid var(--border);border-radius:10px}
.filter-bar .reset-btn{background:var(--primary-red);color:#fff;font-weight:700;border:none;border-radius:10px}
@media (max-width:900px){ .filter-bar{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:600px){
  .filter-bar{grid-template-columns:1fr;gap:.9rem}
  .filter-bar select,.filter-bar input,.filter-bar button{width:100%;font-size:1rem;padding:.9rem}
}
.active-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.filter-tag{background:#eef3ff;border:1px solid #d7e2ff;color:#1b3a80;padding:.25rem .55rem;border-radius:999px;font-size:.82rem;cursor:pointer}

/* ---------- WhatsApp Buttons ---------- */
.btn.whatsapp,
.car-card .btn.whatsapp{background:#25d366;color:#fff}
.btn.whatsapp:hover,
.car-card .btn.whatsapp:hover{background:#1ebd57}

/* ---------- Forms ---------- */
.contact-form,.finance-calculator,.tradein-form{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.2rem;box-shadow:0 2px 6px rgba(0,0,0,.04);margin:1.2rem 0
}
.contact-form label,.finance-calculator label,.tradein-form label{font-weight:600}
.contact-form input,.contact-form textarea,
.finance-calculator input,.tradein-form input,.tradein-form select,.tradein-form textarea{
  width:100%;padding:.65rem;border:1px solid var(--border);border-radius:10px
}
.contact-form button,.finance-calculator button,.tradein-form button{
  margin-top:.6rem;background:var(--primary-blue)
}
.contact-form button:hover,.finance-calculator button:hover,.tradein-form button:hover{background:#0f6fa0}

/* ---------- Vehicle Page: Gallery ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:.8rem; margin:1.5rem 0; position:relative;
}
.gallery .gallery-img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.gallery .gallery-img:hover{transform:scale(1.03); box-shadow:0 4px 10px rgba(0,0,0,.15)}
.thumbnails{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.8rem}
.thumbnails .thumb{aspect-ratio:1/1;width:80px;object-fit:cover;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:border-color .2s}
.thumbnails .thumb:hover{border-color:var(--primary-red)}

/* ---------- Lightbox (square) ---------- */
.lightbox{
  display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.85);
  position:fixed; inset:0; z-index:9999; position:fixed;
}
.lightbox img{
  width:min(90vmin, 800px); height:min(90vmin, 800px);
  aspect-ratio:1/1; object-fit:cover; border-radius:8px; background:#000;
}
.lightbox .nav{
  width:100%; max-width:min(90vmin,800px); display:flex; justify-content:space-between;
  position:absolute; top:50%; transform:translateY(-50%); pointer-events:none;
}
.lightbox .nav button{
  pointer-events:all;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:0 1rem;
}
.lightbox .photo-count,.lightbox .close{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.lightbox .close{
  position:absolute;top:10px;right:14px;font-size:2rem;background:none;border:none;cursor:pointer
}

/* ---------- Similar Vehicles ---------- */
.similar-vehicles{margin-top:3rem;padding-top:2rem;border-top:2px solid #eee}
.similar-vehicles h3{text-align:center;font-size:1.6rem;margin-bottom:1.2rem}
.similar-vehicles .car-card{transition:transform .2s, box-shadow .2s}
.similar-vehicles .car-card:hover{transform:translateY(-4px);box-shadow:0 6px 14px rgba(0,0,0,.12)}
.similar-vehicles .car-card h3{font-size:1.1rem;margin-bottom:.3rem;color:#111}
.similar-vehicles .car-card .price{color:var(--primary-red-dark);font-weight:700;margin-bottom:.6rem}

/* ---------- Floating Contact Buttons ---------- */
.floating-buttons{
  position:fixed; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:.5rem; z-index:9;
}
.float-btn{
  width:48px;height:48px;display:grid;place-items:center;background:#fff;border:1px solid var(--border);
  border-radius:50%; box-shadow:var(--shadow); font-size:1.2rem;
}
.float-btn.whatsapp{background:#25d366;color:#fff;border-color:#1ebd57}

/* ---------- Sticky CTA (auto-hide + safe-area) ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; gap:.5rem; justify-content:center;
  padding:.6rem clamp(.5rem,3vw,1rem) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); box-shadow:0 -6px 16px rgba(0,0,0,.08);
  transform:translateY(110%); transition:transform .28s ease-in-out, opacity .28s ease-in-out;
  opacity:0; z-index:999;
}
.sticky-cta .btn{padding:.8rem 1rem}
.sticky-cta.show{transform:translateY(0);opacity:1}
.sticky-cta.hide{transform:translateY(calc(110% + env(safe-area-inset-bottom)));opacity:.96}

/* ---------- Footer ---------- */
footer{margin-top:2rem;border-top:1px solid var(--border);background:#fff}
footer .container{padding:1.2rem 0;text-align:center;color:#444}
footer a{text-decoration:underline}

/* ---------- Responsive tweaks ---------- */
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:.6rem}
  .similar-vehicles .car-card img{aspect-ratio:1/1}
  .similar-vehicles h3{font-size:1.4rem}
  .finance-calculator,.contact-form{padding:1rem}
  .spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
}
@media (max-width:600px){
  .gallery{grid-template-columns:1fr}
  .thumbnails .thumb{width:65px}
  .similar-vehicles .stock-grid{display:grid;grid-template-columns:1fr;gap:1rem}
  .actions .btn,.finance-calculator button,.contact-form button{width:100%;text-align:center}
  .sticky-cta .btn{padding:.7rem;font-size:.9rem}
  .spec-grid{display:block}
}

/* ---------- Utility ---------- */
.price-line{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.key-specs{margin:.6rem 0}
.success-message{color:#1b7b3a;font-weight:600}

/* ---------- Optional: Swipe Hint (JS toggles .show) ---------- */
.swipe-hint{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  padding:.35rem .6rem; font-size:.85rem; line-height:1; color:#fff;
  background:rgba(0,0,0,.45); border-radius:999px; backdrop-filter:blur(4px);
  pointer-events:none; opacity:0; transition:opacity .4s ease, transform .4s ease; z-index:3;
}
.swipe-hint.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- Vehicle Page: Simplified Image Viewer ---------- */
.image-viewer {
  position: relative;
  text-align: center;
  margin: 1rem auto;
}
.main-image {
  width: 100%;
  max-width: 650px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  transition: transform .3s ease;
}
.thumb-strip {
  display: flex;
  overflow-x: auto;
  gap: .5rem;
  margin-top: .6rem;
  padding-bottom: .3rem;
  justify-content: center;
}
.thumb-strip::-webkit-scrollbar {
  height: 6px;
}
.thumb-strip::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.thumb {
  flex: 0 0 auto;
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .2s;
}
.thumb.active,
.thumb:hover {
  border-color: var(--primary-red);
}
@media (max-width:600px){
  .main-image { max-width: 100%; border-radius: 6px; }
  .thumb { width: 70px; height: 50px; }
}


/* Vehicle Page Layout */
.vehicle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}

/* Image container */
.vehicle-images {
  width: 100%;
}

/* Car image */
.vehicle-images img {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

/* Stack layout on mobile */
@media (max-width: 768px) {
  .vehicle-layout {
    grid-template-columns: 1fr;
  }

  .vehicle-images img {
    max-width: 100%;
  }
}
.vehicle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  align-items: flex-start;
}

.vehicle-images {
  width: 100%;
}

.vehicle-main-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

.vehicle-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.vehicle-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}

.vehicle-thumb:hover {
  opacity: 1;
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .vehicle-layout {
    grid-template-columns: 1fr;
  }

  .vehicle-main-image {
    max-width: 100%;
  }
}
.sold-badge {
  background: #c00;
  color: #fff;
  font-weight: bold;
}