section.djh-radius-search {

    padding: 70px 0 70px 0;

    .tom-select,
    .button {
        border: 1px solid var(--selected);
    }

    .tom-select {
        &.ts-wrapper {
            height: auto;
        }
    }

    fieldset.filter {
        display: flex;
        flex-direction: column;
        gap: 25px;

        .filter-wrapper {
            display: flex;
            column-gap: 16px;

            color: black;

            form {
                display: flex;
                column-gap: 16px;

                >* {
                    flex: 1;
                }
            }

            >* {
                flex: 1;
            }

            &:nth-child(2) {
                >* {
                    margin-top: auto;
                }
            }


            .button {
                border: 1px solid var(--selected);
            }

            button {
                background-color: var(--djh-pink);
                color: white;

                &:hover {
                    /* color: var(--djh-pink); */
                    /* background-color: var(--selected); */
                    color: white;
                    background-color: black;
                }
            }
        }

        .notification {

            display: none;

            p {
                margin-bottom: 0;
            }

            &.info {
                display: block;
                padding: 20px;
                border-radius: 8px;
                border: 1px solid var(--selected);
                color: var(--djh-pink);
            }

            &.error {
                display: block;
                padding: 20px;
                border-radius: 8px;
                border: 1px solid var(--selected);
                color: red;
            }
        }

    }

    #map {

        border-radius: 8px;

        min-height: 50vh;
        width: 100%;

        display: none;

        &.leaflet-container {
            display: block;
            margin-top: 25px;
        }

        &:not(.leaflet-container) {
            display: none;
        }

    }

    .results {

        &:has(.hostel) {
            margin-top: 25px;
        }

        display: grid;
        grid-template-columns: repeat(2, minmax(300px, 1fr));
        grid-gap: 16px;

        .hostel {
            border-radius: 8px;

            background-color: var(--djh-pink);
            color: white;

            display: flex;
            column-gap: 16px;
            flex-wrap: wrap;

            padding: 16px;

            .left {
                width: calc(40% - 8px);
            }

            .right {
                width: calc(60% - 8px);
                display: flex;
                flex-direction: column;
            }

            /* Title */
            h3 {
                font-weight: bold;
                line-height: 1.2;
                margin-bottom: 4px;
            }

            /* Distance */
            h4 {
                font-weight: 100;
                line-height: 1.2;
                margin-bottom: 4px;
            }

            img {
                aspect-ratio: 3/2;
                border-radius: 6px;

                margin-top: auto;

                height: auto;
                width: 100%;
            }

            a.offer.button {
                display: block;
                width: fit-content;
                text-decoration: none;

                margin-top: auto;
            }

            .distance {
                margin-bottom: 8px;
            }
        }
    }
}

@media (max-width: 1199.98px) {
    section.djh-radius-search {
        .results {
            .hostel {
                img {
                    height: 100%;
                    width: auto;
                    object-fit: cover;
                }
            }
        }
    }
}

@media (max-width: 991.98px) {
    section.djh-radius-search {
        .results {
            .hostel {
                flex-direction: column;
                .left,
                .right {
                    width: 100%;
                }

                .left {
                    margin-bottom: 16px;
                }

                .right {
                    flex-direction: row;
                }

                a.offer.button {
                    margin-left: auto;
                }

                img {
                    height: auto;
                    width: 100%;
                    object-fit: unset;
                }
            }
        }
    }
}

@media (max-width: 767.98px) {
    section.djh-radius-search {
        fieldset.filter {
            gap: 16px;

            .filter-wrapper {
                flex-direction: column;
                gap: 16px;
            }
        }

        .results {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}

@media (max-width: 575.98px) {
    section.djh-radius-search {
        .results {
            .hostel {
                .right {
                    flex-direction: column;
                }

                a.offer.button {
                    margin-left: initial;
                }
            }
        }
    }
}