/* Shared clinic dock — one quiet porcelain surface across every public page. */

/* How much room the dock occupies at the bottom of the viewport, published on
   :root rather than on .az-fab because the things that must clear it are not
   inside it: #backToTop in src/index.css and the plateau stage in shyen.css.
   src/index.css already referenced this variable — nothing defined it, so its
   82px fallback was silently doing the work while the same number sat hardcoded
   elsewhere. One definition now, so the two cannot drift apart. */
:root { --az-fab-clearance: 82px; }

.az-fab {
  --az-ink: #112115;
  --az-green: #245b43;
  --az-green-deep: #174735;
  --az-border: #b9cdbf;
  --az-pale: #eef5e8;
  --az-pistachio: #becb6d;
  --az-white: #fffefb;
  --az-size: 52px;
  --az-bottom: 24px;
  --az-edge: 16px;
  --az-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  z-index: 70;
  right: 0;
  bottom: calc(var(--az-bottom) + env(safe-area-inset-bottom, 0px));
  left: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: calc(100vw - 2 * var(--az-edge));
  height: auto;
  margin-inline: auto;
  padding: 7px;
  overflow: visible;
  border: 1px solid var(--az-border);
  border-radius: 24px;
  background: rgba(255, 254, 251, 0.97);
  box-shadow:
    0 18px 42px -22px rgba(9, 24, 20, 0.40),
    0 5px 16px -10px rgba(9, 24, 20, 0.18),
    inset 0 1px 0 #fff;
  color: var(--az-ink);
  direction: ltr;
  font-family: Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.az-fab::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 17px;
  box-shadow: inset 0 0 0 1px rgba(36, 91, 67, 0.05);
  pointer-events: none;
}

.az-fab__language-wrap {
  position: relative;
  display: flex;
  padding-inline-end: 6px;
  margin-inline-end: 2px;
  border-inline-end: 1px solid #dce7df;
}

.az-fab__btn {
  position: relative;
  width: var(--az-size);
  min-width: 44px;
  height: var(--az-size);
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: var(--az-green-deep);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms var(--az-ease),
    transform 220ms var(--az-ease),
    width 260ms var(--az-ease),
    padding 260ms var(--az-ease);
}

.az-fab__btn:hover {
  border-color: #bdd1c2;
  background: var(--az-pale);
  color: var(--az-ink);
  box-shadow: 0 9px 22px -15px rgba(9, 24, 20, 0.62);
  transform: translateY(-2px);
}

.az-fab__btn:active {
  background: #e3eedf;
  transform: translateY(0) scale(0.97);
}

.az-fab__btn:focus-visible,
.az-fab__opt:focus-visible {
  outline: 3px solid var(--az-green-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(190, 203, 109, 0.55);
}

.az-fab__icon,
.az-fab__btn > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
}

.az-fab__icon svg,
.az-fab__btn > svg,
.az-fab__btn img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}

/* Lucide glyphs are strokes on an empty fill. Stated here so no inherited
   `fill: currentColor` can ever turn one into a solid blob. Scoped to the icon
   slot and the chevron so the flag SVGs — which are real fills — keep theirs. */
.az-fab__icon > svg,
.az-fab__chev {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The flag is a direct child of the language button, so `.az-fab__btn > svg`
   (0,1,1) was beating `.az-flag` (0,1,0) and rendering every flag as a 24x24
   square — the French tricolore came out visibly stretched. */
.az-fab__lang > .az-flag {
  width: 22px;
  height: 15px;
  flex: 0 0 22px;
}

.az-fab__btn--chat {
  border-color: #9eba9f;
  background: #edf5e7;
  color: #174735;
}

.az-fab__btn--chat::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50a65f;
  box-shadow: 0 0 0 2px #edf5e7;
}

.az-fab--measuring .az-fab__btn,
.az-fab--measuring .az-fab__label { transition: none; }

.az-fab__label {
  display: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* Tier 1 — every tile shows its short label beside its icon.
   Tier 2 — the fallback when tier 1 does not fit: only the chat tile keeps its
   label, which is exactly what shipped before this change. Neither tier applies
   below 640px; see fitLabels() in scripts/i18n/build-floating-nav.mjs. */
.az-fab--labelled .az-fab__btn {
  width: auto;
  padding-inline: 11px 13px;
  gap: 8px;
  border-radius: 16px;
}

.az-fab--labelled .az-fab__label,
.az-fab--labelled-chat .az-fab__btn--chat .az-fab__label { display: block; }

.az-fab--labelled-chat .az-fab__btn--chat { width: auto; padding: 0 14px; gap: 8px; }

/* Tier 1b — the same labels at tighter metrics, so a 768-830px tablet keeps its
   words instead of dropping all the way back to icons. */
.az-fab--labelled-compact .az-fab__btn {
  width: auto;
  padding-inline: 9px 10px;
  gap: 6px;
  border-radius: 15px;
}
.az-fab--labelled-compact .az-fab__label {
  display: block;
  font-size: 12.5px;
}
.az-fab--labelled-compact .az-fab__icon,
.az-fab--labelled-compact .az-fab__icon svg,
.az-fab--labelled-compact .az-fab__icon img { width: 20px; height: 20px; flex-basis: 20px; }
.az-fab--labelled-compact .az-fab__langcode { font-size: 12px; }
.az-fab--labelled-compact .az-fab__btn--action .az-fab__tip,
.az-fab--labelled-compact .az-fab__btn--brand .az-fab__tip { display: none; }
.az-fab--labelled-compact .az-fab__btn--brand .az-fab__label { color: var(--az-green-deep); }
.az-fab--labelled-compact { gap: 2px; }

[dir="rtl"] .az-fab__btn--action,
[dir="rtl"] .az-fab__btn--brand,
[dir="rtl"] .az-fab__lang,
[dir="rtl"] .az-fab__opt { direction: rtl; }

/* A visible label makes the hover tooltip redundant — and a tooltip repeating
   the text under the cursor reads as noise. Keep it only where the visible text
   is an abbreviation of something longer (the language pill shows just "FR"). */
.az-fab--labelled .az-fab__btn--action .az-fab__tip,
.az-fab--labelled .az-fab__btn--brand .az-fab__tip,
.az-fab--labelled-chat .az-fab__btn--chat .az-fab__tip { display: none; }

.az-fab--labelled .az-fab__btn--brand .az-fab__label { color: var(--az-green-deep); }

.az-fab__btn--brand { background: transparent; }
.az-fab__btn--brand img { width: 25px; height: 25px; object-fit: contain; }

.az-fab__lang {
  width: auto;
  min-width: 0;
  padding: 0 10px 0 9px;
  gap: 7px;
  border-color: transparent;
  background: transparent;
  color: var(--az-ink);
  font-family: inherit;
  cursor: pointer;
}

.az-fab__langcode {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.az-fab__lang[aria-expanded="true"] {
  border-color: #cfe0d2;
  background: var(--az-pale);
}

.az-fab__lang .az-fab__chev {
  width: 12px;
  height: 12px;
  margin-inline-start: -1px;
  color: #6f8474;
  transform-origin: center center;
  transition: transform 220ms var(--az-ease);
}

.az-fab__lang[aria-expanded="true"] .az-fab__chev { transform: rotate(180deg); }

.az-fab__menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  min-width: 202px;
  padding: 7px;
  margin: 0;
  list-style: none;
  border: 1px solid var(--az-border);
  border-radius: 18px;
  background: rgba(255, 254, 251, 0.98);
  box-shadow: 0 24px 60px -22px rgba(9, 24, 20, 0.55), inset 0 1px 0 #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transform-origin: bottom left;
  transition: opacity 180ms ease, transform 220ms var(--az-ease);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.az-fab__menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.az-fab__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--az-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.az-fab__native { flex: 0 1 auto; }

.az-fab__opt:hover { background: #f1f6ec; }
.az-fab__opt[aria-current="true"] {
  background: var(--az-pale);
  font-weight: 650;
}

/* The current language is marked with a check, not a loose dot floating at the
   far edge of the row. */
.az-fab__mark {
  display: none;
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--az-green);
}
.az-fab__mark svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.az-fab__opt[aria-current="true"] .az-fab__mark { display: block; }

.az-fab__opt[lang="ar"] .az-fab__native { direction: rtl; }

/* Soft-edged chips rather than the old hard rectangle with its dark 1px ring.
   NOT circular: these flags are drawn to each country's real construction, and
   cropping a 3:2 triband to a circle shows the whole middle band beside half of
   each outer one — the French flag renders with a double-width white stripe. */
.az-flag {
  width: 21px;
  height: 14px;
  flex: 0 0 21px;
  display: block;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(9, 24, 20, 0.14), 0 1px 2px rgba(9, 24, 20, 0.10);
  object-fit: cover;
}

.az-fab__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: 46vw;
  padding: 7px 10px;
  border: 1px solid #244c3b;
  border-radius: 9px;
  background: #153b2e;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(9, 24, 20, 0.7);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 150ms ease, transform 180ms var(--az-ease);
}

@media (max-width: 640px) {
  .az-fab__tip { display: none; }
}

.az-fab__btn:hover .az-fab__tip,
.az-fab__btn:focus-visible .az-fab__tip,
.az-fab__lang:hover .az-fab__tip,
.az-fab__lang:focus-visible .az-fab__tip {
  opacity: 1;
  transform: translateX(-50%);
}

@media (hover: none) { .az-fab__tip { display: none; } }

/* Two affordances at once — a tooltip on top of the open dropdown — is noise. */
.az-fab__lang[aria-expanded="true"] .az-fab__tip { display: none; }

.az-fab {
  transition: box-shadow 220ms ease, border-color 180ms ease;
}

@media (max-width: 640px) {
  .az-fab {
    --az-size: 46px;
    --az-bottom: 14px;
    gap: 2px;
    padding: 5px;
    border-radius: 19px;
  }
  .az-fab__language-wrap { padding-inline-end: 3px; margin-inline-end: 0; }
  .az-fab__btn { border-radius: 13px; }
  .az-fab__lang {
    min-width: 46px;
    padding: 0 9px;
    gap: 0;
  }
  .az-fab__lang > span,
  .az-fab__lang .az-fab__chev { display: none; }
  .az-fab__btn--chat::after { top: 7px; right: 7px; }
  .az-fab__icon,
  .az-fab__btn > svg,
  .az-fab__icon svg,
  .az-fab__btn img { width: 22px; height: 22px; }
  .az-fab__menu { bottom: calc(100% + 10px); }
}

@media (max-width: 380px) {
  .az-fab { --az-edge: 8px; gap: 0; padding: 5px; }
  .az-fab__language-wrap { padding-inline-end: 0; }
  .az-fab__btn,
  .az-fab__lang { width: 44px; min-width: 44px; }
}

@media (max-width: 350px) {
  .az-fab { --az-edge: 6px; gap: 0; padding: 4px; }
  .az-fab__language-wrap { padding-inline-end: 0; }
  .az-fab__btn,
  .az-fab__lang { min-width: 44px; width: 44px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .az-fab,
  .az-fab__menu { background: #fffefb; }
}

@media (prefers-reduced-motion: reduce) {
  .az-fab,
  .az-fab__btn,
  .az-fab__menu,
  .az-fab__tip,
  .az-fab__chev { transition-duration: 0.01ms !important; }
  .az-fab__btn:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Glow dock — ported from the shadcn/framer "glow-menu" MenuBar.

   WHY A PORT AND NOT THE COMPONENT. That component is React + framer-motion +
   next-themes + a shadcn `cn()`. This dock is none of those: it is a vanilla-JS
   template literal in scripts/i18n/build-floating-nav.mjs, injected into 420
   static pages in five languages. Pulling framer-motion in for a hover effect
   would also add ~50 KB gzip to every page on a site that just had 1.5 MiB cut
   out of it. Every visual the component provides — nav glow, per-item glow,
   the 3D flip, per-item colour — is reachable in CSS, so it is done in CSS.

   ALL OF IT LIVES HERE ON PURPOSE. This file is static and content-hashed by the
   build, so the filename changes with the bytes and the CDN cannot serve a stale
   pair. Nothing in the generated JS is touched, which keeps every contract that
   verify-floating-nav.mjs asserts exactly as it was.

   Hooks are the modifier classes the dock already emits:
     --appointment · --call · --chat · --waze · --maps · --blog · __lang
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Nav-level glow. The reference fades a radial wash in behind the whole bar on
      hover. Its demo is blue/purple/red; this is the site's own greens, so the
      dock reads as brand rather than as a rainbow widget. */
.az-fab::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 31px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 120% at 20% 50%, rgba(190, 203, 109, 0.34) 0%, transparent 70%),
    radial-gradient(60% 120% at 55% 50%, rgba(36, 91, 67, 0.30) 0%, transparent 70%),
    radial-gradient(60% 120% at 88% 50%, rgba(143, 163, 60, 0.30) 0%, transparent 70%);
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.az-fab:hover::after { opacity: 1; }

/* 2. Per-item glow: scale 0.8 -> 2 and fade in, exactly as the reference does it.
      Colour comes from --az-glow, set per action below. */
.az-fab__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  background: var(--az-glow, radial-gradient(circle, rgba(36, 91, 67, 0.18) 0%, transparent 70%));
  transform: scale(0.8);
  transition:
    opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.az-fab__btn:hover::before,
.az-fab__btn:focus-visible::before { opacity: 1; transform: scale(2); }

.az-fab__btn--appointment  { --az-glow: radial-gradient(circle, rgba(143,163,60,0.30) 0%, rgba(143,163,60,0.10) 50%, transparent 100%); }
.az-fab__btn--call,
.az-fab__btn--chat { --az-glow: radial-gradient(circle, rgba(36,91,67,0.30) 0%, rgba(36,91,67,0.10) 50%, transparent 100%); }
.az-fab__btn--blog  { --az-glow: radial-gradient(circle, rgba(23,71,53,0.28)  0%, rgba(23,71,53,0.09)  50%, transparent 100%); }
.az-fab__lang    { --az-glow: radial-gradient(circle, rgba(17,33,21,0.20)  0%, rgba(17,33,21,0.07)  50%, transparent 100%); }
/* Brand tiles glow in their own colour rather than the site's. */
.az-fab__btn--waze { --az-glow: radial-gradient(circle, rgba(51,204,255,0.34) 0%, rgba(51,204,255,0.11) 50%, transparent 100%); }
.az-fab__btn--maps { --az-glow: radial-gradient(circle, rgba(66,133,244,0.30) 0%, rgba(66,133,244,0.10) 50%, transparent 100%); }

/* 3. The 3D flip. The reference swaps a front face out and an identical back face
      in, which reads as one continuous rotation. These buttons are icon-only, so
      there is no second face to build — the same motion is produced by flipping
      the icon away and back through the same 90 degrees. */
.az-fab__btn { perspective: 600px; }
.az-fab__btn > svg,
.az-fab__btn > img {
  transform-origin: center bottom;
  transform-style: preserve-3d;
}
@keyframes azDockFlip {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}
.az-fab__btn:hover .az-fab__icon,
.az-fab__lang:hover > .az-flag {
  animation: azDockFlip 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 4. Per-item icon colour, monochrome icons only. The Waze and Maps tiles are
      full-colour brand marks and are deliberately left alone — recolouring a
      third-party logo is both wrong and, for Maps, against its brand terms. */
.az-fab__btn--appointment:hover .az-fab__icon { color: #6f8a1f; }
.az-fab__btn--call:hover .az-fab__icon,
.az-fab__btn--chat:hover .az-fab__icon { color: #245b43; }
.az-fab__btn--blog:hover .az-fab__icon { color: #174735; }

@media (prefers-reduced-motion: reduce) {
  .az-fab::after,
  .az-fab__btn::before { transition: none; }
  .az-fab__btn:hover .az-fab__icon,
  .az-fab__lang:hover > .az-flag { animation: none; }
}

/* ── Veiled state: the dock waits until the hero is scrolled past ─────────────
   Set by armHeroReveal() in scripts/i18n/build-floating-nav.mjs, and only on
   pages that actually have a hero — blog, service and article pages have none,
   so the dock stays immediately visible there exactly as before.

   The transition list repeats box-shadow and border-color from the base rule on
   purpose: `transition` is a shorthand, so declaring it again here would
   otherwise drop the dock's existing hover transitions.

   visibility (not opacity alone) is what removes the dock from the tab order and
   the accessibility tree while it is off screen, so nothing is focusable but
   invisible. Its change is delayed by the slide duration on the way out so the
   movement is still seen, and immediate on the way in. translate3d keeps the
   compositor hint the base rule sets up with will-change. */
.az-fab {
  transition:
    box-shadow 220ms ease,
    border-color 180ms ease,
    opacity 280ms var(--az-ease),
    transform 280ms var(--az-ease),
    visibility 0s linear 0s;
}

.az-fab--veiled {
  opacity: 0;
  transform: translate3d(0, calc(100% + var(--az-bottom) + 16px), 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    box-shadow 220ms ease,
    border-color 180ms ease,
    opacity 280ms var(--az-ease),
    transform 280ms var(--az-ease),
    visibility 0s linear 280ms;
}

@media (prefers-reduced-motion: reduce) {
  .az-fab,
  .az-fab--veiled {
    transition: opacity 1ms linear, visibility 0s linear;
  }
  .az-fab--veiled { transform: translateZ(0); }
}