/* contact-fab.css: the floating "Contact us" button and its four choices (tracker 42, Joe's yes 2026-10-14).
   Copied by build step 87 to the address in core/data/contact-fab.json and linked on every page.
   Site purple style: the colours are the site's own (07-live-stage.css), with the same values as fallbacks.
   Right corner; left for right-to-left pages. --ct-lift (set by contact-fab.js) keeps it above the cookie notice. */
.ct-fab{position:fixed;right:22px;bottom:calc(22px + var(--ct-lift,0px));z-index:9000;display:flex;align-items:center;gap:10px;padding:14px 22px 14px 18px;border:0;border-radius:999px;cursor:pointer;font:700 15px/1 var(--sans,Arial,sans-serif);color:#fff;letter-spacing:.02em;background:linear-gradient(135deg,var(--violet,#8f6bff),var(--magenta,#ff4fa8));box-shadow:0 10px 30px rgba(143,107,255,.45),0 0 0 1px rgba(255,255,255,.15) inset;transition:transform .25s var(--ease,ease),box-shadow .25s}
.ct-fab:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(255,79,168,.5)}
.ct-fab:focus-visible{outline:3px solid var(--gold,#f2b84c);outline-offset:3px}
.ct-fab svg{width:22px;height:22px}
.ct-fab .ct-dot{position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--green,#7fe7b4);box-shadow:0 0 0 0 rgba(127,231,180,.7);animation:ctp 2s infinite}
@keyframes ctp{70%{box-shadow:0 0 0 9px rgba(127,231,180,0)}100%{box-shadow:0 0 0 0 rgba(127,231,180,0)}}
.ct-fab .ct-close{display:none;font-size:22px;line-height:1}
.ct-fab[aria-expanded=true] .ct-open{display:none}
.ct-fab[aria-expanded=true] .ct-close{display:inline}

.ct-menu{position:fixed;right:22px;bottom:calc(88px + var(--ct-lift,0px));z-index:9001;display:flex;flex-direction:column;align-items:stretch;gap:10px;pointer-events:none}
.ct-menu a{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:999px;color:#fff;text-decoration:none;font:700 15px/1.1 var(--sans,Arial,sans-serif);box-shadow:0 10px 26px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transition:all .28s var(--ease,ease)}
/* open: visible at once (so the first choice can take focus), then the fade; closing fades, then hides */
.ct-menu.open a{opacity:1;visibility:visible;transform:none;transition:opacity .28s var(--ease,ease),transform .28s var(--ease,ease),visibility 0s}
.ct-menu.open a:nth-child(2){transition-delay:.05s,.05s,0s}
.ct-menu.open a:nth-child(1){transition-delay:.1s,.1s,0s}
.ct-menu a:hover{filter:brightness(1.12)}
.ct-menu a:focus-visible{outline:3px solid var(--gold,#f2b84c);outline-offset:3px}
.ct-menu i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18)}
.ct-menu svg{width:19px;height:19px}
.ct-menu small{display:block;font-weight:500;font-size:12px;opacity:.85;margin-top:2px}
.ct-wa{background:#1fa855}
.ct-vb{background:#7360f2}

[dir=rtl] .ct-fab{right:auto;left:22px}
[dir=rtl] .ct-menu{right:auto;left:22px}
[dir=rtl] .ct-menu a{padding:12px 12px 12px 18px}

@media (max-width:600px){
  .ct-fab{right:16px;bottom:calc(16px + var(--ct-lift,0px));padding:13px 18px 13px 15px}
  .ct-menu{right:16px;bottom:calc(80px + var(--ct-lift,0px))}
  [dir=rtl] .ct-fab{right:auto;left:16px}
  [dir=rtl] .ct-menu{right:auto;left:16px}
}
@media (prefers-reduced-motion:reduce){
  .ct-fab,.ct-menu a{transition:none}
  .ct-fab .ct-dot{animation:none}
}