/* WhatsApp Chat Widget Pro - Frontend Styles */ .wcw-widget-container { position: fixed; bottom: 20px; z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .wcw-position-right { right: 20px; } .wcw-position-left { left: 20px; } /* Float Button */ .wcw-float-btn { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; } .wcw-float-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .wcw-float-btn svg { position: relative; z-index: 2; } /* Pulse animation ring - popup খোলা থাকলে থামিয়ে দেওয়া হয় যাতে distraction না হয় */ .wcw-pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0.6; z-index: 1; animation: wcw-pulse-animation 2.2s infinite; } @keyframes wcw-pulse-animation { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } /* ============ চ্যাট পপআপ কার্ড ============ */ .wcw-popup { position: absolute; bottom: 78px; width: 320px; max-width: 88vw; background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .wcw-position-right .wcw-popup { right: 0; } .wcw-position-left .wcw-popup { left: 0; } .wcw-popup.wcw-show { opacity: 1; visibility: visible; transform: translateY(0); } /* Header */ .wcw-popup-header { position: relative; background-color: #128C7E; color: #fff; padding: 18px 40px 18px 18px; } .wcw-popup-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; } .wcw-popup-subtitle { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.85); line-height: 1.4; } .wcw-popup-close { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s ease; } .wcw-popup-close:hover { background: rgba(255, 255, 255, 0.32); } /* Body */ .wcw-popup-body { padding: 18px; } .wcw-popup-message { margin: 0 0 16px; font-size: 14px; color: #333; line-height: 1.5; } .wcw-popup-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background-color: #25D366; color: #fff; text-decoration: none; padding: 13px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: filter 0.2s ease, transform 0.2s ease; } .wcw-popup-cta:hover { filter: brightness(0.95); transform: translateY(-1px); color: #fff; } /* Device visibility */ /* নোট: bottom/right/left অফসেট মূলত -এ ইনলাইন প্রিন্ট হওয়া ক্রিটিক্যাল CSS (settings থেকে ডাইনামিক মান) দিয়ে নিয়ন্ত্রিত হয়। নিচেরগুলো শুধু ফেইলসেফ ফলব্যাক হিসেবে রাখা। */ @media (max-width: 767px) { .wcw-hide-mobile { display: none !important; } .wcw-widget-container { bottom: 80px; } .wcw-position-right { right: 15px; } .wcw-position-left { left: 15px; } .wcw-popup { width: 290px; } } @media (min-width: 768px) { .wcw-hide-desktop { display: none !important; } }