#villa-preview-container {
    --padding-inline: 2.5;
    padding-block: 2rem;
    opacity: 0;
    container-name: villa-preview;
    container-type: inline-size;
    top: 0;
    height: 100vh;
    display: none;
    inline-size: var(--list-width);
    background: hsla(0, 0%, 100%, 0.95);
    place-items: center;
    position: fixed;
    z-index: 999;
    padding-inline: calc(var(--padding-inline) * 1%);
    overflow-y: auto;
    

    @media screen and (min-width: 993px) {
        position: absolute;
        z-index: 20;
        height: calc(100vh - var(--search-row-height) - var(--search-distance-from-top, var(--search-row-offset)));
    }
    @media screen and (min-width: 993px) {
        .is-bellow-search-top & {
            position: fixed;
            top: var(--search-row-height);
        }

        .is-bellow-search-top.end-of-list-visible &{
            position: absolute;
            bottom: 0;
            top: unset;
        }
    }
    .preview-visible & {
        display: grid;
        opacity: 1;
        @starting-style {
            opacity: 0;
        }
    }
    .result__container {
        width: min(calc(100cqi - (var(--padding-inline) * 2cqi)), 50rem);
        box-shadow: 1rem 1rem 4rem hsl(0 0% 0% / 0.2);
        position: relative;
        animation: none;
        opacity: 1;
        transform: translateY(0);
        transition: all 0.35s ease-out;
        
        &[hidden] {
            display: none;
        }

        @starting-style {
            transform: translateY(5rem);
            opacity: 0;
        }
    }

    .instant-badge {
        display: inline-block;
        margin: 0 -0.5rem 1.25rem;
        align-self: start;
    }

    .preview__close-btn {
        line-height: 1;
        color: white;
        position: absolute;
        inset-block-start: 0.5rem;
        inset-inline-end: 0.5rem;
        z-index: 50;
        height: fit-content;
        background-color: transparent;
        border: none;
        font-size: 2.5rem;
        padding: 0;
        filter:drop-shadow(0 0 0.5rem hsl(0 0% 0% / 0.2));
    }

    .preview-blog-post__photo {
		width:100%;
		height:auto;
	}

	.preview-blog-post__text{
        padding:1.5rem max(18px, 6%) 1.5rem max(18px, 6%);
    }

    .preview-blog-post__title{
        font-size:2rem;
        font-weight:700;
        font-family: var(--font-display);
        color: var(--blue-dark);
    }

}

.leaflet-top.leaflet-left {

    @media screen and (width < 23.4375rem) {
        width: 100%;
        display: flex;
        justify-content: center;
     }

}

.leaflet-top {

    .results__ui {
        --base-size: 1.4rem;
        --base-padding: 0.5em;
        --base-border-radius: 2em;
        --content-block-padding: 0.5em;
        background-color: white;
        inset-block-start: 1rem;
        inset-inline-start: 1rem;
        border-radius: var(--base-border-radius);
        display: flex;
        gap: 0.25em;
        align-items: stretch;
        font-size: var(--base-size);
        padding: var(--base-padding);
        border: 0.2rem solid #1d5f92;
        filter: drop-shadow(0 0 1rem hsl(0 0% 0% / 0.1));

        @media screen and (width < 23.4375rem) {
            margin: 0 !important;
            justify-content: center;
            inset-inline: 0;
         }
    }

    .results__count {
        padding-inline: 1em;
        padding-block: var(--content-block-padding);
        display: flex;
        align-items: center;
        
        span {
            display: inline-block;
        }
    } 

    .map-more-villas-btn {
        font-size: var(--base-size);
        background-color: #1d5f92;
        appearance: none;
        border: none;
        color: white;
        padding: var(--content-block-padding) 2em;
        border-radius: calc(var(--base-border-radius) - var(--base-padding));
        line-height: 1;
        font-family: Lato,sans-serif;

    }


}

.leaflet-top.leaflet-right {
    margin-block-start:1rem;

    .leaflet-control-layers {
        font-size: 1.4rem;

        border: 0.2rem solid #1d5f92;
    }
     
    .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
        border-radius: 50%;
        filter: drop-shadow(0 0 1rem hsl(0 0% 0% / 0.1));

    }

    @media screen and (width < 23.4375rem) {
       display: none;
    }
}

.poi-icon svg {
    width: 2rem;
    aspect-ratio: 1;
    fill: #1d5f92;
}

.map-spinner {
    font-size: 1rem;
    width: 5em;
    place-content: center;
    text-align: center;
    color: #2e5f8e;
}

#more-villas-btn {
    position: relative;

    &:has(.map-spinner) {
        pointer-events: none;
        background: transparent;
        border-color: transparent;
        > *:not(.map-spinner) {
            opacity: 0;
        }
    }
 .map-spinner {
    position: absolute;
    inset-inline: 50%;
    transform: translateX(-50%);
    font-size: 2em;
 }
}

.result__container {
    animation: fade-in 0.35s ease-out;
    animation-delay: 0.4s;
    animation-fill-mode: backwards;
}

[class^="more-link__wrap"].more-link__wrap {
    border: none;
}