.itlc-widget,
.itlc-widget * {
    box-sizing: border-box;
}

.itlc-widget {
    --itlc-green-1: #0b3f30;
    --itlc-green-2: #062e23;
    --itlc-gold-1: #f2d58a;
    --itlc-gold-2: #b89b5e;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999999;
    width: 62px;
    height: 62px;
    font-size: 0;
    direction: ltr;
    -webkit-tap-highlight-color: transparent;
}

.itlc-trigger,
.itlc-action {
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(242, 213, 138, .95);
    color: #fff;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .13), transparent 34%),
        linear-gradient(145deg, var(--itlc-green-1), var(--itlc-green-2));
    box-shadow:
        0 12px 30px rgba(2, 28, 21, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .04),
        0 0 0 4px rgba(184, 155, 94, .08);
}

.itlc-trigger {
    position: relative;
    z-index: 3;
    width: 62px;
    height: 62px;
    padding: 0;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: transform .28s ease, box-shadow .28s ease;
}

.itlc-trigger:hover,
.itlc-trigger:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 16px 34px rgba(2, 28, 21, .34),
        inset 0 0 0 1px rgba(255, 255, 255, .06),
        0 0 0 5px rgba(215, 181, 109, .12);
}

.itlc-trigger:focus-visible,
.itlc-action:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.itlc-trigger__icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(.72) rotate(-18deg);
    transition: opacity .42s ease, transform .42s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.itlc-trigger__icon.is-active {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.itlc-trigger svg,
.itlc-action svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.itlc-actions {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.itlc-action {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 50px;
    height: 50px;
    opacity: 0;
    transform: translateY(0) scale(.68);
    transition:
        transform .38s cubic-bezier(.2, .9, .2, 1.15),
        opacity .24s ease,
        box-shadow .25s ease;
    pointer-events: none;
    text-decoration: none !important;
}

.itlc-action:hover {
    color: #fff;
    box-shadow:
        0 14px 28px rgba(2, 28, 21, .32),
        inset 0 0 0 1px rgba(255, 255, 255, .06),
        0 0 0 4px rgba(215, 181, 109, .11);
}

.itlc-widget.is-open .itlc-actions {
    pointer-events: auto;
}

.itlc-widget.is-open .itlc-action {
    opacity: 1;
    pointer-events: auto;
}

.itlc-widget.is-open .itlc-action--phone {
    transform: translateY(-70px) scale(1);
}

.itlc-widget.is-open .itlc-action--whatsapp {
    transform: translateY(-132px) scale(1);
}

.itlc-widget.is-open .itlc-trigger {
    transform: rotate(8deg);
}

@media (max-width: 782px) {
    .itlc-widget {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 58px;
        height: 58px;
    }

    .itlc-trigger {
        width: 58px;
        height: 58px;
    }

    .itlc-action {
        right: 5px;
        bottom: 5px;
        width: 48px;
        height: 48px;
    }

    .itlc-trigger svg,
    .itlc-action svg {
        width: 25px;
        height: 25px;
    }

    .itlc-widget.is-open .itlc-action--phone {
        transform: translateY(-66px) scale(1);
    }

    .itlc-widget.is-open .itlc-action--whatsapp {
        transform: translateY(-126px) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .itlc-trigger,
    .itlc-action,
    .itlc-trigger__icon {
        transition-duration: .01ms !important;
    }
}
