/* Premium WhatsApp Button Styles - Universal Compatibility */ .whatsapp-button { position: fixed !important; bottom: 20px !important; right: 20px !important; top: auto !important; left: auto !important; width: 60px !important; height: 60px !important; background: linear-gradient(135deg, #25D366 0%, #1DA851 100%) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; z-index: 2147483647 !important; text-decoration: none !important; opacity: 0.9 !important; border: none !important; margin: 0 !important; padding: 0 !important; font-family: inherit !important; font-size: inherit !important; line-height: 1 !important; color: inherit !important; background-clip: padding-box !important; outline: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; pointer-events: auto !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; animation: glowPulse 5s ease-in-out infinite !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; -moz-transform: translateZ(0) !important; -ms-transform: translateZ(0) !important; will-change: transform !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } @keyframes glowPulse { 0%, 60% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1) !important; } 75% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.5), 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(37, 211, 102, 1), 0 0 25px rgba(37, 211, 102, 1), 0 0 50px rgba(37, 211, 102, 0.8), 0 0 75px rgba(37, 211, 102, 0.6), 0 0 100px rgba(37, 211, 102, 0.4), 0 0 125px rgba(37, 211, 102, 0.2) !important; } 85% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.5), 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 12px rgba(37, 211, 102, 0.9), 0 0 30px rgba(37, 211, 102, 0.9), 0 0 60px rgba(37, 211, 102, 0.7), 0 0 90px rgba(37, 211, 102, 0.5), 0 0 120px rgba(37, 211, 102, 0.3), 0 0 150px rgba(37, 211, 102, 0.1) !important; } 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 25px rgba(37, 211, 102, 0), 0 0 40px rgba(37, 211, 102, 0.4), 0 0 80px rgba(37, 211, 102, 0.2), 0 0 120px rgba(37, 211, 102, 0.1), 0 0 160px rgba(37, 211, 102, 0), 0 0 200px rgba(37, 211, 102, 0) !important; } } .whatsapp-button:hover { transform: scale(1.05) !important; box-shadow: 0 6px 16px rgba(37, 211, 102, 0.25), 0 3px 8px rgba(0, 0, 0, 0.15) !important; opacity: 1 !important; animation: none !important; } .whatsapp-button:active { transform: scale(0.98) !important; transition: all 0.1s ease !important; } .whatsapp-button svg { width: 32px !important; height: 32px !important; fill: white !important; transition: all 0.3s ease !important; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; pointer-events: none !important; } .whatsapp-tooltip { position: absolute !important; right: 75px !important; top: 50% !important; transform: translateY(-50%) translateX(5px) !important; background: rgba(255, 100, 100, 0.9) !important; color: white !important; padding: 8px 12px !important; border-radius: 6px !important; font-size: 12px !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; z-index: 2147483647 !important; pointer-events: none !important; font-family: Arial, sans-serif !important; font-weight: normal !important; line-height: 1.2 !important; text-align: left !important; border: none !important; margin: 0 !important; } .whatsapp-tooltip::after { content: '' !important; position: absolute !important; top: 50% !important; left: 100% !important; margin-top: -4px !important; border-width: 4px !important; border-style: solid !important; border-color: transparent transparent transparent rgba(255, 100, 100, 0.9) !important; width: 0 !important; height: 0 !important; } .whatsapp-button:hover .whatsapp-tooltip { opacity: 1 !important; visibility: visible !important; transform: translateY(-50%) translateX(0) !important; } @media (max-width: 768px) { .whatsapp-button { width: 55px !important; height: 55px !important; bottom: 15px !important; right: 15px !important; top: auto !important; left: auto !important; position: fixed !important; } .whatsapp-button svg { width: 28px !important; height: 28px !important; } .whatsapp-tooltip { right: 70px !important; font-size: 11px !important; padding: 6px 10px !important; } } /* Additional compatibility fixes */ .whatsapp-button * { box-sizing: border-box !important; } /* Ensure button works in iframes */ .whatsapp-button { position: fixed !important; } /* RTL language support */ [dir="rtl"] .whatsapp-button { right: auto !important; left: 20px !important; top: auto !important; bottom: 20px !important; position: fixed !important; } [dir="rtl"] .whatsapp-tooltip { right: auto !important; left: 75px !important; } [dir="rtl"] .whatsapp-tooltip::after { left: auto !important; right: 100% !important; border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent !important; } @media (max-width: 768px) { [dir="rtl"] .whatsapp-button { left: 15px !important; top: auto !important; bottom: 15px !important; position: fixed !important; } [dir="rtl"] .whatsapp-tooltip { left: 70px !important; } }