/* ═══════════════════════════════════════════════════════════════════
   BASKET REDESIGN — CSS
   Evessio Platform Overlay

   Global theme include. Inert by default: every rule is scoped under
   #event-members-area.bkr-active, a class JS adds to the members-area
   root ONLY when CHECKOUT_CONFIG.enabled is true AND that element
   exists. With the redesign off, or on any page without
   #event-members-area, nothing in this file applies.

   Dark theme adds #event-members-area.bkr-dark for additive overrides.
   All colours use var(--bkr-*) tokens set by JS from CONFIG (the tokens
   are defined on #event-members-area.bkr-active, not :root/body).

   Sections:
   1. CSS Custom Properties (defaults — JS overrides on init)
   2. Base / Typography
   3. Buttons
   4. Form Inputs
   5. Cards & Panels
   6. Wizard / Step Indicator
   7. Sidebar Navigation
   8. Transaction Tables (DataTables)
   9. Saved Items
   10. Form Grouping (Accordion / Wizard / Grouped)
   11. Form Designer Mode
   12. Animations
   13. Responsive
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   0. FOUC PREVENTION  (JS-driven — scoped to the members area only)
   This stylesheet is a global theme include and MUST NOT hide anything
   by default: when the redesign is disabled (or #event-members-area is
   absent) nothing here applies, so the host page renders untouched.

   When the redesign IS enabled, JS adds .bkr-arming to
   #event-members-area synchronously on DOM-ready (which fades it to
   opacity:0), runs all transforms, then swaps to .bkr-ready to fade it
   back in. A JS safety timeout always forces .bkr-ready after 3 s so
   the area is never left blank even if init() throws.

   Only the members-area subtree is ever hidden — never <body>, never
   the rest of the host site.
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-arming {
  opacity: 0;
}

#event-members-area.bkr-active {
  transition: opacity 150ms ease;
}

#event-members-area.bkr-ready {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   Fallback values only — JS reads actual colours from Evessio's
   event theme (.color-primary, .color-secondary) at runtime.
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active {
  --bkr-primary: #45ADA8;
  --bkr-secondary: #547980;
  --bkr-success: #16A34A;
  --bkr-error: #DC2626;
  --bkr-bg: #F9FAFB;
  --bkr-surface: #FFFFFF;
  --bkr-text: #1F2937;
  --bkr-text-muted: #6B7280;
  --bkr-border: #E5E7EB;

  /* Radius */
  --bkr-radius-sm: 4px;
  --bkr-radius-md: 6px;
  --bkr-radius-lg: 8px;
  --bkr-radius-pill: 12px;

  /* Shadows — light theme */
  --bkr-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --bkr-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --bkr-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --bkr-shadow-hover: 0 8px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -6px rgba(0,0,0,0.06);

  /* RGB breakouts for rgba() usage */
  --bkr-primary-rgb: 69, 173, 168;
  --bkr-success-rgb: 22, 163, 74;
  --bkr-error-rgb: 220, 38, 38;

  /* Transitions */
  --bkr-transition-fast: 100ms ease;
  --bkr-transition-base: 200ms ease;
  --bkr-transition-slow: 300ms ease-out;
}


/* ─────────────────────────────────────────────────────────────────
   1b. SCOPED PLATFORM RESET (COMPREHENSIVE)
   Neutralises ALL leftover Evessio / Bootstrap / Tranquility theme
   styles that clash with our redesign. Every visual element on the
   page must pass through this reset before our component styles
   take effect.
   ───────────────────────────────────────────────────────────────── */

/* ── GLOBAL LAYOUT CONTAINERS ──
   Scoped to the members-area root and its descendants ONLY. The former
   #main-content / #main-content > section / #main-content .row / page-body
   selectors were removed: those elements are ANCESTORS of
   #event-members-area (see page-basket.html), so styling them is exactly
   the off-root host-site leakage this refactor eliminates. The root
   itself is covered by the bare #event-members-area.bkr-active selector. */
#event-members-area.bkr-active,
#event-members-area.bkr-active #personal-space-view,
#event-members-area.bkr-active #basket-root,
#event-members-area.bkr-active :is(.private, .private-space, .personal-space-content,
                    .personal-space-col-container, .col-content,
                    .product-type-table, .product-type-body, .product-container,
                    .tab-content, .checkout-container, .step-content,
                    .basket-content) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Step content areas with .bkr-card get the surface background.
   The #w-step-*-content IDs are no longer forced transparent here —
   their background is controlled entirely by whether .bkr-card is present. */
#event-members-area.bkr-active .w-content.bkr-card {
  background-color: var(--bkr-surface) !important;
  background-image: none !important;
}

/* ── CHECKOUT SUMMARY PAGE (step 4) ─────────────────────────────
   The outer card is <div class="row bkr-card">. Bootstrap's .row
   applies margin: 0 -15px which cancels out the card's own 16px
   padding, leaving the inner content touching the card edges.
   We compensate by padding the direct content columns instead.  */

/* Summary heading column */
#event-members-area.bkr-active #w-step-3-header {
  padding: 20px 20px 8px !important;
}

/* Main content column — table, voucher, payment method */
#event-members-area.bkr-active #w-step-3-content {
  padding: 0 20px 20px !important;
}

/* Right aside column — Personal Details / Invoice Details cards */
#event-members-area.bkr-active #w-right-3-aside {
  padding: 0 20px 20px !important;
}

/* Back / Complete button row
   .w-buttons sits inside a Bootstrap .row (margin: 0 -15px), so it bleeds
   15px beyond the card on each side. We compensate with 35px (20 + 15)
   of horizontal padding so the buttons sit 20px from the visible card edge. */
#event-members-area.bkr-active .w-buttons {
  padding-left: 35px !important;
  padding-right: 35px !important;
  padding-bottom: 20px !important;
}
#event-members-area.bkr-active .tab-content {
  border: none !important;
  padding: 0 !important;
}

/* ── BOOTSTRAP PANEL / WELL / JUMBOTRON ──
   All members are simple-class selectors (specificity 0,0,1,0) so :is()
   compression preserves cascade. Baseline 2021. */
#event-members-area.bkr-active :is(.panel, .panel-default, .panel-heading, .panel-body,
                    .panel-footer, .well, .jumbotron, .page-header, .thumbnail) {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#event-members-area.bkr-active .panel-collapse,
#event-members-area.bkr-active .panel-collapse.collapse.in,
#event-members-area.bkr-active .panel-collapse.collapsing {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── BOOTSTRAP NAV (tabs, pills, stacked) ── */
/* .nav-tabs / .nav-pills don't exist in .horizontal-menu so these are safe globally */
#event-members-area.bkr-active .nav-tabs,
#event-members-area.bkr-active .nav-pills,
#event-members-area.bkr-active .nav-tabs > li > a,
#event-members-area.bkr-active .nav-tabs > li.active > a,
#event-members-area.bkr-active .nav-tabs > li.active > a:hover,
#event-members-area.bkr-active .nav-tabs > li.active > a:focus {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* .nav > li > a is scoped to #basket-root to avoid stripping styles from
   the .horizontal-menu which also uses .nav.navbar-nav > li > a */
#event-members-area.bkr-active #basket-root .nav > li > a,
#event-members-area.bkr-active #menu-counters .nav > li > a {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── HEADER / NAVIGATION BAR ──
   The former `#header .header-cta` rule was removed: #header is a sibling
   of #main-content, OUTSIDE #event-members-area, so the redesign no
   longer touches the site header at all. */

/* Navbar toggle for mobile — scoped to the private-area mobile sidebar only,
   not the .horizontal-menu which also contains a .navbar-toggle */
#event-members-area.bkr-active .personal-space-menu-mobile .navbar-toggle {
  border-color: var(--bkr-border) !important;
}

#event-members-area.bkr-active .personal-space-menu-mobile .navbar-toggle .icon-bar {
  background-color: var(--bkr-text-muted) !important;
}

/* ── BREADCRUMB ── */
#event-members-area.bkr-active .breadcrumb {
  background-color: transparent !important;
  padding: 8px 0 !important;
  margin-bottom: 12px !important;
  border: none !important;
  font-size: 12px !important;
}

#event-members-area.bkr-active .breadcrumb > li,
#event-members-area.bkr-active .breadcrumb > .breadcrumb-item {
  color: var(--bkr-text-muted) !important;
  font-size: 12px !important;
}

#event-members-area.bkr-active .breadcrumb > .active {
  color: var(--bkr-text-muted) !important;
}

#event-members-area.bkr-active .breadcrumb > li + li::before {
  color: var(--bkr-text-muted) !important;
}

/* ── WIZARD / STEP INDICATOR ── */
#event-members-area.bkr-active .basket-wizard-wrapper {
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#event-members-area.bkr-active .basket-wizard {
  list-style: none !important;
  display: flex !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  gap: 0 !important;
  overflow: visible !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Evessio reset for wizard items — kill float/arrow layout only */
#event-members-area.bkr-active .basket-wizard-item {
  float: none !important;
  height: auto !important;
  line-height: normal !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Kill Evessio arrow pseudo-elements on wizard step spans */
#event-members-area.bkr-active .basket-wizard-item > span::before,
#event-members-area.bkr-active .basket-wizard-item > span::after,
#event-members-area.bkr-active .basket-wizard li > span:before,
#event-members-area.bkr-active .basket-wizard li > span:after,
#event-members-area.bkr-active .basket-wizard li > span.basket-wizard-item-text:after {
  display: none !important;
  content: none !important;
  border: none !important;
}
/* ::before on .basket-wizard-item-text is reserved for our ripple animation —
   only kill it on non-selected items */
#event-members-area.bkr-active .basket-wizard li:not(.selected) > span.basket-wizard-item-text:before {
  display: none !important;
  content: none !important;
  border: none !important;
}

#event-members-area.bkr-active .basket-wizard-item span,
#event-members-area.bkr-active .basket-wizard-item a {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#event-members-area.bkr-active .basket-wizard-item-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bkr-text-muted) !important;
  line-height: normal !important;
  padding-left: 0 !important;
}

#event-members-area.bkr-active .basket-wizard-item.selected .basket-wizard-item-text,
#event-members-area.bkr-active .basket-wizard-item.selected .basket-wizard-item-text *,
#event-members-area.bkr-active .basket-wizard-item.selected .basket-wizard-item-text .wizard-step-word {
  color: #fff !important;
}

#event-members-area.bkr-active .basket-wizard-item-help-text {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  opacity: 0.7 !important;
}

#event-members-area.bkr-active .basket-wizard-item.selected .basket-wizard-item-help-text {
  opacity: 0.9 !important;
}

#event-members-area.bkr-active .wizard-step-word {
  font-weight: 700 !important;
  display: inline !important;
}

/* ── WIZARD ERROR BAR ── */
#event-members-area.bkr-active .basket-wizard-error {
  background: rgba(var(--bkr-error-rgb), 0.06) !important;
  border: 1px solid rgba(var(--bkr-error-rgb), 0.2) !important;
  border-radius: var(--bkr-radius-md) !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
}

#event-members-area.bkr-active .basket-error-icon-wrapper {
  padding: 0 !important;
}

#event-members-area.bkr-active .basket-error-icon {
  color: var(--bkr-error) !important;
  font-size: 20px !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  background: rgba(var(--bkr-error-rgb), 0.1) !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

#event-members-area.bkr-active .basket-wizard-error-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bkr-error) !important;
  line-height: 36px !important;
}

/* ── SIDEBAR / CONTENT FLOAT LAYOUT ── */
#event-members-area.bkr-active .personal-space-menu,
#event-members-area.bkr-active #menu-counters.personal-space-menu {
  float: left !important;
  width: 300px !important;
}
/* display:flow-root creates a block formatting context (needed to contain
   the floated .personal-space-menu) without hiding overflow — so custom
   dropdowns inside the content area are not clipped at the bottom. */
#event-members-area.bkr-active .personal-space-content {
  display: flow-root !important;
  overflow: visible !important;
}

/* ── SIDEBAR MENU ── */
/* Container is transparent — visual grouping is handled per section below */
#event-members-area.bkr-active .personal-space-menu,
#event-members-area.bkr-active #menu-counters {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Section separator borders are defined further down, after the li reset,
   using li.menu-section to match its specificity. See "Section separator line". */

#event-members-area.bkr-active #menu-counters .nav-pills > li,
#event-members-area.bkr-active .personal-space-menu .nav-pills > li,
#event-members-area.bkr-active .personal-space-menu li {
  border: none !important;
  border-radius: 0 !important;
  text-transform: none !important;
  margin-bottom: 0 !important;
}

#event-members-area.bkr-active #menu-counters .nav-pills > li > a,
#event-members-area.bkr-active .personal-space-menu .nav-pills > li > a {
  color: var(--bkr-text) !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  transition: background-color 0.15s, color 0.15s !important;
}

#event-members-area.bkr-active #menu-counters .nav-pills > li > a:hover,
#event-members-area.bkr-active .personal-space-menu .nav-pills > li > a:hover {
  background-color: var(--bkr-bg) !important;
  color: var(--bkr-primary) !important;
}

#event-members-area.bkr-active #menu-counters .menu-section > a {
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: var(--bkr-text-muted) !important;
  padding: 10px 16px 6px !important;
}

#event-members-area.bkr-active #menu-counters .menu-section > a:hover {
  background-color: transparent !important;
  color: var(--bkr-primary) !important;
}

#event-members-area.bkr-active #menu-counters .menu-section > a > .fa {
  color: var(--bkr-primary) !important;
  font-size: 12px !important;
}

#event-members-area.bkr-active #menu-counters .counter {
  font-size: 11px !important;
  color: var(--bkr-text-muted) !important;
  font-weight: 400 !important;
}

/* No border override here: the platform gives this block a full red border
   (basket.css .logged-as-admin). A grey border-top used to replace one side
   of it; the side margin keeps the left edge off the flush panel border,
   where it was being clipped. */
#event-members-area.bkr-active #menu-counters .logged-as-admin {
  font-size: 11px !important;
  color: var(--bkr-text-muted) !important;
  padding: 8px 16px !important;
  margin: 8px 8px 0 !important;
}

#event-members-area.bkr-active #menu-counters .simple-anchor {
  font-size: 11px !important;
  padding: 2px 0 !important;
}

#event-members-area.bkr-active #menu-counters .simple-anchor a {
  color: var(--bkr-text-muted) !important;
  font-size: 11px !important;
}

/* Mobile sidebar nav */
#event-members-area.bkr-active .personal-space-menu-mobile {
  background-color: var(--bkr-surface) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-md) !important;
  margin-bottom: 12px !important;
}

#event-members-area.bkr-active .personal-space-menu-mobile .navbar-title {
  font-weight: 600 !important;
  color: var(--bkr-text) !important;
}

/* ── ADD TO BASKET SECTION ── */
#event-members-area.bkr-active #add-to-basket-dropdown-select {
  background-color: transparent !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#event-members-area.bkr-active .add-another-basket-text {
  padding: 0 !important;
}

#event-members-area.bkr-active .add-another-basket-text h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--bkr-text) !important;
  margin: 0 0 12px 0 !important;
}

#event-members-area.bkr-active .add-another-basket-text h3 .fa {
  color: var(--bkr-primary) !important;
}

#event-members-area.bkr-active #add-to-basket-table {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 12px 0 !important;
  width: 100% !important;
}

#event-members-area.bkr-active #add-to-basket-table .col {
  display: block !important;
}

#event-members-area.bkr-active #add-to-basket-table .select-product {
  flex: 1 !important;
}

#event-members-area.bkr-active #add-to-basket-table .select-product-add {
  flex-shrink: 0 !important;
  width: auto !important;
}

#event-members-area.bkr-active #add-to-basket-table .select-product-add table {
  border: none !important;
  background: transparent !important;
}

#event-members-area.bkr-active #add-to-basket-table .select-product-add td {
  padding: 0 4px !important;
  border: none !important;
  background: transparent !important;
}

#event-members-area.bkr-active #add-to-basket-count-container {
  width: auto !important;
  min-width: auto !important;
}

#event-members-area.bkr-active .dt-table-search {
  height: 42px !important;
}

#event-members-area.bkr-active #select-new-product,
#event-members-area.bkr-active #select-new-product-count {
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-sm) !important;
  color: var(--bkr-text) !important;
  height: 42px !important;
  padding: 8px 12px !important;
  background-color: var(--bkr-surface) !important;
  transition: border-color 0.15s !important;
}

#event-members-area.bkr-active #select-new-product:focus,
#event-members-area.bkr-active #select-new-product-count:focus {
  border-color: var(--bkr-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--bkr-primary-rgb), 0.12) !important;
  outline: none !important;
}

#event-members-area.bkr-active .btn-checkout-all-in-basket,
#event-members-area.bkr-active .add-product-to-basket {
  min-height: auto !important;
  text-transform: none !important;
  border-radius: var(--bkr-radius-sm) !important;
  border: 1px solid var(--bkr-success) !important;
  background-image: none !important;
}

#event-members-area.bkr-active #add-product-to-basket-btn {
  background-color: var(--bkr-success) !important;
  border-color: var(--bkr-success) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  height: 42px !important;
  border-radius: var(--bkr-radius-sm) !important;
  transition: all 0.15s !important;
}

#event-members-area.bkr-active #add-product-to-basket-btn:hover {
  opacity: 0.9 !important;
  box-shadow: 0 2px 8px rgba(var(--bkr-success-rgb), 0.3) !important;
}

/* Product description below dropdown */
#event-members-area.bkr-active .product-description#product-desc {
  background: var(--bkr-bg) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-sm) !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  color: var(--bkr-text-muted) !important;
}

/* ── BASKET HEADER (restructured by JS) ── */
#event-members-area.bkr-active .bkr-basket-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 0 !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--bkr-border) !important;
}

#event-members-area.bkr-active .bkr-basket-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#event-members-area.bkr-active .bkr-basket-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--bkr-text) !important;
  margin: 0 !important;
}

#event-members-area.bkr-active .bkr-basket-title .fa {
  color: var(--bkr-primary) !important;
  margin-right: 4px !important;
}

#event-members-area.bkr-active .bkr-basket-count {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bkr-text-muted) !important;
  background: var(--bkr-bg) !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  border: 1px solid var(--bkr-border) !important;
}

/* ── CLEAR BASKET (inside basket summary header) ── */
#event-members-area.bkr-active .bkr-clear-basket-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

#event-members-area.bkr-active .bkr-clear-basket-summary #clear-basket-btn {
  background-color: transparent !important;
  border: 1px solid var(--bkr-error) !important;
  color: var(--bkr-error) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: var(--bkr-radius-sm) !important;
  transition: all 0.15s !important;
  float: none !important;
}

#event-members-area.bkr-active .bkr-clear-basket-summary #clear-basket-btn:hover {
  background-color: rgba(var(--bkr-error-rgb), 0.06) !important;
}


/* Fallback: hide originals if JS hasn't restructured yet */
#event-members-area.bkr-active .top-basket-text,
#event-members-area.bkr-active .top-basket-counter {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 0 !important;
}

#event-members-area.bkr-active .clear-basket {
  margin-bottom: 8px !important;
  padding: 0 !important;
}

/* ── BOOTSTRAP TABLE RESET ── */
#event-members-area.bkr-active .table {
  border: none !important;
  box-shadow: none !important;
  border-collapse: collapse !important;
}

#event-members-area.bkr-active .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: transparent !important;
}

#event-members-area.bkr-active .table-hover > tbody > tr:hover {
  background-color: var(--bkr-bg) !important;
}

/* ── HR RESET ── */
#event-members-area.bkr-active hr {
  border-top: 1px solid var(--bkr-border) !important;
  margin: 12px 0 !important;
}

/* ── ANCHOR COLOURS ── */
/* Scoped to #basket-root to avoid recolouring .horizontal-menu nav links */
#event-members-area.bkr-active #basket-root a {
  color: var(--bkr-primary);
}

#event-members-area.bkr-active #basket-root a:hover,
#event-members-area.bkr-active #basket-root a:focus {
  color: var(--bkr-primary);
  text-decoration: none;
}

/* ── BOOTSTRAP ALERT ── */
#event-members-area.bkr-active .alert {
  border-radius: var(--bkr-radius-sm) !important;
}

/* ── BOOTSTRAP DROPDOWN MENUS ── */
/* Scoped to #basket-root — the .horizontal-menu has its own .dropdown-menu
   (.level-2) which should not be restyled by us */
#event-members-area.bkr-active #basket-root .dropdown-menu {
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-sm) !important;
  box-shadow: var(--bkr-shadow-md) !important;
  background-color: var(--bkr-surface) !important;
}

#event-members-area.bkr-active #basket-root .dropdown-menu > li > a {
  color: var(--bkr-text) !important;
  padding: 6px 14px !important;
}

#event-members-area.bkr-active #basket-root .dropdown-menu > li > a:hover {
  background-color: var(--bkr-bg) !important;
  color: var(--bkr-primary) !important;
}

/* ── POPOVER / TOOLTIP ── */
#event-members-area.bkr-active .popover {
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-sm) !important;
  box-shadow: var(--bkr-shadow-lg) !important;
  background-color: var(--bkr-surface) !important;
}

#event-members-area.bkr-active .popover-title {
  background-color: var(--bkr-bg) !important;
  border-bottom: 1px solid var(--bkr-border) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bkr-text) !important;
}

#event-members-area.bkr-active .popover-content {
  font-size: 13px !important;
  color: var(--bkr-text) !important;
}

/* ── PROGRESS BAR RESET ── */
#event-members-area.bkr-active .progress {
  background-color: var(--bkr-border) !important;
  box-shadow: none !important;
  border-radius: 3px !important;
  height: 6px !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

#event-members-area.bkr-active .progress-bar {
  box-shadow: none !important;
}

/* ── GLOBAL BUTTON NORMALISATION ── */
/* Scoped to #basket-root to avoid touching nav buttons in .horizontal-menu */
#event-members-area.bkr-active #basket-root .btn {
  border-radius: var(--bkr-radius-sm) !important;
  transition: all 0.15s ease !important;
}

#event-members-area.bkr-active .btn-default {
  background-color: var(--bkr-surface) !important;
  border-color: var(--bkr-border) !important;
  color: var(--bkr-text) !important;
}

#event-members-area.bkr-active .btn-default:hover {
  background-color: var(--bkr-bg) !important;
  border-color: var(--bkr-border) !important;
}

/* Higher specificity to beat .personal-space-content .btn-primary !important */
#event-members-area.bkr-active .personal-space-content .btn-primary,
#event-members-area.bkr-active .btn-primary {
  background-color: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
  color: #fff !important;
}

#event-members-area.bkr-active .personal-space-content .btn-primary:hover,
#event-members-area.bkr-active .btn-primary:hover {
  opacity: 0.9 !important;
}

#event-members-area.bkr-active .personal-space-content .btn-success,
#event-members-area.bkr-active .btn-success {
  background-color: var(--bkr-success) !important;
  border-color: var(--bkr-success) !important;
  color: #fff !important;
}

#event-members-area.bkr-active .personal-space-content .btn-success:hover,
#event-members-area.bkr-active .btn-success:hover {
  opacity: 0.9 !important;
}

#event-members-area.bkr-active .personal-space-content .btn-warning,
#event-members-area.bkr-active .btn-warning {
  background-color: transparent !important;
  border: 1px solid var(--bkr-border) !important;
  color: var(--bkr-text-muted) !important;
}

#event-members-area.bkr-active .personal-space-content .btn-warning:hover,
#event-members-area.bkr-active .btn-warning:hover {
  border-color: var(--bkr-error) !important;
  color: var(--bkr-error) !important;
  background-color: rgba(var(--bkr-error-rgb), 0.04) !important;
}

#event-members-area.bkr-active .btn-danger {
  background-color: transparent !important;
  border: 1px solid var(--bkr-error) !important;
  color: var(--bkr-error) !important;
}

#event-members-area.bkr-active .btn-danger:hover {
  background-color: rgba(var(--bkr-error-rgb), 0.06) !important;
}

/* ── CHECKOUT CONTINUE BUTTONS ── */
#event-members-area.bkr-active #basket-continue-buttons {
  background-color: var(--bkr-surface) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-md) !important;
  padding: 20px !important;
  margin: 0 24px !important;
  box-shadow: var(--bkr-shadow-sm) !important;
}

#event-members-area.bkr-active #basket-continue-buttons .admin-controls {
  background: var(--bkr-bg) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-sm) !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
}

#event-members-area.bkr-active #basket-continue-buttons .admin-title {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--bkr-primary) !important;
  margin-bottom: 8px !important;
}

#event-members-area.bkr-active #basket-continue-buttons label {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--bkr-text) !important;
  cursor: pointer !important;
}

/* Terms and conditions */
#event-members-area.bkr-active .w-terms {
  margin: 14px 0 !important;
}

#event-members-area.bkr-active .w-terms label,
#event-members-area.bkr-active .tnc-text {
  font-size: 13px !important;
  color: var(--bkr-text) !important;
}

#event-members-area.bkr-active .basket-tnc-link {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Show missing fields button */
#event-members-area.bkr-active #show-missing-fields {
  background-color: var(--bkr-surface) !important;
  border: 1px solid var(--bkr-border) !important;
  color: var(--bkr-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  margin-right: 8px !important;
}

#event-members-area.bkr-active #show-missing-fields:hover {
  background-color: var(--bkr-bg) !important;
}

/* Continue / Checkout button */
#event-members-area.bkr-active #checkout-all {
  background-color: var(--bkr-success) !important;
  border-color: var(--bkr-success) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  border-radius: var(--bkr-radius-sm) !important;
}

#event-members-area.bkr-active #checkout-all:hover:not(:disabled) {
  opacity: 0.9 !important;
  box-shadow: 0 2px 8px rgba(var(--bkr-success-rgb), 0.3) !important;
}

#event-members-area.bkr-active #checkout-all:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── MODALS ── */
#event-members-area.bkr-active .modal-content {
  background-color: var(--bkr-surface) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-lg) !important;
  box-shadow: var(--bkr-shadow-lg) !important;
}

#event-members-area.bkr-active .modal-header {
  border-bottom: 1px solid var(--bkr-border) !important;
  padding: 16px 20px !important;
  background-color: transparent !important;
}

#event-members-area.bkr-active .modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--bkr-text) !important;
}

#event-members-area.bkr-active .modal-body {
  padding: 20px !important;
  color: var(--bkr-text) !important;
  background-color: transparent !important;
}

#event-members-area.bkr-active .modal-footer {
  border-top: 1px solid var(--bkr-border) !important;
  padding: 14px 20px !important;
  background-color: transparent !important;
}

#event-members-area.bkr-active .modal-header .close,
#event-members-area.bkr-active .modal-header button.close {
  opacity: 0.55 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-shadow: none !important;
  background: transparent !important;
  border: none !important;
  float: right !important;
}

/* Evessio's own CSS sets .modal-header button.close > span { color: white }
   which makes the × invisible on the light modal background.  Override it. */
#event-members-area.bkr-active .modal-header .close > span,
#event-members-area.bkr-active .modal-header button.close > span {
  color: var(--bkr-text) !important;
}

#event-members-area.bkr-active .modal-header .close:hover,
#event-members-area.bkr-active .modal-header button.close:hover {
  opacity: 1 !important;
}

#event-members-area.bkr-active .modal-header .close:hover > span,
#event-members-area.bkr-active .modal-header button.close:hover > span {
  color: var(--bkr-text) !important;
}

/* ── GUEST / BOOKING ACCORDION (table-booking style) ── */

/* Table: separate border model, no extra spacing (handled by div margins below) */
#event-members-area.bkr-active .product .forms table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Guest td: strip all table-level styling — visual chrome lives on the inner div */
#event-members-area.bkr-active tr.guest td.accordion-toggle {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
}

/* ── .bkr-guest-card — div injected inside each td by JS ──
   Styling a plain <div> is immune to Bootstrap / table-collapse overrides.
   margin-top creates the visible gap between collapsed guest cards.        */
#event-members-area.bkr-active .bkr-guest-card {
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md);
  padding: 12px 16px;
  margin-top: 8px;
  background-color: var(--bkr-surface);
  transition: border-color 0.15s, background-color 0.15s;
}

#event-members-area.bkr-active .bkr-guest-card:hover {
  border-color: var(--bkr-primary);
  background-color: rgba(var(--bkr-primary-rgb), 0.03);
}

/* Open state: flatten bottom of card header to connect with booking content */
#event-members-area.bkr-active tr.guest.bkr-guest-open .bkr-guest-card {
  border-radius: var(--bkr-radius-md) var(--bkr-radius-md) 0 0;
  border-bottom-color: var(--bkr-surface); /* hide seam between header and content */
}

/* Guest text styles (selectors now work regardless of td vs div parent) */
#event-members-area.bkr-active tr.guest td.accordion-toggle a {
  font-weight: 600 !important;
  font-size: 14px !important;
}

#event-members-area.bkr-active tr.guest .product-progress {
  font-weight: 600 !important;
  color: var(--bkr-primary) !important;
}

#event-members-area.bkr-active tr.guest .count-fields {
  color: var(--bkr-text-muted) !important;
}

/* Booking content row — collapsed: invisible, no layout contribution */
#event-members-area.bkr-active tr.booking td {
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Booking content row — expanded: complete the card with left/right/bottom border */
#event-members-area.bkr-active tr.guest.bkr-guest-open + tr.booking td {
  background-color: var(--bkr-surface) !important;
  border: 1px solid var(--bkr-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--bkr-radius-md) var(--bkr-radius-md) !important;
  padding: 4px 16px 16px !important;
}

/* ── DOMAIN FIELD HELP ── */
#event-members-area.bkr-active .domain-field-help {
  background-color: var(--bkr-bg) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: 0 0 var(--bkr-radius-sm) var(--bkr-radius-sm) !important;
  color: var(--bkr-text-muted) !important;
  font-size: 12px !important;
  padding: 12px !important;
}

/* ── FOOTER ── */
#event-members-area.bkr-active #footer {
  background-color: var(--bkr-surface) !important;
  border-top: 1px solid var(--bkr-border) !important;
  padding: 16px 0 !important;
  margin-top: 24px !important;
}

#event-members-area.bkr-active #footer .content-body {
  font-size: 12px !important;
  color: var(--bkr-text-muted) !important;
}

/* ── LIGHTBOX OVERLAY ── */
#event-members-area.bkr-active .lightboxOverlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ── EVESSIO-SPECIFIC COLOUR CLASSES ── */
/* .color-primary and .color-primary-bg are left untouched —
   Evessio's event theme dictates these colours natively.
   Our JS reads from them to set --bkr-primary at runtime. */

#event-members-area.bkr-active .body-bg-bg {
  background-color: transparent !important;
}

#event-members-area.bkr-active .color-none-hover-bg:hover {
  background-color: transparent !important;
}

/* ── CATCH-ALL: Evessio theme border colour overrides ── */
/* Evessio uses #838895 as its grey. Replace everywhere. */
#event-members-area.bkr-active .product {
  border-color: var(--bkr-border) !important;
}

#event-members-area.bkr-active .product-row {
  padding: 0 !important;
}

/* Evessio .product-description height:0 hides the description */
#event-members-area.bkr-active .product-description {
  height: auto !important;
}

/* Kill any remaining inline-style grey backgrounds on page wrappers */
#event-members-area.bkr-active .basket-wizard-wrapper.in-basket-wizard {
  background: transparent !important;
  border: none !important;
}

/* Evessio private-space layout — preserve float layout, just clean colours */
#event-members-area.bkr-active .personal-space-content {
  background-color: var(--bkr-bg) !important;
  background-image: none !important;
  padding: 20px !important;
}


/* ─────────────────────────────────────────────────────────────────
   2. BASE / TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active {
  color: var(--bkr-text);
  background-color: var(--bkr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#event-members-area.bkr-active .personal-space-content {
  background-color: var(--bkr-bg);
}

#event-members-area.bkr-active h1,
#event-members-area.bkr-active h2,
#event-members-area.bkr-active h3,
#event-members-area.bkr-active h4,
#event-members-area.bkr-active h5,
#event-members-area.bkr-active h6 {
  color: var(--bkr-text);
}

#event-members-area.bkr-active h1 { font-size: 24px; font-weight: 700; }
#event-members-area.bkr-active h2 { font-size: 18px; font-weight: 600; }
#event-members-area.bkr-active h3 { font-size: 16px; font-weight: 600; }

#event-members-area.bkr-active p,
#event-members-area.bkr-active .text-muted {
  color: var(--bkr-text-muted) !important;
}


/* ─────────────────────────────────────────────────────────────────
   3. BUTTONS
   ───────────────────────────────────────────────────────────────── */

/* Primary buttons */
#event-members-area.bkr-active .btn-primary {
  background-color: var(--bkr-primary);
  border-color: var(--bkr-primary);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--bkr-radius-sm);
  padding: 10px 20px;
  min-height: 40px;
  transition: background-color var(--bkr-transition-base),
              box-shadow var(--bkr-transition-base),
              transform var(--bkr-transition-fast);
  box-shadow: none;
  outline: none;
}

#event-members-area.bkr-active .btn-primary:hover,
#event-members-area.bkr-active .btn-primary:focus {
  background-color: var(--bkr-primary);
  border-color: var(--bkr-primary);
  filter: brightness(0.9);
  box-shadow: var(--bkr-shadow-sm);
  color: #FFFFFF;
}

#event-members-area.bkr-active .btn-primary:active {
  background-color: var(--bkr-primary);
  border-color: var(--bkr-primary);
  filter: brightness(0.85);
  box-shadow: none;
  transform: scale(0.98);
}

#event-members-area.bkr-active .btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.3);
}

#event-members-area.bkr-active .btn-primary:disabled,
#event-members-area.bkr-active .btn-primary.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* Success buttons */
#event-members-area.bkr-active .btn-success {
  background-color: var(--bkr-success);
  border-color: var(--bkr-success);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--bkr-radius-sm);
  transition: background-color var(--bkr-transition-base),
              box-shadow var(--bkr-transition-base),
              transform var(--bkr-transition-fast);
}

#event-members-area.bkr-active .btn-success:hover,
#event-members-area.bkr-active .btn-success:focus {
  background-color: var(--bkr-success);
  border-color: var(--bkr-success);
  filter: brightness(0.9);
  color: #FFFFFF;
}

/* Warning / Danger buttons */
#event-members-area.bkr-active .btn-warning,
#event-members-area.bkr-active .btn-danger {
  font-weight: 600;
  border-radius: var(--bkr-radius-sm);
  transition: background-color var(--bkr-transition-base),
              box-shadow var(--bkr-transition-base),
              transform var(--bkr-transition-fast);
}

#event-members-area.bkr-active .delete-transaction {
  background-color: var(--bkr-error);
  border-color: var(--bkr-error);
  color: #FFFFFF;
  border-radius: var(--bkr-radius-sm);
}

#event-members-area.bkr-active .delete-transaction:hover {
  filter: brightness(0.9);
}

/* Default / secondary buttons */
#event-members-area.bkr-active .btn-default {
  background-color: transparent;
  border: 1px solid var(--bkr-primary);
  color: var(--bkr-primary);
  font-weight: 600;
  border-radius: var(--bkr-radius-sm);
  transition: background-color var(--bkr-transition-base),
              color var(--bkr-transition-base);
}

#event-members-area.bkr-active .btn-default:hover,
#event-members-area.bkr-active .btn-default:focus {
  background-color: var(--bkr-primary);
  border-color: var(--bkr-primary);
  color: #FFFFFF;
}

/* Small buttons */
#event-members-area.bkr-active .btn-sm {
  padding: 8px 16px;
  font-size: 12px;
  min-height: 32px;
}


/* ─────────────────────────────────────────────────────────────────
   4. FORM INPUTS
   ───────────────────────────────────────────────────────────────── */

/* All form rules are scoped to #basket-root so they never leak to the login
   form, header search, or any other form that lives outside the basket. */
#event-members-area.bkr-active #basket-root .form-control {
  height: 42px;
  padding: 8px 12px;
  color: var(--bkr-text);
  background-color: var(--bkr-surface);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-sm);
  box-shadow: none;
  transition: border-color var(--bkr-transition-base),
              box-shadow var(--bkr-transition-base);
}

#event-members-area.bkr-active #basket-root .form-control:focus {
  border-color: var(--bkr-primary);
  box-shadow: 0 0 0 3px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.15);
  outline: none;
}

#event-members-area.bkr-active #basket-root .form-control:disabled,
#event-members-area.bkr-active #basket-root .form-control[readonly] {
  background-color: var(--bkr-bg);
  color: var(--bkr-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

#event-members-area.bkr-active #basket-root textarea.form-control {
  height: auto;
  min-height: 80px;
}

#event-members-area.bkr-active #basket-root select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Labels */
#event-members-area.bkr-active #basket-root .form-group label,
#event-members-area.bkr-active #basket-root .control-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bkr-text);
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}

/* Required marker */
#event-members-area.bkr-active #basket-root .form-group.required label::after,
#event-members-area.bkr-active #basket-root .form-group.required .control-label::after {
  content: ' *';
  color: var(--bkr-error);
  font-weight: 700;
}

/* Form group spacing */
#event-members-area.bkr-active #basket-root .form-group {
  margin-bottom: 16px;
}

/* Error state */
#event-members-area.bkr-active #basket-root .form-group.has-error .form-control {
  border-color: var(--bkr-error);
  box-shadow: 0 0 0 3px rgba(var(--bkr-error-rgb), 0.15);
}

#event-members-area.bkr-active #basket-root .form-group.has-error .help-block {
  color: var(--bkr-error);
  font-size: 12px;
  margin-top: 4px;
}

/* Success state */
#event-members-area.bkr-active #basket-root .form-group.has-success .form-control {
  border-color: var(--bkr-success);
}

/* Input groups */
#event-members-area.bkr-active #basket-root .input-group-addon {
  background-color: var(--bkr-bg);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-sm);
  color: var(--bkr-text-muted);
}


/* ─────────────────────────────────────────────────────────────────
   5. CARDS & PANELS
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active .panel {
  background-color: var(--bkr-surface);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md);
  box-shadow: var(--bkr-shadow-md);
  margin-bottom: 16px;
}

#event-members-area.bkr-active .panel-heading {
  background-color: var(--bkr-surface);
  border-bottom: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md) var(--bkr-radius-md) 0 0;
  padding: 12px 16px;
}

#event-members-area.bkr-active .panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--bkr-text);
}

#event-members-area.bkr-active .panel-body {
  padding: 16px;
}

/* Well */
#event-members-area.bkr-active .well {
  background-color: var(--bkr-surface);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md);
  box-shadow: none;
  padding: 16px;
}

/* Strip Evessio's white background from the #wizard wrapper —
   background should only appear on the inner .w-content.bkr-card. */
#event-members-area.bkr-active #wizard {
  background: none !important;
}

/* BKR card utility class (injected by JS) */
#event-members-area.bkr-active .bkr-card {
  background-color: var(--bkr-surface);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md);
  box-shadow: var(--bkr-shadow-md);
  padding: 16px;
  margin-bottom: 16px;
  color: var(--bkr-text);
}

/* Hover lift — applied via JS class when feature is on. Elevation is expressed with
   box-shadow only. Product cards and panels host Bootstrap modals that Evessio renders
   inline (e.g. the AI prompt tips modal inside the card form); a transform, filter or
   will-change: transform on such a container turns it into the containing block for
   those position: fixed modals, so they get trapped in the card and clipped by its
   overflow: hidden. Keep these containers free of any of those properties. */
#event-members-area.bkr-active .bkr-hover-lift {
  transition: box-shadow 250ms ease-out;
}

#event-members-area.bkr-active .bkr-hover-lift:hover {
  box-shadow: var(--bkr-shadow-hover);
}


/* ─────────────────────────────────────────────────────────────────
   6. WIZARD / STEP INDICATOR
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active .basket-wizard {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  list-style: none !important;
  padding: 24px 0 !important;
  margin: 0 !important;
  counter-reset: wizard-step;
}

#event-members-area.bkr-active .basket-wizard-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  flex: 1 !important;
  max-width: 200px !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  cursor: default !important;
}

/* Connector lines between steps */
#event-members-area.bkr-active .basket-wizard-item:not(:last-child)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 18px !important;
  left: calc(50% + 22px) !important;
  width: calc(100% - 44px) !important;
  height: 2px !important;
  background-color: var(--bkr-border) !important;
  border: none !important;
}

/* Completed step connector */
#event-members-area.bkr-active .basket-wizard-item.completed:not(:last-child)::after {
  background-color: var(--bkr-primary) !important;
}

/* CSS fallback: if JS hasn't moved the help text out of the circle yet
   (e.g. Vue inserted items after our observer/timer windows closed),
   hide it so the circle stays clean and shows only the step number. */
#event-members-area.bkr-active .basket-wizard-item-text .basket-wizard-item-help-text {
  display: none !important;
}

/* Step circle — contains only the number now (JS moves help text out) */
#event-members-area.bkr-active .basket-wizard-item-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  /* padding:0 keeps the ::before ripple's top:0/left:0 anchor on the circle
     edge; overflow:visible lets the scaled ripple ring expand past the 38px
     circle instead of being clipped by Evessio's overflow:hidden. */
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 50% !important;
  border: 2px solid var(--bkr-border) !important;
  background-color: var(--bkr-surface) !important;
  color: var(--bkr-text-muted) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  position: relative !important;
  z-index: 1 !important;
  transition: all var(--bkr-transition-base) !important;
}

/* Active step */
#event-members-area.bkr-active .basket-wizard-item.selected .basket-wizard-item-text {
  background-color: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.2) !important;
}

/* Ripple animation on active step — high specificity to beat the arrow kill */
#event-members-area.bkr-active .basket-wizard li.basket-wizard-item.selected > span.basket-wizard-item-text::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  /* Anchor the ring exactly over the 38×38 circle and grow it with
     transform:scale() rather than animating width/height from a 50%/50%
     translate origin. scale() always expands from transform-origin 50% 50%
     (the element's own centre), so centering is exact on every device —
     the old translate+width/height approach drifted off-centre on mobile
     due to sub-pixel rounding of the per-frame translate compensation.
     margin:0 neutralises Evessio's global rule
     (.basket-wizard li>span.basket-wizard-item-text:before { margin-left:-8px })
     which our rule never set and so applied uncontested, shifting the ring 8px left. */
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 2px solid var(--bkr-primary) !important;
  animation: bkrWizardRipple 2s ease-out infinite !important;
  pointer-events: none !important;
}

@keyframes bkrWizardRipple {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0;   }
}

/* Completed step */
#event-members-area.bkr-active .basket-wizard-item.completed .basket-wizard-item-text {
  background-color: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
  color: #FFFFFF !important;
}

/* Step label (moved outside circle by JS) */
#event-members-area.bkr-active .basket-wizard-item-help-text {
  display: block !important;
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--bkr-text-muted) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#event-members-area.bkr-active .basket-wizard-item.selected .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
  font-weight: 600 !important;
}

/* Hide "Step" word — we show only numbers in circles */
#event-members-area.bkr-active .wizard-step-word {
  display: none !important;
}

/* Wizard error bar */
#event-members-area.bkr-active .basket-wizard-error {
  background-color: rgba(var(--bkr-error-rgb), 0.08);
  border: 1px solid var(--bkr-error);
  border-radius: var(--bkr-radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
}

#event-members-area.bkr-active .basket-wizard-wrapper.basket-wizard-has-error .basket-wizard-error {
  margin-right: 24px !important;
  margin-left: 24px !important;
}

#event-members-area.bkr-active .basket-wizard-error-text {
  color: var(--bkr-error);
  font-size: 14px;
  font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────────
   6b. WIZARD — RAIL STYLE  (#event-members-area.bkr-active.bkr-wizard-rail)
   ─────────────────────────────────────────────────────────────────
   A 4 px track runs the full width via li::before.
   Small 28 px dots sit on the rail.
   Completed track segments fill with primary colour.
   Active dot: dual-ring beacon-ping via box-shadow on li::after.

   SPECIFICITY & ANIMATION ANALYSIS
   ─────────────────────────────────
   • All selectors carry #event-members-area.bkr-active.bkr-wizard-rail (extra class)
     giving specificity one level above the base section-6 rules.

   • WHY beacon lives on li::after, NOT span::before:
     (a) span::before is already owned by the Pulse ripple animation
         (transform:scale keyframes at 0-5-4) and is explicitly
         suppressed in rail mode — reusing it for the beacon would
         collide with that rule's !important cascade.
     (b) li::after has no animation/transform lock, and the li element
         has no overflow clipping, so box-shadow spread radiates freely
         and is always visible — independent of whatever overflow the
         span carries.

   • Two comma-separated box-shadow values in one @keyframes create
     staggered dual rings from a single pseudo-element.

   • li::before = track strip.  li::after = beacon (selected) or hidden.
     span::before = suppressed (cancels the Pulse ripple on rail mode).
   ─────────────────────────────────────────────────────────────────── */

/* Dual-ring beacon on li::after — staggered via two box-shadow layers */
@keyframes bkrLiBeacon {
  0% {
    box-shadow:
      0 0 0 0   rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.60),
      0 0 0 0   rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.35);
  }
  35% {
    box-shadow:
      0 0 0 11px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.04),
      0 0 0 4px  rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.30);
  }
  75% {
    box-shadow:
      0 0 0 18px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0),
      0 0 0 14px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.03);
  }
  100% {
    box-shadow:
      0 0 0 18px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0),
      0 0 0 18px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0);
  }
}

/* ── Track segment via li::before ─────────────────────────────────
   li::before is not targeted by the section-1b span:: kill rules.
   position:relative on .basket-wizard-item (section 6) makes
   absolute positioning work here. ── */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 12px !important;          /* (28px dot height / 2) - (4px track / 2) */
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--bkr-border) !important;
  z-index: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  animation: none !important;
  transform: none !important;
}
/* Start track at dot centre on first item; end at dot centre on last */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item:first-child::before {
  left: 50% !important;
}
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item:last-child::before {
  right: 50% !important;
}
/* Completed segment: fill with primary */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item.completed::before {
  background: var(--bkr-primary) !important;
}
/* Active segment: primary left half (already-travelled), grey right half */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item.selected::before {
  background: linear-gradient(
    to right,
    var(--bkr-primary) 50%,
    var(--bkr-border) 50%
  ) !important;
}
/* First step has no left track — all grey */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item:first-child.selected::before {
  background: var(--bkr-border) !important;
}

/* ── Connector line: keep visible alongside the track ──────────────
   In the prototype the connector (li::after, 2px, top:18px) and the
   new track strip (li::before, 4px, top:12px) both render, creating
   the intentional double-line appearance. In production we must
   explicitly allow it — the base connector rule is at 0-2-3 and our
   rail selector at 0-3-2 would beat it if we set display:none.
   By NOT touching li::after here we get both lines:
     • top rail  — li::before  4px  top 12px (runs full width, z:0)
     • bottom rail — li::after   2px  top 18px (dot-to-dot gap)
   The 2px gap between them (16–18px) reads as a clean double rail. ──

   We DO override the connector styles for the selected step so the
   colours match: left half primary (already-travelled), right grey. ── */

/* Tighten connector geometry for rail mode so it visually pairs with the track */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item:not(:last-child)::after {
  display: block !important;
  top: 19px !important;
  height: 2px !important;
}
/* Colour the bottom rail the same as the top rail for completed steps */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item.completed:not(:last-child)::after {
  background-color: var(--bkr-primary) !important;
}

/* ── Dot markers sitting on the track ── */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item-text {
  width: 28px !important;
  height: 28px !important;
  border: 3px solid var(--bkr-border) !important;
  background: var(--bkr-surface) !important;
  color: var(--bkr-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  z-index: 1 !important;
  box-shadow: none !important;
}
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item.selected .basket-wizard-item-text {
  background: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
  color: #fff !important;
  box-shadow: none !important;  /* suppress base selected glow ring */
}
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item.completed .basket-wizard-item-text {
  background: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

/* ── Checkmark for completed dots ─────────────────────────────────
   ::after kill rule: 0-3-4  |  This selector: 0-5-4  → wins ── */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard li.completed > span.basket-wizard-item-text::after {
  content: '\f00c' !important;
  font-family: FontAwesome !important;
  display: block !important;
  font-size: 10px !important;
  color: #fff !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
  animation: none !important;
  top: auto !important;
  left: auto !important;
  opacity: 1 !important;
}

/* ── Suppress Pulse ripple on active dot (beacon lives on li::after) ──
   The Pulse rule animates span::before at specificity 0-5-4.
   This rule is 0-5-5 (extra element: li) → wins, cancels the ripple. ── */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard li.basket-wizard-item.selected > span.basket-wizard-item-text::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* ── Step label adjustments ── */
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item-help-text {
  margin-top: 10px !important;
  opacity: 1 !important;
}
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item.selected > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
#event-members-area.bkr-active.bkr-wizard-rail .basket-wizard-item.completed > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
  opacity: 1 !important;
}



/* ─────────────────────────────────────────────────────────────────
   6c. WIZARD — LIQUID CAPSULE  (#event-members-area.bkr-active.bkr-wizard-capsule)
   ─────────────────────────────────────────────────────────────────
   Inactive: small 28px dot with step number.
   Active: dot morphs into a 108px pill via a spring-overshoot width
           transition. Inside: a numbered circle (::before, left-aligned)
           + the step label text (::after, via attr(data-bkr-label)
           stamped by JS in initWizardStyle).
   Completed: small 28px dot with white checkmark.

   CONNECTOR GEOMETRY
   ──────────────────
   28px dot → connector at top:13px, left:calc(50% + 15px),
   width:calc(100% - 30px).
   Active pill right-edge = 50% + 54px; connector starts 2px clear
   at 50% + 56px; same far-end (150% − 15px) →
   width = 100% − 71px.

   NUMBER CIRCLE + LABEL — WHY HIGH-SPECIFICITY SELECTORS
   ───────────────────────────────────────────────────────
   The base pulse-ripple rule targets span::before on .selected at
   (0,5,4), setting content:'' and transform !important.  A lower-spec
   counter rule would silently lose to it.
   Solution: both ::before (circle) and ::after (label) use the li-
   scoped (0,6,4) selector to beat the ripple and any ::after kill
   rules in one shot — no separate suppressor needed.

   The step label text is not available inside the span in production
   (JS moves .basket-wizard-item-help-text outside the span).
   initWizardStyle() polls until the items exist and stamps
   data-bkr-label on each span; CSS reads it via attr().
   ───────────────────────────────────────────────────────────────── */

@keyframes bkrCapsuleLabelIn {
  0%   { opacity: 0; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes bkrCapsuleCheckIn {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* CSS counter so ::before can display the step number */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard {
  counter-reset: bkr-capsule !important;
}
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item {
  counter-increment: bkr-capsule !important;
}

/* Base dot: 28px small rounded pill */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item-text {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50px !important;
  border: 2px solid var(--bkr-border) !important;
  background-color: var(--bkr-surface) !important;
  color: var(--bkr-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  transition:
    width 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease !important;
}

/* Active: pill expands to fit the label text.
   JS stamps --bkr-pill-w (exact measured width) on the <li>; the CSS
   variable is inherited by this span.  The 150px fallback covers the
   rare case where JS hasn't run yet. */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item.selected .basket-wizard-item-text {
  width: var(--bkr-pill-w, 150px) !important;
  background-color: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
  color: #fff !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0 14px 0 4px !important;
  gap: 6px !important;
  font-size: 0 !important;  /* hide raw text node; ::before/::after take over */
  box-shadow: none !important;
}

/* Number circle — (0,6,4) beats the base ripple rule at (0,5,4).
   Cancels ripple properties AND renders the circle in one rule. */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard li.basket-wizard-item.selected > span.basket-wizard-item-text::before {
  content: counter(bkr-capsule) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.22) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #fff !important;
  position: static !important;
  border: none !important;
  animation: none !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  opacity: 1 !important;
}

/* Step label — (0,6,4) beats the ::after kill rule at (0,3,4).
   Text is read from data-bkr-label stamped by initWizardStyle(). */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard li.basket-wizard-item.selected > span.basket-wizard-item-text::after {
  content: attr(data-bkr-label) !important;
  display: inline !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  color: rgba(255,255,255,0.88) !important;
  position: static !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  animation: bkrCapsuleLabelIn 200ms ease 300ms both !important;
}

/* Completed: small 28px dot with checkmark */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item.completed .basket-wizard-item-text {
  width: 28px !important;
  background-color: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
  color: #fff !important;
  font-size: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
  box-shadow: none !important;
}

/* Checkmark — (0,5,4) beats the base ::after kill rule at (0,3,4) */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard li.completed > span.basket-wizard-item-text::after {
  content: '\f00c' !important;
  font-family: FontAwesome !important;
  display: block !important;
  font-size: 10px !important;
  color: #fff !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  opacity: 1 !important;
  animation: bkrCapsuleCheckIn 250ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

/* Active step: label is inside the pill, hide the external label */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item.selected > .basket-wizard-item-help-text {
  visibility: hidden !important;
}

/* Connector: aligned with 28px dot (top:13px = dot centre − 1px) */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item:not(:last-child)::after {
  top: 13px !important;
  height: 1px !important;
  left: calc(50% + 15px) !important;
  width: calc(100% - 30px) !important;
  background-color: var(--bkr-border) !important;
}
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item.completed:not(:last-child)::after {
  background-color: var(--bkr-primary) !important;
}
/* Active step: connector starts at pill right edge.
   --bkr-connector-offset = (pill-width / 2) + 2px gap, stamped by JS. */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item.selected:not(:last-child)::after {
  left: calc(50% + var(--bkr-connector-offset, 77px)) !important;
  width: calc(100% - var(--bkr-connector-offset, 77px) - 15px) !important;
}

/* Label colour states */
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item-help-text {
  margin-top: 10px !important;
}
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item.selected > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
}
#event-members-area.bkr-active.bkr-wizard-capsule .basket-wizard-item.completed > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
}


/* ─────────────────────────────────────────────────────────────────
   6d. WIZARD — SEGMENT TILES  (#event-members-area.bkr-active.bkr-wizard-segments)
   ─────────────────────────────────────────────────────────────────
   No circles. Each step owns an equal-width bar segment via li::before.
   Numbers (01, 02…) and labels shown below the bar.
   ───────────────────────────────────────────────────────────────── */

@keyframes bkrSegPulseIn {
  0%   { opacity: 0.5; transform: scaleY(0.6); }
  100% { opacity: 1;   transform: scaleY(1); }
}

/* Hide the circle span entirely */
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item-text {
  display: none !important;
}

/* Segment bar via li::before */
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 2px !important;
  right: 2px !important;
  height: 6px !important;
  background-color: var(--bkr-border) !important;
  background-image: none !important;
  border-radius: 4px !important;
  border: none !important;
  z-index: 0 !important;
  animation: none !important;
  transform: none !important;
  transition: background-color 280ms ease !important;
}

/* Completed segment: solid primary */
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item.completed::before {
  background-color: var(--bkr-primary) !important;
  background-image: none !important;
}

/* Active segment: solid primary bar + entry pulse */
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item.selected::before {
  background-color: var(--bkr-primary) !important;
  background-image: none !important;
  animation: bkrSegPulseIn 300ms ease both !important;
}

/* Hide connector lines (bar segment is the connector) */
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item:not(:last-child)::after {
  display: none !important;
}

/* Step label below bar */
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item > .basket-wizard-item-help-text {
  margin-top: 16px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--bkr-text-muted) !important;
}
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item.selected > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
  font-weight: 700 !important;
}
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item.completed > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
  font-weight: 500 !important;
}

/* Numeric prefix above each label (01, 02 …) via ::before on the help-text */
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item > .basket-wizard-item-help-text::before {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #D0D5DC !important;
  margin-bottom: 2px !important;
}
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item:nth-child(1) > .basket-wizard-item-help-text::before { content: '01' !important; }
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item:nth-child(2) > .basket-wizard-item-help-text::before { content: '02' !important; }
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item:nth-child(3) > .basket-wizard-item-help-text::before { content: '03' !important; }
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item:nth-child(4) > .basket-wizard-item-help-text::before { content: '04' !important; }
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item:nth-child(5) > .basket-wizard-item-help-text::before { content: '05' !important; }

#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item.selected > .basket-wizard-item-help-text::before,
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard-item.completed > .basket-wizard-item-help-text::before {
  color: var(--bkr-primary) !important;
}

/* Suppress pulse ripple (item-text hidden, but belt-and-braces) */
#event-members-area.bkr-active.bkr-wizard-segments .basket-wizard li.basket-wizard-item.selected > span.basket-wizard-item-text::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   6e. WIZARD — FLOAT CARDS  (#event-members-area.bkr-active.bkr-wizard-cards)
   ─────────────────────────────────────────────────────────────────
   Each step is a 40×40 rounded-square card.
   Active: springs upward with cubic-bezier overshoot + glow shadow.
   Completed: tinted flat card with animated checkmark.
   Label follows the card on the same spring transition.
   ───────────────────────────────────────────────────────────────── */

@keyframes bkrCardCheckIn {
  0%   { transform: scale(0.4) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(3deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

/* Rounded-square card */
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard-item-text {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  border: 1.5px solid #E9EAEC !important;
  background-color: #fff !important;
  color: #B8BFC9 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  transition:
    transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 350ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease !important;
}

/* Active: springs upward with glow */
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard-item.selected .basket-wizard-item-text {
  transform: translateY(-6px) !important;
  background-color: var(--bkr-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow:
    0 12px 28px rgba(var(--bkr-primary-rgb), 0.38),
    0 4px 10px rgba(var(--bkr-primary-rgb), 0.22) !important;
}

/* Completed: tinted flat card */
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard-item.completed .basket-wizard-item-text {
  background-color: rgba(var(--bkr-primary-rgb), 0.09) !important;
  border-color: rgba(var(--bkr-primary-rgb), 0.22) !important;
  color: var(--bkr-primary) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 0 !important;
}

/* Checkmark on completed card — (0,5,4) beats kill rule */
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard li.completed > span.basket-wizard-item-text::after {
  content: '\f00c' !important;
  font-family: FontAwesome !important;
  display: block !important;
  font-size: 12px !important;
  color: var(--bkr-primary) !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  opacity: 1 !important;
  animation: bkrCardCheckIn 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

/* Label follows the card on the same spring */
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard-item > .basket-wizard-item-help-text {
  transition:
    transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 220ms ease !important;
}
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard-item.selected > .basket-wizard-item-help-text {
  transform: translateY(-6px) !important;
  color: var(--bkr-primary) !important;
  font-weight: 600 !important;
}
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard-item.completed > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
}

/* Connector: very faint */
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard-item:not(:last-child)::after {
  top: 19px !important;
  height: 1.5px !important;
  background-color: #EEF0F3 !important;
}
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard-item.completed:not(:last-child)::after {
  background-color: rgba(var(--bkr-primary-rgb), 0.25) !important;
}

/* Suppress pulse ripple */
#event-members-area.bkr-active.bkr-wizard-cards .basket-wizard li.basket-wizard-item.selected > span.basket-wizard-item-text::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   6f. WIZARD — MINIMAL  (#event-members-area.bkr-active.bkr-wizard-minimal)
   ─────────────────────────────────────────────────────────────────
   20px dots on a continuous 3px track (via li::before).
   Completed segments: solid primary.
   Active: track half-filled (primary left, grey right) up to the dot.
   No animations — purely static.

   TOP ALIGNMENT MATHS
   ───────────────────
   20px dot, centre at 10px from li top.
   Track: top:8px, height:3px → centre at 9.5px.  ≈ aligned.
   ───────────────────────────────────────────────────────────────── */

/* Track via li::before */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background-color: #EAECF0 !important;
  background-image: none !important;
  border-radius: 3px !important;
  border: none !important;
  z-index: 0 !important;
  animation: none !important;
  transform: none !important;
}
/* Cap track at dot centres for first and last step */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item:first-child::before {
  left: 50% !important;
}
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item:last-child::before {
  right: 50% !important;
}

/* Completed track: solid primary */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item.completed::before {
  background-color: var(--bkr-primary) !important;
  background-image: none !important;
}

/* Active track: left half primary (arrived), right half grey (not yet) */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item.selected::before {
  background-color: transparent !important;
  background-image: linear-gradient(to right, var(--bkr-primary) 50%, #EAECF0 50%) !important;
}
/* First step: no prior steps, full grey track */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item:first-child.selected::before {
  background-color: #EAECF0 !important;
  background-image: none !important;
}
/* Last step: all prior done, full primary up to dot */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item:last-child.selected::before {
  background-color: var(--bkr-primary) !important;
  background-image: none !important;
}

/* Hide original connector lines (track handles connection) */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item:not(:last-child)::after {
  display: none !important;
}

/* Dot: 20px, sits on track */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item-text {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 3px solid #D8DCE2 !important;
  background-color: #fff !important;
  color: transparent !important;
  font-size: 0 !important;
  z-index: 1 !important;
  box-shadow: none !important;
  transition: border-color 220ms ease, background-color 220ms ease !important;
}

/* Active dot: primary filled */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item.selected .basket-wizard-item-text {
  border-color: var(--bkr-primary) !important;
  background-color: var(--bkr-primary) !important;
  box-shadow: none !important;
}

/* Completed dot: same 20px, primary fill — identical size keeps track centred */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item.completed .basket-wizard-item-text {
  border-color: var(--bkr-primary) !important;
  background-color: var(--bkr-primary) !important;
  width: 20px !important;
  height: 20px !important;
  border-width: 3px !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

/* No checkmark on minimal dots */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard li.completed > span.basket-wizard-item-text::after {
  content: none !important;
  display: none !important;
}

/* Suppress pulse ripple */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard li.basket-wizard-item.selected > span.basket-wizard-item-text::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Label spacing and colours */
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item-help-text {
  margin-top: 14px !important;
}
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item.selected > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
  font-weight: 600 !important;
}
#event-members-area.bkr-active.bkr-wizard-minimal .basket-wizard-item.completed > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
}


/* ─────────────────────────────────────────────────────────────────
   6g. WIZARD — DASHED ORBIT  (#event-members-area.bkr-active.bkr-wizard-orbit)
   ─────────────────────────────────────────────────────────────────
   Each step shows a dashed ring.  Active ring spins slowly (8 s).
   Completed: solid primary ring, tinted fill, checkmark.

   WHY li::before FOR THE RING (not span::before):
   The base pulse-ripple rule locks `transform: translate(-50%,-50%)
   !important` on span::before at specificity (0,5,4).  That !important
   declaration beats every @keyframes transform value, silently freezing
   a rotation animation placed on span::before.
   li::before has NO competing transform rule, so the bkrDashOrbit
   keyframe animates freely.  The pulse ripple on span::before is
   suppressed separately via the (0,6,4) selector below.
   ───────────────────────────────────────────────────────────────── */

@keyframes bkrDashOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes bkrSolidFill {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}

/* Span: transparent — number visible through the ring */
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item-text {
  border: none !important;
  background-color: transparent !important;
  color: #C4C9D4 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  /* width: 38px / height: 38px inherited from base section 6 */
}

/* Dashed ring on li::before — centred over the 38px span.
   No transform !important here — that would block the keyframe rotation
   on the selected state (keyframe values always lose to !important). */
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: calc(50% - 19px) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 2px dashed #D4D8DF !important;
  background: transparent !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  transform-origin: center !important;
  animation: none !important;
}

/* Active: span colour + ring spins */
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item.selected .basket-wizard-item-text {
  color: var(--bkr-primary) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item.selected::before {
  border-color: var(--bkr-primary) !important;
  border-style: dashed !important;
  animation: bkrDashOrbit 60s linear infinite !important;
}

/* Completed: solid ring, tinted background */
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item.completed .basket-wizard-item-text {
  color: var(--bkr-primary) !important;
  background-color: rgba(var(--bkr-primary-rgb),0.07) !important;
  border: none !important;
  font-size: 0 !important;
  box-shadow: none !important;
}
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item.completed::before {
  border-style: solid !important;
  border-color: var(--bkr-primary) !important;
  background: rgba(var(--bkr-primary-rgb),0.07) !important;
  animation: bkrSolidFill 300ms ease both !important;
}

/* Checkmark — centred via translate so it sits exactly in the middle of the
   span regardless of line-height or flex quirks — (0,5,4) */
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard li.completed > span.basket-wizard-item-text::after {
  content: '\f00c' !important;
  font-family: FontAwesome !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: var(--bkr-primary) !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Connector: thin, light */
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item:not(:last-child)::after {
  top: 18px !important;
  height: 1px !important;
  background-color: #E5E7EB !important;
}
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item.completed:not(:last-child)::after {
  background-color: var(--bkr-primary) !important;
}

/* Suppress pulse ripple on span::before — (0,6,4) beats (0,5,4) */
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard li.basket-wizard-item.selected > span.basket-wizard-item-text::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Label colour states */
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item.selected > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
  font-weight: 600 !important;
}
#event-members-area.bkr-active.bkr-wizard-orbit .basket-wizard-item.completed > .basket-wizard-item-help-text {
  color: var(--bkr-primary) !important;
}


/* ─────────────────────────────────────────────────────────────────
   7. SIDEBAR NAVIGATION
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active #menu-counters {
  background-color: var(--bkr-surface);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-lg);
  box-shadow: var(--bkr-shadow-md);
  padding: 12px 0;
  overflow: hidden;
}

/* Nuclear reset: kill ALL Bootstrap nav background colours inside sidebar */
#event-members-area.bkr-active #menu-counters li > a,
#event-members-area.bkr-active #menu-counters li > a:hover,
#event-members-area.bkr-active #menu-counters li > a:focus,
#event-members-area.bkr-active #menu-counters li.active > a,
#event-members-area.bkr-active #menu-counters li.active > a:hover,
#event-members-area.bkr-active #menu-counters li.active > a:focus,
#event-members-area.bkr-active #menu-counters .nav > li > a:hover,
#event-members-area.bkr-active #menu-counters .nav > li > a:focus,
#event-members-area.bkr-active #menu-counters .nav-pills > .active > a,
#event-members-area.bkr-active #menu-counters .nav-pills > .active > a:hover,
#event-members-area.bkr-active #menu-counters .nav-pills > .active > a:focus {
  background-color: transparent !important;
}

#event-members-area.bkr-active #menu-counters .nav-pills > li > a {
  color: var(--bkr-text);
  font-weight: 500;
  padding: 9px 16px 9px 20px;
  border-radius: 0;
  border-left: 3px solid transparent;
  transition: all var(--bkr-transition-base);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Counter chips / labels inside flex anchors: Evessio uses .pull-right which
   can carry margin-left: auto — that pushes the chip to the far edge inside
   our flex row. Reset across all anchor types (nav-pill items, section
   headers, standalone menu items) so the chip sits flush after the text. */
#event-members-area.bkr-active #menu-counters a .pull-right,
#event-members-area.bkr-active #menu-counters a .label,
#event-members-area.bkr-active #menu-counters a .badge,
#event-members-area.bkr-active #menu-counters a .counter {
  float: none !important;
  margin-left: 0 !important;
}

#event-members-area.bkr-active #menu-counters .nav-pills > li > a:hover,
#event-members-area.bkr-active #menu-counters .nav-pills > li > a:focus,
#event-members-area.bkr-active #menu-counters .nav-stacked .nav-stacked > li > a:hover,
#event-members-area.bkr-active #menu-counters .nav-stacked .nav-stacked > li > a:focus,
#event-members-area.bkr-active #menu-counters .menu-item > a:hover,
#event-members-area.bkr-active #menu-counters .menu-item > a:focus {
  background-color: rgba(0, 0, 0, 0.025) !important;
  color: var(--bkr-primary);
  border-left-color: rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.2);
}

#event-members-area.bkr-active #menu-counters .nav-pills > li.active > a,
#event-members-area.bkr-active #menu-counters .nav-pills > li.active > a:hover,
#event-members-area.bkr-active #menu-counters .nav-pills > li.active > a:focus,
#event-members-area.bkr-active #menu-counters .menu-item.active > a,
#event-members-area.bkr-active #menu-counters .menu-item.active > a:hover,
#event-members-area.bkr-active #menu-counters .menu-item.active > a:focus {
  background-color: rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.06) !important;
  border-left-color: var(--bkr-primary);
  color: var(--bkr-primary) !important;
  font-weight: 600;
}

/* Section headers */
#event-members-area.bkr-active #menu-counters .menu-section > a {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--bkr-text-muted);
  padding: 16px 16px 6px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#event-members-area.bkr-active #menu-counters .menu-section > a:hover,
#event-members-area.bkr-active #menu-counters .menu-section > a:focus {
  background-color: transparent !important;
  color: var(--bkr-text);
  border-left-color: transparent !important;
}

/* Section icon — injected by JS */
#event-members-area.bkr-active #menu-counters .bkr-section-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  color: var(--bkr-text-muted);
  opacity: 0.7;
}

#event-members-area.bkr-active #menu-counters .menu-section > a.collapsed > .bkr-section-icon {
  transform: none;
}


/* Add spacing between Evessio round-status circle and our injected icon */
#event-members-area.bkr-active #menu-counters .menu-item.item-type-round-opened > a > .bkr-menu-icon {
  margin-left: 6px !important;
}

/* Style the chevron toggle icons in sidebar menu sections */
#event-members-area.bkr-active #menu-counters .menu-section > a > .fa.fa-chevron-circle-down {
  color: var(--bkr-primary) !important;
  font-size: 12px !important;
  transition: transform 0.2s !important;
  margin-right: 4px !important;
}

/* Section separator line.
   Uses li.menu-section (specificity 1,2,2) to beat the nav-pills > li reset
   (also 1,2,2) via source order — this rule must stay after that reset. */
#event-members-area.bkr-active #menu-counters li.menu-section {
  border-top: 1px solid var(--bkr-border) !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}

#event-members-area.bkr-active #menu-counters li.menu-section:first-child,
#event-members-area.bkr-active #menu-counters li:first-child + li.menu-section {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#event-members-area.bkr-active #menu-counters .menu-section > a .fa.pull-left {
  float: none !important;
  margin-right: 0;
}

/* Standalone menu items (dashboard, account, logout) get a soft border.
   Uses #menu-counters + #item-id (two IDs = 0,2,1,1) to beat the
   .nav-pills > li reset (one ID + classes = 0,1,2,2). */
#event-members-area.bkr-active #menu-counters #menu-item-dashboard,
#event-members-area.bkr-active #menu-counters #menu-item-account,
#event-members-area.bkr-active #menu-counters #menu-item-logout {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border-radius: var(--bkr-radius-sm) !important;
  margin: 2px 8px !important;
}

#event-members-area.bkr-active #menu-counters #menu-item-dashboard > a,
#event-members-area.bkr-active #menu-counters #menu-item-account > a,
#event-members-area.bkr-active #menu-counters #menu-item-logout > a {
  margin-top: 0 !important;
}

/* Counter badges */
#event-members-area.bkr-active #menu-counters .counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.1);
  color: var(--bkr-primary);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 50px;
  margin-left: auto;
  min-width: 22px;
  height: 18px;
  text-align: center;
}

/* Smooth accordion */
#event-members-area.bkr-active #menu-counters .collapse {
  transition: height 250ms ease-in-out;
}

#event-members-area.bkr-active #menu-counters .collapsing {
  transition: height 250ms ease-in-out;
}

/* Nested nav items */
#event-members-area.bkr-active #menu-counters .nav-stacked .nav-stacked > li > a {
  padding-left: 40px;
}

/* Dashboard, Account, Logout standalone items */
#event-members-area.bkr-active #menu-counters #menu-item-dashboard > a,
#event-members-area.bkr-active #menu-counters #menu-item-account > a,
#event-members-area.bkr-active #menu-counters #menu-item-logout > a {
  border-top: 1px solid var(--bkr-border);
  margin-top: 4px;
  padding-top: 12px;
}

#event-members-area.bkr-active #menu-counters #menu-item-dashboard > a .fa,
#event-members-area.bkr-active #menu-counters #menu-item-account > a .fa,
#event-members-area.bkr-active #menu-counters #menu-item-logout > a .fa {
  color: var(--bkr-primary) !important;
}

#event-members-area.bkr-active #menu-counters > .nav > li:first-child > a {
  border-top: none;
  margin-top: 0;
}


/* ─────────────────────────────────────────────────────────────────
   8. TRANSACTION TABLES (DataTables)
   ───────────────────────────────────────────────────────────────── */

/* Search input */
#event-members-area.bkr-active .dataTables_filter input {
  height: 36px;
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-sm);
  background-color: var(--bkr-surface);
  color: var(--bkr-text);
  transition: border-color var(--bkr-transition-base),
              box-shadow var(--bkr-transition-base);
}

#event-members-area.bkr-active .dataTables_filter input:focus {
  border-color: var(--bkr-primary);
  box-shadow: 0 0 0 3px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.15);
  outline: none;
}

/* Table header */
#event-members-area.bkr-active .dataTable thead th {
  background-color: var(--bkr-bg);
  color: var(--bkr-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--bkr-border);
  padding: 10px 12px;
}

/* Table body */
#event-members-area.bkr-active .dataTable tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--bkr-border);
  color: var(--bkr-text);
  vertical-align: middle;
}

#event-members-area.bkr-active .dataTable tbody tr {
  background-color: var(--bkr-surface);
  transition: background-color var(--bkr-transition-base);
}

#event-members-area.bkr-active .dataTable tbody tr:hover {
  background-color: var(--bkr-bg);
}

/* Alternating rows */
#event-members-area.bkr-active .dataTable tbody tr.odd {
  background-color: var(--bkr-surface);
}

#event-members-area.bkr-active .dataTable tbody tr.even {
  background-color: var(--bkr-bg);
}

#event-members-area.bkr-active .dataTable tbody tr.odd:hover,
#event-members-area.bkr-active .dataTable tbody tr.even:hover {
  background-color: rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.04);
}

/* Transaction ID link */
#event-members-area.bkr-active .tx-id {
  color: var(--bkr-primary);
  font-weight: 600;
  text-decoration: none;
}

#event-members-area.bkr-active .tx-id:hover {
  text-decoration: underline;
}

/* Table borders */
#event-members-area.bkr-active .table-bordered {
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md);
  overflow: hidden;
}

#event-members-area.bkr-active .table-bordered > thead > tr > th,
#event-members-area.bkr-active .table-bordered > tbody > tr > td {
  border-color: var(--bkr-border);
}

/* Status labels — pill badges (not buttons) */
#event-members-area.bkr-active .label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.3px;
  line-height: 1.4;
  text-transform: uppercase;
}

#event-members-area.bkr-active .label-success {
  background-color: rgba(var(--bkr-success-rgb, 22, 163, 74), 0.12);
  color: var(--bkr-success);
  border: 1px solid rgba(var(--bkr-success-rgb, 22, 163, 74), 0.35);
}

#event-members-area.bkr-active .label-warning {
  background-color: rgba(234, 179, 8, 0.12);
  color: #b45309;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

#event-members-area.bkr-active .label-danger {
  background-color: rgba(var(--bkr-error-rgb), 0.12);
  color: var(--bkr-error);
  border: 1px solid rgba(var(--bkr-error-rgb), 0.35);
}

#event-members-area.bkr-active .label-info {
  background-color: rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.12);
  color: var(--bkr-primary);
  border: 1px solid rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.35);
}

#event-members-area.bkr-active .label-default {
  background-color: rgba(107, 114, 128, 0.12);
  color: var(--bkr-text-muted);
  border: 1px solid rgba(107, 114, 128, 0.35);
}

/* Dark theme label adjustments */
#event-members-area.bkr-active.bkr-dark .label-warning {
  color: #fbbf24;
}

/* Private area messages */
#event-members-area.bkr-active .private-area-message {
  background-color: rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.06);
  border: 1px solid rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.15);
  border-radius: var(--bkr-radius-md);
  padding: 12px 16px;
  color: var(--bkr-text);
  font-size: 14px;
  margin-bottom: 16px;
}

/* Summary table (Step 4) */
#event-members-area.bkr-active .transaction-summary-table {
  border-radius: var(--bkr-radius-md);
  overflow: hidden;
  padding: 0 16px 16px !important; /* side + bottom breathing room inside the .row.bkr-card container,
                                       whose Bootstrap negative margins eat into the card's own padding */
}

#event-members-area.bkr-active .transaction-summary-table table {
  border: 1px solid var(--bkr-border) !important;
  width: 100%;
}

#event-members-area.bkr-active .transaction-summary-table thead {
  background-color: var(--bkr-bg);
}

/* Group header rows have inline background-color: #b8b8b8 — override with a softer grey */
#event-members-area.bkr-active .transaction-summary-table tr.group-header {
  background-color: #e8e8e8 !important;
}

#event-members-area.bkr-active .transaction-summary-table td,
#event-members-area.bkr-active .transaction-summary-table th {
  padding: 10px 12px !important;
  border-color: var(--bkr-border) !important;
}


/* ─────────────────────────────────────────────────────────────────
   8b. ADD TO BASKET DROPDOWN
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active #add-to-basket-dropdown-select {
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--bkr-radius-lg);
  padding: 24px !important;
  box-shadow: none !important;
}

#event-members-area.bkr-active #add-to-basket-dropdown-select h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--bkr-text);
  margin: 0 0 16px 0;
}

#event-members-area.bkr-active #add-to-basket-dropdown-select h3 .fa {
  color: var(--bkr-primary);
  margin-right: 6px;
}

/* Dropdown + controls layout */
#event-members-area.bkr-active #add-to-basket-table {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

#event-members-area.bkr-active #add-to-basket-table .select-product {
  flex: 1;
  padding: 0;
}

#event-members-area.bkr-active #add-to-basket-table .select-product-add {
  flex-shrink: 0;
  padding: 0;
}

#event-members-area.bkr-active #add-to-basket-table .select-product-add table {
  height: 100%;
}

#event-members-area.bkr-active #add-to-basket-table .add-to-basket-btns {
  padding: 0 4px;
  vertical-align: middle;
}

/* Main product select */
#event-members-area.bkr-active #select-new-product {
  height: 44px;
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-sm);
  background-color: var(--bkr-surface);
  color: var(--bkr-text);
  padding: 8px 36px 8px 14px;
  cursor: pointer;
  transition: border-color var(--bkr-transition-base), box-shadow var(--bkr-transition-base);
}

#event-members-area.bkr-active #select-new-product:hover {
  border-color: var(--bkr-primary);
}

#event-members-area.bkr-active #select-new-product:focus {
  border-color: var(--bkr-primary);
  box-shadow: 0 0 0 3px rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.15);
  outline: none;
}

/* Optgroup labels */
#event-members-area.bkr-active #select-new-product optgroup {
  font-weight: 600;
  color: var(--bkr-text);
}

#event-members-area.bkr-active #select-new-product option {
  padding: 8px 12px;
  font-weight: 400;
  color: var(--bkr-text);
}

/* Quantity select */
#event-members-area.bkr-active #select-new-product-count {
  height: 44px;
  width: 64px;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-sm);
  background-color: var(--bkr-surface);
  color: var(--bkr-text);
  padding: 8px 4px;
  cursor: pointer;
  transition: border-color var(--bkr-transition-base);
}

#event-members-area.bkr-active #select-new-product-count:hover,
#event-members-area.bkr-active #select-new-product-count:focus {
  border-color: var(--bkr-primary);
}

/* Add selected button */
#event-members-area.bkr-active .add-product-to-basket {
  height: 44px;
  padding: 0 20px;
  font-weight: 600;
  border-radius: var(--bkr-radius-sm);
  white-space: nowrap;
  transition: all var(--bkr-transition-base);
}

/* Product description area */
#event-members-area.bkr-active .product-description {
  margin-top: 14px;
  padding: 12px 16px;
  background-color: var(--bkr-bg);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-sm);
  color: var(--bkr-text-muted);
  line-height: 1.5;
}

#event-members-area.bkr-active .product-description ul {
  margin: 0;
  padding-left: 18px;
}

#event-members-area.bkr-active .product-description p {
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────────
   8b2. PRODUCT TYPE CONTAINER & BASKET ITEM CARDS
   Redesigns the product cards shown in the basket (step 1)
   ───────────────────────────────────────────────────────────────── */

/* Product type wrapper — target only the inner named containers,
   not the outer wrapper .product-type-container which parents #collapse */
#event-members-area.bkr-active .product-type-body > .product-type-container {
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--bkr-radius-md) !important;
  padding: 20px 24px !important;
  margin-bottom: 28px !important;
  box-shadow: none !important;
}

#event-members-area.bkr-active .product-type-body > .product-type-container h3 {
  font-size: 26px !important;
  color: rgba(0, 0, 0, 0.4) !important;
}

/* Product type heading (e.g. "Awards Nomination") */
#event-members-area.bkr-active .product-type-name h3 {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.4) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

#event-members-area.bkr-active .product-type-name .toggle.toggle_all {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bkr-primary) !important;
  text-decoration: none !important;
}

/* ── Individual product card ── */
#event-members-area.bkr-active .container-fluid.product {
  background-color: var(--bkr-surface) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-md) !important;
  margin-bottom: 12px !important;
  margin-top: 12px !important;
  padding: 0 !important;
  transition: box-shadow 250ms ease-out, border-color 250ms ease-out !important;
  overflow: hidden !important;
  box-shadow: var(--bkr-shadow-sm) !important;
}

#event-members-area.bkr-active .container-fluid.product:hover {
  border-color: rgba(var(--bkr-primary-rgb), 0.25) !important;
  box-shadow: var(--bkr-shadow-md) !important;
}

/* ── PRODUCT CARD HEADER (restructured by JS) ── */
/* .item-number is the unified card header bar containing:
   counter circle + product name + close date */
#event-members-area.bkr-active .container-fluid.product .item-number {
  background: #fff !important;
  padding: 14px 20px !important;
  border-bottom: none !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  border-radius: var(--bkr-radius-md) var(--bkr-radius-md) 0 0 !important;
}

/* Counter circle */
#event-members-area.bkr-active .container-fluid.product .counter {
  background: var(--bkr-primary) !important;
  color: #fff !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  float: none !important;
  margin-right: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

#event-members-area.bkr-active .container-fluid.product .counter h3 {
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  line-height: 1 !important;
}

#event-members-area.bkr-active .container-fluid.product .item-data {
  display: none !important;
}

/* Header content area (product name + date, injected by JS) */
#event-members-area.bkr-active .bkr-card-header-content {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  margin-left: 14px !important;
}

/* Product name (inside header) */
#event-members-area.bkr-active .bkr-card-header-content .product-name {
  flex: 1 !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}

#event-members-area.bkr-active .bkr-card-header-content .product-name a {
  color: var(--bkr-text) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#event-members-area.bkr-active .bkr-card-header-content .product-name .name {
  font-size: 15px !important;
  font-weight: 700 !important;
}

#event-members-area.bkr-active .bkr-card-header-content .product-name .fa {
  color: var(--bkr-primary) !important;
  font-size: 14px !important;
  transition: transform 0.2s !important;
}

#event-members-area.bkr-active .bkr-card-header-content .product-name br {
  display: none !important;
}

/* Dates container (close date + editing close date) */
#event-members-area.bkr-active .bkr-card-header-dates {
  flex-shrink: 0 !important;
  display: none !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

#event-members-area.bkr-active .bkr-card-header-dates .product-close-date {
  width: auto !important;
  float: none !important;
  padding: 8px 14px !important;
  background: var(--bkr-surface) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-pill) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

#event-members-area.bkr-active .bkr-card-header-dates .product-close-date h6 {
  font-size: 12px !important;
  color: var(--bkr-text-muted) !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: inline !important;
}

#event-members-area.bkr-active .bkr-card-header-dates .product-close-date .text-upper {
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

#event-members-area.bkr-active .bkr-card-header-dates .product-close-date .save-item-i {
  margin-right: 2px !important;
}

/* Fallback: hide old prod-name-date if JS hasn't restructured */
#event-members-area.bkr-active .prod-name-date {
  padding: 16px 20px 12px !important;
  margin: 0 !important;
}

/* Price row */
#event-members-area.bkr-active .product-price-row {
  padding: 0 20px !important;
  margin: 0 !important;
}

#event-members-area.bkr-active .product-price h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bkr-text-muted) !important;
  margin: 4px 0 !important;
}

#event-members-area.bkr-active .product-price .input-group-addon {
  background: var(--bkr-bg) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-sm) 0 0 var(--bkr-radius-sm) !important;
  color: var(--bkr-text-muted) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

#event-members-area.bkr-active .product-price .price-input,
#event-members-area.bkr-active .product-price .discount-input {
  border: 1px solid var(--bkr-border) !important;
  border-radius: 0 var(--bkr-radius-sm) var(--bkr-radius-sm) 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 34px !important;
}

#event-members-area.bkr-active .container-fluid.product hr.text-muted {
  display: none !important;
}

#event-members-area.bkr-active .product-price hr {
  border-color: var(--bkr-border) !important;
  margin: 12px 0 !important;
}

/* Admin controls label */
#event-members-area.bkr-active .admin-controls .admin-title {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--bkr-primary) !important;
  margin-bottom: 6px !important;
}

/* Progress bars (Required / Optional) */
#event-members-area.bkr-active .progress-actions {
  padding: 14px 20px !important;
  margin: 0 !important;
  background: var(--bkr-bg) !important;
  border-top: 1px solid var(--bkr-border) !important;
}

#event-members-area.bkr-active .progress-bar-block .progress {
  height: 16px !important;
  border-radius: 8px !important;
  background-color: var(--bkr-border) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

#event-members-area.bkr-active .progress-bar-block .progress-bar-success {
  background-color: var(--bkr-success) !important;
  border-radius: 3px !important;
}

#event-members-area.bkr-active .progress-bar-block .bar-text {
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Action buttons (Save for later, Delete) */
#event-members-area.bkr-active .product-action-buttons {
  text-align: right !important;
  padding-top: 0 !important;
}

#event-members-area.bkr-active .product-action-buttons .btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: var(--bkr-radius-sm) !important;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, box-shadow 0.15s !important;
}

#event-members-area.bkr-active .btn-move-to-saved {
  background-color: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
  color: #fff !important;
}

#event-members-area.bkr-active .btn-move-to-saved:hover {
  opacity: 0.9 !important;
  box-shadow: 0 2px 8px rgba(var(--bkr-primary-rgb), 0.3) !important;
}

#event-members-area.bkr-active .remove-product {
  background-color: transparent !important;
  border: 1px solid var(--bkr-border) !important;
  color: var(--bkr-text-muted) !important;
}

#event-members-area.bkr-active .remove-product:hover {
  border-color: var(--bkr-error) !important;
  color: var(--bkr-error) !important;
  background-color: rgba(var(--bkr-error-rgb), 0.04) !important;
}

/* Toggle expand link */
#event-members-area.bkr-active .toggle-bar-block a {
  font-size: 13px !important;
  color: var(--bkr-primary) !important;
}

/* Form area inside product card */
#event-members-area.bkr-active .container-fluid.product .forms {
  padding: 16px 20px !important;
  border-top: 1px solid var(--bkr-border) !important;
  background: var(--bkr-surface) !important;
}

/* Product description inside form */
#event-members-area.bkr-active .product-description-outer {
  background: var(--bkr-bg) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-sm) !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

#event-members-area.bkr-active .product-description-inner {
  font-size: 13px !important;
  color: var(--bkr-text-muted) !important;
  line-height: 1.5 !important;
}

#event-members-area.bkr-active .product-description-inner p {
  margin: 0 !important;
}

/* ── Basket Summary — unified panel (Option A) ── */

/* Panel outer card */
#event-members-area.bkr-active .bkr-summary-panel {
  background: var(--bkr-surface) !important;
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-md) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
  overflow: hidden !important;
  margin: 24px 24px 16px !important;
}

/* Clickable header */
#event-members-area.bkr-active .bkr-summary-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 24px !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--bkr-border) !important;
  background: var(--bkr-surface) !important;
  transition: background 0.15s !important;
  user-select: none !important;
}

#event-members-area.bkr-active .bkr-summary-header:hover {
  background: var(--bkr-bg) !important;
}

#event-members-area.bkr-active .bkr-sum-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bkr-text) !important;
  white-space: nowrap !important;
}

#event-members-area.bkr-active .bkr-sum-title .fa {
  color: var(--bkr-primary) !important;
  font-size: 14px !important;
}

#event-members-area.bkr-active .bkr-sum-count {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bkr-text-muted) !important;
  background: var(--bkr-bg) !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  white-space: nowrap !important;
}

#event-members-area.bkr-active .bkr-sum-spacer {
  flex: 1 !important;
}

#event-members-area.bkr-active .bkr-sum-total-preview {
  font-size: 13px !important;
  color: var(--bkr-text-muted) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

#event-members-area.bkr-active .bkr-sum-total-preview strong {
  color: var(--bkr-text) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-left: 4px !important;
}

#event-members-area.bkr-active .bkr-sum-chevron {
  color: var(--bkr-text-muted) !important;
  font-size: 13px !important;
  transition: transform 0.2s !important;
  flex-shrink: 0 !important;
}

/* Clear basket inside the summary header — reset margin */
#event-members-area.bkr-active .bkr-summary-header .bkr-clear-basket-summary {
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

/* Collapsed state */
#event-members-area.bkr-active .bkr-summary-panel.bkr-collapsed .bkr-summary-body {
  display: none !important;
}

#event-members-area.bkr-active .bkr-summary-panel.bkr-collapsed .bkr-sum-chevron {
  transform: rotate(-90deg) !important;
}

/* ── Summary table inside the panel ── */
#event-members-area.bkr-active .bkr-summary-panel .summary-table {
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: var(--bkr-surface) !important;
}

/* All cells */
#event-members-area.bkr-active .bkr-summary-panel .summary-table td {
  font-size: 13px !important;
  color: var(--bkr-text) !important;
  padding: 11px 24px !important;
  border: none !important;
  border-bottom: 1px solid #f5f5f5 !important;
  vertical-align: middle !important;
}

/* Category header rows */
#event-members-area.bkr-active .bkr-summary-panel .summary-product-type td {
  background: var(--bkr-bg) !important;
  padding: 9px 24px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--bkr-text-muted) !important;
  border-bottom: 1px solid var(--bkr-border) !important;
}

/* Remove bold from the category <b> tag — CSS handles weight */
#event-members-area.bkr-active .bkr-summary-panel .summary-product-type td b {
  font-weight: 700 !important;
}

/* Cost column */
#event-members-area.bkr-active .bkr-summary-panel .summary-table .cost {
  text-align: right !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding-right: 24px !important;
}

/* ── Status indicators ── */
#event-members-area.bkr-active .bkr-sum-done {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--bkr-success) !important;
}

#event-members-area.bkr-active .bkr-sum-incomplete {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #f59e0b !important;
}

#event-members-area.bkr-active .bkr-sum-na {
  color: var(--bkr-border) !important;
  font-size: 14px !important;
}

/* Totals row */
#event-members-area.bkr-active .summary-table td b {
  font-weight: 700 !important;
}

/* Basket "Basket" header (top card) */
#event-members-area.bkr-active .product-type-body {
  margin: 0 !important;
  padding: 0 !important;
}

#event-members-area.bkr-active .product-type-table {
  border: none !important;
}

/* ── ADD-ON PRODUCTS BUTTON SECTION ─────────────────────────────
   The .add-ons-view row sits inside the product card, above the
   form.  We style it as a compact call-to-action banner that fits
   naturally alongside the rest of the redesigned card chrome.     */

#event-members-area.bkr-active .add-ons-view {
  margin: 12px 0 4px !important;
  padding: 0 !important;
}

#event-members-area.bkr-active .add-ons-view .col-md-12 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background-color: rgba(var(--bkr-primary-rgb), 0.04) !important;
  border: 1px solid rgba(var(--bkr-primary-rgb), 0.15) !important;
  border-radius: var(--bkr-radius-md) !important;
}

/* The button */
#event-members-area.bkr-active .addon-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  background-color: var(--bkr-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--bkr-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
  flex-shrink: 0 !important;
}

#event-members-area.bkr-active .addon-add-btn::before {
  content: "\f055"; /* fa-plus-circle */
  font-family: FontAwesome !important;
  font-weight: normal !important;
  font-size: 14px !important;
}

#event-members-area.bkr-active .addon-add-btn:hover {
  opacity: 0.88 !important;
}

/* Help text next to the button */
#event-members-area.bkr-active .addon-button-group.addon-button-text {
  flex: 1 !important;
  margin: 0 !important;
}

#event-members-area.bkr-active .addon-button-help-text {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--bkr-text-muted) !important;
  line-height: 1.4 !important;
}

/* Addon table area */
#event-members-area.bkr-active .addon-table {
  padding: 0 20px !important;
}

/* Forms inside product card — form controls */
#event-members-area.bkr-active .container-fluid.product .form-group {
  margin-bottom: 14px !important;
}

#event-members-area.bkr-active .container-fluid.product .form-control {
  border: 1px solid var(--bkr-border) !important;
  border-radius: var(--bkr-radius-sm) !important;
  color: var(--bkr-text) !important;
  padding: 8px 12px !important;
  height: auto !important;
  min-height: 38px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

#event-members-area.bkr-active .container-fluid.product .form-control:focus {
  border-color: var(--bkr-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--bkr-primary-rgb), 0.12) !important;
  outline: none !important;
}

#event-members-area.bkr-active .container-fluid.product .control-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bkr-text-muted) !important;
  margin-bottom: 4px !important;
}

/* File upload areas */
#event-members-area.bkr-active .fine-uploader {
  border: 2px dashed var(--bkr-border) !important;
  border-radius: var(--bkr-radius-md) !important;
  padding: 20px !important;
  text-align: center !important;
  background: var(--bkr-bg) !important;
  transition: border-color 0.2s !important;
}

#event-members-area.bkr-active .fine-uploader:hover {
  border-color: var(--bkr-primary) !important;
}

#event-members-area.bkr-active .qq-upload-button {
  background-color: var(--bkr-primary) !important;
  border: none !important;
  border-radius: var(--bkr-radius-sm) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}

/* ── Summary footer (discount + total) ── */

/* Hide the blank spacer row */
#event-members-area.bkr-active .bkr-summary-panel #summary-total tr:first-child td {
  display: none !important;
}

/* Footer background */
#event-members-area.bkr-active .bkr-summary-panel #summary-total td {
  background: var(--bkr-bg) !important;
  border-top: 1px solid var(--bkr-border) !important;
  border-bottom: none !important;
}

/* Discount row */
#event-members-area.bkr-active .bkr-summary-panel #summary-total tr.total:first-of-type td {
  padding: 12px 24px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--bkr-text-muted) !important;
  border-top: 1px solid var(--bkr-border) !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* Total cost row */
#event-members-area.bkr-active .bkr-summary-panel #summary-total tr.total:last-child td {
  padding: 16px 24px 20px !important;
  border-top: none !important;
  border-bottom: none !important;
}

#event-members-area.bkr-active .bkr-summary-panel #summary-total #total-price,
#event-members-area.bkr-active .bkr-summary-panel #summary-total #total-discount {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--bkr-text) !important;
  letter-spacing: -0.02em !important;
}

#event-members-area.bkr-active .bkr-summary-panel .summary-table .muted {
  color: var(--bkr-text-muted) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
}

/* Guest form inside table-booking product */
#event-members-area.bkr-active .container-fluid.product table {
  background: transparent !important;
  border: none !important;
}

#event-members-area.bkr-active .container-fluid.product table td {
  background: transparent !important;
  border: none !important;
  vertical-align: top !important;
}

/* Addon products table */
#event-members-area.bkr-active .addon-products-table {
  background: transparent !important;
}

#event-members-area.bkr-active .addon-products-table table {
  background: transparent !important;
}

/* Spacer cleanup */
#event-members-area.bkr-active .spacer {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Product card — panel-title area cleanup */
#event-members-area.bkr-active .container-fluid.product .panel-title {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Editing close date at bottom of card */
#event-members-area.bkr-active .container-fluid.product + .product-close-date,
#event-members-area.bkr-active .container-fluid.product ~ .col-xs-12.product-close-date {
  padding: 8px 20px !important;
}

/* Error label styling */
#event-members-area.bkr-active label.error {
  color: var(--bkr-error) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Discount type dropdown inside product card */
#event-members-area.bkr-active .container-fluid.product .discount-type {
  font-size: 12px !important;
  padding: 6px 10px !important;
}


/* ─────────────────────────────────────────────────────────────────
   8c. CUSTOM PRODUCT DROPDOWN (shared)
   ───────────────────────────────────────────────────────────────── */

/* Wrapper — positions dropdown panel relative to trigger */
#event-members-area.bkr-active .bkr-select-wrap {
  position: relative;
}

/* Trigger button */
#event-members-area.bkr-active .bkr-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--bkr-surface);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-sm);
  color: var(--bkr-text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  outline: none;
}

#event-members-area.bkr-active .bkr-select-trigger:hover {
  border-color: var(--bkr-primary);
}

#event-members-area.bkr-active .bkr-select-trigger.bkr-dd-open {
  border-color: var(--bkr-primary);
  box-shadow: 0 0 0 3px rgba(var(--bkr-primary-rgb), 0.12);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#event-members-area.bkr-active .bkr-select-placeholder {
  color: var(--bkr-text-muted);
}

#event-members-area.bkr-active .bkr-select-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 10px;
}

#event-members-area.bkr-active .bkr-select-chevron {
  transition: transform 0.2s;
  font-size: 12px;
  color: var(--bkr-text-muted);
  flex-shrink: 0;
}

#event-members-area.bkr-active .bkr-select-trigger.bkr-dd-open .bkr-select-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
#event-members-area.bkr-active .bkr-dd-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--bkr-surface);
  border: 1px solid var(--bkr-primary);
  border-top: none;
  border-bottom-left-radius: var(--bkr-radius-sm);
  border-bottom-right-radius: var(--bkr-radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  display: none;
  overflow: hidden;
}

#event-members-area.bkr-active .bkr-dd-panel.bkr-dd-show {
  display: block;
  animation: bkrDdSlideDown 0.15s ease;
}

@keyframes bkrDdSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Search bar */
#event-members-area.bkr-active .bkr-dd-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bkr-border);
  background: var(--bkr-bg);
}

#event-members-area.bkr-active .bkr-dd-search-input {
  width: 100%;
  border: 1px solid var(--bkr-border) !important;
  border-radius: 6px !important;
  padding: 8px 10px 8px 34px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  background-color: var(--bkr-surface) !important;
  color: var(--bkr-text) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  height: auto !important;
  box-shadow: none !important;
}

#event-members-area.bkr-active .bkr-dd-search-input:focus {
  border-color: var(--bkr-primary) !important;
}

/* Scrollable list */
#event-members-area.bkr-active .bkr-dd-scroll {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
}

#event-members-area.bkr-active .bkr-dd-scroll::-webkit-scrollbar { width: 5px; }
#event-members-area.bkr-active .bkr-dd-scroll::-webkit-scrollbar-track { background: transparent; }
#event-members-area.bkr-active .bkr-dd-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

/* Empty state */
#event-members-area.bkr-active .bkr-dd-empty {
  padding: 24px;
  text-align: center;
  color: var(--bkr-text-muted);
  font-size: 13px;
  display: none;
}


/* ─────────────────────────────────────────────────────────────────
   8d. CARDS DROPDOWN (Option B)
   ───────────────────────────────────────────────────────────────── */

/* Product type section */
#event-members-area.bkr-active .bkr-dd-type {
  border-bottom: 1px solid var(--bkr-border);
}
#event-members-area.bkr-active .bkr-dd-type:last-of-type { border-bottom: none; }

/* Type header */
#event-members-area.bkr-active .bkr-dd-type-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 8px;
  cursor: pointer;
  user-select: none;
}
#event-members-area.bkr-active .bkr-dd-type-header:hover { background: var(--bkr-bg); }

/* Type icon */
#event-members-area.bkr-active .bkr-dd-type-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* Type name */
#event-members-area.bkr-active .bkr-dd-type-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex: 1;
}

/* Type item count */
#event-members-area.bkr-active .bkr-dd-type-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--bkr-text-muted);
  background: var(--bkr-bg);
  padding: 2px 7px;
  border-radius: 10px;
}

/* Chevron */
#event-members-area.bkr-active .bkr-dd-type-chev {
  font-size: 10px;
  color: #94A3B8;
  transition: transform 0.2s;
}
#event-members-area.bkr-active .bkr-dd-type-open > .bkr-dd-type-header .bkr-dd-type-chev {
  transform: rotate(180deg);
}

/* Collapsible body */
#event-members-area.bkr-active .bkr-dd-type-body {
  display: none;
  padding: 0 12px 10px;
}
#event-members-area.bkr-active .bkr-dd-type-open > .bkr-dd-type-body {
  display: block;
}

/* Subgroup header */
#event-members-area.bkr-active .bkr-dd-subgroup {
  font-size: 10px;
  font-weight: 600;
  color: var(--bkr-text-muted);
  padding: 8px 6px 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#event-members-area.bkr-active .bkr-dd-subgroup::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bkr-border);
}

/* Product card */
#event-members-area.bkr-active .bkr-dd-card {
  border: 1px solid var(--bkr-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  position: relative;
}
#event-members-area.bkr-active .bkr-dd-card:last-child { margin-bottom: 0; }

#event-members-area.bkr-active .bkr-dd-card:hover {
  border-color: rgba(var(--bkr-primary-rgb), 0.4);
  background: rgba(var(--bkr-primary-rgb), 0.02);
}

#event-members-area.bkr-active .bkr-dd-card.bkr-dd-selected {
  border-color: var(--bkr-primary);
  background: rgba(var(--bkr-primary-rgb), 0.04);
  box-shadow: 0 0 0 2px rgba(var(--bkr-primary-rgb), 0.12);
}

#event-members-area.bkr-active .bkr-dd-card.bkr-dd-kb {
  border-color: rgba(var(--bkr-primary-rgb), 0.4);
  background: rgba(var(--bkr-primary-rgb), 0.02);
}

#event-members-area.bkr-active .bkr-dd-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#event-members-area.bkr-active .bkr-dd-card-name {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}

#event-members-area.bkr-active .bkr-dd-card.bkr-dd-selected .bkr-dd-card-name {
  color: var(--bkr-primary);
}

#event-members-area.bkr-active .bkr-dd-card-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--bkr-primary);
  white-space: nowrap;
}
#event-members-area.bkr-active .bkr-dd-card-price.bkr-dd-free {
  color: var(--bkr-success);
  font-weight: 600;
  font-size: 11px;
}

#event-members-area.bkr-active .bkr-dd-card-desc {
  font-size: 11px;
  color: var(--bkr-text-muted);
  line-height: 1.4;
  margin-top: 3px;
}

/* Selected checkmark */
#event-members-area.bkr-active .bkr-dd-card.bkr-dd-selected::after {
  content: '\f00c';
  font-family: FontAwesome;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  color: var(--bkr-primary);
}


/* ─────────────────────────────────────────────────────────────────
   8e. LIST DROPDOWN (Option C)
   ───────────────────────────────────────────────────────────────── */

/* Product type section */
#event-members-area.bkr-active .bkr-dd-lt {
  border-bottom: 1px solid var(--bkr-border);
}
#event-members-area.bkr-active .bkr-dd-lt:last-of-type { border-bottom: none; }

/* Type header */
#event-members-area.bkr-active .bkr-dd-lt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bkr-bg);
  user-select: none;
  cursor: pointer;
}
#event-members-area.bkr-active .bkr-dd-lt-header:hover {
  background: #EEF2F6;
}

/* Colour dot */
#event-members-area.bkr-active .bkr-dd-lt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Type name */
#event-members-area.bkr-active .bkr-dd-lt-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--bkr-text-muted);
  flex: 1;
}

/* Item count */
#event-members-area.bkr-active .bkr-dd-lt-count {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 600;
}

/* Chevron */
#event-members-area.bkr-active .bkr-dd-lt-chev {
  font-size: 9px;
  color: #94A3B8;
  transition: transform 0.2s;
}
#event-members-area.bkr-active .bkr-dd-type-open > .bkr-dd-lt-header .bkr-dd-lt-chev {
  transform: rotate(180deg);
}

/* Collapsible body */
#event-members-area.bkr-active .bkr-dd-lt-body {
  display: none;
}
#event-members-area.bkr-active .bkr-dd-type-open > .bkr-dd-lt-body {
  display: block;
}

/* Subgroup */
#event-members-area.bkr-active .bkr-dd-lt-subgroup {
  font-size: 10px;
  font-weight: 600;
  color: #94A3B8;
  padding: 8px 16px 3px 28px;
  letter-spacing: 0.3px;
}

/* Option row */
#event-members-area.bkr-active .bkr-dd-lo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px 9px 28px;
  cursor: pointer;
  transition: all 0.1s;
  font-size: 13px;
  gap: 12px;
}
#event-members-area.bkr-active .bkr-dd-lo:hover { background: var(--bkr-bg); }
#event-members-area.bkr-active .bkr-dd-lo.bkr-dd-selected { background: rgba(var(--bkr-primary-rgb), 0.05); }
#event-members-area.bkr-active .bkr-dd-lo.bkr-dd-kb { background: var(--bkr-bg); }

#event-members-area.bkr-active .bkr-dd-lo-name { flex: 1; }
#event-members-area.bkr-active .bkr-dd-lo.bkr-dd-selected .bkr-dd-lo-name {
  color: var(--bkr-primary);
  font-weight: 600;
}

#event-members-area.bkr-active .bkr-dd-lo-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--bkr-text-muted);
  background: var(--bkr-bg);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
#event-members-area.bkr-active .bkr-dd-lo-price.bkr-dd-lo-free {
  color: var(--bkr-success);
  background: rgba(var(--bkr-success-rgb), 0.08);
}
#event-members-area.bkr-active .bkr-dd-lo.bkr-dd-selected .bkr-dd-lo-price {
  background: rgba(var(--bkr-primary-rgb), 0.1);
  color: var(--bkr-primary);
}

/* ── dropdownHidePrices ──────────────────────────────────────
   Hides product prices in the add-to-basket dropdown.
   Works for both 'cards' and 'list' dropdownStyle values.
   Enabled by setting dropdownHidePrices: true in CHECKOUT_CONFIG. */
#event-members-area.bkr-active.bkr-dd-no-prices .bkr-dd-card-price,
#event-members-area.bkr-active.bkr-dd-no-prices .bkr-dd-lo-price {
  display: none !important;
}

#event-members-area.bkr-active .bkr-dd-lo-check {
  width: 16px;
  text-align: center;
  color: var(--bkr-primary);
  font-size: 11px;
  opacity: 0;
  flex-shrink: 0;
}
#event-members-area.bkr-active .bkr-dd-lo.bkr-dd-selected .bkr-dd-lo-check { opacity: 1; }

/* Subgroup items get extra indent */
#event-members-area.bkr-active .bkr-dd-lt-body .bkr-dd-lt-subgroup ~ .bkr-dd-lo {
  padding-left: 38px;
}


/* ─────────────────────────────────────────────────────────────────
   8f. CUSTOM DROPDOWN — DARK THEME
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active.bkr-dark .bkr-dd-search {
  background: var(--bkr-surface);
}

#event-members-area.bkr-active.bkr-dark .bkr-dd-search-input {
  background-color: var(--bkr-bg) !important;
  border-color: var(--bkr-border) !important;
  color: var(--bkr-text) !important;
}

#event-members-area.bkr-active.bkr-dark .bkr-dd-type-header:hover,
#event-members-area.bkr-active.bkr-dark .bkr-dd-lt-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

#event-members-area.bkr-active.bkr-dark .bkr-dd-lt-header {
  background: var(--bkr-bg);
}

#event-members-area.bkr-active.bkr-dark .bkr-dd-card:hover {
  background: rgba(255, 255, 255, 0.03);
}

#event-members-area.bkr-active.bkr-dark .bkr-dd-lo:hover,
#event-members-area.bkr-active.bkr-dark .bkr-dd-lo.bkr-dd-kb {
  background: rgba(255, 255, 255, 0.04);
}

#event-members-area.bkr-active.bkr-dark .bkr-dd-scroll::-webkit-scrollbar-thumb {
  background: var(--bkr-border);
}


/* ─────────────────────────────────────────────────────────────────
   9. SAVED ITEMS
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active .container-fluid.product {
  background-color: var(--bkr-surface);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md);
  margin-bottom: 12px;
  padding: 16px;
  transition: box-shadow var(--bkr-transition-base);
}

#event-members-area.bkr-active .product-name strong.name {
  color: var(--bkr-text);
  font-size: 15px;
}

#event-members-area.bkr-active .product-price .price-value {
  color: var(--bkr-text);
  font-weight: 700;
  font-size: 16px;
}

#event-members-area.bkr-active .product-price .price-tag {
  color: var(--bkr-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#event-members-area.bkr-active .product-price .currency {
  color: var(--bkr-text);
  font-weight: 700;
}

/* Item counter */
#event-members-area.bkr-active .counter.text-center {
  background-color: var(--bkr-bg);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-sm);
  color: var(--bkr-text-muted);
  font-weight: 600;
  font-size: 12px;
}

/* Progress bars */
#event-members-area.bkr-active .progress {
  background-color: var(--bkr-bg);
  border-radius: var(--bkr-radius-sm);
  height: 8px;
  box-shadow: none;
  overflow: hidden;
}

#event-members-area.bkr-active .progress-bar-success {
  background-color: var(--bkr-success);
}

/* Top basket header */
#event-members-area.bkr-active .top-basket-text,
#event-members-area.bkr-active .top-basket-counter {
  color: var(--bkr-text);
}

/* Action buttons row */
#event-members-area.bkr-active .product-action-buttons {
  margin-bottom: 16px;
}


/* ─────────────────────────────────────────────────────────────────
   10. FORM GROUPING (Accordion / Wizard / Grouped)
   ───────────────────────────────────────────────────────────────── */

/* Accordion group */
#event-members-area.bkr-active .bkr-form-group-accordion {
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md);
  margin-bottom: 8px;
  overflow: hidden;
  background-color: var(--bkr-surface);
}

#event-members-area.bkr-active .bkr-form-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background-color: var(--bkr-bg);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--bkr-transition-base);
  border-bottom: 1px solid transparent;
}

#event-members-area.bkr-active .bkr-form-group-header:hover {
  background-color: rgba(var(--bkr-primary-rgb, 69, 173, 168), 0.04);
}

#event-members-area.bkr-active .bkr-form-group-header.bkr-active-group {
  border-bottom-color: var(--bkr-border);
}

#event-members-area.bkr-active .bkr-form-group-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--bkr-text);
  margin: 0;
}

#event-members-area.bkr-active .bkr-form-group-chevron {
  color: var(--bkr-text-muted);
  transition: transform 250ms ease-in-out;
  font-size: 14px;
}

#event-members-area.bkr-active .bkr-form-group-header.bkr-active-group .bkr-form-group-chevron {
  transform: rotate(180deg);
  color: var(--bkr-primary);
}

#event-members-area.bkr-active .bkr-form-group-header.bkr-active-group .bkr-form-group-status {
  background-color: var(--bkr-primary);
  color: #FFFFFF;
}

#event-members-area.bkr-active .bkr-form-group-header.bkr-active-group .bkr-form-group-heading {
  color: var(--bkr-primary);
}

#event-members-area.bkr-active .bkr-form-group-content {
  padding: 16px;
  overflow: hidden;
  transition: max-height 250ms ease-in-out, padding 250ms ease-in-out;
}

#event-members-area.bkr-active .bkr-form-group-content.bkr-collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Completion indicator on header */
#event-members-area.bkr-active .bkr-form-group-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 11px;
  flex-shrink: 0;
}

#event-members-area.bkr-active .bkr-form-group-status.bkr-complete {
  background-color: var(--bkr-success);
  color: #FFFFFF;
}

#event-members-area.bkr-active .bkr-form-group-status.bkr-incomplete {
  background-color: var(--bkr-border);
  color: var(--bkr-text-muted);
}

/* Form wizard step indicator */
#event-members-area.bkr-active .bkr-form-wizard-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--bkr-border);
}

#event-members-area.bkr-active .bkr-fwi-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.45;
  transition: opacity var(--bkr-transition-base);
}

#event-members-area.bkr-active .bkr-fwi-step.bkr-fwi-active {
  opacity: 1;
}

#event-members-area.bkr-active .bkr-fwi-step.bkr-fwi-completed {
  opacity: 0.7;
}

#event-members-area.bkr-active .bkr-fwi-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bkr-border);
  background-color: var(--bkr-surface);
  color: var(--bkr-text-muted);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--bkr-transition-base);
}

#event-members-area.bkr-active .bkr-fwi-step.bkr-fwi-active .bkr-fwi-number {
  background-color: var(--bkr-primary);
  border-color: var(--bkr-primary);
  color: #FFFFFF;
}

#event-members-area.bkr-active .bkr-fwi-step.bkr-fwi-completed .bkr-fwi-number {
  background-color: var(--bkr-primary);
  border-color: var(--bkr-primary);
  color: #FFFFFF;
}

#event-members-area.bkr-active .bkr-fwi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--bkr-text-muted);
  white-space: nowrap;
}

#event-members-area.bkr-active .bkr-fwi-step.bkr-fwi-active .bkr-fwi-label {
  color: var(--bkr-text);
  font-weight: 600;
}

#event-members-area.bkr-active .bkr-fwi-connector {
  flex: 0 0 40px;
  height: 2px;
  background-color: var(--bkr-border);
  margin: 0 8px;
  transition: background-color var(--bkr-transition-base);
}

#event-members-area.bkr-active .bkr-fwi-connector.bkr-fwi-completed {
  background-color: var(--bkr-primary);
}

/* Validation: missing required field highlight */
#event-members-area.bkr-active .bkr-field-missing .form-control {
  border-color: var(--bkr-error) !important;
  box-shadow: 0 0 0 3px rgba(var(--bkr-error-rgb), 0.15) !important;
}

#event-members-area.bkr-active .bkr-field-missing label,
#event-members-area.bkr-active .bkr-field-missing .control-label {
  color: var(--bkr-error) !important;
}

/* Shake animation for Next button */
@keyframes bkrShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

#event-members-area.bkr-active .bkr-shake {
  animation: bkrShake 0.5s ease-in-out;
}

/* Wizard layout nav */
#event-members-area.bkr-active .bkr-form-wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  margin-top: 16px;
  border-top: 1px solid var(--bkr-border);
}

#event-members-area.bkr-active .bkr-form-wizard-progress {
  font-size: 13px;
  color: var(--bkr-text-muted);
  font-weight: 500;
}

#event-members-area.bkr-active .bkr-form-wizard-progress strong {
  color: var(--bkr-text);
}

#event-members-area.bkr-active .bkr-form-wizard-buttons {
  display: flex;
  gap: 8px;
}

#event-members-area.bkr-active .bkr-wizard-back {
  background-color: transparent;
  border: 1px solid var(--bkr-border);
  color: var(--bkr-text);
  padding: 8px 20px;
  border-radius: var(--bkr-radius-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--bkr-transition-base);
}

#event-members-area.bkr-active .bkr-wizard-back:hover {
  border-color: var(--bkr-primary);
  color: var(--bkr-primary);
}

#event-members-area.bkr-active .bkr-wizard-next {
  background-color: var(--bkr-primary);
  border: none;
  color: #FFFFFF;
  padding: 8px 20px;
  border-radius: var(--bkr-radius-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--bkr-transition-base);
}

#event-members-area.bkr-active .bkr-wizard-next:hover {
  filter: brightness(0.9);
}

/* Grouped layout */
#event-members-area.bkr-active .bkr-form-group-card {
  background-color: var(--bkr-surface);
  border: 1px solid var(--bkr-border);
  border-radius: var(--bkr-radius-md);
  padding: 20px;
  margin-bottom: 24px;
}

#event-members-area.bkr-active .bkr-form-group-card-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--bkr-text);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bkr-border);
}


/* ─────────────────────────────────────────────────────────────────
   10a. FORM GROUP PROGRESS BARS
   Three visual styles that track mandatory-field completion inside
   each form group (accordion panel / wizard step / grouped card).
   Activated by setting progressBar: true in CHECKOUT_CONFIG.
   Visual style is controlled by progressBarStyle: 'strip'|'dots'|'detail'.

   CSS class prefix: .bkr-fpb-*
   State class:      .bkr-fpb-complete  (added when all required fields done)
   ───────────────────────────────────────────────────────────────── */

/* ── Shared fill animation ────────────────────────────────────── */
#event-members-area.bkr-active .bkr-fpb-strip-fill,
#event-members-area.bkr-active .bkr-fpb-detail-fill {
  transition: width 380ms cubic-bezier(0.34, 1.2, 0.64, 1),
              background-color 280ms ease;
}


/* ══════════════════════════════════════════════════════════════════
   Style A — THIN STRIP
   A small "Required fields · 0 / 3" caption row sits above a 3 px
   coloured bar. The whole block lives between the group header and
   its content area (accordion / grouped). In wizard mode a compact
   strip + count sits below each step label in the indicator.
   ══════════════════════════════════════════════════════════════════ */

/* Wrapper that contains both the caption row and the strip */
#event-members-area.bkr-active .bkr-fpb-a-wrap {
  background: var(--bkr-bg);
  border-bottom: 1px solid var(--bkr-border);
}

/* Caption row: label left, count chip right */
#event-members-area.bkr-active .bkr-fpb-a-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px 4px;
}

/* "Required fields" label (with asterisk icon) */
#event-members-area.bkr-active .bkr-fpb-a-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bkr-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 250ms ease;
}
#event-members-area.bkr-active .bkr-fpb-a-label.bkr-fpb-complete { color: var(--bkr-success); }

/* "0 / 3" count pill */
#event-members-area.bkr-active .bkr-fpb-a-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bkr-text-muted);
  font-variant-numeric: tabular-nums;
  background: var(--bkr-border);
  border-radius: 10px;
  padding: 1px 8px;
  transition: color 250ms ease, background-color 250ms ease;
}
#event-members-area.bkr-active .bkr-fpb-a-count.bkr-fpb-complete {
  color: var(--bkr-success);
  background: rgba(22, 163, 74, 0.1);
}

/* 3 px horizontal track */
#event-members-area.bkr-active .bkr-fpb-strip-track {
  height: 3px;
  background: var(--bkr-error);
  overflow: hidden;
}

/* Animated fill */
#event-members-area.bkr-active .bkr-fpb-strip-fill {
  height: 100%;
  width: 0%;
  background: var(--bkr-success);
}
#event-members-area.bkr-active .bkr-fpb-strip-fill.bkr-fpb-complete { background: var(--bkr-success); }

/* ─ Wizard compact strip (below step label) ─ */
#event-members-area.bkr-active .bkr-fpb-wiz-strip-wrap {
  width: 100%;
  padding-top: 6px;
}
#event-members-area.bkr-active .bkr-fpb-wiz-strip-wrap .bkr-fpb-strip-track { border-radius: 2px; }

/* Tiny "req. 0/3" count below the strip */
#event-members-area.bkr-active .bkr-fpb-wiz-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--bkr-text-muted);
  text-align: center;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  transition: color 250ms ease;
}
#event-members-area.bkr-active .bkr-fpb-wiz-count.bkr-fpb-complete { color: var(--bkr-success); }


/* ══════════════════════════════════════════════════════════════════
   Style B — DOT BADGE
   One dot per required field shown inline in the group header.
   Dots fill left-to-right as fields are completed. A "0/3" count
   badge sits to the right of the dots.
   In accordion: sits in the header row, between left content and chevron.
   In wizard: compact column below the step label.
   In grouped: sits in a flex row with the card heading.
   ══════════════════════════════════════════════════════════════════ */

/* Outer indicator row (accordion / grouped) */
#event-members-area.bkr-active .bkr-fpb-b-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* "Required fields" text label */
#event-members-area.bkr-active .bkr-fpb-b-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bkr-text-muted);
  white-space: nowrap;
  transition: color 250ms ease;
}
#event-members-area.bkr-active .bkr-fpb-b-label.bkr-fpb-complete { color: var(--bkr-success); }

/* Small separator dot between label and dots */
#event-members-area.bkr-active .bkr-fpb-b-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bkr-border);
  flex-shrink: 0;
}

/* Dots container */
#event-members-area.bkr-active .bkr-fpb-dots { display: flex; align-items: center; gap: 4px; }

/* Individual dot (red = incomplete, green = filled/complete) */
#event-members-area.bkr-active .bkr-fpb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bkr-error);
  transition: background-color 280ms ease, transform 200ms ease;
  flex-shrink: 0;
}
#event-members-area.bkr-active .bkr-fpb-dot.bkr-fpb-filled {
  background: var(--bkr-success);
  transform: scale(1.15);
}
#event-members-area.bkr-active .bkr-fpb-dot.bkr-fpb-filled.bkr-fpb-complete { background: var(--bkr-success); }

/* Count badge ("0/3") */
#event-members-area.bkr-active .bkr-fpb-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--bkr-text-muted);
  background: var(--bkr-bg);
  border: 1px solid var(--bkr-border);
  border-radius: 10px;
  padding: 1px 7px;
  transition: all 250ms ease;
  white-space: nowrap;
}
#event-members-area.bkr-active .bkr-fpb-badge.bkr-fpb-complete {
  color: #fff;
  background: var(--bkr-success);
  border-color: var(--bkr-success);
}

/* ─ Wizard compact dots (stacked column under step label) ─ */
#event-members-area.bkr-active .bkr-fpb-wiz-dots-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-top: 6px;
  width: 100%;
}

/* ─ Grouped card: heading + dots in a flex row ─ */
#event-members-area.bkr-active .bkr-fpb-card-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bkr-border);
  margin-bottom: 16px;
}
/* When dots style is active, suppress the card heading's own bottom border
   since it's now on the flex row wrapper instead */
#event-members-area.bkr-active .bkr-fpb-card-heading-row .bkr-form-group-card-heading {
  margin: 0;
  padding: 0;
  border-bottom: none;
}


/* ══════════════════════════════════════════════════════════════════
   Style C — DETAIL BAR (segmented)
   A dedicated row: "Required fields | [▮▮▯] 2 / 3"
   The bar is divided into N equal blocks (one per required field).
   Blocks fill left-to-right as fields are completed, making per-field
   progress immediately legible at a glance.
   Recommended for longer forms where field-by-field visibility matters.
   Lives between the group header and content. In wizard mode, a
   compact segmented bar + count is shown under each step label.

   Implementation: .bkr-fpb-detail-grid overlays the fill bar and
   carries the divider lines as a JS-generated linear-gradient stamped
   as an inline background-image (N-1 white hairlines at 100%/N intervals).
   ══════════════════════════════════════════════════════════════════ */

/* Outer wrapper row (accordion / grouped) */
#event-members-area.bkr-active .bkr-fpb-c-wrap {
  padding: 7px 16px 8px;
  background: var(--bkr-bg);
  border-bottom: 1px solid var(--bkr-border);
}

/* Inner flex row */
#event-members-area.bkr-active .bkr-fpb-c-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Required fields" section label */
#event-members-area.bkr-active .bkr-fpb-c-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bkr-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 100px;
  transition: color 250ms ease;
}
#event-members-area.bkr-active .bkr-fpb-c-label.bkr-fpb-complete { color: var(--bkr-success); }

/* Thin vertical separator between label and bar */
#event-members-area.bkr-active .bkr-fpb-c-sep {
  width: 1px;
  height: 12px;
  background: var(--bkr-border);
  flex-shrink: 0;
}

/* 8 px segmented bar track (slightly taller than strip to show segments clearly) */
#event-members-area.bkr-active .bkr-fpb-detail-track {
  flex: 1;
  position: relative;
  height: 8px;
  background: var(--bkr-error);
  border-radius: 4px;
  overflow: hidden;
  min-width: 40px;
}

/* Animated fill — sits below the grid overlay */
#event-members-area.bkr-active .bkr-fpb-detail-fill {
  position: relative;
  z-index: 0;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: var(--bkr-success);
}
#event-members-area.bkr-active .bkr-fpb-detail-fill.bkr-fpb-complete { background: var(--bkr-success); }

/* Segment divider overlay — absolutely covers the track, draws white hairlines
   via an inline background-image set by _fpbSegmentGradient() in JS.
   Sits above the fill (z-index: 1) so dividers are always visible. */
#event-members-area.bkr-active .bkr-fpb-detail-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 4px;
}

/* "2 / 3" count */
#event-members-area.bkr-active .bkr-fpb-c-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bkr-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
  transition: color 250ms ease;
}
#event-members-area.bkr-active .bkr-fpb-c-count.bkr-fpb-complete { color: var(--bkr-success); }

/* ─ Wizard compact detail (below step label) ─ */
/* Reuses .bkr-fpb-wiz-strip-wrap + .bkr-fpb-wiz-count from Style A */
#event-members-area.bkr-active .bkr-fpb-wiz-detail-wrap .bkr-fpb-detail-track {
  border-radius: 2px;
  height: 4px;
  min-width: 0;
}
#event-members-area.bkr-active .bkr-fpb-wiz-detail-wrap .bkr-fpb-detail-grid {
  border-radius: 2px;
}

/* ─ Wizard step layout override ─
   When progress bars are active the indicator adds .bkr-fpb-wizard-active.
   Each .bkr-fwi-step switches from a horizontal row (number | label)
   to a vertical column (number → label → progress bar), matching the
   prototype design. The connector is re-anchored to the circle centre. */
#event-members-area.bkr-active .bkr-form-wizard-indicator.bkr-fpb-wizard-active {
  align-items: flex-start; /* steps grow downward, not stretched to tallest */
}

#event-members-area.bkr-active .bkr-form-wizard-indicator.bkr-fpb-wizard-active .bkr-fwi-step {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 64px;
}

/* Re-anchor connector to sit at mid-height of the 30 px number circle */
#event-members-area.bkr-active .bkr-form-wizard-indicator.bkr-fpb-wizard-active .bkr-fwi-connector {
  margin-top: 14px;   /* (30px circle height / 2) - (2px connector height / 2) */
  align-self: flex-start;
}


/* ─────────────────────────────────────────────────────────────────
   11. FORM DESIGNER MODE
   ───────────────────────────────────────────────────────────────── */

#event-members-area.bkr-active .bkr-field-number {
  position: absolute;
  top: 6px;
  left: 0;
  width: auto;
  height: auto;
  display: inline-block;
  padding: 2px 7px;
  background-color: var(--bkr-secondary);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-family: monospace;
  white-space: nowrap;
}

#event-members-area.bkr-active .bkr-designer-active .form-group {
  position: relative;
  padding-top: 28px;
  outline: 2px dashed rgba(var(--bkr-secondary-rgb, 84, 121, 128), 0.4);
  outline-offset: 2px;
}

#event-members-area.bkr-active .bkr-field-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  cursor: pointer;
  pointer-events: all;
  vertical-align: middle;
  transition: background 0.15s;
}
#event-members-area.bkr-active .bkr-field-copy .fa {
  font-size: 9px;
  line-height: 1;
  color: #fff;
}
#event-members-area.bkr-active .bkr-field-copy:hover {
  background: rgba(255,255,255,0.4);
}

#event-members-area.bkr-active .bkr-designer-card-slug {
  background: var(--bkr-secondary);
  color: #fff;
  font-size: 11px;
  font-family: monospace;
  padding: 5px 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}
#event-members-area.bkr-active .bkr-designer-card-slug .bkr-designer-slug-label {
  opacity: 0.75;
  font-style: italic;
}
#event-members-area.bkr-active .bkr-designer-card-slug code {
  color: #fff;
  font-size: 11px;
  background: none;
  font-weight: 700;
}

/* Drag-selected field highlight — base */
#event-members-area.bkr-active .bkr-designer-active .form-group.bkr-designer-selected {
  outline-style: solid !important;
  outline-width: 2px !important;
}

/* Per-group colours (border + background tint) */
#event-members-area.bkr-active .bkr-designer-active .form-group.bkr-ds-group-0 { outline-color: #2563eb !important; background: rgba(37,99,235,0.07); }
#event-members-area.bkr-active .bkr-designer-active .form-group.bkr-ds-group-1 { outline-color: #16a34a !important; background: rgba(22,163,74,0.07); }
#event-members-area.bkr-active .bkr-designer-active .form-group.bkr-ds-group-2 { outline-color: #d97706 !important; background: rgba(217,119,6,0.07); }
#event-members-area.bkr-active .bkr-designer-active .form-group.bkr-ds-group-3 { outline-color: #9333ea !important; background: rgba(147,51,234,0.07); }
#event-members-area.bkr-active .bkr-designer-active .form-group.bkr-ds-group-4 { outline-color: #db2777 !important; background: rgba(219,39,119,0.07); }
#event-members-area.bkr-active .bkr-designer-active .form-group.bkr-ds-group-5 { outline-color: #0891b2 !important; background: rgba(8,145,178,0.07); }

/* Drag-select rectangle */
.bkr-designer-selection {
  position: fixed;
  border: 2px dashed rgba(var(--bkr-secondary-rgb, 84, 121, 128), 0.9);
  background: rgba(var(--bkr-secondary-rgb, 84, 121, 128), 0.08);
  pointer-events: none;
  z-index: 99998;
  border-radius: 3px;
}

/* Copy toast */
.bkr-designer-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #1a1a2e;
  color: #fff;
  font-size: 13px;
  font-family: monospace;
  padding: 9px 16px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 99999;
  transition: opacity 0.35s ease;
  opacity: 1;
}
.bkr-designer-toast.bkr-designer-toast-hide {
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────────────
   12. ANIMATIONS
   ───────────────────────────────────────────────────────────────── */

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #event-members-area.bkr-active *,
  #event-members-area.bkr-active *::before,
  #event-members-area.bkr-active *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ─────────────────────────────────────────────────────────────────
   13. RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

/* Mobile: < 768px */
@media (max-width: 767px) {
  /* Wizard: simplified */
  #event-members-area.bkr-active .basket-wizard-item:not(.selected) .basket-wizard-item-help-text {
    display: none;
  }

  #event-members-area.bkr-active .basket-wizard-item-text {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  #event-members-area.bkr-active .basket-wizard-item:not(:last-child)::after {
    top: 14px;
  }

  /* Buttons full-width */
  #event-members-area.bkr-active .btn-primary,
  #event-members-area.bkr-active .btn-success,
  #event-members-area.bkr-active .btn-default {
    width: 100%;
    margin-bottom: 8px;
  }

  /* Form wizard nav stacked */
  #event-members-area.bkr-active .bkr-form-wizard-nav {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  #event-members-area.bkr-active .bkr-form-wizard-buttons {
    width: 100%;
    flex-direction: column;
  }

  #event-members-area.bkr-active .bkr-wizard-back,
  #event-members-area.bkr-active .bkr-wizard-next {
    width: 100%;
  }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  #event-members-area.bkr-active .basket-wizard-item-text {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  /* Max content width */
  #event-members-area.bkr-active .personal-space-content {
    max-width: 1280px;
  }
}


/* ─────────────────────────────────────────────────────────────────
   DARK THEME OVERRIDES
   Only for styles that can't be handled by CSS variable swaps alone.
   ───────────────────────────────────────────────────────────────── */

/* Dark: adjust select dropdown arrow for dark bg */
#event-members-area.bkr-active.bkr-dark select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239CA3AF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Dark: ensure images/banners don't look jarring */
#event-members-area.bkr-active.bkr-dark .banner-image img {
  opacity: 0.85;
}

/* Dark: subtle border glow instead of dark shadows */
#event-members-area.bkr-active.bkr-dark .bkr-card,
#event-members-area.bkr-active.bkr-dark .panel,
#event-members-area.bkr-active.bkr-dark #menu-counters {
  box-shadow: 0 0 0 1px var(--bkr-border);
}

/* Dark: sidebar hover — very subtle on dark backgrounds */
#event-members-area.bkr-active.bkr-dark #menu-counters .nav-pills > li > a:hover,
#event-members-area.bkr-active.bkr-dark #menu-counters .nav-pills > li > a:focus {
  background-color: rgba(255, 255, 255, 0.035) !important;
}

/* Dark: DataTable header */
#event-members-area.bkr-active.bkr-dark .dataTable thead th {
  background-color: var(--bkr-surface);
}

/* Dark: input placeholder */
#event-members-area.bkr-active.bkr-dark .form-control::placeholder {
  color: var(--bkr-text-muted);
}

/* Dark: nav and header areas */
#event-members-area.bkr-active.bkr-dark .ev-menu,
#event-members-area.bkr-active.bkr-dark .navbar {
  background-color: var(--bkr-surface);
  border-color: var(--bkr-border);
}

#event-members-area.bkr-active.bkr-dark .navbar a {
  color: var(--bkr-text);
}

#event-members-area.bkr-active.bkr-dark .navbar a:hover {
  color: var(--bkr-primary);
}

/* Dark: wizard steps */
#event-members-area.bkr-active.bkr-dark .basket-wizard-item {
  background-color: var(--bkr-surface) !important;
  border-color: var(--bkr-border) !important;
}

#event-members-area.bkr-active.bkr-dark .basket-wizard-item.selected {
  background-color: var(--bkr-primary) !important;
  border-color: var(--bkr-primary) !important;
}

/* Dark: checkout buttons area */
#event-members-area.bkr-active.bkr-dark #basket-continue-buttons {
  background-color: var(--bkr-surface) !important;
  border-color: var(--bkr-border) !important;
}

/* Dark: modal */
#event-members-area.bkr-active.bkr-dark .modal-content {
  background-color: var(--bkr-surface) !important;
  border-color: var(--bkr-border) !important;
}

/* Dark: product cards — subtle border glow */
#event-members-area.bkr-active.bkr-dark .container-fluid.product {
  box-shadow: 0 0 0 1px var(--bkr-border) !important;
}

/* Dark: error bar */
#event-members-area.bkr-active.bkr-dark .basket-wizard-error {
  background: rgba(var(--bkr-error-rgb), 0.1) !important;
  border-color: rgba(var(--bkr-error-rgb), 0.3) !important;
}

/* Dark: footer */
#event-members-area.bkr-active.bkr-dark #footer {
  background-color: var(--bkr-surface) !important;
  border-color: var(--bkr-border) !important;
}

/* Dark: guest accordion */
#event-members-area.bkr-active.bkr-dark tr.guest td.accordion-toggle {
  background-color: var(--bkr-surface) !important;
  border-color: var(--bkr-border) !important;
}

#event-members-area.bkr-active.bkr-dark tr.guest td.accordion-toggle:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ════════════════════════════════════════════════════════════
   OPTION C — COLLAPSED CARD STATE
   Left border completion signal + meta row + chips
   ════════════════════════════════════════════════════════════ */

/* ── Left border completion signal ── */
#event-members-area.bkr-active .container-fluid.product {
  border-left: 2px solid var(--bkr-border) !important;
  /* NOTE: must carry ALL transition properties here — this rule comes later in
     the file with the same specificity+!important, so it wins the cascade and
     would otherwise kill the hover shadow/border transitions. */
  transition: border-left-color 0.2s, box-shadow 250ms ease-out, border-color 250ms ease-out !important;
}
#event-members-area.bkr-active .container-fluid.product.bkr-card-attention {
  border-left-color: #f59e0b !important;
}
#event-members-area.bkr-active .container-fluid.product.bkr-card-complete {
  border-left-color: #d1d5db !important;
}

/* ── Hide number badge (counter circle) ── */
#event-members-area.bkr-active .container-fluid.product .counter {
  display: none !important;
}

/* ── Header content: remove left margin now counter is gone ── */
#event-members-area.bkr-active .bkr-card-header-content {
  margin-left: 0 !important;
}

/* ── ✕ remove button ── */
#event-members-area.bkr-active .bkr-x-remove {
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  color: #ccc !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s, background 0.15s !important;
  flex-shrink: 0 !important;
  margin-left: 6px !important;
  padding: 0 !important;
}
#event-members-area.bkr-active .bkr-x-remove:hover {
  color: #e53e3e !important;
  background: #fff0f0 !important;
}

/* ── Review entry button ── */
#event-members-area.bkr-active .bkr-review-btn {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid var(--bkr-border) !important;
  background: transparent !important;
  color: var(--bkr-primary) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  transition: background 0.15s, color 0.15s !important;
}
#event-members-area.bkr-active .bkr-review-btn:hover {
  background: var(--bkr-primary) !important;
  color: #fff !important;
}
#event-members-area.bkr-active .bkr-review-btn .fa {
  font-size: 11px !important;
}

/* ── Meta row (below header, above form) ── */
#event-members-area.bkr-active .bkr-card-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 18px !important;
  background: #fff !important;
  border-top: 1px solid #f0f0f0 !important;
  flex-wrap: wrap !important;
}

/* ── Dates in meta row ── */
#event-members-area.bkr-active .bkr-meta-dates {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
#event-members-area.bkr-active .bkr-meta-date {
  font-size: 11px !important;
  color: #bbb !important;
}
#event-members-area.bkr-active .bkr-meta-date-lbl {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 10px !important;
  color: #ccc !important;
}
#event-members-area.bkr-active .bkr-meta-sep {
  font-size: 11px !important;
  color: #ddd !important;
}

/* ── Field count chips ── */
#event-members-area.bkr-active .bkr-meta-chips {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
#event-members-area.bkr-active .bkr-chip {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
#event-members-area.bkr-active .bkr-chip-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  display: inline-block !important;
  opacity: 0.6 !important;
}
#event-members-area.bkr-active .bkr-chip-req {
  background: #fef3c7 !important;
  color: #92400e !important;
}
#event-members-area.bkr-active .bkr-chip-opt {
  background: #f1f3f5 !important;
  color: #888 !important;
}
#event-members-area.bkr-active .bkr-chip-done {
  background: #dcfce7 !important;
  color: #15803d !important;
}
#event-members-area.bkr-active .bkr-chip-done-opt {
  background: #f0fdf4 !important;
  color: #86efac !important;
}
#event-members-area.bkr-active .bkr-chip .fa {
  font-size: 9px !important;
}

/* ── Price in header ── */
#event-members-area.bkr-active .bkr-header-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--bkr-text) !important;
  white-space: nowrap !important;
  margin-right: 6px !important;
}
#event-members-area.bkr-active .bkr-header-price-lbl {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--bkr-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-right: 2px !important;
}

/* ── Save/Delete area shown only when card is expanded ── */
#event-members-area.bkr-active .bkr-expanded-actions {
  padding: 14px 20px !important;
  border-top: 1px solid var(--bkr-border) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  background: var(--bkr-bg) !important;
}

/* ════════════════════════════════════════════════════════════
   REVIEW ENTRY MODAL
   ════════════════════════════════════════════════════════════ */

body.bkr-modal-open {
  overflow: hidden !important;
}

/* Overlay */
#event-members-area.bkr-active .bkr-review-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}
#event-members-area.bkr-active .bkr-review-overlay.bkr-review-visible {
  opacity: 1 !important;
}
#event-members-area.bkr-active .bkr-review-overlay.bkr-review-closing {
  opacity: 0 !important;
}

/* Modal panel */
#event-members-area.bkr-active .bkr-review-modal {
  background: #fff !important;
  border-radius: 12px !important;
  width: 100% !important;
  max-width: 780px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
  transform: translateY(12px) !important;
  transition: transform 0.2s ease !important;
  overflow: hidden !important;
}
#event-members-area.bkr-active .bkr-review-overlay.bkr-review-visible .bkr-review-modal {
  transform: translateY(0) !important;
}

/* Modal header */
#event-members-area.bkr-active .bkr-review-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  flex-shrink: 0 !important;
}
#event-members-area.bkr-active .bkr-review-header-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#event-members-area.bkr-active .bkr-review-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: 16px !important;
}
#event-members-area.bkr-active .bkr-review-type-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--bkr-primary) !important;
}
#event-members-area.bkr-active .bkr-review-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
#event-members-area.bkr-active .bkr-review-print {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--bkr-border) !important;
  background: transparent !important;
  color: var(--bkr-text-muted) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: background 0.15s, color 0.15s !important;
}
#event-members-area.bkr-active .bkr-review-print:hover {
  background: var(--bkr-surface) !important;
  color: var(--bkr-text) !important;
}
#event-members-area.bkr-active .bkr-review-close {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  color: #aaa !important;
  font-size: 16px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, color 0.15s !important;
  padding: 0 !important;
}
#event-members-area.bkr-active .bkr-review-close:hover {
  background: #f5f5f5 !important;
  color: #333 !important;
}

/* Modal body (scrollable) */
#event-members-area.bkr-active .bkr-review-body {
  overflow-y: auto !important;
  padding: 24px !important;
  flex: 1 !important;
}

/* Sections */
#event-members-area.bkr-active .bkr-review-section {
  margin-bottom: 32px !important;
}
#event-members-area.bkr-active .bkr-review-section:last-child {
  margin-bottom: 0 !important;
}
#event-members-area.bkr-active .bkr-review-section-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--bkr-primary) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--bkr-primary) !important;
  margin-bottom: 16px !important;
}
#event-members-area.bkr-active .bkr-review-field-heading {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bkr-text-muted) !important;
  margin: 20px 0 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 11px !important;
}

/* Individual fields */
#event-members-area.bkr-active .bkr-review-field {
  padding: 12px 0 !important;
  border-bottom: 1px solid #f5f5f5 !important;
}
#event-members-area.bkr-active .bkr-review-field:last-child {
  border-bottom: none !important;
}
#event-members-area.bkr-active .bkr-review-field-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #aaa !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
#event-members-area.bkr-active .bkr-review-req-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--bkr-primary) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
#event-members-area.bkr-active .bkr-review-field-value {
  font-size: 15px !important;
  color: #1a1a1a !important;
  line-height: 1.5 !important;
}
#event-members-area.bkr-active .bkr-review-field-value.bkr-review-empty {
  font-size: 13px !important;
  color: #ccc !important;
  font-style: italic !important;
}
#event-members-area.bkr-active .bkr-review-field-value.bkr-review-multiline {
  white-space: pre-wrap !important;
}

/* ── Rich field values: images, files, players, replicator tables ── */

/* Image thumbnail — capped to a 400px longest edge, links to full file */
#event-members-area.bkr-active .bkr-review-image-link {
  display: inline-block !important;
  line-height: 0 !important;
}
#event-members-area.bkr-active .bkr-review-thumb {
  max-width: 400px !important;
  max-height: 400px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 1px solid #eee !important;
  background: #fafafa !important;
}

/* Download / external-link pill for non-image files and embed fallbacks */
#event-members-area.bkr-active .bkr-review-file-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  padding: 8px 14px !important;
  border: 1px solid #e3e3e3 !important;
  border-radius: 8px !important;
  background: #f7f7f8 !important;
  color: var(--bkr-primary) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  word-break: break-all !important;
}
#event-members-area.bkr-active .bkr-review-file-link:hover {
  background: #f0f0f2 !important;
  border-color: #d6d6d6 !important;
}
#event-members-area.bkr-active .bkr-review-file-link .fa {
  flex-shrink: 0 !important;
}

/* Inline players */
#event-members-area.bkr-active .bkr-review-player {
  margin-top: 4px !important;
}
/* Video — responsive 16:9 box, iframe absolutely filling it */
#event-members-area.bkr-active .bkr-review-player-video {
  position: relative !important;
  width: 100% !important;
  max-width: 600px !important;
  padding-bottom: min(56.25%, 337px) !important;
  height: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #000 !important;
}
#event-members-area.bkr-active .bkr-review-player-video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
/* Audio provider embeds (Spotify/SoundCloud/etc.) — fixed-height iframe */
#event-members-area.bkr-active .bkr-review-player-audio {
  width: 100% !important;
  max-width: 600px !important;
}
#event-members-area.bkr-active .bkr-review-player-audio iframe {
  width: 100% !important;
  height: 166px !important;
  border: 0 !important;
  border-radius: 8px !important;
}
/* Direct-file audio element (AudioUpload mp3/wav) */
#event-members-area.bkr-active .bkr-review-audio {
  width: 100% !important;
  max-width: 480px !important;
  margin-top: 4px !important;
}

/* Replicator (credits) → table */
#event-members-area.bkr-active .bkr-review-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  margin-top: 4px !important;
}
#event-members-area.bkr-active .bkr-review-table th,
#event-members-area.bkr-active .bkr-review-table td {
  text-align: left !important;
  padding: 8px 10px !important;
  border: 1px solid #ececec !important;
  vertical-align: top !important;
}
#event-members-area.bkr-active .bkr-review-table th {
  background: #f7f7f8 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--bkr-text-muted) !important;
}
#event-members-area.bkr-active .bkr-review-table tbody tr:nth-child(even) td {
  background: #fcfcfc !important;
}

/* ─────────────────────────────────────────────────────────────────
   PRINT — Review entry modal
   JS adds body.bkr-printing before window.print() and removes it
   via onafterprint. Using display:none (not visibility:hidden) so
   hidden elements occupy zero space and no blank pages appear.

   The overlay lives under #event-members-area (it must, to receive its
   scoped styling), so it is NOT a direct body child. We therefore hide
   everything that is neither the overlay, an ancestor of it, nor inside
   it — at every depth — via :has(). This keeps the ancestor chain
   rendering as empty containers (so the modal flows from the top) while
   collapsing every other branch to zero height. Targeting body.bkr-printing
   (never page chrome by name) keeps this within the sanctioned
   print-isolation exception.
   ───────────────────────────────────────────────────────────────── */
@media print {
  /* Body branches that don't contain the overlay → gone */
  body.bkr-printing > *:not(:has(.bkr-review-overlay)) {
    display: none !important;
  }
  /* At every overlay-ancestor level, drop sibling branches that are
     neither the overlay itself nor another path to it. */
  body.bkr-printing :has(.bkr-review-overlay) > *:not(.bkr-review-overlay):not(:has(.bkr-review-overlay)) {
    display: none !important;
  }

  /* Overlay: strip fixed positioning so it flows from page top */
  body.bkr-printing .bkr-review-overlay {
    position: static !important;
    background: none !important;
    width: 100% !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Modal: full width, no scroll cap, no shadow */
  body.bkr-printing .bkr-review-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    transform: none !important;
  }

  /* Modal body must not clip its scroll region when printing */
  body.bkr-printing .bkr-review-body {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Hide print and close buttons */
  body.bkr-printing .bkr-review-header-right {
    display: none !important;
  }

  /* Avoid splitting individual fields across page breaks */
  body.bkr-printing .bkr-review-field {
    break-inside: avoid !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SLIDING PANEL MENU
   Enabled via CHECKOUT_CONFIG.layout.slidingPanelMenu = true.
   JS adds .bkr-panel-open or .bkr-panel-closed to #event-members-area
   (the root, alongside .bkr-active) on desktop.
   On tablet/mobile (<992px) no classes are added and none of these
   rules apply — the sidebar renders in its default Evessio state.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sidebar transition + column chrome ── */
#event-members-area.bkr-active.bkr-panel-open #menu-counters,
#event-members-area.bkr-active.bkr-panel-closed #menu-counters {
  overflow-x: hidden !important;  /* clip content horizontally during width transition */
  /* Capped at the viewport: a menu that fits shows no scrollbar, one that
     doesn't gets its own. overscroll-behavior stops the wheel from chaining
     into the page, so the content column scrolls independently. */
  overflow-y: auto !important;
  max-height: 100vh !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  transition: width 250ms ease-in-out !important;
  background-color: var(--bkr-surface) !important;
  border-right: 1px solid var(--bkr-border) !important;
  box-shadow: 3px 0 12px rgba(0, 0, 0, 0.08), 1px 0 3px rgba(0, 0, 0, 0.04) !important;
  border-radius: 0 6px 0 0 !important;
  position: sticky !important;
  top: 0 !important;
  align-self: flex-start !important; /* prevent flex-stretch from limiting height */
  min-height: 100vh !important;      /* always cover the full viewport height */
  /* Attach to the left window edge — undo any ancestor padding */
  margin-left: 0 !important;
}

/* Remove left padding from the root + inner containers so the rail
   sits flush against the window edge in panel mode. The root itself
   carries the panel classes now, so it is selected directly (no
   descendant) rather than as a #event-members-area descendant. */
#event-members-area.bkr-active.bkr-panel-open,
#event-members-area.bkr-active.bkr-panel-closed,
#event-members-area.bkr-active.bkr-panel-open .private-space,
#event-members-area.bkr-active.bkr-panel-closed .private-space,
#event-members-area.bkr-active.bkr-panel-open .private-space > .row,
#event-members-area.bkr-active.bkr-panel-closed .private-space > .row {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#event-members-area.bkr-active #menu-counters::-webkit-scrollbar { width: 5px; }
#event-members-area.bkr-active #menu-counters::-webkit-scrollbar-track { background: transparent; }
#event-members-area.bkr-active #menu-counters::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

#event-members-area.bkr-active.bkr-dark #menu-counters::-webkit-scrollbar-thumb {
  background: var(--bkr-border);
}

#event-members-area.bkr-active.bkr-panel-open #menu-counters {
  width: 300px !important;
}

#event-members-area.bkr-active.bkr-panel-closed #menu-counters {
  width: 48px !important;
  cursor: pointer;
}

/* ── Toggle button ── */
#event-members-area.bkr-active .bkr-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background-color: var(--bkr-primary);
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 4px;
  cursor: pointer;
  color: #ffffff;
  padding: 0;
  outline: none;
  transition: background-color var(--bkr-transition-base);
}

#event-members-area.bkr-active.bkr-panel-open .bkr-panel-toggle,
#event-members-area.bkr-active.bkr-panel-closed .bkr-panel-toggle {
  position: sticky;
  top: 0;
  z-index: 2;
}

#event-members-area.bkr-active .bkr-panel-toggle:hover {
  background-color: var(--bkr-secondary);
  color: #ffffff;
}

#event-members-area.bkr-active .bkr-panel-toggle .fa {
  color: #ffffff !important;
}

/* Chevron rotates 180° when closed to point right (→ expand) */
#event-members-area.bkr-active .bkr-panel-toggle .fa {
  font-size: 11px;
  transition: transform 250ms ease-in-out;
}

#event-members-area.bkr-active.bkr-panel-closed .bkr-panel-toggle .fa {
  transform: rotate(180deg);
}

/* ── Rail mode — section headings ── */
/* Centre the injected section icon; hide text and chevron */
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .menu-section > a {
  justify-content: center !important;
  padding: 12px 0 !important;
  white-space: nowrap;
}

#event-members-area.bkr-active.bkr-panel-closed #menu-counters .menu-section > a .bkr-section-icon {
  font-size: 15px !important;
  opacity: 0.55 !important;
  margin: 0 !important;
  width: auto !important;
}

/* Hide the Bootstrap chevron toggle in rail mode */
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .menu-section > a .fa-chevron-circle-down {
  display: none !important;
}

/* Hide sub-item lists in rail mode */
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .menu-section > ul,
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .menu-section > .collapse {
  display: none !important;
}

/* ── Rail mode — standalone menu items (dashboard, account, logout) ── */
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .menu-item > a {
  justify-content: center !important;
  padding: 10px 0 !important;
  white-space: nowrap;
}

#event-members-area.bkr-active.bkr-panel-closed #menu-counters .menu-item .bkr-menu-icon {
  font-size: 14px !important;
  opacity: 0.55 !important;
  margin: 0 !important;
  width: auto !important;
}

/* Hide text labels in rail mode — wrapped in .bkr-nav-label by JS */
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .bkr-nav-label {
  display: none !important;
}

/* Hide counter badges in rail mode */
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .counter {
  display: none !important;
}

/* Hide admin/footer elements in rail mode */
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .logged-as-admin,
#event-members-area.bkr-active.bkr-panel-closed #menu-counters .simple-anchor {
  display: none !important;
}

/* ── Content area adjusts with sidebar width ── */
/* Evessio's platform CSS sets an explicit width on .personal-space-content,
   so 'width: auto' doesn't expand it. We use explicit margin-left + calc()
   width so both the position and size transition together with the sidebar. */
#event-members-area.bkr-active.bkr-panel-open .personal-space-content,
#event-members-area.bkr-active.bkr-panel-closed .personal-space-content {
  float: none !important;
  transition: margin-left 250ms ease-in-out, width 250ms ease-in-out !important;
}

/* Open: sidebar is 300px + 1px border-right = 301px occupied */
#event-members-area.bkr-active.bkr-panel-open .personal-space-content {
  margin-left: 301px !important;
  width: calc(100% - 301px) !important;
  max-width: none !important;
}

/* Closed: icon rail is 48px + 1px border-right = 49px occupied */
#event-members-area.bkr-active.bkr-panel-closed .personal-space-content {
  margin-left: 49px !important;
  width: calc(100% - 49px) !important;
  max-width: none !important;
}

/* Lift Evessio's max-width cap on #basket-root so content fills the
   full available column width in both panel states */
#event-members-area.bkr-active.bkr-panel-open #basket-root,
#event-members-area.bkr-active.bkr-panel-closed #basket-root {
  max-width: none !important;
}

/* ── Tablet / mobile — reset everything ── */
/* Below the Bootstrap md breakpoint the sidebar renders in its default
   state regardless of the config toggle. */
@media (max-width: 991px) {
  #event-members-area.bkr-active.bkr-panel-open .personal-space-content,
  #event-members-area.bkr-active.bkr-panel-closed .personal-space-content {
    margin-left: 0 !important;
    width: auto !important;
    float: none !important;
    transition: none !important;
  }

  #event-members-area.bkr-active.bkr-panel-open #menu-counters,
  #event-members-area.bkr-active.bkr-panel-closed #menu-counters {
    width: auto !important;
    overflow: visible !important;
    transition: none !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
  }

  #event-members-area.bkr-active .bkr-panel-toggle {
    display: none !important;
  }
}