#map {
     height: 400px;
     border: 1px dashed var(--accent-color);
 }

 .leaflet-control-attribution {
     display: none !important;
 }

 #pac-input {
     background-color: #caddc3;
     /* font-family: Roboto;
     font-size: 15px;
     font-weight: 300;
     margin-top: 10px;
     padding: 0 11px;
     width: 400px;
     text-overflow: ellipsis;
     z-index: 5;
     position: absolute; */
 }

 .search-results {
     position: absolute;
     z-index: 1000;
     background: white;
     width: calc(100% - 4px);
     max-height: 250px;
     overflow-y: auto;
     border: 1px solid #ddd;
     border-top: none;
     border-radius: 0 0 4px 4px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     margin-top: -3px;
 }

 .search-result-item {
     padding: 8px 12px;
     cursor: pointer;
     border-bottom: 1px solid #eee;
     transition: background-color 0.2s;
 }

 .search-result-item:hover {
     background-color: #f8f9fa !important;
 }

 .search-result-item .text-muted {
     font-size: 0.85em;
     display: block;
     margin-top: 2px;
 }

 .search-results div:last-child {
     border-bottom: none;
 }

 /* Highlight the first result when pressing Enter */
 .search-result-item.highlighted {
     background-color: #e9ecef;
 }

 .blur-wrapper {
     position: relative;
     display: inline-block;
     height: 350px;
     overflow: hidden;
 }

 .blurMap {
     height: 100%;
     width: 100%;
     filter: blur(8px);
     /* Initial heavy blur */
     object-fit: cover;
     /* Keep the image proportionate */
     transition: transform 0.3s ease, filter 0.3s ease;
 }

 .blur-wrapper:hover .blurMap {
     filter: blur(4px);
     /* Slightly reduce blur on hover, but still keep it blurred */
     transform: scale(1.08);
     /* Slight zoom effect */
 }

 .blur-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: rgba(0, 0, 0, 0.5);
     /* Dark overlay for premium feel */
     color: white;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .blur-wrapper:hover .blur-overlay {
     opacity: 1;
 }

 .blur-text {
     font-size: 1.5rem;
     font-weight: bold;
     text-align: center;
     margin-bottom: 10px;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
     /* Glow effect for premium look */
 }

 .upgrade-btn {
     background-color: #ffc107;
     /* Premium gold color */
     color: black;
     border: none;
     padding: 10px 20px;
     font-size: 1rem;
     font-weight: bold;
     cursor: pointer;
     border-radius: 5px;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
     /* Add shadow for a 3D effect */
     transition: background-color 0.3s ease, transform 0.2s ease;
 }

 .upgrade-btn:hover {
     background-color: #ffcd39;
     /* Darker gold on hover */
     transform: scale(1.05);
     /* Slight enlarge on hover */
 }

 .blurText {
     filter: blur(3px);
     /* Adjust the value to your liking */
     transition: filter 0.3s ease-in-out;
     /* Smooth transition */
     cursor: pointer;
 }

 /* Unblur on hover (optional, remove if you want to use a click event) */
 .blurText:hover {
     filter: blur(3px);
 }