/* Floating contact separated CSS - moved from layouts/app.blade.php */

/* ============================================
         FLOATING SOCIAL MEDIA & CONTACT BUTTONS STYLES
         ============================================ */
    .floating-contact {
        position: fixed;
        bottom: 100px;
        right: 30px;
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .floating-whatsapp,
    .floating-call,
    .floating-instagram,
    .floating-facebook,
    .floating-youtube {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        text-decoration: none;
        transition: all 0.3s ease;
        position: relative;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        color: #fff;
    }

    .floating-whatsapp {
        background: #25D366;
    }

    .floating-call {
        background: #0d53e9;
    }

    .floating-instagram {
        background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    }

    .floating-facebook {
        background: #1877F2;
    }

    .floating-youtube {
        color: red;
        background: #ffffff;
    }

    .floating-whatsapp i,
    .floating-call i,
    .floating-instagram i,
    .floating-facebook i,
    .floating-youtube i {
        font-size: 26px;
    }

    /* Hover Effects - Scale and Shadow only (no background change) */
    .floating-whatsapp:hover,
    .floating-call:hover,
    .floating-instagram:hover,
    .floating-facebook:hover,
    .floating-youtube:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
        color: #fff;
        text-decoration: none;
    }

    /* Maintain original colors on hover */
    .floating-whatsapp:hover {
        background: #25D366;
    }

    .floating-call:hover {
        background: #0d53e9;
    }

    .floating-instagram:hover {
        background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    }

    .floating-facebook:hover {
        background: #1877F2;
    }

    .floating-youtube:hover {
        color: red;
        background: #ffffff;
    }

    /* Pulse Animation for WhatsApp only */
    .floating-whatsapp {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
        }
        70% {
            box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        }
    }

    /* Prevent conflict with back-to-top button */
    #back-to-top {
        bottom: 280px;
        right: 30px;
    }

    /* ============================================
         RESPONSIVE STYLES
         ============================================ */
    @media (max-width: 768px) {
        .floating-contact {
            bottom: 80px;
            right: 15px;
            gap: 10px;
        }
        
        .floating-whatsapp,
        .floating-call,
        .floating-instagram,
        .floating-facebook,
        .floating-youtube {
            width: 48px;
            height: 48px;
        }
        
        .floating-whatsapp i,
        .floating-call i,
        .floating-instagram i,
        .floating-facebook i,
        .floating-youtube i {
            font-size: 22px;
        }
        
        #back-to-top {
            bottom: 230px;
            right: 15px;
        }
    }

    @media (max-width: 480px) {
        .floating-contact {
            bottom: 100px;
            right: 12px;
            gap: 8px;
        }
        
        .floating-whatsapp,
        .floating-call,
        .floating-instagram,
        .floating-facebook,
        .floating-youtube {
            width: 42px;
            height: 42px;
        }
        
        .floating-whatsapp i,
        .floating-call i,
        .floating-instagram i,
        .floating-facebook i,
        .floating-youtube i {
            font-size: 18px;
        }
        
        #back-to-top {
            bottom: 190px;
            right: 12px;
        }
    }