/* [bhb_oa_booking_v2] addendum, layered on top of the shared booking.css.
 *
 * booking.css scopes every one of its design-token custom properties
 * (--bhb-primary, --bhb-border, --bhb-radius-sm, ...) and its box-sizing
 * reset to a fixed list of root ids (#bhb-booking-root, #bhb-oa-booking-
 * root, etc.) — #bhb-oa-booking-v2-root was never in that list, so every
 * rule in booking.css that reads one of those variables (e.g. ".bhb-
 * details-form input { border: 1px solid var(--bhb-border); }") resolves
 * to nothing: an unresolvable var() inside a shorthand invalidates the
 * whole shorthand, so inputs rendered with zero border and a fully
 * transparent background instead of just a missing color. Redefining the
 * same tokens here, scoped to this shortcode's own root, fixes that
 * without touching booking.css (or its shared root-id list) at all —
 * values copied verbatim from booking.css so the two shortcodes still
 * look identical.
 */

#bhb-oa-booking-v2-root {
	--bhb-primary: #7A2E35;
	--bhb-primary-dark: #5A2028;
	--bhb-primary-light: rgba(122, 46, 53, 0.08);
	--bhb-ink: #171110;
	--bhb-muted: #6B5E56;
	--bhb-bg: #FBF8F2;
	--bhb-surface: #ffffff;
	--bhb-border: rgba(23, 17, 16, 0.1);
	--bhb-success: #3F5744;
	--bhb-success-bg: rgba(63, 87, 68, 0.12);
	--bhb-danger: #7A2E35;
	--bhb-danger-bg: rgba(122, 46, 53, 0.08);
	--bhb-radius-sm: 14px;
	--bhb-radius: 20px;
	--bhb-radius-lg: 30px;
	--bhb-shadow-sm: 0 4px 14px rgba(23, 17, 16, 0.06);
	--bhb-shadow-md: 0 24px 60px rgba(23, 17, 16, 0.12);

	max-width: 640px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--bhb-ink);
}

@media (prefers-color-scheme: dark) {
	#bhb-oa-booking-v2-root {
		--bhb-ink: #F7F2EA;
		--bhb-muted: #C9BEB6;
		--bhb-bg: #241A18;
		--bhb-surface: #2D2220;
		--bhb-border: rgba(247, 242, 234, 0.12);
		--bhb-primary-light: rgba(122, 46, 53, 0.28);
		--bhb-success-bg: rgba(63, 87, 68, 0.28);
		--bhb-danger-bg: rgba(122, 46, 53, 0.28);
		--bhb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
		--bhb-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
		/* Same fix as booking.css's dark-mode block: widget chrome outside
		   .bhb-panel (e.g. .bhb-stepper) has no background of its own, so
		   its dark-mode text tokens were sitting directly on the page's
		   own — always light — background. */
		background: var(--bhb-bg);
	}

	/* booking.css's shared "#bhb-booking-root h3, ..., #bhb-oa-booking-root
	   h3 { color: var(--bhb-ink); }" rule is scoped to a fixed root-id list
	   that predates this shortcode's own #bhb-oa-booking-v2-root, so it
	   never matches this widget's headings. In light mode that's an
	   invisible gap (the theme's own low-specificity "h1,h2,h3,h4{color:
	   var(--ink)}" happens to render the same near-black either way), but
	   in dark mode the theme's --ink stays fixed near-black while the
	   panel behind it goes dark too — near-black text on a near-black
	   panel. Scoped here, only for dark mode, so light mode is unaffected. */
	#bhb-oa-booking-v2-root h3 {
		color: var(--bhb-ink);
	}
}

#bhb-oa-booking-v2-root * {
	box-sizing: border-box;
}

/* ---------- "Continue with Google" button + divider ---------- */

.bhb-oa-google-btn {
	display: flex;
	justify-content: center;
	min-height: 44px;
}

.bhb-oa-google-btn:empty {
	display: none;
}

.bhb-oa-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	color: var(--bhb-muted);
	font-size: 0.85rem;
}

.bhb-oa-divider::before,
.bhb-oa-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--bhb-border);
}

/* Both the button and its divider are only ever inserted into the DOM
   when a Google client id is actually configured (see renderContact() /
   renderGoogleButton() in oa-booking-app-v2.js) — nothing to hide here
   for the "not configured yet" case, there's simply nothing rendered. */

/* ---------- Friendlier step-1 copy ---------- */

.bhb-oa-subtitle {
	margin: 2px 0 18px;
	color: var(--bhb-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.bhb-oa-welcome-back {
	margin: 2px 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bhb-muted);
}

.bhb-oa-welcome-back strong {
	color: var(--bhb-ink);
}

/* ---------- Field icons (Name / Email / Phone) ---------- */
/* Matched by name= rather than an added class, so the same icon shows up
   consistently everywhere these fields appear — the plain contact form
   and the phone-only form shown after Google sign-in both use these same
   input names. Icons are inline SVGs (no icon font/library dependency),
   colored to match --bhb-muted in each color scheme. */

.bhb-details-form input[name="fullName"],
.bhb-details-form input[name="email"],
.bhb-details-form input[name="phone"] {
	background-repeat: no-repeat;
	background-position: 13px center;
	background-size: 17px;
	padding-left: 41px;
}

.bhb-details-form input[name="fullName"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5E56' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E");
}

.bhb-details-form input[name="email"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5E56' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

.bhb-details-form input[name="phone"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5E56' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5l1.5-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.5 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	.bhb-details-form input[name="fullName"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9BEB6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E");
	}
	.bhb-details-form input[name="email"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9BEB6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	}
	.bhb-details-form input[name="phone"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9BEB6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5l1.5-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.5 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	}
}

/* ---------- Step 2 flow: service / professional / date & time / confirm ----------
   Wider "flow" mode replaces the default 640px single-column width with a
   breadcrumb header + a two-column body (content + a persistent summary
   sidebar) once the viewport is wide enough; below that breakpoint the
   sidebar becomes a sticky bottom bar instead. Root width is toggled via
   the .bhb-oa-v2-flow class (set in JS only while state.step === 'booking')
   rather than a bare :has() selector, for broader browser support. */

#bhb-oa-booking-v2-root.bhb-oa-v2-flow {
	max-width: 900px;
}

.bhb-panel--flow {
	/* .bhb-oa-flow-header inside here is position:sticky. With top padding
	   above it, there's a scroll window where the header is pinned at its
	   sticky offset while this panel's own rounded, drop-shadowed top edge
	   keeps scrolling normally — briefly floating a rounded card corner
	   just above the header before it scrolls fully out of view. Zeroing
	   the top padding (so the header sits flush at the panel's own top
	   edge) and squaring off just the top corners removes both the gap
	   and the rounded shape that made it read as a floating fragment. */
	padding: 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px);
	border-radius: 0 0 var(--bhb-radius-lg) var(--bhb-radius-lg);
}

.bhb-oa-flow-header {
	position: sticky;
	/* Clears this site's own floating pill-shaped nav bar (fixed, ~16px
	   inset + its own padding/content) so the two don't overlap while
	   scrolling. If the site header's height ever changes, adjust this. */
	top: 90px;
	z-index: 20;
	background: var(--bhb-surface);
	margin-bottom: 20px;
	padding-block: 8px;
}

.bhb-oa-flow-header-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bhb-oa-flow-back {
	background: none;
	border: 1px solid var(--bhb-border);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bhb-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.bhb-oa-flow-back:hover {
	border-color: var(--bhb-primary);
	color: var(--bhb-primary);
}

.bhb-oa-flow-close {
	background: none;
	border: 1px solid var(--bhb-border);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	flex: none;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bhb-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.bhb-oa-flow-close:hover {
	border-color: var(--bhb-danger);
	color: var(--bhb-danger);
}

.bhb-oa-flow-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
	color: var(--bhb-ink);
}

.bhb-oa-breadcrumb {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	flex-wrap: wrap;
}

.bhb-oa-crumb {
	color: var(--bhb-muted);
}

.bhb-oa-crumb.active {
	color: var(--bhb-ink);
}

.bhb-oa-crumb.done {
	color: var(--bhb-primary-dark);
	cursor: pointer;
}

.bhb-oa-crumb.done:hover {
	text-decoration: underline;
}

.bhb-oa-crumb-sep {
	color: var(--bhb-border);
}

.bhb-oa-flow-body {
	display: grid;
	/* minmax(0, 1fr) rather than a bare 1fr — a bare 1fr track's implicit
	   min width is auto (content-based), so any child with wide enough
	   intrinsic content (like the date strip) can push this whole grid,
	   and the page, wider than the viewport instead of that child
	   scrolling internally. Same fix as .bhb-oa-date-strip's min-width:0
	   below, one level up. */
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

/* ---------- Category pills + service list ---------- */

.bhb-oa-cat-pills-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.bhb-oa-cat-pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	flex: 1;
	min-width: 0;
	scrollbar-width: none;
}

.bhb-oa-cat-pills::-webkit-scrollbar {
	display: none;
}

.bhb-oa-view-toggle {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--bhb-border);
	background: var(--bhb-surface);
	color: var(--bhb-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-bottom: 6px;
	transition: all 0.15s ease;
}

.bhb-oa-view-toggle:hover {
	border-color: var(--bhb-primary);
	color: var(--bhb-primary);
}

.bhb-oa-pill {
	flex: none;
	border: 1px solid var(--bhb-border);
	border-radius: 999px;
	padding: 8px 16px;
	background: var(--bhb-surface);
	color: var(--bhb-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
}

.bhb-oa-pill:hover {
	border-color: var(--bhb-primary);
}

.bhb-oa-pill.active {
	background: var(--bhb-primary);
	border-color: var(--bhb-primary);
	color: #fff;
}

.bhb-oa-section-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bhb-muted);
	margin: 20px 0 10px;
}

.bhb-oa-service-section:first-of-type .bhb-oa-section-title {
	margin-top: 14px;
}

.bhb-oa-service-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bhb-oa-service-list.grid-view {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.bhb-oa-service-list.grid-view .bhb-oa-service-card {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.bhb-oa-service-list.grid-view .bhb-oa-service-pick {
	align-self: flex-end;
}

.bhb-oa-service-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1.5px solid var(--bhb-border);
	border-radius: var(--bhb-radius);
	padding: 14px 16px;
	background: var(--bhb-surface);
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: all 0.15s ease;
	width: 100%;
}

.bhb-oa-service-card:hover {
	border-color: var(--bhb-primary);
	box-shadow: var(--bhb-shadow-sm);
}

.bhb-oa-service-card.selected {
	border-color: var(--bhb-primary);
	background: var(--bhb-primary-light);
	box-shadow: var(--bhb-shadow-sm);
}

/* Read-only stand-in for the service card list, shown instead of it when a
   visitor arrives via a treatment page's own booking link — same look as
   an already-selected card, just not a <button> and nothing else to pick. */
.bhb-oa-service-locked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1.5px solid var(--bhb-primary);
	border-radius: var(--bhb-radius);
	padding: 14px 16px;
	background: var(--bhb-primary-light);
	margin-top: 14px;
}

.bhb-oa-service-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bhb-oa-service-info strong {
	font-size: 14.5px;
	color: var(--bhb-ink);
}

.bhb-oa-service-meta {
	font-size: 12.5px;
	color: var(--bhb-muted);
}

.bhb-oa-service-pick {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--bhb-border);
	background: var(--bhb-surface);
	color: var(--bhb-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	transition: all 0.15s ease;
}

.bhb-oa-service-pick.checked {
	background: var(--bhb-primary);
	border-color: var(--bhb-primary);
	color: #fff;
}

/* ---------- Professional cards ---------- */
/* .bhb-card / .bhb-avatar are shared building blocks (booking.css) — the
   card's default layout is a vertical stack, so .bhb-oa-pro-card overrides
   it into a row (avatar, name, pick-indicator) without touching the shared
   rule itself. */

.bhb-oa-pro-card {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 100%;
	cursor: pointer;
}

.bhb-oa-pro-card.selected {
	border-color: var(--bhb-primary);
	background: var(--bhb-primary-light);
}

.bhb-oa-pro-card + .bhb-oa-pro-card {
	margin-top: 10px;
}

.bhb-oa-pro-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bhb-oa-pro-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--bhb-border);
	border-radius: 999px;
	padding: 7px 14px 7px 7px;
	background: var(--bhb-surface);
	color: var(--bhb-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 16px;
	transition: border-color 0.15s ease;
}

.bhb-oa-pro-chip:hover {
	border-color: var(--bhb-primary);
}

.bhb-oa-pro-avatar--sm {
	width: 24px;
	height: 24px;
	font-size: 11px;
}

/* ---------- Date strip + calendar toggle ---------- */

.bhb-oa-date-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.bhb-oa-date-strip {
	flex: 1;
	/* Without this, a flex item's default min-width:auto refuses to shrink
	   below its content's natural width (the full row of date chips) —
	   overflow-x:auto never gets the chance to kick in, so instead of
	   scrolling internally, this pushes .bhb-oa-date-row (and the page)
	   wider than the viewport, producing a page-level horizontal scrollbar
	   on mobile instead of a contained one right here. */
	min-width: 0;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: thin;
	min-height: 62px;
}

.bhb-oa-date-chip {
	flex: none;
	width: 52px;
	height: 58px;
	border-radius: var(--bhb-radius-sm);
	border: 1px solid var(--bhb-border);
	background: var(--bhb-surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s ease;
}

.bhb-oa-date-chip:hover:not(:disabled) {
	border-color: var(--bhb-primary);
}

.bhb-oa-date-chip.selected {
	background: var(--bhb-primary);
	border-color: var(--bhb-primary);
}

.bhb-oa-date-chip.selected .bhb-oa-date-chip-weekday,
.bhb-oa-date-chip.selected .bhb-oa-date-chip-day {
	color: #fff;
}

.bhb-oa-date-chip:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.bhb-oa-date-chip-weekday {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bhb-muted);
}

.bhb-oa-date-chip-day {
	font-size: 16px;
	font-weight: 700;
	color: var(--bhb-ink);
}

.bhb-oa-cal-toggle {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--bhb-border);
	background: var(--bhb-surface);
	color: var(--bhb-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.15s ease;
}

.bhb-oa-cal-toggle:hover {
	border-color: var(--bhb-primary);
	color: var(--bhb-primary);
}

.bhb-oa-times-field {
	margin-top: 18px;
}

/* ---------- Summary sidebar (desktop) / sticky bar (mobile) ---------- */

.bhb-oa-sidebar {
	display: none;
}

.bhb-oa-sidebar-inner {
	background: var(--bhb-bg);
	border: 1px solid var(--bhb-border);
	border-radius: var(--bhb-radius);
	padding: 20px;
	position: sticky;
	/* Must sit below the sticky flow-header, not at a fixed guess — its
	   height changes between steps (the pill row only shows on Treatment),
	   so this reads the actual measured height synced in via JS
	   (syncStickyOffsets()) rather than drifting out of sync with it. */
	top: calc(90px + var(--bhb-oa-header-h, 74px) + 16px);
	z-index: 10;
}

.bhb-oa-sidebar-salon {
	display: flex;
	flex-direction: column;
	margin: -20px -20px 16px;
	border-radius: var(--bhb-radius) var(--bhb-radius) 0 0;
	overflow: hidden;
}

.bhb-oa-sidebar-salon-photo {
	width: 100%;
	height: 110px;
	object-fit: cover;
	display: block;
	background: var(--bhb-border);
}

.bhb-oa-sidebar-salon-body {
	padding: 14px 20px 16px;
	border-bottom: 1px solid var(--bhb-border);
}

.bhb-oa-sidebar-salon-name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bhb-ink);
	margin: 0 0 6px;
}

.bhb-oa-sidebar-rating {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--bhb-muted);
	margin: 0 0 6px;
}

.bhb-oa-sidebar-rating svg {
	color: #E3A008;
	flex: none;
}

.bhb-oa-sidebar-rating strong {
	color: var(--bhb-ink);
}

.bhb-oa-sidebar-address {
	font-size: 12px;
	color: var(--bhb-muted);
	margin: 0;
}

.bhb-oa-sidebar-title {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--bhb-ink);
}

.bhb-oa-sidebar-empty {
	font-size: 13px;
	color: var(--bhb-muted);
	margin: 0 0 16px;
}

.bhb-oa-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bhb-ink);
	padding: 8px 0;
}

.bhb-oa-summary-row--muted {
	font-weight: 500;
	color: var(--bhb-muted);
	border-top: 1px solid var(--bhb-border);
}

.bhb-oa-summary-sub {
	font-size: 12px;
	color: var(--bhb-muted);
	margin-top: -6px;
	padding-bottom: 8px;
}

.bhb-oa-summary-total {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 700;
	color: var(--bhb-ink);
	border-top: 1px solid var(--bhb-border);
	margin-top: 4px;
	padding: 12px 0 16px;
}

.bhb-oa-flow-cta {
	margin-top: 0;
	/* Reference design uses a solid black CTA rather than the bordeaux
	   gradient .bhb-submit normally has — var(--bhb-ink) already IS a
	   near-black brand token, so this stays palette-driven instead of a
	   literal #000 that would drift from the token if the palette changes. */
	background: var(--bhb-ink);
	box-shadow: 0 14px 26px rgba(23, 17, 16, 0.22);
}

.bhb-oa-flow-cta:hover {
	box-shadow: 0 20px 34px rgba(23, 17, 16, 0.28);
}

/* ---------- Floating "N selected" chip (service step, desktop only —
   the mobile sticky bar below already covers this role on narrow
   viewports, so showing both would be redundant) ---------- */

.bhb-oa-selected-chip {
	display: none;
}

@media (min-width: 860px) {
	.bhb-oa-selected-chip {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		position: fixed;
		right: 24px;
		bottom: 24px;
		z-index: 30;
		background: var(--bhb-ink);
		color: #fff;
		padding: 10px 10px 10px 18px;
		border-radius: 999px;
		font-size: 13.5px;
		font-weight: 600;
		box-shadow: var(--bhb-shadow-md);
		animation: bhb-fade-up 0.25s ease;
	}
}

.bhb-oa-selected-chip button {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bhb-oa-selected-chip button:hover {
	background: rgba(255, 255, 255, 0.3);
}

.bhb-oa-mobile-bar {
	position: sticky;
	bottom: 12px;
	margin-top: 20px;
}

.bhb-oa-mobile-bar-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--bhb-surface);
	border: 1px solid var(--bhb-border);
	border-radius: var(--bhb-radius);
	box-shadow: var(--bhb-shadow-md);
	padding: 12px 14px;
}

.bhb-oa-mobile-bar-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.bhb-oa-mobile-bar-info strong {
	font-size: 14px;
	color: var(--bhb-ink);
}

.bhb-oa-mobile-bar-info span {
	font-size: 12px;
	color: var(--bhb-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bhb-oa-mobile-bar .bhb-oa-flow-cta {
	width: auto;
	flex: none;
	padding: 12px 22px;
}

@media (min-width: 860px) {
	.bhb-oa-breadcrumb {
		display: flex;
	}

	.bhb-oa-flow-title {
		display: none;
	}

	.bhb-oa-flow-body {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.bhb-oa-sidebar {
		display: block;
	}

	.bhb-oa-mobile-bar {
		display: none;
	}
}