/* MspBooking — minimal front-end styles. Semantic classes only; themes override. */

/* ------------------------------------------------------------------
   Themeable custom properties. Declared on :where(:root) — zero
   specificity — so a framework/theme stylesheet can override any token
   with a plain `:root { }` rule regardless of stylesheet load order.
   Tokens live on :root (not .msp-booking-view) because the calendar
   tooltip is lifted to <body> by JS and must still see them.
   Defaults reproduce the module's unthemed look.
   ------------------------------------------------------------------ */
:where(:root) {
    /* Base typography */
    --msp-booking-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --msp-booking-color: #222;            /* body text, day numbers */
    --msp-booking-secondary-color: #444;  /* labels, prices, sub-headings */
    --msp-booking-muted-color: #666;      /* hints, notes, meta, legends */
    --msp-booking-faint-color: #9ca3af;   /* separators, de-emphasised text */

    /* Accent — links, buttons, active chips */
    --msp-booking-accent: #2a8a3e;
    --msp-booking-accent-hover: #237132;
    --msp-booking-link-color: var(--msp-booking-accent);
    --msp-booking-link-hover-color: var(--msp-booking-accent-hover);

    /* Buttons */
    --msp-booking-btn-bg: var(--msp-booking-accent);
    --msp-booking-btn-hover-bg: var(--msp-booking-accent-hover);
    --msp-booking-btn-color: #fff;
    --msp-booking-btn-radius: var(--msp-booking-radius-sm);
    --msp-booking-btn-danger-bg: var(--msp-booking-danger-solid);
    --msp-booking-btn-danger-hover-bg: #8a2222;

    /* Surfaces, borders, radii */
    --msp-booking-bg: #fff;               /* cards, calendar cells, popups */
    --msp-booking-surface: #f6f8fa;       /* slots, table heads, info boxes */
    --msp-booking-surface-hover: #eef2f7;
    --msp-booking-tag-bg: #eef0f3;        /* category / past pills */
    --msp-booking-tag-hover-bg: #e2e6ea;
    --msp-booking-border-color: #e2e6ea;
    --msp-booking-border-strong-color: #cfd6df; /* slot & input borders */
    --msp-booking-divider-color: #eef1f4; /* table row dividers */
    --msp-booking-radius-sm: 4px;
    --msp-booking-radius-md: 6px;
    --msp-booking-radius-lg: 8px;
    --msp-booking-radius-pill: 999px;
    --msp-booking-shadow: 0 4px 14px rgba(0, 0, 0, .14);

    /* Slot grids — minimum chip width; set to 100% to force a vertical list */
    --msp-booking-slot-min: 9rem;

    /* Form inputs */
    --msp-booking-input-bg: #fff;
    --msp-booking-input-border-color: var(--msp-booking-border-strong-color);
    --msp-booking-input-radius: var(--msp-booking-radius-sm);

    /* Status colours — boxes get bg/border/text, badges get the solid */
    --msp-booking-success-bg: #eaf6ec;
    --msp-booking-success-border-color: #c4e2cc;
    --msp-booking-success-color: #1d6b2f;
    --msp-booking-success-solid: #2a8a3e;
    --msp-booking-danger-bg: #fdecec;
    --msp-booking-danger-border-color: #f0c0c0;
    --msp-booking-danger-color: #8a2222;
    --msp-booking-danger-solid: #aa2a2a;
    --msp-booking-warning-bg: #fdf3e7;
    --msp-booking-warning-border-color: #f0d9b5;
    --msp-booking-warning-color: #8a5a1a;
    --msp-booking-warning-solid: #c9870a;

    /* Prices (resource intro display price) */
    --msp-booking-price-color: var(--msp-booking-secondary-color);

    /* Calendar day states */
    --msp-booking-cal-available-bg: var(--msp-booking-bg);
    --msp-booking-cal-available-hover-border: var(--msp-booking-accent);
    --msp-booking-cal-available-color: var(--msp-booking-success-solid); /* "N left" counts */
    --msp-booking-cal-resource-color: #1c6b2e; /* fallback resource names in cells */
    --msp-booking-cal-resource-bg: var(--msp-booking-tag-bg);
    --msp-booking-cal-full-bg: var(--msp-booking-bg);
    --msp-booking-cal-full-color: var(--msp-booking-danger-color);
    --msp-booking-cal-closed-bg: var(--msp-booking-bg);
    --msp-booking-cal-past-bg: var(--msp-booking-bg);
    --msp-booking-cal-today-ring: #2a6fdb;
    --msp-booking-cal-today-color: #1c4fa0;
    --msp-booking-cal-radius: 5px;
    --msp-booking-event-color: #1c4fa0; /* event titles in cells/popups */
}

/* One outer wrapper per view (hub page / resource page). Base typography
   lives here. .msp-booking-contained is the module's built-in centered
   container — its width comes from the "Content container width" module
   config (via --msp-booking-width); configuring "none" drops the class so
   the template's own markup (uk-container etc.) controls the layout. */
.msp-booking-view {
    font-family: var(--msp-booking-font);
    line-height: 1.5;
    color: var(--msp-booking-color);
}
.msp-booking-contained {
    max-width: var(--msp-booking-width, 760px);
    margin: 2rem auto;
    padding: 0 1rem;
}

/* View blocks stack full-width inside the wrapper. */
.msp-booking-resources,
.msp-booking-resource,
.msp-booking-availability,
.msp-booking-form-wrap,
.msp-booking-confirmation {
    margin: 0 0 2rem;
}

.msp-booking-resources h1,
.msp-booking-resources-intro h1,
.msp-booking-resource h1,
.msp-booking-form-wrap h1,
.msp-booking-confirmation h1,
.msp-booking-view > h1 { margin-top: 0; }

/* Breadcrumb trail above the booking views. */
.msp-booking-breadcrumb {
    margin: 0 0 .75rem;
    font-size: .85rem;
    color: var(--msp-booking-muted-color);
}
.msp-booking-breadcrumb a { color: var(--msp-booking-link-color); text-decoration: none; }
.msp-booking-breadcrumb a:hover { text-decoration: underline; }
.msp-booking-breadcrumb-sep { margin: 0 .4rem; color: var(--msp-booking-faint-color); }

/* Breathing room between a resource's intro content and the calendar /
   day view rendered below it. */
.msp-booking-resource + .msp-booking-calendar,
.msp-booking-resource + .msp-booking-day-expansion { margin-top: 3rem; }

/* Resource cards: horizontal (image column left, content right), stacking
   vertically on narrow screens. Cards without an image are content-only. */
.msp-booking-resource-card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-radius-md);
    margin-bottom: 1.5rem;
    background: var(--msp-booking-bg);
    overflow: hidden;
}
.msp-booking-card-media { flex: 0 0 280px; display: block; }
.msp-booking-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msp-booking-card-body { flex: 1 1 auto; min-width: 0; padding: 1rem 1.25rem; }
.msp-booking-card-body h3 { margin: 0 0 .35rem; }
/* Card headings are links without an underline (hover included); the card
   itself is not a link, so hovering it doesn't change them. */
.msp-booking-resource-card h3 a { text-decoration: none; }
.msp-booking-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin: 0 0 .75rem;
    font-size: .9rem;
    color: var(--msp-booking-muted-color);
}
/* Multi-line venue address below the meta line. */
.msp-booking-card-address {
    margin: 0 0 .75rem;
    font-size: .9rem;
    color: var(--msp-booking-muted-color);
}
.msp-booking-card-meta + .msp-booking-card-address { margin-top: -.4rem; }
.msp-booking-card-category {
    padding: .1rem .6rem;
    background: var(--msp-booking-tag-bg);
    border-radius: var(--msp-booking-radius-pill);
    font-size: .78rem;
    color: var(--msp-booking-secondary-color);
    text-decoration: none;
}
a.msp-booking-card-category:hover { background: var(--msp-booking-tag-hover-bg); }
@media (max-width: 640px) {
    .msp-booking-resource-card { display: block; }
    .msp-booking-card-media img { height: auto; aspect-ratio: 3 / 2; }
}

/* Cards as a grid (module setting): image on top, the action button aligned
   along the bottom of each row. Large screens: 2–4 per row; tablets 2; phones 1. */
.msp-booking-card-grid {
    display: grid; gap: 1.5rem; margin-bottom: 1.5rem;
    grid-template-columns: repeat(var(--msp-booking-grid-columns, 3), minmax(0, 1fr));
}
.msp-booking-card-grid-2 { --msp-booking-grid-columns: 2; }
.msp-booking-card-grid-3 { --msp-booking-grid-columns: 3; }
.msp-booking-card-grid-4 { --msp-booking-grid-columns: 4; }
.msp-booking-card-grid .msp-booking-resource-card { flex-direction: column; margin-bottom: 0; }
.msp-booking-card-grid .msp-booking-card-media { flex: none; }
.msp-booking-card-grid .msp-booking-card-media img { height: auto; aspect-ratio: 3 / 2; }
.msp-booking-card-grid .msp-booking-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.msp-booking-card-grid .msp-booking-card-body > p:last-child { margin-top: auto; margin-bottom: 0; padding-top: .25rem; }
@media (max-width: 1023px) {
    .msp-booking-card-grid { --msp-booking-grid-columns: 2; }
}
@media (max-width: 640px) {
    .msp-booking-card-grid { --msp-booking-grid-columns: 1; }
    .msp-booking-card-grid .msp-booking-resource-card { display: flex; }
}

/* Past events: dimmed cards below a divider heading, plus an on-page banner. */
.msp-booking-past-heading {
    margin: 3rem 0 1rem;
    padding-top: 3rem;
    border-top: 1px solid var(--msp-booking-border-color);
    font-size: 1.15rem;
    color: var(--msp-booking-muted-color);
}
.msp-booking-resource-card.is-past { opacity: .5; background: var(--msp-booking-cal-past-bg); }
.msp-booking-resource-card.is-past:hover { opacity: 1; }
.msp-booking-past-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5rem;
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--msp-booking-muted-color);
    background: var(--msp-booking-tag-bg);
    border-radius: var(--msp-booking-radius-pill);
}
.msp-booking-unpublished-label {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 .75rem;
    padding: .2rem .6rem;
    border: 1px solid var(--msp-booking-warning-border-color);
    border-radius: var(--msp-booking-radius-sm);
    background: var(--msp-booking-warning-bg);
    color: var(--msp-booking-warning-color);
    font-size: .8rem;
    font-weight: 600;
}
.msp-booking-past-banner,
.msp-booking-empty-banner {
    margin: 0 0 1.25rem;
    padding: .6rem 1rem;
    background: var(--msp-booking-warning-bg);
    border: 1px solid var(--msp-booking-warning-border-color);
    border-radius: var(--msp-booking-radius-md);
    color: var(--msp-booking-warning-color);
    font-weight: 600;
}

.msp-booking-resource img,
.msp-booking-resources-intro img { max-width: 100%; border-radius: var(--msp-booking-radius-md); margin-bottom: 1rem; }

/* ------------------------------------------------------------------
   Resource gallery (two or more images/videos). Two modes share this
   markup: with MspFrontend present, Embla transforms the track and the
   viewport stays hidden; standalone, the viewport scrolls and snaps. The
   scrolling half is scoped to --fallback, which MspBookingGallery.js adds
   only when it is driving, so the two never contend.
   ------------------------------------------------------------------ */
.msp-booking-gallery {
    --msp-booking-gallery-aspect-ratio: 8 / 5;
    --msp-booking-gallery-thumb-width: 88px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0 0 1.5rem;
}
.msp-booking-resource .msp-booking-gallery img { margin: 0; border-radius: 0; max-width: none; }
.msp-booking-gallery__viewport {
    aspect-ratio: var(--msp-booking-gallery-aspect-ratio);
    width: 100%;
    overflow: hidden;
    border-radius: var(--msp-booking-radius-md);
    background: var(--msp-booking-surface);
}
.msp-booking-gallery--fallback .msp-booking-gallery__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.msp-booking-gallery--fallback .msp-booking-gallery__viewport::-webkit-scrollbar { display: none; }
.msp-booking-gallery__track { display: flex; width: 100%; height: 100%; }
.msp-booking-gallery__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    scroll-snap-align: start;
}
.msp-booking-gallery__media { display: block; width: 100%; height: 100%; object-fit: cover; }
.msp-booking-gallery__slide[data-type="image"] .msp-booking-gallery__media { cursor: zoom-in; }
.msp-booking-gallery__slide[data-type="video"] { background: #000; }
.msp-booking-gallery__slide[data-type="video"] .msp-booking-gallery__media { object-fit: contain; }

/* Overlays the viewport only (same aspect ratio), so the arrows centre on
   the picture rather than on picture + thumbnails. */
.msp-booking-gallery__nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: var(--msp-booking-gallery-aspect-ratio);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.msp-booking-gallery__button {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 56px;
    padding: 0;
    border: 0;
    background: rgb(0 0 0 / .25);
    color: #fff;
    cursor: pointer;
    opacity: .9;
    transition: background-color .1s, opacity .1s;
}
.msp-booking-gallery__button:hover,
.msp-booking-gallery__button:focus-visible { background: rgb(0 0 0 / .45); opacity: 1; }
.msp-booking-gallery__button--prev { border-radius: 0 var(--msp-booking-radius-sm) var(--msp-booking-radius-sm) 0; }
.msp-booking-gallery__button--next { border-radius: var(--msp-booking-radius-sm) 0 0 var(--msp-booking-radius-sm); }
.msp-booking-gallery__button svg { width: 28px; height: 28px; stroke-width: 2.5; }

.msp-booking-gallery__thumbs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.msp-booking-gallery__thumb {
    position: relative;
    flex: 0 0 auto;
    width: var(--msp-booking-gallery-thumb-width);
    aspect-ratio: var(--msp-booking-gallery-aspect-ratio);
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--msp-booking-radius-sm);
    background: var(--msp-booking-surface);
    cursor: pointer;
}
.msp-booking-gallery__thumb[aria-current] { border-color: var(--msp-booking-accent); }
.msp-booking-gallery__thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
/* A video thumbnail says so. */
.msp-booking-gallery__thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / .4);
    color: #fff;
}
.msp-booking-gallery__thumb-play svg { width: 22px; height: 22px; fill: currentColor; }

/* Standalone zoom (without MspFrontend's lightbox). */
.msp-booking-gallery__dialog {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    background: #000;
}
.msp-booking-gallery__dialog::backdrop { background: rgb(0 0 0 / .85); }
/* Flex + margin:auto rather than grid centring: an outgrown centred grid item
   gets its top and left clipped, the half you need at 1:1. */
.msp-booking-gallery__dialog-pane { display: flex; width: 100%; height: 100%; overflow: auto; }
.msp-booking-gallery__dialog-img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}
.msp-booking-gallery__dialog-img.is-actual { max-width: none; max-height: none; object-fit: none; cursor: zoom-out; }
.msp-booking-gallery__dialog-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .9);
    color: #000;
    cursor: pointer;
}
.msp-booking-gallery__dialog-close svg { width: 22px; height: 22px; }

/* A single video on its own, no slideshow. */
.msp-booking-media-video { margin: 0 0 1.5rem; }
.msp-booking-media-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--msp-booking-radius-md);
}

@media (prefers-reduced-motion: reduce) {
    .msp-booking-gallery__button { transition: none; }
}

.msp-booking-price {
    font-weight: 600;
    color: var(--msp-booking-price-color);
}
.msp-booking-resource-actions {
    margin: 2.5rem 0 2.75rem;
}
.msp-booking-price-heading {
    margin: 0 0 .35rem;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
}
.msp-booking-resource-actions .msp-booking-price {
    margin: 0 0 .9rem;
    font-size: 2em;
    line-height: 1.15;
}
.msp-booking-resource-actions .msp-booking-external-action {
    margin: 0;
}
.msp-booking-description { margin: 0 0 1.5rem; }
.msp-booking-category-description { margin: 2rem 0 3rem; }
.msp-booking-description > :last-child { margin-bottom: 0; }
.msp-booking-external-action { margin: 1.75rem 0 2rem; }
.msp-booking-resource + .msp-booking-availability { margin-top: 3rem; }

.msp-booking-on-request-list {
    margin: 3rem 0 2rem;
    padding-top: 3rem;
    border-top: 1px solid var(--msp-booking-border-color);
}
.msp-booking-on-request-list > h2 { margin: 0 0 1rem; }

/* Credits on the resource page: a heading per group, then one row per credit
   with the role in a fixed column and the names beside it. */
.msp-booking-credits { margin: 2rem 0; }
.msp-booking-credit-group + .msp-booking-credit-group { margin-top: 1.75rem; }
.msp-booking-credit-group h2 { margin: 0 0 .5rem; }
.msp-booking-credit-list { margin: 0; }
.msp-booking-credit {
    display: flex;
    gap: .75rem;
    padding: .2rem 0;
}
.msp-booking-credit dt {
    flex: 0 0 min(40%, 14rem);
    margin: 0;
    font-weight: normal;
    color: var(--msp-booking-muted-color);
}
.msp-booking-credit dd { flex: 1; margin: 0; }
@media (max-width: 480px) {
    .msp-booking-credit { flex-direction: column; gap: 0; }
    .msp-booking-credit dt { flex-basis: auto; }
}

/* Location + contact info block on the resource page. */
.msp-booking-info {
    margin: 2rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-radius-md);
    background: var(--msp-booking-surface);
}
.msp-booking-info-row {
    display: flex;
    gap: .75rem;
    padding: .35rem 0;
}
.msp-booking-info-row + .msp-booking-info-row { border-top: 1px solid var(--msp-booking-divider-color); }
.msp-booking-info-label {
    flex: 0 0 7rem;
    font-weight: 600;
    color: var(--msp-booking-muted-color);
}
.msp-booking-info-value { margin: 0; flex: 1; }
.msp-booking-info-value a { color: inherit; }
@media (max-width: 480px) {
    .msp-booking-info-row { flex-direction: column; gap: .15rem; }
    .msp-booking-info-label { flex-basis: auto; }
}

.msp-booking-availability h2 { margin-top: 2rem; }
.msp-booking-day { margin: 1.25rem 0; }
.msp-booking-day h3 { margin: 0 0 .5rem; color: var(--msp-booking-secondary-color); }
/* Slots align in even grid columns; a slot carrying extra details (title/note)
   and event occurrences span the full row — see .has-details below. */
.msp-booking-slot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--msp-booking-slot-min), 1fr));
    gap: .5rem;
}
.msp-booking-slot a {
    display: block;
    padding: .5rem .75rem;
    border: 1px solid var(--msp-booking-border-strong-color);
    border-radius: var(--msp-booking-radius-sm);
    background: var(--msp-booking-surface);
    color: var(--msp-booking-color);
    text-decoration: none;
    text-align: center;
}
.msp-booking-slot a:hover { background: var(--msp-booking-surface-hover); border-color: #aab2bb; }
/* Admin-cancelled date: kept in the list, not a link. */
.msp-booking-slot.is-cancelled {
    grid-column: 1 / -1;
    display: flex;
    gap: .25rem .75rem;
    align-items: baseline;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    border: 1px dashed var(--msp-booking-border-strong-color);
    border-radius: var(--msp-booking-radius-sm);
    color: #888;
}
.msp-booking-slot.is-cancelled .msp-booking-slot-time,
.msp-booking-slot.is-cancelled .msp-booking-event-title { text-decoration: line-through; }
.msp-booking-cancelled-badge {
    font-size: .85em;
    font-weight: 600;
    color: var(--msp-booking-danger-color);
    background: var(--msp-booking-danger-bg);
    border: 1px solid var(--msp-booking-danger-border-color);
    border-radius: var(--msp-booking-radius-sm);
    padding: 0 .4em;
}
.msp-booking-slot.has-details,
.msp-booking-event-occurrence { grid-column: 1 / -1; }
.msp-booking-slot.has-details a {
    display: flex;
    gap: .25rem .75rem;
    align-items: baseline;
    flex-wrap: wrap;
    text-align: left;
}
.msp-booking-slot-time { font-weight: 600; }
.msp-booking-slot-remaining { color: var(--msp-booking-muted-color); font-size: .9em; }

/* Event occurrences. On the day-overview each row links to the event page; on
   the event's own page it's plain text. Style the row box either way. */
.msp-booking-event-occurrence {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--msp-booking-border-strong-color);
    border-radius: var(--msp-booking-radius-sm);
    background: var(--msp-booking-surface);
}
.msp-booking-event-occurrence > a {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex: 1;
    color: inherit;
    text-decoration: none;
}
.msp-booking-event-occurrence > a:hover .msp-booking-event-title { text-decoration: underline; }
.msp-booking-event-title { font-weight: 700; }
.msp-booking-event-note { color: var(--msp-booking-muted-color); font-size: .9em; }
.msp-booking-event-occurrence > .msp-booking-ical-link {
    flex: 0 0 auto;
    align-items: center;
    gap: .35em;
    margin-left: auto;
    color: var(--msp-booking-link-color);
    font-size: .85em;
    white-space: nowrap;
}
.msp-booking-event-occurrence > .msp-booking-ical-link:hover,
.msp-booking-event-occurrence > .msp-booking-ical-link:focus-visible {
    color: var(--msp-booking-link-hover-color);
    text-decoration: underline;
}
.msp-booking-calendar-actions { margin: -.25rem 0 1rem; }
.msp-booking-calendar-actions .msp-booking-link {
    display: inline-flex;
    align-items: center;
    gap: .35em;
}
.msp-booking-calendar-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}
.msp-booking-events h2 { margin: 1.25rem 0 .75rem; }
.msp-booking-events .msp-booking-day {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: .5rem 1rem;
    align-items: start;
    margin: 0;
    padding: .4rem 0;
    border-top: 1px solid var(--msp-booking-divider-color);
}
.msp-booking-events .msp-booking-day h3 {
    margin: .15rem 0 0;
    font-size: .95rem;
    line-height: 1.25;
}
.msp-booking-events .msp-booking-slot-list {
    display: block;
}
.msp-booking-events .msp-booking-event-occurrence {
    padding: .15rem 0;
    border: 0;
    background: transparent;
}
.msp-booking-events .msp-booking-event-occurrence + .msp-booking-event-occurrence {
    margin-top: .2rem;
}
@media (max-width: 560px) {
    .msp-booking-events .msp-booking-day {
        grid-template-columns: 1fr;
        gap: .2rem;
    }
    .msp-booking-event-occurrence { flex-wrap: wrap; }
    .msp-booking-event-occurrence > .msp-booking-ical-link { margin-left: 0; }
}
/* Calendar cells: an event day shows its title in place of the "N left" count. */
.msp-booking-day-cell .msp-booking-day-event,
.msp-booking-day-popup .msp-booking-day-popup-count.msp-booking-day-event {
    color: var(--msp-booking-event-color);
    font-style: normal;
    font-weight: 600;
}

/* Booking page: the form beside a compact resource summary. Stacked on
   narrow screens with the form first (it's what the visitor came for);
   side by side from 800px up — summary left, form as a sticky card aside. */
.msp-booking-booking-layout {
    display: grid;
    gap: 1.5rem 2.5rem;
    align-items: start;
}
.msp-booking-booking-layout > * { margin: 0; }
.msp-booking-booking-layout .msp-booking-form-wrap {
    border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-radius-lg);
    background: var(--msp-booking-bg);
    padding: 1.25rem 1.5rem;
}
/* Keep the card heading modest — framework h1 scale is page-title sized. */
.msp-booking-booking-layout .msp-booking-form-wrap h1 { font-size: 1.5rem; }
@media (min-width: 800px) {
    .msp-booking-booking-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    }
    /* No summary to show: the form keeps its right-hand column anyway, so it
       sits where the calendar/day panel lives on the pages leading here. */
    .msp-booking-booking-layout.msp-booking-no-summary .msp-booking-form-wrap {
        grid-column: 2;
    }
    .msp-booking-resource-summary { order: 1; }
    .msp-booking-booking-layout .msp-booking-form-wrap {
        order: 2;
        position: sticky;
        top: 1rem;
    }
}

/* Split resource page (module config "Resource page layout: split"): the
   intro/description keeps the wide column while the calendar/list/day view
   lives in a persistent booking panel. Stacked on narrow screens (content
   first — the panel follows); side by side from 1024px up with the panel
   sticky. Slot/confirmation pages keep their own layouts. */
.msp-booking-resource-layout {
    display: grid;
    gap: 1.5rem 2.5rem;
    align-items: start;
}
.msp-booking-resource-layout > * { margin: 0; }
.msp-booking-panel {
    border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-radius-lg);
    background: var(--msp-booking-bg);
    padding: 1rem 1.25rem;
}
@media (min-width: 1024px) {
    .msp-booking-resource-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    }
    /* Cap the sticky panel at the viewport and scroll it internally — a long
       availability list otherwise stretches the whole page (and anything
       below a sticky element's viewport-height fold is unreachable anyway).
       The content column keeps scrolling the page as usual. */
    .msp-booking-panel {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* Compact calendar inside the panel: shorter cells, no per-day counts or
   resource names (availability still reads from the cell colours; the hover
   popup keeps the detail). Headings scale down to panel size. */
.msp-booking-panel .msp-booking-calendar { margin: 0 0 1rem; }
.msp-booking-panel .msp-booking-calendar-nav strong { font-size: 1rem; }
.msp-booking-panel .msp-booking-day-cell { height: 44px; }
.msp-booking-panel .msp-booking-day-cell .msp-booking-day-num {
    padding: .15rem .3rem;
    font-size: .85rem;
}
.msp-booking-panel .msp-booking-day-count,
.msp-booking-panel .msp-booking-day-resources,
.msp-booking-panel .msp-booking-day-more { display: none; }
.msp-booking-panel .msp-booking-availability h2,
.msp-booking-panel .msp-booking-day-expansion h2 {
    margin-top: 0;
    font-size: 1.25rem;
}
.msp-booking-panel .msp-booking-availability,
.msp-booking-panel .msp-booking-day-expansion { margin-bottom: 0; }

/* Compact event details and schedule in the split layout's narrow right-hand panel. */
.msp-booking-panel .msp-booking-event-panel { font-size: .9rem; }
.msp-booking-event-panel .msp-booking-info { margin: 0 0 1rem; padding: .75rem; }
.msp-booking-event-panel .msp-booking-info-row { flex-direction: column; gap: .1rem; }
.msp-booking-event-panel .msp-booking-info-label { flex-basis: auto; font-size: .8rem; }
.msp-booking-event-panel .msp-booking-info-value { min-width: 0; overflow-wrap: anywhere; }
.msp-booking-event-panel .msp-booking-resource-actions { margin: 0 0 1.25rem; }
.msp-booking-event-panel .msp-booking-price { margin: .5rem 0; font-size: 1.15rem; }
.msp-booking-panel .msp-booking-event-panel .msp-booking-button {
    max-width: 100%; min-height: 0; height: auto;
    padding: .6rem .9rem; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
}
.msp-booking-event-panel .msp-booking-calendar-nav a { font-size: .8rem; }
.msp-booking-panel .msp-booking-event-panel .msp-booking-day-count,
.msp-booking-panel .msp-booking-event-panel .msp-booking-day-resources,
.msp-booking-panel .msp-booking-event-panel .msp-booking-day-more { display: none; }
.msp-booking-event-panel .msp-booking-calendar-actions { margin: 0 0 .75rem; }
.msp-booking-panel .msp-booking-event-panel .msp-booking-events h2 {
    margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.25;
}
.msp-booking-event-panel .msp-booking-events .msp-booking-day {
    grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .65rem 0;
}
.msp-booking-event-panel .msp-booking-event-occurrence { flex-wrap: wrap; }
.msp-booking-event-date-header {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: .25rem .75rem; min-width: 0;
}
.msp-booking-event-date-header > .msp-booking-ical-link { margin-left: auto; font-size: .75rem; }


.msp-booking-form .msp-booking-field {
    display: block;
    margin: .75rem 0;
}
.msp-booking-form .msp-booking-field > span {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
}
.msp-booking-form input[type=text],
.msp-booking-form input[type=email],
.msp-booking-form input[type=tel],
.msp-booking-form input[type=number],
.msp-booking-form select {
    width: 100%;
    max-width: 360px;
    padding: .4rem .5rem;
    border: 1px solid var(--msp-booking-input-border-color);
    border-radius: var(--msp-booking-input-radius);
    background: var(--msp-booking-input-bg);
    font-size: 1rem;
}

.msp-booking-button {
    display: inline-block;
    padding: .5rem 1rem;
    background: var(--msp-booking-btn-bg);
    color: var(--msp-booking-btn-color);
    border: none;
    border-radius: var(--msp-booking-btn-radius);
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
}
.msp-booking-button:hover { background: var(--msp-booking-btn-hover-bg); }
.msp-booking-button-outline {
    background: transparent;
    color: var(--msp-booking-link-color);
    border: 1px solid var(--msp-booking-border-strong-color);
}
.msp-booking-button-outline:hover,
.msp-booking-button-outline:focus-visible {
    background: var(--msp-booking-surface-hover);
    color: var(--msp-booking-link-hover-color);
    border-color: var(--msp-booking-accent);
}
.msp-booking-button-small {
    padding: .35rem .75rem;
    font-size: .85rem;
}
.msp-booking-view-action-row {
    display: flex;
    justify-content: flex-end;
}

/* Submit + cancel row: breathing room above so the actions stand apart from
   the last input. */
.msp-booking-form-actions { margin-top: 1.25rem; }
/* Cancel link beside the booking form's submit button — an ordinary link by
   default, just kept clear of the button; themes can dress it up. */
.msp-booking-cancel-link { margin-left: .75rem; }

.msp-booking-error {
    background: var(--msp-booking-danger-bg);
    color: var(--msp-booking-danger-color);
    border: 1px solid var(--msp-booking-danger-border-color);
    padding: .5rem .75rem;
    border-radius: var(--msp-booking-radius-sm);
}

.msp-booking-form-slot {
    background: var(--msp-booking-surface);
    border: 1px solid var(--msp-booking-border-color);
    padding: .5rem .75rem;
    border-radius: var(--msp-booking-radius-sm);
}

/* Ticket type quantity rows on the booking form */
.msp-booking-tickets {
    border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-radius-sm);
    padding: .5rem 1rem 1rem;
    margin: 1rem 0;
}
.msp-booking-tickets legend { font-weight: 600; padding: 0 .4rem; }
.msp-booking-tickets-hint { margin: .25rem 0 .75rem; color: var(--msp-booking-muted-color); font-size: .9em; }
/* Stacked ticket rows: the (possibly long) name on its own line, price and
   quantity input on the line below. */
.msp-booking-ticket-row { padding: .6rem 0; }
.msp-booking-ticket-row + .msp-booking-ticket-row {
    border-top: 1px solid var(--msp-booking-divider-color);
}
.msp-booking-ticket-name {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}
/* Optional customer-facing note under the ticket name. */
.msp-booking-ticket-desc {
    margin: -.2rem 0 .4rem;
    font-size: .85em;
    color: var(--msp-booking-muted-color);
}
.msp-booking-ticket-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.msp-booking-ticket-price { color: var(--msp-booking-secondary-color); white-space: nowrap; }
.msp-booking-ticket-controls input[type=number] {
    width: 5rem;
    padding: .35rem .4rem;
    border: 1px solid var(--msp-booking-input-border-color);
    border-radius: var(--msp-booking-input-radius);
    background: var(--msp-booking-input-bg);
    font-size: 1rem;
    text-align: right;
    /* Frameworks give form elements a bottom margin, which would push the
       input off the price's vertical center in this flex row. */
    margin-bottom: 0;
}

.msp-booking-confirmation .msp-booking-reference {
    font-size: 1.2rem;
}
.msp-booking-summary {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}
.msp-booking-summary td {
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--msp-booking-divider-color);
}

/* Calendar */
.msp-booking-calendar { margin: 1.5rem 0; }
.msp-booking-calendar-nav {
    display: flex;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.msp-booking-calendar-nav a { text-decoration: none; color: var(--msp-booking-link-color); }
.msp-booking-calendar-prev,
.msp-booking-calendar-next { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.msp-booking-calendar-nav > strong { white-space: nowrap; }
.msp-booking-calendar-nav .msp-booking-calendar-today { margin-left: auto; }
.msp-booking-panel .msp-booking-calendar-nav { column-gap: .75rem; }
.msp-booking-arrow { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; }
.msp-booking-calendar-nav .msp-booking-calendar-view-action {
    margin-left: auto;
}
.msp-booking-calendar-nav strong { font-size: 1.15rem; }
.msp-booking-link { color: var(--msp-booking-link-color); text-decoration: none; }
.msp-booking-link:hover { text-decoration: underline; color: var(--msp-booking-link-hover-color); }

.msp-booking-calendar-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-cal-radius);
    overflow: hidden;
}
.msp-booking-calendar-grid thead th:first-child { border-top-left-radius: var(--msp-booking-cal-radius); }
.msp-booking-calendar-grid thead th:last-child { border-top-right-radius: var(--msp-booking-cal-radius); }
.msp-booking-calendar-grid tbody tr:last-child td:first-child { border-bottom-left-radius: var(--msp-booking-cal-radius); }
.msp-booking-calendar-grid tbody tr:last-child td:last-child { border-bottom-right-radius: var(--msp-booking-cal-radius); }
.msp-booking-calendar-grid th {
    background: var(--msp-booking-surface);
    border: 0;
    border-right: 1px solid var(--msp-booking-border-color);
    border-bottom: 1px solid var(--msp-booking-border-color);
    padding: .35rem 0;
    font-size: .85rem;
    color: var(--msp-booking-muted-color);
    text-align: center;
}
.msp-booking-calendar-grid th:last-child,
.msp-booking-calendar-grid td:last-child {
    border-right: 0;
}
.msp-booking-calendar-grid tbody tr:last-child td {
    border-bottom: 0;
}
.msp-booking-day-cell {
    border: 0;
    border-right: 1px solid var(--msp-booking-border-color);
    border-bottom: 1px solid var(--msp-booking-border-color);
    height: 70px;
    vertical-align: top;
    position: relative;
    padding: 0;
    background: var(--msp-booking-bg);
}
.msp-booking-day-cell .msp-booking-day-num {
    display: block;
    padding: .25rem .4rem;
    font-weight: 600;
    color: var(--msp-booking-color);
}
.msp-booking-day-cell .msp-booking-day-count {
    display: block;
    padding: 0 .4rem .25rem;
    font-size: .75rem;
    color: var(--msp-booking-cal-available-color);
}
/* Resource names lifted into the all-plays calendar cells. */
.msp-booking-day-cell .msp-booking-day-resources {
    display: block;
    padding: 0 .35rem .2rem;
}
.msp-booking-day-cell .msp-booking-day-resource {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 .22rem;
    padding: .2rem .5rem;
    border-radius: var(--msp-booking-radius-sm);
    background: var(--msp-booking-resource-bg, var(--msp-booking-cal-resource-bg));
    font-size: .72rem;
    line-height: 1.22;
    color: var(--msp-booking-resource-fg, var(--msp-booking-cal-resource-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msp-booking-day-cell .msp-booking-day-more {
    display: block;
    font-size: .7rem;
    line-height: 1.25;
    color: var(--msp-booking-muted-color);
}
/* Hover/focus popup listing every resource bookable that day (desktop nicety;
   touch users tap the cell for the full day view). The hovered cell is raised
   so the popup paints over its neighbours. */
.msp-booking-day-cell:hover,
.msp-booking-day-cell:focus-within { z-index: 21; }
/* The popup box look — unscoped so it applies both in-cell (no-JS fallback) and
   on the body-level tooltip the JS path creates. */
.msp-booking-day-popup {
    display: none;
    min-width: 160px;
    max-width: 240px;
    padding: .55rem .65rem;
    background: var(--msp-booking-bg);
    border: 1px solid var(--msp-booking-border-strong-color);
    border-radius: var(--msp-booking-radius-sm);
    box-shadow: var(--msp-booking-shadow);
    text-align: left;
    white-space: normal;
    cursor: default;
}
/* In-cell positioning (overridden by .msp-booking-cal-tip on the body tooltip). */
.msp-booking-day-cell .msp-booking-day-popup {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
    z-index: 22;
}
/* No-JS fallback: CSS-only hover/focus reveal (can be covered by later table
   cells in some browsers — the JS path below avoids that entirely). */
.msp-booking-calendar:not(.msp-has-js) .msp-booking-day-cell:hover .msp-booking-day-popup,
.msp-booking-calendar:not(.msp-has-js) .msp-booking-day-cell:focus-within .msp-booking-day-popup { display: block; }
/* Right-edge column: anchor the popup to the right so it doesn't overflow. */
.msp-booking-calendar-grid td:nth-child(7) .msp-booking-day-popup { left: auto; right: 0; }
/* JS path: a single tooltip lifted to <body>, positioned next to the cell, so no
   table cell can ever paint over it. Reuses the popup look; JS toggles display. */
.msp-booking-cal-tip { position: fixed; z-index: 99999; margin: 0; pointer-events: none; }
.msp-booking-day-popup .msp-booking-day-popup-head {
    display: block;
    font-weight: 600;
    font-size: .8rem;
    margin-bottom: .3rem;
    color: var(--msp-booking-color);
}
.msp-booking-day-popup .msp-booking-day-popup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--msp-booking-secondary-color);
}
.msp-booking-day-popup .msp-booking-day-popup-item + .msp-booking-day-popup-item {
    margin-top: .22rem;
}
.msp-booking-day-popup .msp-booking-day-popup-name {
    display: inline-block;
    min-width: 0;
    max-width: 10.5rem;
    padding: .16rem .5rem;
    border-radius: var(--msp-booking-radius-sm);
    background: var(--msp-booking-resource-bg, var(--msp-booking-cal-resource-bg));
    color: var(--msp-booking-resource-fg, var(--msp-booking-cal-resource-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msp-booking-day-popup .msp-booking-day-popup-count { color: var(--msp-booking-cal-available-color); font-weight: 600; }
.msp-booking-day-cell a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.msp-booking-day-cell.available { background: var(--msp-booking-cal-available-bg); }
.msp-booking-day-cell.available a:hover,
.msp-booking-day-cell.available a:focus {
    box-shadow: inset 0 0 0 2px var(--msp-booking-cal-available-hover-border);
}
.msp-booking-day-cell.full { background: var(--msp-booking-cal-full-bg); }
.msp-booking-day-cell.full .msp-booking-day-num { color: var(--msp-booking-cal-full-color); }
.msp-booking-day-cell.full .msp-booking-day-count { color: var(--msp-booking-cal-full-color); font-style: italic; }
.msp-booking-day-cell.closed { background: var(--msp-booking-cal-closed-bg); }
.msp-booking-day-cell.closed .msp-booking-day-num { color: #aaa; }
.msp-booking-day-cell.closed-exception {
    background: var(--msp-booking-bg);
    color: #999;
}
.msp-booking-day-cell.closed-exception .msp-booking-day-num { color: #999; }
.msp-booking-day-cell.cancelled { background: var(--msp-booking-bg); }
.msp-booking-day-cell.cancelled .msp-booking-day-resources { opacity: .6; text-decoration: line-through; }
.msp-booking-day-cell.cancelled .msp-booking-day-count { color: var(--msp-booking-danger-color); font-weight: 600; }
.msp-booking-day-cell.past { background: var(--msp-booking-cal-past-bg); }
.msp-booking-day-cell.past .msp-booking-day-num { color: #bbb; }
.msp-booking-day-cell.past-event .msp-booking-day-resources,
.msp-booking-day-cell.past-event .msp-booking-day-popup {
    opacity: .5;
}
.msp-booking-day-cell.other-month { background: var(--msp-booking-bg); }
.msp-booking-day-cell.other-month .msp-booking-day-num { color: #ccc; }
/* Today — inset ring so it shows over any state colour. */
.msp-booking-day-cell.today { box-shadow: inset 0 0 0 2px var(--msp-booking-cal-today-ring); }
.msp-booking-day-cell.today .msp-booking-day-num { color: var(--msp-booking-cal-today-color); }

.msp-booking-calendar-legend {
    display: none;
}
.msp-booking-calendar-legend .legend {
    display: inline-block;
    margin-right: .5rem;
}
.msp-booking-calendar-legend .legend.full { color: var(--msp-booking-cal-full-color); }
.msp-booking-calendar-legend .legend.closed,
.msp-booking-calendar-legend .legend.closed-exception { color: #999; }
.msp-booking-calendar-legend .legend.past { color: #bbb; }
.msp-booking-calendar-legend .legend.cancelled { color: var(--msp-booking-danger-color); }

/* Day expansion — slots share the grid above, grouped per resource with the
   title lifted into the group heading. */

/* Manage */
.msp-booking-manage { margin: 0 0 2rem; }
.msp-booking-success {
    background: var(--msp-booking-success-bg);
    color: var(--msp-booking-success-color);
    border: 1px solid var(--msp-booking-success-border-color);
    padding: .5rem .75rem;
    border-radius: var(--msp-booking-radius-sm);
}
.msp-booking-button-danger { background: var(--msp-booking-btn-danger-bg); }
.msp-booking-button-danger:hover { background: var(--msp-booking-btn-danger-hover-bg); }

/* Admission QR (check-in ticket) */
.msp-booking-qr {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-radius-md);
    text-align: center;
}
.msp-booking-qr h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.msp-booking-qr p { margin: 0 0 .75rem; color: var(--msp-booking-muted-color); }
.msp-booking-qr-code { display: inline-block; }
.msp-booking-qr-code svg { width: 220px; height: auto; max-width: 100%; }

/* Door check-in verify card */
.msp-booking-checkin { text-align: center; padding: 1.5rem 1rem; border-radius: var(--msp-booking-radius-lg); }
.msp-booking-checkin-ok  { background: var(--msp-booking-success-bg); border: 1px solid var(--msp-booking-success-border-color); }
.msp-booking-checkin-bad { background: var(--msp-booking-danger-bg); border: 1px solid var(--msp-booking-danger-border-color); }
.msp-booking-checkin-warn { background: var(--msp-booking-warning-bg); border: 1px solid var(--msp-booking-warning-border-color); }
.msp-booking-checkin-badge {
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; margin: 0 auto .5rem;
    border-radius: 50%; color: #fff;
}
.msp-booking-checkin-badge svg { width: 44px; height: 44px; stroke-width: 2.5; }
.msp-booking-checkin-ok  .msp-booking-checkin-badge { background: var(--msp-booking-success-solid); }
.msp-booking-checkin-bad .msp-booking-checkin-badge { background: var(--msp-booking-danger-solid); }
.msp-booking-checkin-warn .msp-booking-checkin-badge { background: var(--msp-booking-warning-solid); }
.msp-booking-checkin h1 { margin: .25rem 0 .5rem; }
.msp-booking-checkin .msp-booking-summary { margin: 1rem auto; max-width: 420px; text-align: left; }

/* Door scanner (in-browser camera) */
.msp-booking-scanner { text-align: center; }
.msp-booking-scan-tally { color: var(--msp-booking-muted-color); }
#msp-scan-stage {
    position: relative; max-width: 420px; margin: 1rem auto;
    background: #000; border-radius: var(--msp-booking-radius-lg); overflow: hidden; aspect-ratio: 1/1;
}
#msp-scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
#msp-scan-frame {
    position: absolute; inset: 15%; border: 3px solid rgba(255,255,255,.85);
    border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.25); pointer-events: none;
}
.msp-scan-result {
    display: flex; align-items: center; gap: .75rem; justify-content: center;
    max-width: 420px; margin: 1rem auto; padding: .9rem 1rem; border-radius: var(--msp-booking-radius-lg);
    text-align: left; min-height: 3.25rem;
}
.msp-scan-result .msp-scan-badge {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.msp-scan-result .msp-scan-badge svg { width: 24px; height: 24px; stroke-width: 2.5; }
/* Typed booking reference (fallback when a QR won't scan) */
.msp-scan-manual { max-width: 420px; margin: 1.5rem auto 0; text-align: left; }
.msp-scan-manual label { display: block; margin-bottom: .35rem; color: var(--msp-booking-muted-color); }
.msp-scan-manual-row { display: flex; gap: .5rem; }
.msp-scan-manual-row input[type=text] { flex: 1 1 auto; min-width: 0; max-width: none; text-transform: uppercase; }
.msp-scan-manual-list { max-width: 420px; margin: 1rem auto; text-align: left; }
.msp-scan-manual-list ul { list-style: none; margin: 0; padding: 0; }
.msp-scan-manual-list li {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .5rem 0; border-top: 1px solid var(--msp-booking-border-color, #ddd);
}
.msp-scan-done { display: inline-flex; align-items: center; gap: .3rem; color: var(--msp-booking-success-solid); }
.msp-scan-done svg { width: 1.1em; height: 1.1em; }
.msp-scan-result.msp-scan-result { background: var(--msp-booking-cal-closed-bg); } /* default/idle */
.msp-scan-result.ok   { background: var(--msp-booking-success-bg); border: 1px solid var(--msp-booking-success-border-color); }
.msp-scan-result.warn { background: var(--msp-booking-warning-bg); border: 1px solid var(--msp-booking-warning-border-color); }
.msp-scan-result.bad  { background: var(--msp-booking-danger-bg); border: 1px solid var(--msp-booking-danger-border-color); }
.msp-scan-result.ok   .msp-scan-badge { background: var(--msp-booking-success-solid); }
.msp-scan-result.warn .msp-scan-badge { background: var(--msp-booking-warning-solid); }
.msp-scan-result.bad  .msp-scan-badge { background: var(--msp-booking-danger-solid); }
.msp-scan-result.idle .msp-scan-badge { background: #bbb; }

/* Honeypot — keep it invisible and out of the layout regardless of theme. */
.msp-booking-hp {
    position: absolute !important;
    left: -5000px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* Per-ticket QR grid (manage page) */
.msp-booking-tickets-grid {
    display: grid; gap: 1rem; margin-top: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.msp-booking-ticket-card {
    border: 1px solid var(--msp-booking-border-color); border-radius: var(--msp-booking-radius-lg); padding: .75rem; text-align: center;
}
.msp-booking-ticket-card .msp-booking-qr-code svg { width: 100%; height: auto; }
.msp-booking-ticket-label { font-weight: 600; margin-bottom: .4rem; }
.msp-booking-ticket-label span { color: var(--msp-booking-faint-color); font-weight: 400; }
.msp-booking-ticket-used { opacity: .55; }
.msp-booking-ticket-status { margin-top: .4rem; font-size: .85rem; color: var(--msp-booking-success-solid); }
.msp-booking-ticket-type { font-size: 1.25rem; margin: .25rem 0 .5rem; }
.msp-booking-ticket-open { display: inline-block; margin-top: .3rem; font-size: .85rem; }

/* Single ticket page (/manage/ticket/{token}/): small centred card */
.msp-booking-ticket-page {
    max-width: 360px; margin: 1.5rem auto; padding: 1.5rem 1.25rem;
    background: var(--msp-booking-bg); border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-radius-lg); box-shadow: var(--msp-booking-shadow);
    text-align: center;
}
.msp-booking-ticket-page h1 { margin: 0 0 .35rem; font-size: 1.4rem; line-height: 1.25; }
.msp-booking-ticket-page p { margin: 0 0 .5rem; }
.msp-booking-ticket-page-when { color: var(--msp-booking-secondary-color); }
.msp-booking-ticket-page-type { font-size: 1.1rem; }
.msp-booking-ticket-page-type span { color: var(--msp-booking-muted-color); font-size: .95rem; }
.msp-booking-ticket-page .msp-booking-qr-code { display: block; margin: .75rem auto .5rem; }
.msp-booking-ticket-page .msp-booking-qr-code svg {
    display: block; margin: 0 auto; width: 100%; max-width: 260px; height: auto;
}
/* Standalone ticket document: the card alone, centred on a light ground */
.msp-booking-ticket-doc {
    margin: 0; min-height: 100vh; box-sizing: border-box; padding: 1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--msp-booking-surface); color: var(--msp-booking-color);
    font-family: var(--msp-booking-font); line-height: 1.45;
}
.msp-booking-ticket-doc .msp-booking-ticket-page { width: 100%; margin: 0; }
.msp-booking-ticket-page .msp-booking-note {
    background: var(--msp-booking-warning-bg); border: 1px solid var(--msp-booking-warning-border-color);
    color: var(--msp-booking-warning-color); padding: .5rem .75rem; border-radius: var(--msp-booking-radius-sm);
}
.msp-booking-ticket-page-hint { color: var(--msp-booking-muted-color); font-size: .9rem; }
.msp-booking-ticket-page-ref { margin-top: .75rem !important; color: var(--msp-booking-faint-color); font-size: .85rem; letter-spacing: .02em; }

/* Payment-method picker (booking form) */
.msp-booking-payment-methods { margin: 1rem 0; border: 1px solid var(--msp-booking-border-color); border-radius: var(--msp-booking-radius-md); padding: .5rem .75rem; }
.msp-booking-payment-methods legend { font-weight: 600; padding: 0 .35rem; }
.msp-booking-payment-method { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.msp-payment-logo { height: 24px; width: auto; max-width: 96px; vertical-align: middle; object-fit: contain; }
.msp-payment-name { vertical-align: middle; }

/* Category filter chips (cards / calendar / day-expansion views) */
.msp-booking-category-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.msp-booking-chip {
    display: inline-block; padding: .25rem .85rem; border: 2px solid var(--msp-booking-border-strong-color);
    border-radius: var(--msp-booking-radius-pill); color: var(--msp-booking-color); text-decoration: none; font-size: .9rem; line-height: 1.5;
}
.msp-booking-chip:hover { border-color: var(--msp-booking-accent); color: var(--msp-booking-accent); }
.msp-booking-chip.is-active { background: var(--msp-booking-accent); border-color: var(--msp-booking-accent); color: var(--msp-booking-btn-color); }

/* Embeddable "next up" cards (renderUpcomingCards) — deliberately light so a
   site framework's classes (passed via the 'classes' option) can take over. */
.msp-booking-upcoming { display: flex; flex-wrap: wrap; gap: 1rem; }
.msp-booking-upcoming-card {
    flex: 1 1 220px; max-width: 320px; border: 1px solid var(--msp-booking-border-color); border-radius: var(--msp-booking-radius-lg);
    padding: 1rem; display: flex; flex-direction: column;
}
.msp-booking-upcoming-card > a > .msp-booking-upcoming-image { width: 100%; height: auto; border-radius: var(--msp-booking-radius-sm); }
.msp-booking-upcoming-date { color: var(--msp-booking-muted-color); font-size: .9em; margin: .5rem 0 0; }
.msp-booking-upcoming-title { margin: .25rem 0 .5rem; }
.msp-booking-upcoming-title a { color: inherit; text-decoration: none; }
.msp-booking-upcoming-title a:hover { text-decoration: underline; }
.msp-booking-upcoming-desc { margin: 0 0 .75rem; }
.msp-booking-upcoming-body { display: flex; flex-direction: column; flex: 1; }
.msp-booking-upcoming-body > p:last-child { margin-top: auto; margin-bottom: 0; }

/* Navigation for the independent past-events archive. */
.msp-booking-past-pagination, .msp-booking-event-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }

.msp-booking-section-heading:not(.msp-booking-past-heading) { margin: 2.5rem 0 1rem; }

.msp-booking-session-schedule { margin: .5rem 0; padding-left: 1.2rem; }
.msp-booking-session-schedule li { margin: .25rem 0; }
.msp-booking-session-schedule .is-cancelled { text-decoration: line-through; opacity: .65; }
.msp-booking-summary td { white-space: pre-line; }

/* A simple shared frame keeps the dates of one event together. */
.msp-booking-event-group {
    margin: 1rem 0; padding: 1rem;
    border: 1px solid var(--msp-booking-border-color);
    border-radius: var(--msp-booking-radius-md);
    background: var(--msp-booking-surface);
}
.msp-booking-event-group-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.msp-booking-event-group-header h3 { margin: 0; font-size: 1rem; }
.msp-booking-event-group-header .msp-booking-ical-link { margin: 0; }
.msp-booking-event-group-header > .msp-booking-ical-link:only-child { margin-left: auto; }
.msp-booking-event-group-note { margin: .5rem 0 0; color: var(--msp-booking-muted-color); }
.msp-booking-event-group-days { list-style: none; margin: 1rem 0 0; padding: 0; }
.msp-booking-event-group-days:first-child { margin-top: 0; }
.msp-booking-event-group-footer { display: flex; justify-content: flex-end; margin-top: .75rem; }
.msp-booking-event-group-footer .msp-booking-ical-link { margin: 0; }
.msp-booking-event-group-days > li {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .2rem .75rem; padding: 0 0 1rem;
}
.msp-booking-event-group-days > li.is-date-only { padding-bottom: .35rem; }
.msp-booking-event-group-days > li:last-child { padding-bottom: 0; }
.msp-booking-event-group-date { flex: 1 1 100%; font-weight: 600; }
.msp-booking-event-group-days .msp-booking-event-note { flex-basis: 100%; }
.msp-booking-event-group-days .is-cancelled .msp-booking-event-group-date,
.msp-booking-event-group-days .is-cancelled .msp-booking-slot-time { text-decoration: line-through; color: var(--msp-booking-muted-color); }