/* ============================================================
   FIX: Floating Call & Email Buttons
   - True overlay (no space taken in document flow)
   - Semi-transparent background
   ============================================================ */

#floatingContact {
    position: fixed !important;
    right: 15px !important;
    bottom: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 99999 !important;

    /* Remove any margin/padding that could affect layout */
    margin: 0 !important;
    padding: 0 !important;

    /* Ensure it never participates in document flow */
    width: auto !important;
    height: auto !important;
}

.floating-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    font-size: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s, opacity 0.3s !important;

    /* Semi-transparent background */
    opacity: 0.75 !important;
}

.floating-btn:hover {
    transform: scale(1.1) !important;
    opacity: 1 !important;         /* fully opaque on hover */
    color: #fff !important;
}

.call-btn {
    background: rgba(37, 211, 102, 0.82) !important;   /* WhatsApp green, 82% */
    color: #fff !important;
}

.email-btn {
    background: rgba(177, 98, 69, 0.82) !important;    /* brand color, 82% */
    color: #fff !important;
}

/* On mobile: slightly smaller so they don't crowd the screen */
@media (max-width: 576px) {
    #floatingContact {
        right: 10px !important;
        bottom: 20px !important;
        gap: 8px !important;
    }

    .floating-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 17px !important;
    }
}