/* ========================================================================== WhatsApp — floating site-wide button + trust-stats WhatsApp card Dark-theme friendly official green with a soft glow/pulse. ========================================================================== */ /* ---------- Floating button ---------- */ .lss-wa-float { position: fixed; bottom: 20px; /* RTL-aware: inline-start = right edge in an RTL document. */ inset-inline-start: 20px; z-index: 900; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; background: #25d366; box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.14), 0 8px 24px -6px rgba(37, 211, 102, 0.55), 0 0 34px rgba(37, 211, 102, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, bottom 0.25s ease; animation: lss-wa-pulse 2.6s ease-out infinite; } .lss-wa-float:hover, .lss-wa-float:focus-visible { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 8px rgba(37, 211, 102, 0.18), 0 12px 30px -6px rgba(37, 211, 102, 0.7), 0 0 46px rgba(37, 211, 102, 0.5); } .lss-wa-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .lss-wa-float svg { width: 30px; height: 30px; } /* Soft outward pulse ring that fits the dark theme (glow, not a harsh ring). */ @keyframes lss-wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45), 0 8px 24px -6px rgba(37, 211, 102, 0.55), 0 0 34px rgba(37, 211, 102, 0.35); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 8px 24px -6px rgba(37, 211, 102, 0.55), 0 0 34px rgba(37, 211, 102, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 8px 24px -6px rgba(37, 211, 102, 0.55), 0 0 34px rgba(37, 211, 102, 0.35); } } /* * When the mobile sticky add-to-cart bar (Task 3) is present, the theme adds * .lss-has-sticky-cta to . Lift the floating button above that bar so the * two never overlap. Only relevant on small screens where the bar shows. */ @media (max-width: 900px) { body.lss-has-sticky-cta .lss-wa-float { bottom: calc(20px + var(--lss-sticky-cta-h, 66px)); } } @media (prefers-reduced-motion: reduce) { .lss-wa-float { animation: none; } .lss-wa-float:hover, .lss-wa-float:focus-visible { transform: none; } } /* ---------- Trust-stats WhatsApp card (4th card) ---------- */ /* The card is an ; keep it visually identical to the sibling stat cards. */ a.lss-trust__card { text-decoration: none; color: inherit; } /* ---------- Footer WhatsApp messaging ---------- */ /* WhatsApp contact line reads right-to-left so the Arabic label leads. */ .lss-footer__contact--wa { direction: rtl; } .lss-footer__contact--wa a { color: var(--silver-300, #cfd6e4); text-decoration: none; transition: color 0.2s ease; } .lss-footer__contact--wa a:hover { color: #25d366; } /* The single "الدفع عن طريق واتساب" pill that replaced the card-brand row. */ .lss-footer__payment--wa { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #d6f4e2; background: rgba(37, 211, 102, 0.1); border-color: rgba(37, 211, 102, 0.35); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .lss-footer__payment--wa:hover, .lss-footer__payment--wa:focus-visible { background: rgba(37, 211, 102, 0.16); border-color: rgba(37, 211, 102, 0.55); transform: translateY(-1px); } .lss-footer__payment--wa svg { color: #25d366; flex: 0 0 auto; }