/**
 * Call Center Alignment Fix
 * Centers the call support popup when hovering over the call button
 */

/* Override the inline styles for proper centering */
.call-support {
    position: fixed !important;
    right: auto !important;
    left: 50% !important;
    bottom: 240px !important;
    transform: translateX(-50%) translateY(20px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    min-width: 300px !important;
    max-width: 400px !important;
    z-index: 1001 !important;
}

/* Show the call support when hovering over the call button */
.call-btn:hover .call-support {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure proper layout for call content */
.call-support .call-content {
    padding: 20px;
}

/* Better mobile responsiveness */
@media (max-width: 768px) {
    .call-support {
        min-width: 280px !important;
        max-width: calc(100vw - 40px) !important;
        bottom: 200px !important;
    }
}

/* Ensure the call button stays in proper position */
.fixed-btns .call-btn {
    position: relative;
    overflow: visible;
}

/* Add a subtle animation for smoother appearance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.call-btn:hover .call-support {
    animation: fadeInUp 0.3s ease forwards;
}