.wpc-modal {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;

    &.active {
        opacity: 1;

        .wpc-backdrop, .wpc-modal-content {
            opacity: 1;
            translate: 0 0;
            pointer-events: all;
        }
    }

    &.showed:not(.active) {
        display: none !important;
    }

    .wpc-backdrop {
        position: absolute;
        inset: 0;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: 0.3s;
        pointer-events: none;
    }

    .wpc-modal-content {
        position: relative;
        border-radius: var(--bs-border-radius, 0.25rem);
        background-color: #fff;
        z-index: 3;
        width: 30rem;
        max-width: 100%;
        opacity: 0;
        transition: 0.3s;
        transition-delay: 0.15s;
        translate: 0 5rem;
        overflow: hidden;
        pointer-events: all;

        &.wpc-modal-content-text-image {
            display: flex;
            width: 45rem;

            & > div {
                width: 50%;

                img.w-100 {
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        .wpc-modal-body {
            padding: 2.5rem;

            @media screen and (max-width: 576px) {
                padding: 1.5rem;
            }
        }
    }

    .wpc-modal-close {
        position: absolute;
        border: 0;
        background-color: rgba(255, 255, 255, 0.6);
        top: 1rem;
        right: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        padding: 0;
        color: #3a3a3a;
        z-index: 2;
        transition: 0.3s;

        &:before, &:after {
            content: '';
            width: 15px;
            height: 2px;
            background-color: currentColor;
            rotate: 45deg;
            position: absolute;
        }

        &:after {
            rotate: -45deg;
        }

        &:hover {
            background-color: #fff;
            color: #000;
        }
    }

    &.location-bottom_left_corner {
        align-items: flex-end;
        justify-content: flex-start;
    }

    &.location-bottom_right_corner {
        align-items: flex-end;
        justify-content: flex-end;
    }

    &.location-bottom_left_corner, &.location-bottom_right_corner {
        .wpc-modal-content {
            width: 20rem;
            flex-direction: column;
            border: 1px solid #e5e7eb;

            &.wpc-modal-content-text-image > div {
                width: 100%;
            }

            .image-wrapper {
                order: 1;

                img {
                    aspect-ratio: 16/9;
                    object-fit: cover;
                }
            }

            .wpc-modal-body {
                order: 2;
                padding: 1.5rem;
            }
        }
    }
}

.wpc-shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}