/* =========================================================
   TEN ONE RESORT
   Floating WhatsApp Button
   ========================================================= */

.floating-whatsapp {
    position: fixed;

    right: 24px;
    bottom: 24px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 54px;

    padding:
        6px 17px 6px 7px;

    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    border-radius:
        999px;

    color: var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-primary-dark),
            var(--color-primary)
        );

    box-shadow:
        0 12px 30px
        rgba(15, 64, 47, 0.24),
        0 3px 10px
        rgba(15, 64, 47, 0.12);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    text-decoration: none;

    z-index: 9999;

    transition:
        transform 250ms ease,
        box-shadow 250ms ease,
        background 250ms ease;
}


/* =========================================================
   ICON
   ========================================================= */

.floating-whatsapp-icon {
    display: inline-flex;

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

    width: 41px;
    height: 41px;

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--color-primary);

    background:
        rgba(255, 255, 255, 0.96);

    font-size: 20px;

    transition:
        transform 250ms ease;
}


/* =========================================================
   LABEL
   ========================================================= */

.floating-whatsapp-label {
    font-family:
        var(--font-body-strong);

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.01em;

    white-space:
        nowrap;
}


/* =========================================================
   HOVER
   ========================================================= */

.floating-whatsapp:hover {
    color: var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-light)
        );

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 36px
        rgba(15, 64, 47, 0.30);
}


.floating-whatsapp:hover
.floating-whatsapp-icon {
    transform:
        scale(1.06);
}


/* =========================================================
   ACTIVE
   ========================================================= */

.floating-whatsapp:active {
    transform:
        translateY(-1px);
}


/* =========================================================
   OPTIONAL PULSE
   ========================================================= */

.floating-whatsapp::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: inherit;

    border:
        1px solid
        rgba(63, 118, 85, 0.24);

    opacity: 0;

    pointer-events: none;

    animation:
        whatsapp-pulse 3s
        ease-out
        infinite;
}


@keyframes whatsapp-pulse {

    0% {
        transform: scale(0.96);
        opacity: 0.45;
    }

    70% {
        transform: scale(1.08);
        opacity: 0;
    }

    100% {
        transform: scale(1.08);
        opacity: 0;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .floating-whatsapp {
        right: 18px;
        bottom: 18px;

        min-height: 50px;

        padding:
            5px 14px 5px 6px;

        gap: 8px;
    }


    .floating-whatsapp-icon {
        width: 39px;
        height: 39px;

        font-size: 18px;
    }


    .floating-whatsapp-label {
        font-size: 0.70rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .floating-whatsapp {
        right: 14px;
        bottom: 14px;

        width: 50px;
        height: 50px;

        min-height: 50px;

        padding: 5px;

        justify-content: center;

        border-radius: 50%;
    }


    .floating-whatsapp-icon {
        width: 40px;
        height: 40px;

        font-size: 19px;

        background:
            transparent;

        color:
            var(--color-white);
    }


    .floating-whatsapp-label {
        display: none;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 375px) {

    .floating-whatsapp {
        right: 12px;
        bottom: 12px;

        width: 48px;
        height: 48px;
    }


    .floating-whatsapp-icon {
        width: 38px;
        height: 38px;

        font-size: 18px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .floating-whatsapp,
    .floating-whatsapp-icon {
        transition: none;
    }


    .floating-whatsapp::before {
        animation: none;
    }

}