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

/* General Base Style for both */
#whatsapp-button,
#scroll-up {
    position: fixed !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2000 !important;
    /* Extremely high z-index */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* WhatsApp Button - Left Side */
#whatsapp-button {
    bottom: 2.5rem !important;
    left: 2.2rem !important;
    right: auto !important;
    background-color: #25D366 !important;
    color: #fff !important;
}

#whatsapp-button i {
    font-size: 2.2rem !important;
}

#whatsapp-button:hover {
    background-color: #128C7E !important;
    transform: scale(1.1) !important;
}

/* Scroll Up Button - Right Side */
#scroll-up {
    bottom: 2.5rem !important;
    right: 2.2rem !important;
    left: auto !important;
    background-color: #efc1a9 !important;
    color: #fff !important;
}

#scroll-up i {
    font-size: 1.8rem !important;
}

#scroll-up:hover {
    background-color: #d4a89a !important;
    transform: scale(1.1) !important;
}

/*=============== RESPONSIVE DESIGN ===============*/

@media screen and (max-width: 768px) {

    #whatsapp-button,
    #scroll-up {
        width: 3.2rem !important;
        height: 3.2rem !important;
        bottom: 1.5rem !important;
    }

    #whatsapp-button {
        left: 1.25rem !important;
    }

    #scroll-up {
        right: 1.25rem !important;
    }

    #whatsapp-button i {
        font-size: 1.8rem !important;
    }

    #scroll-up i {
        font-size: 1.6rem !important;
    }
}

/* RTL Support - Flip sides if appropriate, but keeping them separate is the goal */
body.rtl #whatsapp-button {
    left: auto !important;
    right: 2.2rem !important;
}

body.rtl #scroll-up {
    right: auto !important;
    left: 2.2rem !important;
}

@media screen and (max-width: 768px) {
    body.rtl #whatsapp-button {
        right: 1.25rem !important;
    }

    body.rtl #scroll-up {
        left: 1.25rem !important;
    }
}

/* Dark Theme Adjustments */
body.dark-theme #scroll-up {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Floating buttons are now enabled */