.ckh-floating-contact,
.ckh-floating-contact *,
.ckh-floating-contact-backdrop {
    box-sizing: border-box;
}

.ckh-floating-contact-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999970;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(5, 14, 25, .18);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition:
        opacity .55s cubic-bezier(.22, .8, .26, 1),
        visibility .55s ease,
        backdrop-filter .6s cubic-bezier(.22, .8, .26, 1),
        -webkit-backdrop-filter .6s cubic-bezier(.22, .8, .26, 1);
}

.ckh-floating-contact-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ckh-floating-contact {
    position: fixed;
    left: 28px;
    bottom: 30px;
    z-index: 999990;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    font-family: inherit;
    isolation: isolate;
}

.ckh-floating-contact__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    height: 0;
    margin-bottom: -13px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(28px) scale(.68);
    transform-origin: bottom center;
    transition:
        height .58s cubic-bezier(.2, .9, .2, 1),
        margin .58s cubic-bezier(.2, .9, .2, 1),
        opacity .34s ease,
        visibility .58s ease,
        transform .58s cubic-bezier(.2, .9, .2, 1);
}

.ckh-floating-contact.is-open .ckh-floating-contact__actions {
    height: 145px;
    margin-bottom: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.ckh-floating-contact__action,
.ckh-floating-contact__toggle {
    position: relative;
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 66px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 12px 30px rgba(5, 24, 43, .24);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform .32s cubic-bezier(.2,.85,.2,1),
        box-shadow .32s ease,
        filter .32s ease,
        opacity .32s ease;
}

.ckh-floating-contact__actions .ckh-floating-contact__action {
    opacity: 0;
    transform: translateY(18px) scale(.72);
}

.ckh-floating-contact.is-open .ckh-floating-contact__actions .ckh-floating-contact__action {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ckh-floating-contact.is-open .ckh-floating-contact__actions .ckh-floating-contact__action--whatsapp {
    transition-delay: .08s;
}

.ckh-floating-contact.is-open .ckh-floating-contact__actions .ckh-floating-contact__action--phone {
    transition-delay: .15s;
}

.ckh-floating-contact__action:hover,
.ckh-floating-contact__toggle:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 17px 38px rgba(5, 24, 43, .30);
    filter: saturate(1.04) brightness(1.02);
}

.ckh-floating-contact__action:active,
.ckh-floating-contact__toggle:active {
    transform: scale(.95);
}

.ckh-floating-contact__action--phone {
    background: linear-gradient(145deg, #0ce0a6 0%, #00bf8b 100%);
}

.ckh-floating-contact__action--whatsapp {
    background: linear-gradient(145deg, #4be477 0%, #24c95a 100%);
}

.ckh-floating-contact__toggle {
    background: linear-gradient(145deg, #ad82db 0%, #8f62c3 100%);
    box-shadow: 0 14px 34px rgba(80, 45, 125, .30);
    overflow: hidden;
}

.ckh-floating-contact__icon,
.ckh-floating-contact__toggle-icon {
    display: grid;
    place-items: center;
    color: #fff;
}

.ckh-floating-contact__icon,
.ckh-floating-contact__icon svg {
    width: 31px;
    height: 31px;
}

.ckh-floating-contact__action--whatsapp .ckh-floating-contact__icon,
.ckh-floating-contact__action--whatsapp .ckh-floating-contact__icon svg {
    width: 34px;
    height: 34px;
}

.ckh-floating-contact__icon svg,
.ckh-floating-contact__toggle-icon svg {
    display: block;
    fill: currentColor;
}

.ckh-floating-contact__toggle-icon {
    position: absolute;
    inset: 0;
    transition:
        opacity .42s ease,
        transform .56s cubic-bezier(.2,.9,.2,1);
}

.ckh-floating-contact__toggle-icon--closed {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.ckh-floating-contact__toggle-icon--closed svg {
    width: 30px;
    height: 30px;
}

.ckh-floating-contact__toggle-icon--open {
    opacity: 0;
    transform: rotate(-135deg) scale(.55);
}

.ckh-floating-contact.is-open .ckh-floating-contact__toggle-icon--closed {
    opacity: 0;
    transform: rotate(135deg) scale(.55);
}

.ckh-floating-contact.is-open .ckh-floating-contact__toggle-icon--open {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.ckh-floating-contact__x {
    position: relative;
    width: 31px;
    height: 31px;
    display: block;
}

.ckh-floating-contact__x::before,
.ckh-floating-contact__x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 29px;
    height: 3.5px;
    border-radius: 999px;
    background: #fff;
}

.ckh-floating-contact__x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ckh-floating-contact__x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ckh-floating-contact__tooltip {
    position: absolute;
    left: calc(100% + 13px);
    top: 50%;
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border: 1px solid rgba(5, 24, 43, .08);
    border-radius: 10px;
    color: #243342;
    background: #fff;
    box-shadow: 0 9px 24px rgba(5, 24, 43, .16);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%) translateX(-7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .3s ease, visibility .25s ease;
}

.ckh-floating-contact__tooltip::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #fff;
}

.ckh-floating-contact__action:hover .ckh-floating-contact__tooltip,
.ckh-floating-contact__action:focus-visible .ckh-floating-contact__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 767px) {
    .ckh-floating-contact {
        left: 16px;
        bottom: 82px;
        gap: 10px;
    }

    .ckh-floating-contact__actions {
        gap: 10px;
    }

    .ckh-floating-contact.is-open .ckh-floating-contact__actions {
        height: 126px;
    }

    .ckh-floating-contact__action,
    .ckh-floating-contact__toggle {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .ckh-floating-contact__icon,
    .ckh-floating-contact__icon svg {
        width: 27px;
        height: 27px;
    }

    .ckh-floating-contact__action--whatsapp .ckh-floating-contact__icon,
    .ckh-floating-contact__action--whatsapp .ckh-floating-contact__icon svg {
        width: 30px;
        height: 30px;
    }

    .ckh-floating-contact__toggle-icon--closed svg {
        width: 27px;
        height: 27px;
    }

    .ckh-floating-contact__x {
        width: 27px;
        height: 27px;
    }

    .ckh-floating-contact__x::before,
    .ckh-floating-contact__x::after {
        width: 25px;
        height: 3px;
    }

    .ckh-floating-contact__tooltip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ckh-floating-contact-backdrop,
    .ckh-floating-contact__actions,
    .ckh-floating-contact__action,
    .ckh-floating-contact__toggle,
    .ckh-floating-contact__toggle-icon,
    .ckh-floating-contact__tooltip {
        transition: none !important;
        animation: none !important;
    }
}