.layout-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 25px;

    &:not(.regular) {
        justify-content: space-between;
    }

    .layout-info {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 20px;
        flex: 1 1;
    }

}






.fixed-layout-actions {
    position: fixed;
    top: 50svh;
    right: 0;
    z-index: 1750;
    transform: translateY(-50%);

    .buttons:not(.no-pull) {
        margin-right: -3px;
    }

    .button {
        --border-radius: 9px 0 0 9px !important;
    }

    .button.hover,
    .button:hover,
    .button:focus {
        padding-right: calc(var(--button-padding-x, 16px) * 2) !important;
    }

}





.fixed-layout-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1755;

    &:not(.is-active) {
        display: none;
    }

    .segment-block.block-wrap {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        --block-padding: 20px;
        margin: 0 calc(-1 * var(--container-padding));
    }

    @media all and (max-width: 575px) {
        .segment-block.block-wrap {
            border-radius: 0 !important;
        }
    }

    @media all and (max-width: 767px) {

        .segment-block.block-wrap {
            --block-padding: 15px;
        }

        .button.large:not(.icon) {
            --button-padding-y: 13px;
            --button-padding-x: 18px;
        }

    }


    .title {
        font-weight: 400;
        font-size: 1.5rem;
    }

    @media all and (max-width: 575px) {

        .title {
            font-size: 1.375rem;
        }


    }



    @media all and (max-width: 767px) {


        .layout-items {
            flex-direction: column;
            gap: 12px 20px;
        }


    }


}






/* Map */


@keyframes map_pin_down {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-100%);
    }
}

.map-element {
    position: relative;
    z-index: 15;

    .map-image {
        position: relative;

        svg, path {
            fill: var(--theme-grayish);
        }
    }

    .map-pin {
        position: absolute;
        transform: translateX(-50%) translateY(-100%);
        z-index: 15;
    }

    .map-pins {
        position: absolute;
        inset: 0;
        z-index: 15;

        &:not(.no-animation) {

            .map-pin {
                opacity: 0;
                transform: translateX(-50%) translateY(-200%);
                animation: map_pin_down 0.75s ease-out forwards;
            }

            .map-pin:nth-child(1) { animation-delay: 500ms; }
            .map-pin:nth-child(2) { animation-delay: 1000ms; }
            .map-pin:nth-child(3) { animation-delay: 1500ms; }
            .map-pin:nth-child(4) { animation-delay: 2000ms; }
            .map-pin:nth-child(5) { animation-delay: 2500ms; }
            .map-pin:nth-child(6) { animation-delay: 3000ms; }
            .map-pin:nth-child(7) { animation-delay: 3500ms; }
            .map-pin:nth-child(8) { animation-delay: 4000ms; }
            .map-pin:nth-child(9) { animation-delay: 4500ms; }
            .map-pin:nth-child(10) { animation-delay: 5000ms; }

        }
    }


    &[data-map="europe"] {

        [data-location="germany"] {
            top: 58%;
            left: 36%;
        }

        [data-location="france"] {
            top: 71%;
            left: 24%;
        }

        [data-location="spain"] {
            top: 86%;
            left: 12%;
        }

        [data-location="austria"] {
            top: 68.5%;
            left: 43%;
        }

        [data-location="switzerland"] {
            top: 70%;
            left: 33%;
        }

        [data-location="hungary"] {
            top: 69%;
            left: 50%;
        }

        [data-location="romania"] {
            top: 71%;
            left: 58%;
        }

        [data-location="bulgaria"] {
            top: 79%;
            left: 62%;
        }

    }

}



.map-wrap {
    position: relative;

    &.map-europe {
        padding: 50px 25px;

        &::before,
        &::after {
            content: ' ';
            position: absolute;
            background-color: var(--theme-lighter);
            border-radius: 10px;
            z-index: 5;

        }

        &::before {
            left: 0;
            bottom: 0;
            width: 75%;
            height: 90%;
        }

        &::after {
            top: 0;
            right: 0;
            width: 75%;
            height: 92%;
        }

    }

}