/* Container setup */
.facilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
 
/* Individual boxes */
.facilities li {
  background: #FFFFFF; /* soft beige */
  border-radius: 12px;
  text-align: center;
  padding: 20px 10px;
  font-family: "Albert Sans", sans-serif;
  font-weight: 600;
  color: black; /* brown tone for icons/text */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
 
/* Optional hover effect */
.facilities li:hover {
  background: #f2ece6;
  transform: translateY(-2px);
}
 
/* Example SVG/icon placeholder styling */
.facilities li::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: invert(25%) sepia(20%) saturate(700%) hue-rotate(10deg);
  /* this makes icon adopt the brownish color */
}
.loader_inner_container {
    width: 100%;
    text-align: center;
    top: -150px;
    position: relative;
}

.loader_inner_container svg {
  height: 400px;
}

/* Individual icons for each facility class */
 
.fac-boating_marina_boat_launch_or_docks::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 50'><path fill='red' d='M16.6607 31.9355H22.3393L20.7912 23.2953C21.6125 23.0087 22.2901 22.5034 22.8241 21.7793C23.358 21.0552 23.6249 20.247 23.6249 19.3547C23.6249 18.2113 23.2222 17.2356 22.4166 16.4276C21.6116 15.6192 20.6394 15.215 19.5 15.215C18.3606 15.215 17.3884 15.6192 16.5834 16.4276C15.7778 17.2356 15.3751 18.2113 15.3751 19.3547C15.3751 20.247 15.642 21.0552 16.1759 21.7793C16.7099 22.5034 17.3875 23.0087 18.2088 23.2953L16.6607 31.9355ZM19.5 50C13.9035 48.3333 9.25438 44.9309 5.55263 39.7928C1.85088 34.6548 0 28.8672 0 22.43V7.3115L19.5 0L39 7.3115V22.43C39 28.8672 37.1491 34.6548 33.4474 39.7928C29.7456 44.9309 25.0965 48.3333 19.5 50Z'/></svg>") no-repeat center / contain;');
  color: red;
}
 
.fac-internet_hot_spot::before {
background-image: url('https://campbluelemon.ca/wp-content/uploads/2025/10/Frame-4.svg');
}
 
.fac-laundromat::before {
background-image: url('https://campbluelemon.ca/wp-content/uploads/2025/10/Frame-5.svg');
}
 
.fac-pet_friendly::before {
background-image: url('https://campbluelemon.ca/wp-content/uploads/2025/10/Frame-6.svg');
}
 
.fac-playground::before {
background-image: url('https://campbluelemon.ca/wp-content/uploads/2025/10/Frame-7.svg');
}
 
.fac-pull_thru_sites::before {
background-image: url('https://campbluelemon.ca/wp-content/uploads/2025/10/Frame-8.svg');
}
 
.fac-rec_hall_games_room::before {
background-image: url('https://campbluelemon.ca/wp-content/uploads/2025/10/Frame-9.svg');
}
 
.fac-store::before {
  background-image: url('https://campbluelemon.ca/wp-content/uploads/2025/10/Frame-10.svg');
}
body .filter-form .fl-field .select2-container--classic .select2-selection--multiple, body .filter-form .flt-field .select2-container--classic .select2-selection--multiple {
    min-height: 41px;
    padding: 5px 10px;
    display: inline-block;
	width: 100%;
	border: 1px solid #666;
}

.filter-form .fl-field  ul#select2-site-type-container {
    display: inline-block;
	vertical-align: top;
}
.filter-form .select2-container .select2-search--inline {
    float: none;
    display: inline-block;
}
.filter-form .select2-selection__rendered li.select2-selection__choice {
    font-size: 12px;
    border-radius: 50px !important;
    display: flex !important;
    flex-direction: row-reverse;
    background-color: #2c342c !important;
    color: #fff;
    padding: 5px 5px 5px 9px !important;
    align-items: center;
    margin: 2px 2px !important;
}
.filter-form  .select2-container--classic .select2-search--inline .select2-search__field {
    margin-top: 0 !important;
    height: 21px;
}
.fl-field button#find-vacancies {
    margin-top: 25px;
}

@media only screen and (max-width:1199px){
.filter-form {
	grid-column-gap: 10px !important;
	grid-row-gap: 10px;
}	
}
@media only screen and (max-width:767px){
.filter-form {
    grid-template-columns: 1fr !important;
}
.filter-form .select2-container {
    width: 100% !important;
}
.fl-field button#find-vacancies {
    margin-top: 10px;
    width: 100%;
}
}