/* ---------------------------------------------------------------------------
   THE "ADD TO HOME SCREEN" BAR (2026-09-14)

   The site has been a fully installable app for a long time — real manifest,
   real icons, a working service worker — and NOTHING on any page ever said so.
   A banner existed once and was removed in a de-clutter pass (see
   docs/archive/AGENT_HANDOFF.md:305, id #pwaInstallBanner). This is its
   replacement, kept in its own file so frontrow.css is untouched.

   It sits ABOVE the fixed phone tab bar (.tabs — 64px plus the home-indicator
   inset, frontrow.css:370) and is hidden outright whenever the booking /
   payment action bar (.bar, frontrow.css:444) is on the page, so it can never
   cover a Book or Pay button.

   Colours are the site's own variables only; no font and no icon library is
   loaded. Square corners and the uppercase display face match the rest.
--------------------------------------------------------------------------- */

.pwa-bar{
  position:fixed;
  inset:auto 0 auto 0;
  /* .tabs is 64px + the home-indicator inset, and it only exists under 760px. */
  bottom:calc(64px + env(safe-area-inset-bottom,0px));
  z-index:39;                 /* under .tabs (40) and well under .bar (45) */
  display:none;               /* the script turns it on, never CSS alone */
  background:var(--surface);
  border-top:1px solid var(--sep);
  border-bottom:1px solid var(--sep);
  padding:10px var(--gutter);
}
.pwa-bar[data-on="1"]{display:block}

/* Above 760px the tab bar is gone (frontrow.css:377), so the bar sits on the
   floor and takes the safe-area inset itself. */
@media (min-width:760px){
  .pwa-bar{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}

/* NEVER over a Book or Pay button. The action bar is printed by the page and
   this bar is printed by the footer, so .bar always comes first among the
   body's children — the same shape the existing `.bar ~ .wa` rule relies on
   (frontrow.css:319). The script checks for .bar as well, so the bar is never
   even switched on there; this line is the second lock, not the only one. */
.bar ~ .pwa-bar{display:none!important}

/* Nothing of this belongs on paper (frontrow.css:801 does the same for the
   other fixed furniture). */
@media print{.pwa-bar{display:none!important}}

.pwa-bar__in{
  max-width:1040px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
}
.pwa-bar__mark{
  flex:none;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--on-light);
  border-radius:var(--r-card);
}
.pwa-bar__mark svg{width:18px;height:18px}

/* The round WhatsApp button sits at 80px and the chat launcher at 144px
   (frontrow.css:314 / 328), both above this bar in the stack — so while the
   bar is on screen they are lifted clear of it instead of floating over the
   install button. "2" is the taller state, with the iPhone steps open. */
html[data-pwa-bar="1"] .wa{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
html[data-pwa-bar="1"] .lc-launch{bottom:calc(196px + env(safe-area-inset-bottom,0px))}
html[data-pwa-bar="1"] .lc-launch.lc-launch--solo{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
html[data-pwa-bar="2"] .wa{bottom:calc(230px + env(safe-area-inset-bottom,0px))}
html[data-pwa-bar="2"] .lc-launch{bottom:calc(294px + env(safe-area-inset-bottom,0px))}
html[data-pwa-bar="2"] .lc-launch.lc-launch--solo{bottom:calc(230px + env(safe-area-inset-bottom,0px))}
.pwa-bar__txt{
  flex:1 1 auto;min-width:0;
  font-size:13px;line-height:1.35;color:var(--text);
}
.pwa-bar__go{
  flex:none;
  font-family:var(--display);font-size:13px;line-height:1;
  text-transform:uppercase;letter-spacing:var(--display-ls);
  background:var(--accent);color:var(--on-light);
  border:0;border-radius:var(--r-pill);
  padding:10px 14px;cursor:pointer;
}
.pwa-bar__x{
  flex:none;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--sep);border-radius:var(--r-pill);
  color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;
}
.pwa-bar__x:hover{color:var(--text)}

/* ── The iPhone explanation ────────────────────────────────────────────────
   Safari fires no install event and gives no install button, so the button on
   an iPhone opens this instead: two steps and a drawing of the Share icon. */
.pwa-how{
  display:none;
  margin:10px auto 0;max-width:1040px;
  border-top:1px solid var(--sep);
  padding-top:10px;
}
.pwa-how[data-on="1"]{display:block}
.pwa-how__step{
  display:flex;align-items:center;gap:10px;
  font-size:13px;line-height:1.4;color:var(--text);
  padding:4px 0;
}
.pwa-how__n{
  flex:none;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--sep-strong);border-radius:var(--r-pill);
  font-size:11px;color:var(--muted);
}
.pwa-how__ico{flex:none;width:18px;height:18px;color:var(--accent)}