/* The booking overlay, shared by every page that has a "Book a call" link —
   including the landing pages, which load lp.css and never see desktop.css.
   Keeping one copy here is what stops the two drifting apart. */
:root { --soft-out: cubic-bezier(0.25, 1, 0.5, 1); }

.lights { display: flex; gap: 8px; padding: 16px; }
.lights .light-btn {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.lights .light-red { background: #ff5f57; }
.lights .light-amber { background: #febc2e; }
.lights .light-green { background: #28c840; }
.lights .light-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Booking overlay ----------
   The Google appointment page over the desktop rather than in a new tab, in a
   window that matches the rest of the page. Desktop only: the embed needs more
   width than a phone has, so phones keep following the link. */
.booker { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.22s var(--soft-out); }
.booker.is-open { opacity: 1; }
.booker-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.booker-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 94vw);
  height: min(760px, 88vh);
  overflow: hidden;
  border-radius: 16px;
  background: #1c1c1e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 1px 1px 2px rgba(255, 255, 255, 0.18);
  transform: scale(0.97);
  transition: transform 0.22s var(--soft-out);
}
.booker.is-open .booker-window { transform: scale(1); }
.booker-bar { position: relative; display: flex; flex: none; align-items: center; height: 42px; padding: 0 14px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.booker-bar .lights { position: relative; padding: 0; margin: 0; cursor: pointer; }
.booker-bar .lights::after { content: ""; position: absolute; inset: -12px -16px; }
.booker-bar .lights i { pointer-events: none; }
.booker-bar .lights i { width: 12px; height: 12px; border-radius: 100px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.booker-bar .lights i:nth-of-type(1) { background: #febc2e; }
.booker-bar .lights i:nth-of-type(2) { background: #28c840; }
.booker-bar > span { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.booker-body { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; }
.booker-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.booker-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #5f5f62; background: #fff; }
body.booker-open { overflow: hidden; }
/* On a phone it stays a window over the desktop rather than a full-screen takeover:
   the dock and the page behind it keep showing round the edges. */
@media (max-width: 809.98px) {
  .booker { padding: 20px 12px 92px; }
  .booker-window { width: 100%; height: min(100%, 560px); max-width: none; border-radius: 18px; }
  .booker-bar { height: 44px; padding: 0 16px; font-size: 12.5px; }
  .booker-bar .lights::after { inset: -14px -18px; }
  /* The embed opens on Google's own header — name, duration, Meet note — which on a
     phone fills the window before a single date shows. Slide the frame up so it opens
     on the month and the dates. The header is still there, just scrolled off. */
  .booker-body { overflow: hidden; }
  .booker-body iframe { height: calc(100% + 220px); margin-top: -220px; }
}