/* Classiq Chauffeurs — black & white theme */
:root{
  --bg:#0f0f10;
  --card:#141416;
  --text:#f5f5f5;
  --muted:#b5b5b5;
  --line:#222;
  --white:#ffffff;
}

*{box-sizing:border-box}
html {
  scroll-behavior: smooth;
}

.section {
  scroll-margin-top: 80px; /* prevents the header from covering section titles */
}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section.alt{background:#0b0b0c}

.section-title{font-size:32px;font-weight:600;margin:0 0 28px;letter-spacing:.5px}

.site-header{position:sticky;top:0;z-index:20;background:rgba(15,15,16,.7);backdrop-filter: blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{height:56px}

.nav a{color:var(--text);text-decoration:none;margin-left:18px;font-size:14px;opacity:.9;transition:opacity .2s}
.nav a:hover{opacity:1}

.hero{position:relative;min-height:72vh;display:flex;align-items:center;background:none;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65));z-index:0}
.slides{position:absolute;inset:0;z-index:-1}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.slide.active{opacity:1}
.hero-content{position:relative;z-index:2;max-width:780px}
.dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.dot{width:8px;height:8px;border-radius:50%;background:#ffffff80;border:1px solid #fff;cursor:pointer}
.dot.active{background:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid var(--white);text-decoration:none;color:var(--text);font-weight:500;letter-spacing:.3px;transition:transform .08s ease, background .2s ease, color .2s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--white);color:#000;border-color:var(--white)}
.btn-outline{background:transparent;border-color:var(--white)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
figure{margin:0;background:#0a0a0a;border:1px solid var(--line);border-radius:16px;overflow:hidden}
figure img, figure video{width:100%;height:220px;object-fit:cover;display:block}
figure figcaption{padding:10px 12px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}

.contact-form{background:var(--card);border:1px solid var(--line);padding:22px;border-radius:20px}
.form-row{display:flex;flex-direction:column;margin-bottom:14px}
label{font-size:13px;color:var(--muted);margin-bottom:6px}
input,textarea{background:#0d0d0e;color:var(--text);border:1px solid #1f1f1f;border-radius:12px;padding:12px 14px;outline:none;transition:border .15s}
input:focus,textarea:focus{border-color:#444}

.site-footer{border-top:1px solid var(--line);padding:26px 0;background:#0b0b0c}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer-inner p{margin:0}
.muted{color:var(--muted)}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:34px}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .hero{min-height:64vh}
}
/* --- Upload preview styles --- */
.file-upload-label {
  display: inline-block;
  background: #222;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.2s ease;
}

.file-upload-label:hover {
  background: #444;
}

.preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.preview-grid img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* --- Submit button loading spinner --- */
.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* --- Removable image previews --- */
.preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.preview-item {
  position: relative;
  width: 90px;
  height: 90px;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #c92a2a;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  transition: background 0.2s;
}

.remove-btn:hover {
  background: #a51111;
}
.preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.preview-item {
  position: relative;
  width: 90px;
  height: 90px;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #c92a2a;
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  transition: background 0.2s;
}

.remove-btn:hover {
  background: #a51111;
}
/* --- File upload button --- */
.file-field {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.file-trigger {
  display: inline-block;
  background: #222;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

.file-trigger:hover {
  background: #444;
}

/* The real input covers the trigger but is invisible */
.file-field input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* --- Thumbnail preview grid --- */
.preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.preview-item {
  position: relative;
  width: 90px;
  height: 90px;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #c92a2a;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  transition: 0.2s;
}

.remove-btn:hover {
  background: #a51111;
}
.file-field { position: relative; display: inline-block; margin-bottom: 10px; }
.file-trigger { display:inline-block; background:#222; color:#fff; padding:10px 18px; border-radius:6px; cursor:pointer; transition:background .2s; user-select:none; }
.file-trigger:hover { background:#444; }
.file-field input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

.preview-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.preview-item { position:relative; width:90px; height:90px; }
.preview-item img { width:100%; height:100%; object-fit:cover; border-radius:6px; border:1px solid #ccc; }
.remove-btn { position:absolute; top:-6px; right:-6px; background:#c92a2a; color:#fff; border:0; border-radius:50%; width:20px; height:20px; font-size:14px; line-height:20px; text-align:center; cursor:pointer; box-shadow:0 0 2px rgba(0,0,0,.4); }
.remove-btn:hover { background:#a51111; }