/* Add any custom styles for your map here */
#map {
    height: 75vh;
    position: relative;
}

/* Additional styles for the modal */
#tileListModal {
    /* Your modal styles */
}


.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: var(--bg-surface);
    border-radius: var(--radius-s);
}

.leaflet-popup-content {
    width: 100%;
    max-width:40rem;
}

.leaflet-popup-content .card p {
    margin-top: 0;
    margin-bottom:0;
}

.leaflet-popup-content .card  {
    min-width:300px;
}

.leaflet-popup-content-wrapper a.btn.primary {
    color:var(--dark);
}

/* Popup Styles */
#filters-popup {
    display: none;
    position: fixed;
    top:  var(--space-s);
    left: var(--space-s);
    bottom: var(--space-s);
    width: 25%;
    height: 95dvh;
    background: var(--bg-surface);
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: scale(0.9);
    border-radius: var(--radius-s);
}

#filters-popup.show {
    opacity: 1;
    transform: scale(1);
}

#filters-popup.hide {
    opacity: 0;
    transform: scale(0.9);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHRpdGxlPkNsb3NlPC90aXRsZT48cGF0aCBkPSJNMTguMzcgMi4xN2ExIDEgMCAwIDAgLTEuNDIgMEwxMCA5LjEybC03Ljg4LTcuOTRhMSAxIDAgMSAwLTEuNDIgMS40MUw4LjU4IDEwbC03Ljg4IDcuOTRhMSAxIDAgMCAwIDEuNDIgMS40MUwxMCAxMC44OGw3Ljg4IDcuOTRhMSAxIDAgMCAwIDEuNDItMS40MUwxMS40MiAxMGw3Ljg4LTcuOTRhMSAxIDAgMCAwIDAtMS40MnoiLz48L3N2Zz4=') no-repeat center center;
    background-size: contain;
    background-color: var(--bg-surface-l-2);
    cursor: pointer;
    color: white;
}

.map-buttons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.map-buttons .btn {
    background: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.map-buttons .btn:hover {
    background: #f0f0f0;
}

.locate-me-btn.active {
    background: #007bff;
    color: white;
}