main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
    /* We remove the fixed height of the body to allow the map to be displayed correctly. */
    height: calc(100vh - 74px);
}

#map-container {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

#map {
    width: 100%;
    height: 100%;
}
.leaflet-popup-content-wrapper {
    background-color: var(--glass-bg) !important;
    color: var(--light-text) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.leaflet-popup-content{
    margin: 13px 19px;
    line-height: 1.4;
}
.leaflet-popup-tip{
    background-color: var(--secondary-color) !important;
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out{
    background-color: var(--secondary-color) !important;
    color: var(--light-text) !important;
    border-color: var(--glass-border) !important;
}
.leaflet-control-zoom-in:hover, .leaflet-control-zoom-out:hover{
    background-color: var(--accent-color) !important;
    color: var(--dark-text) !important;
}
.leaflet-control-attribution{
    background-color: rgba(74, 108, 74, 0.8) !important;
    color: var(--light-text) !important;
}
.leaflet-control-attribution a{
    color: var(--accent-color) !important;
}