/* =========================================================================
   SEC GROUP EVENTS - PUBLIC CALENDAR
   Port of mockups/sec-frontend-calendar.html onto the shipped markup.

   Scope root: #sec-primary .sec-fe-cal  (the block wrapper printed by
   Public::display_smart_event_calendar()). The booking panel lives in
   wp_footer outside that wrapper, so its rules are scoped to #sec-side-popup.

   WHY A SEPARATE FILE. custom-event-calendar.css and smart-event-cal-public.css
   also dress the one-to-one booking calendar, the purchase flow and the single
   event page. Rewriting them to suit this surface would move all of those. This
   sheet is enqueued after both and wins on source order, so every rule here is
   an override of a rule that is still doing its old job somewhere else.

   THE COLOUR RULE. This is the public side. It is themed per site by the
   Appearance options that Public::sec_custom_css_variables() writes onto <body>
   as --sec-* / --fc-* custom properties. Nothing in this file paints a brand
   colour of its own: every hue is var(--a-real-property). The only literals are
   greys, and they were chosen to sit under any brand hue. In particular the SEC
   admin green (#12d488) never appears here - it is admin chrome, and this page
   never wears it. The site default for the event colour arrives through
   --sec-ge-spotlight-color, which sec_custom_css_variables() now emits (F1).

   FRONTEND-CALENDAR-MAP.md SS5 lists the class names JS binds to. Not one of
   them is renamed here; this file only restyles what already exists.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   Left-hand side is the shipped property, so the Appearance page keeps
   working. The fallback is only reached on a site whose options predate the
   property, and is itself derived from another --sec-* value wherever one
   exists rather than being a colour we invented.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal,
#sec-side-popup,
.tippy-box[data-theme~="sec-light"] {
  /* tippy appends its box to <body>, outside the block wrapper, so the token
     block is declared there too. The --sec-* properties it reads are on <body>
     already, so they resolve identically in all three places.

     The event colour. Per-event chips override --sec-fe-c inline (FullCalendar
     already hands us backgroundColor/borderColor from get_sec_event()). */
  /* Was --sec-ge-spotlight-color first, but that option stores the admin green as
     its default, so every unconfigured site got green chips beside its own
     coloured buttons. Spotlight is a per-event accent (sec_is_event_spotlight_color)
     and is still applied per event; the calendar brand is the site primary. */
  --sec-fe-brand: var(--sec-primary-background-color, #2c3e50);
  --sec-fe-brand-tint: color-mix(in srgb, var(--sec-fe-brand) 14%, #fff);
  --sec-fe-brand-tint-2: color-mix(in srgb, var(--sec-fe-brand) 38%, #fff);
  --sec-fe-brand-dark: color-mix(in srgb, var(--sec-fe-brand) 84%, #000);
  --sec-fe-brand-ink: color-mix(in srgb, var(--sec-fe-brand) 45%, #04291a);

  --sec-fe-btn-bg: var(--sec-primary-background-color, #2c3e50);
  --sec-fe-btn-fg: var(--sec-primary-text-color, #fff);
  --sec-fe-btn-bg-h: color-mix(in srgb, var(--sec-fe-btn-bg) 86%, #000);

  --sec-fe-ink: var(--sec-heading-color, #0f172a);
  --sec-fe-ink-2: var(--sec-text-color, #334155);
  --sec-fe-link: var(--sec-link-color, #066edd);

  /* Neutrals. Not site-configurable and should not be - they are the greys the
     brand hue sits on, and they read correctly under every one of them. */
  --sec-fe-muted: #64748b;
  --sec-fe-muted-2: #94a3b8;
  --sec-fe-line-soft: #f1f5f9;
  --sec-fe-slate-tint: #f8fafc;

  --sec-fe-line: var(--fc-border-color, #e2e8f0);
  --sec-fe-bg: var(--fc-page-bg-color, #f6f7f9);
  --sec-fe-surface: var(--sec-oneoneone-main-box-background-color, #fff);
  --sec-fe-today-bg: var(--fc-today-bg-color, transparent);

  --sec-fe-notice-bg: var(--sec-custom-message-background, #fffbeb);
  --sec-fe-notice-line: var(--sec-custom-message-border, #fde68a);
  --sec-fe-notice-ink: var(--sec-custom-message-text, #8a5a06);

  --sec-fe-danger: var(--sec-cancel-btn-bg-color, #ef4444);
  --sec-fe-danger-bg: var(--sf-error-message-background-color, #fef2f2);
  --sec-fe-danger-ink: var(--sf-error-message-text-color, #b42318);
  --sec-fe-danger-line: color-mix(in srgb, var(--sec-fe-danger) 28%, #fff);

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

/* -------------------------------------------------------------------------
   2. SCOPE ROOT + ZERO-SPECIFICITY ELEMENT RESETS
   The resets are written :where(...) so they carry no specificity at all and
   every component rule below beats them without repeating the id. An
   `#sec-primary p { margin:0 }` reset would silently win over every .class p
   rule written afterwards - see FRONTEND-CALENDAR-MAP SS8.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal {
  /* The owner's own width option. FRONTEND-CALENDAR-MAP SS8 caps the mockup at
     1120px; on a real site sec_group_event_width is what the owner set, so
     that wins. The block still centres and never goes full-bleed. */
  max-width: var(--sec-group-event-width, 1150px);
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  line-height: 1.3;
  color: var(--sec-fe-ink);
}

:where(#sec-primary .sec-fe-cal) *,
:where(#sec-primary .sec-fe-cal) *::before,
:where(#sec-primary .sec-fe-cal) *::after { box-sizing: border-box; }
:where(#sec-primary .sec-fe-cal) :where(h1, h2, h3, h4) { margin: 0; padding: 0; font-weight: 750; letter-spacing: -.015em; }
:where(#sec-primary .sec-fe-cal) :where(button) { font: inherit; margin: 0; cursor: pointer; }

/* The paragraph reset is NOT written :where(). A zero-specificity selector loses
   to the theme's own `p { margin-bottom: 1.75em }` (Astra ships exactly that),
   and the block would inherit the theme's paragraph rhythm inside every card.
   One id + one class still sits below every component rule below, which are all
   one id + two classes, so nothing here is harder to override than it should be.
   This also absorbs the empty paragraph the block message leaves behind: the
   message is a <div> inside <p class="sec-event-description">, so the browser
   closes the paragraph early and the orphan </p> would otherwise add the
   theme's bottom margin to the foot of every restricted card. */
#sec-primary .sec-fe-cal p { margin: 0; padding: 0; }
#sec-primary .sec-fe-cal svg { display: block; }

/* -------------------------------------------------------------------------
   3. TOOLBAR  (.sec-date-navigation)
   Every control keeps its class - .sec-nav-prev/.sec-nav-next,
   .sec-date-range-toggle-field, .sec-search-input, .sec-find-events-btn,
   .sec-dymic-selection-val, .sec-view-change-btn[data-view] are all bound in
   smart-event-cal-public.js.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal .sec-date-navigation {
  background: var(--sec-fe-surface);
  border: 1px solid var(--sec-fe-line);
  border-radius: var(--sec-fe-r-lg);
  box-shadow: var(--sec-fe-shadow);
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 14px;
}
#sec-primary .sec-fe-cal .sec-event-filter-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#sec-primary .sec-fe-cal .sec-nav-arrows { display: flex; gap: 4px; }
#sec-primary .sec-fe-cal .sec-nav-prev,
#sec-primary .sec-fe-cal .sec-nav-next {
  width: 34px;
  height: 34px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--sec-fe-line);
  background: var(--sec-fe-surface);
  border-radius: var(--sec-fe-r-sm);
  display: grid;
  place-items: center;
  color: var(--sec-fe-ink-2);
}
#sec-primary .sec-fe-cal .sec-nav-prev:hover,
#sec-primary .sec-fe-cal .sec-nav-next:hover { background: var(--sec-fe-line-soft); }
#sec-primary .sec-fe-cal .sec-nav-prev svg,
#sec-primary .sec-fe-cal .sec-nav-next svg { width: 20px; height: 20px; fill: currentColor; }

#sec-primary .sec-fe-cal .sec-date-range-toggle {
  border: 1px solid var(--sec-fe-line);
  background: var(--sec-fe-surface);
  border-radius: var(--sec-fe-r-sm);
  padding: 0 12px;
  height: 34px;
  line-height: 1.3;
  color: var(--sec-fe-ink-2);
  gap: 8px;
}
#sec-primary .sec-fe-cal .sec-date-range-toggle:hover { background: var(--sec-fe-line-soft); }
#sec-primary .sec-fe-cal .sec-date-range-toggle span.sec-time-selection {
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--sec-fe-ink-2);
}
#sec-primary .sec-fe-cal .sec-date-range-toggle .sec-arrow { display: flex; margin-left: 0; }
#sec-primary .sec-fe-cal .sec-date-range-toggle .sec-arrow svg { width: 16px; height: 16px; fill: var(--sec-fe-muted); }

#sec-primary .sec-fe-cal .sec-event-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#sec-primary .sec-fe-cal .sec-search-input {
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  width: 210px;
  flex: 0 1 210px;
  border: 1px solid var(--sec-fe-line);
  border-right: 0;
  border-radius: var(--sec-fe-r-sm) 0 0 var(--sec-fe-r-sm);
  background: var(--sec-fe-surface);
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sec-fe-ink);
}
#sec-primary .sec-fe-cal .sec-search-input::placeholder { color: var(--sec-fe-muted-2); }
#sec-primary .sec-fe-cal .sec-search-input:focus {
  outline: 2px solid var(--sec-fe-brand-tint-2);
  outline-offset: 0;
  border-color: var(--sec-fe-brand);
}
#sec-primary .sec-fe-cal .sec-find-events-btn {
  min-width: 0;
  height: 34px;
  max-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--sec-fe-btn-bg);
  border-radius: 0 var(--sec-fe-r-sm) var(--sec-fe-r-sm) 0;
  background: var(--sec-fe-btn-bg);
  color: var(--sec-fe-btn-fg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
#sec-primary .sec-fe-cal .sec-find-events-btn:hover { background: var(--sec-fe-btn-bg-h); border-color: var(--sec-fe-btn-bg-h); }

/* The view picker. .sec-dymic-selection-val carries the current label; the
   links inside carry data-view and are what the JS listens on. */
#sec-primary .sec-fe-cal .sec-dropdown-toggle {
  height: 34px;
  margin-left: 0;
  padding: 0 12px;
  border: 1px solid var(--sec-fe-line);
  background: var(--sec-fe-surface);
  border-radius: var(--sec-fe-r-sm);
  font-size: 13px;
  font-weight: 650;
  color: var(--sec-fe-ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
#sec-primary .sec-fe-cal .sec-dropdown-toggle:hover { background: var(--sec-fe-line-soft); }
#sec-primary .sec-fe-cal .sec-dropdown-toggle .sec-arrow { display: flex; }
#sec-primary .sec-fe-cal .sec-dropdown-toggle .sec-arrow svg { width: 16px; height: 16px; fill: var(--sec-fe-muted); }
#sec-primary .sec-fe-cal .sec-dropdown-content {
  background: var(--sec-fe-surface);
  border: 1px solid var(--sec-fe-line);
  border-radius: var(--sec-fe-r-md);
  box-shadow: var(--sec-fe-shadow-pop);
  padding: 5px;
  min-width: 150px;
  margin-top: 5px;
  overflow: hidden;
}
#sec-primary .sec-fe-cal .sec-dropdown-content a {
  padding: 8px 10px !important;
  border-radius: 6px;
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.3 !important;
  color: var(--sec-fe-ink-2) !important;
}
#sec-primary .sec-fe-cal .sec-dropdown-content a:hover { background: var(--sec-fe-line-soft); color: var(--sec-fe-ink) !important; }
#sec-primary .sec-fe-cal .sec-dropdown-content a.sec-active {
  background: var(--sec-fe-btn-bg);
  color: var(--sec-fe-btn-fg) !important;
}
/* smart-event-cal-public.css:1712 hides the List option below 767px. That is
   exactly the width at which the month grid stops being readable and becomes an
   index of coloured dots, so hiding List leaves a phone reader with no way to
   read an event's name at all. It comes back at every width. */
#sec-primary .sec-fe-cal .sec-dropdown-content a[data-view="list"] { display: block; }

/* -------------------------------------------------------------------------
   4. THE THREE FEED PANES
   .sec-data-append-wrapper takes the list/grid HTML, #sec-calendar-wrapper the
   month grid. Both are the AJAX swap targets and keep their names.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal .sec-data-append-wrapper {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* -------------------------------------------------------------------------
   5. MONTH GRID (FullCalendar 6)
   The whole grid becomes one card. FullCalendar paints its own borders through
   --fc-border-color, which the Appearance page already sets, so the frame
   follows the site palette with no help from us.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc {
  background: var(--sec-fe-surface);
  border: 1px solid var(--sec-fe-line);
  border-radius: var(--sec-fe-r-lg);
  box-shadow: var(--sec-fe-shadow);
  overflow: hidden;
}
/* smart-event-cal-public.css:1146 turns this toolbar into a column under 768px,
   and FullCalendar's own align-items:center then centres the title. The row
   direction is restored here so the month reads as the card's heading at every
   width, the way it does above 768px. */
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-toolbar.fc-header-toolbar {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--sec-fe-line);
  background: var(--sec-fe-surface);
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk { margin: 0; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:empty { display: none; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-toolbar-title {
  font-size: 16.5px;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--sec-fe-ink);
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper table.fc-scrollgrid {
  background: transparent;
  border: 0;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-theme-standard td,
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-theme-standard th { border-color: var(--sec-fe-line-soft); }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-theme-standard .fc-scrollgrid { border-left: 0; border-top: 0; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-scrollgrid-section > td { border-right: 0; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-col-header { border-bottom: 1px solid var(--sec-fe-line); }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-col-header-cell {
  background: var(--sec-fe-surface);
  border-color: transparent;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-col-header-cell-cushion {
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--sec-fe-muted-2);
  text-decoration: none;
}

/* Day cells. minmax(0,1fr) is FullCalendar's own table layout, so the long
   title problem is solved on the chip instead - see .sec-event-title-content. */
#sec-primary .sec-fe-cal #sec-calendar .fc-daygrid-day,
#sec-primary .sec-fe-cal #sec-calendar .fc-daygrid-day:not(.fc-day-other) { height: auto; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-day-frame {
  min-height: 122px;
  padding: 7px 7px 9px;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-day-top { flex-direction: row; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-day-number {
  padding: 0;
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sec-fe-ink-2);
  text-decoration: none;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-day-other .fc-daygrid-day-number { color: #cbd5e1; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-day-other { background: #fcfdfe; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-day.fc-day-today {
  background: var(--sec-fe-today-bg);
  border-bottom-color: var(--sec-fe-line-soft);
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-day-today .fc-daygrid-day-number {
  background: var(--sec-fe-btn-bg);
  color: var(--sec-fe-btn-fg);
  border-radius: 6px;
  width: 24px;
  height: 22px;
  margin: 0;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-day-events {
  margin: 4px 0 0;
  min-height: 0;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events { min-height: 0; margin: 4px 0 0; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-event-harness:not(:last-child) { margin-bottom: 5px; }

/* A finished occurrence dims rather than disappearing, and stops being an
   opener. FRONTEND-CALENDAR-MAP SS7.4 - the next one is on the next cell. */
#sec-primary .sec-fe-cal #sec-calendar .fc-daygrid-day.fc-day-past { background: var(--sec-fe-slate-tint); opacity: 1; }
#sec-primary .sec-fe-cal #sec-calendar .fc-daygrid-day.fc-day-past .fc-event { opacity: .55; }

/* -------------------------------------------------------------------------
   6. THE CHIP
   eventContent builds .sec-event-box-calendar > [.sec-event-img-in-cal] +
   .sec-event-date-in-cal + .sec-event-title-content. eventDidMount then writes
   the per-event spotlight colour onto the anchor as inline backgroundColor +
   borderColor, so the chip is already carrying its own colour - all this does
   is give that colour a shape.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end,
#sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end.fc-daygrid-block-event,
#sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end.fc-daygrid-event.fc-daygrid-block-event {
  /* border-color and background-color arrive inline from eventDidMount. */
  border-style: solid;
  border-width: 1px 1px 1px 3px;
  border-top-width: 1px;
  border-radius: 7px;
  padding: 5px 6px 5px 7px;
  box-shadow: none;
  color: var(--sec-fe-ink);
  cursor: pointer;
  white-space: normal;
}
/* smart-event-cal-public.css:976 lifts and shadows the chip on hover. A chip
   sits inside a day cell with 5px between it and the next one; a 2px lift plus
   a 10px shadow makes the row jitter. Darkening it slightly says the same
   thing and moves nothing. */
#sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event:hover {
  filter: brightness(.97);
  transform: none;
  box-shadow: none;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event:focus-visible {
  outline: 2px solid var(--sec-fe-brand-tint-2);
  outline-offset: 1px;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-block-event .fc-event-main { color: inherit; }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-block-event .sec-event-box-calendar,
#sec-primary .sec-fe-cal #sec-calendar-wrapper .sec-event-box-calendar {
  padding: 0;
  color: inherit;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
}
/* The featured-image square. It was display:none on block events; at 14px it
   fits on the time row and tells two same-time chips apart at a glance. */
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-block-event .sec-event-img-in-cal,
#sec-primary .sec-fe-cal #sec-calendar-wrapper .sec-event-img-in-cal {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .sec-event-img-in-cal img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  display: block;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event .sec-event-date-in-cal,
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-block-event .sec-event-box-calendar .sec-event-date-in-cal {
  flex: 0 1 auto;
  margin: 0 !important;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--sec-fe-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event .sec-event-title-content,
#sec-primary .sec-fe-cal #sec-calendar .fc-event .sec-event-title-content {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "+n more" and its popover. */
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-more-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--sec-fe-muted);
  padding: 2px 4px;
  border-radius: 5px;
  background: transparent;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-more-link:hover { background: var(--sec-fe-line-soft); color: var(--sec-fe-ink); }
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover.fc-more-popover {
  padding: 0;
  margin: 0;
  border: 1px solid var(--sec-fe-line);
  border-radius: var(--sec-fe-r-lg);
  box-shadow: var(--sec-fe-shadow-pop);
  overflow: hidden;
  background: var(--sec-fe-surface);
  max-width: 330px;
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover .fc-popover-header {
  padding: 10px 12px;
  background: var(--sec-fe-slate-tint);
  border-bottom: 1px solid var(--sec-fe-line-soft);
  font-size: 13.5px;
  font-weight: 750;
  color: var(--sec-fe-ink);
}
#sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover .fc-popover-body { padding: 8px; max-height: 290px; overflow-y: auto; }

/* -------------------------------------------------------------------------
   7. HOVER CARD (tippy)
   Content is the `description` string get_sec_event() builds server-side.
   tippy appends to <body>, so the scope is its own theme attribute rather than
   #sec-calendar - which is why the shipped #sec-calendar .tippy-box rules only
   ever half-applied.
   ------------------------------------------------------------------------- */
.tippy-box[data-theme~="sec-light"],
#sec-primary .sec-fe-cal #sec-calendar .tippy-box {
  max-width: 340px !important;
  width: 340px !important;
  padding: 0;
  border-radius: var(--sec-fe-r-lg);
  background: var(--sec-fe-surface, #fff);
  border: 1px solid var(--sec-fe-line, #e2e8f0);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
  color: var(--sec-fe-ink, #0f172a);
  overflow: hidden;
}
.tippy-box[data-theme~="sec-light"] > .tippy-content,
#sec-primary .sec-fe-cal #sec-calendar .tippy-box .tippy-content { padding: 0; }
.tippy-box[data-theme~="sec-light"] .sec-event-tooltip-image-wrapper,
.tippy-box[data-theme~="sec-light"] .sec-event-error-msg-start .sec-event-tooltip-image-wrapper {
  margin: 0;
  line-height: 0;
}
.tippy-box[data-theme~="sec-light"] .sec-event-tooltip-image-wrapper img,
#sec-primary .sec-fe-cal #sec-calendar .tippy-box .sec-event-tooltip-image-wrapper img {
  border-radius: 0;
  width: 100%;
  /* Shape and fit come from Settings > Appearance (Featured image ratio / fit), the
     same as every other event image view; a fixed height cropped this one differently. */
  height: auto;
  aspect-ratio: var(--sec-event-image-ratio, 16 / 9);
  object-fit: var(--sec-event-image-fit, cover);
  display: block;
}
/* One padded body under the image, whichever branch built the markup. */
.tippy-box[data-theme~="sec-light"] h3.sec-event-tooltip-title { font-size: 15.5px; font-weight: 750; letter-spacing: -.015em; margin: 0; padding: 13px 13px 0; line-height: 1.3; overflow-wrap: anywhere; }
.tippy-box[data-theme~="sec-light"] h3.sec-event-tooltip-title a { color: var(--sec-fe-ink, #0f172a); text-decoration: none; }
.tippy-box[data-theme~="sec-light"] .sec-event-tooltip-datetime { padding: 5px 13px 0; margin: 0; font-size: 12.5px; font-weight: 650; color: var(--sec-fe-ink-2, #334155); font-variant-numeric: tabular-nums; line-height: 1.3; }
.tippy-box[data-theme~="sec-light"] .sec-event-tooltip-description,
#sec-primary .sec-fe-cal #sec-calendar .tippy-box .sec-event-tooltip-description {
  background: transparent;
  padding: 9px 13px 0;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--sec-fe-muted, #64748b);
}
.tippy-box[data-theme~="sec-light"] .sec-event-tooltip-description .sec-event-desc-heading { display: none; }
.tippy-box[data-theme~="sec-light"] .sec-event-tooltip-description a { color: var(--sec-fe-muted, #64748b); text-decoration: none; }
.tippy-box[data-theme~="sec-light"] .sec-book-now-btn-wrapper { padding: 12px 13px 13px; }
.tippy-box[data-theme~="sec-light"] .sec-event-error-content { padding-bottom: 13px; }

/* -------------------------------------------------------------------------
   8. BUTTONS
   .sec-booking-info is the class the modal binds to. It stays exactly where it
   is; only the paint changes.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal .sec-btn.sec-primary-btn,
.tippy-box[data-theme~="sec-light"] .sec-btn.sec-primary-btn {
  background: var(--sec-fe-btn-bg, #2c3e50);
  color: var(--sec-fe-btn-fg, #fff);
  border: 1px solid var(--sec-fe-btn-bg, #2c3e50);
  border-radius: var(--sec-fe-r-sm, 8px);
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  transition: background-color .15s ease;
}
#sec-primary .sec-fe-cal .sec-btn.sec-primary-btn:hover,
.tippy-box[data-theme~="sec-light"] .sec-btn.sec-primary-btn:hover {
  background: var(--sec-fe-btn-bg-h, #1a252f);
  border-color: var(--sec-fe-btn-bg-h, #1a252f);
  color: var(--sec-fe-btn-fg, #fff);
}

/* -------------------------------------------------------------------------
   9. LIST VIEW
   sec_load_lists_data($type='list') builds
   .sec-event-card > .sec-event-date + .sec-event-details + .sec-event-image-for-list
   and puts .sec-booking-info on the whole card, so the card itself is the
   opener. Keep that: the hover state below is what tells a reader so.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal .sec-grid-list-row { max-width: none; }
#sec-primary .sec-fe-cal .sec-main-container .sec-month-heading,
#sec-primary .sec-fe-cal .sec-month-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0 12px;
  padding: 0;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .01em;
  color: var(--sec-fe-muted);
}
#sec-primary .sec-fe-cal .sec-grid-list-row > .sec-month-heading:first-child { margin-top: 0; }
#sec-primary .sec-fe-cal h2.sec-month-heading:after {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  margin-left: 0;
  border: 0;
  background: var(--sec-fe-line);
}
#sec-primary .sec-fe-cal .sec-list-loop { margin-bottom: 26px; }

#sec-primary .sec-fe-cal .sec-event-card {
  display: flex;
  gap: 0;
  background: var(--sec-fe-surface);
  border: 1px solid var(--sec-fe-line);
  border-radius: var(--sec-fe-r-lg);
  box-shadow: var(--sec-fe-shadow);
  overflow: hidden;
  margin-bottom: 12px;
}
#sec-primary .sec-fe-cal .sec-event-card.sec-booking-info { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
#sec-primary .sec-fe-cal .sec-event-card.sec-booking-info:hover {
  border-color: var(--sec-fe-brand-tint-2);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
}
/* A card that cannot be booked loses the affordance as well as the border. */
#sec-primary .sec-fe-cal .sec-event-card:not(.sec-booking-info) { background: var(--sec-fe-slate-tint); cursor: default; }
/* A finished occurrence, once the reader pages backwards. Dimmed, not hidden -
   it is still the answer to "when was that session?". FRONTEND-CALENDAR-MAP
   SS7.4. It stays clickable because nothing server-side refuses a past date yet
   (F10); making it inert here would only move the surprise. */
#sec-primary .sec-fe-cal .sec-event-card--past { opacity: .62; }
#sec-primary .sec-fe-cal .sec-event-card--past:hover { opacity: .8; }

#sec-primary .sec-fe-cal .sec-event-card > .sec-event-date {
  display: flex;
  flex: 0 0 78px;
  width: 78px;
  padding: 14px 6px;
  background: var(--sec-fe-slate-tint);
  border-right: 1px solid var(--sec-fe-line-soft);
  color: var(--sec-fe-ink);
  font-weight: 400;
}
#sec-primary .sec-fe-cal .sec-date-box { color: var(--sec-fe-muted); gap: 1px; }
#sec-primary .sec-fe-cal .sec-day-of-week { font-size: 10.5px; font-weight: 750; letter-spacing: .1em; color: var(--sec-fe-muted); line-height: 1.3; }
#sec-primary .sec-fe-cal .sec-day {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--sec-fe-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
#sec-primary .sec-fe-cal .sec-event-details {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#sec-primary .sec-fe-cal .sec-event-card-heading { display: block; margin-bottom: 0; }
#sec-primary .sec-fe-cal .event-card-info-left { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#sec-primary .sec-fe-cal .sec-event-date-range {
  margin-bottom: 0;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--sec-fe-ink-2);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
#sec-primary .sec-fe-cal span.sec-recurring-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sec-fe-muted);
  font-size: 12px;
  font-weight: 650;
}
#sec-primary .sec-fe-cal span.sec-recurring-icon:empty { display: none; }
/* Themes that do not ship .screen-reader-text would otherwise print the word
   next to the icon. Declared locally so the block never depends on the theme. */
#sec-primary .sec-fe-cal .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
#sec-primary .sec-fe-cal span.sec-recurring-icon svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#sec-primary .sec-fe-cal .sec-main-container .sec-event-title,
#sec-primary .sec-fe-cal .sec-event-title {
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--sec-fe-ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#sec-primary .sec-fe-cal .sec-main-container p.sec-event-description,
#sec-primary .sec-fe-cal p.sec-event-description {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--sec-fe-muted);
  overflow-wrap: anywhere;
}
/* Two lines of prose, and no more. The block notice is never clipped by this:
   it is a <div> and the browser hoists it out of the <p> before this rule sees
   it, so the clamp only ever applies to the truncated description text. */
#sec-primary .sec-fe-cal p.sec-event-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#sec-primary .sec-fe-cal .sec-event-image-for-list {
  flex: 0 0 168px;
  width: 168px;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}
#sec-primary .sec-fe-cal .sec-event-image-for-list img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--sec-event-image-fit, cover); /* Appearance > Featured image fit */
  display: block;
}

/* -------------------------------------------------------------------------
   10. THE BLOCK NOTICE ON A CARD
   check_event_cal_permissions() returns sec_error_box() HTML - a big centred
   red panel built for a full-page error. Inside a card it is a notice, not a
   failure: the event is fine, the reader is simply not on the list. Neutral
   slate, left aligned, and the same shape in list, grid and tooltip.
   sec_error_box() itself is untouched; every other surface keeps its panel.
   ------------------------------------------------------------------------- */
/* smart-event-cal-public.css:1775 wraps this in a second box with a pink
   border, so the reader used to get a red panel inside a pink frame. One box. */
#sec-primary .sec-fe-cal .sec-event-error-description,
.tippy-box[data-theme~="sec-light"] .sec-event-error-description {
  margin-top: 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
#sec-primary .sec-fe-cal .sec-event-msg-content,
.tippy-box[data-theme~="sec-light"] .sec-event-msg-content { color: inherit; font-size: inherit; line-height: 1.35; }
#sec-primary .sec-fe-cal .sec-event-error-description .sec-error-wrapper,
.tippy-box[data-theme~="sec-light"] .sec-event-error-description .sec-error-wrapper {
  display: block;
  height: auto;
  overflow: visible;
}
#sec-primary .sec-fe-cal .sec-event-error-description .error-container,
.tippy-box[data-theme~="sec-light"] .sec-event-error-description .error-container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 10px 12px;
  text-align: left;
  background: var(--sec-fe-slate-tint, #f8fafc);
  border: 1px solid var(--sec-fe-line, #e2e8f0);
  border-radius: var(--sec-fe-r-md, 10px);
  box-shadow: none;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
#sec-primary .sec-fe-cal .sec-event-error-description .icon-box,
.tippy-box[data-theme~="sec-light"] .sec-event-error-description .icon-box { flex: 0 0 16px; line-height: 0; }
#sec-primary .sec-fe-cal .sec-event-error-description .icon-box svg,
.tippy-box[data-theme~="sec-light"] .sec-event-error-description .icon-box svg {
  width: 16px;
  height: 16px;
  margin: 0;
  fill: var(--sec-fe-muted, #64748b);
}
#sec-primary .sec-fe-cal .sec-event-error-description .message-box,
.tippy-box[data-theme~="sec-light"] .sec-event-error-description .message-box {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sec-fe-ink-2, #334155);
  text-align: left;
}
#sec-primary .sec-fe-cal .sec-event-error-description .message-box p,
.tippy-box[data-theme~="sec-light"] .sec-event-error-description .message-box p { margin: 0 0 6px; font-size: 12.5px; }
#sec-primary .sec-fe-cal .sec-event-error-description .message-box p:last-child,
.tippy-box[data-theme~="sec-light"] .sec-event-error-description .message-box p:last-child { margin-bottom: 0; }
#sec-primary .sec-fe-cal .sec-event-error-description .message-box a {
  color: var(--sec-fe-link);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   11. GRID VIEW
   sec_load_lists_data($type='grid') wraps each card in .sec-event-card-row and
   moves .sec-event-date inside the image as an overlay. The row used to be a
   hard 33.33% float-ish column; auto-fill lets the same markup reflow at every
   width without a media query per breakpoint.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-list-loop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin-left: 0;
  margin-right: 0;
  flex-direction: unset;
  flex-wrap: unset;
}
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-card-row { width: auto; padding: 0; }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-card { margin-bottom: 0; height: 100%; }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-image-for-list {
  flex: 0 0 auto;
  width: 100%;
  padding: 0;
  position: relative;
}
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-image-for-list > img {
  border-radius: 0;
  width: 100%;
  /* Appearance > Featured image ratio decides the height, as in every other view. */
  height: auto;
  aspect-ratio: var(--sec-event-image-ratio, 16 / 9);
  object-fit: var(--sec-event-image-fit, cover);
}
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-image-for-list .sec-event-date {
  /* display is restated because smart-event-cal-public.css:1709 hides every
     .sec-event-date below 767px, which took the grid card's date badge with it. */
  display: flex;
  position: absolute;
  left: 11px;
  top: 11px;
  width: auto;
  flex: none;
  padding: 6px 9px;
  background: var(--sec-fe-surface);
  border: 0;
  border-radius: var(--sec-fe-r-sm);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
  text-align: center;
  line-height: 1.3;
}
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-image-for-list .sec-event-date .sec-date-box { color: var(--sec-fe-muted); }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-image-for-list .sec-event-date span.sec-day-of-week { font-size: 9.5px; font-weight: 750; letter-spacing: .1em; color: var(--sec-fe-muted); }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-image-for-list .sec-event-date span.sec-day { font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: var(--sec-fe-ink); }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-details { padding: 0; gap: 0; }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-card-body-content { padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-date-range { font-size: 12.5px; }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-event-title { font-size: 16px; }
#sec-primary .sec-fe-cal .sec-grid-box-footer {
  margin-top: 0;
  padding: 11px 14px;
  border-top: 1px solid var(--sec-fe-line-soft);
  text-align: left;
}
#sec-primary .sec-fe-cal .sec-grid-box-footer:empty { display: none; }
#sec-primary .sec-fe-cal .sec-grid-box-footer .sec-book-now-btn-wrapper { text-align: left; }
#sec-primary .sec-fe-cal .sec-grid-box-footer .sec-btn { display: inline-flex; width: 100%; }
#sec-primary .sec-fe-cal .sec-event-grid-view-active .sec-grid-box-footer .sec-event-error-description { margin-top: 0; }

/* -------------------------------------------------------------------------
   12. EMPTY / LOADING / ERROR
   sec_load_lists_data() now returns .sec-fe-empty when the feed is empty, and
   secFeCalState() in smart-event-cal-public.js paints the same block over the
   month grid plus the loading and failure states. All three are new: the page
   used to show a bare gap for an empty feed and the previous markup, silently,
   for a failed one.
   ------------------------------------------------------------------------- */
#sec-primary .sec-fe-cal .sec-fe-empty {
  background: var(--sec-fe-surface);
  border: 1px solid var(--sec-fe-line);
  border-radius: var(--sec-fe-r-lg);
  box-shadow: var(--sec-fe-shadow);
  padding: 52px 24px;
  text-align: center;
}
#sec-primary .sec-fe-cal .sec-fe-empty__ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--sec-fe-brand-tint);
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
}
#sec-primary .sec-fe-cal .sec-fe-empty__ring svg { width: 26px; height: 26px; stroke: var(--sec-fe-brand-dark); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#sec-primary .sec-fe-cal .sec-fe-empty h3 { font-size: 17px; margin-bottom: 5px; color: var(--sec-fe-ink); }
#sec-primary .sec-fe-cal .sec-fe-empty p { color: var(--sec-fe-muted); font-size: 13.5px; line-height: 1.35; max-width: 390px; margin: 0 auto; }

/* The feed is in flight. A skeleton, not a spinner: the frame is known before
   the request goes out, so nothing moves when the response lands. */
#sec-primary .sec-fe-cal .sec-fe-busy {
  height: 2px;
  background: var(--sec-fe-line-soft);
  border-radius: 2px;
  overflow: hidden;
  margin: -6px 0 12px;
}
#sec-primary .sec-fe-cal .sec-fe-busy i {
  display: block;
  height: 100%;
  width: 34%;
  border-radius: 2px;
  background: var(--sec-fe-btn-bg);
  animation: sec-fe-sweep 1.15s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes sec-fe-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } }
#sec-primary .sec-fe-cal .sec-fe-skeleton { display: flex; flex-direction: column; gap: 12px; }
#sec-primary .sec-fe-cal .sec-fe-skeleton .sec-fe-sk-row {
  display: flex;
  min-height: 104px;
  background: var(--sec-fe-surface);
  border: 1px solid var(--sec-fe-line);
  border-radius: var(--sec-fe-r-lg);
  box-shadow: var(--sec-fe-shadow);
  overflow: hidden;
}
#sec-primary .sec-fe-cal .sec-fe-skeleton .sec-fe-sk-row .l { flex: 0 0 78px; background: var(--sec-fe-line-soft); }
#sec-primary .sec-fe-cal .sec-fe-skeleton .sec-fe-sk-row .m { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
#sec-primary .sec-fe-cal .sec-fe-skeleton .sec-fe-sk-row .r { flex: 0 0 168px; background: var(--sec-fe-line-soft); }
#sec-primary .sec-fe-cal .sec-fe-sk {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--sec-fe-line-soft) 0%, #e9eef4 40%, var(--sec-fe-line-soft) 80%);
  background-size: 280% 100%;
  animation: sec-fe-shim 1.25s linear infinite;
}
@keyframes sec-fe-shim { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  #sec-primary .sec-fe-cal .sec-fe-sk,
  #sec-primary .sec-fe-cal .sec-fe-busy i { animation: none; }
}

#sec-primary .sec-fe-cal .sec-fe-error {
  background: var(--sec-fe-surface);
  border: 1px solid var(--sec-fe-danger-line);
  border-left: 3px solid var(--sec-fe-danger);
  border-radius: var(--sec-fe-r-lg);
  box-shadow: var(--sec-fe-shadow);
  padding: 22px 24px;
  display: flex;
  gap: 14px;
}
#sec-primary .sec-fe-cal .sec-fe-error > svg { width: 22px; height: 22px; flex: 0 0 22px; stroke: var(--sec-fe-danger); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
#sec-primary .sec-fe-cal .sec-fe-error h3 { font-size: 16.5px; margin-bottom: 5px; color: var(--sec-fe-ink); }
#sec-primary .sec-fe-cal .sec-fe-error p { font-size: 13.5px; line-height: 1.35; color: var(--sec-fe-muted); max-width: 56ch; }
#sec-primary .sec-fe-cal .sec-fe-error .sec-fe-error__act { margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
#sec-primary .sec-fe-cal .sec-fe-error .sec-fe-error__tech { margin-top: 11px; font-size: 11.5px; color: var(--sec-fe-muted-2); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   13. THE BOOKING SIDE PANEL - shell only
   The panel is the one SEC already ships (FRONTEND-CALENDAR-MAP SS9: extend and
   restyle, never replace). Geometry is copied verbatim from
   smart-event-cal-public.css:1023-1041 - same 750px, same slide, same easing -
   so nothing about the open/close handlers changes. What changes is the
   surface: the header takes the site's heading colour instead of flat #000,
   carries a 3px rule in the event colour so the panel says which event it
   belongs to, and the close control becomes a real 34px target.
   The wizard steps inside are not styled here.
   ------------------------------------------------------------------------- */
#sec-side-popup .sec-popup-sidebar-main.sec-expanded:before { background: rgba(15, 23, 42, .5); }
#sec-side-popup .sec-popup-sidebar-container { background: var(--sec-fe-surface); }
#sec-side-popup .sec-popup-sidebar-main header.sec-modal-header {
  background: var(--sec-fe-ink);
  position: relative;
  padding: 0;
}
#sec-side-popup .sec-popup-sidebar-main header.sec-modal-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sec-fe-c, var(--sec-fe-brand));
}
#sec-side-popup .sec-popup-sidebar-main .sec-modal-header-inner {
  padding: 15px 18px;
  gap: 14px;
  align-items: center;
}
#sec-side-popup .sec-popup-sidebar-main .sec-modal-header-inner h2 {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.015em;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#sec-side-popup .sec-popup-sidebar-main .sec-close-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  color: #cbd5e1;
}
#sec-side-popup .sec-popup-sidebar-main .sec-close-btn:hover { background: rgba(255, 255, 255, .10); color: #fff; }
#sec-side-popup .sec-popup-sidebar-main .sec-close-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* -------------------------------------------------------------------------
   14. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #sec-primary .sec-fe-cal .sec-event-image-for-list { flex: 0 0 130px; width: 130px; }
}

@media (max-width: 820px) {
  #sec-primary .sec-fe-cal .sec-date-navigation { padding: 10px; gap: 8px; }
  #sec-primary .sec-fe-cal .sec-event-search { flex: 1 1 100%; }
  #sec-primary .sec-fe-cal .sec-search-input { flex: 1 1 auto; width: auto; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-day-frame { min-height: 84px; padding: 5px 4px 6px; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-block-event .sec-event-img-in-cal,
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .sec-event-img-in-cal { display: none; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event .sec-event-title-content { -webkit-line-clamp: 2; font-size: 11.5px; }
  /* The list card stacks: image first, then the date strip, then the body. */
  #sec-primary .sec-fe-cal .sec-event-card { flex-direction: column; }
  /* smart-event-cal-public.css:1709 hides the date box outright below 767px, so
     a narrow list card never says which day it is on - the date only appears
     inside the time range, in prose. It comes back here as a full-width strip
     between the image and the body. */
  #sec-primary .sec-fe-cal .sec-event-card > .sec-event-date {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    flex-direction: row;
    padding: 9px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--sec-fe-line-soft);
    order: 2;
    justify-content: flex-start;
  }
  #sec-primary .sec-fe-cal .sec-event-card > .sec-event-date .sec-date-box { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 7px; }
  #sec-primary .sec-fe-cal .sec-event-card > .sec-event-date .sec-day { font-size: 17px; }
  #sec-primary .sec-fe-cal .sec-event-card .sec-event-details { order: 3; }
  #sec-primary .sec-fe-cal .sec-event-card .sec-event-image-for-list { order: 1; flex: 0 0 auto; width: 100%; height: auto; }
  /* Full-width on phones: keep the Appearance ratio instead of a fixed 150px strip. */
  #sec-primary .sec-fe-cal .sec-event-card .sec-event-image-for-list img { height: auto; aspect-ratio: var(--sec-event-image-ratio, 16 / 9); }
  #sec-primary .sec-fe-cal .sec-fe-skeleton .sec-fe-sk-row .r { display: none; }
  #sec-primary .sec-fe-cal .sec-fe-error { flex-direction: column; gap: 10px; }
}

/* Below 620px a month cell is about 45px wide and no chip is legible in it. The
   chip becomes what the shipped CSS already made it at :1696 - a coloured dot.
   The grid stops being a reading surface and becomes an index: it says which
   days have something on, and List is one tap away in the toolbar. */
@media (max-width: 620px) {
  #sec-primary .sec-fe-cal .sec-date-navigation { justify-content: flex-start; }
  #sec-primary .sec-fe-cal .sec-event-filter-wrapper { flex: 1 1 100%; }
  #sec-primary .sec-fe-cal .sec-date-range { flex: 1; min-width: 0; }
  #sec-primary .sec-fe-cal .sec-date-range-toggle { width: 100%; }
  #sec-primary .sec-fe-cal .sec-event-search { flex-wrap: nowrap; gap: 8px; flex: 1 1 100%; }
  #sec-primary .sec-fe-cal .sec-search-input { min-width: 0; flex: 1 1 auto; width: auto; }
  #sec-primary .sec-fe-cal .sec-find-events-btn { flex: 0 0 auto; white-space: nowrap; padding: 0 11px; }
  #sec-primary .sec-fe-cal .sec-dropdown-toggle { white-space: nowrap; flex: 0 0 auto; }

  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-toolbar.fc-header-toolbar { padding: 11px 12px; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-col-header-cell-cushion { padding: 8px 2px; font-size: 9.5px; letter-spacing: .04em; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-day-frame { min-height: 58px; padding: 5px 5px 7px; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-day-number { width: 100%; height: 18px; place-items: center start; font-size: 11.5px; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-day-today .fc-daygrid-day-number { background: none; color: var(--sec-fe-btn-bg); font-weight: 800; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-day.fc-day-today { outline: 1.5px solid var(--sec-fe-btn-bg); outline-offset: -1.5px; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-day-events { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-event-harness { width: 10px; height: 10px; flex: 0 0 10px; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-event-harness:not(:last-child) { margin-bottom: 0; }
  /* The dot is painted by the border, not the background: eventDidMount writes
     the pale 10%-lightened fill onto background-color inline, and an inline
     style cannot be beaten from a stylesheet without !important. borderColor is
     the solid event colour, so a 5px border on a 10px border-box element is a
     solid dot in exactly the colour the chip had - no !important, and the
     per-event colour still comes from the same place it always did. */
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end,
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end.fc-daygrid-block-event,
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end.fc-daygrid-event.fc-daygrid-block-event {
    width: 10px;
    height: 10px;
    min-width: 10px;
    padding: 0;
    border-style: solid;
    border-width: 5px;
    border-radius: 50%;
    background-clip: padding-box;
    display: block;
    overflow: hidden;
  }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event .sec-event-box-calendar { display: none; }
  /* The overflow popover is the one place every occurrence on a day is listed,
     so there the chip goes back to being readable. */
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover a.fc-event.fc-event-start.fc-event-end,
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover a.fc-event.fc-event-start.fc-event-end.fc-daygrid-block-event {
    width: auto;
    height: auto;
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    border-radius: 7px;
    padding: 5px 6px 5px 7px;
  }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover a.fc-event .sec-event-box-calendar { display: flex; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover .fc-daygrid-event-harness { width: auto; height: auto; flex: 1 1 100%; }

  #sec-primary .sec-fe-cal .sec-fe-empty { padding: 36px 18px; }
}

/* -------------------------------------------------------------------------
   15. TOUCH
   Nothing here changes what a control does - it only makes the small ones big
   enough to hit. 44px is the floor for every opener, tab and toolbar button.
   ------------------------------------------------------------------------- */
@media (pointer: coarse) {
  #sec-primary .sec-fe-cal .sec-nav-prev,
  #sec-primary .sec-fe-cal .sec-nav-next { width: 44px; height: 44px; }
  #sec-primary .sec-fe-cal .sec-date-range-toggle,
  #sec-primary .sec-fe-cal .sec-dropdown-toggle,
  #sec-primary .sec-fe-cal .sec-find-events-btn { height: 44px; max-height: 44px; }
  #sec-primary .sec-fe-cal .sec-search-input { height: 44px; min-height: 44px; max-height: 44px; }
  #sec-primary .sec-fe-cal .sec-dropdown-content a { padding: 13px 12px !important; }
  #sec-primary .sec-fe-cal .sec-btn.sec-primary-btn,
  .tippy-box[data-theme~="sec-light"] .sec-btn.sec-primary-btn { min-height: 44px; padding: 11px 18px; }
  #sec-side-popup .sec-popup-sidebar-main .sec-close-btn { width: 44px; height: 44px; flex: 0 0 44px; }
  /* The chip is the opener, so on touch it is a target like any other. */
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end { min-height: 44px; }
  #sec-primary .sec-fe-cal .sec-event-card.sec-booking-info { min-height: 44px; }
}

/* A 10px dot is not a touch target, and 44px circles side by side in a 45px
   cell would overlap and steal each other's taps. So on touch each occurrence
   takes its own full-width 44px row inside the day cell, with the dot centred
   in it: the cell still reads as an index of which days have something on, and
   every dot has a target the size of the row.
   The dot is drawn by ::before with `border-color: inherit`, which resolves to
   the inline borderColor eventDidMount wrote - that is how the per-event colour
   reaches a pseudo-element without an !important on the inline background. */
@media (pointer: coarse) and (max-width: 620px) {
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-day-frame { min-height: 72px; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc .fc-daygrid-day-events { display: block; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-daygrid-event-harness {
    display: block;
    width: 100%;
    height: auto;
    flex: none;
    position: relative;
  }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end,
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end.fc-daygrid-block-event,
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end.fc-daygrid-event.fc-daygrid-block-event {
    position: relative;
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    min-width: 0;
    padding: 0;
    border-width: 0;
    border-radius: 6px;
    overflow: visible;
  }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper a.fc-event.fc-event-start.fc-event-end:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border: 5px solid;
    border-color: inherit;
    border-radius: 50%;
  }
  /* Inside the overflow popover the chip is readable again, so no dot there. */
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover a.fc-event.fc-event-start.fc-event-end {
    height: auto;
    min-height: 44px;
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    border-radius: 7px;
    padding: 5px 6px 5px 7px;
  }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover a.fc-event.fc-event-start.fc-event-end:before { content: none; }
  #sec-primary .sec-fe-cal #sec-calendar-wrapper .fc-popover .fc-daygrid-event-harness { height: auto; }
}


/* ---------------- toolbar corrections ----------------
 * Appended: same specificity as the rules above, so source order applies them.
 */
/* The search field and Find Events are one joined control - the input drops its
 * right border and the button carries the right-hand radius - so the flex gap
 * between them must be zero. The 10px is restored before the view picker, which
 * is a separate control. Also overrides the 8px set in the narrow breakpoint, so
 * the pair stays joined at every width. */
#sec-primary .sec-fe-cal .sec-event-search { gap: 0; }
#sec-primary .sec-fe-cal .sec-event-search > .sec-dropdown { margin-left: 10px; }

/* The focus ring followed --sec-fe-brand, which resolves through
 * --sec-ge-spotlight-color; that option stores the admin green by default, so a
 * site themed any other colour got a green ring beside its own coloured button.
 * Follow --sec-fe-btn-bg instead - the site primary, and the same token the
 * button next to it already uses. */
#sec-primary .sec-fe-cal .sec-search-input:focus {
  outline: 2px solid color-mix(in srgb, var(--sec-fe-btn-bg) 38%, #fff);
  outline-offset: 0;
  border-color: var(--sec-fe-btn-bg);
}


/* ---------------- hover card ----------------
 * tippy appends its root to <body>, outside #sec-primary, so every page-scoped
 * rule in this file missed it. These are scoped on the SEC-only tooltip classes
 * instead, so no other tooltip on the site is touched.
 *
 * The container has no padding and each child supplied its own 13px inset -
 * except the title, which had none, so the heading sat flush against the card
 * edge while everything under it was indented. One inset for all of them. */
.tippy-box .sec-event-tooltip-title {
  padding: 15px 17px 0; margin: 0 0 7px;
  font-size: 15px; line-height: 1.32; font-weight: 700;
}
.tippy-box .sec-event-tooltip-title .sec-event-tooltip-title-link { font-size: inherit; line-height: inherit; }
.tippy-box .sec-event-tooltip-datetime { padding: 0 17px; margin: 0 0 9px; font-size: 12.5px; line-height: 1.45; }
.tippy-box .sec-event-tooltip-description { padding: 0 17px; font-size: 13px; line-height: 1.5; }
/* The action sat loose at the bottom; a hairline separates it from the copy and
   the button drops to the size of the one in the booking panel. */
.tippy-box .sec-book-now-btn-wrapper {
  padding: 12px 17px 14px; margin: 13px 0 0; border-top: 1px solid var(--sec-fe-line, #e6e6e6);
}
.tippy-box .sec-book-now-btn-wrapper .sec-btn,
.tippy-box .sec-book-now-btn-wrapper .sec-booking-info {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 700; border-radius: 8px;
}

/* Keyboard focus on the toolbar. Themes commonly reset button:focus { outline: 0 } (Astra
   does), and only the chips and the search box had a focus style of their own, so tabbing
   through the arrows, date button, Find Events and view picker showed no ring at all. Draw
   one in the brand colour; :focus-visible keeps it off mouse clicks. */
#sec-primary .sec-fe-cal .sec-nav-prev:focus-visible,
#sec-primary .sec-fe-cal .sec-nav-next:focus-visible,
#sec-primary .sec-fe-cal .sec-today-btn:focus-visible,
#sec-primary .sec-fe-cal .sec-date-range-toggle:focus-visible,
#sec-primary .sec-fe-cal .sec-date-range-toggle:has(.sec-date-range-toggle-field:focus-visible),
#sec-primary .sec-fe-cal .sec-find-events-btn:focus-visible,
#sec-primary .sec-fe-cal .sec-dropdown-toggle:focus-visible,
#sec-primary .sec-fe-cal .sec-view-change-btn:focus-visible,
#sec-primary .sec-fe-cal .sec-fe-error button:focus-visible {
  outline: 2px solid var(--sec-fe-brand);
  outline-offset: 2px;
}