/* Event-page polish fixes (David review, 2026-07-20). Loaded after the event CSS so these win. */

/* Calendar / Share icon buttons under the price were too small — enlarge button + glyph. */
.se-scope .iconbtn { width: 50px; height: 50px; }
.se-scope .iconbtn svg { width: 26px !important; height: 26px !important; }

/* Donation "amount of my choosing" field: the theme's global <input> styling bleeds a
   second rounded/dark border INSIDE the .bk-custom-amt pill. Strip it — the pill is the field. */
.se-scope .bk-custom-amt input,
.ibk .bk-custom-amt input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* Hide the native number-input spinner arrows — they overflowed the pill and are redundant
   with the slider + type-in. */
.se-scope .bk-custom-amt input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.se-scope .bk-custom-amt input::-webkit-outer-spin-button,
.se-scope .bk-custom-amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Organiser ("Organised by") logo must not be rounded — the theme's global img radius bleeds in. */
.se-scope .brand img { border-radius: 0 !important; }

/* Align the event page content with the site header/menu — the Elementor header container is
   1340px wide (logo left edge → calendar icon right edge); the event content was capped at 1160. */
.se-scope { --maxw: 1340px; }

/* ── M184: the booking wizard must shrink, not push the page ────────────────────────────────────
   FAULT 2, and this is the half that HIDES text rather than allowing a scroll, which makes it the
   worse of the two.

   On the weekly meditation group's page, moving from "Select" to "Who's Coming" widened the whole
   content column. `.ibk-body`'s min-content is 365.43px, measured rather than inferred, and the
   mobile layout's track is `grid-template-columns: 1fr`, which is `minmax(auto, 1fr)`: a grid
   item's automatic minimum size is its content, so the track cannot go below the panel and grew to
   it. `div.main` went from 343px to 367.43px and its right edge to 383.43 on a 375px screen, taking
   34 elements past the edge with it - the event title, the rule, the series banner and every
   paragraph of the description.

   And this template sets `html, body { overflow-x: clip !important }` (deliberately, to replace the
   theme's `overflow-x: hidden`, which was forcing `overflow-y: auto` and killing the sidebar's
   `position: sticky`). So the page did NOT scroll. It CROPPED, silently, and the right-hand 8px of
   every line was simply not there. That is why nobody found this in five months and why two
   separate sweeps measured `scrollWidth` at a reassuring 375: the clip swallowed it. David reported
   it from his phone as "horizontal scroll", mid booking, on this exact page.

   The panel needs about 398px before the column stops overflowing, so an iPhone SE (375), a 12/13/14
   (390) and a 15/16 (393) all cropped; only the Plus and Max sizes escaped. Residential retreats use
   a different layout and were never affected - checked through the same two steps, zero offenders.

   Steps 0, 1 and 1b measure 359 and were always fine; it is the step transition that does it, which
   is exactly why a check that opened the page and looked at it saw nothing.

   Measured in place, both directions, at a real 375px layout viewport: 34 elements past the right
   edge before, 0 after, and 34 again when this rule is removed. `.main` 367.43 -> 343.

   NOT fixed with `overflow-x: hidden`, and note that the crop above is not this rule's doing and is
   still worth questioning separately: cropping turns every FUTURE overflow into invisible missing
   text instead of a visible scrollbar, which is precisely how this one survived. */
.se-scope .frame.mobile .layout > *,
.se-scope .frame.desktop.narrow .layout > * { min-width: 0; }