/**
 * Show relations on the map (Google Maps)
 *
 * There is a bit of javascript which scrolls to the Google Maps container when
 * a result is clicked. This to make sure it works logically on mobile devices
 */

#googlemapscontainer {
    position: relative;
    border-radius: var(--borderRadiusSmall);
}

/** Fix map controls */
#googlemapscontainer img {
    max-width: none !important;
}

#informationcontainer,
#googlemaps,
#routebox {
    float: none !important;
    width: 100% !important;
    height: auto !important;
}

/**
 * Information container
 */

#informationcontainer {
    margin-bottom: var(--marginSmall);
}

#informationcontainer .pbuic-tablinks {
    background-color: transparent;
}

#tablinks_informationwindow_search {
    display: inline-block !important;
}

/**
 * tablinks
 */

.googleMapsContainer .pbuic-tablinks a {
    text-decoration: none;
    border-color: transparent;
    color: inherit !important;
}

.googleMapsContainer .pbuic-tablinks .tl-item-is-active a {
    border-color: inherit !important;
}

/**
 * Search
 */

#search_result_box {
    width: 100% !important;
    height: auto !important;
}

#searchbox,
.searchresult {
    width: 100% !important;
}

#searchform {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none;
    border-radius: 0;

    & legend {
        display: none;
    }

    & fieldset {
        margin-bottom: 0;
    }

    & select,
    & .proFormText,
    & input[type='text'] {
        margin: 0;
        padding-block: var(--marginExtraSmall);
    }

    & div.submit {
        margin-top: var(--marginExtraSmall);
    }

    & button {
        margin-right: 0;
    }

    & .submit {
        text-align: left !important;
        margin-bottom: 0;
    }
}

/** Results table */

.searchResultBox > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

#googlemapscontainer .searchresult {
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: var(--preTitleSize);

    & thead,
    & tfoot {
        display: none;
    }

    & tr.clickable {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--baseLight350);
        cursor: pointer;
    }

    & tr.clickable:last-child {
        border-bottom: 0;
    }

    & tr.clickable:has(.distance) > td:first-child {
        flex: 0 0 calc(100% - 90px);
    }

    & td,
    & th {
        padding: var(--marginSmall) 0;
        text-align: left;
    }

    & tr:first-child td {
        padding-top: 0;
    }

    & td.distance {
        flex: 0 0 90px;
        text-align: right;
        font-size: var(--labelSize);
        vertical-align: top;
    }

    & a[target] {
        word-break: break-all;
    }
}

#routebox {
    font-size: var(--preTitleSize);
}

.routedescription {
    width: 100%;
}

/**
 * Google maps
 */

#googlemaps {
    min-height: 500px;
    max-height: 90vh;
    border-radius: var(--borderRadiusSmall);
}

@media (min-width: 768px) {
    #informationcontainer {
        margin-bottom: 0;
    }

    #googlemapscontainer {
        display: grid;
        grid-template-columns: minmax(260px, 1fr) 3fr;
        gap: var(--marginLarge);
    }

    #informationcontainer,
    #routebox {
        position: relative;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        bottom: auto;
        border-radius: var(--borderRadiusSmall);
        z-index: 1;
    }

    #searchform {
        margin-bottom: 0;
    }
}

/**
 * Google info window (popup)
 */

.google-infowindow {
    line-height: 1.5;
    max-width: 350px;

    & a {
        word-break: break-word;
    }

    & [onclick*='showDirections'] {
        margin: 1em 0;
        display: block;
    }
}

/**
 * snippet style filter overlapping the map
 */

.filterOverlappingMap {
    & .informationContainer {
        margin-bottom: var(--marginMedium);
    }

    & #googlemaps {
        width: 100% !important;
        height: 850px !important;
    }

    @media (min-width: 768px) {
        #googlemapscontainer {
            display: block;
        }

        #informationcontainer,
        #routebox {
            position: absolute;
            inset: var(--marginSmallMedium);
            bottom: auto;
            overflow: auto;
            max-height: 800px;
            max-width: clamp(260px, 35vw, 400px);
            padding: var(--marginSmall);
            box-shadow: var(--boxShadow);
            background-color: var(--baseLight100);
        }
    }
}