/* Reusable contact capsule. The 56px host never changes the surrounding layout. */
af-whatsapp {
  --af-wa-green: #25d366;
  /* Darkened neon green; the tint keeps the original 25% transparency. */
  --af-wa-background: rgba(15, 192, 68, .75);
  --af-wa-foreground: #062b18;
  --af-wa-icon-color: #fff;
  --af-wa-edge: 20px;
  --af-wa-shift-left: 2.5vw;
  --af-wa-shift-down: 2.5svh;
  --af-wa-bottom: clamp(116px, 16vw, 212px);
  --af-wa-navigation-clearance: 88px;
  --af-wa-safe-left: env(safe-area-inset-left, 0px);
  --af-wa-safe-right: env(safe-area-inset-right, 0px);
  --af-wa-safe-top: env(safe-area-inset-top, 0px);
  display: inline-block;
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  vertical-align: middle;
  isolation: isolate;
  overflow: visible;
}
af-whatsapp:not(:defined), af-whatsapp[hidden] { display: none; }
/* Permanent space protects the copyright above the decorative wordmark. */
body:has(af-whatsapp[position="floating"]) > footer .footer-wordmark {
  margin-top: calc(88px + var(--af-footer-max-offset, 48px));
}
@media (max-width: 600px) {
  body:has(af-whatsapp[position="floating"]) > footer .footer-wordmark {
    margin-top: calc(88px + var(--af-footer-max-offset, 32px));
  }
}
af-whatsapp[position="floating"] {
  position: fixed;
  right: calc(var(--af-wa-edge) + env(safe-area-inset-right, 0px) + var(--af-wa-shift-left));
  /* Reserve navigation space on every page, before its bar becomes visible. */
  bottom: min(calc(100svh - var(--af-wa-safe-top) - 68px), calc(max(var(--af-wa-navigation-clearance), calc(var(--af-wa-bottom) - var(--af-wa-shift-down))) + env(safe-area-inset-bottom, 0px)));
  z-index: 75;
  opacity: 1;
  transition: opacity 1040ms cubic-bezier(.22,.7,.18,1), visibility 1040ms;
}
af-whatsapp[position="floating"][data-scrolling="true"]:not(:has(.af-wa-button:focus-visible)) {
  opacity: 0;
  pointer-events: none;
  transition-duration: 0ms;
}
af-whatsapp[data-overlay-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
af-whatsapp .af-wa-button {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  box-sizing: border-box;
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(6,43,24,.18);
  border-radius: 28px;
  background: var(--af-wa-background);
  color: var(--af-wa-foreground);
  box-shadow: 0 6px 22px rgba(4,19,13,.18);
  cursor: pointer;
  font: 600 14px/1.25 var(--font-sans, Inter, system-ui, sans-serif);
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: width 800ms cubic-bezier(.32,.1,.2,1), border-color 180ms ease;
}
af-whatsapp[direction="left"] .af-wa-button { left: auto; right: 0; }
af-whatsapp .af-wa-button:hover { border-color: rgba(6,43,24,.48); }
af-whatsapp .af-wa-button:focus-visible {
  outline: 3px solid var(--af-wa-green);
  outline-offset: 4px;
}
af-whatsapp .af-wa-button:disabled { cursor: not-allowed; opacity: .45; }
af-whatsapp .af-wa-icon {
  position: absolute;
  display: block;
  width: 28px;
  height: 28px;
  left: 13px;
  top: 13px;
  flex: none;
  fill: var(--af-wa-icon-color);
  color: var(--af-wa-icon-color);
  filter: drop-shadow(0 1px 1px rgba(6, 43, 24, .3));
  pointer-events: none;
}
af-whatsapp[direction="left"] .af-wa-icon { left: auto; right: 13px; }
af-whatsapp .af-wa-brand:not([hidden]) {
  position: absolute;
  top: calc(100% + 6px);
  left: 28px;
  transform: translateX(-50%);
  padding: 3px 7px;
  border: 1px solid #d4e1ec;
  border-radius: 5px;
  background: #fff;
  color: #163b63;
  box-shadow: 0 2px 7px rgba(7, 28, 49, .1);
  font: 800 10px/1.2 var(--font-sans, Inter, system-ui, sans-serif);
  letter-spacing: .1em;
  white-space: nowrap;
  pointer-events: none;
}
af-whatsapp .af-wa-label {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 56px;
  width: max-content;
  max-width: var(--af-wa-label-max, 240px);
  box-sizing: border-box;
  padding: 0 20px 0 0;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 12px);
  mask-image: linear-gradient(to left, transparent, #000 12px);
  transition: opacity 800ms cubic-bezier(.32,.1,.2,1);
}
af-whatsapp[direction="left"] .af-wa-label {
  left: auto;
  right: 56px;
  padding: 0 0 0 20px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px);
  mask-image: linear-gradient(to right, transparent, #000 12px);
}
af-whatsapp .af-wa-label-text { overflow: hidden; text-overflow: ellipsis; }
af-whatsapp[data-state="opening"] .af-wa-button,
af-whatsapp[data-state="open"] .af-wa-button {
  width: var(--af-wa-open-width, 210px);
  transition-duration: 720ms, 180ms;
  transition-timing-function: cubic-bezier(.22,.7,.18,1), ease;
}
af-whatsapp[data-state="opening"] .af-wa-label,
af-whatsapp[data-state="open"] .af-wa-label {
  opacity: 1;
  transition: opacity 720ms cubic-bezier(.22,.7,.18,1);
}
af-whatsapp .af-wa-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 760px) {
  af-whatsapp { --af-wa-edge: 16px; }
  af-whatsapp .af-wa-brand:not([hidden]) { top: calc(100% + 4px); padding: 1px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  af-whatsapp[position="floating"],
  af-whatsapp .af-wa-button,
  af-whatsapp .af-wa-label { transition: none !important; }
}
