:root {
  --brand: #ff3a4c;
  --dark: #0d0d0d;
  --card: #1a1a1a;
}



/* ---------- HEADER ---------- */
.find-dealer {
  max-width: 1200px!important;
  margin: auto!important;
  text-align: center!important;
}

.find-dealer h1 {
  font-size: 32px!important;
  margin-bottom: 30px!important;
}

/* ---------- FILTERS ---------- */
.find-dealer .filters {
  display: flex!important;
  flex-wrap: wrap!important;
  gap: 12px!important;
  justify-content: center!important;
  margin-bottom: 40px!important;
}

.find-dealer select, .find-dealer button {
    padding: 12px 16px!important;
    font-size: 14px!important;
    background: #2b2b2b!important;
    color: #fff!important;
    border: 1px solid #444!important;
    width: 200px!important;
    max-width: 100%!important;
    flex-grow: 1!important;
}

.find-dealer select:focus {
  outline: none!important;
  border-color: var(--brand)!important;
}

.find-dealer .search-btn {
  background: var(--brand)!important;
  border: none!important;
  cursor: pointer!important;
}

.find-dealer .reset-btn {
  background: transparent!important;
  border: 1px solid var(--brand)!important;
  color: var(--brand)!important;
  cursor: pointer!important;
}
/* ---------- RESULTS GRID ---------- */
.find-dealer .results {
  display: flex!important;
  flex-wrap: wrap!important;
  justify-content: center!important; /* KEY: centers when fewer cards */
  gap: 24px!important;
}

/* ---------- CARD ---------- */
.find-dealer .card {
    background: var(--card)!important;
    padding: 24px!important;
    border: 3px solid #333!important;
    transition: 0.3s ease!important;
    width: calc(33.333% - 24px)!important;
    max-width: 360px!important;
}


.find-dealer .card:hover {
    border-color: var(--brand)!important;
    transform: translateY(-5px);
}

.find-dealer .card h3 {
  color: var(--brand)!important;
  margin-bottom: 15px!important;
  font-size: 22px!important;
}

.find-dealer .card p, .find-dealer .card a {
    margin: 6px 0!important;
    font-size: 14px!important;
    line-height: 1.5!important;
    color: white!important;
    padding: 0!important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .find-dealer .results {
    grid-template-columns: repeat(2, 1fr)!important;
  }
   .find-dealer .card {
    width: calc(50% - 24px)!important;
  }
}

@media (max-width: 600px) {
  .find-dealer .results {
    grid-template-columns: 1fr!important;
  }

   .find-dealer .card {
    width: 100%!important;
    max-width: 100%!important;
  }

  .find-dealer select, .find-dealer button {
    width: 100%!important;
  }
}