/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#f6f7fb;
  color:#111;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1100px;margin:0 auto;padding:18px}

/* ===== Topbar ===== */
.topbar{
  background:#fff;
  border-bottom:1px solid #e6e6e6;
  position:sticky;
  top:0;
  z-index:100;
}

.topbar .wrap{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding-top:10px;
  padding-bottom:10px;
}

/* Brand + logo */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:0 0 auto;
}
.brand .logo{
  height:52px;      /* ndrysho 52 -> 60 nëse do më të madhe */
  width:auto;
  max-width:none;   /* shumë e rëndësishme që mos e prish img{max-width:100%} */
  object-fit:contain;
  display:block;
}

/* Hamburger (default hidden on desktop) */
.menu-toggle{
  display:none;
  font-size:28px;
  line-height:1;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #e6e8ee;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  cursor:pointer;
  user-select:none;
}
.menu-toggle:active{transform:translateY(1px)}

/* Nav (desktop) */
.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color:#222;
  padding:8px 10px;
  border-radius:10px;
  transition:background .12s ease, transform .12s ease;
  font-weight:700;
  white-space:nowrap;
}
.nav a:hover{background:#f1f2f6}
.nav a:active{transform:translateY(1px)}

/* Right actions (Admin + Lang) */
.top-actions{display:flex;align-items:center;gap:10px}

.admin-link,
.lang{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid #e6e8ee;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space:nowrap;
}
.admin-link:hover,
.lang:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}
.admin-link:active,
.lang:active{transform:translateY(1px)}

/* ===== MOBILE HEADER FIX ===== */
@media (max-width: 768px){

  /* wrap lejohet me u shty ne 2 rreshta */
  .topbar .wrap{
    flex-wrap:wrap;
    gap:10px;
  }

  /* shfaq hamburger */
  .menu-toggle{
    display:block;
    margin-left:auto;
  }

  /* nav kthehet dropdown */
  .nav{
    width:100%;
    display:none;          /* default hidden */
    flex-direction:column;
    gap:0;
    padding-top:8px;
    margin-top:8px;
    border-top:1px solid #e6e6e6;
  }

  .nav a{
    width:100%;
    padding:12px 10px;
    border-radius:10px;
  }

  .nav.show{
    display:flex;
  }

  /* actions shkojnë rresht poshtë, djathtas */
  .top-actions{
    width:100%;
    justify-content:flex-end;
    gap:10px;
  }

  /* logo pak më e vogël në mobile (opsionale) */
  .brand .logo{
    height:46px;
  }
}

/* ===== Buttons / Forms ===== */
.btn{
  display:inline-block;
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  border:0;
  cursor:pointer;
  font-weight:800;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}
.btn:hover{transform:translateY(-1px);opacity:.98}
.btn:active{transform:translateY(1px)}
.btn-ghost{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e6e8ee;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.btn-wa{background:#0b8f46 !important}

input,textarea,select{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid #ddd;
  background:#fff;
  margin:6px 0 12px;
  font:inherit;
}
textarea{resize:vertical}

/* Cards / layout */
.card{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:16px;
  padding:14px;
}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}

.footer{border-top:1px solid #e6e6e6;background:#fff;margin-top:30px}

/* ===== Cars list (modern) ===== */
.cars-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
@media(max-width:1100px){.cars-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.cars-grid{grid-template-columns:1fr}}

.car-card{
  display:block;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:#111;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:transform .12s ease, box-shadow .12s ease;
}
.car-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(0,0,0,.12);
}

.car-img img{width:100%;height:160px;object-fit:cover}
@media(max-width:720px){.car-img img{height:190px}}

.car-noimg{
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1f3f5;
  color:#667;
}
@media(max-width:720px){.car-noimg{height:190px}}

.car-body{padding:14px}
.car-title{font-size:16px;font-weight:950;margin-bottom:8px;line-height:1.2}

.car-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#f2f4f7;
  color:#333;
}

.car-price{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.price-old{
  color:#d12b2b;
  text-decoration:line-through;
  font-weight:900;
}
.price-new{
  color:#1b8f3a;
  font-weight:950;
  font-size:16px;
}
.badge-offer{
  font-size:11px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  background:#ffecec;
  color:#d12b2b;
}

/* ===== Car details page ===== */
.car-view-bar{margin:8px 0 14px 0}

.car-view-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
@media(max-width:900px){.car-view-top{grid-template-columns:1fr}}

.car-h1{margin:0 0 8px 0}
.car-price.big .price-new{font-size:22px}

.specs{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
@media(max-width:900px){.specs{grid-template-columns:repeat(2,1fr)}}
.spec{
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.spec span{display:block;color:#667;font-size:12px}
.spec b{display:block;font-size:14px;margin-top:3px}

.contact-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Gallery */
.gallery .hero{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
  cursor:pointer;
}
.thumbs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media(max-width:900px){.thumbs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.thumbs{grid-template-columns:repeat(3,1fr)}}
.thumb{
  width:100%;
  height:70px;
  object-fit:cover;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  transition:transform .12s ease, opacity .12s ease;
}
.thumb:hover{transform:translateY(-1px);opacity:.98}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.lb-img{
  max-width:92vw;
  max-height:86vh;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:34px;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.lb-close{top:20px;right:20px;font-size:38px}
.lb-prev{left:20px}
.lb-next{right:20px}

/* ===== Layout: footer gjithmonë poshtë pa mbuluar content ===== */
html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main merr hapësirën që mbetet */
main{
  flex: 1 0 auto;
}

/* footer gjithmonë poshtë, por normal në scroll */
.footer{
  border-top:1px solid #e6e6e6;
  background:#fff;
  margin-top:30px;
}

.footer-fixed{
  position: static; /* mos e bëj fixed fare */
}

/* Footer kompakt + responsive */
.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 14px;
  font-size:14px;
}

.footer-left,.footer-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 768px){
  .footer-row{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    font-size:13px;
  }
}

/* WhatsApp floating button (pa konflikt me footer) */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:999px;
  background:#0b8f46;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  z-index:999;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 22px 55px rgba(0,0,0,.22);opacity:.98}
.wa-float:active{transform:translateY(1px)}
.wa-float img{width:28px;height:28px;max-width:none}