/* =========================================================
   FLOATING CONTACT
========================================================= */

.floating-contact {

    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 999999;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;
}


/* =========================================================
   MAIN TOGGLE
========================================================= */

.floating-contact-toggle {

    width: 58px;
    height: 58px;

    border: none;
    border-radius: 50%;

    background: #D4AF37;
    color: #101010;

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

    cursor: pointer;

    font-size: 24px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.35);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.floating-contact-toggle:hover {

    background: #E5C45A;

    transform: scale(1.08);

    box-shadow:
        0 10px 30px rgba(212, 175, 55, 0.35);
}


/* =========================================================
   OPTIONS
========================================================= */

.floating-contact-options {

    display: none;

    flex-direction: column;

    gap: 10px;

    align-items: center;
}


/* =========================================================
   OPEN STATE
========================================================= */

.floating-contact.is-open
.floating-contact-options {

    display: flex;
}


/* =========================================================
   COMMON OPTION BUTTON
========================================================= */

.floating-contact-btn {

    width: 54px;
    height: 54px;

    border-radius: 50%;

    border: none;

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

    text-decoration: none;

    cursor: pointer;

    font-size: 21px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   PHONE
========================================================= */

.phone-btn {

    background: #12D98B;
    color: #FFFFFF;
}

.phone-btn:hover {

    transform: scale(1.08);

    box-shadow:
        0 8px 25px rgba(18, 217, 139, .30);
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-btn {

    background: #25D366;
    color: #FFFFFF;
}

.whatsapp-btn:hover {

    transform: scale(1.08);

    box-shadow:
        0 8px 25px rgba(37, 211, 102, .30);
}


/* =========================================================
   CLOSE
========================================================= */

.close-btn {

    background: #8BD58F;
    color: #FFFFFF;
}

.close-btn:hover {

    background: #78C77D;

    transform: scale(1.08);
}


/* =========================================================
   OPEN ANIMATION
========================================================= */

.floating-contact.is-open
.floating-contact-options
.floating-contact-btn {

    animation: floatingContactReveal .3s ease both;
}


.floating-contact.is-open
.floating-contact-options
.floating-contact-btn:nth-child(1) {

    animation-delay: .05s;
}


.floating-contact.is-open
.floating-contact-options
.floating-contact-btn:nth-child(2) {

    animation-delay: .10s;
}


.floating-contact.is-open
.floating-contact-options
.floating-contact-btn:nth-child(3) {

    animation-delay: .15s;
}


@keyframes floatingContactReveal {

    from {

        opacity: 0;

        transform:
            translateY(15px)
            scale(.8);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

@media (max-width: 768px) {

    .floating-contact {

        right: 16px;
        bottom: 18px;

    }

    .floating-contact-toggle {

        width: 54px;
        height: 54px;

        font-size: 22px;

    }

    .floating-contact-btn {

        width: 50px;
        height: 50px;

        font-size: 19px;

    }

}


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

@media (max-width: 480px) {

    .floating-contact {

        right: 14px;
        bottom: 15px;

    }

    .floating-contact-toggle {

        width: 52px;
        height: 52px;

    }

    .floating-contact-btn {

        width: 48px;
        height: 48px;

    }

}