:root {
  --whatsapp-offset: 16px;
  --whatsapp-height: 48px;
}

.whatsapp-button {
  position: fixed;
  z-index: 9;
  right: calc(var(--whatsapp-offset) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--whatsapp-offset) + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--whatsapp-height);
  padding: 10px 18px;
  border: 1px solid #ffffff66;
  border-radius: 999px;
  background: #087454;
  color: #fff;
  box-shadow: 0 6px 18px #0a2c2340;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.whatsapp-button:hover { background: #075b43; }
.whatsapp-button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #173b32;
}

.footer, .page-footer {
  padding-bottom: calc(16px + var(--whatsapp-height) + var(--whatsapp-offset) + env(safe-area-inset-bottom, 0px));
}