/* ============================================================
   whatsapp.css — floating "click to chat" WhatsApp widget
   ------------------------------------------------------------
   A fixed bottom-right button (FAB) that opens a small chat-style
   panel. The visitor types a message + hits Send, which opens
   WhatsApp (https://wa.me/<number>?text=…) with the message
   pre-filled — there is NO backend; WhatsApp delivers it.

   Injected + wired by js/whatsapp.js (the number/wording config
   lives at the top of that file). This file only styles it, and
   deliberately keeps WhatsApp's recognisable look (green FAB,
   green header, light chat area) rather than the site's dark theme.
   ============================================================ */

/* Whole widget sits above the page but BELOW the gallery lightbox
   (z 2500) and the privacy modal (z 3000) so those cover it when open. */
.wa-widget { position: fixed; z-index: 990; }
/* Which corner it floats in (js sets wa-pos-* from content/whatsapp.md `position:`).
   Top corners sit just below the 76px sticky nav so they don't hide behind it. */
.wa-pos-bottom-right { right: 22px; bottom: 22px; }
.wa-pos-bottom-left  { left: 22px;  bottom: 22px; }
.wa-pos-top-right    { right: 22px; top: 96px; }
.wa-pos-top-left     { left: 22px;  top: 96px; }

/* ---- floating action button ---- */
.wa-fab {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgba(0, 0, 0, .34); }
.wa-fab svg { width: 32px; height: 32px; }
.wa-fab .wa-close-icon { display: none; font-size: 32px; line-height: 1; }
/* swap the WhatsApp glyph for an × while the panel is open */
.wa-widget.open .wa-fab .wa-chat-icon { display: none; }
.wa-widget.open .wa-fab .wa-close-icon { display: block; }

/* ---- chat panel ---- */
.wa-panel {
  position: absolute; right: 0; bottom: 74px;
  width: 328px; max-width: calc(100vw - 44px);
  background: #efeae2; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.wa-widget.open .wa-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
/* Anchor the panel to the FAB's corner (the base rule above handles bottom-right).
   Only anchoring + transform-origin change here — never `transform` — so the open
   animation rule above keeps working regardless of source order. */
.wa-pos-bottom-left .wa-panel { right: auto; left: 0; transform-origin: bottom left; }
.wa-pos-top-right .wa-panel   { bottom: auto; top: 74px; transform-origin: top right; }
.wa-pos-top-left .wa-panel    { right: auto; left: 0; bottom: auto; top: 74px; transform-origin: top left; }

.wa-header {
  background: #075e54; color: #fff; padding: 14px 44px 14px 14px;
  display: flex; align-items: center; gap: 12px; position: relative;
}
.wa-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #25d366;
  display: flex; align-items: center; justify-content: center;
}
.wa-avatar svg { width: 24px; height: 24px; }
.wa-htext { min-width: 0; }
.wa-name { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.wa-status { font-size: .78rem; opacity: .85; }
.wa-panel-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none; color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: .85; padding: 2px 6px;
}
.wa-panel-close:hover { opacity: 1; }

.wa-body { padding: 20px 16px; min-height: 84px; }
.wa-bubble {
  background: #fff; color: #111b21; border-radius: 0 10px 10px 10px; padding: 10px 12px;
  font-size: .9rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); max-width: 88%;
}
.wa-bubble-time { display: block; text-align: right; font-size: .68rem; color: #667781; margin-top: 4px; }

.wa-form { display: flex; gap: 8px; padding: 10px; background: #f0f0f0; }
.wa-input {
  flex: 1; min-width: 0; border: none; border-radius: 22px; padding: 11px 16px;
  font-size: .9rem; background: #fff; color: #111b21; outline: none;
}
.wa-send {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: #25d366; color: #fff; text-decoration: none;   /* it's an <a>, not a button */
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.wa-send:hover { background: #1eb85a; }
.wa-send svg { width: 20px; height: 20px; }

@media (max-width: 480px) {
  .wa-pos-bottom-right { right: 16px; bottom: 16px; }
  .wa-pos-bottom-left  { left: 16px;  bottom: 16px; }
  .wa-pos-top-right    { right: 16px; top: 88px; }
  .wa-pos-top-left     { left: 16px;  top: 88px; }
  .wa-panel { width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-panel, .wa-send { transition: none; }
}