.site-callback-widget {
    position: fixed;
    bottom: var(--site-callback-bottom, 24px);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.site-callback-widget--right {
    right: var(--site-callback-side, 24px);
    left: auto;
}

.site-callback-widget--left {
    left: var(--site-callback-side, 24px);
    right: auto;
    align-items: flex-start;
}

.site-callback-widget__btn {
    --cb-size: 52px;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: max-content;
    max-width: var(--cb-size);
    min-height: var(--cb-size);
    height: var(--cb-size);
    padding: 0;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    background: #009fe3;
    box-shadow: 0 8px 24px rgba(0, 159, 227, 0.35);
    overflow: hidden;
    white-space: nowrap;
    transition:
        max-width .28s ease,
        gap .28s ease,
        padding .28s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.site-callback-widget__btn:hover,
.site-callback-widget__btn:focus-visible,
.site-callback-widget:focus-within .site-callback-widget__btn {
    max-width: 280px;
    gap: 10px;
    padding: 0 18px 0 10px;
    background: #007de3;
    box-shadow: 0 10px 28px rgba(0, 159, 227, 0.42);
}

.site-callback-widget__btn:focus-visible {
    outline: 2px solid #0b1220;
    outline-offset: 3px;
}

.site-callback-widget__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--cb-size);
    width: var(--cb-size);
    height: var(--cb-size);
    border-radius: 10px;
    color: #fff;
}

.site-callback-widget__icon .im-ico {
    width: 22px;
    height: 22px;
}

.site-callback-widget__label {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transform: translateX(6px);
    transition:
        opacity .2s ease,
        max-width .28s ease,
        transform .28s ease;
}

.site-callback-widget__btn:hover .site-callback-widget__label,
.site-callback-widget__btn:focus-visible .site-callback-widget__label,
.site-callback-widget:focus-within .site-callback-widget__label {
    opacity: 1;
    max-width: 200px;
    transform: translateX(0);
}

body.activeForm .site-callback-widget,
body.activeLoginForm .site-callback-widget {
    z-index: 9997;
}

@media (max-width: 680px) {
    .site-callback-widget {
        bottom: calc(var(--site-callback-bottom, 24px) + 16px);
    }

    .site-callback-widget__btn,
    .site-callback-widget__btn:hover,
    .site-callback-widget__btn:focus-visible,
    .site-callback-widget:focus-within .site-callback-widget__btn {
        max-width: var(--cb-size);
        gap: 0;
        padding: 0;
        transform: none;
    }

    .site-callback-widget__label {
        display: none;
    }

    .site-callback-widget--hide-mobile {
        display: none;
    }
}

@media (max-width: 420px) {
    .site-callback-widget--right { right: 12px; }
    .site-callback-widget--left { left: 12px; }
}

@media (hover: none) {
    .site-callback-widget__btn:hover {
        max-width: var(--cb-size);
        gap: 0;
        padding: 0;
        background: #009fe3;
        box-shadow: 0 8px 24px rgba(0, 159, 227, 0.35);
    }

    .site-callback-widget__btn:hover .site-callback-widget__label {
        opacity: 0;
        max-width: 0;
    }
}

@media (max-width: 760px) {
    .site-callback-widget {
        display: none;
    }
}