/* =========================================================================
   SEC — public single event page + the four-step registration panel
   public/css/sec-frontend-event.css

   Loaded AFTER smart-event-cal-public.css, smart-event-cal-common.css and
   custom-event-calendar.css, so it wins on source order. Neither of those two
   shared sheets is touched: the one-to-one booking flow, my-bookings, the
   purchase page and the calendar all still depend on them.

   SCOPES
     #sec-ev-page       the single event page body (templates/single-secevent.php)
     #sec-side-popup  the slide-in registration panel, printed on wp_footer by
                      Public::sec_group_event_footer_popup() and shared with the
                      calendar. Nothing here reaches #sec-calendar itself.

   COLOUR
     There is no SEC green in this file, and no brand hex of any kind. Every
     colour is either var(--sec-*, <neutral>) — the custom properties
     Public::sec_custom_css_variables() writes from the Appearance page — or a
     neutral (slate greys, plus the amber/red/blue status trio) chosen to stay
     legible under any --sec-primary an owner picks. Change the Appearance
     colour and the page and the panel both follow it.

     --sec-ev-brand-tint / -tint-2 / -ink are DERIVED from the owner's
     primary. CSS cannot darken an arbitrary custom property, so they are
     declared twice: once as safe neutrals that work everywhere, then again
     inside an @supports color-mix() block for browsers that can do the real
     thing (Chrome 111+, Safari 16.4+, Firefox 113+).

   RESPONSIVE
     smart-event-cal-common.css contains zero media queries, so anything
     inheriting from it will not stack on a phone unless this file says so.
     Every stacking rule the event page and the panel need is here.
     Wizard controls are 44px minimum under (pointer: coarse).
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
/* #sec-alert-msg-box-event is appended straight to <body> by the panel's AJAX
   handler, outside both other scopes, so it needs its own copy of the block or
   every var() in its rules resolves to nothing and the dialog paints
   transparent. */
#sec-ev-page,
#sec-side-popup,
#sec-alert-msg-box-event {
  --sec-ev-brand:        var(--sec-primary-background-color, #2c3e50);
  --sec-ev-brand-on:     var(--sec-primary-text-color, #ffffff);
  --sec-ev-link:         var(--sec-link-color, #1d4ed8);
  --sec-ev-ink:          var(--sec-heading-color, #0f172a);
  --sec-ev-ink-2:        var(--sec-text-color, #334155);

  /* The accent on the hero strip and under the panel header. When the editor
     set a per-event spotlight colour the template writes --sec-ev-c inline and
     that wins; otherwise this falls back to the owner's primary.
     It deliberately does NOT read --sec-ge-spotlight-color: that option's
     stored default is the SEC admin green, so on any site whose owner has never
     opened the Appearance page it would paint admin chrome onto a public page.
     An authored per-event colour is a choice; that default is an accident. */
  --sec-ev-c:            var(--sec-ev-brand);

  /* derived-from-brand, neutral fallbacks (see @supports below) */
  --sec-ev-brand-tint:   #f1f5f9;
  --sec-ev-brand-tint-2: #e2e8f0;
  --sec-ev-brand-ink:    var(--sec-ev-brand);

  /* neutrals */
  --sec-ev-muted:        #64748b;
  --sec-ev-muted-2:      #94a3b8;
  --sec-ev-line:         #e2e8f0;
  --sec-ev-line-soft:    #f1f5f9;
  --sec-ev-slate-tint:   #f8fafc;
  --sec-ev-surface:      #ffffff;

  --sec-ev-danger:       #dc2626;
  --sec-ev-danger-bg:    #fef2f2;
  --sec-ev-danger-line:  #fecaca;
  --sec-ev-danger-ink:   #b42318;
  --sec-ev-amber-bg:     #fffbeb;
  --sec-ev-amber-line:   #fde68a;
  --sec-ev-amber-ink:    #8a5a06;

  --sec-ev-r-lg:  14px;
  --sec-ev-r-md:  10px;
  --sec-ev-r-sm:  8px;
  --sec-ev-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  #sec-ev-page,
  #sec-side-popup,
  #sec-alert-msg-box-event {
    --sec-ev-brand-tint:   color-mix(in srgb, var(--sec-ev-brand) 12%, #fff);
    --sec-ev-brand-tint-2: color-mix(in srgb, var(--sec-ev-brand) 30%, #fff);
    --sec-ev-brand-ink:    color-mix(in srgb, var(--sec-ev-brand) 74%, #000);
  }
}

/* ---------------------------------------------------------- shared atoms */
/* Zero-specificity element resets, so every component rule below beats them
   without repeating the id (FRONTEND-CALENDAR-MAP.md §8). */
:where(#sec-ev-page, #sec-side-popup) :where(.sec-ev-card, .sec-ev-bk) :where(p) { margin: 0; }
:where(#sec-ev-page) :where(figure) { margin: 0; }

#sec-ev-page .sec-ev-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

#sec-ev-page svg.sec-ev-ic,
#sec-side-popup svg.sec-ev-ic {
  width: 1em; height: 1em; display: inline-block; vertical-align: -.13em;
  stroke: currentColor; stroke-width: 1.9; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* pills */
#sec-ev-page .sec-ev-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 6px; padding: 3px 9px;
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
  white-space: nowrap; border: 1px solid transparent;
}
#sec-ev-page .sec-ev-pill svg.sec-ev-ic { font-size: 11px; stroke-width: 2.1; }
#sec-ev-page .sec-ev-pill--free  { background: var(--sec-ev-brand-tint); color: var(--sec-ev-brand-ink); }
#sec-ev-page .sec-ev-pill--paid,
#sec-ev-page .sec-ev-pill--plain { background: var(--sec-ev-surface); color: var(--sec-ev-ink-2); border-color: var(--sec-ev-line); }
#sec-ev-page .sec-ev-pill--cat   { background: var(--sec-ev-slate-tint); color: var(--sec-ev-muted); border-color: var(--sec-ev-line); }

/* notices */
#sec-ev-page .sec-ev-notice,
#sec-side-popup .sec-ev-notice {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--sec-ev-r-md); padding: 12px 14px;
  font-size: 13px; line-height: 1.45; border: 1px solid transparent;
}
#sec-ev-page .sec-ev-notice > svg.sec-ev-ic,
#sec-side-popup .sec-ev-notice > svg.sec-ev-ic { font-size: 17px; flex: 0 0 17px; margin-top: 1px; }
#sec-ev-page .sec-ev-notice b,
#sec-side-popup .sec-ev-notice b { display: block; font-weight: 700; margin-bottom: 3px; font-size: 13.5px; }
#sec-ev-page .sec-ev-notice--ok,
#sec-side-popup .sec-ev-notice--ok {
  background: var(--sec-ev-brand-tint); border-color: var(--sec-ev-brand-tint-2); color: var(--sec-ev-brand-ink);
}

/* cards */
#sec-ev-page .sec-ev-card {
  background: var(--sec-ev-surface);
  border: 1px solid var(--sec-ev-line);
  border-radius: var(--sec-ev-r-lg);
  box-shadow: var(--sec-ev-shadow);
  overflow: hidden;
}
#sec-ev-page .sec-ev-card-hd {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-bottom: 1px solid var(--sec-ev-line-soft);
}
#sec-ev-page .sec-ev-card-hd .sec-ev-card-ic {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sec-ev-brand-tint); color: var(--sec-ev-brand-ink);
}
#sec-ev-page .sec-ev-card-hd .sec-ev-card-ic svg.sec-ev-ic { font-size: 17px; }
#sec-ev-page .sec-ev-card-hd h2.sec-widget-title {
  font-size: 15px; font-weight: 700; margin: 0; padding: 0;
  color: var(--sec-ev-ink); line-height: 1.3; border: 0;
}
#sec-ev-page .sec-ev-card-hd .sec-ev-card-d {
  font-size: 12.5px; color: var(--sec-ev-muted); margin: 2px 0 0; line-height: 1.4;
}
#sec-ev-page .sec-ev-card-bd { padding: 16px; }

/* ================================================================== PAGE */
/* The template's own shell (#sec-events-template .sec-single-body — white card,
   1px border, 30px of padding) is dissolved: the cards below are the surfaces
   now, and a card inside a card reads as neither. Higher specificity than
   smart-event-cal-public.css:137/173 rather than !important. */
#sec-events-template #sec-ev-page.sec-single-body {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
#sec-ev-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  /* The title block runs the full width of the container and the rail starts
     beneath it, rather than the two sharing the first row. */
  grid-template-areas:
    "sechead sechead"
    "sechero secrail"
    "secbody secrail";
  column-gap: 24px;
  row-gap: 0;                 /* an absent hero must not leave a gap behind */
  align-items: start;
  align-content: start;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  color: var(--sec-ev-ink-2);
}
#sec-ev-page > .sec-event-heading  { grid-area: sechead; min-width: 0; margin-bottom: 4px; }
#sec-ev-page > .sec-ev-hero        { grid-area: sechero; min-width: 0; margin-bottom: 20px; }
#sec-ev-page > .sec-single-content { grid-area: secbody; min-width: 0; }
#sec-ev-page > .sec-ev-rail {
  grid-area: secrail;
  position: sticky; top: 16px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}

/* --- title block --- */
#sec-ev-page .sec-event-heading { padding: 0; margin: 0; }
.single-secevent #sec-events-template #sec-ev-page .sec-event-heading .sec-event-schedule-long .sec-sec-events-single-heading { margin: 0 0 20px; }
#sec-ev-page .sec-ev-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px;
}
.single-secevent #sec-events-template #sec-ev-page .sec-event-heading h1.sec-events-single-event-title,
#sec-ev-page h1.sec-events-single-event-title {
  font-size: clamp(24px, 3.2vw, 31px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
  margin: 0; color: var(--sec-ev-ink);
}
#sec-ev-page .sec-bb-wrapper {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 9px;
}
#sec-ev-page .sec-date-time-detail {
  font-size: 14px; font-weight: 600; color: var(--sec-ev-muted); line-height: 1.4;
}
#sec-ev-page .sec-bb-wrapper a,
#sec-ev-page .slc-show-slc-localtime {
  font-size: 13px; font-weight: 700; color: var(--sec-ev-link); text-decoration: none;
}
#sec-ev-page .sec-bb-wrapper a:hover { text-decoration: underline; }

/* --- hero --- */
#sec-ev-page .sec-ev-hero {
  position: relative; margin: 0;
  border: 1px solid var(--sec-ev-line);
  border-radius: var(--sec-ev-r-lg);
  overflow: hidden;
  box-shadow: var(--sec-ev-shadow);
  background: var(--sec-ev-slate-tint);
  line-height: 0;
}
#sec-ev-page .sec-ev-hero .sec-events-event-image { margin: 0; padding: 0; }
#sec-ev-page .sec-ev-hero img {
  display: block; width: 100%; height: auto; margin: 0;
  /* No max-height: it clipped the Appearance ratio (a 16:9 hero came out 1.89:1, a
     square one far wider). "Original" mode bounds it with the height slider instead. */
  object-fit: var(--sec-event-image-fit, cover);
}
#sec-ev-page .sec-ev-hero .sec-ev-cbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--sec-ev-c);
}

/* --- article column --- */
#sec-ev-page .sec-single-content {
  display: flex; flex-direction: column; gap: 18px;
  padding: 0; margin: 0;
}

/* The facts card keeps .sec-single-pri-meta so anything already written against
   it still matches, which is also why these two selectors have to outrun
   smart-event-cal-public.css:142/161/162 — that last one carries !important. */
#sec-events-template #sec-ev-page .sec-ev-card.sec-single-pri-meta { margin: 0; padding: 0; }
#sec-events-template #sec-ev-page .sec-single-pri-meta .sec-events-single-section { margin: 0; padding: 0; border: 0; }

/* fact rows: a hairline grid so each row reads as its own line */
#sec-events-template #sec-ev-page .sec-single-pri-meta .sf-event-meta-wrapper.sec-ev-facts,
#sec-ev-page .sec-ev-facts {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1px; background: var(--sec-ev-line-soft);
  margin: 0; padding: 0; border-radius: 0;
}
#sec-events-template #sec-ev-page .sec-single-pri-meta .sf-event-meta-wrapper .sf-event-single-meta-wrapper.sec-ev-fact,
#sec-ev-page .sec-ev-fact {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--sec-ev-surface);
  padding: 13px 16px; margin: 0; width: auto !important; float: none; flex: none;
}
#sec-ev-page .sec-ev-fact .sec-ev-fact-ic {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sec-ev-slate-tint); border: 1px solid var(--sec-ev-line);
  color: var(--sec-ev-muted);
}
#sec-ev-page .sec-ev-fact .sec-ev-fact-ic svg.sec-ev-ic { font-size: 15px; }
#sec-ev-page .sec-ev-fact .sec-ev-fact-t { min-width: 0; }
#sec-ev-page .sec-ev-fact .sec-events-label {
  font-size: 13.5px; font-weight: 700; color: var(--sec-ev-ink);
  margin: 0 0 2px; padding: 0; float: none; width: auto; line-height: 1.35;
}
#sec-ev-page .sec-ev-fact .sf-event-values {
  font-size: 13.5px; font-weight: 600; color: var(--sec-ev-ink-2);
  margin: 0; padding: 0; float: none; width: auto; line-height: 1.45;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
#sec-ev-page .sec-ev-fact .sf-event-values a { color: var(--sec-ev-link); text-decoration: none; }
#sec-ev-page .sec-ev-fact .sf-event-values a:hover { text-decoration: underline; }
#sec-ev-page .sec-ev-fact .sec-ev-fact-n {
  font-size: 12.5px; color: var(--sec-ev-muted); margin: 3px 0 0; line-height: 1.4;
}

/* description */
#sec-events-template #sec-ev-page .sec-events-single-event-description.sec-events-content { margin-top: 0; }
#sec-ev-page .sec-events-single-event-description { font-size: 15px; color: var(--sec-ev-ink-2); line-height: 1.6; }
#sec-ev-page .sec-events-single-event-description > :first-child { margin-top: 0; }
#sec-ev-page .sec-events-single-event-description > :last-child { margin-bottom: 0; }
#sec-ev-page .sec-events-single-event-description a { color: var(--sec-ev-link); }
#sec-ev-page .sec-events-single-event-description img { max-width: 100%; height: auto; }

/* --- booking rail --- */
#sec-ev-page .sec-ev-bk {
  background: var(--sec-ev-surface);
  border: 1px solid var(--sec-ev-line);
  border-radius: var(--sec-ev-r-lg);
  box-shadow: var(--sec-ev-shadow);
  overflow: hidden;
}
#sec-ev-page .sec-ev-bk-top { padding: 16px 16px 14px; border-bottom: 1px solid var(--sec-ev-line-soft); }
#sec-ev-page .sec-ev-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#sec-ev-page .sec-ev-amt {
  font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
  color: var(--sec-ev-ink); font-variant-numeric: tabular-nums;
}
#sec-ev-page .sec-ev-amt--free { font-size: 26px; }
#sec-ev-page .sec-ev-per { font-size: 13px; font-weight: 600; color: var(--sec-ev-muted); }
#sec-ev-page .sec-ev-when { font-size: 13px; font-weight: 600; color: var(--sec-ev-muted); margin: 7px 0 0; line-height: 1.4; }

#sec-ev-page .sec-ev-bk-mid { padding: 14px 16px; }
#sec-ev-page ul.sec-ev-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#sec-ev-page ul.sec-ev-mini > li.sec-ev-mini-r {
  display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 0; list-style: none;
}
#sec-ev-page ul.sec-ev-mini > li.sec-ev-mini-r::before,
#sec-ev-page ul.sec-ev-mini > li.sec-ev-mini-r::marker { content: none; }
#sec-ev-page ul.sec-ev-mini > li > svg.sec-ev-ic { font-size: 15px; flex: 0 0 15px; margin-top: 2px; color: var(--sec-ev-muted); }
#sec-ev-page .sec-ev-mini-t { display: block; font-size: 13px; font-weight: 600; color: var(--sec-ev-ink-2); line-height: 1.4; }
#sec-ev-page .sec-ev-mini-s { display: block; font-size: 12px; color: var(--sec-ev-muted); margin-top: 2px; line-height: 1.4; }

#sec-ev-page .sec-ev-bk-foot { padding: 0 16px 16px; }
#sec-ev-page .sec-ev-bk-foot .sec-button-booknow,
#sec-ev-page .sec-ev-bk-foot .sec-book-now-btn-wrapper { margin: 0; padding: 0; }

/* The primary button keeps sec-btn / sec-booking-info / sec-primary-btn and its
   three data-event* attributes — the panel binds to those. Only geometry
   changes here; the colour still comes from --sec-primary-* as it always did.
   The width rule in smart-event-cal-public.css:197 sets max-content + auto
   margins, which is why this one is as specific as it is. */
.single-secevent #sec-ev-page .sec-ev-bk-foot .sec-book-now-btn-wrapper a.sec-btn.sec-booking-info.sec-primary-btn,
#sec-ev-page .sec-ev-bk-foot a.sec-btn.sec-booking-info.sec-primary-btn {
  display: flex; width: 100%; max-width: none; margin: 0;
  justify-content: center; align-items: center;
  padding: 12px 18px; min-height: 46px;
  border-radius: var(--sec-ev-r-sm);
  font-size: 15px; font-weight: 700; line-height: 1.3;
  text-align: center;
}

/* the you-are-registered notice and the add-to-calendar block, both inside the rail */
#sec-ev-page .sec-ev-rail .sec-ev-registered {
  background: var(--sec-ev-brand-tint);
  border: 1px solid var(--sec-ev-brand-tint-2);
  color: var(--sec-ev-brand-ink);
  border-radius: var(--sec-ev-r-lg);
}
#sec-ev-page .sec-ev-rail .sec-ev-registered span span { display: block; font-weight: 500; }

#sec-ev-page .sec-ev-rail .sec-events.sec-common {
  background: var(--sec-ev-surface);
  border: 1px solid var(--sec-ev-line);
  border-radius: var(--sec-ev-r-lg);
  box-shadow: var(--sec-ev-shadow);
  padding: 14px 16px;
  margin: 0;
}
#sec-ev-page .sec-ev-rail .sec-add-to-calender-title h4 {
  font-size: 13px; font-weight: 700; margin: 0 0 10px; padding: 0;
  color: var(--sec-ev-ink); text-transform: uppercase; letter-spacing: .06em;
}
#sec-ev-page .sec-ev-rail ul.sec-calender-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px;
}
#sec-ev-page .sec-ev-rail ul.sec-calender-list > li { margin: 0; padding: 0; list-style: none; }
#sec-ev-page .sec-ev-rail a.sec-add-to-calender {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; min-height: 42px;
  border: 1px solid var(--sec-ev-line); border-radius: var(--sec-ev-r-sm);
  background: var(--sec-ev-surface); color: var(--sec-ev-ink-2);
  font-size: 13px; font-weight: 650; text-decoration: none;
}
#sec-ev-page .sec-ev-rail a.sec-add-to-calender:hover { background: var(--sec-ev-line-soft); }
#sec-ev-page .sec-ev-rail a.sec-add-to-calender .calender-icon { display: flex; flex: 0 0 auto; line-height: 0; }
#sec-ev-page .sec-ev-rail a.sec-add-to-calender p.calender-name { margin: 0; font-size: 13px; line-height: 1.3; }

/* --- page: stacking --- */
@media (max-width: 960px) {
  /* One column, and the booking card is promoted above the description: the
     price and the button are what a phone visitor came for. */
  #sec-ev-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sechead" "sechero" "secrail" "secbody";
    column-gap: 0;
  }
  #sec-ev-page > .sec-ev-rail { position: static; top: auto; margin-bottom: 20px; }
  #sec-ev-page > .sec-ev-hero { margin-bottom: 20px; }
}
@media (max-width: 600px) {
  #sec-ev-page .sec-ev-card-hd { padding: 13px 14px; }
  #sec-ev-page .sec-ev-card-bd { padding: 14px; }
  #sec-ev-page .sec-ev-fact { padding: 12px 14px; }
  #sec-ev-page .sec-ev-hero img { max-height: 220px; }
}

/* ================================================================= PANEL */
/* Geometry is smart-event-cal-public.css:1023-1041 and is deliberately left
   alone — 750px, fixed right, the same slide and the same easing. What follows
   is surface only. */

/* The panel HEADER is shared with the calendar surface and is dressed in
   public/css/sec-frontend-calendar.css (§13 there): ink bar, clamped title,
   34px close target, and a 3px accent rule drawn as header::after. None of
   that is repeated here — two sheets drawing the same bar is how a header ends
   up with two rules under it.

   The one thing overridden is that accent's colour. That sheet resolves it to
   --sec-ge-spotlight-color, whose stored option default is the SEC admin green:
   on any site whose owner has never opened the Appearance page the registration
   panel would wear admin chrome. --sec-ev-c is the per-event colour the editor
   actually authored, falling back to the owner's primary. */
#sec-side-popup #sec-booking-info-modal.sec-popup-sidebar-main header.sec-modal-header::after {
  background: var(--sec-ev-c);
}

/* body */
#sec-side-popup .sec-popup-sidebar-main .sec-popup-body-wrapper { background: var(--sec-ev-slate-tint); }
#sec-side-popup #sec-primary .sec-group-event-start { padding: 0; }

/* --- step tabs (menu.php, injected into .sec-gmenu-wrap) ---------------
   updateGroupWizardSteps() marks every link up to and including the current
   one with .sec-active, so "done" and "current" are the same class. The last
   .sec-active is therefore the current step, which is what the :has() rule
   below picks out. Browsers without :has() get every reached step in the
   brand colour and no underline — still a correct progress read, just a
   coarser one. */
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top {
  width: 100%; max-width: 100%; margin: 0; padding: 0;
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top .sec-wizard-tab-menu {
  display: flex; width: 100%; margin: 0; padding: 0 8px;
  background: var(--sec-ev-surface);
  border-bottom: 1px solid var(--sec-ev-line);
  box-shadow: none; border-radius: 0;
  justify-content: flex-start; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; gap: 0;
  -webkit-overflow-scrolling: touch;
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top .sec-wizard-tab-menu::before { display: none; }

body #sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top a.sec-gwizard-navigation-link {
  flex: 0 0 auto; width: auto; max-width: none;
  flex-direction: row; align-items: center; gap: 8px;
  padding: 12px 14px; margin: 0;
  font-size: 13px; font-weight: 700; line-height: 1.3;
  color: var(--sec-ev-muted-2);
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top .sec-wizard-navigation-icon {
  width: 22px; height: 22px; min-width: 22px; margin: 0; border-radius: 50%;
  background: var(--sec-ev-line); flex: 0 0 22px;
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top .sec-wizard-navigation-icon svg {
  width: 13px; height: 13px; fill: var(--sec-ev-muted);
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top .bpa-front-tm--item-label {
  font-size: 13px; font-weight: 700; text-align: left; line-height: 1.3;
}

/* reached (done or current) */
body #sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top a.sec-gwizard-navigation-link.sec-active,
body #sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top a.sec-gwizard-navigation-link:hover {
  color: var(--sec-ev-ink) !important; background: transparent !important;
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top a.sec-gwizard-navigation-link.sec-active .sec-wizard-navigation-icon {
  background: var(--sec-ev-brand-tint);
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top a.sec-gwizard-navigation-link.sec-active .sec-wizard-navigation-icon svg {
  fill: var(--sec-ev-brand-ink);
}
/* current = the last reached one */
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top a.sec-gwizard-navigation-link.sec-active:not(:has(~ a.sec-gwizard-navigation-link.sec-active)) {
  border-bottom-color: var(--sec-ev-brand);
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top a.sec-gwizard-navigation-link.sec-active:not(:has(~ a.sec-gwizard-navigation-link.sec-active)) .sec-wizard-navigation-icon {
  background: var(--sec-ev-brand);
}
#sec-side-popup #sec-primary .sec-event-booking-wrapper.sec-menu-on-top a.sec-gwizard-navigation-link.sec-active:not(:has(~ a.sec-gwizard-navigation-link.sec-active)) .sec-wizard-navigation-icon svg {
  fill: var(--sec-ev-brand-on);
}

/* --- step surface --------------------------------------------------- */
#sec-side-popup #sec-booking-info-modal .sec-gwizard-step {
  background: var(--sec-ev-surface);
  border: 1px solid var(--sec-ev-line);
  border-radius: var(--sec-ev-r-lg);
  box-shadow: var(--sec-ev-shadow);
  margin: 16px;
  overflow: visible;
}
#sec-side-popup #sec-booking-info-modal .sec-gwizard-step .sec-wizard-content { padding: 0; }
#sec-side-popup #sec-primary .sec-wrapper-wizard-content { padding: 20px 22px; }
#sec-side-popup #sec-primary .sec-sub-heading-wizard h2 {
  font-size: 17px; font-weight: 750; letter-spacing: -.02em;
  color: var(--sec-ev-ink); margin: 0 0 14px; padding: 0 0 12px;
  border-bottom: 1px solid var(--sec-ev-line-soft);
}

/* step footer: sticky at the foot of the pane (already sticky in the shared
   sheet at :465 — this is the surface, not the mechanism). */
#sec-side-popup #sec-wizard-one-to-one-submitsion .sec-wizard-buttons,
#sec-side-popup #sec-primary .sec-group-event-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--sec-ev-line);
  background: var(--sec-ev-slate-tint);
  border-bottom-left-radius: var(--sec-ev-r-lg);
  border-bottom-right-radius: var(--sec-ev-r-lg);
}

/* --- step 1: information (details.php) ------------------------------- */
#sec-side-popup #sec-events-template .sec-group-event-row { padding: 20px 22px; }
#sec-side-popup #sec-events-template h1.sec-events-single-event-title {
  font-size: 18px; font-weight: 750; letter-spacing: -.02em; line-height: 1.3;
  color: var(--sec-ev-ink);
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--sec-ev-line-soft);
}
#sec-side-popup .sec-msg-time-container {
  background: var(--sec-ev-slate-tint);
  border: 1px solid var(--sec-ev-line);
  border-radius: var(--sec-ev-r-md);
  padding: 12px 14px;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
}
#sec-side-popup .sec-msg-time-row { margin: 0; width: auto; flex: 1 1 190px; align-items: flex-start; }
#sec-side-popup .sec-msg-time-info strong {
  display: block; font-size: 11px; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sec-ev-muted-2);
}
#sec-side-popup .sec-msg-time-info p {
  font-size: 13px; font-weight: 700; color: var(--sec-ev-ink);
  margin: 3px 0 0; line-height: 1.4;
}
#sec-side-popup .sec-event-description {
  background: transparent; border: 0; padding: 16px 0 0; margin: 0;
  font-size: 14px; color: var(--sec-ev-ink-2); line-height: 1.6;
}
#sec-side-popup .sec-event-desc-heading {
  font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sec-ev-muted-2); margin-bottom: 6px;
}
#sec-side-popup .sec-event-image,
#sec-side-popup .sec-group-event-row > img {
  border-radius: var(--sec-ev-r-md); margin-bottom: 16px; max-width: 100%; height: auto;
}
/* the already-registered notice details.php prints above step 1 */
#sec-side-popup .sec-notice-alert.sec-event-already-booked {
  margin: 16px 16px 0; padding: 12px 14px;
  border-radius: var(--sec-ev-r-md);
  background: var(--sec-ev-brand-tint);
  border: 1px solid var(--sec-ev-brand-tint-2);
  color: var(--sec-ev-brand-ink);
  font-size: 13px; line-height: 1.45;
}
#sec-side-popup .sec-notice-alert.sec-event-already-booked p { margin: 0; }

/* --- the summary strip (event-info.php) ------------------------------ */
#sec-side-popup .sec-services-heading-wizard {
  background: var(--sec-ev-slate-tint);
  border: 1px solid var(--sec-ev-line);
  border-radius: var(--sec-ev-r-md);
  padding: 12px 14px; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start;
}
#sec-side-popup .sec-services-info-detail { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#sec-side-popup .sec-services-info-desc,
#sec-side-popup .sec-event-info-list-pickedtime {
  font-size: 13px; color: var(--sec-ev-ink-2); line-height: 1.45; margin: 0;
}
#sec-side-popup .sec-services-info-desc strong,
#sec-side-popup .sec-event-info-list-pickedtime strong { color: var(--sec-ev-muted); font-weight: 650; }
#sec-side-popup .sec-list-wrapper-box { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
#sec-side-popup .sec-event-info-list {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sec-ev-surface); border: 1px solid var(--sec-ev-line);
  border-radius: 6px; padding: 5px 10px;
  font-size: 12px; font-weight: 700; color: var(--sec-ev-ink-2);
}
#sec-side-popup .sec-event-info-list .sec-icon svg { width: 14px; height: 14px; fill: var(--sec-ev-muted); display: block; }

/* --- step 2: the form (sec_generate_grouevent_form) ------------------ */
/* CLAUDE.md §3 pairing: label 14/700, then the control. The generator prints
   no description line, so there is nothing between them to style yet. */
#sec-side-popup #sec_groupevent_booking .sec-two-column-field {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
}
#sec-side-popup #sec_groupevent_booking .sec-form-group { margin-bottom: 16px; }
#sec-side-popup #sec_groupevent_booking label {
  display: block; font-size: 14px; font-weight: 700; color: var(--sec-ev-ink);
  margin: 0 0 6px; padding: 0; line-height: 1.35;
}
#sec-side-popup #sec_groupevent_booking .sec-form-group.sec-required > label::after,
#sec-side-popup #sec_groupevent_booking .sec-form-group.sec-require > label::after {
  content: " *"; color: var(--sec-ev-danger); font-weight: 800;
}
#sec-side-popup #sec_groupevent_booking input[type="text"],
#sec-side-popup #sec_groupevent_booking input[type="email"],
#sec-side-popup #sec_groupevent_booking input[type="tel"],
#sec-side-popup #sec_groupevent_booking input[type="number"],
#sec-side-popup #sec_groupevent_booking input[type="secphone"],
#sec-side-popup #sec_groupevent_booking select,
#sec-side-popup #sec_groupevent_booking textarea {
  width: 100%; max-width: 100%;
  /* smart-event-cal-public.css:498-507 sets border and border-radius with
     !important, so matching it is the only way to reach them from here. */
  border: 1px solid var(--sec-ev-line) !important;
  border-radius: var(--sec-ev-r-sm) !important;
  background: var(--sec-ev-surface);
  color: var(--sec-ev-ink);
  padding: 10px 12px; min-height: 42px; margin-top: 0;
  font: inherit; font-size: 14px; line-height: 1.4 !important;
  box-shadow: none;
}
#sec-side-popup #sec_groupevent_booking textarea { min-height: 88px; resize: vertical; }
#sec-side-popup #sec_groupevent_booking input:focus,
#sec-side-popup #sec_groupevent_booking select:focus,
#sec-side-popup #sec_groupevent_booking textarea:focus {
  outline: 2px solid var(--sec-ev-brand-tint-2); outline-offset: 0;
  border-color: var(--sec-ev-brand); box-shadow: none;
}
#sec-side-popup #sec_groupevent_booking .sec-radio-wrapper,
#sec-side-popup #sec_groupevent_booking .sec-checkbox-wrapper {
  display: flex; flex-direction: column; gap: 8px;
}
/* The checkbox itself is drawn by the shared sheet as a ::before on the label
   (a 24px square already painted in --sec-primary-background-color), with the
   real input visually hidden behind it. Nothing here re-draws that; the row
   just needs to wrap so an error sentence lands under it rather than beside. */
#sec-side-popup #sec_groupevent_booking .sec-single-radio,
#sec-side-popup #sec_groupevent_booking .sec-multiple-checkbox {
  display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: flex-start;
  font-size: 13.5px; color: var(--sec-ev-ink-2); line-height: 1.45;
}
#sec-side-popup #sec_groupevent_booking .sec-single-radio > .sec-error-message,
#sec-side-popup #sec_groupevent_booking .sec-multiple-checkbox > .sec-error-message {
  flex: 1 0 100%;
}
#sec-side-popup #sec_groupevent_booking .sec-single-radio input {
  width: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0 0;
  accent-color: var(--sec-ev-brand);
}
#sec-side-popup #sec_groupevent_booking .sec-single-radio label,
#sec-side-popup #sec_groupevent_booking .sec-multiple-checkbox label {
  font-size: 13.5px; font-weight: 500; color: var(--sec-ev-ink-2); margin: 0;
}
#sec-side-popup #sec_groupevent_booking .sec-multiple-checkbox label p { margin: 0; }

/* validation — never colour alone: a red rule on the control, plus a sentence.
   .sec-error-message is what validateSecGroupForm() appends; .sec-form-error-user
   is where the server's reply lands. */
#sec-side-popup #sec_groupevent_booking .sec-error-message {
  display: flex; gap: 6px; align-items: flex-start;
  color: var(--sec-ev-danger-ink); background: var(--sec-ev-danger-bg);
  border: 1px solid var(--sec-ev-danger-line); border-radius: var(--sec-ev-r-sm);
  padding: 7px 10px; margin: 7px 0 0;
  font-size: 12.5px; font-weight: 650; line-height: 1.4;
}
#sec-side-popup #sec_groupevent_booking .sec-form-group:has(.sec-error-message) input,
#sec-side-popup #sec_groupevent_booking .sec-form-group:has(.sec-error-message) textarea,
#sec-side-popup #sec_groupevent_booking .sec-form-group:has(.sec-error-message) select {
  border-color: var(--sec-ev-danger) !important;
  background: var(--sec-ev-danger-bg);
}
#sec-side-popup #sec_groupevent_booking .sec-form-group:has(> .sec-error-message) > label { color: var(--sec-ev-danger-ink); }
#sec-side-popup .sec-form-error-user:not(:empty) {
  display: block; margin-bottom: 16px; padding: 12px 14px;
  border-radius: var(--sec-ev-r-md);
  background: var(--sec-ev-danger-bg); border: 1px solid var(--sec-ev-danger-line);
  color: var(--sec-ev-danger-ink); font-size: 13px; font-weight: 650; line-height: 1.45;
}
#sec-side-popup .sec-form-error-user:not(:empty) p { margin: 0; }

/* --- step 3: payment (payment.php) ----------------------------------- */
#sec-side-popup .sec-groupevent-timeprice:not(:empty) { margin-bottom: 16px; }
/* Smart Payments missing or inactive. A site-owner fault shown to a visitor,
   so it reads as an apology, not a validation error. */
#sec-side-popup .sec-payment-methods-not-found {
  border-radius: var(--sec-ev-r-md);
  background: var(--sec-ev-amber-bg);
  border: 1px solid var(--sec-ev-amber-line);
  color: var(--sec-ev-amber-ink);
  padding: 14px 16px;
  font-size: 13.5px; line-height: 1.5;
}
#sec-side-popup .sec-payment-methods-not-found p { margin: 0; }

/* --- step 4: summary (thank-you.php) --------------------------------- */
/* The shared sheet strips the summary pane back to a transparent block, which
   left it the only step in the flow that is not a card. */
#sec-side-popup #sec-booking-info-modal .sec-gwizard-step.sec-gwizard-screen-summary.active {
  background: var(--sec-ev-surface);
  border: 1px solid var(--sec-ev-line);
  border-radius: var(--sec-ev-r-lg);
  box-shadow: var(--sec-ev-shadow);
  padding: 0;
}
/* The tick is drawn with two absolutely positioned bars inside a ring. The
   shared sheet paints them flat #000 inside the panel; the owner's primary
   says "this worked" in the same colour as everything else that did. */
#sec-side-popup #sec-booking-info-modal #sec-primary .sec-swal-icon--success { border-color: var(--sec-ev-brand-tint-2); }
#sec-side-popup #sec-booking-info-modal #sec-primary .sec-swal-icon--success__line { background-color: var(--sec-ev-brand); }
#sec-side-popup #sec-booking-info-modal #sec-primary .sec-swal-icon--success__ring { border-color: var(--sec-ev-brand-tint); }
#sec-side-popup .sf-center-text-thank-you {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--sec-ev-line-soft);
}
#sec-side-popup .sec-thank-you-icon { flex: 0 0 auto; }
#sec-side-popup #sec-booking-info-modal .sec-gwizard-step .sf-center-text-thank-you h2 {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--sec-ev-ink); margin: 0; text-align: left;
}
#sec-side-popup #sec-booking-info-modal .sec-gwizard-step .sf-center-text-thank-you p {
  font-size: 13.5px; color: var(--sec-ev-muted); margin: 4px 0 0; text-align: left;
}
/* The receipt. thank-you.php builds .sf-event-list-wrapper with two groups of
   label/value pairs; the shared sheet lays them out as 50%-wide tiles. One
   column of label-and-value rows reads as a receipt, which is what it is. */
#sec-side-popup #sec-primary .sf-event-list-wrapper {
  max-width: none; margin: 0;
  border: 1px solid var(--sec-ev-line); border-radius: var(--sec-ev-r-md);
  overflow: hidden; box-shadow: none; background: var(--sec-ev-surface);
}
#sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-user-details,
#sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-details {
  display: block; padding: 0; background: transparent; gap: 0;
}
#sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-list {
  display: flex; flex-direction: row; gap: 12px; align-items: baseline;
  width: auto; padding: 11px 14px; margin: 0;
  background: transparent; border-radius: 0;
  border-bottom: 1px solid var(--sec-ev-line-soft);
  font-size: 13.5px; line-height: 1.45;
}
#sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-details .sf-event-list:last-child { border-bottom: 0; }
#sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-list strong {
  flex: 0 0 132px; color: var(--sec-ev-muted); font-weight: 650; font-size: 13px; margin: 0;
}
#sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-list span {
  flex: 1 1 auto; color: var(--sec-ev-ink); font-weight: 650; min-width: 0; overflow-wrap: anywhere;
}
#sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-list a { color: var(--sec-ev-link); text-decoration: none; }
#sec-side-popup .sf-event-thank-you-details .sec-events.sec-common { margin-top: 16px; }
#sec-side-popup .sf-event-thank-you-details ul.sec-calender-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
#sec-side-popup .sf-event-thank-you-details ul.sec-calender-list > li { margin: 0; flex: 1 1 160px; }
#sec-side-popup .sf-event-thank-you-details a.sec-add-to-calender {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; min-height: 42px;
  border: 1px solid var(--sec-ev-line); border-radius: var(--sec-ev-r-sm);
  background: var(--sec-ev-surface); color: var(--sec-ev-ink-2);
  font-size: 13px; font-weight: 650; text-decoration: none;
}
#sec-side-popup .sf-event-thank-you-details a.sec-add-to-calender:hover { background: var(--sec-ev-line-soft); }
#sec-side-popup .sf-event-thank-you-details p.calender-name { margin: 0; }

/* --- panel buttons --------------------------------------------------- */
#sec-side-popup #sec-primary .sec-btn,
#sec-side-popup #sec-primary button.sec-book-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--sec-ev-r-sm);
  padding: 11px 18px; min-height: 44px;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  border: 1px solid transparent;
}
#sec-side-popup #sec-primary button.sec-book-button {
  background: var(--sec-ev-brand); color: var(--sec-ev-brand-on);
}
#sec-side-popup #sec-primary .sec-btn.sec-gray-btn {
  background: var(--sec-ev-surface); border-color: var(--sec-ev-line); color: var(--sec-ev-ink-2);
}
#sec-side-popup #sec-primary .sec-btn.sec-gray-btn svg { fill: var(--sec-ev-ink-2); }
#sec-side-popup #sec-primary .sec-btn.sec-gray-btn:hover {
  background: var(--sec-ev-line-soft) !important; color: var(--sec-ev-ink) !important;
}
#sec-side-popup #sec-primary .sec-btn.sec-gray-btn:hover svg { fill: var(--sec-ev-ink) !important; }

/* --- the block / sold-out modals ------------------------------------- */
/* Still their own centred dialog — folding them into the panel is a server
   change (§9.3) and out of scope for a restyle. They are at least dressed
   like the panel now, and in the owner's colours rather than the plugin's. */
#sec-alert-msg-box-event.sec-modal .sec-modal-content {
  border-radius: var(--sec-ev-r-lg);
  /* was a 4px brand-coloured frame; the accent moves to a 3px rule along the
     top so the dialog matches the panel it replaces. */
  border: 1px solid var(--sec-ev-line);
  border-top: 3px solid var(--sec-ev-c);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  background: var(--sec-ev-surface);
  color: var(--sec-ev-ink-2);
  overflow: hidden;
  padding: 0;
  width: calc(100% - 32px);
  max-width: 520px;
  margin: 12vh auto;
}
#sec-alert-msg-box-event.sec-modal .sf-model-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--sec-ev-line-soft);
}
#sec-alert-msg-box-event.sec-modal .sec-model-heading-content { display: flex; align-items: center; gap: 11px; min-width: 0; }
#sec-alert-msg-box-event.sec-modal .sec-model-heading-icon {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sec-ev-slate-tint); border: 1px solid var(--sec-ev-line);
}
#sec-alert-msg-box-event.sec-modal .sec-model-heading-icon svg { fill: var(--sec-ev-muted); }
#sec-alert-msg-box-event.sec-modal h3.sec-section-heading {
  font-size: 16px; font-weight: 750; letter-spacing: -.02em; color: var(--sec-ev-ink); margin: 0;
}
#sec-alert-msg-box-event.sec-modal .sec-modal-text {
  padding: 16px 18px; font-size: 13.5px; line-height: 1.55; color: var(--sec-ev-ink-2);
}
/* The heading and the body are the organiser's own copy (sec_limit_reached_title /
   _message, sec_not_get_free_access_*). When they left a field blank there is
   nothing honest to put in its place, so the box collapses around what is there
   rather than reserving a slab of empty white for it. */
#sec-alert-msg-box-event.sec-modal h3.sec-section-heading:empty { display: none; }
#sec-alert-msg-box-event.sec-modal .sec-modal-text:not(:has(*)):empty { display: none; }
#sec-alert-msg-box-event.sec-modal .sec-announcement-popup-footer:empty { display: none; }
#sec-alert-msg-box-event.sec-modal .sec-modal-text p:last-child { margin-bottom: 0; }
#sec-alert-msg-box-event.sec-modal .sec-announcement-popup-footer {
  padding: 0 18px 18px; display: flex; gap: 9px; flex-wrap: wrap;
}
#sec-alert-msg-box-event.sec-modal a.sec-btn.sec-access-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 18px;
  border-radius: var(--sec-ev-r-sm);
  background: var(--sec-ev-brand); color: var(--sec-ev-brand-on);
  font-size: 14px; font-weight: 700; text-decoration: none;
}

/* --- panel: narrow viewports ---------------------------------------- */
@media (max-width: 820px) {
  #sec-side-popup .sec-popup-sidebar-container { width: 100%; right: -100%; }
  #sec-side-popup #sec-booking-info-modal .sec-gwizard-step { margin: 12px; }
  #sec-side-popup #sec-primary .sec-wrapper-wizard-content { padding: 16px 14px; }
  #sec-side-popup #sec-events-template .sec-group-event-row { padding: 16px 14px; }
  #sec-side-popup #sec_groupevent_booking .sec-two-column-field { grid-template-columns: 1fr; }
  #sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-list { flex-direction: column; gap: 2px; align-items: stretch; }
  #sec-side-popup #sec-primary .sf-event-list-wrapper .sf-event-list strong { flex: 0 0 auto; }
  #sec-side-popup #sec-wizard-one-to-one-submitsion .sec-wizard-buttons,
  #sec-side-popup #sec-primary .sec-group-event-footer { padding: 12px 14px; }
  #sec-side-popup .sec-services-heading-wizard { gap: 10px 14px; }
}

@media (max-width: 480px) {
  #sec-side-popup .sec-popup-sidebar-main .sec-modal-header-inner { padding: 12px 14px; }
  #sec-side-popup .sec-popup-sidebar-main .sec-modal-header-inner h2 { font-size: 16px; }
  #sec-side-popup #sec-wizard-one-to-one-submitsion .sec-wizard-buttons > *,
  #sec-side-popup #sec-primary .sec-group-event-footer > * { flex: 1 1 0; }
  #sec-side-popup #sec-primary .sec-btn,
  #sec-side-popup #sec-primary button.sec-book-button { width: 100%; }
  #sec-side-popup .sf-event-thank-you-details ul.sec-calender-list > li { flex: 1 1 100%; }
  #sec-side-popup #sec-primary .sec-sub-heading-wizard h2 { font-size: 16px; }
}

/* --- 44px touch targets --------------------------------------------- */
/* The wizard has to be operable one-handed. Above this, the denser desktop
   sizes stand; on a touch screen nothing a finger has to hit is under 44px. */
@media (pointer: coarse) {
  #sec-side-popup #sec-primary .sec-btn,
  #sec-side-popup #sec-primary button.sec-book-button,
  #sec-side-popup #sec-primary a.sec-gwizard-navigation-link,
  #sec-side-popup .sf-event-thank-you-details a.sec-add-to-calender,
  #sec-alert-msg-box-event.sec-modal a.sec-btn,
  #sec-ev-page .sec-ev-rail a.sec-add-to-calender,
  #sec-ev-page .sec-ev-bk-foot a.sec-btn.sec-booking-info.sec-primary-btn {
    min-height: 44px;
  }
  #sec-side-popup .sec-popup-sidebar-main .sec-close-btn { width: 44px; height: 44px; flex: 0 0 44px; }
  #sec-side-popup #sec_groupevent_booking input[type="text"],
  #sec-side-popup #sec_groupevent_booking input[type="email"],
  #sec-side-popup #sec_groupevent_booking input[type="tel"],
  #sec-side-popup #sec_groupevent_booking input[type="number"],
  #sec-side-popup #sec_groupevent_booking input[type="secphone"],
  #sec-side-popup #sec_groupevent_booking select { min-height: 44px; }
  /* The checkbox rows: the label is the target and the shared sheet already
     draws it 24px with 35px of lead, so only the row height needs raising.
     The real <input> in .sec-multiple-checkbox is a 0x0 visually-hidden proxy
     and is deliberately left alone. */
  #sec-side-popup #sec_groupevent_booking .sec-single-radio,
  #sec-side-popup #sec_groupevent_booking .sec-multiple-checkbox { min-height: 44px; align-content: center; }
  #sec-side-popup #sec_groupevent_booking .sec-single-radio input {
    width: 21px; height: 21px; flex: 0 0 21px; margin-top: 0;
  }
}

/* --- print ----------------------------------------------------------- */
@media print {
  #sec-ev-page > .sec-ev-rail { position: static; }
  #sec-ev-page { grid-template-columns: 1fr; }
}