/* Floating contact: WhatsApp circle (all widths) + Call / Book bar (phones).
   z-index: below the booking modal (300) and toast (400), above page content and the nav (100). */
:root { --mbar-h: 64px; }

.wa-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--maroon);
  border: 2px solid var(--maroon);
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-med) var(--ease);
}
.wa-float:hover { background: var(--gold-deep); transform: translateY(-2px); }
.wa-float:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; box-shadow: 0 0 0 6px var(--maroon); }
/* Hidden while the order docket or footer legal line is on screen so it never sits on them. */
body.float-dim .wa-float { opacity: 0; pointer-events: none; visibility: hidden; }

.mbar { display: none; }

@media (max-width: 699.98px) {
  .mbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 140;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--maroon);
    border-top: 1px solid rgba(224, 165, 63, .5);
    box-shadow: 0 -8px 20px -10px rgba(26, 20, 19, .5);
  }
  .mbar .btn { --btn-h: 48px; min-height: 48px; padding: 0 12px; }
  /* Circle rides just above the bar. */
  .wa-float { bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom) + 12px); }
  /* Room for the bar so the footer's last line and anchor jumps are never hidden behind it. */
  .site-footer { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(var(--mbar-h) + 16px); }
  .toast { bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
  .wa-float:hover { transform: none; }
}