/* Floating buttons (clean layout, stacked column) */
.floating-buttons {
  position: fixed;
  right: 24px;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px)); /* 100px above bottom + safe-area */
  display: flex;
  flex-direction: column;
  gap: 12px; /* space between buttons */
  align-items: flex-end;
  z-index: 11000;
}

.btn-float {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  color: #fff;
  text-decoration: none;
}
.btn-float--phone { background: #26598a; }
.btn-float--whatsapp { background: #25D366; }

/* When buttons are inside the stacked container, they should participate in normal flow
   (override the global .btn-float { position: fixed } present in shared.head) */
.floating-buttons .btn-float {
  position: relative;
  right: 0;
  bottom: 0;
}

/* If reCAPTCHA badge exists, apply a class to push floating buttons higher */
.floating-buttons.recaptcha-safe { bottom: 96px; }

@media (max-width: 640px) {
  .floating-buttons { right: 12px; bottom: 72px; gap: 10px; }
  .btn-float { width: 48px; height: 48px; }
}