﻿
/* 🔥 Ultra-Premium WhatsApp CSS 🔥 */
.wa-premium-menu {
    position: absolute;
    bottom: 70px; /* TextBox ke theek upar set karein */
    left: 20px;
    background: rgba(255, 255, 255, 0.98); /* Bright Premium White */
    backdrop-filter: blur(8px); /* Apple/WhatsApp Jaisa Blur Effect */
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 24px 20px 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    min-width: 320px;
    animation: waBouncyPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: bottom left;
    border: 1px solid rgba(0,0,0,0.05);
}

.wa-attach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 15px;
}

.wa-attach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .wa-attach-item:hover {
        transform: translateY(-4px) scale(1.05);
    }

    .wa-attach-item:active {
        transform: scale(0.95);
    }

.wa-icon-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.wa-attach-item span {
    font-size: 13px;
    color: #54656f;
    font-weight: 500;
    font-family: 'Segoe UI', Helvetica, sans-serif;
}

/* 🔥 Premium Gradient Colors For Icons 🔥 */
.bg-doc {
    background: linear-gradient(135deg, #7F66FF, #5A35FF);
}

.bg-camera {
    background: linear-gradient(135deg, #FF455E, #D81A35);
}

.bg-gallery {
    background: linear-gradient(135deg, #C250D6, #A12BBA);
}

.bg-audio {
    background: linear-gradient(135deg, #F97C2B, #E45500);
}

.bg-location {
    background: linear-gradient(135deg, #10B981, #059669);
}
.bg-contact {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}


/* Pop Animation */
@@keyframes waBouncyPop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
