﻿.map-short-term-listing {
    position: relative;
}

    .map-short-term-listing .image-container .coupon-applied {
        position: absolute;
        top: 40px;
        left: -40px;
        z-index: 5;
        background-color: var(--accent-color);
        color: #fff;
        transform: rotate(-45deg);
        width: 186px;
        display: flex;
        justify-content: center;
        font-weight: 600;
    }

    .map-short-term-listing .image-container {
        position: relative;
    }

        .map-short-term-listing .image-container img {
            width: 100%;
            object-fit: cover;
            aspect-ratio: 600/400;
            display: flex;
        }

        .map-short-term-listing .image-container .images li {
            width: 400px;
            margin-right: 5px;
            height: 270px;
        }

        .map-short-term-listing .image-container .image-navigation {
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            padding: 0 8px;
            opacity: 0;
            transition: opacity ease 0.3s;
        }

        .map-short-term-listing .image-container:hover .image-navigation {
            opacity: 1;
        }

        .map-short-term-listing .image-container .image-navigation-dots {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            /* display: none; */
            justify-content: center;
            margin: var(--element-margin);
        }

        .map-short-term-listing .image-container .image-navigation button:first-child {
            float: left;
        }

        .map-short-term-listing .image-container .image-navigation button:last-child {
            float: right;
        }

        .map-short-term-listing .image-container .image-navigation button {
            border: none;
            width: 32px;
            height: 32px;
            padding: 4px;
            background-color: #fff;
            border-radius: 16px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            box-shadow: var(--overlay-shadow);
        }

            .map-short-term-listing .image-container .image-navigation button svg {
                width: 12px;
                height: 12px;
                stroke-width: 5px;
                stroke: #9A9897;
            }

    .map-short-term-listing .text-container {
        padding: var(--container-margin);
    }


        .map-short-term-listing .text-container .listing-title {
            font-weight: 400;
            font-size: 120%;
            margin-bottom: var(--element-margin);
            display: flex;
        }

            .map-short-term-listing .text-container .listing-title a {
                text-decoration: none;
                color: var(--accent-color);
            }

        .map-short-term-listing .text-container .rating-container {
            display: flex;
            margin-left: var(--element-margin);
        }

    .map-short-term-listing .text-container .listing-price {
        color: var(--accent-color);
        font-weight: 500;
    }

        .map-short-term-listing .text-container .listing-price .from-price {
            position: relative;
        }

            .map-short-term-listing .text-container .listing-price .from-price:before {
                border-top: 2px solid var(--accent-color);
                content: "";
                left: -3px;
                position: absolute;
                right: -3px;
                top: 42%;
                transform: rotate(-10deg);
            }

.map-point-of-interest .image-container {
    position: relative;
    width: 200px;
    padding-top: 50%;
}


    .map-point-of-interest .image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.map-point-of-interest .text-container {
    padding: var(--element-margin);
    text-align: center;
}

.short-term-listing {
    --image-slider-width: 400px;
    --image-slider-height: 270px;
    position: relative;
    display: flex;
}

    .short-term-listing .image-container {
        width: var(--image-slider-width);
        height: var(--image-slider-height);
        position: relative;
        overflow: hidden;
    }

        .short-term-listing .image-container .coupon-applied {
            position: absolute;
            top: 40px;
            left: -40px;
            z-index: 5;
            background-color: var(--accent-color);
            color: #fff;
            transform: rotate(-45deg);
            width: 186px;
            display: flex;
            justify-content: center;
            font-weight: 600;
        }

        .short-term-listing .image-container .images {
            height: var(--image-slider-height);
        }

        .short-term-listing .image-container .glide__track {
            overflow: hidden;
            border-radius: var(--container-border-radius);
        }

        .short-term-listing .image-container img {
            height: 100%;
            object-fit: cover;
            width: 100%;
            display: block;
            aspect-ratio: 600/400;
        }

        .short-term-listing .image-container .image-navigation {
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity ease 0.3s;
            padding: 0 var(--container-margin);
        }

        .short-term-listing .image-container .image-navigation-dots {
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
            padding: var(--element-margin);
            box-sizing: border-box;
            display: flex;
            justify-content: center;
        }


        .short-term-listing .image-container .image-navigation button {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .short-term-listing .image-container .listing-title {
            display: none;
        }

        .short-term-listing .image-container .image-navigation button:first-child {
            float: left;
        }

        .short-term-listing .image-container .image-navigation button:last-child {
            float: right;
        }

        .short-term-listing .image-container .image-navigation button {
            border: none;
            width: 28px;
            height: 28px;
            padding: 4px;
            background-color: #fff;
            border-radius: 16px;
            cursor: pointer;
        }


            .short-term-listing .image-container .image-navigation button svg {
                width: 12px;
                height: 12px;
                stroke-width: 5px;
                stroke: #9A9897;
                margin: 2px;
            }

        .short-term-listing .image-container:hover .image-navigation {
            opacity: 1;
        }

    .short-term-listing .details-container {
        flex: 1;
        padding-left: 16px;
    }

    .short-term-listing.compact {
        overflow: hidden;
    }

        .short-term-listing.compact .image-container .image-navigation {
            display: none;
        }

        .short-term-listing.compact .image-container .listing-title .title {
            display: inline;
        }

        .short-term-listing.compact .image-container .listing-title {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.3);
            transition: background-color ease 0.3s;
            display: flex;
            justify-content: center; /*! align-content: center; */
            align-items: center;
            color: #fff;
            font-weight: 900;
        }

        .short-term-listing.compact .details-container .listing-title {
            display: none;
        }

        .short-term-listing.compact .details-container .listing-price {
            display: none;
        }

        .short-term-listing.compact .listing-title:hover {
            background-color: rgba(0,0,0,0);
        }

    .short-term-listing .details-container .listing-price {
        margin-top: var(--element-margin);
        color: var(--accent-color);
        font-weight: 500;
    }

        .short-term-listing .details-container .listing-price .from-price {
            position: relative;
        }

            .short-term-listing .details-container .listing-price .from-price:before {
                border-top: 2px solid var(--accent-color);
                content: "";
                left: -3px;
                position: absolute;
                right: -3px;
                top: 42%;
                transform: rotate(-12deg);
            }


    .short-term-listing .details-container .listing-title {
        font-weight: 400;
        font-size: 120%;
        margin-top: var(--container-margin);
        color: var(--accent-color);
        display: flex;
    }

.short-term-listing .rating-container {
    display: flex;
    margin-left: var(--element-margin);
}

        .short-term-listing .details-container .listing-title a {
            text-decoration: none;
            color: inherit;
        }

    .short-term-listing .details-container .link-container {
        margin-top: 8px;
    }


    .short-term-listing.compact .image-container .listing-title {
        margin-top: 0;
        border-radius: var(--container-border-radius);
        z-index: 2;
    }

    .short-term-listing.compact .details-container {
        margin-top: 0;
    }

        .short-term-listing.compact .details-container .listing-title a {
            display: block;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .short-term-listing.compact .details-container .listing-title:hover {
        }

    .short-term-listing .details-container .link-container .button {
        background-color: #f00;
        color: #fff;
        padding: 8px;
        border-radius: 4px;
        text-decoration: none;
        display: inline-block;
    }


@media screen and (max-width:1000px) {
    .short-term-listing {
        --image-slider-width: 270px;
    }
}


@media screen and (max-width:650px) {
    .short-term-listing {
        --image-slider-width: 100%;
        --image-slider-height: auto;
        flex-direction: column;
    }

        .short-term-listing .details-container {
            margin-top: var(--container-margin);
            padding-left: 0;
        }
}

@media screen and (max-width:600px) {
    .short-term-listing .image-container {
        border-radius: 0;
    }
}



.short-term-listing.compact {
    flex-direction: column;
}


    .short-term-listing.compact .listing-description {
        display: none;
    }

    .short-term-listing.compact .tag-list {
        position: absolute;
        top: var(--element-margin);
        left: var(--element-margin);
        z-index: 2;
    }

    .short-term-listing.compact .image-container {
        width: 100%;
        height: auto;
    }

        .short-term-listing.compact .image-container .images {
            height: auto;
        }
