/* ===============================
    FLOATING BUTTONS (Global)
=============================== */

.floating-buttons {
    position: fixed;
    /* Aligned to the right */
    right: 20px; 
    bottom: 20px;
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 10px; /* Space between buttons */
    z-index: 1100;
    pointer-events: none; /* prevent blocking other elements */
    align-items: flex-end; /* Align all children to the right */
    /* Removed width: 100% and justify-content: space-between */
}

/* Shared button styles */
.floating-buttons > div {
    width: 55px; /* Slightly larger button */
    height: 55px; /* Slightly larger button */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}


/* --- WhatsApp Button --- */
.float-whatsapp {
    background-color: var(--color-green);
    color: var(--color-white);
    position: relative;
}

.float-whatsapp:hover {
    transform: scale(1.05);
}

/* --- QR Popup --- */
.qr-popup {
    position: absolute;
    bottom: 0px; /* Aligned with the button */
    /* Positioned to the LEFT of the button */
    right: 65px; 
    background-color: var(--color-slate);
    padding: 0.8rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    
    /* Initially hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px); /* Slide from the right */
    transition: all 0.3s ease;
    width: 160px;
}

.qr-popup img {
    width: 100%;
    border-radius: 6px;
}

.qr-popup p {
    font-size: 0.75rem;
    color: var(--color-white);
    margin-top: 0.4rem;
}

/* KEY FIX: Show popup when the 'active' class is present (toggled by JS click) */
.float-whatsapp.active .qr-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Optional: Add a simple pointer/arrow effect */
.qr-popup::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px; /* Positioned just outside the box on the right */
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--color-slate); /* Matches popup background */
}

/* --- Back to Top Button --- */
.float-top {
    background-color: var(--color-slate);
    color: var(--color-green);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* visible when scrolling (toggled by JS) */
.float-top.show {
    opacity: 1;
    transform: translateY(0);
}

/* hover effect */
.float-top:hover {
    background-color: var(--color-green);
    color: var(--color-white);
    transform: scale(1.05);
}


/* --- Media Queries --- */
@media (max-width: 768px) {
    .floating-buttons {
        /* Align to the right on mobile as well, but closer to the edge */
        right: 15px;
        bottom: 15px; 
    }
    
    .floating-buttons > div {
        width: 50px;
        height: 50px;
    }

    /* Hide the QR popup on mobile view as per the JS logic */
    .qr-popup {
        display: none; 
    }
}