/* MF Creative Bookings — calendar v2 styles. Mobile-first. */

.mfc-calendar,
.mfc-modal {
    --mfc-border: #e5e7eb;
    --mfc-border-strong: #d1d5db;
    --mfc-bg-soft: #fafafb;
    --mfc-bg-today: #fff7ed;
    --mfc-accent: #000000;
    --mfc-accent-fg: #ffffff;
    --mfc-muted: #6b7280;
    --mfc-danger: #b91c1c;
    --mfc-success: #15803d;
    --mfc-outside: #f3f4f6;
    /* v0.34 friendly refresh: soft corners + studio blue for actions.
       --mfc-accent stays near-black for typography (dates, titles);
       --mfc-cta is the interactive blue (buttons, badges, focus). */
    --mfc-radius: 5px;
    --mfc-radius-card: 8px;
    --mfc-cta: #03469F;
    --mfc-cta-hover: #02356f;
    --mfc-cta-fg: #ffffff;
    font-family: inherit;
    color: #111111;
    margin: 0 0 2em;
}

/* ====================== TOOLBAR ====================== */
.mfc-cal-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    margin-bottom: 1em;
    padding-bottom: 0.75em;
    border-bottom: 1px solid var(--mfc-border);
}
.mfc-cal-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
@media (min-width: 768px) {
    .mfc-cal-toolbar {
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
    }
}

/* Checkbox dropdown (v0.30): button + absolutely-positioned panel. */
.mfc-cal-filter { position: relative; }
.mfc-cal-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: #fff;
    border: 1px solid var(--mfc-border-strong);
    border-radius: var(--mfc-radius);
    padding: 0.45em 0.7em;
    font: inherit;
    font-size: 0.9rem;
    color: var(--mfc-accent);
    cursor: pointer;
    min-width: 11em;
    justify-content: space-between;
}
.mfc-cal-filter__toggle:focus-visible {
    outline: 2px solid var(--mfc-accent);
    outline-offset: 1px;
}
.mfc-cal-filter.is-open .mfc-cal-filter__toggle { border-color: var(--mfc-cta); }
.mfc-cal-filter__count {
    background: var(--mfc-cta);
    border-radius: 3px;
    color: var(--mfc-accent-fg);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25em 0.45em;
    margin-left: auto;
}
/* CSS caret so the glyph can't drift from the font stack. Rotates open. */
.mfc-cal-filter__caret {
    width: 0.5em;
    height: 0.5em;
    border-right: 1.5px solid var(--mfc-accent);
    border-bottom: 1.5px solid var(--mfc-accent);
    transform: rotate(45deg);
    margin-top: -0.2em;
    transition: transform 0.12s ease;
    flex: none;
}
.mfc-cal-filter.is-open .mfc-cal-filter__caret { transform: rotate(225deg); margin-top: 0.15em; }
.mfc-cal-filter__panel {
    border-radius: var(--mfc-radius-card);
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 100%;
    max-height: 18em;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--mfc-border-strong);
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08);
    padding: 0.35em;
}
.mfc-cal-filter__option {
    display: flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.45em 0.5em;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}
.mfc-cal-filter__option:hover { background: var(--mfc-bg-soft); }
.mfc-cal-filter__option input {
    accent-color: var(--mfc-cta);
    width: 1em;
    height: 1em;
    margin: 0;
    flex: none;
}
/* Flag filter (Competition Team): a single checkbox styled to sit level
   with the dropdown toggles. */
.mfc-cal-filter__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: #fff;
    border: 1px solid var(--mfc-border-strong);
    border-radius: var(--mfc-radius);
    padding: 0.45em 0.7em;
    font-size: 0.9rem;
    color: var(--mfc-accent);
    cursor: pointer;
    user-select: none;
}
.mfc-cal-filter__flag:hover { background: var(--mfc-bg-soft); }
.mfc-cal-filter__flag input {
    accent-color: var(--mfc-cta);
    width: 1em;
    height: 1em;
    margin: 0;
    flex: none;
    cursor: pointer;
}
.mfc-cal-filter__flag:has(input:checked) { border-color: var(--mfc-cta); color: var(--mfc-cta); }
.mfc-cal-filter__flag input:focus-visible {
    outline: 2px solid var(--mfc-cta);
    outline-offset: 2px;
}

/* Active-filter chips row. */
.mfc-cal-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 1em;
}
.mfc-cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    border-radius: var(--mfc-radius);
    border: 1px solid var(--mfc-cta);
    color: var(--mfc-cta);
    background: #fff;
    padding: 0.3em 0.35em 0.3em 0.65em;
    font-size: 0.8rem;
    font-weight: 600;
}
.mfc-cal-chip__remove {
    border: 0;
    background: transparent;
    color: var(--mfc-muted);
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 0.25em;
    cursor: pointer;
}
.mfc-cal-chip__remove:hover,
.mfc-cal-chip__remove:focus-visible { color: var(--mfc-danger); }
.mfc-cal-chips__clear {
    border: 0;
    background: transparent;
    color: var(--mfc-muted);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.3em 0.2em;
}
.mfc-cal-chips__clear:hover,
.mfc-cal-chips__clear:focus-visible { color: var(--mfc-accent); }

/* Week navigation header. */
.mfc-cal-weeknav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    margin: 0 0 0.6em;
}
.mfc-cal-weeknav__label {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mfc-accent);
}
.mfc-cal-weeknav__controls { display: flex; gap: 0.4em; }
.mfc-cal-weeknav__today,
.mfc-cal-weeknav__arrow {
    background: #fff;
    border: 1px solid var(--mfc-border-strong);
    border-radius: var(--mfc-radius);
    color: var(--mfc-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.mfc-cal-weeknav__today { font-size: 0.8rem; padding: 0 0.8em; }
.mfc-cal-weeknav__arrow {
    font-size: 1.15rem;
    width: 2.1em;
    height: 2.1em;
    padding: 0 0 0.15em;
}
.mfc-cal-weeknav__today:hover:not(:disabled),
.mfc-cal-weeknav__arrow:hover:not(:disabled) { border-color: var(--mfc-accent); background: var(--mfc-bg-soft); }
.mfc-cal-weeknav__today:focus-visible,
.mfc-cal-weeknav__arrow:focus-visible {
    outline: 2px solid var(--mfc-accent);
    outline-offset: 1px;
}
.mfc-cal-weeknav__today:disabled,
.mfc-cal-weeknav__arrow:disabled {
    color: var(--mfc-border-strong);
    border-color: var(--mfc-border);
    cursor: default;
}

/* ====================== SHARED SLOT CARD ====================== */
.mfc-slot {
    border: 1px solid var(--mfc-border);
    border-radius: var(--mfc-radius-card);
    padding: 0.6em 0.7em;
    background: #fff;
    display: grid;
    gap: 0.3em;
    font-size: 0.85rem;
}
/* Accent rail: template sets `--mfc-slot-accent` inline only on bookable
   states (per-class colour or PL colour). Disabled / non-bookable cards
   omit the property and fall back to `transparent` — no visible rail. */
.mfc-slot__head {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    border-left: 3px solid var(--mfc-slot-accent, transparent);
    padding-left: 0.5em;
}
.mfc-slot__when { font-weight: 600; color: var(--mfc-accent); font-size: 0.85rem; }
.mfc-slot__title { font-size: 0.95rem; margin: 0; font-weight: 600; line-height: 1.3; }
.mfc-slot__teachers { color: var(--mfc-muted); font-size: 0.85rem; font-style: italic; }
.mfc-slot__booked { color: var(--mfc-success); font-weight: 600; font-size: 0.8rem; }
/* Age-group chips (v0.35) — informational tags in the slot popup. Fully
   rounded to read as labels, soft blue tint so they don't compete with the
   CTA. List reset is defensive against theme `ul` styling. */
.mfc-calendar .mfc-slot__age-chips,
.mfc-modal .mfc-slot__age-chips {
    list-style: none;
    padding: 0;
    margin: 0.15em 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}
.mfc-slot__age-chip {
    display: inline-block;
    background: #e8f0fb;
    color: var(--mfc-cta);
    border-radius: 999px;
    padding: 0.25em 0.7em;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.mfc-slot__cta { margin-top: 0.25em; }

.mfc-button {
    display: inline-block;
    padding: 0.4em 0.85em;
    border-radius: var(--mfc-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
}
.mfc-button--book,
.mfc-button--pay {
    background: var(--mfc-cta);
    color: var(--mfc-cta-fg);
}
.mfc-button--book:hover,
.mfc-button--pay:hover { background: var(--mfc-cta-hover); }
.mfc-button--login, .mfc-button--upgrade {
    background: transparent;
    color: var(--mfc-accent);
    border-color: var(--mfc-accent);
}
.mfc-button--disabled {
    background: #f3f4f6;
    color: var(--mfc-muted);
    cursor: not-allowed;
}
/* "Enrol weekly" — dashed outline distinguishes the recurring action from
   the one-off Book button while staying secondary to it. */
.mfc-button--enrol {
    background: transparent;
    color: var(--mfc-accent);
    border: 1px dashed var(--mfc-accent);
}
.mfc-button--enrol:hover {
    background: var(--mfc-bg-soft);
    border-style: solid;
}
.mfc-slot__enrol {
    margin-top: 0.4em;
}
.mfc-slot__places-left {
    margin: 0.35em 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b45309; /* amber — urgency without alarm */
}
.mfc-slot__cta-hint {
    margin: 0.35em 0 0;
    font-size: 0.72rem;
    color: var(--mfc-muted);
    line-height: 1.35;
}
.mfc-modal__hint {
    color: var(--mfc-muted);
    font-size: 0.85rem;
    margin: 0 0 0.5em;
}

/* ====================== MONTH GRID ====================== */
.mfc-month-grid {
    border: 1px solid var(--mfc-border);
    border-radius: var(--mfc-radius-card);
    overflow: hidden;
    background: #fff;
}
.mfc-month-grid__head,
.mfc-month-grid__cells {
    display: grid;
    /* Tue–Sat normally; Monday/Sunday are added when they contain events. */
    grid-template-columns: repeat(var(--mfc-calendar-columns, 5), minmax(0, 1fr));
}
.mfc-month-grid__weekday {
    padding: 0.5em 0.4em;
    background: var(--mfc-bg-soft);
    border-bottom: 1px solid var(--mfc-border);
    border-right: 1px solid var(--mfc-border);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--mfc-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mfc-month-grid__weekday:last-child { border-right: 0; }

.mfc-month-cell {
    min-height: 130px;
    padding: 0.3em;
    border-bottom: 1px solid var(--mfc-border);
    border-right: 1px solid var(--mfc-border);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}
.mfc-month-cell--week-end { border-right: 0; }
.mfc-month-cell--outside {
    background: var(--mfc-outside);
    color: var(--mfc-muted);
}
.mfc-month-cell--today { background: var(--mfc-bg-today); }
.mfc-month-cell__date {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--mfc-accent);
    margin-bottom: 0.1em;
}
/* The bare day-number shows in the desktop grid; the full "Tuesday 12 Jun"
   label is revealed only in the stacked mobile agenda (see the ≤767px block). */
.mfc-month-cell__date-full { display: none; }
.mfc-month-cell--outside .mfc-month-cell__date { color: #94a3b8; }
/* Defeat theme/page-builder defaults that target `ul` (bullets, indent).
   Scoped under `.mfc-calendar` to win over typical content-area rules without
   resorting to !important. */
.mfc-calendar .mfc-month-cell__list {
    list-style: none;
    list-style-type: none;
    list-style-image: none;
    padding: 0;
    padding-inline-start: 0;
    margin: 0;
    display: grid;
    gap: 0.4em;
}
.mfc-calendar .mfc-month-cell__list > .mfc-month-cell__item {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mfc-month-cell__pill {
    width: 100%;
    text-align: left;
    background: var(--mfc-accent);
    color: var(--mfc-accent-fg);
    border: 0;
    border-radius: var(--mfc-radius);
    padding: 0.6em 0.6em;
    min-height: 3.25em;
    font-size: 0.78rem;
    cursor: pointer;
    display: flex;
    gap: 0.35em;
    align-items: flex-start;
    line-height: 1.25;
}
.mfc-month-cell__pill-time { font-weight: 700; flex: none; }
/* Title wraps to at most three lines, then ellipsises — gives the pill a
   comfortable clickable height without unbounded growth. */
.mfc-month-cell__pill-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}
.mfc-month-cell__pill-full-badge {
    flex: none;
    margin-left: auto;
    padding: 0.25em 0.45em;
    border-radius: 3px;
    background: #fff;
    color: #334155;
    font-size: 0.68em;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.mfc-month-cell__pill:hover { filter: brightness(1.1); }
/* Disabled-state pills. !important here overrides our OWN inline brand colour
   set on bookable pills (calendar template writes `style="background:<hex>"`
   from mfc_class_colour). Without !important, a stale inline style left over
   from a state transition (e.g. capacity_full reached after render) would bleed
   through and lie about availability. Per CLAUDE.md §3.3, this mirrors the
   third-party override exception — we're overriding our own inline colour. */
/* All disabled states share #64748b: white text on the previous #94a3b8 was
   2.56:1 (and ~1.8:1 under the old 0.65 opacity) — unreadable precisely on
   the states a parent needs to read. #64748b passes AA at 4.76:1. The
   !important also overrides any stale inline color from the contrast fix. */
.mfc-month-cell__pill--out_of_credits,
.mfc-month-cell__pill--all_booked,
.mfc-month-cell__pill--capacity_full,
.mfc-month-cell__pill--unconfigured,
.mfc-month-cell__pill--membership_required {
    background: #64748b !important;
    color: #fff !important;
}

/* NOTE: the old opacity: 0.65 on full pills is gone — it dropped the
   effective text contrast below readable. The shared disabled block above
   is the single source of the disabled look. (The private-lesson CTA
   states left with the PL v1 calendar path in v0.25.) */

/* Product-type badge on the full slot card ("One-off class"). Real markup
   rendered by the template — CSS `content` text was untranslatable and
   inconsistently announced by screen readers. */
.mfc-slot__type-badge {
    display: inline-block;
    font-size: 0.7em;
    color: var(--mfc-muted);
    margin-bottom: 0.25em;
}

/* Visually hidden, AT-readable (some themes don't ship this utility). */
.mfc-calendar .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;
}

/* Zero-classes / zero-matches notices (audit UX 3 + 5): visible on desktop
   AND mobile, where empty cells are hidden entirely. */
.mfc-calendar__empty,
.mfc-calendar__no-matches {
    margin: 1em 0;
    padding: 0.9em 1em;
    background: var(--mfc-bg-soft, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #334155;
}

.mfc-month-cell--empty { background: #fcfcfc; }
.mfc-month-cell--outside.mfc-month-cell--empty { background: var(--mfc-outside); }

/* Holiday closures (v0.23): the cell carries the closure name instead of
   class pills so customers can see WHY nothing runs that day. */
.mfc-month-cell--holiday {
    background: repeating-linear-gradient(
        -45deg,
        #fafafa,
        #fafafa 8px,
        #f3f4f6 8px,
        #f3f4f6 16px
    );
}
.mfc-month-cell__holiday {
    margin-top: 0.15em;
    padding: 0.35em 0.4em;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: break-word;
}

/* Month detail panel — pinned beside or below the grid when a pill opens */
.mfc-month-detail {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--mfc-border);
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}
.mfc-month-detail__item { max-width: 480px; }
.mfc-month-detail .mfc-slot {
    border-color: var(--mfc-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Mobile (<768px): stack the grid into a vertical day-by-day agenda — one
   full-width day block per day that has classes, each headed by its full
   weekday + date. Blank/out-of-window days are dropped so it reads as an
   agenda, not a sparse grid. Pairs with the desktop grid at min-width:768px. */
@media (max-width: 767px) {
    .mfc-month-grid__head { display: none; }
    .mfc-month-grid__cells { grid-template-columns: 1fr; }
    .mfc-month-cell {
        min-height: 0;
        border-right: 0;
        padding: 0.6em 0.7em 0.7em;
    }
    /* Only render days that actually have classes. */
    .mfc-month-cell--empty,
    .mfc-month-cell--outside { display: none; }
    /* Swap the bare day-number for the full "Tuesday 12 Jun" label. */
    .mfc-month-cell__date-num { display: none; }
    .mfc-month-cell__date-full {
        display: block;
        font-size: 0.9rem;
        padding-bottom: 0.3em;
        margin-bottom: 0.45em;
        border-bottom: 1px solid var(--mfc-border);
    }
    /* Roomier pills on touch — titles always shown and free to use three lines. */
    .mfc-month-cell__pill {
        font-size: 0.95rem;
        min-height: 3.5em;
        padding: 0.7em 0.75em;
    }
}

/* ====================== PRIVATE LESSON SLOTS (v0.40) ====================== */
/* Per-day section under the class pills, per the approved mock: small
   uppercase label + a wrapping grid of time buttons. */
.mfc-cell-pl {
    margin-top: 0.6em;
    padding-top: 0.5em;
    border-top: 1px solid var(--mfc-border);
}
.mfc-cell-pl__label {
    margin: 0 0 0.4em;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mfc-muted);
}
.mfc-cell-pl__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}
.mfc-cell-pl__slot {
    background: #fff;
    border: 1px solid var(--mfc-border-strong);
    border-radius: var(--mfc-radius);
    color: var(--mfc-cta);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.45em 0.5em;
    cursor: pointer;
    transition: border-color 100ms ease, background 100ms ease;
}
.mfc-cell-pl__slot:hover {
    border-color: var(--mfc-cta);
    background: #f0f5fc;
}
.mfc-cell-pl__slot:focus-visible {
    outline: 2px solid var(--mfc-cta);
    outline-offset: 1px;
}
@media (max-width: 767px) {
    .mfc-cell-pl__slot { font-size: 0.85rem; padding: 0.55em 0.7em; }
}

/* PL popup: lesson-type select + party rows reuse the student-picker look. */
.mfc-modal__field { display: block; margin: 0 0 1em; }
.mfc-modal__field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mfc-muted);
    margin: 0 0 0.35em;
}
.mfc-modal__select {
    width: 100%;
    padding: 0.6em 0.7em;
    border: 1px solid var(--mfc-border-strong);
    border-radius: var(--mfc-radius);
    background: #fff;
    font: inherit;
    font-size: 0.95rem;
    color: #111111;
}
.mfc-modal__select:focus-visible {
    outline: none;
    border-color: var(--mfc-cta);
    box-shadow: 0 0 0 3px rgba(3, 70, 159, 0.25);
}
.mfc-modal__party { margin-top: 0; }

/* ====================== HIDDEN STATE FOR FILTERS ====================== */
.mfc-slot[hidden],
.mfc-month-cell__item[hidden] { display: none !important; }
/* Week pagination: cells outside the viewed week (set by calendar.js). */
.mfc-month-cell[hidden] { display: none !important; }

/* Week view: today is always on screen, so it earns a stronger marker —
   accent top rule + bold date on the existing warm tint. */
.mfc-month-cell--today { box-shadow: inset 0 3px 0 var(--mfc-accent); }
.mfc-month-cell--today .mfc-month-cell__date { font-weight: 700; }

/* ====================== MODAL (booking) ====================== */
.mfc-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 22, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Above Divi's fixed header (99999) and the WP admin bar (99999) —
       at 9999 the theme chrome painted over the dialog. */
    z-index: 100000;
    padding: 1em;
}
.mfc-modal__panel {
    background: #fff;
    border-radius: var(--mfc-radius-card);
    padding: 1.25em;
    width: 100%;
    max-width: 28em;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.mfc-modal__title { margin: 0 0 0.6em; font-size: 1.1rem; }
.mfc-modal__detail { margin: 0 0 1.25em; color: var(--mfc-muted); font-size: 0.9rem; }
.mfc-modal__students { list-style: none; margin: 0 0 1.25em; padding: 0; display: grid; gap: 0.5em; }
.mfc-modal__student {
    border: 1px solid var(--mfc-border);
    border-radius: var(--mfc-radius);
    padding: 0.6em 0.75em;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font: inherit;
    width: 100%;
}
.mfc-modal__student:hover { background: var(--mfc-bg-soft); }
/* role="radio" buttons expose state via aria-checked; the PL checkbox
   labels (native input state) mirror it with .is-checked. */
.mfc-modal__student[aria-checked="true"],
.mfc-modal__student.is-checked {
    border-color: var(--mfc-accent);
    background: var(--mfc-bg-soft);
}
.mfc-modal__student-credits { font-size: 0.8rem; color: var(--mfc-muted); }
/* Blocked-but-payable rows (over weekly allowance): the price tag is the
   whole story, so it gets the accent instead of muted grey. */
.mfc-modal__student--pay .mfc-modal__student-credits { color: var(--mfc-accent); }
.mfc-modal__error { color: var(--mfc-danger); font-size: 0.9rem; margin: 0 0 0.75em; }
/* Actionable error link (consent deep-link) — same red, clearly underlined. */
.mfc-modal__error-link {
    color: var(--mfc-danger);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mfc-modal__error-link:hover { color: #7f1d1d; }
.mfc-modal__actions { display: flex; flex-direction: column-reverse; gap: 0.5em; }
.mfc-modal__actions .mfc-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.8em 1em;
    font-size: 0.9rem;
}
.mfc-modal__actions .mfc-button--cancel {
    background: transparent;
    color: var(--mfc-cta);
    border: 1px solid var(--mfc-cta);
}
.mfc-modal__actions .mfc-button--cancel:hover { background: #f0f5fc; color: var(--mfc-cta-hover); border-color: var(--mfc-cta-hover); }
.mfc-modal__actions .mfc-button--cart {
    background: #ffffff;
    color: var(--mfc-cta);
    border: 1px solid var(--mfc-cta);
}
.mfc-modal__actions .mfc-button--cart:hover {
    background: #f0f5fc;
    color: var(--mfc-cta-hover);
    border-color: var(--mfc-cta-hover);
}

/* Persistent confirmation after an item is added without leaving the
   timetable. It sits above Divi and the modal stack, with an explicit cart
   link so a customer can keep adding classes and check out when ready. */
.mfc-cart-notice {
    position: fixed;
    z-index: 100001;
    top: max(1em, env(safe-area-inset-top));
    right: 1em;
    width: min(25em, calc(100vw - 2em));
    padding: 1em 3em 1em 1em;
    border: 1px solid #86b79a;
    border-left: 4px solid #15803d;
    border-radius: 8px;
    background: #f0fdf4;
    color: #14532d;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.22);
    font-size: 0.9rem;
    line-height: 1.45;
}
.mfc-cart-notice__message { display: block; font-weight: 700; }
.mfc-cart-notice__hint { display: block; margin-top: 0.15em; }
.mfc-cart-notice__link {
    display: inline-block;
    margin-top: 0.65em;
    color: #03469f;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mfc-cart-notice__dismiss {
    position: absolute;
    top: 0.35em;
    right: 0.45em;
    width: 2em;
    height: 2em;
    border: 0;
    background: transparent;
    color: #14532d;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}
/* Slot-detail popup: card CTAs go full width too. */
.mfc-modal--slot-detail .mfc-slot__cta .mfc-button,
.mfc-modal--slot-detail .mfc-button--enrol {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.8em 1em;
    font-size: 0.9rem;
}
/* Competition-team notice — amber warning card, rounded like the rest. */
.mfc-slot__competition-note {
    margin: 0.25em 0;
    padding: 0.7em 0.85em;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: var(--mfc-radius);
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
}
.mfc-modal__actions .mfc-button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Slot-detail modal — shows the full slot card (title/when/cta) on month-pill
   click. Panel is wider than the booking modal so the card has room to breathe;
   close button sits top-right of the panel. */
.mfc-modal__panel--slot-detail {
    max-width: 32em;
    padding: 1.75em 1.75em 1.5em;
    position: relative;
}
.mfc-modal__close {
    position: absolute;
    top: 0.4em;
    right: 0.5em;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mfc-muted);
    cursor: pointer;
    padding: 0.25em 0.5em;
}
.mfc-modal__close:hover { color: var(--mfc-accent); }
.mfc-modal__close:focus-visible {
    outline: 2px solid var(--mfc-accent);
    outline-offset: 2px;
}
.mfc-modal__panel--slot-detail .mfc-slot {
    border: 0;
    padding: 0;
    margin: 0;
    /* Roomier than the base card's 0.3em — the popup is the reading surface. */
    gap: 0.75em;
}
.mfc-modal__panel--slot-detail .mfc-slot__when { font-size: 0.95rem; }
.mfc-modal__panel--slot-detail .mfc-slot__title { font-size: 1.2rem; margin-top: 0.2em; }
.mfc-modal__panel--slot-detail .mfc-slot__age-chips { margin-top: 0.1em; }
.mfc-modal__panel--slot-detail .mfc-slot__cta { margin-top: 0.9em; }
/* Cancel row under the card (v0.40.1). */
.mfc-modal__panel--slot-detail .mfc-modal__actions { margin-top: 0.9em; }
/* Full-width CTA (v0.34 intent — an earlier inline-block rule here was
   winning by file order and quietly undoing it). */
.mfc-modal__panel--slot-detail .mfc-slot__cta .mfc-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.85em 1.2em;
    font-size: 0.9rem;
}

/* The prerendered `.mfc-month-detail` zone is the source we clone INTO the
   modal — never displayed inline. The `hidden` attribute already does this
   in markup, but we belt-and-braces by hiding the WRAPPER (so the items
   inside, when cloned out into the modal, can still render). */
.mfc-calendar > .mfc-cal-view .mfc-month-detail { display: none; }