/* Set the size of the map */
body,
html {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
  height: 100%;
  margin: 0;
  padding: 0;
}

.marker-cluster-small {
  background-color: rgb(46, 47, 50);
}

.marker-cluster-small div {
  background-color: rgb(46, 47, 50);
}

.marker-cluster-medium {
  background-color: rgb(46, 47, 50);
}

.marker-cluster-medium div {
  background-color: rgb(46, 47, 50);
}

.marker-cluster-large {
  background-color: rgb(46, 47, 50);
}

.marker-cluster-large div {
  background-color: rgb(46, 47, 50);
}

.marker-cluster {
  background-clip: padding-box;
  border-radius: 20px;
}

.marker-cluster div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;

  text-align: center;
  border-radius: 15px;
  color: #fff;
  /*font: 10px "Lato", sans-serif; */
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 12px;
}

.marker-cluster span {
  line-height: 30px;
}

/* openstreetmap legend css start */
.info {
  padding: 6px 8px;
  font-family: 'Lato', sans-serif;
  font-size: .8rem;
  background: white;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.info h4 {
  margin: 0 0 5px;
  color: #474542;
}

.legend {
  line-height: 19px;
  color: #555;
}

.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 1;
}

/* Custom popup styles */
.leaflet-popup-content-wrapper {
  background-color: #0f1312 !important;
  /* color: #e8e791; */
  color: #fff;
  padding: 0;
}

.leaflet-popup-content {
  margin: 0;
  padding: 0;
}

.custom-popup .leaflet-popup-content {
  width:316px;
  overflow: visible;
  /* Add scroll for overflow content */
}

.custom-popup i {
  color: #d3ff52;
}

.icon-white i {
  color: #fff;
}

.leaflet-popup-tip {
  background: #0f1312 !important;
}

.leaflet-popup-content h4 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1em;
  color: #d8ff66;
  margin-bottom: 0;
}

.leaflet-popup-content p {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin: 0;
  padding-top: 5px;
  color: #c5c7d1;
}

/* Custom CSS for rounded right image in popup */
.leaflet-popup-content-wrapper .rounded-right {
  border-top-right-radius: 12px;
  /* Match Leaflet's popup border-radius */
  border-bottom-right-radius: 12px;
}

.leaflet-popup-content-wrapper a {
  color: #97e7e3;
  text-decoration: none;
}

.leaflet-popup-content-wrapper a:hover {
  color: #3aafa9;
}

.leaflet-popup a {
  color: #d8ff66 !important;
  transition: color 0.5s;
}
.leaflet-popup a:hover {
  color: #fff !important;
}

.leaflet-control-attribution a {
  color: #9cb84b !important;
}

.leaflet-control-attribution a:hover {
  color: #000 !important;
  text-decoration: none;
}

.leaflet-control-layers label {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 16px;
}

/* openstreetmap legend css end */

#map {
  position: relative;
  /* Changed from absolute */
  height: 100%;
  /* Ensure full height */
  /* Remove width: 100%; to allow sidebar to take its space */
  /* Remove top and bottom properties */
}

/* Add CSS for the sidebar */
#sidebar {
  background-color: #d8ff66;
  z-index: 1000;
  
  /* Ensures sidebar is on top */
  /* height and width adjustments as per your need */
}

#amenitiesList {
  list-style: none;
  padding: 0;
}

#amenitiesList li {
  padding: 8px 15px;
  cursor: pointer;
  border-bottom: 1px solid #ccf05f;
  background-color: #d8ff66;
  color: #0f1312;
  margin-bottom: 0;
  font-size: 1rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  
}

#amenitiesList li:hover {
  background-color: #0f1312;
  color: #d8ff66;
}

#amenitiesList li:last-child {
  border-bottom: none;
}

/* Base styles for sidebar and tab (outside of media query) */
#sidebarTab {
  display: none;
  /* Hide the tab on larger screens by default */
  position: fixed;
  left: 0;
  /* Adjust if needed to make the tab visible */
  top: 50%;
  /* Center vertically */
  width: 30px;
  /* Width of the tab */
  height: 60px;
  /* Height of the tab */
  background-color: #000;
  /* Tab color */
  color: #d3ff52;
  /* Text color */
  text-align: center;
  line-height: 60px;
  /* Center text vertically */
  border-radius: 0 5px 5px 0;
  /* Rounded corners on the right */
  cursor: pointer;
  z-index: 1002;
  /* Above the sidebar */
  transition: left 0.3s ease;
}

/* Styles for smaller screens */
@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    left: -300px; /* Change back to 250 */
    /* Hide sidebar off-screen */
    width: 300px; /* Change back to 250 */
    height: 100%;
    transition: left 0.3s ease;
    z-index: 1001;
  }

  #sidebar.open {
    left: 0;
    /* Show sidebar when .open class is added */
  }

  #sidebarTab.open {
    left: 300px; /* Change back to 250 */
    /* Same as the sidebar width */

    background-color: #d3ff52;
  /* Tab color */
  color: #000;
    transition: left 0.3s ease;
  }

  #sidebarTab {
    display: block;
    /* Show the tab on smaller screens */
  }
}

#imageModal .modal-body img {
  padding-top: 20px;
  padding-bottom: 40px;
  max-width: 80%; /* Adjust the size as needed */
}

.modal-text p {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
}

.modal-text i {
  color: #d3ff52;
}

.modal-text a {
  color:#d8ff66;
  text-decoration: none;
  transition: color 0.5s;
}

.modal-text a:hover {
  color: #fff;
}

#filterInput {
  border-radius: 0 !important;
}

#filterInput:focus {
  box-shadow: none;
  outline: none;
}

.modal-header {
  border-bottom: none;
}

.btn-close {
  filter: invert(100%);
}

.icon-contact p {
  font-size: 30px;
}
.icon-contact i {
  padding: 0 5px 0 5px;
}

.icon-available p {
  font-size: 14px;
}
.icon-available i {
  padding: 0 0 0 5px;
  color: #fff !important;
}


#minibar {
  width: 50px;
  height: 100vh;
  position: fixed;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#minibar a {
  color: #d3ff52;
}

#minibar a:hover {
  color: #fff;
}


.bg-darkgreen {
  background-color: #0f1312;
}

.item-list {
  margin-left: 50px;
}

.checks {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

.leaflet-control-layers {
  background-color: rgba(0, 0, 0, 0.26) !important; 
}

.leaflet-control-layers-expanded {
  background-color: #fff !important;
}


/* Target the checkboxes inside the Leaflet layers control */
.leaflet-control-layers-overlays input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #555;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin-right: 5px;
  vertical-align: middle;
}

/* When checked, give a dark grey background and white check mark */
.leaflet-control-layers-overlays input[type="checkbox"]:checked {
  background-color: #d8ff66;
  border: 1px solid #d8ff66;
  position: relative;
}

.leaflet-control-layers-overlays input[type="checkbox"]:checked::after {
  content: '\2714';
  color: #2e2f32;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 3px;
}





/* Remove default appearance for sidebar checkboxes */
#sidebar input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #555;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 5px;
}

/* Style when the checkbox is checked */
#sidebar input[type="checkbox"]:checked {
  background-color: #d8ff66;
  border: 1px solid #d8ff66;
  position: relative;
}

/* Add a white checkmark when checked */
#sidebar input[type="checkbox"]:checked::after {
  content: '\2714';
  color: #2e2f32;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 3px;
}




/***************************/
/* Bootstrap Accordion CSS */
/* Accordion button background, border, and text */
.accordion-button {
  border-color: none !important;
  /* red border */
}

/* Focus styles for the accordion button (halo) */
.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 255, 102, 0.25) !important;
}

/* When the accordion is expanded, you may want to change its background */
.accordion-button:not(.collapsed) {
  background-color: #fff !important;
  color: #222;

}

/* Accordion body background and border */
.accordion-body {
  border-top: 1px solid #d8ff66 !important;
  /* red border on top */
}


/**********************/
/* Bootstrap Form CSS */
.form-control:focus,
.btn:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(216, 255, 102, 0.25) !important;
  border-color: #d8ff66 !important;
  /* red border */
}

.form-select:focus {
  border-color: #d8ff66 !important;
  box-shadow: 0 0 0 0.2rem rgba(216, 255, 102, 0.25) !important;
  outline: none;
}



.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #d8ff66;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.55);
}

.custom-popup .circle i {
  color: #0f1312;
}





.leaflet-control-location {
      background: white;
      border: 2px solid rgba(0, 0, 0, .2);
      border-radius: 4px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, .65);
      cursor: pointer;
      padding: 6px;
      text-align: center;
      line-height: 1.5;
    }

    .leaflet-control-location i {
      font-size: 18px;
      line-height: 26px;
    }

    .container.checks {
      display: flex;
      flex-direction: column;
    }

    .checkbox-label {
      font-family: 'Roboto Condensed', sans-serif;
      font-weight: 500;
      font-size: 16px;
      margin: 5px 0;
    }

    .paint-it-gray {
      filter: grayscale(100%);
    }








 .leaflet-quick-actions {
  padding: 6px 10px 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.leaflet-quick-actions .leaflet-quick-btn {
  font: 16px 'Roboto Condensed', sans-serif;
  background: #f7f7f7;
  border: 1px solid #ccc;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.leaflet-quick-actions .leaflet-quick-btn:hover {
  background: #eee;
}

/* Hide until expanded */
.leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-quick-actions {
  display: none;
}

/* Remove separator above the buttons */
.leaflet-control-layers .leaflet-control-layers-separator:last-of-type {
  display: none;
}


.leaflet-quick-actions {
  padding: 6px 10px 8px;
  display: flex;
  justify-content: center; /* center horizontally */
  gap: 6px;
  flex-wrap: wrap;
}




#nearSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #444; /* track colour */
  border-radius: 3px;
  outline: none;
}

/* Webkit browsers (Chrome, Edge, Safari) */
#nearSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #0f1312; /* thumb colour */
  border: 2px solid #0f1312; /* outline around thumb */
  border-radius: 50%;
  cursor: pointer;
}

/* Firefox */
#nearSlider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #0f1312;
  border: 2px solid #0f1312;
  border-radius: 50%;
  cursor: pointer;
}

/* Firefox track */
#nearSlider::-moz-range-track {
  background: #444;
  height: 6px;
  border-radius: 3px;
}


.nav-link {
  padding: var(--bs-nav-link-padding-y) 0.75rem !important;
}




/* Cookie cards inside modal */
.cc-card { border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.cc-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cc-muted { color:#6b7280; }

/* Reopen pill (stick to bottom-left) */
.cc-reopen {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1040; /* above map controls but under modals */
  display: none; /* shown once a choice is saved */
}


/* ===== Cookie toggles: full custom look ===== */

/* Target your three switches */
#cc_analytics.form-check-input,
#cc_functional.form-check-input,
#cc_marketing.form-check-input {
  position: relative;
  width: 2.5rem;                 /* a touch wider for nicer knob room */
  height: 1.4rem;
  background-color: #ffffff;     /* OFF track = white */
  border: 2px solid #d8ff00;     /* OFF border = #d8ff00 */
  border-radius: 2rem;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
  appearance: none;              /* neutralize native */
  -webkit-appearance: none;
  background-image: none !important; /* kill Bootstrap SVG knob */
}

/* The knob (we draw it ourselves) */
#cc_analytics.form-check-input::after,
#cc_functional.form-check-input::after,
#cc_marketing.form-check-input::after {
  content: "";
  position: absolute;
  top: 0.09rem;
  left: 0.15rem;                 /* OFF position */
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #d8ff00;     /* OFF knob = #d8ff00 */
  transition: left .2s, background-color .2s, box-shadow .2s;
  box-shadow: 0 0 0 0 rgba(0,0,0,0); /* no extra shadow */
}

/* Focus halo (OFF and ON): #d8ff00 haze */
#cc_analytics.form-check-input:focus,
#cc_functional.form-check-input:focus,
#cc_marketing.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(216, 255, 0, 0.35) !important;
}

/* ===== ON state ===== */
#cc_analytics.form-check-input:checked,
#cc_functional.form-check-input:checked,
#cc_marketing.form-check-input:checked {
  background-color: #2e2f32;     /* ON track */
  border-color: #2e2f32;         /* ON border */
}

/* Move knob to the right when ON, and make the knob white */
#cc_analytics.form-check-input:checked::after,
#cc_functional.form-check-input:checked::after,
#cc_marketing.form-check-input:checked::after {
  left: calc(100% - 1.15rem);    /* right side */
  background-color: #ffffff;     /* ON knob = white for contrast */
}

/* Remove Bootstrap’s blue active state tint */
#cc_analytics.form-check-input:active,
#cc_functional.form-check-input:active,
#cc_marketing.form-check-input:active {
  filter: none;
}