body {
    background-color: #111;
    padding: 1.3rem; /* 24px als root font-size 16px is */
    margin-top: 20px;

}
:root{ --nav-h: 96px; }                 /* desktop nav-hoogte */
@media (max-width: 992px){
  :root{ --nav-h: 72px; }               /* mobile/tablet nav-hoogte */
}

/* laat anchors onder de vaste header landen */
html{ scroll-padding-top: calc(var(--nav-h) + 12px); }
section[id]{ scroll-margin-top: calc(var(--nav-h) + 12px); }





/* ========== Filter Bar Layout ========== */
.filter-command-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1.5rem;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  margin: 80px auto 0 auto;
  max-width: 1200px;
}

/* ========== Dropdown & Buttons ========== */
.filter-chip,
.glass-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.95rem;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-decoration: none;
}

/* Hover effect */
.filter-chip:hover,
.glass-select:hover {
  border-color: rgba(243, 201, 105, 0.4);
  box-shadow: 0 0 8px rgba(243, 201, 105, 0.15);
}

/* Placeholder style */
.filter-chip span {
  font-weight: 400;
  color: #bbb;
}

/* Group spacing */
.filter-group {
  display: flex;
  flex-direction: column;
}

/* Verwijder list-style bullets */
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ========== Active Filters (badges) ========== */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem auto 2rem auto;
  max-width: 1200px;
  padding-left: 2rem;
}

.active-filters .filter-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(243, 201, 105, 0.4);
  color: #fff;
  font-size: 0.9rem;
  padding: 0.5rem 1.2rem;
  border-radius: 2rem;
  backdrop-filter: blur(8px);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.active-filters .filter-chip:hover {
  box-shadow: 0 0 8px rgba(243, 201, 105, 0.2);
  border-color: rgba(243, 201, 105, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .filter-command-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-chip,
  .glass-select {
    width: 100%;
  }

  .active-filters {
    padding-left: 1rem;
    justify-content: center;
  }
}

/* Trigger standaard uit; op <600px tonen */
.filter-trigger{ display:none; }







/* ========== TOM SELECT: GLASSMORPHISM STIJL ========== */

/* --- Wrapper en Input veld --- */
.ts-wrapper {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 2rem !important;
  backdrop-filter: blur(8px) !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  min-width: 160px;
  box-shadow: none !important;
  min-height: 44px; /* bijvoorbeeld 44px hoog */
  padding: 0.3rem 1rem !important; /* meer verticale padding */
  display: flex;  /* zodat content mooi center uitgelijnd wordt */
  align-items: center;
}


/* --- Focus effect --- */
.ts-wrapper.focus {
  border-color: rgba(243, 201, 105, 0.4) !important;
  box-shadow: 0 0 8px rgba(243, 201, 105, 0.15) !important;
}

/* --- Input veld --- */
.ts-control {
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.95rem !important;
  color: #fff !important;
  display: flex;
  flex-wrap: wrap;
}

/* --- Tekst input in control --- */
.ts-control input {
  color: #fff !important;
}

/* --- Placeholder --- */
.ts-wrapper .ts-placeholder {
  color: #ccc !important;
  opacity: 0.7;
}

/* --- Dropdown lijst --- */
.ts-dropdown {
  background: rgba(30, 30, 30, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1rem !important;
  margin-top: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  color: #fff !important;
  z-index: 999 !important;
}

/* --- Opties in dropdown --- */
.ts-dropdown .option {
  padding: 0.6rem 1.2rem !important;
  font-size: 0.95rem !important;
  transition: background 0.2s ease;
  border-radius: 0 !important;
}

/* --- Hover/active op optie --- */
.ts-dropdown .option:hover,
.ts-dropdown .option.active,
.ts-dropdown .option.selected {
  background-color: rgba(243, 201, 105, 0.2) !important;
  color: #fff !important;
}

/* --- Geen resultaten tekst --- */
.ts-dropdown .no-results {
  padding: 0.6rem 1.2rem;
  font-style: italic;
  color: #888;
}

/* --- Geselecteerde items (tags/chips) --- */
.ts-wrapper.multi .ts-control > .item {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(243, 201, 105, 0.3) !important;
  color: #fff !important;
  border-radius: 1rem !important;
  padding: 0.3rem 0.7rem !important;
  margin: 0.2rem 0.3rem !important;
  font-weight: 500 !important;
}

/* --- Verwijderknop (X) op tags --- */
.ts-wrapper.multi .ts-control > .item .remove {
  color: #f66 !important;
  font-weight: bold !important;
  margin-left: 0.5rem !important;
  cursor: pointer !important;
}








.ts-wrapper.multi .ts-control > .item {
  display: none !important;
}

/* Tag container onder elk select veld */
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.selected-tags .filter-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(243, 201, 105, 0.3);
  color: #fff;
  border-radius: 2rem;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  transition: 0.2s ease;
}

.selected-tags .filter-chip:hover {
  background: rgba(243, 201, 105, 0.15);
  cursor: pointer;
}

.selected-tags .remove {
  margin-left: 0.5rem;
  color: #f88;
  font-weight: bold;
  cursor: pointer;
}






@media (max-width: 1124px) {
  .filter-command-bar {
    flex-direction: column;
    align-items: stretch;   /* laat velden de hele breedte nemen */
    gap: 0.75rem;
    padding: 1rem;
  }

  .filter-command-bar .ts-wrapper,
  .filter-command-bar .glass-select,
  .filter-command-bar .filter-chip {
    width: 100% !important;
    min-width: 0 !important;  /* voorkomt vaste min-width van Tom Select */
  }

  /* Tags netjes mee laten schalen */
  .selected-tags {
    width: 100%;
    justify-content: flex-start;
  }
}




@media (max-width: 395px) {
  .filter-command-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    max-width: 350px;   /* smaller dan 375 */
    margin: 130px auto 0 auto;     /* centreert in het scherm */
  }

  .filter-command-bar .ts-wrapper,
  .filter-command-bar .glass-select,
  .filter-command-bar .filter-chip {
    width: 100% !important;
    min-width: 0 !important;  /* voorkomt vaste min-width van Tom Select */
  }

  /* Tags netjes mee laten schalen */
  .selected-tags {
    width: 100%;
    justify-content: flex-start;
  }
}





.container {
    padding: 0px 5% 2rem 5%; /* top padding zodat alles onder de navbar valt */
    max-width: 1600px;
    margin: 0 auto;
}



.page-title {
    margin-top: 10px; /* pas aan afhankelijk van je navbar hoogte */
    font-size: 2.2rem;
    margin-bottom: 2rem;
    color: #f3c969;
}


.car-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolommen */
    gap: 2rem;
}

.car-card {
    background-color: #1c1c1c;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    color: white;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}

.car-card:hover {
    transform: translateY(-5px);
}

.car-image-wrapper {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.car-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-count {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 8px;
}

.sold-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: #e74c3c;
    color: #fff;
    padding: 4px 10px;
    font-weight: bold;
    border-radius: 6px;
}

.car-info {
    padding: 1rem;
}

.car-info h2 {
    font-size: 1.3rem;
    margin: 0;
    color: #f3f3f3;
}

.car-sub {
    font-size: 0.9rem;
    color: #aaa;
}

.car-price {
    font-size: 1.5rem;
    color: #f3c969;
    margin: 0.5rem 0;
}

.car-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: #bbb;
}

.car-specs li {
    margin-bottom: 4px;
}

.no-cars {
    color: #999;
    text-align: center;
    padding: 2rem 0;
}






.car-meta-line {
  margin-top: 0.6rem;
  color: #ccc;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
}









@media (max-width: 1124px) {
  .car-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 kolommen op tablet */
  }
}
@media (max-width: 800px) {
  .car-grid {
    grid-template-columns: 1fr; /* 1 kolom op mobiel */
  }

  .container {
    padding: 0 0.5rem 1.5rem 0.5rem; /* beetje padding links/rechts */
    max-width: 100%;                /* gebruik volledige breedte scherm */
    margin: 0;                      /* geen auto-center */
  }
}



/* Verberg filterbalk op schermen kleiner dan 768px breed */
@media (max-width: 768px) {
  #filterForm {
    display: none;
  }

  .container {
  margin-top: 120px; /* pas dit aan totdat het mooi los staat van je header */
  } 

}







.rdw-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  max-width: 80px;
  max-height: 40px;
  width: 10px;
  height: 10px; 
  object-fit: contain;
  background: white;
  padding: 3px;
  border-radius: 4px;
}

img.rdw-badge {
  height: 40px;
}