/* floating-whatsapp.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── FloatingWhatsApp ── */
.FloatingWhatsApp_floatingWhatsapp {
  width:100%;
  height:100%;
  text-align:left;
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
}

.FloatingWhatsApp_whatsappButton {
  width:60px;
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center;
  position:fixed;
  bottom:2rem;
  right:2rem;
  cursor:pointer;
  background-color:#25d366;
  border-radius:50%;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  box-shadow:0 4px 10px 0 rgb(0 0 0/15%);
  z-index:5;
}

.FloatingWhatsApp_whatsappButton:after {
  content:"";
  border-color:inherit;
  width:60px;
  height:60px;
  border-radius:50%;
  position:absolute;
  box-shadow:0 0 0 0 rgba(37,211,101,0);
  animation:FloatingWhatsApp_pulse 1.2s infinite;
}

.FloatingWhatsApp_whatsappButton svg {
  fill:#fff;
  padding:.5rem;
  width:55px;
  height:55px;
}

.FloatingWhatsApp_notificationIndicator {
  display:flex;
  flex-flow:row wrap;
  place-content:center;
  align-items:center;
  position:absolute;
  box-sizing:border-box;
  font-family:inherit;
  font-weight:500;
  font-size:.75rem;
  min-width:20px;
  line-height:1;
  padding:0 6px;
  height:20px;
  border-radius:10px;
  z-index:1;
  transition:transform 225ms cubic-bezier(.4,0,.2,1) 0s;
  background-color:rgb(235,0,20);
  color:rgb(255,255,255);
  top:0;
  right:10px;
  transform:scale(1) translate(50%,-50%);
  transform-origin:100% 0;
}

.FloatingWhatsApp_whatsappChatBox {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:5%;
  overflow:hidden;
  background-color:#fff;
  touch-action:auto;
  position:fixed;
  bottom:7rem;
  right:4rem;
  width:375px;
  opacity:0;
  transition:height .2s ease-out;
  box-shadow:0 3px 10px 0 rgb(0 0 0/20%);
  z-index:6;
}

@media (max-width:575px) {
  .FloatingWhatsApp_whatsappChatBox {
    right:0;
    left:0;
    max-width:90%;
    margin:auto;
  }
}

.FloatingWhatsApp_open {
  animation:FloatingWhatsApp_bounceIn .4s both;
}

.FloatingWhatsApp_closed {
  animation:FloatingWhatsApp_bounceOut .4s both;
}

.FloatingWhatsApp_chatHeader {
  background-color:#075e54;
  display:grid;
  align-items:center;
  padding:.25rem;
  grid-template-columns:20% 60% 1fr;
  grid-gap:1%;
  gap:1%;
}

.FloatingWhatsApp_avatar {
  padding:.25rem;
  position:relative;
}

.FloatingWhatsApp_avatar img {
  vertical-align:middle;
  border-radius:50%;
  height:60px;
  width:60px;
  border:1px solid rgba(255,255,255,.473);
}

.FloatingWhatsApp_avatar:after {
  content:"";
  width:10px;
  height:10px;
  background:#4fbe86;
  border:1px solid #fff;
  position:absolute;
  border-radius:50%;
  bottom:5px;
  right:8px;
}

.FloatingWhatsApp_status {
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:.5rem;
}

.FloatingWhatsApp_statusTitle {
  font-size:1rem;
  font-weight:700;
}

.FloatingWhatsApp_statusSubtitle {
  font-size:.8rem;
  color:#f0f0f0;
}

.FloatingWhatsApp_closeBtn {
  padding:1rem;
  cursor:pointer;
  text-align:center;
}

.FloatingWhatsApp_closeBtn svg {
  fill:#fff;
  width:24px;
  height:24px;
}

.FloatingWhatsApp_chatBody {
  padding:20px;
  background-size:cover;
  background-repeat:repeat;
  max-height:382px;
  background-color:#eae6df;
  height:100%;
  opacity:.8;
}

.FloatingWhatsApp_chatBubble {
  background-color:#e6f8f1;
  padding:16px 28px;
  border-radius:20px;
  border-bottom-left-radius:2px;
  display:inline-block;
}

.FloatingWhatsApp_typing {
  align-items:center;
  display:flex;
  height:17px;
}

.FloatingWhatsApp_dot {
  animation:FloatingWhatsApp_typingAnimation 1.8s ease-in-out infinite;
  background-color:rgba(20,105,69,.7);
  border-radius:50%;
  height:7px;
  margin-right:4px;
  vertical-align:middle;
  width:7px;
  display:inline-block;
}

.FloatingWhatsApp_dot:first-child {
  animation-delay:.2s;
}

.FloatingWhatsApp_dot:nth-child(2) {
  animation-delay:.3s;
}

.FloatingWhatsApp_dot:nth-child(3) {
  animation-delay:.4s;
}

.FloatingWhatsApp_dot:last-child {
  margin-right:0;
}

.FloatingWhatsApp_message {
  padding:7px 14px 6px;
  background-color:#fff;
  border-radius:0 8px 8px;
  position:relative;
  max-width:calc(100% - 120px);
  z-index:2;
  box-shadow:0 1px .5px rgb(0 0 0/13%);
}

.FloatingWhatsApp_accountName {
  font-size:13px;
  font-weight:700;
  line-height:18px;
  color:rgb(17 17 17/50%);
}

.FloatingWhatsApp_messageBody {
  font-size:14px;
  line-height:19px;
  margin-top:4px;
  color:#111;
  white-space:pre-wrap;
}

.FloatingWhatsApp_triangle {
  display:inline-block;
  width:0;
  height:0;
  border-color:transparent #fff transparent transparent;
  border-style:solid;
  border-width:0 20px 20px 0;
  position:absolute;
  left:-10px;
  top:0;
}

.FloatingWhatsApp_messageTime {
  display:flex;
  margin-top:4px;
  font-size:12px;
  line-height:16px;
  color:rgb(17 17 17/50%);
  justify-content:flex-end;
}

.FloatingWhatsApp_chatFooter {
  padding:.25rem;
  background-color:#f0f0f0;
}

.FloatingWhatsApp_chatFooterForm {
  display:grid;
  align-items:center;
  grid-template-columns:85% 15%;
  padding:.25rem;
}

.FloatingWhatsApp_input {
  border-radius:20px;
  padding:0 10px;
  border:none;
  background-color:#fefefe;
  min-height:45px;
  transition:box-shadow .2s ease-in-out;
}

.FloatingWhatsApp_input:focus {
  border-color:#075e54;
  outline:0;
  box-shadow:0 0 0 1px rgb(7 94 84/50%);
}

.FloatingWhatsApp_input::placeholder {
  color:#949494;
}

.FloatingWhatsApp_buttonSend {
  background-color:initial;
  border:0;
  cursor:pointer;
}

.FloatingWhatsApp_buttonSend svg {
  vertical-align:middle;
  fill:#919191;
}

.FloatingWhatsApp_buttonSend:disabled {
  pointer-events:none;
  opacity:.5;
}

.FloatingWhatsApp_questionButtons {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

.FloatingWhatsApp_questionButton {
  display:block;
  width:100%;
  padding:10px 16px;
  border:none;
  border-radius:8px;
  background-color:#fff;
  color:#111;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  box-shadow:0 1px .5px rgb(0 0 0/13%);
}

.FloatingWhatsApp_questionButton:hover {
  background-color:#f5f5f5;
}

.FloatingWhatsApp_footerHidden {
  display:none;
}

.FloatingWhatsApp_dark .FloatingWhatsApp_chatBody {
  background-color:#0d1418;
}

.FloatingWhatsApp_dark .FloatingWhatsApp_message {
  background-color:#056162;
  box-shadow:0 1px .5px rgb(0 0 0/70%);
}

.FloatingWhatsApp_dark .FloatingWhatsApp_accountName {
  color:rgb(255 255 255/50%);
}

.FloatingWhatsApp_dark .FloatingWhatsApp_messageBody {
  color:rgb(241 241 242/90%);
}

.FloatingWhatsApp_dark .FloatingWhatsApp_triangle {
  border-color:transparent #056162 transparent transparent;
}

.FloatingWhatsApp_dark .FloatingWhatsApp_messageTime {
  color:rgb(255 255 255/50%);
}

.FloatingWhatsApp_dark .FloatingWhatsApp_chatFooter {
  background-color:#1e2428;
}

.FloatingWhatsApp_dark .FloatingWhatsApp_input {
  background-color:#33383b;
  color:#f1f1f2;
}

.FloatingWhatsApp_dark .FloatingWhatsApp_input:focus {
  border-color:#0da896;
  outline:0;
  box-shadow:0 0 0 1px rgb(13 168 150/50%);
}

.FloatingWhatsApp_dark .FloatingWhatsApp_buttonSend svg {
  fill:rgb(104,104,104);
}

.FloatingWhatsApp_dark .FloatingWhatsApp_chatBubble {
  background-color:#32373a;
}

.FloatingWhatsApp_dark .FloatingWhatsApp_dot {
  background-color:rgba(46,148,106,.7);
}

@keyframes FloatingWhatsApp_pulse {
  0% {
    box-shadow:0 0 0 0 rgba(37,211,101,.75);
  }
  to {
    box-shadow:0 0 0 15px rgba(37,211,101,0);
  }
}

@keyframes FloatingWhatsApp_bounceIn {
  0% {
    opacity:0;
    transform:scale(0);
    transform-origin:bottom right;
  }
  50% {
    transform:scale(1.03);
    transform-origin:bottom right;
  }
  to {
    opacity:1;
    transform:scale(1);
    transform-origin:bottom right;
  }
}

@keyframes FloatingWhatsApp_bounceOut {
  0% {
    opacity:1;
    transform:scale(1);
    transform-origin:bottom right;
  }
  to {
    opacity:0;
    transform:scale(0);
    transform-origin:bottom right;
  }
}

@keyframes FloatingWhatsApp_typingAnimation {
  0% {
    transform:translateY(0);
    background-color:rgba(20,105,69,.7);
  }
  28% {
    transform:translateY(-7px);
    background-color:rgba(20,105,69,.4);
  }
  44% {
    transform:translateY(0);
    background-color:rgba(20,105,69,.2);
  }
}