.popup {
    position: fixed;
    z-index: 222;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: auto;
    background: var(--overlay-color)
}

.popup._visible {
    display: flex;
    animation: fade-in;
    animation-duration: .25s;
    animation-fill-mode: forwards
}

.popup._hidden {
    animation: fade-out;
    animation-duration: .25s;
    animation-fill-mode: forwards
}

.popup__inner {
    position: relative;
    z-index: 200;
    width: 560px;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 50px;
    background: #fff;
    overflow: auto
}

@media(max-width: 480px) {
    .popup__inner {
        width: 100%;
        height: 100vh
    }
}

@media(max-width: 400px) {
    .popup__inner {
        padding: 30px
    }
}

._visible .popup__inner {
    display: block;
    animation: fade-scale-in;
    animation-duration: .25s;
    animation-fill-mode: forwards
}

._hidden .popup__inner {
    animation: fade-scale-out;
    animation-duration: .25s;
    animation-fill-mode: forwards
}

.popup__title {
    max-width: 80%;
    margin: 0 auto 30px;
    font-size: 32px;
    font-weight: 500;
    color: var(--text-black-color);
    text-align: center;
    text-transform: uppercase
}

@media(max-width: 480px) {
    .popup__title {
        font-size: 24px
    }
}

.popup__close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 43px;
    height: 43px
}

@media(max-width: 1000px) {
    .popup__close-btn {
        background-color: #000
    }
}

@media(max-width: 480px) {
    .popup__close-btn {
        z-index: 1111;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        background-color: rgba(0, 0, 0, .25);
        border-radius: 0
    }
}

.popup__close-btn svg {
    pointer-events: none
}

@media(max-width: 480px) {
    .popup__close-btn svg {
        width: 15px
    }
}

.popup__privacy {
    margin-top: 30px;
    font-size: 15px;
    text-align: center
}