.whatsapp-widget {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 9999;
        font-family: inherit;
    }

    /* Tombol bulat WhatsApp */
    .whatsapp-float {
        width: 62px;
        height: 62px;
        padding: 0;
        border: 0;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #25d366;
        color: #ffffff;
        cursor: pointer;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);

        transition:
            transform 0.25s ease,
            background-color 0.25s ease,
            box-shadow 0.25s ease;
    }

    .whatsapp-float svg {
        width: 36px;
        height: 36px;
    }

    .whatsapp-float:hover {
        background: #1fbd59;
        transform: translateY(-4px) scale(1.04);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
    }

    /* Kotak popup */
    .whatsapp-popup {
        position: absolute;
        right: 0;
        bottom: 78px;

        width: 350px;
        max-width: calc(100vw - 32px);

        overflow: hidden;
        background: #ffffff;
        border-radius: 12px;

        box-shadow: 0 12px 42px rgba(0, 0, 0, 0.25);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(16px) scale(0.96);
        transform-origin: bottom right;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;
    }

    .whatsapp-popup.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    /* Tombol close */
    .whatsapp-popup-close {
        position: absolute;
        top: 7px;
        right: 9px;
        z-index: 5;

        width: 30px;
        height: 30px;
        padding: 0;

        border: 0;
        border-radius: 50%;
        background: transparent;

        color: rgba(255, 255, 255, 0.75);
        font-size: 26px;
        line-height: 1;

        cursor: pointer;
        transition: 0.2s ease;
    }

    .whatsapp-popup-close:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.14);
    }

    /* Header customer service */
    .whatsapp-popup-header {
        display: flex;
        align-items: center;
        gap: 12px;

        padding: 17px 46px 17px 20px;
        background: #075e54;
        color: #ffffff;
    }

    .whatsapp-cs-avatar {
        position: relative;
        flex-shrink: 0;

        width: 50px;
        height: 50px;
    }

    .whatsapp-cs-avatar img {
        display: block;
        width: 100%;
        height: 100%;

        border-radius: 50%;
        object-fit: cover;

        background: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.35);
    }

    .whatsapp-online-badge {
        position: absolute;
        right: 0;
        bottom: 1px;

        width: 12px;
        height: 12px;

        background: #06e376;
        border: 2px solid #075e54;
        border-radius: 50%;
    }

    .whatsapp-cs-info {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .whatsapp-cs-info strong {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
    }

    .whatsapp-cs-info span {
        color: rgba(255, 255, 255, 0.84);
        font-size: 12px;
    }

    /* Area chat */
    .whatsapp-popup-body {
        position: relative;
        min-height: 165px;
        padding: 22px 20px 70px;

        background-color: #ece5dd;
        background-image:
            radial-gradient(circle at 20% 30%,
                rgba(0, 0, 0, 0.035) 1px,
                transparent 1px),
            radial-gradient(circle at 70% 70%,
                rgba(0, 0, 0, 0.035) 1px,
                transparent 1px);

        background-size: 22px 22px;
    }

    .whatsapp-message {
        position: relative;

        width: fit-content;
        max-width: calc(100% - 22px);

        padding: 10px 12px;

        background: #dcf8c6;
        color: #222222;
        border-radius: 0 8px 8px 8px;

        font-size: 13px;
        line-height: 1.6;

        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
    }

    .whatsapp-message::before {
        content: "";
        position: absolute;
        top: 0;
        left: -8px;

        width: 9px;
        height: 14px;

        background: #dcf8c6;
        clip-path: polygon(100% 0, 100% 100%, 0 0);
    }

    /* Area tombol */
    .whatsapp-popup-action {
        padding: 12px 20px;
        background: #ffffff;
    }

    .whatsapp-contact-button {
        width: 100%;
        min-height: 43px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;

        background: #25d366;
        color: #ffffff;

        border-radius: 24px;
        text-decoration: none;

        font-size: 14px;
        font-weight: 600;

        transition:
            background-color 0.2s ease,
            transform 0.2s ease;
    }

    .whatsapp-contact-button svg {
        width: 21px;
        height: 21px;
    }

    .whatsapp-contact-button:hover {
        background: #1fbd59;
        transform: translateY(-1px);
    }

    /* Footer status */
    .whatsapp-popup-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;

        padding: 7px 15px 11px;

        background: #ffffff;
        color: #777777;

        font-size: 11px;
    }

    .whatsapp-status-dot {
        width: 7px;
        height: 7px;
        background: #06e376;
        border-radius: 50%;
    }

    .whatsapp-footer-separator {
        margin: 0 2px;
        color: #bbbbbb;
    }

    /* Mobile */
    @media (max-width: 560px) {
        .whatsapp-widget {
            right: 16px;
            bottom: 16px;
        }

        .whatsapp-float {
            width: 54px;
            height: 54px;
        }

        .whatsapp-float svg {
            width: 31px;
            height: 31px;
        }

        .whatsapp-popup {
            position: fixed;
            right: 16px;
            bottom: 82px;

            width: calc(100vw - 32px);
            max-width: 360px;

            transform-origin: bottom right;
        }

        .whatsapp-popup-body {
            min-height: 145px;
            padding-bottom: 55px;
        }
    }