/* WhatsApp Chat Widget styles - assets/css/whatsapp-chat.css */
/* pointer-events:none on the container so its invisible area (closed popup) does
   not block clicks on other fixed elements (e.g. currency switcher). Only the
   button and the open popup stay clickable. */
.wa-widget { position: fixed; bottom: 22px; right: 22px; z-index: 999999; font-family: inherit; pointer-events: none; }

  /* Floating round button */
  .wa-fab {
    width: 60px; height: 60px; border: none; border-radius: 50%;
    background: #25D366; cursor: pointer; pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    animation: wa-pulse 2.5s ease infinite;
    margin-left: auto;
  }
  .wa-fab svg { width: 34px; height: 34px; }
  @keyframes wa-pulse { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }

  /* Chat popup */
  .wa-popup {
    width: 330px; max-width: calc(100vw - 44px);
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    margin-bottom: 14px;
    transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
  }
  .wa-widget.open .wa-popup { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .wa-widget.open .wa-fab { animation: none; }

  .wa-head {
    background: #128C7E; color: #fff; padding: 16px 44px 16px 16px;
    position: relative; display: flex; align-items: center; gap: 12px;
  }
  .wa-head .wa-ava {
    width: 42px; height: 42px; border-radius: 50%; background: #25D366;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  }
  .wa-head .wa-ava svg { width: 24px; height: 24px; }
  .wa-head strong { display: block; font-size: 15px; line-height: 1.3; }
  .wa-head span { font-size: 12px; opacity: .9; }
  .wa-close {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: .9;
  }

  .wa-body { padding: 16px; background: #ECE5DD; }
  .wa-body textarea {
    width: 100%; min-height: 90px; resize: none; box-sizing: border-box;
    border: 1px solid #d5d5d5; border-radius: 10px; padding: 12px;
    font-size: 14px; font-family: inherit; outline: none; background: #fff;
  }
  .wa-body textarea:focus { border-color: #25D366; }
  .wa-send {
    width: 100%; margin-top: 12px; border: none; border-radius: 10px;
    background: #25D366; color: #fff; font-size: 15px; font-weight: 600;
    padding: 13px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 8px;
  }
  .wa-send:hover { background: #1EBE5B; }
  .wa-send svg { width: 18px; height: 18px; }

  @media (max-width: 480px) {
    .wa-widget { bottom: 16px; right: 16px; }
    .wa-fab { width: 54px; height: 54px; }
  }