/* DealZoo 21 - public site styles */
:root {
  --bg: #0b0b0c;
  --bg-alt: #161618;
  --card: #1c1c1f;
  --border: #2c2c30;
  --text: #f5f5f5;
  --text-dim: #a3a3a8;
  --green: #a8e00f;
  --green-dark: #8bc10c;
  --orange: #f5a623;
  --white: #ffffff;
  --whatsapp: #25d366;
  --danger: #e05555;
  --radius: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* Form controls, sitewide (public + admin + agent all load this file) —
   resets each browser's native input/select/textarea skin so it always
   picks up our dark theme colors instead of falling back to a light
   default, and neutralizes the light "remembered value" background some
   browsers apply on autofilled fields (name/phone/username are common
   autofill targets). */
input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 1; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23a3a3a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
  box-shadow: 0 0 0px 1000px var(--bg) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 700; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green); color: #0b0b0c; }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Header */
.site-header {
  background: rgba(11,11,12,0.95);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; }
.brand-logo { max-width: 190px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a { font-weight: 600; color: var(--text-dim); font-size: 15px; }
.main-nav a.active, .main-nav a:hover { color: var(--green); }
.main-nav a.btn { color: #fff; }
.nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 26px; cursor: pointer; }

@media (max-width: 780px) {
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-alt);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px;
    display: none;
    border-bottom: 1px solid var(--border);
    gap: 14px;
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
}

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(135deg, #101012, #0b0b0c 60%);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
  text-align: center;
}
/* When a real video is playing, the hero itself goes transparent so the
   fixed video layer behind it (see below) shows through - the fallback
   gradient above is only for when no video file exists. */
.hero.has-video { padding: 110px 0; background: transparent; border-bottom-color: rgba(255,255,255,0.08); }
/* Fixed, not absolute: the video stays pinned to the viewport instead of
   scrolling away with the hero section. Sections further down the page
   (filters, vehicle grid, footer) all have their own solid backgrounds,
   so they naturally cover the video as the visitor scrolls past - the
   video only ever shows through the hero's own transparent area. Negative
   z-index keeps it behind all normal page content everywhere. */
.hero-video-bg {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  z-index: -2;
}
.hero-video-overlay {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  background: linear-gradient(180deg, rgba(11,11,12,0.72), rgba(11,11,12,0.92));
  z-index: -1;
}
.hero-inner { position: relative; z-index: 2; }
.hero-logo { max-width: 260px; width: 70%; height: auto; margin: 0 auto 20px; }
.hero h1 { font-size: 2.4rem; }
.hero h1 { color: var(--white); }
.hero p { color: var(--text-dim); font-size: 1.05rem; }
.hero-punchline {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text) !important;
  max-width: 480px;
  margin: 0 auto;
  opacity: 0.92;
}

/* Filters */
/* Left transparent on purpose on the homepage (index.php) so the fixed
   hero video keeps showing through behind the filter bar and the vehicle
   grid below, all the way down to the footer - only the filter inputs
   themselves (and the vehicle cards further down) have their own solid
   background, for readability. On every other page (about.php etc, which
   never has a hero video) .filters-section isn't used, so this has no
   effect there. */
.filters-section { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 20px 0; }
.filters-form { display: flex; flex-wrap: wrap; gap: 10px; }
.filters-form input, .filters-form select {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  flex: 1 1 160px;
}
.filters-form input:focus, .filters-form select:focus { outline: 1px solid var(--green); }

/* Listings */
/* Also left transparent so the video shows through here too - see the
   .filters-section note above. Individual vehicle cards stay opaque. */
.listings { padding: 32px 0 60px; }
.results-count { color: var(--text-dim); text-shadow: 0 1px 4px rgba(0,0,0,0.8); margin-bottom: 16px; }
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}
.vehicle-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 14px rgba(168,224,15,0.10), 0 0 2px rgba(168,224,15,0.18);
}
.vehicle-card:hover {
  border-color: var(--green);
  transform: translateY(-8px) scale(1.035);
  box-shadow: 0 0 10px rgba(168,224,15,0.55), 0 0 34px rgba(168,224,15,0.4), 0 16px 30px rgba(0,0,0,0.45);
  z-index: 2;
  position: relative;
}
.vehicle-card-img { position: relative; aspect-ratio: 4/3; background: #111; }
.vehicle-card-img img { width: 100%; height: 100%; object-fit: cover; }
.no-image {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-dim); font-size: 13px; background: #141416;
}
.no-image.large { aspect-ratio: 4/3; border-radius: var(--radius); border: 1px dashed var(--border); }
.badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.7); color: var(--green);
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--green);
}
.badge-sold { position: static; display: inline-block; margin-left: 8px; color: #fff; border-color: var(--danger); background: var(--danger); }
.vehicle-card-body { padding: 14px 16px; }
.vehicle-card-body h3 { font-size: 16px; margin-bottom: 4px; }
.vehicle-meta { color: var(--text-dim); font-size: 13px; margin: 0 0 8px; }
.vehicle-price { color: var(--green); font-weight: 800; font-size: 18px; margin: 0; }
.vehicle-price.large { font-size: 28px; margin: 6px 0 18px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); text-shadow: 0 1px 4px rgba(0,0,0,0.8); }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.pagination a {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-size: 14px;
  background: rgba(28,28,31,0.85);
}
.pagination a.active { border-color: var(--green); color: var(--green); }

/* Vehicle detail */
.vehicle-detail { padding: 30px 0 60px; }
.breadcrumb { color: var(--text-dim); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--green); }
.vehicle-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .vehicle-detail-grid { grid-template-columns: 1fr; } }
.gallery-main { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.gallery-thumb { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid var(--border); }
.gallery-thumb:hover { border-color: var(--green); }
.spec-list { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.spec-list li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--border); padding-bottom: 6px; font-size: 14px; }
.spec-list li strong { color: var(--text-dim); font-weight: 500; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.description p { color: var(--text-dim); white-space: pre-line; }
.sold-note { color: var(--danger); font-weight: 600; }
.instagram-cta { margin: 16px 0 0; }
.instagram-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: 14px; padding: 10px 20px; border-radius: 999px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.instagram-cta a:hover { opacity: 0.9; }

.enquiry-box { margin-top: 40px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; max-width: 520px; }
.enquiry-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.enquiry-form input, .enquiry-form textarea {
  background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-family: inherit; font-size: 14px;
}
.success-msg { color: var(--green); }
.error-msg { color: var(--danger); }

/* About/contact */
.page-section { padding: 40px 0 60px; }
.page-section p { color: var(--text-dim); max-width: 720px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 24px; }
.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-top: 24px; }
.service-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; text-align: center; }
.service-icon { font-size: 28px; margin-bottom: 8px; }
.service-card h3 { font-size: 15px; margin: 0; }
.map-embed { margin-top: 30px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* Footer */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); margin-top: 40px; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 20px; }
.footer-logo { max-width: 150px; height: auto; margin-bottom: 10px; }
.footer-col p { color: var(--text-dim); font-size: 14px; margin: 6px 0; }
.footer-col h4 { color: var(--text); font-size: 15px; }
.footer-col a:hover { color: var(--green); }
.footer-bottom { text-align: center; padding: 16px; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border); }

.whatsapp-float {
  position: fixed; bottom: 22px; right: 22px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--whatsapp); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  z-index: 60;
}