.dd-boligcard,
.page .dd-boligcard {
    all:unset;
    display: inline-block;
    position: relative;
    border-radius: var(--dd-element-radius, 0);
    cursor: pointer;
}

.page .dd-boligcard {
    background: unset;
}

.page .dd-boligcard:hover {
    background: unset;
}

.page .dd-boligcard:focus,
.page .dd-boligcard:focus-visible {
    background: unset;
}

a.dd-boligcard:hover {
    color: inherit;
}


.dd-boligcard.dd-boligcard-selected {
    box-shadow: 0px 0px 12px #00000040;
    border: 10px solid white;
    border-color: var(--dd-color-background);
    margin: -10px;
    border-radius: calc(10px + var(--dd-element-radius, 0));
}

.dd-bse-list-cards .dd-boligcard.dd-hidden,
.dd-bse-list-cards .dd-boligcard.dd-filtered-out {
    display: none;
}

.dd-boligcard p {
    margin: 0;
}

.dd-boligcard img {
    pointer-events: none;
}

.dd-boligcard .dd-text-wrapper {
    color: var(--dd-color-text);
}

.dd-boligcard-slider,
.dd-boligcard-imageviewer {
    position: relative;
    background-color: var(--dd-color-viewport);
    border-radius: var(--dd-element-radius);
    overflow: hidden;
    /* cursor: grab; */
}

.dd-aspect-handler {
    width: 100%;
    padding-top: 130%; 
    padding-top: var(--dd-boligcard-aspect, 130%); /* Fallback aspect: 1.3 */
    height: 0;
}

.dd-boligcard-slides,
.dd-boligcard-imageviewer-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: -webkit-fill-available;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.dd-boligcard-image {    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* padding: 60px 20px 50px; */
    padding: 15% 5% 12%;
}

.dd-boligcard-slider .dd-boligcard-image img{
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    object-fit: contain;
}

.dd-boligcard-image.dd-boligcard-image-contain  {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dd-boligcard-image.dd-boligcard-image-contain img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.dd-boligcard-image.dd-boligcard-image-cover  {
    padding:0;
}

.dd-boligcard-image.dd-boligcard-image-cover img {
    object-fit: cover;
}

/* .dd-boligcard-slider-nav {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
} */



/* IMAGE VIEWER */
@media screen AND (hover:hover) {
    .dd-boligcard-imageviewer-has-image .dd-boligcard-imageviewer-image {
        opacity: 1;
        transition: opacity var(--dd-animation-time) var(--dd-animation-easing);
    }
    .dd-boligcard-imageviewer-has-image .dd-boligcard-imageviewer-image:hover {
        opacity: 0;
    }
}





.dd-boligcard-tags {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 10px;
    padding: calc( var(--dd-element-radius) + 3px);
    font-weight: 500;
    flex-wrap: wrap;
}


.dd-boligcard-tag {
    background: white;
    padding: 0.6em 1.0em 0.7em;
    line-height: 1em;
    white-space: nowrap;
    text-wrap: nowrap;
    font-weight: 600;
}


.dd-boligcard-text {
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}

.dd-boligcard.dd-boligcard-selected:focus-visible, 
.dd-boligcard:focus-visible, 
.dd-boligcard:has(:focus-visible) {  /* simulate the missing pseudoclass: focus-within-visible */
    outline: var(--dd-focus-width) solid var(--dd-color-text);
    outline-offset: 10px;
}

.dd-boligcard.dd-boligcard-selected:focus-visible,
.dd-boligcard.dd-boligcard-selected:has(:focus-visible) {
    outline-offset: 0px;
}


.dd-boligcard .splide__pagination__page:focus-visible,
.dd-boligcard .splide.is-focus-in .splide__pagination__page:focus {
    /* outline: var(--dd-focus-width) solid var(--dd-color-accent);
    outline-offset: var(--dd-focus-offset); */
    outline: 3px solid var(--dd-color-accent);
    outline-offset: 2px;
    scale: 1.5;
}




/* SPLIDE */
.dd-boligcard .dd-placeholder-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.dd-boligcard .splide {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.dd-boligcard .splide__track {
    height: 100%;
    width: 100%;
}

.dd-boligcard .splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dd-boligcard .splide__pagination__page,
.dd-boligcard .splide__pagination__page:active,
.dd-boligcard .splide__pagination__page:hover,
.dd-boligcard .splide__pagination__page:visited {
    background-color: lightgrey;
}

.dd-boligcard .splide__pagination__page {
    width:10px;
    height:10px;
    border-radius: 5px;
    border: none;
    padding: 0;
}

.dd-boligcard .splide__pagination__page.is-active {
    background: #fff;
    transform: scale(1);
    opacity: 1;
}

.dd-boligcard .dd-boligcard-single-contain,
.dd-boligcard .splide .dd-boligcard-slide-contain {
    /* padding: 60px 20px 50px; */
    padding: 15% 5% 12%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd-boligcard .dd-boligcard-single-contain img,
.dd-boligcard .dd-boligcard-single-contain picture,
.dd-boligcard .splide .dd-boligcard-slide-contain img,
.dd-boligcard .splide .dd-boligcard-slide-contain picture {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.dd-boligcard .dd-boligcard-single-cover img,
.dd-boligcard .splide .dd-boligcard-slide-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding:0;
}


/* WHILE SPLIDE IS LOADING */
.splide:not(.is-initialized) {
    visibility: visible;
}
.splide:not(.is-initialized)::after {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: var(--dd-loading-donut-size);
    aspect-ratio: 1;
    border-radius: 50%;    
    background: 
      radial-gradient(farthest-side,var(--dd-color-accent) 94%,#0000) top/var(--dd-loading-donut-width) var(--dd-loading-donut-width) no-repeat,
      conic-gradient(#0000 30%,var(--dd-color-accent));
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - var(--dd-loading-donut-width)),#000 0);
    mask: radial-gradient(farthest-side,#0000 calc(100% - var(--dd-loading-donut-width)),#000 0);
    animation: dd-loading-animation var(--dd-loading-donut-speed) infinite linear;
}