/* ============================================================
   FIXED ACTIONS (floating contact controls)

   Single source of truth for the viewport-fixed contact controls on
   every page. Replaces 65 near-identical inline copies, one per page,
   in the same spirit as css/page-hero.css.

   Scope:
     .wa-btn   WhatsApp deep link, green circle, bottom-right
     .wa-tip   hover tooltip, present in the index.html button only
     .cb-fab   "In a Rush? Get a Call Back" pill, opens the modal

   The callback MODAL (.cb-backdrop, .cb-modal, .cb-field, .cb-choice,
   .cb-submit, .cb-success) is a dialog, not a floating control, and
   stays with the page it is on. Only the launcher lives here. It sits
   at z-index 10000, above both controls, so it opens over them.

   Custom properties (--charcoal, --gold, --font-body, --t and the
   rest) are declared by each page's own :root, so this file inherits
   the page palette rather than restating it.

   GEOMETRY
   --------
   The desktop and mobile geometry below is the pre-consolidation rule
   set, restored verbatim from the inline copies as they stood at
   d65cc1d. 21 of the 65 pages were missing the max-width:768px
   .wa-btn override, so on those the WhatsApp circle stayed at
   right:28px while the callback pill moved to right:14px, leaving a
   ragged stack that reached further into the text column. That was
   drift between copies, not a per-page decision, so this file applies
   the override to all 65.

   MOBILE TRANSLUCENCY
   -------------------
   Below 768px the page is one full-width text column, so both
   controls sit over body copy at whatever has scrolled into the
   bottom-right corner. They are given an 85% fill and an 8px backdrop
   blur there so the words underneath stay readable through them.

   The alpha is on the BACKGROUND, not on the element: `opacity:.85`
   would fade the WhatsApp glyph and the pill's label along with the
   fill and cost legibility rather than buying it. The children —
   the white SVG, the gold icon disc, the label — stay fully opaque.

   :active and :focus drop the alpha entirely, so a tap lands on a
   solid button.

   Degradation: `backdrop-filter` is the only progressive part. Where
   it is unsupported the background declaration still applies, so the
   result is plain 85% translucency over unblurred page content — the
   button is still there, still the right colour, still tappable. The
   blur is the enhancement; the fill is not.
   ============================================================ */

/* ---- WhatsApp button ---- */
.wa-btn{
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:9999;
  width:58px;
  height:58px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.35);
  transition:all .3s var(--t);
}
.wa-btn:hover{transform:scale(1.1)}
.wa-btn svg{width:30px;height:30px;fill:white}

/* The index.html button carries a hover tooltip. The stronger glow is
   part of that treatment, so it is scoped to the buttons that have one
   rather than applied to all 65 and quietly changing their hover. */
.wa-tip{
  position:absolute;
  right:68px;
  top:50%;
  transform:translateY(-50%);
  background:var(--white);
  color:var(--charcoal);
  padding:8px 14px;
  border-radius:8px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.wa-btn:hover .wa-tip{opacity:1}
.wa-btn:has(.wa-tip):hover{box-shadow:0 6px 32px rgba(37,211,102,.5)}

/* ---- Callback FAB ---- */
.cb-fab{
  position:fixed;
  bottom:100px;
  right:28px;
  z-index:9998;
  background:var(--charcoal);
  color:var(--white);
  padding:14px 22px 14px 18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  box-shadow:0 6px 28px rgba(10,10,10,.25);
  border:1px solid rgba(201,168,76,.35);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:all .3s var(--t);
}
.cb-fab:hover{background:var(--black);transform:translateY(-2px);box-shadow:0 8px 32px rgba(10,10,10,.35)}
.cb-fab .cb-fab-icon{width:32px;height:32px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--black);font-size:16px;flex-shrink:0}
.cb-fab .cb-fab-text{display:flex;flex-direction:column;line-height:1.2}
.cb-fab .cb-fab-small{font-size:9px;letter-spacing:1.5px;color:var(--gold-light);opacity:.8;text-transform:uppercase;font-weight:500}

/* Both controls sit above the mobile drawer. The drawer carries its
   own calls to action, so they step aside while it is open rather
   than covering it. */
body.mnav-open .wa-btn,
body.mnav-open .cb-fab{opacity:0;pointer-events:none}

/* ---- Mobile ------------------------------------------------ */
@media(max-width:768px){
  .cb-fab{bottom:94px;right:14px;padding:12px 16px 12px 14px;font-size:11px}
  .cb-fab .cb-fab-icon{width:26px;height:26px;font-size:13px}
  .wa-btn{bottom:20px;right:14px}

  /* Translucent fill, mobile only. The hover pair is restated at the
     same 85% because touch browsers latch :hover on tap: left at the
     opaque desktop value it would win on specificity and undo the
     translucency for the rest of the page's life.

     The box-shadows are deliberately unchanged. A shadow is painted
     outside the border box, so the fill's alpha does not touch it,
     and it is what keeps the button's edge readable over a light
     backdrop where an 85% fill gives up some of its separation. */
  .wa-btn,
  .wa-btn:hover{background:rgba(37,211,102,.85)}
  .cb-fab{background:rgba(26,26,26,.85)}
  .cb-fab:hover{background:rgba(10,10,10,.85)}

  .wa-btn,
  .cb-fab{
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }

  /* Fully opaque under the finger. Listed after the hover rules so it
     wins at equal specificity when a tap fires both. */
  .wa-btn:active,
  .wa-btn:focus{background:#25D366}
  .cb-fab:active,
  .cb-fab:focus{background:var(--charcoal)}
}

@media(max-width:480px){
  .cb-fab .cb-fab-text{display:none}
  .cb-fab{padding:14px;border-radius:50%;width:52px;height:52px;justify-content:center}
  .cb-fab .cb-fab-icon{margin:0}
}

@media(prefers-reduced-motion:reduce){
  .wa-btn,
  .cb-fab,
  .wa-tip{transition:none}
}