html.popup-is-open,
html.mobile-popup-is-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width);
}

html.popup-is-open header.header,
html.mobile-popup-is-open header.header {
    padding-right: calc(4rem + var(--scrollbar-width));
}

.callmeform,
.mobile-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 2rem));
    z-index: 999;
    background: var(--dark-blue);
    width: 100%;
    max-width: 55rem;
    border-radius: 3rem;
    padding: 4.2rem 4rem 4rem;
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: transform 0.5s;
}

.mobile-popup {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

.popup-is-open .callmeform,
.mobile-popup-is-open .mobile-popup {
    transform: translate(-50%, -50%);
}

.callmeform .pretty-button,
.mobile-popup .pretty-button {
    width: 100%;
}

.mobile-popup .pretty-button {
    margin-top: auto;
}

.mobile-popup a {
    margin-bottom: 2rem;
    color: var(--light-blue) !important;
    font-weight: 600;
    font-size: 2rem;
    line-height: 120%;
    text-decoration: none;
}

.mobile-popup a:hover {
    color: var(--blue) !important;
}

.callmeform .callmeform-header,
.mobile-popup .mobile-popup-header {
    margin-bottom: 3.2rem;
    padding-right: 7.6rem;
    font-weight: 700;
    font-size: 2.7rem;
    line-height: 119%;
    color: var(--white);
}

.callme-result {
    background: var(--dark-blue);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: none;
}

.pending-inner,
.success-inner,
.not-accepted-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: none;
    padding: 4.2rem 4rem 4rem;
}

.success-inner p,
.not-accepted-inner p {
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--white-alpha-50);
    margin-bottom: 4rem;
}

.success-inner svg,
.not-accepted-inner svg {
    display: block;
    margin: 0 auto;
}

.callme-result.pending-is-open .pending-inner,
.callme-result.success-is-open .success-inner,
.callme-result.not-accepted-is-open .not-accepted-inner,
.callme-result.result-is-open {
    display: block;
}

.callme-result .loader {
    margin: 10rem auto 0;
}

.callmeform-close__button,
.mobile-popup-close__button {
    height: 5.6rem;
    width: 5.6rem;
    position: absolute;
    top: 3rem;
    right: 3rem;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    z-index: 3;
}

.callmeform-close__button:hover,
.mobile-popup-close__button:hover {
    opacity: 0.8;
}

.callmeform-overlay,
.mobile-popup-overlay {
    position: fixed;
    width: calc(100% + var(--scrollbar-width));
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 998;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 0.5s 0s;
}

.popup-is-open .callmeform-overlay,
.mobile-popup-is-open .mobile-popup-overlay {
    width: 100%;
    opacity: 1;
    visibility: visible;
    transition: visibility 0s 0s, opacity 0.5s 0s;
}

.callmeform-close,
.mobile-popup-close {
    position: absolute;
    width: 100%;
    height: 100%;
}

@media (max-width: 1319px) {
    html.popup-is-open header.header,
    html.mobile-popup-is-open header.header {
        padding-right: calc(1.6rem + var(--scrollbar-width));
    }
}

@media (max-width: 768px) {
    .callmeform,
    .mobile-popup {
        top: auto;
        bottom: 0;
        left: 0;
        border-radius: 2.4rem 2.4rem 0 0;
        transform: translate(0, 100%);
        padding: 2.1rem 1.6rem;
        max-width: 100%;
    }

    .popup-is-open .callmeform,
    .mobile-popup-is-open .mobile-popup {
        transform: translate(0, 0)
    }

    .callmeform .callmeform-header,
    .mobile-popup .mobile-popup-header {
        font-weight: 600;
        font-size: 2rem;
        line-height: 120%;
        margin-bottom: 2.4rem;
    }

    .callmeform-close__button,
    .mobile-popup-close__button {
        height: 4.4rem;
        width: 4.4rem;
        top: 1.2rem;
        right: 1.2rem;
    }

    .callmeform-close__button svg,
    .mobile-popup-close__button svg {
        width: 2.4rem;
        height: auto;
    }

    .success-inner p,
    .not-accepted-inner p {
        font-size: 1.6rem;
    }
}