/* ============================================================ WhatsApp Button Module – whatsapp.css Version: 1.0.0 ============================================================ */ /* ---- Main container --------------------------------------- */ /* Hidden by default; JS adds .wsp-ready after moving the element to , which ensures position:fixed is always viewport-relative and the widget never flashes before the page has settled. */ .whatsapp-float-container { position: fixed; bottom: 28px; z-index: 9999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; pointer-events: none; opacity: 0; visibility: hidden; } /* gap fallback: with column-reverse the popup is DOM-last/visually-first; add bottom margin on it to separate it from the button below */ .whatsapp-float-container .whatsapp-popup { margin-bottom: 10px; } .whatsapp-float-container.wsp-ready { opacity: 1; visibility: visible; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .whatsapp-float-container.whatsapp-position-right { right: 24px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .whatsapp-float-container.whatsapp-position-left { left: 24px; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } /* ---- Floating toggle button ------------------------------- */ .whatsapp-toggle-btn { pointer-events: all; width: 60px; height: 60px; border-radius: 50%; background-color: #25D366; border: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45); -webkit-transition: -webkit-transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; position: relative; outline: none; -ms-flex-negative: 0; flex-shrink: 0; } .whatsapp-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(37, 211, 102, 0.55); } .whatsapp-toggle-btn:focus { outline: 3px solid #075E54; outline-offset: 3px; } .whatsapp-toggle-btn.wsp-active { background-color: #128C7E; } .whatsapp-icon-open, .whatsapp-icon-close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .whatsapp-icon-close { display: none; } /* ---- Notification badge ----------------------------------- */ .whatsapp-badge { position: absolute; top: -3px; right: -3px; background-color: #e53935; color: #fff; border-radius: 50%; min-width: 20px; height: 20px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; -webkit-animation: wsp-badge-pulse 2.2s ease-in-out infinite; animation: wsp-badge-pulse 2.2s ease-in-out infinite; padding: 0 3px; } .whatsapp-badge.wsp-badge-hidden { display: none; } @-webkit-keyframes wsp-badge-pulse { 0%,100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes wsp-badge-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } } /* ---- Popup ------------------------------------------------ */ .whatsapp-popup { pointer-events: none; width: 305px; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 32px rgba(0,0,0,0.22); -webkit-transform: scale(0.8) translateY(12px); transform: scale(0.8) translateY(12px); -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; opacity: 0; } .whatsapp-position-left .whatsapp-popup { -webkit-transform-origin: bottom left; transform-origin: bottom left; } .whatsapp-popup.wsp-open { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); opacity: 1; pointer-events: all; } /* ---- Popup – Header --------------------------------------- */ .whatsapp-popup-header { background: linear-gradient(135deg, #075E54 0%, #128C7E 100%); padding: 14px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .whatsapp-popup-header > * + * { margin-left: 10px; } .whatsapp-popup-header-icon { width: 46px; height: 46px; border-radius: 50%; background-color: rgba(255,255,255,0.18); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .whatsapp-popup-header-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .whatsapp-popup-title { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; display: block; } .whatsapp-popup-subtitle { color: rgba(255,255,255,0.82); font-size: 12px; margin-top: 2px; display: block; } .whatsapp-popup-close { background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: 0.75; padding: 0; flex-shrink: 0; transition: opacity 0.2s; margin-left: auto; } .whatsapp-popup-close:hover { opacity: 1; } /* ---- Popup – Body ----------------------------------------- */ .whatsapp-popup-body { background-color: #ECE5DD; padding: 14px 14px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .whatsapp-popup-body > * + * { margin-top: 12px; } /* ---- Chat bubble ------------------------------------------ */ .whatsapp-message-bubble { background-color: #fff; border-radius: 0 10px 10px 10px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); position: relative; } .whatsapp-message-bubble::before { content: ''; position: absolute; top: 0; left: -9px; width: 0; height: 0; border-top: 9px solid #fff; border-left: 9px solid transparent; } .whatsapp-position-left .whatsapp-message-bubble { border-radius: 10px 0 10px 10px; } .whatsapp-position-left .whatsapp-message-bubble::before { left: auto; right: -9px; border-left: none; border-right: 9px solid transparent; border-top: 9px solid #fff; } .whatsapp-message-bubble p { margin: 0 0 5px; font-size: 14px; color: #333; line-height: 1.45; } .whatsapp-message-bubble p:last-child { margin-bottom: 0; } .whatsapp-phone-display { color: #128C7E !important; font-weight: 600; font-size: 13px !important; margin-top: 8px !important; } /* ---- Action button (CTA) ---------------------------------- */ .whatsapp-open-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #25D366; color: #fff !important; text-decoration: none !important; padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; -webkit-transition: background-color 0.2s ease, -webkit-transform 0.15s ease; transition: background-color 0.2s ease, transform 0.15s ease; text-align: center; box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35); } .whatsapp-open-btn svg { margin-right: 8px; -ms-flex-negative: 0; flex-shrink: 0; } .whatsapp-open-btn:hover, .whatsapp-open-btn:focus { background-color: #1ebe5a; -webkit-transform: translateY(-1px); transform: translateY(-1px); color: #fff !important; text-decoration: none !important; } .whatsapp-open-btn:active { -webkit-transform: translateY(0); transform: translateY(0); } /* ---- Responsive ------------------------------------------- */ @media (max-width: 480px) { .whatsapp-float-container.whatsapp-position-right { right: 14px; } .whatsapp-float-container.whatsapp-position-left { left: 14px; } .whatsapp-float-container { bottom: 18px; } .whatsapp-popup { width: 272px; } .whatsapp-toggle-btn { width: 54px; height: 54px; } } /* ---- Reduced-motion accessibility ------------------------- */ @media (prefers-reduced-motion: reduce) { .whatsapp-toggle-btn, .whatsapp-popup, .whatsapp-open-btn, .whatsapp-float-container.wsp-ready { -webkit-transition: none; transition: none; } .whatsapp-badge { -webkit-animation: none; animation: none; } }