/* =========================================
   FLOATING BUTTONS
========================================= */

.floating-buttons {
    position: fixed;
    right: 18px;
    bottom: 24px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 14px;

    transition: transform .35s ease, opacity .35s ease;
}

.floating-buttons a {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-width: 145px;
    height: 52px;
    padding: 0 18px;
    gap: 11px;

    border-radius: 50px;

    color: #ffffff;
    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    -webkit-tap-highlight-color: transparent;

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

.floating-buttons a i {
    width: 26px;
    flex-shrink: 0;

    font-size: 23px;
    line-height: 1;
    text-align: center;
}

.floating-buttons a span {
    display: inline-block;
    white-space: nowrap;
}

/* Call Button */

.floating-buttons .call-btn {
    background: #0d6efd;
}

/* WhatsApp Button */

.floating-buttons .whatsapp-btn {
    background: #25D366;
}

/* Hover Effect */

@media (hover: hover) {

    .floating-buttons a:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.30);
    }

}

/* Focus */

.floating-buttons a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Active */

.floating-buttons a:active {
    transform: scale(.96);
}

/* Hide Animation */

.floating-buttons.hide-floating {
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
}

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

@media (max-width: 600px) {

    .floating-buttons {

        right: max(10px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));

        gap: 8px;
    }

    .floating-buttons a {

        width: 92px;
        min-width: 92px;
        height: 36px;

        padding: 0 8px;
        gap: 5px;

        border-radius: 25px;

        justify-content: flex-start;

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

        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.20);
    }

    .floating-buttons a i {

        width: 15px;
        font-size: 14px;
        text-align: center;
    }

    .floating-buttons a span {
        white-space: nowrap;
    }

}

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

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

    .floating-buttons a {
        transition: none;
    }

    .floating-buttons a:hover,
    .floating-buttons a:active {
        transform: none;
    }

}