/* ===== WhatsApp Button - Strict White Color Fix ===== */

:root {
    --whatsapp-green: #25d366;
    --whatsapp-shadow: rgba(0, 0, 0, 0.15);
    --fluid-curve: cubic-bezier(0.77, 0, 0.175, 1);
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 56px;
    
    display: flex;
    align-items: center;

    background-color: var(--whatsapp-green);
    /* Website ki theme ko block karne ke liye !important lagaya hai */
    color: #ffffff !important; 
    
    border-radius: 50px;
    z-index: 9999;
    box-shadow: 0 4px 15px var(--whatsapp-shadow);
    text-decoration: none !important;
    
    overflow: hidden;
    white-space: nowrap;
    max-width: 56px; 
    
    animation: fluid-expand 8s var(--fluid-curve) infinite;
    transition: max-width 0.6s var(--fluid-curve); 
}

.whatsapp-icon-wrapper {
    min-width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    z-index: 2;
    color: #ffffff !important;
}

.whatsapp-text {
    font-size: 15px;
    font-weight: 600;
    font-family: sans-serif;
    padding-right: 20px;
    
    transform: translateX(-20px);
    opacity: 0;
    color: #ffffff !important;
    
    animation: text-fluid-reveal 8s var(--fluid-curve) infinite;
    transition: all 0.6s var(--fluid-curve);
}

/* ===== Hover State ===== */
.whatsapp-float:hover {
    max-width: 360px !important;
    animation-play-state: paused !important;
    /* Hover par bhi force white */
    color: #ffffff !important; 
}

.whatsapp-float:hover .whatsapp-text {
    opacity: 1 !important; 
    transform: translateX(0) !important; 
    animation-play-state: paused !important;
    color: #ffffff !important;
}

/* ===== Fluid Keyframes ===== */
@keyframes fluid-expand {
    0%, 10% { max-width: 56px; }
    30%, 75% { max-width: 360px; }
    90%, 100% { max-width: 56px; }
}

@keyframes text-fluid-reveal {
    0%, 10% { opacity: 0; transform: translateX(-20px); }
    30%, 75% { opacity: 1; transform: translateX(0); }
    90%, 100% { opacity: 0; transform: translateX(-20px); }
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 480px) {
    .whatsapp-float {
        bottom: 15px;
        right: 15px;
    }
    .whatsapp-text {
        font-size: 13px;
        padding-right: 15px;
    }
    @keyframes fluid-expand {
        0%, 10% { max-width: 56px; }
        30%, 75% { max-width: 300px; }
        90%, 100% { max-width: 56px; }
    }
}