/* ==========================================================================
   Floating WhatsApp chat widget  —  includes/whatsapp-widget.php
   --------------------------------------------------------------------------
   WhatsApp green is used for the launcher on purpose. People recognise that
   mark instantly and know exactly what will happen when they tap it; painting
   it in the site's blue would look tidier and convert worse. Site blue is kept
   for the panel accents so it still reads as ours.

   --wa-bottom is set by asire-whatsapp.js. The site already has two fixed
   things at the bottom (the consent banner and the push-notification banner),
   so the widget stacks above whichever of them is on screen instead of sitting
   underneath.
   ========================================================================== */

.wa-widget{
  --wa-green:#25D366;
  --wa-green-dk:#1da851;
  --wa-teal:#075E54;
  --wa-chat-bg:#ECE5DD;
  --wa-blue:#0A49A6;
  --wa-ink:#0b1626;
  --wa-bottom:20px;       /* JS raises this when a bottom banner is showing */
  --wa-side:20px;

  position:fixed;
  right:var(--wa-side);
  bottom:var(--wa-bottom);
  z-index:99997;          /* under the consent (99999) and push (99998) banners */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  font-family:inherit;
  transition:bottom .25s ease;
}

.wa-widget *,
.wa-widget *::before,
.wa-widget *::after{box-sizing:border-box;}

.wa-widget svg{display:block;flex:0 0 auto;}

/* ── Launcher ────────────────────────────────────────────────────────────── */
.wa-fab{
  position:relative;
  width:60px;height:60px;
  border:0;border-radius:50%;
  background:var(--wa-green);
  color:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.42), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.wa-fab:hover{background:var(--wa-green-dk);transform:scale(1.06);}
.wa-fab:active{transform:scale(.96);}
.wa-fab:focus-visible{outline:3px solid var(--wa-blue);outline-offset:3px;}

/* Slow attention ring. Stops once the widget has been opened — a pulse that
   never ends is just noise after the first look. */
.wa-fab__ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa-green);
  animation:wa-ring 2.6s ease-out infinite;
  pointer-events:none;
}
.wa-widget.is-open .wa-fab__ring,
.wa-widget.is-used .wa-fab__ring{animation:none;opacity:0;}
@keyframes wa-ring{
  0%  {transform:scale(1);opacity:.7;}
  70% {transform:scale(1.55);opacity:0;}
  100%{transform:scale(1.55);opacity:0;}
}

/* Icon swap: WhatsApp mark when closed, cross when open. */
.wa-fab__icon{position:absolute;transition:opacity .18s ease, transform .18s ease;}
.wa-fab__icon--x{opacity:0;transform:rotate(-90deg) scale(.6);}
.wa-widget.is-open .wa-fab__icon--wa{opacity:0;transform:rotate(90deg) scale(.6);}
.wa-widget.is-open .wa-fab__icon--x{opacity:1;transform:none;}

/* ── Teaser ──────────────────────────────────────────────────────────────── */
.wa-teaser{
  position:relative;
  max-width:250px;
  background:#fff;color:var(--wa-ink);
  border-radius:14px 14px 4px 14px;
  padding:13px 32px 13px 15px;
  font-size:14px;line-height:1.5;
  box-shadow:0 10px 30px rgba(11,22,38,.18);
  animation:wa-pop .3s ease both;
}
.wa-teaser p{margin:0;}
.wa-teaser__x{
  position:absolute;top:5px;right:6px;
  width:22px;height:22px;padding:0;
  border:0;border-radius:50%;
  background:transparent;color:#8a95a1;
  font-size:17px;line-height:1;cursor:pointer;
}
.wa-teaser__x:hover{background:#eef1f5;color:var(--wa-ink);}

@keyframes wa-pop{
  from{opacity:0;transform:translateY(8px) scale(.96);}
  to  {opacity:1;transform:none;}
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.wa-panel{
  width:340px;
  max-height:min(560px, calc(100vh - var(--wa-bottom) - 110px));
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(11,22,38,.28), 0 2px 8px rgba(11,22,38,.12);
  animation:wa-pop .22s ease both;
}
.wa-panel[hidden]{display:none;}

.wa-panel__head{
  display:flex;align-items:center;gap:11px;
  background:var(--wa-teal);color:#fff;
  padding:13px 14px;
}
.wa-avatar{
  width:40px;height:40px;flex:0 0 40px;
  border-radius:50%;overflow:hidden;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.wa-avatar img{width:100%;height:100%;object-fit:contain;padding:4px;}
.wa-avatar__txt{font-size:14px;font-weight:800;color:var(--wa-blue);}

.wa-head__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.wa-head__txt strong{font-size:15.5px;font-weight:700;line-height:1.2;}
.wa-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:rgba(255,255,255,.82);
}
.wa-status i{
  width:7px;height:7px;border-radius:50%;
  background:#4ade80;flex:0 0 7px;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:wa-dot 2s ease-out infinite;
}
/* Outside office hours: amber and still, so the dot is not claiming someone is
   sitting there at 2am. */
.wa-status.is-away i{background:#fbbf24;animation:none;box-shadow:none;}
@keyframes wa-dot{
  0%  {box-shadow:0 0 0 0 rgba(74,222,128,.7);}
  70% {box-shadow:0 0 0 7px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}

.wa-close{
  width:30px;height:30px;flex:0 0 30px;padding:0;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .18s ease;
}
.wa-close:hover{background:rgba(255,255,255,.26);}
.wa-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* Body — WhatsApp's own paper tone, so the panel reads as a chat at a glance */
.wa-body{
  flex:1;min-height:0;overflow-y:auto;
  background:var(--wa-chat-bg);
  padding:16px 14px;
}

.wa-bubble{
  position:relative;
  background:#fff;
  border-radius:0 12px 12px 12px;
  padding:10px 13px 18px;
  font-size:14.5px;line-height:1.55;color:var(--wa-ink);
  box-shadow:0 1px 2px rgba(11,22,38,.14);
  max-width:88%;
}
.wa-bubble p{margin:0 0 4px;}
.wa-bubble p:last-of-type{margin-bottom:0;}
.wa-bubble__time{
  position:absolute;right:10px;bottom:6px;
  font-size:10.5px;color:#8a95a1;
}

.wa-chips__label{
  margin:10px 0 7px;
  font-size:12px;color:#5c6873;line-height:1.45;
}

/* Two columns. Eight services as full-width rows would push the send button
   out of view before the visitor had read them. */
.wa-chips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;        /* neighbours match height, so a long label
                                does not leave a stubby chip beside it */
  gap:6px;
}
.wa-chip{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  min-width:0;
  background:#fff;color:var(--wa-blue);
  border:1px solid rgba(10,73,166,.18);
  border-radius:10px;
  padding:8px 9px 8px 11px;
  font-size:12.5px;font-weight:600;line-height:1.3;
  text-decoration:none;
  transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
.wa-chip span{min-width:0;}

/* An odd number of services leaves the last one alone in a half-width cell,
   where a long name like "Business Consultancy Services" wraps to three lines
   next to dead space. Let it take the whole row instead. */
.wa-chip:last-child:nth-child(odd){grid-column:1 / -1;}
.wa-chip:hover{
  background:#f3f7fd;border-color:var(--wa-blue);
  color:var(--wa-blue);transform:translateY(-1px);
}
.wa-chip:focus-visible{outline:2px solid var(--wa-blue);outline-offset:2px;}
.wa-chip svg{opacity:.5;}

/* ── Common questions ────────────────────────────────────────────────────
   A second tier below the services: same information hierarchy as the panel
   itself, so these read as "or ask about" rather than as three more services. */
.wa-chips__label--sub{margin-top:11px;}

.wa-quick{display:flex;flex-wrap:wrap;gap:7px;}
.wa-quick__pill{
  flex:1 1 auto;
  text-align:center;
  background:rgba(10,73,166,.06);
  color:var(--wa-blue);
  border:1px solid transparent;
  border-radius:999px;
  padding:8px 14px;
  font-size:12.5px;font-weight:700;
  text-decoration:none;white-space:nowrap;
  transition:background .16s ease, border-color .16s ease;
}
.wa-quick__pill:hover{
  background:#fff;border-color:var(--wa-blue);color:var(--wa-blue);
}
.wa-quick__pill:focus-visible{outline:2px solid var(--wa-blue);outline-offset:2px;}

/* The escape hatch. Quietest thing in the panel — it must exist, but it should
   never be the most attractive option on screen. */
.wa-else{
  display:block;text-align:center;
  margin-top:9px;
  color:#5c6873;
  font-size:12.5px;font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.wa-else:hover{color:var(--wa-blue);}
.wa-else:focus-visible{outline:2px solid var(--wa-blue);outline-offset:2px;}

/* Footer */
.wa-panel__foot{
  background:#fff;
  border-top:1px solid #e7ebf0;
  padding:12px 14px 13px;
  text-align:center;
}
.wa-start{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--wa-green);color:#fff;
  border-radius:999px;
  padding:12px 18px;
  font-size:15px;font-weight:700;
  text-decoration:none;
  transition:background .18s ease;
}
.wa-start:hover{background:var(--wa-green-dk);color:#fff;}
.wa-start:focus-visible{outline:2px solid var(--wa-blue);outline-offset:2px;}
.wa-panel__foot small{
  display:block;margin-top:8px;
  font-size:11.5px;color:#8a95a1;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:520px){
  .wa-widget{
    --wa-side:14px;
    left:14px;                    /* panel spans the screen, FAB stays right */
    align-items:flex-end;
  }
  .wa-panel{
    width:100%;
    max-height:min(72vh, calc(100vh - var(--wa-bottom) - 96px));
    border-radius:16px;
  }
  .wa-teaser{max-width:100%;}
  .wa-fab{width:56px;height:56px;}
  .wa-body{padding:14px 12px;}
  .wa-chip{padding:12px 10px;font-size:13.5px;}   /* bigger tap target */
}

/* Very short screens (landscape phones): the panel must not eat the viewport */
@media (max-height:520px){
  .wa-panel{max-height:calc(100vh - var(--wa-bottom) - 80px);}
  .wa-teaser{display:none;}
}

/* ── Motion preference ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .wa-widget,
  .wa-fab,
  .wa-fab__icon,
  .wa-chip,
  .wa-start,
  .wa-close{transition:none;}
  .wa-fab__ring,
  .wa-status i{animation:none;}
  .wa-panel,
  .wa-teaser{animation:none;}
}

/* Printing a page should not print a chat button. */
@media print{
  .wa-widget{display:none !important;}
}