// ====================================================
// Popup Header
// ====================================================
.popupTop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: none;
    border-bottom: 1px solid $black;
    @include translate(0, -100%);
    z-index: 1055;

    .btn-close {
        position: absolute;
        background: $black;
        top: 8.75px;
        right: 8.75px;
        width: calc($size-sm / 2);
        height: calc($size-sm / 2);
        z-index: 2;
    }

    &.popupTop-white {
        p, a {
            color: $white;

            &::after {
                background: $white;
            }
        }

        .btn-close {
            background: $white;
        }
    }
    
    p {        
        @extend .m-0, .px-3, .py-0, .text-sm, .text-medium;
    }    
}

// ====================================================
// Popup Centered
// ====================================================
.popupCentered {   

    .modal-content {    
        .modal-body {
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            min-height: 65vh;
        }

        .btn-close {
            top: $size-sm;
            right: $size-sm;
        
            img {
                width: $size-sm;
                height: $size-sm;
            }
        }
    }


    &-image,
    &-wrapper {        
        width: 100%;

        @include media-breakpoint-up(lg) {
            width: 50%;
        }
    }

    &-image {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    &-wrapper {        
        &-content {
            padding: $size-sm;

            @include media-breakpoint-up(lg) {
                padding: $size-md;
            }

            @include media-breakpoint-up(xxl) {
                padding: $size-lg $size-md;
            }                      
        }
    }
}