#map {width:100%; height:100vh; touch-action: manipulation;}
html, body {font-family:work sans !important; overscroll-behavior: none;  -webkit-overflow-scrolling: touch;}
h1, h2, h3, h4, h5, h6 {font-family:work sans !important;}
#search-sidebar {transition:all .2s; max-height:30vh;  width:100%; position:fixed; overflow-y:auto; box-sizing:border-box; padding:35px; background:linear-gradient(140deg, #04251bf2, #024a54f5);  right:0; bottom:-40vh; z-index:1000;}
#search-sidebar.active {bottom:0;}

#loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(34, 78, 63);
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    z-index: 99999999999999;
  }

  .spinner {
    border: 8px solid rgb(34, 78, 63);
    border-top: 8px solid white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

#location-search {margin:0;}
#location-search-container{position:relative; width:100%;}
#location-search-container input[type=text]{display:block; flex:1; margin-right:20px; padding:12px; border:none; border-radius:7px;}
#search-results {color:white; background:linear-gradient(140deg, #253a36, #061b24); z-index:1100; list-style:none; padding:5px; margin:10px 0 0; width:100%; border-radius:5px; display:none;}
#search-results li {display:flex; gap:15px; align-items:Center; padding:8px 5px; border-bottom:1px solid #344342; font-size:14px;}
.fixed-circle {width:15px;  height:15px; background-color:rgba(0, 123, 255, 0.9); border:2px solid #53a6ff; border-radius:50%; position:absolute; transform:translate(-50%, -50%); pointer-events:none;}

#google-bar {display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:space-between}
#google-bar i {color:white; margin-left:10px;}
#google-bar .google-query-type {display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:left}
#google-bar label {position: relative; display: inline-block; width: 40px; height: 21px;}
.google-header{display:flex !important; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:space-between}

.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color:#ba8a8a; border-radius: 30px; transition: 0.4s;}
.slider-knob {position: absolute; content: ''; height: 16px; width: 16px; background-color: #14370b; border-radius: 50%; top: 2px; left: 2px; transition: 0.4s;}

.search-and-filter {display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:space-between}

.hudbutton {position:fixed; display:block; border: none; border-radius: 50%; width: 30px !important; height: 30px !important; background:white; line-height: 30px; text-align: center; z-index: 1111111111; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); }
.hudbutton i{color:black; width:30px; left:0; top:0; position:Absolute; height:30px; line-height:30px; text-align:Center;}
.hudbutton i:before{width: 30px; line-height: 30px; height: 30px; display: block; position: Absolute; left: 0; top: 0;}

.locate-button { top: 10px; right: 10px; }
#orientationButton { top: 10px; right: 55px;}
#searchButton { top: 10px; right: 100px;}
#nearbyfoodButton {top: 50px; right: 10px;}
#nearbyparksButton {top: 90px; right: 10px;}
#nearbymuseumsButton {top: 130px; right: 10px;}
#nearbytransportButton {top: 170px; right: 10px;}

.leaflet-right .leaflet-routing-container.leaflet-routing-container-hide {display:none !important}

#queried-locations {color:white;}
#queried-locations h3 span{color:yellow;}
#queried-locations ul {margin:0 !important; padding:0 !important}
#queried-locations ul li {background:white; color:black; font-weight:600; font-size:13px; display:flex; flex-direction:row; margin-bottom:6px; align-items:stretch; border-radius:7px; cursor:pointer;}
#queried-locations li img {max-height:300px; aspect-ratio:16/9; object-fit:cover; border-top-left-radius:7px; border-bottom-left-radius:7px; width:25%; display:block;}
#queried-locations li div {padding:15px; width:70%;}
#queried-locations li div a {color:black; font-weight:500;}

.popup-info-buttons {display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:space-between}

.type-and-save .popup-button.google-button{background: linear-gradient(135deg, 
    #4285F4 25%,  /* Google Blue */
    #EA4335 50%,  /* Google Red */
    #FBBC05 75%,  /* Google Yellow */
    #34A853);     /* Google Green */}

.leaflet-popup-content-wrapper {padding:0;}
.leaflet-popup-content {margin:0;}
.leaflet-popup-content img {display:block; width:100%; height:auto; border-top-left-radius:5px; border-top-right-radius:5px;}
.leaflet-popup-content .popup-info {font-family:work sans; color:White; padding: 7px; position: absolute; z-index: 111111; bottom: 0; width: 100%;}
.leaflet-popup-content .popup-info b{font-weight:400; font-size:16px; display:inline-block; padding:3px; background:black; margin:0 0 2px; }
.leaflet-popup-content .popup-info small{padding:3px; background:#a12d2d;}
.leaflet-container a.leaflet-popup-close-button {top:-10px; right:-10px; background:white; border-radius:50px;}
.directions {width:33.3%; display:block; text-align:center; color:white !important; color:white; padding:12px 12px 11px;}
.directions.start-routing {background:#a12d2d;}
.directions.google-button{background:#1f7d3d;}

.popup-info-buttons {display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:space-between}
.popup-image-container {position:Relative;}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {background:#111;}

.results-directions{width:100%; background:#111;}
.distance-and-rating {margin:0 0 5px; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:space-between}

.custom-icon { display: flex; align-items: center; justify-content: center; font-size: 16px; color: #1f7564; background: white; border: 2px solid #1f7564; border-radius: 50%; width: 30px; height: 30px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
.country-toggle, .city-toggle {cursor:pointer; transition:all .2s;}
.country-toggle:hover,  .city-toggle:hover {color:yellow}

.city-toggle{font-size:13px;}

.type-and-save {display:flex; width:100%; flex-direction:column; align-items:stretch; flex-wrap:wrap; gap:5px}
.type-and-save .popup-button {width:33.3%; text-align:Center; background:olive; color:white; padding:13px 0; border:none; font-family:work sans;}
.type-and-save .popup-button i{display:block; height:auto; display:block;}
.type-and-save div {display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:space-between}

#saveLocationForm input[type=text]{font-family:work sans; width:100%; margin:0 0 3px; padding:8px; border:1px solid #ccc; border-radius:7px; font-size:16px;}
#saveLocationForm select{font-family:work sans; width:100%; margin:0 0 3px; padding:8px; border:1px solid #ccc; border-radius:7px; font-size:16px;}
#saveLocationForm button{font-family:work sans; font-weight:500; border:none !important; width:100%; margin:6px 0 3px; padding:9px 8px 8px; font-size:12px; text-transform:uppercase; color:white; letter-spacing:1px; background:olive; border:1px solid #ccc; border-radius:100px;}
#fetchNearbyPlaces {font-family:work sans; font-weight:500; border:none !important; width:100%; margin:3px 0 3px; padding:9px 8px 8px; font-size:12px; text-transform:uppercase; color:white; letter-spacing:1px; background:#111; border:1px solid #ccc; border-radius:100px;}

#nearbyPlaces li, #nearbyPlaces li{list-style:none;}
#nearbyPlaces li{background:#efefef; padding:12px; margin:0 0 3px;}
#nearbyPlaces li button{background:olive; text-transform:uppercase; letter-spacing:1px; color:white; font-size:12px; padding:3px 15px; border-radius:100px; border:none; color:white;}


#map {
    height: 100vh;
}
@keyframes glow {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

.compass-icon { width: 20px; height: 20px; background: rgba(0, 0, 255, 1); /* Solid blue circle */ border-radius: 50%; position: relative;}


.compass-icon::before {content: ""; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 255, 0.5); /* Glow color */ position: absolute; top: -5px; left: -5px; animation: glow 1.5s infinite; z-index: -1;}
.compass-icon::after { content: ""; width: 10px; background:url(https://cdn-icons-png.flaticon.com/128/4655/4655143.png) center center / contain; left:5px; top:-9px; height: 10px; position:absolute;  z-index:1}

.compass-container { position: relative; width: 40px; height: 40px;}


@media only screen and (max-width: 700px) {
    #search-sidebar {padding:15px;}
    #queried-locations h3 {font-size:13px;}
    #queried-locations li div {padding:7px;}
}