/* ========================================================= AM WEBTECH - WHATSAPP LEAD WIDGET COMPLETE / FINAL CSS ========================================================= */ /* ========================================================= 1. MAIN WRAPPER ========================================================= */ .amw-wa-wrap { position: fixed !important; right: 25px !important; bottom: 25px !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 999999 !important; font-family: inherit !important; box-sizing: border-box !important; } /* ========================================================= 2. FLOATING WHATSAPP BUTTON ========================================================= */ .amw-wa-float { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 68px !important; height: 68px !important; min-width: 68px !important; min-height: 68px !important; max-width: 68px !important; max-height: 68px !important; margin: 0 !important; padding: 0 !important; background: #25D366 !important; border: 4px solid #d9fbe7 !important; border-radius: 50% !important; color: #ffffff !important; font-size: 0 !important; line-height: 1 !important; text-align: center !important; cursor: pointer !important; outline: none !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important; overflow: hidden !important; box-sizing: border-box !important; transform: translateZ(0) !important; backface-visibility: hidden !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } /* ========================================================= FLOAT BUTTON HOVER ========================================================= */ .amw-wa-float:hover { background: #25D366 !important; transform: scale(1.05) translateZ(0) !important; box-shadow: 0 9px 26px rgba(0, 0, 0, 0.22) !important; } /* ========================================================= FLOAT BUTTON ACTIVE ========================================================= */ .amw-wa-float:active { transform: scale(0.98) translateZ(0) !important; } /* ========================================================= FLOAT BUTTON FOCUS ========================================================= */ .amw-wa-float:focus, .amw-wa-float:focus-visible { outline: none !important; box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18), 0 6px 20px rgba(0, 0, 0, 0.18) !important; } /* ========================================================= 3. FLOATING WHATSAPP SVG IMPORTANT: Do NOT depend on .amw-wa-whatsapp-icon class. Your HTML currently has plain SVG. ========================================================= */ .amw-wa-float svg { position: static !important; display: block !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #ffffff !important; fill: #ffffff !important; stroke: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; overflow: visible !important; box-sizing: border-box !important; /* Force black SVG artwork to white if WordPress/theme applies black styling. */ filter: brightness(0) invert(1) !important; } /* ========================================================= FLOATING SVG PATH ========================================================= */ .amw-wa-float svg path { fill: #ffffff !important; stroke: none !important; opacity: 1 !important; transform: none !important; animation: none !important; box-sizing: border-box !important; } /* ========================================================= PREVENT THEME SVG OVERRIDES ========================================================= */ .amw-wa-float svg, .amw-wa-float svg *, .amw-wa-float svg path { animation: none !important; transition: none !important; transform-origin: center !important; box-sizing: border-box !important; } /* ========================================================= HIDE FLOAT BUTTON TEXT ========================================================= */ .amw-wa-float span { display: none !important; } /* ========================================================= 4. OVERLAY ========================================================= */ .amw-wa-overlay { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; background: rgba(0, 0, 0, 0.12) !important; z-index: 999998 !important; box-sizing: border-box !important; } .amw-wa-overlay[hidden] { display: none !important; } /* ========================================================= 5. MODAL CONTAINER ========================================================= */ .amw-wa-modal { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 20px 25px 105px 25px !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; box-sizing: border-box !important; z-index: 999999 !important; overflow-y: auto !important; pointer-events: none !important; } .amw-wa-modal[hidden] { display: none !important; } /* ========================================================= 6. POPUP CARD ========================================================= */ .amw-wa-card { position: relative !important; display: block !important; width: 395px !important; min-width: 0 !important; max-width: calc(100vw - 30px) !important; max-height: calc(100vh - 125px) !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; border-radius: 18px !important; overflow: hidden !important; box-sizing: border-box !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24) !important; pointer-events: auto !important; } /* ========================================================= 7. POPUP HEADER ========================================================= */ .amw-wa-header { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; min-height: 64px !important; margin: 0 !important; padding: 0 65px 0 20px !important; background: #211626 !important; border: 0 !important; box-sizing: border-box !important; } /* ========================================================= 8. POPUP TITLE ========================================================= */ .amw-wa-title { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: inherit !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: left !important; white-space: nowrap !important; } /* ========================================================= 9. CLOSE BUTTON ========================================================= */ .amw-wa-close { position: absolute !important; top: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 58px !important; height: 64px !important; min-width: 58px !important; min-height: 64px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #ffffff !important; font-family: Arial, sans-serif !important; font-size: 25px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; outline: none !important; } .amw-wa-close:hover { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } .amw-wa-close span { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 25px !important; line-height: 1 !important; } /* ========================================================= 10. POPUP CONTENT ========================================================= */ .amw-wa-content { display: block !important; width: 100% !important; margin: 0 !important; padding: 25px 25px 18px !important; background: #ffffff !important; box-sizing: border-box !important; } /* ========================================================= 11. INTRO TEXT ========================================================= */ .amw-wa-subtitle { display: block !important; width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; color: #475467 !important; font-family: inherit !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.55 !important; text-align: left !important; } /* ========================================================= 12. FORM ========================================================= */ .amw-wa-form { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= 13. FORM FIELD ========================================================= */ .amw-wa-field { display: block !important; width: 100% !important; margin: 0 0 15px !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= 14. FIELD LABEL ========================================================= */ .amw-wa-field label { display: block !important; width: 100% !important; margin: 0 0 6px !important; padding: 0 !important; color: #344054 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: left !important; } .amw-wa-field label b { color: #d92d20 !important; } /* ========================================================= 15. INPUT + TEXTAREA ========================================================= */ .amw-wa-field input, .amw-wa-field textarea { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; border: 1px solid #d0d5dd !important; border-radius: 9px !important; background: #ffffff !important; color: #101828 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; outline: none !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } /* Name / Phone */ .amw-wa-field input { height: 46px !important; min-height: 46px !important; max-height: 46px !important; padding: 10px 14px !important; } /* Message */ .amw-wa-field textarea { height: 96px !important; min-height: 96px !important; max-height: 180px !important; padding: 11px 14px !important; resize: vertical !important; } /* Placeholder */ .amw-wa-field input::placeholder, .amw-wa-field textarea::placeholder { color: #98a2b3 !important; opacity: 1 !important; } /* Focus */ .amw-wa-field input:focus, .amw-wa-field textarea:focus { border-color: #FD7E14 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.10) !important; } /* ========================================================= 16. CONSENT ========================================================= */ .amw-wa-consent { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; margin: 5px 0 15px !important; padding: 0 !important; color: #667085 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: left !important; box-sizing: border-box !important; } .amw-wa-consent input { display: block !important; flex: 0 0 16px !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; margin: 1px 0 0 !important; padding: 0 !important; accent-color: #FD7E14 !important; } /* ========================================================= 17. ERROR MESSAGE ========================================================= */ .amw-wa-error { display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 0 7px !important; padding: 0 !important; color: #b42318 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: left !important; } /* ========================================================= 18. GREEN CHAT BUTTON ========================================================= */ .amw-wa-submit { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 50px !important; min-width: 0 !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 9px !important; color: #ffffff !important; font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; cursor: pointer !important; box-shadow: none !important; outline: none !important; appearance: none !important; -webkit-appearance: none !important; overflow: hidden !important; box-sizing: border-box !important; transition: background-color .2s ease, transform .2s ease !important; } .amw-wa-submit:hover { color: #ffffff !important; transform: translateY(-1px) !important; } .amw-wa-submit:disabled { opacity: .7 !important; cursor: wait !important; transform: none !important; } /* ========================================================= 19. CRITICAL: WHATSAPP ICON INSIDE CHAT BUTTON ========================================================= */ .amw-wa-submit svg.amw-wa-submit-icon, .amw-wa-submit > svg { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; display: block !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; flex: 0 0 22px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #ffffff !important; fill: #ffffff !important; stroke: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; rotate: none !important; scale: none !important; translate: none !important; overflow: visible !important; box-sizing: border-box !important; position: static !important; } /* Actual SVG path */ .amw-wa-submit svg.amw-wa-submit-icon path, .amw-wa-submit > svg path { display: block !important; fill: #ffffff !important; stroke: none !important; transform: none !important; box-sizing: border-box !important; } /* Prevent global SVG rules */ .amw-wa-submit svg, .amw-wa-submit svg *, .amw-wa-submit svg path { max-width: 22px !important; max-height: 22px !important; box-sizing: border-box !important; } /* ========================================================= 20. BUTTON TEXT ========================================================= */ .amw-wa-submit .amw-wa-submit-text { display: inline-block !important; width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; transform: none !important; } /* ========================================================= 21. SPINNER ========================================================= */ .amw-wa-spinner { display: none !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; margin-left: 5px !important; border: 2px solid rgba(255,255,255,.40) !important; border-top-color: #ffffff !important; border-radius: 50% !important; } .amw-wa-spinner:not([hidden]) { display: inline-block !important; animation: amw-wa-spin .7s linear infinite !important; } @keyframes amw-wa-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= 22. PRIVACY TEXT ========================================================= */ .amw-wa-privacy { display: block !important; width: 100% !important; margin: 9px 0 0 !important; padding: 0 !important; color: #98a2b3 !important; font-family: inherit !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.3 !important; text-align: center !important; } /* ========================================================= 23. POWERED BY ========================================================= */ .amw-wa-powered { display: block !important; width: 100% !important; margin: 8px 0 0 !important; padding: 0 !important; color: #667085 !important; font-family: inherit !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.3 !important; text-align: center !important; } .amw-wa-powered strong { color: #344054 !important; font-weight: 600 !important; } /* ========================================================= 24. HONEYPOT ========================================================= */ .amw-wa-hp { position: absolute !important; left: -99999px !important; top: auto !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 25. BODY LOCK ========================================================= */ .amw-wa-lock { overflow: hidden !important; } /* ========================================================= 26. MOBILE ========================================================= */ @media (max-width: 600px) { /* Floating wrapper */ .amw-wa-wrap { right: 15px !important; bottom: 15px !important; left: auto !important; } /* Floating button */ .amw-wa-float { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; max-width: 60px !important; max-height: 60px !important; border-width: 3px !important; } .amw-wa-float svg { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; flex: 0 0 32px !important; } /* Modal */ .amw-wa-modal { align-items: flex-end !important; justify-content: flex-end !important; padding: 10px 10px 85px 10px !important; } /* Card */ .amw-wa-card { width: 100% !important; max-width: 395px !important; max-height: calc(100vh - 100px) !important; border-radius: 16px !important; } /* Header */ .amw-wa-header { min-height: 58px !important; padding: 0 58px 0 18px !important; } /* Title */ .amw-wa-title { font-size: 16px !important; } /* Close */ .amw-wa-close { width: 52px !important; height: 58px !important; min-width: 52px !important; min-height: 58px !important; font-size: 23px !important; } /* Content */ .amw-wa-content { padding: 20px 18px 16px !important; } /* Intro */ .amw-wa-subtitle { margin-bottom: 17px !important; font-size: 14px !important; line-height: 1.5 !important; } /* Fields */ .amw-wa-field { margin-bottom: 13px !important; } .amw-wa-field input { height: 44px !important; min-height: 44px !important; max-height: 44px !important; } .amw-wa-field textarea { height: 82px !important; min-height: 82px !important; } /* Submit */ .amw-wa-submit { height: 48px !important; min-height: 48px !important; max-height: 48px !important; } /* Submit icon */ .amw-wa-submit svg.amw-wa-submit-icon, .amw-wa-submit > svg { width: 21px !important; height: 21px !important; min-width: 21px !important; min-height: 21px !important; max-width: 21px !important; max-height: 21px !important; flex: 0 0 21px !important; } /* Button text */ .amw-wa-submit .amw-wa-submit-text { font-size: 14px !important; } } /* ========================================================= 27. EXTRA STRONG OVERRIDE This prevents the theme from enlarging the SVG ========================================================= */ html body .amw-wa-wrap .amw-wa-float svg { display: block !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; fill: #ffffff !important; color: #ffffff !important; stroke: none !important; filter: brightness(0) invert(1) !important; transform: none !important; animation: none !important; } html body .amw-wa-wrap .amw-wa-float svg path { fill: #ffffff !important; stroke: none !important; transform: none !important; animation: none !important; } /* ========================================================= 27. MOBILE EXTRA ICON OVERRIDE ========================================================= */ @media (max-width: 600px) { html body .amw-wa-wrap .amw-wa-float svg { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; } .amw-wa-card { display: flex !important; flex-direction: column !important; } .amw-wa-form { overflow-y: auto !important; } }