/* BookSesh Session Discovery Preview — Variant B module skin.
   Scope: body.bks-session-discovery-page ONLY (added by the plugin's body_class
   filter, gated to the session-discovery-demo page id). Never applies elsewhere.

   This file styles ONLY the additive discovery module (#bks-disc-root, injected in
   wp_footer + relocated beneath the crawlable H1/intro by session-discovery.js) plus
   the show/hide state of the NATIVE Voxel search form (which becomes the secondary
   "Filters" sheet). It authors NO results/card/feed/map markup — Voxel owns all of
   that. Visual language mirrors /aura-home-demo/ (aura-home.css): Plus Jakarta Sans,
   ink/lavender/coral tokens, pill chips (liked #F5F3FF / #7A5AF0 treatment), a
   round "send"-style go button, uppercase "OR · DESCRIBE IT" eyebrow. */

/* ---------- Load the brand font locally for the module only ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   NATIVE VOXEL SEARCH FORM -> secondary "Filters" sheet.
   By DEFAULT the native ts-search-form is taken out of the visual flow
   (kept in the DOM + fully interactive so the discovery module can
   proxy-drive its real filters). "Filters"/"Help me choose →" reveal it.
   Offscreen (not display:none) so programmatic .click()/input still fire.
   ============================================================ */
body.bks-session-discovery-page .elementor-widget-ts-search-form {
  position: absolute !important;
  left: -99999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Revealed state: native form returns as a clean bordered panel below the module. */
body.bks-session-discovery-page.bks-disc-sheet-open .elementor-widget-ts-search-form {
  position: static !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: var(--bks-white, #fff);
  border: 1px solid var(--bks-stone, #D8D3CC);
  border-radius: var(--bks-radius-lg, 20px);
  box-shadow: var(--bks-hover-shadow, 0 8px 30px rgba(9,7,17,.09));
  padding: 18px;
  margin: 4px auto 22px;
  max-width: 1100px;
  animation: bks-disc-sheet-in .28s var(--bks-ease, cubic-bezier(.22,.61,.36,1));
}
@keyframes bks-disc-sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   LANE1B-2 (+ LANE1B-3 mobile extension) — stray native
   "location/filter" icon widget (elementor-element-46bb301),
   BOTH desktop and mobile, scoped to Variant B (owner directive
   2026-09-13). This is a plain Elementor icon widget that sits
   as a SIBLING of the native ts-search-form widget (not inside
   it — confirmed 1 instance, not nested in
   .elementor-widget-ts-search-form), meant to render inline next
   to the native search fields on the source template (12429). On
   Variant B, because the search-form widget is pushed off-canvas
   by default (see rule above), this icon is left rendering alone
   — a visual leftover, not a control (no click handler, confirmed
   static icon markup). Originally hidden on desktop only; LANE1B-3
   (2026-09-13) confirmed live via Playwright that the SAME element
   (blue pin icon, rgb(49,143,255)) also floats on mobile, centred,
   directly between the module and the "10 results" heading — the
   remaining native trigger the owner flagged. Hidden unconditionally
   here (no media-query gate) so both widths are covered by one rule;
   scoped to body.bks-session-discovery-page only. Never removed from
   the DOM (still present/unchanged if the sheet is revealed). Does
   not affect the real map (a separate sibling container), the native
   filter sheet itself, or any native filter control/state — our
   "Filters"/"Map" buttons still proxy-drive the same native elements
   exactly as before. */
body.bks-session-discovery-page .elementor-element-46bb301 {
  display: none !important;
}

/* ============================================================
   DISCOVERY MODULE
   ============================================================ */
body.bks-session-discovery-page #bks-disc-root { display: block; }
body.bks-session-discovery-page #bks-disc-root[hidden] { display: none; }

/* LANE1B-2 REVISED — sticky TOP utility bar (mobile only, built by JS,
   appended to <body>) + in-block "Map" button (server-rendered in
   Provision.php, mobile only). Both hidden by default (incl. all desktop
   widths — the visible-state rules live entirely inside the mobile media
   query below, so neither can render on desktop regardless of body-class
   state). Supersedes the earlier floating "Filters" pill design (which
   floated mid-screen over card images, together with the native Map/List
   switcher — both are now hidden on mobile in favour of this bar). */
body.bks-session-discovery-page .bks-disc-topbar { display: none; }
body.bks-session-discovery-page .bks-disc-map { display: none; }
/* Desktop: transparent wrapper — does not alter the existing flex layout of
   .bks-disc__row--search (Filters stays exactly where it always was). */
body.bks-session-discovery-page .bks-disc__actions { display: contents; }

/* LANE1B FIX 1 — mobile overflow containment (owner directive 2026-09-13).
   Root cause: #bks-disc-root is a flex ITEM of Elementor's own
   .e-con-inner (display:flex). Flex items default to min-width:auto,
   i.e. their automatic minimum size is their content's min-content
   width — so even though every ancestor up to <body> is correctly
   100%-wide, #bks-disc-root/.bks-disc were free to grow WIDER than the
   viewport to fit their content (the chip row + "describe it" field),
   which is exactly what the owner's mobile-402 screenshot shows: the
   module/chips/field clipped off the right edge with no page-level
   horizontal scrollbar (the overflow was happening one level in, not
   at <html>/<body>). Fix: give both an explicit width/min-width/
   box-sizing so they obey the real parent width at every breakpoint;
   .bks-disc__chips' own mobile overflow-x:auto (below) then does its
   job of scrolling long chip rows WITHIN the now-correctly-bounded
   card, instead of pushing the whole card off-screen. Scoped to
   Variant B (body.bks-session-discovery-page) only — never touches
   Variant A (body.bks-session-preview-page) or live. */
body.bks-session-discovery-page #bks-disc-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.bks-session-discovery-page .bks-disc {
  font-family: var(--bks-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  /* NOTE: no explicit width here on purpose. .bks-disc is a normal block
     box (its parent #bks-disc-root is display:block, not flex), so
     width:auto already correctly resolves to "available width minus my
     own margin" per standard block layout — that's what gives the
     symmetric left/right gutters at every breakpoint (12px mobile via
     the margin below). An explicit width:100% here double-counts:
     100% of the container PLUS the margin, which re-overflows the
     right edge by exactly the margin amount (proven: 12px right-edge
     overflow measured before this correction). min-width:0 stays as a
     defensive guard in case a future edit nests this inside a flex
     parent. */
  max-width: 1100px;
  min-width: 0;
  margin: 6px auto 10px;
  padding: 20px 22px 22px;
  background: linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 78%);
  border: 1px solid rgba(122, 90, 240, .14);
  border-radius: var(--bks-radius-xl, 24px);
  box-shadow: 0 1px 0 rgba(9,7,17,.02);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

body.bks-session-discovery-page .bks-disc__row { display: flex; flex-direction: column; gap: 10px; }

body.bks-session-discovery-page .bks-disc__eyebrow,
body.bks-session-discovery-page .bks-disc__or {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bks-lav-deep, #7A5AF0);
}

/* ---------- Chips row ---------- */
body.bks-session-discovery-page .bks-disc__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Pill chip — the liked treatment (soft #F5F3FF, selected #7A5AF0). */
body.bks-session-discovery-page .bks-disc-chip {
  appearance: none;
  border: 1px solid rgba(122, 90, 240, .20);
  background: #F5F3FF;
  color: var(--bks-body-ink, #252229);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .18s var(--bks-ease, ease), border-color .18s var(--bks-ease, ease),
              color .18s var(--bks-ease, ease), box-shadow .18s var(--bks-ease, ease), transform .12s var(--bks-ease, ease);
}
body.bks-session-discovery-page .bks-disc-chip:hover {
  background: var(--bks-soft-lav, #EEE9FE);
  border-color: var(--bks-lav-deep, #7A5AF0);
  color: #1c1b2e;
}
body.bks-session-discovery-page .bks-disc-chip:active { transform: translateY(1px); }
body.bks-session-discovery-page .bks-disc-chip.is-active,
body.bks-session-discovery-page .bks-disc-chip[aria-pressed="true"] {
  background: var(--bks-lav-deep, #7A5AF0);
  border-color: var(--bks-lav-deep, #7A5AF0);
  color: #fff;
  box-shadow: 0 2px 10px rgba(122, 90, 240, .30);
}
body.bks-session-discovery-page .bks-disc-chip:focus-visible {
  outline: 2px solid var(--bks-lav-deep, #7A5AF0);
  outline-offset: 2px;
}

/* "Help me choose →" — text link in Aura-Home language. */
body.bks-session-discovery-page .bks-disc-help {
  margin-left: 4px;
  color: var(--bks-lav-deep, #7A5AF0);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 4px;
  cursor: pointer;
}
body.bks-session-discovery-page .bks-disc-help:hover { color: var(--bks-coral, #EB666D); text-decoration: underline; }

/* ---------- Search row ("OR · DESCRIBE IT") ---------- */
body.bks-session-discovery-page .bks-disc__row--search {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.bks-session-discovery-page .bks-disc__row--search .bks-disc__or { flex: 0 0 auto; }

/* LANE1B-3 (owner directive 2026-09-13): pill height is driven by the tallest
   child (.bks-disc-go) plus this vertical padding, so trimming both together
   is what makes the bar "slightly shorter" — reduced from 6px/44px to
   4px/40px (desktop): ~56px -> ~48px total, a modest ~14% reduction, still
   comfortably tappable (well above the 44px Apple HIG minimum touch target
   when the invisible padding hit-area is included). Arrow button stays
   centered via align-items:center; placeholder/input untouched (font-size,
   color) so nothing reads cramped. */
body.bks-session-discovery-page .bks-disc-kwform {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--bks-stone, #D8D3CC);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  transition: border-color .18s var(--bks-ease, ease), box-shadow .18s var(--bks-ease, ease);
}
body.bks-session-discovery-page .bks-disc-kwform:focus-within {
  border-color: var(--bks-lav-deep, #7A5AF0);
  box-shadow: 0 0 0 3px rgba(122, 90, 240, .12);
}
body.bks-session-discovery-page .bks-disc-kw {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--bks-ink, #090711);
  min-width: 0;
}
body.bks-session-discovery-page .bks-disc-kw::placeholder { color: #9a95a6; }
body.bks-session-discovery-page .bks-disc-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--bks-ink, #090711);
  color: #fff;
  cursor: pointer;
  transition: background .18s var(--bks-ease, ease), transform .12s var(--bks-ease, ease);
}
body.bks-session-discovery-page .bks-disc-go:hover { background: var(--bks-coral, #EB666D); }
body.bks-session-discovery-page .bks-disc-go:active { transform: scale(.96); }

/* Compact secondary "Filters" control -> opens native sheet. */
body.bks-session-discovery-page .bks-disc-filters {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--bks-stone, #D8D3CC);
  border-radius: 999px;
  padding: 9px 15px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--bks-body-ink, #252229);
  cursor: pointer;
  transition: border-color .18s var(--bks-ease, ease), color .18s var(--bks-ease, ease), background .18s var(--bks-ease, ease);
}
body.bks-session-discovery-page .bks-disc-filters:hover { border-color: var(--bks-lav-deep, #7A5AF0); color: var(--bks-lav-deep, #7A5AF0); }
body.bks-session-discovery-page.bks-disc-sheet-open .bks-disc-filters {
  background: var(--bks-soft-lav, #EEE9FE);
  border-color: var(--bks-lav-deep, #7A5AF0);
  color: var(--bks-lav-deep, #7A5AF0);
}
body.bks-session-discovery-page .bks-disc-filters svg { display: block; }

/* Brief "working" cue while Voxel re-queries (added/removed by JS). */
body.bks-session-discovery-page.bks-disc-busy .bks-disc { cursor: progress; }
body.bks-session-discovery-page.bks-disc-busy .bks-disc__chips { opacity: .72; transition: opacity .15s ease; }

/* ============================================================
   MOBILE — Apple-clean at 411 and below.
   Chips scroll horizontally in one calm row; search field full width;
   generous touch targets; nothing crammed.
   ============================================================ */
@media (max-width: 767px) {
  body.bks-session-discovery-page .bks-disc {
    margin: 4px 12px 8px;
    padding: 16px 14px 18px;
    border-radius: 20px;
    gap: 14px;
  }
  body.bks-session-discovery-page .bks-disc__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 2px;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
    scroll-snap-type: x proximity;
  }
  body.bks-session-discovery-page .bks-disc__chips::-webkit-scrollbar { display: none; }
  body.bks-session-discovery-page .bks-disc-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 11px 16px;
    font-size: 14px;
  }
  body.bks-session-discovery-page .bks-disc-help {
    flex: 0 0 auto;
    align-self: center;
    padding: 11px 8px;
  }
  body.bks-session-discovery-page .bks-disc__row--search {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* LANE1B-3: mobile pill trimmed slightly further than desktop (4px -> 3px
     vertical padding, 40px -> 38px button) — still >=44px effective touch
     target once the pill's own padding hit-area is counted; arrow stays
     centered, placeholder untouched. */
  body.bks-session-discovery-page .bks-disc-kwform { flex: 1 1 auto; padding: 3px 3px 3px 16px; }
  body.bks-session-discovery-page .bks-disc-kw { font-size: 16px; } /* >=16px: no iOS zoom on focus */
  body.bks-session-discovery-page .bks-disc-go { width: 38px; height: 38px; }
  body.bks-session-discovery-page .bks-disc-filters { align-self: flex-start; padding: 11px 16px; }
  /* Dead on mobile as of LANE1B-2: session-discovery.js now routes mobile
     "Filters"/"Help me choose" taps through the NATIVE popup toggle
     (fireNativeSheetToggle) instead of this body class, so this rule no
     longer fires at ≤767px. Left in place, harmless — it still serves
     desktop's ".bks-disc-sheet-open" reveal-panel path (unchanged) at
     wider widths via the base (non-mobile) rule earlier in this file. */
  body.bks-session-discovery-page.bks-disc-sheet-open .elementor-widget-ts-search-form {
    margin: 4px 12px 18px;
    padding: 14px;
    border-radius: 18px;
  }

  /* LANE1B-2 — one native filter trigger only (owner directive 2026-09-13).
     Hide Voxel's own mobile "Filter results" bar completely: our module's
     "Filters" button (in-block + sticky top bar) now proxy-drives this SAME
     native element's Vue toggle directly (session-discovery.js
     fireNativeSheetToggle), so the bar itself must never be visibly
     rendered — otherwise the user would see two filter triggers. This does
     NOT remove the element from the DOM (JS still dispatches events at it)
     and does NOT touch the popup it opens (.ts-search-portal, unaffected). */
  body.bks-session-discovery-page .ts-filter-wrapper.vx-hidden-desktop {
    display: none !important;
  }

  /* LANE1B-2 REVISED (owner directive 2026-09-13) — the native Map/List
     switcher bar is ALSO a floating mid-screen control (fixed; bottom:80px,
     spans the full width) that sits directly over card images as the user
     scrolls — same class of problem as the native filter bar above. Hidden
     completely on mobile; our own "Map" button (in-block + sticky top bar)
     proxy-drives this SAME native switcher instance directly
     (fireNativeMapToggle) — no second map, no parallel state. */
  body.bks-session-discovery-page .ts-switcher-btn {
    display: none !important;
  }

  /* LANE1B-2 — un-stick the whole discovery/H1/intro/native-search-column
     container (owner directive 2026-09-13). Root cause: this container
     (.elementor-element-bf9dd84, "min-scroll") carries Elementor's own
     sticky motion-fx from the CLONED source template (12429), where it is
     the desktop LEFT column (search form + map) meant to stay in view
     beside the separately-scrolling results column. On mobile the layout
     stacks vertically instead of side-by-side, so the same sticky ancestor
     pins at the top of the viewport and overlays the results feed as the
     user scrolls past it. Confirmed via live DOM measurement: rect.top
     stayed 0 after scrolling 900px before this fix. Un-stuck here, mobile
     only — desktop's sticky left column is NOT touched (this rule is
     inside the ≤767px block only) and does not contain the results feed
     or the real rendered map (both confirmed separate sibling containers),
     so nothing here can hide/break either. */
  body.bks-session-discovery-page .elementor-element-bf9dd84 {
    position: static !important;
    top: auto !important;
  }

  /* LANE1B-2 REVISED — Filters + Map sit side by side on mobile (the
     wrapper is display:contents on desktop, see base rule, so this only
     ever applies at ≤767px). */
  body.bks-session-discovery-page .bks-disc__actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* LANE1B-2 REVISED — in-block "Map" button, mobile only. Sits next to
     "Filters" in the module's own search row (normal document flow, not
     floating) — visible only while the module itself is on screen (once it
     scrolls away, the sticky top bar below takes over both actions). */
  body.bks-session-discovery-page .bks-disc-map {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--bks-stone, #D8D3CC);
    border-radius: 999px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--bks-body-ink, #252229);
    cursor: pointer;
    align-self: flex-start;
    transition: border-color .18s var(--bks-ease, ease), color .18s var(--bks-ease, ease);
  }
  body.bks-session-discovery-page .bks-disc-map svg { display: block; }
  body.bks-session-discovery-page .bks-disc-map:hover { border-color: var(--bks-lav-deep, #7A5AF0); color: var(--bks-lav-deep, #7A5AF0); }

  /* LANE1B-2 REVISED — sticky TOP utility bar. Supersedes the earlier
     floating mid-screen "Filters" pill (owner feedback 2026-09-13: floating
     controls mid-screen over card images is wrong). Appears pinned to the
     TOP of the viewport only once #bks-disc-root has fully scrolled out of
     view (session-discovery.js IntersectionObserver toggles
     body.bks-disc-topbar-visible) and hides again once the module is back
     on screen — while the module is visible there is NO sticky bar at all,
     matching the in-block Filters/Map buttons being reachable normally.
     Ask Aura (fixed bottom-right, id=bksesh-sa-launcher) is untouched and
     entirely separate from this bar — different fixed position (top vs
     bottom), no shared markup, no z-index conflict. */
  body.bks-session-discovery-page .bks-disc-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    display: flex;
    align-items: stretch;
    gap: 1px;
    background: var(--bks-stone, #D8D3CC);
    box-shadow: 0 2px 16px rgba(9,7,17,.14);
    transform: translateY(-100%);
    transition: transform .22s var(--bks-ease, ease);
  }
  body.bks-session-discovery-page.bks-disc-topbar-visible .bks-disc-topbar {
    display: flex;
    transform: translateY(0);
  }
  body.bks-session-discovery-page .bks-disc-topbar-btn {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fff;
    border: 0;
    padding: 13px 10px;
    font-family: var(--bks-font, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--bks-body-ink, #252229);
    cursor: pointer;
  }
  body.bks-session-discovery-page .bks-disc-topbar-btn svg { display: block; flex: 0 0 auto; }

  /* Active state — reflects the REAL native popup/switcher state
     (session-discovery.js watchNativeSheet / watchNativeMap, each via a
     MutationObserver on the real native element itself), so it stays
     correct even if closed via the popup's own native "X"/backdrop rather
     than by re-tapping our button. Mirrors .bks-disc-chip.is-active. */
  body.bks-session-discovery-page.bks-disc-native-sheet-open .bks-disc-filters,
  body.bks-session-discovery-page.bks-disc-native-map-open .bks-disc-map {
    background: var(--bks-soft-lav, #EEE9FE);
    border-color: var(--bks-lav-deep, #7A5AF0);
    color: var(--bks-lav-deep, #7A5AF0);
  }
  body.bks-session-discovery-page.bks-disc-native-sheet-open .bks-disc-topbar-btn[data-action="sheet"],
  body.bks-session-discovery-page.bks-disc-native-map-open .bks-disc-topbar-btn[data-action="map"] {
    background: var(--bks-soft-lav, #EEE9FE);
    color: var(--bks-lav-deep, #7A5AF0);
  }
}