/*
 * RRM booking popup — the chrome around the widget.
 *
 * Deliberately a SEPARATE file: assets/css/rrm-booking.css is the Claude Design
 * canvas export applied one-to-one and must not be hand-edited. Nothing here
 * restyles the widget; it only builds the sheet it sits in.
 *
 * Two things that are not decoration:
 *
 *  - `:target` is a real opening mechanism, not a leftover. With JavaScript off
 *    the CTA is an ordinary link to #rrm-booking, and this is what makes that
 *    link show the widget's <noscript> phone fallback instead of doing nothing.
 *
 *  - The panel is wide on desktop ON PURPOSE. The widget switches to its
 *    two-column layout (vertical step rail + content) at a 960px VIEWPORT, not
 *    at its own width, so a narrow sheet on a big screen would crush the
 *    designed desktop layout instead of avoiding it.
 */

.rrm-bkm {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  color: inherit;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 0;
  width: 100%;
}
.rrm-bkm::backdrop {
  background: rgba(10, 10, 12, .58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Open — by script (`[open]`, top layer) or by the no-JS `:target` fallback. */
.rrm-bkm[open],
.rrm-bkm:target {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: fixed;
  /* Only consulted in the :target fallback — showModal() uses the top layer,
     which is above every z-index on the page including the sticky header. */
  z-index: 2147483000;
}
/* The fallback has no ::backdrop of its own. */
.rrm-bkm:not([open]):target { background: rgba(10, 10, 12, .58); }

.rrm-bkm__panel {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 40px 90px -35px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 960px);
  max-width: 1120px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Programmatic focus target — never draws a ring (it is a container, not a control). */
.rrm-bkm__panel:focus,
.rrm-bkm__panel:focus-visible { outline: none; }

.rrm-bkm__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* MUST equal the `gutter` the shell is rendered with, or the widget's sticky
     action bar bleeds by the wrong amount and stops short of the sheet edge. */
  padding: 18px;
  -webkit-overflow-scrolling: touch;
}

/* Sits over the widget's dark head banner on a phone and over plain content on
   a wide screen, so it carries its own contrast rather than borrowing any. */
.rrm-bkm__close {
  align-items: center;
  background: rgba(11, 11, 13, .72);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 12px;
  top: 12px;
  transition: transform .12s ease, background .15s ease;
  width: 38px;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.rrm-bkm__close svg { height: 18px; width: 18px; }
/* `.rrm-bkm` prefix is not decoration: Hello Elementor's reset paints every
   button:hover/:focus pink at (0,1,1), and the popup focuses this button as it
   opens. See assets/css/rrm-booking-theme-guard.css. */
.rrm-bkm .rrm-bkm__close { background: rgba(11, 11, 13, .72); color: #ffffff; }
.rrm-bkm .rrm-bkm__close:focus { background: rgba(11, 11, 13, .72); color: #ffffff; }
.rrm-bkm .rrm-bkm__close:hover { background: rgba(11, 11, 13, .88); color: #ffffff; }
.rrm-bkm__close:active { transform: scale(.94); }
.rrm-bkm__close:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* Phone: a bottom sheet, which is where a thumb already is. */
@media (max-width: 640px) {
  .rrm-bkm[open],
  .rrm-bkm:target { align-items: flex-end; padding: 0; }
  .rrm-bkm__panel {
    border-radius: 22px 22px 0 0;
    max-height: 94dvh;
  }
  .rrm-bkm__scroll { padding: 18px 18px max(18px, env(safe-area-inset-bottom)); }
}

/* Background must not scroll behind the sheet — iOS ignores the top layer. */
html.rrm-bkm-lock, html.rrm-bkm-lock body { overflow: hidden; }

@media (prefers-color-scheme: dark) {
  .rrm-bkm__panel {
    background: #1a1b1f; /* = the widget's own --rrm-bg in dark mode */
    box-shadow: 0 40px 90px -35px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrm-bkm__close { transition: none; }
}

/* ── floating phone-only trigger (setting: fab) ─────────────────────────────
 * Bottom-right, above the thumb. Deliberately NOT shown on a wide screen: on
 * desktop the header CTA is always visible, so a floating duplicate would only
 * cover the page. It hides itself while the popup is open — on Android the
 * dialog's top layer already covers it, but a fixed element can outrank a
 * non-modal :target fallback, and it would sit on top of the sheet.
 */
.rrm-bkm-fabwrap {
  bottom: max(16px, env(safe-area-inset-bottom));
  display: none;
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  z-index: 2147482000;
}
/* Two classes on purpose — `.elementor-kit-N button` is (0,1,1) and would
   otherwise repaint this in the site's global brand colour. */
.rrm-bkm-fabwrap .rrm-bkm-fab {
  align-items: center;
  background: var(--rrm-accent, #1d6f35);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14);
  color: #ffffff;
  cursor: pointer;
  /* The WRAPPER owns visibility (none by default, block on a phone); the button
     itself is always laid out, so it never inherits a stale `display:none`. */
  display: inline-flex;
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  gap: 8px;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 14px 20px;
  -webkit-tap-highlight-color: transparent;
}
.rrm-bkm-fabwrap .rrm-bkm-fab svg { height: 19px; width: 19px; flex: 0 0 auto; }
.rrm-bkm-fabwrap .rrm-bkm-fab:active { transform: scale(.96); }
.rrm-bkm-fabwrap .rrm-bkm-fab:hover,
.rrm-bkm-fabwrap .rrm-bkm-fab:focus { background: var(--rrm-accent, #1d6f35); color: #ffffff; }
.rrm-bkm-fabwrap .rrm-bkm-fab:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

@media (max-width: 860px) {
  .rrm-bkm-fabwrap { display: block; }
}
html.rrm-bkm-lock .rrm-bkm-fabwrap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rrm-bkm-fabwrap .rrm-bkm-fab { transition: none; }
}