:root{
  --ink:#0b1220;
  --muted:#6b7280;
  --line:rgba(255,255,255,.12);
  --card:#0f172a;
  --card2:#0b1220;
  --accent:#f59e0b;     /* amber */
  --accent2:#ef4444;    /* red */
  --radius:18px;
  --shadow: 0 16px 40px rgba(2,6,23,.30);
}

/* =========================
   BASE
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

.site-body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* IMPORTANT: default text color should be light for dark UI */
  color: #e5e7eb;
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(245,158,11,.18), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(239,68,68,.16), transparent 60%),
    linear-gradient(180deg, #070b14 0%, #0b1220 45%, #0b1220 100%);
}

.site-body a{ color: inherit; }
.site-body a:hover{ color:#fff; }

/* =========================
   TOP STRIP
   ========================= */
.top-strip{
  background: rgba(0,0,0,.55);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  color: #fff;
}
.top-dot{
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(245,158,11,.18);
  display:inline-block;
}
.top-link{ color: #fff; text-decoration: none; }
.top-link:hover{ text-decoration: underline; }

/* =========================
   NAVBAR
   ========================= */
.showroom-nav{
  background: linear-gradient(90deg, rgba(15,23,42,.92), rgba(2,6,23,.92));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  color:#fff;
}
.showroom-nav.is-scrolled{ box-shadow: var(--shadow); }

/* Brand */
.brand-mark{
  width: 36px; height: 36px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  letter-spacing: .5px;
  color: #0b1220;
  background: linear-gradient(135deg, var(--accent), #fde68a);
}
.brand-mark--sm{ width: 30px; height: 30px; border-radius: 10px; }

.brand-text{ letter-spacing: .2px; }
.showroom-nav .navbar-brand,
.showroom-nav .navbar-brand .brand-text,
.brand-text{
  color: rgba(255,255,255,.92) !important;
}
.showroom-nav .navbar-brand:hover{
  color:#fff !important;
}

/* Search in navbar */
.nav-search{
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
  min-width: 330px;
  background: rgba(255,255,255,.04);
}
.nav-search .input-group-text{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.70);
  border-radius: 999px 0 0 999px;
}
.nav-search .form-control{
  background: transparent;
  border: 0;
  color:#fff;
}
.nav-search .form-control::placeholder{ color: rgba(255,255,255,.55); }
.nav-search .form-control:focus{ box-shadow: none; }

/* Accent button */
.btn-accent{
  background: linear-gradient(135deg, var(--accent), #fbbf24);
  color:#0b1220;
  border: 0;
  font-weight: 700;
}
.btn-accent:hover{ filter: brightness(.95); color:#0b1220; }

/* Nav links */
.navbar-dark .navbar-nav .nav-link{
  color: rgba(255,255,255,.82);
}
.navbar-dark .navbar-nav .nav-link:hover{
  color:#fff;
}
.navbar-dark .navbar-nav .nav-link.active{
  color:#fff;
  position: relative;
}
.navbar-dark .navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left: .6rem;
  right: .6rem;
  bottom: .25rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Navbar buttons (Login/Register etc.) */
.showroom-nav .btn-outline-light{
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.92);
}
.showroom-nav .btn-outline-light:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.35);
  color:#fff;
}

/* =========================
   MAIN AREA
   ========================= */
.site-main{
  min-height: calc(100vh - 220px);
  color: #e5e7eb;
}

/* =========================
   HERO
   ========================= */
.hero{
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 420px at 25% 20%, rgba(245,158,11,.22), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(239,68,68,.16), transparent 60%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(2,6,23,.92));
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(1000px 400px at 60% 120%, rgba(255,255,255,.06), transparent 55%);
  pointer-events:none;
}
.hero-inner{ position: relative; z-index: 1; }
.hero-kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.85);
  font-size: .9rem;
}
.hero-title{ font-weight: 800; letter-spacing: -0.5px; }
.hero-sub{ color: rgba(255,255,255,.70); }

.hero-search{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
.hero-search .form-control,
.hero-search .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.hero-search .form-control::placeholder{ color: rgba(255,255,255,.55); }
.hero-search .form-control:focus,
.hero-search .form-select:focus{ box-shadow:none; border-color: rgba(245,158,11,.6); }

/* =========================
   CARDS
   ========================= */
.card-showroom{
  background: linear-gradient(180deg, rgba(15,23,42,.88), rgba(2,6,23,.88));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(2,6,23,.35);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.card-showroom:hover{
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.35);
}

.car-thumb{
  width:100%;
  height: 210px;
  object-fit: cover;
  background: rgba(255,255,255,.04);
}

/* Your extra card hover effect */
.car-card { border-radius: 18px; overflow: hidden; }
.car-thumb { height: 210px; position: relative; overflow: hidden; }
.car-thumb img { transition: transform .35s ease; }
.car-card:hover .car-thumb img { transform: scale(1.04); }
.car-badges { position:absolute; left:12px; top:12px; display:flex; gap:8px; z-index: 2; }

.spec-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.72);
  font-size: .82rem;
}
.price{
  font-weight: 800;
  letter-spacing: -.2px;
}

/* Buttons on thumbnails */
.car-thumb-btn { background: #fff; }
.car-thumb-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(0,0,0,.10); }
.car-thumb-btn { transition: all .2s ease; }

/* =========================
   FOOTER
   ========================= */
.site-footer{
  background: rgba(0,0,0,.55);
  border-top: 1px solid var(--line);
  color: #fff;
}
.footer-title{
  font-weight: 700;
  margin-bottom: .75rem;
}
.footer-links a{
  display:inline-block;
  padding: .25rem 0;
  color: rgba(255,255,255,.70);
  text-decoration:none;
}
.footer-links a:hover{ color:#fff; text-decoration: underline; }
.footer-hr{ border-color: rgba(255,255,255,.12); }

/* =========================
   FORM THEME (LOGIN/REGISTER/CONTACT)
   ========================= */
.form-shell{
  background: linear-gradient(180deg, rgba(15,23,42,.88), rgba(2,6,23,.88));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
}

.form-shell .text-muted,
.form-shell .form-text{
  color: rgba(255,255,255,.68) !important;
}

.form-shell .form-label{
  color: rgba(255,255,255,.85);
  font-weight: 600;
}

.form-shell .form-control,
.form-shell .form-select,
.form-shell textarea{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 14px;
}

.form-shell .form-control::placeholder,
.form-shell textarea::placeholder{
  color: rgba(255,255,255,.55);
}

.form-shell .form-control:focus,
.form-shell .form-select:focus,
.form-shell textarea:focus{
  box-shadow: none;
  border-color: rgba(245,158,11,.70);
}

.form-shell .input-group-text{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.70);
  border-radius: 14px 0 0 14px;
}

/* Premium button for forms */
.btn-showroom{
  background: linear-gradient(135deg, var(--accent), #fbbf24);
  color:#0b1220;
  border: 0;
  font-weight: 800;
  border-radius: 14px;
}
.btn-showroom:hover{
  filter: brightness(.96);
  color:#0b1220;
}

/* Soft link style */
.link-soft{
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.link-soft:hover{
  color:#fff;
  text-decoration: underline;
}

/* Bootstrap alert in dark UI */
.alert{
  border: 1px solid rgba(255,255,255,.12);
}
.alert-warning{
  background: rgba(245,158,11,.10);
  color: rgba(255,255,255,.90);
}
.alert-success{
  background: rgba(34,197,94,.10);
  color: rgba(255,255,255,.90);
}

/* =========================
   UTILITIES
   ========================= */
.muted{ color: rgba(255,255,255,.68); }

@media (max-width: 991.98px){
  .nav-search{ min-width: 100%; }
}