#map {
    width: 100%;
    height: 100dvh; /* ✅ iOS Safari 16+ correct dynamic height */
}

/* Always set the map height explicitly to define the size of the div element that contains the map. */
gmp-map {
    height: 100%;
}

#grave-info-modal .modal-dialog {
    position: fixed;
    margin: 0;
    height: 100%;
    right: 0;
}

#grave-info-modal .modal-content {
    height: 100%;
    background-color: rgba(247, 247, 247, 0.9);
    color: #2D3436 !important;
}

#grave-info-modal .modal-content h5, #grave-info-modal .modal-content .h5 {
    font-size: 22px !important;
}

#grave-info-modal .modal-body {
    overflow-y: auto;
}

.grave-details {
    color: #2D3436;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}

#contact-modal .modal-content {
    background-color: rgba(247, 247, 247);
    color: #2D3436 !important;
}

.ui-widget-content {
    z-index: 10001;
}

.ui-menu-item-wrapper:hover {
    background-color: rgba(247, 247, 247) !important;
    color: #2D3436 !important;
    border: 1px solid #2D3436;
}

.ui-autocomplete {
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Only apply 500px on non-mobile devices */
@media (min-width: 768px) {
    .grave-info-modal {
        width: 500px;
    }
}

.map-legend {
    /* container is only the button footprint */
    position: relative;
    display: inline-block;

    margin: 10px 10px 38px;

    z-index: 5;
}

/* Button (always stays in same place) */
.map-legend .legend-toggle {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255);

    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.map-legend:not(.open) .legend-content {
    display: none;
}

.map-legend .legend-content {
    position: absolute;
    left: 0;
    bottom: calc(36px + 8px);

    background: rgba(247, 247, 247, 0.85);
    border: 1px solid #ccc;
    border-radius: .25rem;
    padding: 10px;

    font-size: 12px;
    line-height: 14px;

    box-shadow: 0 2px 6px rgba(0,0,0,.15);

    width: max-content;
    max-width: 85vw;

    display: none;
}

.map-legend.open .legend-content {
    display: block;
}

.map-legend .row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.map-legend .swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.25);
}