.wp-block-acf-safe-spaces-map .safe-spaces {
    position: relative;
}

.wp-block-acf-safe-spaces-map .map {
    height: 100%;
    width: 100%;
}

.safe-spaces__list--container .safe-spaces-list {
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.5);
    max-height: calc(80vh - 140px);
    max-width: 480px;
    overflow-y: auto;
    position: relative;
    width: 33%;
    z-index: 5;
}

.space__quick-view {
    width: 100%;
}

.safe-space.map-marker {
    transition: background-color 0.25s ease-out;
}

.safe-space.map-marker.active,
.safe-space.map-marker:focus,
.safe-space.map-marker:hover {
    background-color: var(--wp--preset--color--fairy);
}

.safe-spaces__search-container {
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(270deg, #74ceff 2%, #5f76d5 50%, #ffafe6 100%);
    flex-shrink: 0;
    max-width: 480px;
    padding: 3rem 2rem;
    width: 33%;
}

.safe-spaces-form {
    align-items: center;
    display: flex;
    gap: 2rem;
    position: relative;
    width: 100%;
    z-index: 5;
}

.safe-spaces-filter-container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.safe-spaces-form input[type=search] {
    width: 100%;
}

.safe-spaces-form select,
.safe-spaces-form input {
    appearance: none;
    background-color: white;
    border: none;
    border-radius: 50vw;
    font-family: var(--wp--preset--font-family--whyte);
    font-size: 1rem;
    padding: 10px 16px;
}

.safe-spaces-form select {
    text-align: center;
}

.safe-spaces-form .input-container {
    background: var(--wp--preset--gradient--pride);
    border-radius: 50vw;
    box-shadow: 0 2px 4px 0 #0000001a;
    font-family: var(--wp--preset--font-family--whyte);
    padding: 1px;
}

.safe-space {
    border-bottom: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #fdd589 11.5%, #89c7fe 100%);
    display: flex;
    gap: 1rem;
    padding: 2.5rem 2rem;
}

.safe-space .space__name {
    font-size: 1rem;
    margin-top: 0;
}

.safe-space .space__thumb {
    max-width: 120px;
    width: 40%;
}

.safe-space .space__thumb img {
    height: auto;
    max-width: 100%;
}

.safe-space .space__quick-view_list > div,
.safe-spaces-more-info-inner .space-info_list > div {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.875rem;
}

.safe-space .space__quick-view_list > div .icon {
    flex-shrink: 0;
    line-height: 0;
    width: 20px;
}

.safe-spaces-more-info-inner .space-info_list > div {
    align-items: center;
    gap: 1rem;
}

.safe-spaces-more-info-inner .space-info_list > div .icon {
    flex-shrink: 0;
    height: 26px;
    line-height: 0;
    width: 26px;
}

.safe-spaces-more-info-inner .space-info_list > div .icon svg {
    height: auto;
    max-height: 100%;
    width: auto;
}

.safe-space .space__quick-view_list > div .icon svg {
    margin: auto;
    max-width: 100%;
}

.safe-space .space-more-info-toggle {
    align-items: center;
    background: var(--wp--preset--gradient--pride);
    border: none;
    border-radius: 50vw;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    margin: 0 0 0 auto;
    position: relative;
    width: 32px;
}

.safe-space .space-more-info-toggle > * {
    line-height: 0;
    position: relative;
    z-index: 1;
}

.safe-space .space-more-info-toggle::before {
    background: white;
    border-radius: 50vw;
    bottom: 1px;
    content: '';
    left: 1px;
    opacity: 1;
    position: absolute;
    right: 1px;
    top: 1px;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.safe-space .space-more-info-toggle:hover,
.safe-space .space-more-info-toggle:focus-visible {
    & path {
        stroke: white;
    }

    &::before {
        opacity: 0;
    }
}

.safe-spaces-more-info-popup .spaces-close {
    background-color: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    margin: 0 0 0 auto;
}

.safe-spaces-more-info-popup hr {
    background: var(--wp--preset--gradient--chill);
    border: none;
    height: 1px;
    margin: 2rem 0;
}

.space-more-info-panel {
    display: none;
}

.safe-spaces-more-info-popup {
    display: none;
}

.safe-spaces-more-info-popup.active {
    background-color: white;
    border-radius: 20px;
    bottom: 3rem;
    display: block;
    left: 3rem;
    overflow-y: auto;
    padding: 3rem;
    position: absolute;
    right: 3rem;
    top: 3rem;
    z-index: 20;
}

.safe-spaces-more-info-popup.active .safe-spaces-more-info-inner {
    padding-bottom: 3rem;
    padding-top: 1rem;
}

.safe-spaces-more-info-popup .space-info-inner {
    display: flex;
    gap: 4rem;
}

.safe-spaces-more-info-popup .space-info-inner .space__thumb {
    flex-basis: 33%;
}

.safe-spaces-more-info-popup .space-info-inner > * {
    flex-grow: 1;
}

.safe-spaces-more-info-popup .space-info-inner h3 {
    margin-top: 0;
}

@media screen and (min-width: 601px) {
    .wp-block-acf-safe-spaces-map .map {
        position: absolute;
        right: 0;
        top: 0;
    }
}

@media screen and (max-width: 1024px) {
    .safe-space {
        flex-direction: column;
    }
}

@media screen and (max-width: 600px) {
    .wp-block-acf-safe-spaces-map .map {
        height: 100vh;
        overflow: visible;
        position: relative;
    }

    .safe-spaces {
        display: flex;
        flex-direction: column;
    }

    .safe-spaces-form {
        flex-wrap: wrap;
        gap: 0;
        order: 1;
    }

    .safe-spaces-map {
        margin-bottom: 1.25rem;
        order: 2;
    }

    .safe-spaces__list--container {
        order: 3;
    }

    .safe-spaces-more-info-popup {
        order: 4;
    }

    .safe-spaces__list--container .safe-spaces-list {
        max-height: unset;
        position: relative;
        width: 100%;
    }

    .safe-spaces__list--container .safe-spaces-list::-webkit-scrollbar {
        display: none;
    }

    .safe-spaces__search-container {
        backdrop-filter: none;
        background-color: transparent;
        border: none;
        padding: 1.125rem 0;
        width: 100%;
    }

    .safe-spaces-filter-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 1.125rem;
    }

    .safe-spaces-filter-container::before {
        background-image: url("data:image/svg+xml,%3Csvg width='26' height='20' viewBox='0 0 26 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.3482 0.5C16.8434 0.5 17.2449 0.911625 17.2449 1.41938V5.19994C17.2449 5.70769 16.8434 6.11932 16.3482 6.11932C15.8531 6.11932 15.4516 5.70769 15.4516 5.19994V4.18112H0.896625C0.401437 4.18112 0 3.7695 0 3.26173C0 2.75398 0.401437 2.34235 0.896625 2.34235H15.4516V1.41938C15.4516 0.911625 15.8531 0.5 16.3482 0.5ZM25.5688 3.25282C25.5737 3.76055 25.176 4.17615 24.681 4.18108L19.8579 4.22903C19.3628 4.23396 18.9574 3.82634 18.9526 3.31861C18.9478 2.81087 19.3453 2.39529 19.8405 2.39036L24.6635 2.3424C25.1587 2.33747 25.564 2.74509 25.5688 3.25282ZM9.18122 6.57002C9.67642 6.57002 10.0778 6.98165 10.0778 7.4894V9.33067V9.33275V11.2699C10.0778 11.7777 9.67642 12.1893 9.18122 12.1893C8.68603 12.1893 8.28459 11.7777 8.28459 11.2699V10.2512H0.896625C0.401437 10.2512 0 9.83951 0 9.33177C0 8.82403 0.401437 8.41239 0.896625 8.41239H8.28459V7.4894C8.28459 6.98165 8.68603 6.57002 9.18122 6.57002ZM11.8206 9.33177C11.8206 8.82403 12.2221 8.41239 12.7173 8.41239H24.6723C25.1674 8.41239 25.5689 8.82403 25.5689 9.33177C25.5689 9.83951 25.1674 10.2512 24.6723 10.2512H12.7173C12.2221 10.2512 11.8206 9.83951 11.8206 9.33177ZM13.9318 13.8807C14.4269 13.8807 14.8284 14.2924 14.8284 14.8001V18.5806C14.8284 19.0884 14.4269 19.5 13.9318 19.5C13.4366 19.5 13.0351 19.0884 13.0351 18.5806V17.5618H1.32767C0.832475 17.5618 0.43105 17.1502 0.43105 16.6424C0.43105 16.1347 0.832475 15.7231 1.32767 15.7231H13.0351V14.8001C13.0351 14.2924 13.4366 13.8807 13.9318 13.8807ZM26 16.6368C26.003 17.1445 25.604 17.5586 25.1089 17.5618L17.4878 17.61C16.9926 17.6132 16.5888 17.204 16.5857 16.6963C16.5827 16.1885 16.9816 15.7744 17.4768 15.7712L25.0977 15.7231C25.593 15.72 25.9969 16.1291 26 16.6368Z' fill='url(%23paint0_linear_2659_2507)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2659_2507' x1='13' y1='0.5' x2='13' y2='19.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF1225'/%3E%3Cstop offset='0.179992' stop-color='%23FF6429'/%3E%3Cstop offset='0.349992' stop-color='%23FFC400'/%3E%3Cstop offset='0.554992' stop-color='%23539916'/%3E%3Cstop offset='0.749992' stop-color='%233347EC'/%3E%3Cstop offset='1' stop-color='%239B5DE6'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        display: block;
        flex-shrink: 0;
        height: 19px;
        width: 26px;
    }

    .safe-spaces-more-info-popup.active {
        bottom: 0;
        left: 0;
        padding: 3rem 1.5rem;
        position: fixed;
        right: 0;
        top: 0;
    }

    .safe-spaces-more-info-popup .space-info-inner {
        flex-direction: column;
    }
}