.acb-container { position: fixed; display: flex; flex-direction: column; gap: 0px; z-index: 9999; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; } .acb-container.right-bottom { right: 10px; bottom: 40px; } .acb-container.right-middle { right: 10px; top: 50%; transform: translateY(-50%); } .acb-button { border-bottom: 1px solid rgba(240, 240, 240, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; text-decoration: none; color: #666; background: #fff; transition: all 0.3s ease; &:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } &:last-child { border-bottom: none; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } } .acb-button:hover { background-color: #f7f7f7; } .acb-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; } .icon-text .acb-button { padding: 8px 7px; min-width: 50px; &.acb-wechat { position: relative; } } .icon-text .acb-button span { margin-top: 2px; font-size: 11px; white-space: nowrap; text-align: center; } /* Call Button */ .acb-call .acb-icon { color: #00c16e; } /* Email Button */ .acb-email .acb-icon { color: #0099e5; } /* WhatsApp Button */ .acb-whatsapp .acb-icon { color: #25D366; } /* WeChat Button */ .acb-wechat { cursor: pointer; .acb-icon { color: #7BB32E; } } .icon-only .acb-button { position: relative; } .icon-only .acb-button::before { content: attr(data-tooltip); position: absolute; right: 100%; top: 50%; transform: translateY(-50%); background: #fff; color: #333; padding: 5px 10px; border-radius: 4px; font-size: 14px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; margin-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; } .icon-only .acb-button::after { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #fff; opacity: 0; visibility: hidden; transition: all 0.3s ease; margin-right: -2px; } .icon-only .acb-button:hover::before, .icon-only .acb-button:hover::after { opacity: 1; visibility: visible; } .acb-wechat-qrcode { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #fff; padding: 5px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: none; line-height: 1; z-index: 9998; } .icon-text .acb-wechat-qrcode::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #fff; } .acb-wechat-qrcode img { max-width: 100px; height: auto; } .acb-wechat:hover .acb-wechat-qrcode { display: block; }