:root {
  --color-blue: #172e45;
  --color-pink: #ce3758;
  --color-orange: #d78451;
  --color-white: #f7f2e9;
}

/* Section background */
.search-section {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.search-group {
  max-width: 33rem;
}

/* Pink buttons */
.btn-pink {
  background-color: var(--color-pink);
  color: var(--color-white);
  border: none;
}
.btn-pink:hover {
  background-color: #b92f4d;
  color: var(--color-white);
}

/* Orange success button */
.btn-success {
  background-color: var(--color-orange);
  border: none;
}
.btn-success:hover {
  background-color: #bf6b3d;
}

/* White search input */
.search-section input.search-input {
  background-color: var(--color-white);
  border: 1px solid #ccc;
  color: #212529;
  padding: .375rem .75rem;
  border-radius: 0.375rem;
}

/* Fix form-check checked state */
.form-check-input:checked {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

/* Offcanvas scroll */
/* Scrollable filter area */
.filters-drawer {
  overflow-y: auto;
}

/* Sticky footer */
.offcanvas-footer {
  background-color: var(--color-white);
  position: sticky;
  bottom: 0;
}


/* Badges for filters */
.filter-badge {
  background-color: var(--color-pink);
  color: var(--color-white);
  text-decoration: none;
  padding: 0.5em 0.75em;
  border-radius: 20px;
  font-size: 0.9rem;
}
.filter-badge:hover {
  background-color: #b92f4d;
  color: var(--color-white);
  text-decoration: none;
}