.wwo-whatsapp-cta { margin: 1.5em 0; } .wwo-whatsapp-cta__intro { margin-bottom: 0.6em; font-weight: 600; } .wwo-whatsapp-cta__fallback-note { margin-top: 0.5em; font-size: 0.85em; color: #666; max-width: 32em; } .wwo-whatsapp-button, .wwo-whatsapp-button:visited, .wwo-whatsapp-button:hover, .wwo-whatsapp-button:focus, .wwo-whatsapp-button:active { display: inline-flex; align-items: center; gap: 0.5em; background: linear-gradient(135deg, var(--wwo-color, #25D366) 0%, var(--wwo-color-dark, #1fae5a) 100%); color: #ffffff !important; padding: 0.75em 1.4em; border-radius: 999px; font-weight: 600; text-decoration: none !important; line-height: 1; box-shadow: 0 2px 10px rgba(var(--wwo-color-rgb, 37, 211, 102), 0.35); transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out; } .wwo-whatsapp-button:hover, .wwo-whatsapp-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--wwo-color-rgb, 37, 211, 102), 0.45); } .wwo-whatsapp-button:active { transform: translateY(0); } .wwo-btn-large .wwo-whatsapp-button { font-size: 1.05em; padding: 0.9em 1.7em; } .wwo-btn-small .wwo-whatsapp-button { font-size: 0.9em; padding: 0.55em 1.1em; } .wwo-whatsapp-button svg { flex-shrink: 0; } .wwo-whatsapp-button--secondary, .wwo-whatsapp-button--secondary:visited { background: transparent; color: var(--wwo-color-dark, #128C7E) !important; border: 1.5px solid var(--wwo-color, #25D366); padding: 0.5em 1em; box-shadow: none; } .wwo-whatsapp-button--secondary:hover, .wwo-whatsapp-button--secondary:focus { background: #e9f9ef; color: var(--wwo-color-dark, #128C7E) !important; box-shadow: none; transform: none; } .wwo-product-quick-order { margin-top: 0.75em; } .wwo-payment-channels { margin: 0.75em 0 1em; } .wwo-payment-channel { border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.6em 0.9em !important; margin-bottom: 0.5em !important; } .wwo-payment-channel__details { display: block; margin-top: 0.25em; margin-left: 1.6em; color: #666; font-size: 0.9em; } .wwo-payment-channel__note { display: block; margin-top: 0.25em; margin-left: 1.6em; color: #9a6700; font-size: 0.85em; font-style: italic; } /* * "Match my theme" quick-order button: intentionally NO color/background/ * border overrides here - the whole point is to inherit the theme's own * .button (or Blocksy's .ct-button) styling untouched. We only fix the * icon+text layout and spacing, which themes don't already handle for us. */ .wwo-whatsapp-quick-order-theme, .wwo-whatsapp-quick-order-theme:visited, .wwo-whatsapp-quick-order-theme:hover, .wwo-whatsapp-quick-order-theme:focus { display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none !important; } .wwo-whatsapp-quick-order-theme svg { flex-shrink: 0; } .wwo-product-quick-order--theme { margin-top: 0.6em; } /* ========================================================================== Floating WhatsApp help button Note: JS moves this element to be a direct child of at runtime, so `position: fixed` positions against the real viewport even on themes that put a CSS transform on or a wrapper (which otherwise quietly turns "fixed" into something scoped to that ancestor instead). ========================================================================== */ .wwo-floating { position: fixed; bottom: 24px; z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .wwo-floating--right { right: 24px; } .wwo-floating--left { left: 24px; } .wwo-floating__trigger, .wwo-floating__trigger:visited, .wwo-floating__trigger:hover, .wwo-floating__trigger:focus, .wwo-floating__trigger:active { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--wwo-color, #2fdd6f) 0%, var(--wwo-color-dark, #1da851) 100%); color: #ffffff !important; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(var(--wwo-color-rgb, 29, 168, 81), 0.45), 0 2px 6px rgba(0, 0, 0, 0.15); text-decoration: none !important; padding: 0; position: relative; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease-in-out; } .wwo-floating__trigger::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--wwo-color-rgb, 47, 221, 111), 0.55); animation: wwo-pulse 2.6s ease-out infinite; pointer-events: none; } @keyframes wwo-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--wwo-color-rgb, 47, 221, 111), 0.45); } 70% { box-shadow: 0 0 0 14px rgba(var(--wwo-color-rgb, 47, 221, 111), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--wwo-color-rgb, 47, 221, 111), 0); } } .wwo-floating:hover .wwo-floating__trigger, .wwo-floating__trigger:focus { transform: scale(1.08); box-shadow: 0 8px 24px rgba(var(--wwo-color-rgb, 29, 168, 81), 0.55), 0 2px 6px rgba(0, 0, 0, 0.18); } .wwo-floating.is-open .wwo-floating__trigger { transform: scale(1); } .wwo-floating__trigger svg { position: relative; z-index: 1; } /* Tooltip that slides in next to the button on hover (desktop). */ .wwo-floating__tooltip { position: absolute; bottom: 50%; transform: translateY(50%); background: #1f2a24; color: #ffffff; font-size: 0.85em; font-weight: 500; padding: 0.5em 0.9em; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .wwo-floating--right .wwo-floating__tooltip { right: calc(100% + 12px); transform: translateY(50%) translateX(6px); } .wwo-floating--left .wwo-floating__tooltip { left: calc(100% + 12px); transform: translateY(50%) translateX(-6px); } .wwo-floating:hover .wwo-floating__tooltip { opacity: 1; transform: translateY(50%) translateX(0); } .wwo-floating.is-open .wwo-floating__tooltip { opacity: 0; } @media (max-width: 782px) { .wwo-floating__tooltip { display: none; } } /* Contact picker panel */ .wwo-floating__panel { position: absolute; bottom: 74px; min-width: 240px; max-width: 300px; background: #ffffff; border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08); padding: 0.9em; opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.97); transform-origin: bottom; transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out, visibility 0.18s; } .wwo-floating.is-open .wwo-floating__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .wwo-floating--right .wwo-floating__panel { right: 0; } .wwo-floating--left .wwo-floating__panel { left: 0; } .wwo-floating__panel-header { display: flex; align-items: center; gap: 0.5em; padding-bottom: 0.6em; margin-bottom: 0.6em; border-bottom: 1px solid #ececec; } .wwo-floating__panel-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--wwo-color, #2fdd6f) 0%, var(--wwo-color-dark, #1da851) 100%); color: #ffffff; flex-shrink: 0; } .wwo-floating__panel-title { margin: 0; font-weight: 600; font-size: 0.95em; color: #222; } .wwo-floating__list { list-style: none; margin: 0; padding: 0; } .wwo-floating__list li + li { margin-top: 0.35em; } .wwo-floating__list a, .wwo-floating__list a:visited, .wwo-floating__list a:hover, .wwo-floating__list a:focus, .wwo-floating__list a:active { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.7em; border-radius: 10px; background-color: #f6f8f7; color: #17532f !important; text-decoration: none !important; font-size: 0.92em; font-weight: 500; transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out; } .wwo-floating__list a:hover, .wwo-floating__list a:focus { background-color: #e6f9ee; transform: translateX(2px); } .wwo-floating__list-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #ffffff; color: var(--wwo-color, #25D366); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(var(--wwo-color-rgb, 37, 211, 102), 0.25); }