/* Shared styles for africkechcar */
:root{
  --navy:#0A1A2F;
  --gold:#D4A55A;
  --beige:#F5EDE0;
  --white:#ffffff;
  --muted:#666666;
  --accent:#E9D8C8;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:var(--navy);background:var(--beige)}
a{color:inherit;text-decoration:none}
.container{max-width:1150px;margin:0 auto;padding:20px}
.nav{ }
nav{display:block;padding:0;background:#83bdfd;position:sticky;top:0;z-index:30}
nav .container{display:flex;justify-content:space-between;align-items:center;padding:12px 20px}
.logo{display:flex;align-items:center;gap:10px;background:#83bdfd;padding:8px 20px;border-radius:8px;margin-left:-50px}

/* Header link styling: default white, active black, slightly lighter weight */
nav .container a{color:#ffdd7e;text-decoration:none;font-weight:500;transition: transform 0.2s ease, border-bottom 0.2s ease; padding-bottom:4px; border-bottom:3px solid transparent}
nav .container a:hover{transform:scale(1.08);}
nav .container a.active{color:#000000;font-weight:600}
.logo-image{height:100px;width:auto;display:block;object-fit:contain}
.header-logo{height:110px;width:auto;display:block}
.logo svg{width:44px;height:44px}
.lang-switch{display:flex;gap:8px}
.lang-pill{background:var(--gold);padding:6px 10px;border-radius:8px;font-weight:800;color:var(--navy);text-transform:uppercase;border:none;cursor:pointer}
.lang-pill:focus{outline:2px solid rgba(0,0,0,0.06)}
.lang-pill.active{color:#000}
.lang-switch .lang-pill{background:var(--gold) !important;color:var(--navy) !important}
.lang-switch button{background:transparent;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;font-weight:800;color:var(--navy);text-transform:uppercase}
header{background:linear-gradient(rgba(10,26,47,0.45),rgba(10,26,47,0.45)),url('https://source.unsplash.com/1600x900/?marrakech,car,palms') center/cover no-repeat;padding:90px 20px;text-align:center;color:var(--white)}
h1{margin:0;font-size:42px;color:var(--gold);letter-spacing:0.6px}
p.lead{margin:12px 0 20px;font-size:18px;color:rgba(255,255,255,0.95)}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--gold);color:var(--navy)}
section{padding:48px 0}
.cars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.car-card{background:var(--white);border-radius:12px;overflow:hidden;border:2px solid var(--gold);box-shadow:0 6px 20px rgba(10,26,47,0.06)}
.car-card img{width:100%;height:150px;object-fit:cover}
.car-card .body{padding:12px}
.price{color:var(--gold);font-weight:700}
.upload-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.upload-frame{background:var(--white);padding:14px;border-radius:12px;border:2px dashed rgba(10,26,47,0.08);text-align:center}
.upload-frame img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.upload-frame input[type=file]{display:block;margin:8px auto}
.upload-frame textarea{width:100%;min-height:80px;padding:8px;margin-top:8px;border-radius:6px;border:1px solid rgba(10,26,47,0.08)}

/* hover effect for upload frames */
.upload-frame{transition:transform 0.18s ease,box-shadow 0.18s ease}
.upload-frame:hover{transform:scale(1.03);box-shadow:0 12px 30px rgba(10,26,47,0.08)}
.upload-frame img{cursor:pointer}

/* Carousel for vehicle previews */
.vehicle-carousel{position:relative;overflow:hidden;border-radius:8px;margin-bottom:8px}
.vehicle-carousel .carousel-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;visibility:hidden;transition:opacity 0.22s ease}
.vehicle-carousel .carousel-slide.active{opacity:1;visibility:visible}
.vehicle-carousel .carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);color:#fff;border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.vehicle-carousel .carousel-btn.prev{left:10px}
.vehicle-carousel .carousel-btn.next{right:10px}
.vehicle-carousel .carousel-indicators{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;display:flex;gap:6px}
.vehicle-carousel .indicator{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,0.6);opacity:0.9}
.vehicle-carousel .indicator.active{background:var(--gold)}
/* Thumbnail carousels inside upload frames keep a fixed visual height */
.upload-frame .vehicle-carousel{height:160px}
.vehicle-carousel img{width:100%;height:100%;display:block}

/* clock badge styling (used in header on all pages) */
.clock-container{padding:6px 14px;font-size:17px;background:rgba(0,0,0,0.45);border-radius:10px;color:#000000;font-weight:600;margin-left:10px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row .full{grid-column:1/-1}
input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(10,26,47,0.12)}
.footer{padding:24px;background:linear-gradient(180deg,var(--accent),var(--beige));border-top:1px solid rgba(10,26,47,0.04)}
.whatsapp{position:fixed;right:18px;bottom:20px;background:#25D366;color:#fff;padding:14px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,0.2);text-decoration:none;font-weight:700;z-index:999}
.time-badge{display:inline-block;background:rgba(255,255,255,0.12);padding:8px 12px;border-radius:999px;color:var(--white);margin-left:12px}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px}
.why-box{background:var(--white);padding:16px;border-radius:10px;border:2px solid var(--gold);text-align:center}
.muted{color:var(--muted)}
/* Social card + Facebook button */
.social-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:10px;border:2px solid #1877F2;background:linear-gradient(180deg,rgba(24,119,242,0.06),rgba(24,119,242,0.02));}
.social-btn{display:inline-flex;align-items:center;gap:10px;color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid rgba(0,0,0,0.06)}
.social-btn svg{width:18px;height:18px;display:inline-block;vertical-align:middle;filter:brightness(1.05)}
.social-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.facebook-btn{background:#1877F2}
.instagram-btn{background:linear-gradient(45deg,#E1306C,#F77737);}
.tiktok-btn{background:#010101}

/* =============== VEHICLE MANAGER STYLES =============== */
.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:24px}
.vehicle-card-container{width:100%}
.vehicle-card{background:var(--white);border-radius:12px;overflow:hidden;border:2px solid var(--gold);box-shadow:0 4px 12px rgba(10,26,47,0.08);transition:transform 0.25s ease,box-shadow 0.25s ease;display:flex;flex-direction:column;height:100%}
.vehicle-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(10,26,47,0.15)}

.vehicle-card.vehicle-reserved{opacity:0.75;border-color:rgba(220,53,69,0.4)}
.vehicle-image-container{position:relative;width:100%;height:200px;overflow:hidden;background:var(--accent)}
.vehicle-image{width:100%;height:100%;object-fit:cover;display:block}
.reservation-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(220,53,69,0.95);color:#fff;padding:12px 20px;border-radius:6px;font-weight:700;font-size:16px;letter-spacing:1px;text-align:center;z-index:10;box-shadow:0 4px 16px rgba(220,53,69,0.3)}
/* container for optional reservation note (small text under badge) */
.reservation-note-container{position:absolute;left:12px;right:12px;bottom:12px;z-index:11;pointer-events:none}
.reservation-note{background:rgba(0,0,0,0.6);color:#fff;padding:8px 10px;border-radius:6px;font-size:13px;text-align:center;max-height:60px;overflow:hidden;pointer-events:none}
.vehicle-info{padding:16px;flex:1;display:flex;flex-direction:column}
.vehicle-name{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--navy)}
.vehicle-description{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.4;flex:1}
.vehicle-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(10,26,47,0.06)}
.vehicle-price{font-weight:700;color:var(--gold);font-size:15px}
.vehicle-reserve-btn{background:var(--gold);color:var(--navy);border:none;padding:8px 14px;border-radius:6px;font-weight:700;cursor:pointer;transition:background 0.2s ease,transform 0.2s ease;font-size:14px}
.vehicle-reserve-btn:hover{background:#c9935e;transform:scale(1.05)}
.vehicle-reserve-btn:active{transform:scale(0.98)}
.vehicle-card.vehicle-reserved .vehicle-reserve-btn{background:#dc3545;color:#fff}
.vehicle-card.vehicle-reserved .vehicle-reserve-btn:hover{background:#c82333}

/* Admin login fixed button (bottom-left, always visible) */
.admin-login-fixed{
  position:fixed !important;
  left:12px;
  bottom:12px;
  z-index:99999;
  padding:10px 18px;
  background:#ff6b35;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  pointer-events:auto;
}
@media (max-width:480px){
  .admin-login-fixed{left:8px;bottom:8px;padding:8px 12px;font-size:13px;border-radius:6px}
}

/* hidden state for admin-login button (kept fixed but visually hidden) */
.admin-login-hidden{
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
}

/* smooth transitions */
.admin-login-fixed{transition:transform 0.28s ease, opacity 0.28s ease}


@media(max-width:700px){h1{font-size:28px}header{padding:60px 12px}.form-row{grid-template-columns:1fr}.vehicle-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}}

/* =============== Responsiveness tweaks =============== */
/* ensure images never overflow their containers */
img{max-width:100%;height:auto;display:block}

/* make carousel images cover the frame for consistent visuals */
.vehicle-carousel .carousel-slide{object-fit:cover}

/* logo sizing adjustments */
.logo-image{height:90px;max-height:90px}
.header-logo{height:100px;max-height:100px}

/* smaller devices tweaks */
@media (max-width:900px){
  .logo-image{height:72px}
  .header-logo{height:86px}
  h1{font-size:36px}
}

@media (max-width:480px){
  .logo-image{height:48px}
  .header-logo{height:56px}
  h1{font-size:22px}
  .container{padding:12px}
  .upload-frame img{height:120px}
  .car-card img{height:120px}
  .vehicle-carousel img{height:160px}
  .upload-frame{padding:10px}
  nav .container{padding:8px 12px}
}

/* slightly reduce spacing for very small screens */
@media (max-width:360px){
  h1{font-size:20px}
  .upload-frame img{height:100px}
}

/* --- Mobile / Responsive fixes: paste at EOF of style.css --- */
@media (max-width:900px){
  .logo-image{height:72px}
  .header-logo{height:86px}
  h1{font-size:36px}
  .container{padding:16px}
  nav .container{flex-direction:column;align-items:flex-start;gap:12px}
  nav .container a{font-size:15px}
}

@media (max-width:700px){
  .logo-image{height:56px}
  .header-logo{height:72px}
  h1{font-size:28px}
  .upload-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .cars-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .vehicle-grid{grid-template-columns:1fr}
  .clock-container{display:none}
}

@media (max-width:480px){
  .logo-image{height:44px}
  h1{font-size:22px}
  .container{padding:12px}
  .upload-frame img,.car-card img{height:120px}
  .upload-frame{padding:10px}
  .vehicle-card .vehicle-image-container{height:160px}
  .vehicle-carousel .carousel-btn{padding:6px 8px}
  nav .container{padding:8px 12px}
  .whatsapp{right:12px;bottom:12px;padding:10px 12px}
  footer .container{flex-direction:column;gap:12px}
}

@media (max-width:360px){
  h1{font-size:20px}
  .upload-frame img{height:100px}
  .vehicle-card .vehicle-image-container{height:140px}
}

/* Ensure images never overflow */
img{max-width:100%;height:auto}
.vehicle-carousel .carousel-slide{object-fit:cover}

/* Detail page carousel sizing: responsive and mobile-friendly */
.car-card .vehicle-carousel{height:60vh;max-height:720px;min-height:260px}
@media (max-width:900px){
  .car-card .vehicle-carousel{height:50vh;max-height:520px;min-height:200px}
}
@media (max-width:480px){
  .car-card .vehicle-carousel{height:40vh;max-height:360px;min-height:140px}
}