/* ===========================================================================
   THEME ARMOUR — loaded last, WordPress only.

   The standalone pages need none of this. Inside a theme, the component is
   competing with stylesheets that target bare elements (`input[type=tel]`) and
   body attributes (`body[data-button-style=rounded_shadow] button`). Those
   selectors out-specify a single class, so ordinary rules lose no matter what
   order they load in.

   `!important` is the correct tool here and not a shortcut: this file exists to
   win against stylesheets we do not control and cannot predict. It is kept
   deliberately narrow — only the properties a theme actually tramples, only
   inside `.lgb`, so nothing here can leak out into the rest of the site.

   Note the doubled class names (`.lgb.lgb`, `.lgb__cta.lgb__cta`). When both
   sides declare `!important`, specificity still decides — and a theme rule like
   `body[data-button-style^="rounded"] button[type="submit"]` scores (0,2,2),
   which beats a plain `.lgb button.lgb__cta` at (0,2,1). Repeating a class is
   the standard way to raise specificity without inventing markup; these land at
   (0,4,1), clear of anything short of an ID selector.

   Verified against Salient 17.4.1 (material skin, rounded_shadow buttons).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Form controls we render ourselves.
   Salient's `input[type=tel]` rule (0,1,1) beats `.lgb__co-input` (0,1,0), and
   its material skin fills the field with the theme accent — which rendered the
   phone field as a solid brown block.
   --------------------------------------------------------------------------- */
.lgb.lgb input.lgb__co-input.lgb__co-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 1px solid #e2d4c6 !important;
  -webkit-border-radius: 10px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: var(--font-text) !important;
  font-size: 16px !important;   /* below 16 and iOS zooms the page on focus */
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: border-color var(--duration-control) var(--ease-standard) !important;
}

.lgb.lgb input.lgb__co-input.lgb__co-input:focus {
  border-color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

.lgb.lgb input.lgb__co-input.lgb__co-input[aria-invalid="true"] {
  border-color: var(--error) !important;
  color: var(--error) !important;
}

/* ---------------------------------------------------------------------------
   The primary buttons.
   `body[data-button-style=rounded_shadow]` gives every button a pill radius and
   a drop shadow, and the theme's own width/display rules shrank the Purchase
   button to an inline pill floated left.
   --------------------------------------------------------------------------- */
.lgb.lgb a.lgb__cta.lgb__cta,
.lgb.lgb button.lgb__cta.lgb__cta,
.lgb.lgb input.lgb__cta.lgb__cta {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--control-h) !important;
  height: auto !important;
  margin: 0 !important;
  padding: var(--tight) var(--gutter) !important;
  border: none !important;
  /* The prefixed alias too: Salient's customizer emits
     `body[data-button-style^="rounded"] button { -webkit-border-radius: 10px !important }`
     and setting only the unprefixed property leaves that one standing. */
  -webkit-border-radius: var(--radius-control) !important;
  border-radius: var(--radius-control) !important;   /* 12px, not a pill */
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--canvas) !important;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.lgb.lgb a.lgb__cta.lgb__cta:hover,
.lgb.lgb button.lgb__cta.lgb__cta:hover {
  background: var(--ink-soft) !important;
  background-color: var(--ink-soft) !important;
  transform: none !important;
  box-shadow: none !important;
}

.lgb.lgb .lgb__cta.lgb__cta[aria-disabled="true"],
.lgb.lgb .lgb__cta.lgb__cta:disabled {
  background: var(--inactive) !important;
  background-color: var(--inactive) !important;
  color: var(--inactive-text) !important;
}

/* Salient decorates buttons with pseudo-elements for its hover effects. */
.lgb .lgb__cta::before,
.lgb .lgb__cta::after {
  content: none !important;
}

/* The small controls: info buttons, the back link, the stretched hit areas. */
.lgb.lgb button.lgb__co-info.lgb__co-info,
.lgb.lgb button.lgb__co-test-hit.lgb__co-test-hit,
.lgb.lgb button.lgb__modal-close.lgb__modal-close {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  transform: none !important;
}
.lgb.lgb button.lgb__modal-close.lgb__modal-close { border-radius: 999px !important; }

.lgb.lgb a.lgb__co-back.lgb__co-back,
.lgb.lgb a.lgb__co-phone.lgb__co-phone,
.lgb.lgb .lgb__co-consent-text a {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
}
.lgb.lgb a.lgb__co-back.lgb__co-back { text-transform: uppercase !important; }

/* Themes commonly set a global line-height and letter-spacing on body copy. */
.lgb p,
.lgb h1, .lgb h2, .lgb h3, .lgb h4,
.lgb span, .lgb li {
  text-transform: none !important;
}

/* …except inside the primary buttons. The blanket rule above was flattening
   the CTA labels to sentence case — the label is a <span>, so the reset beat
   the button's own uppercase. */
.lgb.lgb .lgb__cta.lgb__cta span {
  text-transform: uppercase !important;
}

/* ---------------------------------------------------------------------------
   The page frame.
   Only on booking pages, via a body class the plugin adds — nothing here
   touches the rest of the site.

   Salient wraps content in .container-wrap > .container.main-content > .row,
   which adds the white band above the card and caps the width at 880px.
   --------------------------------------------------------------------------- */
body.lgb-page .container-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--canvas, #fbf2e9) !important;
}

/* Overscroll at the top of the page shows the document's own background, not
   the component's. The theme leaves that white, so rubber-banding upward
   flashed a white band above the header. Painting the document itself removes
   it — `html` as well as `body`, because body's background only propagates to
   the canvas when html has none of its own. */
html:has(> body.lgb-page),
body.lgb-page {
  background: var(--canvas, #fbf2e9) !important;
  background-color: #fbf2e9 !important;

  /* Stop the document rubber-banding past its own top. Recolouring what sits
     behind the bounce was treating the symptom — the bounce itself is what
     lets you scroll "too far up" and see anything there at all. */
  overscroll-behavior-y: none !important;
}

/* Salient's own wrappers, in case one of them is the white showing through. */
body.lgb-page #ajax-content-wrap {
  background: var(--canvas, #fbf2e9) !important;
  background-color: #fbf2e9 !important;
}

body.lgb-page .container-wrap > .container.main-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.lgb-page .container-wrap .row,
body.lgb-page .container-wrap .col.span_12 {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   Sizing inside a themed page.

   The card fits the space left below the site header, and its right panel
   scrolls inside it — so the total and the pay button are always on screen no
   matter how tall Stripe's fields get. The exact height is set by
   LGB.fitToViewport() in shared.js, which measures the header rather than
   guessing at it; everything here is the layout that height needs to work.
   --------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  /* The shell fills everything below the header (height set by
     fitToViewport) and centres the card in it — vertically as well as
     horizontally, so a capped card floats in the middle rather than
     hanging from the nav. */
  body.lgb-page .lgb__co-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
    padding: 0 20px;
  }

  body.lgb-page .lgb__co-sheet { width: 100%; }

  body.lgb-page .lgb__co-sheet {
    /* Replaced inline by fitToViewport(). Without JS this is the fallback and
       the page simply scrolls. */
    height: auto;
    max-height: none;
    max-width: 1360px;
    margin-inline: auto;
    /* See checkout.css — the row must be allowed to shrink to the sheet. */
    grid-template-rows: minmax(0, 1fr);
    /* Even columns. At 0.72fr the form column ran to ~790px on a wide desktop,
       which left the fields looking stretched. */
    grid-template-columns: 1fr 1fr;
  }

  body.lgb-page .lgb__co-panel {
    padding: 26px 36px 0;
    min-height: 0;
  }

  /* The scrolling region, restored — the fitted height is what gives it
     something to scroll within. */
  body.lgb-page .lgb__co-scroll {
    overflow-y: auto;
    overscroll-behavior: none;
    min-height: 0;
    margin-right: -28px;
    padding-right: 28px;
  }

  body.lgb-page .lgb__co-more { display: block; }

  body.lgb-page .lgb__co-actions,
  body.lgb-page .lgb__co-totals {
    padding-bottom: 26px;
  }

  /* Tightened rhythm, so more of the form is visible before it needs scrolling. */
  body.lgb-page .lgb__co-field { margin-bottom: 12px; }
  body.lgb-page .lgb__co-heading { margin-bottom: 14px; }
  body.lgb-page .lgb__co-head { margin-bottom: 10px; }
  body.lgb-page .lgb__co-summary { margin-bottom: 14px; padding: 12px 14px; }
  body.lgb-page .lgb__co-actions { padding-top: 12px; }
  body.lgb-page .lgb__co-fineprint { margin-top: 8px; }
  body.lgb-page .lgb__co-consent { margin-bottom: 10px; }

  body.lgb-page .lgb__co-mount--payment { min-height: 160px; }
  body.lgb-page .lgb__co-mount--address { min-height: 240px; }

  body.lgb-page .lgb__co-media { height: 100%; }
}

/* ---------------------------------------------------------------------------
   The info dialog.
   It renders in the browser's top layer, but a theme that styles `dialog`
   directly can still move it — and off-centre means the right edge is cut off.
   Pinned explicitly here for the same reason as the buttons and inputs.
   --------------------------------------------------------------------------- */
.lgb dialog.lgb__modal {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: min(560px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  transform: none !important;
  border: none !important;
  box-sizing: border-box !important;
}

.lgb dialog.lgb__modal .lgb__modal-inner {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.lgb dialog.lgb__modal * {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   The band under the header.

   Chasing which element it belonged to was the wrong approach — cream on cream
   only needs one stray white pixel row to show. Everything between the top of
   the document and the card is painted the page colour, and the header's own
   border and shadow are removed, so there is nothing left that can render as a
   line. Booking pages only.
   --------------------------------------------------------------------------- */
body.lgb-page #header-space,
body.lgb-page #header-outer,
body.lgb-page #header-outer .container,
body.lgb-page #header-outer #top,
body.lgb-page #page-header-wrap,
body.lgb-page #page-header-bg,
body.lgb-page .container-wrap,
body.lgb-page #ajax-content-wrap {
  background: var(--canvas, #fbf2e9) !important;
  background-color: #fbf2e9 !important;
}

body.lgb-page #header-outer,
body.lgb-page #header-outer .container,
body.lgb-page #header-space,
body.lgb-page .container-wrap {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   The info dialog's list.

   Salient styles lists through `#ajax-content-wrap ul`, which out-specifies the
   component's own reset — the inherited left padding pushed every bullet line
   inward, and it took the `border-top` above the list in with it, which is why
   that divider looked shorter than the one below it.
   --------------------------------------------------------------------------- */
.lgb dialog.lgb__modal ul.lgb__modal-points {
  margin: var(--gutter) 0 0 0 !important;
  padding: var(--gutter) 0 0 0 !important;
  list-style: none !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lgb dialog.lgb__modal ul.lgb__modal-points > li {
  margin: 0 !important;
  padding: 6px 0 !important;
  list-style: none !important;
  text-align: left !important;
  text-indent: 0 !important;
}

.lgb dialog.lgb__modal ul.lgb__modal-points > li::marker { content: none !important; }

/* Both rules now start and end at the same edges. */
.lgb dialog.lgb__modal .lgb__modal-note {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------------
   Static page.

   On desktop these two pages ARE the card — the page behind it has nothing to
   offer but the footer, and reaching the footer mid-form just yanks the form
   away from the cursor. So the document is frozen: the card fills the space
   below the header (fitToViewport sizes it), its panel scrolls, and the page
   itself does not move.

   Height-gated as well as width-gated: on a very short window a frozen page
   could make the card's lower edge unreachable, and there a scrolling page is
   the lesser evil.
   --------------------------------------------------------------------------- */
@media (min-width: 64rem) and (min-height: 32rem) {
  html:has(> body.lgb-page),
  body.lgb-page {
    overflow: hidden !important;
    height: 100% !important;
  }
}