/* BookSesh Events — customer booking UI (contract build, 2026-09-18).
   Built ENTIRELY on the booking-bridge design tokens (--bkb-*) so events UI
   matches the tenant's bridge visual language exactly. Scoped to event mode
   (.bksesh-evmode / .bksesh-ev-datemode on .booknetic_appointment_container,
   toggled by event-booking.js). Non-event + 1-to-1 flows: byte/pixel-unchanged. */

/* ── Service cards: event bridge card shows ONLY "From £lowest" in the normal
   price slot (native ".booknetic_service_card_price" untouched & hidden). ── */
.bksesh-ev-card .bksesh-br-card-price { display: none !important; }
.bksesh-ev-card .booknetic_service_card_price { display: none !important; }
/* Custom-duration (non-event) cards: same overlay pattern — bridge mirror's
   DISPLAYED price hidden by class only; native text/data-price untouched. */
.bksesh-cd-card .bksesh-br-card-price { display: none !important; }
/* Item 1: typography EXACTLY matches native .bksesh-bridge .bksesh-br-card-price
   (14px / 600 at all widths — the Fresha-section rule wins by specificity).
   Colour stays --bkb-primary per owner. */
.bksesh-ev-fromprice {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 10px;
    align-self: flex-start;
    padding-top: 1px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bkb-primary, #0f40ff);
}
.bksesh-ev-fromprice .bksesh-ev-from {
    font-size: 11px;
    font-weight: 600;
    color: var(--bkb-muted, #6b7280);
    margin-right: 3px;
    letter-spacing: .01em;
}

/* ── Date & Time step: hide ONLY the bridge picker nodes while our visible
   replacement (stage node) is present. Narrow selectors — never a blanket. ── */
.bksesh-ev-datemode .bksesh-cal,
.bksesh-ev-datemode .bksesh-cal-grid,
.bksesh-ev-datemode .bksesh-cal-times-wrap,
.bksesh-ev-datemode .bksesh-cal-grid-toggle,
.bksesh-ev-datemode .bksesh-br-body > .bksesh-br-step-sub { display: none !important; }

/* Our staged UI lives inside .bksesh-br-body */
.bksesh-ev-stage { padding: 6px 0 4px; }

/* During stage TICKETS the in-body Continue is the sole advance control —
   suppress the live bridge "Next" (it fires native date validation → toast). */
.bksesh-ev-tickets-stage .bksesh-br-btn-next { display: none !important; }

/* ── Stage TICKETS — Eventbrite-style rows in BookSesh language ─────────── */
.bksesh-ev-trow {
    border: 1px solid var(--bkb-border, #e5e7eb);
    border-radius: var(--bkb-radius, 12px);
    background: var(--bkb-card, #fff);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--bkb-shadow, 0 1px 3px rgba(0,0,0,.06));
}
.bksesh-ev-trow-active {
    border: 1.5px solid var(--bkb-primary, #0f40ff);
    background: rgba(var(--bkb-primary-rgb, 15,64,255), 0.03);
    box-shadow: 0 0 0 3px rgba(var(--bkb-primary-rgb, 15,64,255), 0.06);
}
.bksesh-ev-trow-muted { opacity: .72; }
.bksesh-ev-trow-top { display: flex; align-items: center; gap: 12px; }
.bksesh-ev-trow-name {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 700; line-height: 1.3;
    color: var(--bkb-text, #111827);
}
.bksesh-ev-bolt { color: #f0a020; }
.bksesh-ev-trow-price {
    margin-top: 6px;
    font-size: 16px; font-weight: 800;
    color: var(--bkb-primary, #0f40ff);
}
.bksesh-ev-trow-price s { color: var(--bkb-faint, #9ca3af); font-weight: 500; margin-left: 6px; }
.bksesh-ev-trow-price-sm { font-size: 14px; font-weight: 700; color: var(--bkb-muted, #6b7280); white-space: nowrap; }
.bksesh-ev-trow-note { margin-top: 5px; font-size: 12px; color: var(--bkb-muted, #6b7280); }

.bksesh-ev-trow-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.bksesh-ev-chip {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 20px;
    font-size: 12px; font-weight: 600; line-height: 1.4;
}
.bksesh-ev-chip-urgent { background: #fdecec; color: #c8412a; }
.bksesh-ev-chip-left   { background: #fff3e0; color: #b26a00; }

/* Row stepper "− N +" */
.bksesh-ev-qty { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bksesh-ev-qty button {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--bkb-border, #e5e7eb);
    background: var(--bkb-card, #fff);
    color: var(--bkb-text, #111827);
    font-size: 18px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .12s, background .12s;
}
.bksesh-ev-qty button:not(:disabled):hover {
    border-color: var(--bkb-primary, #0f40ff);
    background: rgba(var(--bkb-primary-rgb, 15,64,255), 0.04);
}
.bksesh-ev-qty button:disabled { opacity: .35; cursor: default; }
.bksesh-ev-q-n { min-width: 20px; text-align: center; font-size: 16px; font-weight: 800; color: var(--bkb-text, #111827); }

/* ── Two-tier selection (owner-locked 2026-09-22) ───────────────────────────
   The Standard row carries its OWN counter and stays LOCKED (muted, counter
   hidden, "Available once Early Bird is full" note shown) until the Early-Bird
   counter reaches its remaining-inventory max. syncStageQty() toggles
   .bksesh-ev-trow-locked / .bksesh-ev-trow-active — never a DOM rebuild, so
   the MutationObserver settles. Purely additive; scoped to .bksesh-ev-trow-std. */
.bksesh-ev-trow-std .bksesh-ev-trow-note { display: none; }          /* open: show counter, hide note   */
.bksesh-ev-trow-std.bksesh-ev-trow-locked { opacity: .6; }
.bksesh-ev-trow-std.bksesh-ev-trow-locked .bksesh-ev-qty { display: none; }
.bksesh-ev-trow-std.bksesh-ev-trow-locked .bksesh-ev-trow-note { display: block; }  /* locked: hide counter, show note */

/* Running selection summary under the ticket rows (e.g. "7 tickets · 5 Early Bird + 2 Standard"). */
.bksesh-ev-split {
    margin: 2px 0 10px;
    font-size: 13px; font-weight: 700;
    color: var(--bkb-text, #111827);
}

.bksesh-ev-group-hint {
    margin: 2px 0 10px; padding: 10px 12px;
    border-radius: var(--bkb-radius, 12px);
    background: rgba(var(--bkb-primary-rgb, 15,64,255), 0.06);
    color: var(--bkb-primary, #0f40ff);
    font-size: 13px; font-weight: 600;
}

/* Full-width Continue — bridge primary button language.
   Item 3: Salient theme buttons rule body[data-button-style*="slightly_rounded"]
   ... button { border-radius:4px !important } (specificity 0,1,2) plus reset
   padding/text-align made the label flush-left and corners flat ("clipped"
   look). The 3-class selector below (0,3,0) out-specifies it among
   !important author rules. */
.bksesh-br-body .bksesh-ev-stage .bksesh-ev-continue {
    border-radius: 24px !important;
    padding: 0 20px !important;
    text-align: center !important;
    margin: 6px 0 0 !important;
    box-sizing: border-box !important;
}
.bksesh-ev-continue {
    display: block; width: 100%;
    box-sizing: border-box !important;
    margin: 6px 0 0 !important;
    height: 48px;
    border: none;
    border-radius: 24px !important;
    padding: 0 20px !important;
    text-align: center !important;
    background: var(--bkb-primary, #0f40ff); color: #fff;
    font-size: 15px; font-weight: 600; letter-spacing: .02em;
    cursor: pointer; transition: filter .12s, transform .08s;
}
.bksesh-ev-continue:hover { filter: brightness(0.92); }
.bksesh-ev-continue:active { transform: scale(0.98); filter: brightness(0.88); }

/* ── Stage DATES — 2-column date/time card grid (approved mockup) ───────── */
.bksesh-ev-grid-title { font-size: 13px; font-weight: 600; color: var(--bkb-muted, #6b7280); margin: 2px 0 10px; }
.bksesh-ev-grid-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
/* Item 4: standard BookSesh card shadow (--bkb-shadow, as ticket rows) +
   blue day/date text (--bkb-primary). Date cards are <button>s, so the same
   Salient theme-button reset strips un-!important shadows — the 3-class
   selectors below (0,3,0) hard-assert them. */
.bksesh-br-body .bksesh-ev-stage .bksesh-ev-gcard {
    box-shadow: var(--bkb-shadow, 0 1px 3px rgba(0,0,0,.06)) !important;
    border-radius: var(--bkb-radius, 12px) !important;
}
.bksesh-br-body .bksesh-ev-stage .bksesh-ev-gcard:hover {
    box-shadow: var(--bkb-shadow, 0 1px 3px rgba(0,0,0,.06)), 0 0 0 3px rgba(var(--bkb-primary-rgb, 15,64,255), 0.06) !important;
}
.bksesh-br-body .bksesh-ev-stage .bksesh-ev-gcard.bksesh-ev-gcard-sel {
    box-shadow: var(--bkb-shadow, 0 1px 3px rgba(0,0,0,.06)), 0 0 0 3px rgba(var(--bkb-primary-rgb, 15,64,255), 0.08) !important;
}
.bksesh-ev-gcard {
    border: 1px solid var(--bkb-border, #e5e7eb);
    border-radius: var(--bkb-radius, 12px);
    background: var(--bkb-card, #fff);
    box-shadow: var(--bkb-shadow, 0 1px 3px rgba(0,0,0,.06));
    padding: 14px 14px; text-align: left; cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.bksesh-ev-gcard:hover {
    border-color: var(--bkb-primary, #0f40ff);
    background: rgba(var(--bkb-primary-rgb, 15,64,255), 0.02);
    box-shadow: var(--bkb-shadow, 0 1px 3px rgba(0,0,0,.06)), 0 0 0 3px rgba(var(--bkb-primary-rgb, 15,64,255), 0.06);
}
.bksesh-ev-gcard-sel {
    border: 1.5px solid var(--bkb-primary, #0f40ff);
    background: rgba(var(--bkb-primary-rgb, 15,64,255), 0.05);
    box-shadow: var(--bkb-shadow, 0 1px 3px rgba(0,0,0,.06)), 0 0 0 3px rgba(var(--bkb-primary-rgb, 15,64,255), 0.08);
}
.bksesh-ev-gcard-d { display: block; font-size: 15px; font-weight: 700; color: var(--bkb-primary, #0f40ff); line-height: 1.3; }
.bksesh-ev-gcard-t { display: block; margin-top: 4px; font-size: 13px; color: var(--bkb-muted, #6b7280); }
.bksesh-ev-grid-msg { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--bkb-muted, #6b7280); min-height: 1px; }
.bksesh-ev-backtickets {
    margin-top: 12px; border: none; background: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--bkb-muted, #6b7280); padding: 4px 0;
}
.bksesh-ev-backtickets:hover { color: var(--bkb-text, #111827); }

/* ── Information step: READ-ONLY ticket summary (owner-locked 2026-09-22) ──
   Quantity is chosen once on stage TICKETS; here we only summarise it (no
   +/- for events). The native Bring-People section stays hidden and carries
   the authoritative weight, driven programmatically by event-booking.js. */
.bksesh-evmode #booknetic_bring_someone_section { display: none !important; }
.bksesh-ev-tickets {
    margin: 10px 0 6px; padding: 16px 18px;
    border: 1px solid var(--bkb-border, #e5e7eb);
    border-radius: var(--bkb-radius, 12px);
    background: var(--bkb-card, #fff);
}
.bksesh-ev-tk-label {
    display: block !important;
    font-weight: 700; font-size: 14px; color: var(--bkb-text, #111827);
    margin: 0 0 12px !important;
    line-height: 1.3;
}
/* Read-only summary line (replaces the old editable stepper for events). */
.bksesh-ev-tickets-summary .bksesh-ev-tk-summary-line {
    font-size: 16px; font-weight: 800;
    color: var(--bkb-primary, #0f40ff);
    line-height: 1.35;
}
.bksesh-ev-tk-hint { margin-top: 8px; font-size: 12px; color: var(--bkb-muted, #6b7280); }

/* ── DATE-FIRST flow (owner GO 2026-10-02; only rendered when the server
   config says flow:'date_first'). Purely additive selectors — the
   tickets-first rules above are unchanged. ─────────────────────────────── */
.bksesh-ev-gcard-x { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.bksesh-ev-gcard-from { font-size: 12px; font-weight: 700; color: var(--bkb-text, #111827); }
.bksesh-ev-gcard-places { font-size: 12px; font-weight: 600; color: #b26a00; }
.bksesh-br-body .bksesh-ev-stage .bksesh-ev-gcard:disabled,
.bksesh-ev-gcard:disabled { opacity: .5; cursor: default; }
.bksesh-ev-gcard:disabled .bksesh-ev-gcard-places { color: var(--bkb-muted, #6b7280); }

/* "More dates" — secondary full-width button (same tokens as the back link). */
.bksesh-br-body .bksesh-ev-stage .bksesh-ev-more,
.bksesh-ev-more {
    display: block; width: 100%;
    box-sizing: border-box !important;
    margin: 12px 0 0 !important;
    height: 44px;
    padding: 0 16px !important;
    border: 1px solid var(--bkb-border, #e5e7eb) !important;
    border-radius: 22px !important;
    background: var(--bkb-card, #fff);
    color: var(--bkb-text, #111827);
    font-size: 14px; font-weight: 600;
    text-align: center !important;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.bksesh-ev-more:hover {
    border-color: var(--bkb-primary, #0f40ff) !important;
    background: rgba(var(--bkb-primary-rgb, 15,64,255), 0.04);
}

/* Tickets-for-this-date header: date sub-line + "← Change date". */
.bksesh-ev-df-when {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 12px; margin: 0 0 12px;
}
.bksesh-ev-df-date { font-size: 14px; font-weight: 700; color: var(--bkb-primary, #0f40ff); }
.bksesh-ev-df-change {
    border: none; background: none; cursor: pointer; padding: 4px 0;
    font-size: 13px; font-weight: 600; color: var(--bkb-muted, #6b7280);
}
.bksesh-ev-df-change:hover { color: var(--bkb-text, #111827); }
.bksesh-ev-df-places { display: block; }
.bksesh-ev-df-total {
    margin: -4px 0 10px;
    font-size: 15px; font-weight: 800;
    color: var(--bkb-primary, #0f40ff);
}
.bksesh-ev-df-total:empty { display: none; }

/* ── DATE-FIRST footer (back-fix, owner issue 1, 2026-10-02). DF-only
   classes set by event-booking.js mountDate(); never present otherwise.
   DATES view: the date cards are the sole advance control → hide the
   bridge Next; hide Back too when the native goBack() has no step to
   reach. TICKETS view: Back is always shown — it returns to the dates. ── */
.bksesh-ev-df-dates .bksesh-br-btn-next { display: none !important; }
.bksesh-ev-df-noback .bksesh-br-btn-back { display: none !important; }
.bksesh-ev-df-tickets .bksesh-br-btn-back.bksesh-br-hidden { display: flex !important; }

/* ── D-89 gift-card ticket row (only rendered when the server sends CFG.gc) ── */
.bksesh-ev-gcrow { border-style: dashed; }
.bksesh-ev-gcrow-on { border-style: solid; }
.bksesh-ev-gcrow .bksesh-ev-trow-top { flex-wrap: wrap; }
.bksesh-ev-gcicon { margin-right: 2px; }
.bksesh-ev-gc-std { font-size: 12px; font-weight: 600; color: var(--bkb-muted, #6b7280); margin-left: 6px; }
.bksesh-ev-gc-open, .bksesh-ev-gc-remove {
    margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--bkb-primary, #0f40ff); text-decoration: underline;
}
.bksesh-ev-gc-remove { margin-top: 0; font-size: 12px; }
.bksesh-ev-gc-box { display: flex; gap: 8px; margin-top: 8px; }
.bksesh-ev-gc-input {
    flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box;
    border: 1px solid var(--bkb-border, #d1d5db); border-radius: 10px; padding: 0 12px;
    font-size: 15px; letter-spacing: .04em; text-transform: uppercase; background: #fff;
}
.bksesh-ev-gc-apply {
    flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--bkb-primary, #0f40ff); color: #fff; font-size: 14px; font-weight: 600;
}
.bksesh-ev-gc-apply[disabled] { opacity: .6; cursor: default; }
.bksesh-ev-gc-msg:empty { display: none; }
.bksesh-ev-gc-msg { margin-top: 6px; font-size: 12px; color: #b42318; }
.bksesh-ev-gc-paynote { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: #ecfdf3; color: #067647; }
.bksesh-ev-gc-paynote-err { background: #fef3f2; color: #b42318; }