@charset "utf-8";



.wa-btn { position: fixed; z-index: 1000; right: 20px; bottom: 20px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; overflow: hidden; white-space: nowrap; text-decoration: none; color: rgb(255, 255, 255); background-color: rgb(37, 211, 102); border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 18px; transition: padding 0.3s, gap 0.3s, transform 0.3s, box-shadow 0.3s; will-change: transform; }



.wa-btn:hover, .wa-btn:focus { color: rgb(255, 255, 255); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 22px; }



.wa-btn:not(.is-full):not(.is-collapsed) { opacity: 0; pointer-events: none; }



.wa-btn__icon { display: inline-flex; flex: 0 0 auto; }



.wa-btn__icon svg { display: block; transition: width 0.3s, height 0.3s; }



.wa-btn__label { display: inline-block; font-size: 17px; font-weight: 700; line-height: 1; transition: max-width 0.3s, opacity 0.25s; }



.wa-btn.is-full { padding: 14px 24px 14px 18px; }



.wa-btn.is-full .wa-btn__icon svg { width: 30px; height: 30px; }



.wa-btn.is-full .wa-btn__label { max-width: 260px; opacity: 1; }



.wa-btn.is-collapsed { gap: 0px; padding: 12px; }



.wa-btn.is-collapsed .wa-btn__icon svg { width: 26px; height: 26px; }



.wa-btn.is-collapsed .wa-btn__label { max-width: 0px; opacity: 0; }



@media (hover: hover) and (pointer: fine) {

  .wa-btn.is-collapsed:hover, .wa-btn.is-collapsed:focus-visible { gap: 10px; padding: 14px 24px 14px 18px; }

  .wa-btn.is-collapsed:hover .wa-btn__icon svg, .wa-btn.is-collapsed:focus-visible .wa-btn__icon svg { width: 30px; height: 30px; }

  .wa-btn.is-collapsed:hover .wa-btn__label, .wa-btn.is-collapsed:focus-visible .wa-btn__label { max-width: 260px; opacity: 1; }

}



@media (max-width: 767px) {

  .wa-btn { right: 14px; bottom: 14px; }

  .wa-btn.is-full { padding: 12px 20px 12px 16px; }

  .wa-btn__label { font-size: 16px; }

}