/* ============================================================
   chat-forms.css — listing-creation + edit form styles.
   Signup progress bar, opener, group form primitives,
   all 11 group forms, preview & publish, iframe modal.
   ============================================================ */

/* -------------------------------------------------------------------- */
/* Host signup progress bar                                             */
/* Three-step pill (Profile → Payouts → Listing) mirrored on the guest  */
/* agent's trip-bar visual language, but with checkmarks (no thumbnails). */
/* -------------------------------------------------------------------- */

.bha-signup-bar {
	padding: 14px 16px;
	background: #f9fafb;
	border-top: 1px solid #e0e4ea;
	/* No border-radius / box-shadow — bar lives INSIDE the chat-wrapper
	   card (sibling of #bha-main, full-width below the workspace+assistant
	   split). The wrapper's rounded corners + shadow + overflow:hidden
	   handle the visual containment for us. */
	/* Outer is a flex row: scroll-wrapped pills (centred when they fit;
	   horizontally scrollable when they don't), then the discard bubble
	   (if present) pinned on the right. No overflow on the outer —
	   scroll lives inside .bha-signup-bar__scroll only. */
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Scroll wrapper — horizontal overflow for the pill row on narrow viewports.
   The discard bubble sits OUTSIDE this wrapper so it stays anchored on the
   right regardless of scroll position. */
.bha-signup-bar__scroll {
	flex: 1 1 auto;
	min-width: 0; /* Allows the flex child to shrink for overflow to kick in. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* `overflow-x: auto` implicitly clips overflow-y too (CSS spec), which
	   chops the active-step halo (box-shadow ring on --current / --viewing
	   / --has-publish-error). The pulse animation peaks at `box-shadow
	   0 0 0 8px`, so vertical padding needs to clear at least that much
	   for the full ring to render uncropped. */
	padding: 10px 0;
	/* NOTE: centering is handled by `margin: 0 auto` on .bha-signup-bar__inner
	   (block-layout auto-margin), NOT by `justify-content: center` on this
	   container. justify-content centering breaks overflow scrolling: when
	   pills are wider than the scroll container, flex centering pushes the
	   start past scrollLeft=0 and the leftmost pills become unreachable.
	   Auto-margin on the inner block centres when there's room and falls
	   back to natural left-aligned overflow when there isn't — scrolling
	   from step 1 works correctly on mobile. */
	/* Drag-to-scroll affordance — see attachBarDragScroll(). */
	cursor: grab;
	user-select: none;
}
.bha-signup-bar__scroll--dragging {
	cursor: grabbing;
}
.bha-signup-bar__scroll--dragging .bha-signup-step {
	pointer-events: none;
}

/* Left-aligned flex row — matches the guest agent's `.bga-trip-bar__inner`.
   `min-width: max-content` keeps the row intact when overflowing on narrow
   viewports (overflow-x on .bha-signup-bar__scroll allows horizontal scroll).
   `margin: 0 auto` centres the row inside .bha-signup-bar__scroll when there's
   room AND falls back to natural left-aligned overflow when there isn't —
   the scroll-from-start behaviour stays intact, unlike justify-content:center
   on the parent which would clip the leftmost pills. */
.bha-signup-bar__inner {
	display: flex;
	align-items: flex-start;
	min-width: max-content;
	margin: 0 auto;
	position: relative;
}

/* Discard bubble — listing_creation flow only. Visually separate from
   the pill row: its own bordered container, anchored on the right,
   never inside the scroll region. Single entry point for abandoning the
   draft (chat-native confirmation via Yes/Keep chips on click). */
.bha-signup-bar__discard-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e0e4ea;
	border-radius: 10px;
	padding: 7px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bha-signup-bar__discard {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: #9ca3af;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.bha-signup-bar__discard:hover,
.bha-signup-bar__discard:focus-visible {
	color: #dc2626;
	background: #fef2f2;
	outline: none;
}

/* Close bubble — non-destructive exit from the listing flow. Mirrors
   the discard bubble's container shape so the two read as a paired
   right-side control group, but the icon hover is neutral gray (not
   red — this isn't destructive). Edit mode → clears edit-target +
   shows tiles. Creation mode → shows tiles, draft preserved. */
.bha-signup-bar__close-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e0e4ea;
	border-radius: 10px;
	padding: 7px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bha-signup-bar__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: #9ca3af;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.bha-signup-bar__close:hover,
.bha-signup-bar__close:focus-visible {
	color: #1e293b;
	background: #f1f5f9;
	outline: none;
}

/* Each step gets the SAME fixed width regardless of label length — equal
   spacing between the circles is what the eye reads as "progress bar".
   Labels that overflow this width wrap to a second line instead of being
   truncated with ellipsis (truncated names are pointless). */
.bha-signup-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	flex-shrink: 0;
	width: 110px;
}

/* Tight, fixed gap between steps. Combined with fixed step width this
   guarantees dots are evenly spaced. */
.bha-signup-step + .bha-signup-step {
	margin-left: 12px;
}

/* Connector between nodes. Spans from this step's circle right-edge
   (50% + 15px radius) across the margin-right gap (12px) to the next
   step's circle left-edge (50% - 15px radius). Geometry:
   total = step_width(100%) + margin(12px) - circle_radius(15px)×2
   offset-start = 50% + 15px. */
.bha-signup-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 15px;
	left: calc(50% + 15px);
	width: calc(100% - 18px); /* 110 - 18 = 92 = 12 (margin) + 110 - 30 (2×radius) */
	height: 3px;
	background: #d1d5db;
	z-index: 0;
}

.bha-signup-step--done:not(:last-child)::after {
	background: #10b981;
}

.bha-signup-step__node {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	z-index: 1;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bha-signup-step--pending .bha-signup-step__node {
	background: #e5e7eb;
	color: #9ca3af;
	border: 2px solid #d1d5db;
}

.bha-signup-step--current .bha-signup-step__node {
	background: #1097c5;
	color: #fff;
	border: 2px solid #0d7ea3;
	box-shadow: 0 0 0 4px rgba(16, 151, 197, 0.2);
	animation: bha-signup-pulse 2s ease-in-out infinite;
}

.bha-signup-step--done .bha-signup-step__node {
	background: #10b981;
	color: #fff;
	border: 2px solid #059669;
}

/* Amber "Review" state — step has data populated (e.g. LLM-drafted or
   URL-prepopped) but at least one field is not yet host-confirmed.
   Sits visually between gray (Pending, untouched) and green (Done).
   Renders the eye icon (emitted by chat.js) instead of the step number
   so the host reads one consistent "review me" signal. */
.bha-signup-step--review .bha-signup-step__node {
	background: #fde68a;
	color: #92400e;
	border: 2px solid #f59e0b;
}

.bha-signup-step--review .bha-signup-step__label {
	color: #b45309;
}

@keyframes bha-signup-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(16, 151, 197, 0.2); }
	50%      { box-shadow: 0 0 0 8px rgba(16, 151, 197, 0.1); }
}

/* No overlay badge for current+review. The single "review" signal is
   the eye icon (rendered by chat.js when step.review is true). Base
   pill colour keeps its position meaning: blue for current, amber for
   upcoming-with-review, gray for untouched, green for done. One icon,
   one colour, no compound accents. */

.bha-signup-step__label {
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	color: #374151;
	text-align: center;
	/* Wrap long labels to a second line rather than truncating — the step
	   width (110px) is the hard cap; labels exceeding it go to two lines. */
	line-height: 1.25;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

.bha-signup-step--current .bha-signup-step__label {
	color: #1097c5;
}

.bha-signup-step--done .bha-signup-step__label {
	color: #059669;
}

/* Click-to-revisit affordance — Done steps are interactive in the
   listing_creation flow; cursor + subtle hover shift hint at it. The
   --viewing modifier highlights whichever Done step the host is
   currently re-editing (visual answer to "where did the form come
   from?" when they jump around). */
.bha-signup-step--clickable {
	cursor: pointer;
}
.bha-signup-step--clickable:hover .bha-signup-step__node,
.bha-signup-step--clickable:focus-visible .bha-signup-step__node {
	transform: scale(1.06);
	transition: transform 0.12s ease-out;
}
.bha-signup-step--clickable:focus-visible {
	outline: 2px solid #1097c5;
	outline-offset: 3px;
	border-radius: 6px;
}
.bha-signup-step--viewing .bha-signup-step__node {
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.35);
}
.bha-signup-step--viewing .bha-signup-step__label {
	color: #0d7fa8;
	font-weight: 600;
}

/* 9.7.B.1 — mobile signup-bar: compact dot strip by default; tap to
   expand into the full desktop-style bar with labels + discard/close.
   The expansion is in-flow (no position-fixed), so the wrapper's flex
   layout grows and the assistant-header gets pushed behind the sheet
   briefly while expanded — that's accepted as a transient state.
   Tap a step, tap outside, or navigate → collapses back. All state
   colours (pending / current / done / review / has-publish-error) are
   inherited from the desktop rules above; only sizes + label-visibility
   + extras differ on mobile. */
@media (max-width: 768px) {
	/* === Compact (default mobile) === */
	.bha-signup-bar {
		padding: 6px 12px;
		min-height: 44px;       /* touch-friendly tap target across the strip */
		align-items: center;
		cursor: pointer;
	}
	/* Reset the desktop scroll-wrapper's 10px-vertical padding (which
	   exists to clear the --current pulse box-shadow). On compact mobile
	   the pulse is partially clipped — accepted trade-off for a tight
	   bar height that matches the sheet-top calc below. Also hide both
	   scrollbar axes on mobile — touch scrolling doesn't need them and
	   Chrome paints a momentary vertical scrollbar on the row during
	   layout updates. */
	.bha-signup-bar__scroll {
		padding: 0;
		overflow-y: hidden;
		scrollbar-width: none;
	}
	.bha-signup-bar__scroll::-webkit-scrollbar {
		display: none;
	}
	/* Dots themselves are NOT interactive on compact mobile. Any tap on
	   the bar (including on dots) bubbles to the bar's tap handler which
	   expands. Hosts pick a step from the labelled expanded view, where
	   pointer-events is restored. Prevents accidental jumps from tapping
	   tiny dots they can't read. */
	.bha-signup-step--clickable {
		pointer-events: none;
	}
	/* Spread dots evenly across full bar width — each step is a flex:1
	   slot with the dot centred. Drops the desktop's fixed 110px step
	   width + per-step margins; the connector line below uses 50%+
	   radius math that works for any equal-width step. */
	.bha-signup-bar__inner {
		flex: 1;
		width: 100%;
		min-width: 0;
	}
	.bha-signup-step {
		flex: 1;
		min-width: 0;
		width: auto;
	}
	.bha-signup-step + .bha-signup-step {
		margin-left: 0;        /* flex:1 handles spacing */
	}
	.bha-signup-step__node {
		width: 20px;
		height: 20px;
		font-size: 10px;
		border-width: 1.5px;
	}
	.bha-signup-step__node svg {
		width: 12px;
		height: 12px;
	}
	/* Connector line — recompute geometry for 20px (radius 10px) dots in
	   flex-1 steps. top:10 = dot vertical centre; left:50%+10 = dot's
	   right edge; width:100%-20 = step_width - 2*radius which spans
	   from one dot's right edge to the next dot's left edge. */
	.bha-signup-step:not(:last-child)::after {
		top: 10px;
		left: calc(50% + 10px);
		width: calc(100% - 20px);
		height: 1.5px;
	}
	.bha-signup-step__label {
		display: none;
	}
	.bha-signup-bar__discard-wrap,
	.bha-signup-bar__close-wrap {
		display: none;
	}

	/* === Expanded — tap-to-expand restores desktop look === */
	.bha-signup-bar.bha-signup-bar--expanded {
		cursor: default;
		padding: 12px 12px 14px;
		background: #fff;
		box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
		position: relative;   /* enable z-index */
		z-index: 250;          /* above sheet (200), below drawer (300) */
	}
	/* Restore scroll-wrapper pulse clearance in expanded mode (the dots
	   are bigger here and the pulse animation needs the vertical room).
	   Scrollbar stays hidden — touch scroll still works. */
	.bha-signup-bar--expanded .bha-signup-bar__scroll {
		padding: 10px 0;
	}
	/* Restore step interactivity in expanded mode — host picks a step
	   from the labelled view. (Compact disables pointer-events on
	   `.bha-signup-step--clickable` above.) */
	.bha-signup-bar--expanded .bha-signup-step--clickable {
		pointer-events: auto;
	}
	/* Override the compact flex:1 — expanded steps have fixed width so
	   labels read consistently and the bar can overflow + horizontal-
	   scroll when more than ~4 steps don't fit at viewport width. */
	.bha-signup-bar--expanded .bha-signup-bar__inner {
		flex: none;
		width: auto;
		min-width: max-content;
	}
	.bha-signup-bar--expanded .bha-signup-step {
		flex: 0 0 88px;
		width: 88px;
	}
	.bha-signup-bar--expanded .bha-signup-step + .bha-signup-step {
		margin-left: 8px;
	}
	.bha-signup-bar--expanded .bha-signup-step__node {
		width: 28px;
		height: 28px;
		font-size: 12px;
		border-width: 2px;
	}
	.bha-signup-bar--expanded .bha-signup-step__node svg {
		width: 14px;
		height: 14px;
	}
	/* Connector geometry for 28px dots (radius 14px). top:14 = dot
	   centre; left:50%+14 = dot's right edge; width: spans from
	   right-edge-of-dot to the next dot's left edge across the 8px
	   margin (`100% - (2*14) + 8` = `100% - 20`). */
	.bha-signup-bar--expanded .bha-signup-step:not(:last-child)::after {
		top: 14px;
		left: calc(50% + 14px);
		width: calc(100% - 20px);
		height: 2px;
	}
	.bha-signup-bar--expanded .bha-signup-step__label {
		display: block;
	}
	.bha-signup-bar--expanded .bha-signup-bar__discard-wrap,
	.bha-signup-bar--expanded .bha-signup-bar__close-wrap {
		display: flex;
	}
}

.bha-signup-bar__scroll::-webkit-scrollbar {
	height: 4px;
}
.bha-signup-bar__scroll::-webkit-scrollbar-track {
	background: transparent;
}
.bha-signup-bar__scroll::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 2px;
}

/* -------------------------------------------------------------------- */
/* Listing creation — 3-question opener (Phase 3b)                      */
/* Embedded widget in the chat. Progressive: photos → essentials →      */
/* story. Reuses tile / field visual language but in its own container. */
/* -------------------------------------------------------------------- */

.bha-opener {
	margin: 14px 0 14px 44px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	max-width: 680px;
	position: relative;
}

/* Mobile: drop the desktop avatar-gutter left margin so the card uses the
   full surface width. Matches the per-surface mobile refit applied to
   listings / bookings / dashboard / inbox in 0.56.x. */
@media (max-width: 768px) {
	.bha-opener {
		margin: 16px 12px;
		padding: 16px 14px;
	}
}

/* Persistent intro block at the top of the opener. Explains what's
   about to happen (3 questions → AI drafts most content → host reviews)
   so the host isn't confronted with "Step 1 of 3: Photos" cold. Sits
   above Step 1 and is separated with a subtle line below. */
.bha-opener__intro {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 100%);
	border: 1px solid #bae6fd;
	border-radius: 10px;
	margin-bottom: 18px;
}

.bha-opener__intro-icon {
	flex-shrink: 0;
	color: #0d7ea3;
	margin-top: 2px;
}

.bha-opener__intro-body {
	flex: 1;
	min-width: 0;
}

.bha-opener__intro-title {
	font-size: 14px;
	font-weight: 700;
	color: #0d7ea3;
	margin-bottom: 4px;
}

.bha-opener__intro-text {
	font-size: 13px;
	line-height: 1.55;
	color: #0b5a73;
	margin: 0;
}

.bha-opener-step {
	padding-top: 14px;
}

.bha-opener-step:first-of-type {
	padding-top: 0;
}

.bha-opener-step + .bha-opener-step {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #f3f4f6;
}

.bha-opener-step__heading {
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 6px 0;
}

.bha-opener-step__desc {
	font-size: 13px;
	line-height: 1.5;
	color: #4b5563;
	margin: 0 0 14px 0;
}

/* Photos step ---------------------------------------------------------- */

.bha-opener-photos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
	margin-bottom: 12px;
	min-height: 0;
}

.bha-opener-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
}

.bha-opener-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bha-opener-photo__delete {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.75);
	color: #fff;
	border: none;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.bha-opener-photo__delete:hover {
	background: #dc2626;
}

.bha-opener-photo--uploading {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f9fafb;
}
.bha-opener-photo__spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #e5e7eb;
	border-top-color: #1097c5;
	border-radius: 50%;
	animation: bha-spin 0.8s linear infinite;
}
@keyframes bha-spin { to { transform: rotate(360deg); } }

.bha-opener-dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	border: 2px dashed #d1d5db;
	border-radius: 10px;
	background: #f9fafb;
	color: #6b7280;
	font-size: 13px;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
	margin-bottom: 10px;
}
.bha-opener-dropzone:hover,
.bha-opener-dropzone.is-dragover {
	border-color: #1097c5;
	background: #f0f9ff;
	color: #0d7ea3;
}

.bha-opener-error {
	margin: 8px 0 0;
	padding: 8px 12px;
	border-radius: 6px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-left: 4px solid #dc2626;
	color: #7f1d1d;
	font-size: 13px;
	line-height: 1.4;
}
.bha-opener-photos-count {
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 12px;
}

/* Essentials step ------------------------------------------------------ */

.bha-opener-essentials-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bha-opener-field {
	display: flex;
	flex-direction: column;
}

.bha-opener-field__label {
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 4px;
}

.bha-opener-field input[type=text],
.bha-opener-field input[type=number] {
	font-size: 14px;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}

.bha-opener-field input:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}

.bha-opener-location {
	position: relative;
}

.bha-opener-numbers-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

@media (max-width: 480px) {
	.bha-opener-numbers-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Story step ----------------------------------------------------------- */

.bha-opener-story {
	width: 100%;
	min-height: 160px;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: #111827;
	resize: vertical;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bha-opener-story:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}

/* Reuse-from-elsewhere hint — surfaced ABOVE the textarea so the host
   sees the "paste from elsewhere" affordance before they start typing. */
.bha-opener-story__reuse-hint {
	margin: 4px 0 8px 0;
	padding: 8px 12px;
	font-size: 13px;
	color: #0a4a5e;
	background: #f0f7fa;
	border: 1px solid #a8d6e6;
	border-radius: 6px;
}
.bha-opener-story__reuse-hint strong {
	font-weight: 700;
	color: #0d7fa8;
}

/* Continue / submit buttons ------------------------------------------- */

.bha-opener-continue,
.bha-opener-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	padding: 10px 18px;
	background: #1097c5;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
	font-family: inherit;
	align-self: flex-start;
}
.bha-opener-continue:hover:not(:disabled),
.bha-opener-submit:hover:not(:disabled) {
	background: #0d7ea3;
}
.bha-opener-continue:disabled,
.bha-opener-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.bha-opener-error {
	color: #dc2626;
	font-size: 13px;
	margin-top: 8px;
	padding: 8px 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
}

/* Tone picker (embedded on Step 3 — Your story) */
.bha-opener-tone-heading {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: #111827;
}
.bha-opener-tone-desc {
	font-size: 12px;
	color: #6b7280;
	margin-top: 2px;
	margin-bottom: 6px;
}
.bha-opener-tone-pills {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 8px;
}
.bha-opener-tone-pill {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background: #fff;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.bha-opener-tone-pill:hover {
	border-color: #1097c5;
	background: #f0f9ff;
}
.bha-opener-tone-pill.is-selected {
	border-color: #1097c5;
	background: #e0f2fe;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-opener-tone-pill__label {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
}
.bha-opener-tone-pill__blurb {
	font-size: 12px;
	color: #6b7280;
}
@media (max-width: 480px) {
	.bha-opener-tone-pills { grid-template-columns: 1fr; }
}

/* Submit state — block interaction + show overlay */
.bha-opener--submitting {
	opacity: 0.75;
	pointer-events: none;
}
.bha-opener__overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	color: #1097c5;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	border-radius: 14px;
	z-index: 1;
}

/* -------------------------------------------------------------------- */
/* Group form primitives (Phase 4.0)                                    */
/* Shared visual vocabulary for every listing-creation group form:      */
/* searchable combobox, ✓ accept badge, group sweep button, amber       */
/* Awaiting-review field styling, save-button group-status line.        */
/* -------------------------------------------------------------------- */

/* Searchable combobox — used by category, cancellation_policy, etc. */
.bha-combobox {
	position: relative;
}

.bha-combobox__input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.bha-combobox__input:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}

.bha-combobox__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	margin: 0;
	padding: 4px 0;
	list-style: none;
	z-index: 10;
}

.bha-combobox__option {
	padding: 8px 12px;
	font-size: 14px;
	color: #1f2937;
	cursor: pointer;
	list-style: none;
}

.bha-combobox__option:hover,
.bha-combobox__option.is-active {
	background: #f0f9ff;
	color: #0d7ea3;
}

/* Per-field ✓ accept badge — appears on Awaiting-review fields. */
.bha-field-accept {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1.5px solid #10b981;
	border-radius: 8px;
	background: #ecfdf5;
	color: #047857;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
	flex-shrink: 0;
	/* Render BEFORE the field input within the flex input-row, regardless
	   of DOM insertion order. Each form module currently appends the
	   button after the input; flipping via flex order avoids editing every
	   call site. */
	order: -1;
	/* Anchor near the top so the button aligns with the first line of a
	   tall textarea, not floats centered against a multi-line block. */
	align-self: flex-start;
}

.bha-field-accept__label {
	white-space: nowrap;
}

.bha-field-accept:hover:not(:disabled) {
	background: #10b981;
	color: #fff;
	border-color: #047857;
	box-shadow: 0 1px 4px rgba(16, 185, 129, 0.35);
}

.bha-field-accept:active:not(:disabled) {
	transform: scale(0.96);
}

.bha-field-accept:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Group-level "Looks good — all checked" sweep button. Used on groups
   where multiple fields are Awaiting review after opener pre-pop. */
.bha-group-sweep {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bha-group-sweep:hover:not(:disabled) {
	background: #10b981;
	color: #fff;
	border-color: #059669;
}

.bha-group-sweep:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Awaiting-review field styling. Applied to the field wrapper
   (typically a <label>). Soft warm-ivory bg + muted amber bar — signals
   "AI draft, please review" without shouting. Saturated amber felt like
   a validation error; this reads as a helpful prompt. */
.bha-field--awaiting-review {
	border-left: 2px solid #fbbf24;
	background: #fffcf3;
	padding: 10px 12px;
	border-radius: 6px;
	transition: background 0.25s, border-color 0.25s;
}

.bha-field--reviewed {
	border-left: 2px solid transparent;
	background: transparent;
	padding: 10px 12px;
	border-radius: 6px;
}

/* Group status line — appears above Save to summarise what's left.
   Red-ish when there's outstanding review; green when ready. */
.bha-group-status {
	font-size: 12px;
	font-weight: 600;
	color: #b45309;
	margin: 10px 0 6px 0;
}

.bha-group-status.bha-group-status--ready {
	color: #059669;
}

/* ==================================================================== */
/* Phase 4.1 — "The basics" group form                                  */
/* Mounts post-opener when current_step_id === 'basics'. Three fields:   */
/* title + category + gallery/hero. Uses the Phase 4.0 primitives        */
/* (combobox, accept buttons, sweep, save-state) and adds its own        */
/* layout + gallery grid on top.                                         */
/* ==================================================================== */

.bha-basics-form {
	margin: 14px 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	font-size: 14px;
	line-height: 1.55;
}

/* Header block — title + intro explaining the Awaiting-review pattern
   so the accept ✓ and group-sweep buttons aren't mystery UI. */
.bha-basics-form__header {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f3f4f6;
}

.bha-basics-form__title {
	margin: 0 0 6px 0;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
}

.bha-basics-form__intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #4b5563;
}

.bha-basics-form__intro em {
	font-style: normal;
	font-weight: 600;
	color: #374151;
}

.bha-basics-form__intro-check {
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	vertical-align: baseline;
	margin: 0 1px;
}

/* Inline error — replaces the chat-level green pill for validation
   failures so the message stays anchored to the form that produced it. */
.bha-basics-form__error-inline {
	margin: 0 0 14px 0;
	padding: 10px 14px;
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	border-left: 3px solid #dc2626;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
}

.bha-basics-form__loading,
.bha-basics-form__error {
	padding: 18px 4px;
	text-align: center;
	color: #6b7280;
	font-size: 13px;
}
.bha-basics-form__error { color: #b91c1c; }

.bha-basics-form__field + .bha-basics-form__field {
	margin-top: 18px;
}

/* Photos field gets a bigger gap from the preceding Category combobox
   plus a thin top border so the section break reads visually
   (2026-04-27 simplification — same separator style as the form header). */
.bha-basics-form__field + .bha-basics-form__field--photos {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #f3f4f6;
}

.bha-basics-form__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}

/* Bigger label variant — used by the Photos section to elevate it
   visually (it's the largest sub-section in the form). */
.bha-basics-form__label--lg {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 8px;
}

.bha-basics-form__input-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bha-basics-form__input {
	flex: 1;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: #111827;
	background: #fff;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.bha-basics-form__input:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}

.bha-basics-form__combo {
	flex: 1;
}

.bha-basics-form__hint {
	margin-top: 6px;
	font-size: 12px;
	color: #6b7280;
}

/* Gallery grid — tile per photo, hero badge on first, drag-drop reorder. */
.bha-basics-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.bha-basics-gallery__tile {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f4f6;
	border: 2px solid transparent;
	cursor: grab;
	transition: border-color 0.15s, transform 0.15s, opacity 0.15s;
	/* 9.7.B.1 reverted — touch-action: none broke page scrolling
	   entirely when the host's finger started on a tile. Drag-reorder
	   on mobile is replaced by explicit ↑/↓ buttons (see CSS rule
	   block below + JS in basics-form.js buildGalleryTile). Desktop
	   still uses HTML5 mouse drag-drop. */
}

.bha-basics-gallery__tile:active,
.bha-basics-gallery__tile--dragging {
	cursor: grabbing;
	opacity: 0.55;
	transform: scale(0.98);
}

/* 9.7.B.1 — mobile reorder buttons. Hidden on desktop (HTML5 mouse drag
   covers desktop). Pair of round arrow buttons floats on the LEFT edge
   of each tile, vertically centred. Tap → swap with adjacent tile +
   POST reorder. Defaults hidden so the markup renders on every device
   but only paints at ≤768px. */
.bha-basics-gallery__move-btn {
	display: none;
}
@media (max-width: 768px) {
	.bha-basics-gallery__move-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 8px;
		/* 44×44 — Apple HIG / Material Design touch-target minimum. */
		width: 44px;
		height: 44px;
		background: rgba(15, 23, 42, 0.62);
		color: #fff;
		border: none;
		border-radius: 50%;
		padding: 0;
		cursor: pointer;
		z-index: 4;
		transition: background 0.12s;
	}
	.bha-basics-gallery__move-btn:active,
	.bha-basics-gallery__move-btn:hover,
	.bha-basics-gallery__move-btn:focus-visible {
		background: rgba(15, 23, 42, 0.82);
		outline: none;
	}
	.bha-basics-gallery__move-btn svg {
		width: 22px;
		height: 22px;
	}
	/* Stack ↑ and ↓ vertically centred on the tile with a 6px gap.
	   Maths: each button is 44px tall. To stack the pair around the
	   tile's vertical centre with a 6px gap between, ↑ ends 3px above
	   centre (top: 50% − 47px) and ↓ starts 3px below centre. */
	.bha-basics-gallery__move-btn--up {
		top: calc(50% - 47px);
	}
	.bha-basics-gallery__move-btn--down {
		top: calc(50% + 3px);
	}
	/* Hide ↑ on the first tile + ↓ on the last tile (the JS sets
	   --disabled-up / --disabled-down based on the tile's position
	   in the grid; we hide rather than just dim so hosts don't see
	   inert buttons). */
	.bha-basics-gallery__move-btn--up.bha-basics-gallery__move-btn--disabled,
	.bha-basics-gallery__move-btn--down.bha-basics-gallery__move-btn--disabled {
		display: none;
	}
}

.bha-basics-gallery__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero tile — amber border + badge visible. */
.bha-basics-gallery__tile--hero {
	border-color: #f59e0b;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.bha-basics-gallery__hero-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	display: none;
	align-items: center;
	gap: 3px;
	padding: 3px 7px;
	background: #f59e0b;
	color: #fff;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

.bha-basics-gallery__tile--hero .bha-basics-gallery__hero-badge {
	display: inline-flex;
}

/* Set-as-hero button — always visible (touch-friendly). Sits at the
   bottom of every non-hero tile; hidden on the hero tile (already
   hero). On desktop, hover dims the tile slightly so the button reads
   as the action; on touch the contrast is enough on its own. */
.bha-basics-gallery__set-hero {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 4px;
	padding: 6px 12px;
	background: rgba(17, 24, 39, 0.85);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
	white-space: nowrap;
	max-width: calc(100% - 8px);
}
.bha-basics-gallery__set-hero svg {
	flex-shrink: 0;
}
.bha-basics-gallery__set-hero:hover {
	background: #111827;
	transform: translateX(-50%) scale(1.04);
}

/* Hide "Set as hero" on the current hero tile — it's already hero. */
.bha-basics-gallery__tile--hero .bha-basics-gallery__set-hero,
.bha-basics-gallery__tile--flagged .bha-basics-gallery__set-hero {
	display: none;
}

.bha-basics-gallery__set-hero:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Delete (×) button — top-right corner, always visible.
   Two-tap confirm: first tap turns red + tooltip changes; second
   commits. Avoids accidental loss without a heavy modal dialog. */
.bha-basics-gallery__delete {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	background: rgba(17, 24, 39, 0.78);
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 16px; font-weight: 700; line-height: 1;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
}
.bha-basics-gallery__delete:hover {
	background: #b91c1c;
	transform: scale(1.06);
}
.bha-basics-gallery__delete--confirm {
	background: #dc2626;
	animation: bha-pulse 0.6s ease-in-out infinite;
}

/* Number badge — top-left, 1-indexed position. Hidden on the hero
   tile (the "HERO" badge already occupies that corner). Lets hosts
   match LLM references like "try photo 12 as hero" to a visible
   marker on the tile. */
.bha-basics-gallery__number-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: rgba(17, 24, 39, 0.78);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	display: inline-block;
}
.bha-basics-gallery__tile--hero .bha-basics-gallery__number-badge {
	display: none;
}

/* Phase 9.7 — photo-quality badge. Bottom-left of the tile so it
   never collides with the top-right `×` delete or the bottom-center
   "Set as hero" button. Three info-only states: clean (green ✓),
   warn (yellow `i`), review (red `!`). Plus an analyzing pulsing pip. */
.bha-basics-gallery__pq-badge {
	position: absolute;
	bottom: 6px;
	left: 6px;
	z-index: 2;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s, opacity 0.15s;
}
.bha-basics-gallery__pq-badge:hover {
	transform: scale(1.08);
}
.bha-basics-gallery__pq-badge--clean {
	display: inline-flex;
	background: #16a34a; /* green */
	opacity: 0.6;
}
.bha-basics-gallery__pq-badge--clean:hover {
	opacity: 1;
}
.bha-basics-gallery__pq-badge--warn {
	display: inline-flex;
	background: #d97706; /* amber */
}
.bha-basics-gallery__pq-badge--review {
	display: inline-flex;
	background: #dc2626; /* red */
}
.bha-basics-gallery__pq-badge--analyzing {
	display: inline-flex;
	background: #6b7280; /* gray */
}
.bha-basics-gallery__pq-badge--unchecked {
	display: inline-flex;
	background: #9ca3af; /* neutral gray — distinct from analyzing's animated pip */
	opacity: 0.75;
	cursor: default;
}
.bha-basics-gallery__pq-badge--unchecked:hover {
	opacity: 1;
}
.bha-basics-gallery__pq-badge svg {
	display: block;
}
.bha-basics-gallery__pq-pip {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: bha-pulse 1s ease-in-out infinite;
}
.bha-basics-gallery__pq-icon {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 13px;
}

/* Phase 9.7 — photo-quality popover (info-only, anchors to badge). */
.bha-pq-popover {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	border: 1px solid #e5e7eb;
	padding: 12px 16px 12px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #1f2937;
	max-width: 320px;
	/* Chat container in fullscreen mode is z-index:99999. Popover is
	   appended to document.body; without an explicit higher stack, it
	   renders behind the chat surface and the click looks like a no-op. */
	z-index: 100000;
}
.bha-pq-popover__close {
	position: absolute;
	top: 4px;
	right: 6px;
	background: transparent;
	border: 0;
	font-size: 18px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
	padding: 4px 6px;
}
.bha-pq-popover__close:hover {
	color: #111827;
}
.bha-pq-popover__intro {
	margin: 0 16px 8px 0;
}
.bha-pq-popover__caption {
	margin: 8px 0 0;
	color: #6b7280;
	font-style: italic;
}
.bha-pq-popover__flags {
	margin: 8px 0 0;
	padding-left: 18px;
	list-style: disc;
}
.bha-pq-popover__flags li {
	margin-bottom: 4px;
}
.bha-pq-popover--review { border-left: 3px solid #dc2626; }
.bha-pq-popover--warn   { border-left: 3px solid #d97706; }
.bha-pq-popover--clean  { border-left: 3px solid #16a34a; }

/* Phase 9.7 — gallery surfaces: summary chip + hero banner + coverage
   note + recheck button. Sit between the drop-zone and the gallery grid. */
.bha-pq-surfaces {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0;
}
.bha-pq-inline-error {
	padding: 8px 12px;
	border-radius: 6px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-left: 4px solid #dc2626;
	color: #7f1d1d;
	font-size: 13px;
	line-height: 1.4;
}
.bha-pq-surfaces__row {
	position: relative;
	display: block;
}
.bha-pq-summary-chip {
	display: block;
	padding: 12px 14px;
	padding-right: 140px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #d1d5db;
	background: #f9fafb;
	color: #1f2937;
	font-size: 13px;
	line-height: 1.5;
}
.bha-pq-summary-chip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #d1d5db;
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	margin-right: 8px;
	vertical-align: -3px;
}
.bha-pq-summary-chip--clean {
	background: #f0fdf4;
	border-color: #bbf7d0;
	border-left-color: #16a34a;
	color: #14532d;
}
.bha-pq-summary-chip--clean .bha-pq-summary-chip__icon {
	background: #16a34a;
}
.bha-pq-summary-chip--minor {
	background: #fffbeb;
	border-color: #fde68a;
	border-left-color: #d97706;
	color: #78350f;
}
.bha-pq-summary-chip--minor .bha-pq-summary-chip__icon {
	background: #d97706;
}
.bha-pq-summary-chip--needs {
	background: #fef2f2;
	border-color: #fecaca;
	border-left-color: #dc2626;
	color: #7f1d1d;
}
.bha-pq-summary-chip--needs .bha-pq-summary-chip__icon {
	background: #dc2626;
}
.bha-pq-summary-chip--analyzing {
	background: #f9fafb;
	color: #4b5563;
}
.bha-pq-summary-chip--analyzing .bha-pq-summary-chip__icon {
	animation: bha-pq-pulse 1.4s ease-in-out infinite;
}
@keyframes bha-pq-pulse {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	50%      { opacity: 1;    transform: scale(1.18); }
}
.bha-pq-summary-chip__hint {
	display: block;
	margin-top: 4px;
	color: #6b7280;
	font-size: 12px;
	font-weight: 400;
}
.bha-basics-gallery--analyzing {
	pointer-events: none;
	opacity: 0.55;
	transition: opacity 0.25s ease;
}
.bha-basics-gallery__drop-zone--analyzing {
	pointer-events: none;
	opacity: 0.4;
}
.bha-pq-summary-chip__cap {
	display: block;
	margin-top: 4px;
	color: #6b7280;
	font-size: 12px;
}
.bha-pq-summary-chip__details {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid currentColor;
	border-top-color: rgba(0, 0, 0, 0.08);
}
.bha-pq-summary-chip__details summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.8;
}
.bha-pq-summary-chip__details summary:hover { opacity: 1; }
.bha-pq-summary-chip__details ul {
	margin: 6px 0 0;
	padding-left: 18px;
	font-size: 12px;
}
.bha-pq-summary-chip__details ul li { margin-bottom: 3px; }
.bha-pq-summary-chip__details ul a {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
}
.bha-pq-summary-chip__details ul a:hover { text-decoration-style: solid; }
.bha-pq-summary-chip__nested > summary {
	cursor: pointer;
	list-style: none;
}
.bha-pq-summary-chip__nested > summary::-webkit-details-marker { display: none; }
.bha-pq-summary-chip__nested > summary::before {
	content: '\25B8';
	display: inline-block;
	width: 10px;
	margin-right: 4px;
	transition: transform 0.15s ease;
}
.bha-pq-summary-chip__nested[open] > summary::before {
	transform: rotate(90deg);
}
.bha-pq-summary-chip__sublist {
	margin-top: 4px;
}
.bha-pq-summary-chip__sublist li {
	font-weight: normal;
	opacity: 0.9;
}
.bha-pq-recheck-btn {
	position: absolute;
	top: 8px;
	right: 10px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 12px;
	color: #374151;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
@media (max-width: 480px) {
	.bha-pq-summary-chip { padding-right: 14px; }
	.bha-pq-recheck-btn  { position: static; margin-top: 6px; display: inline-block; }
}
.bha-pq-recheck-btn:hover:not(:disabled) {
	background: #f3f4f6;
}
.bha-pq-recheck-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.bha-pq-hero-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f0f7fa;
	border: 1px solid #a8d6e6;
	border-left: 4px solid #1097c5;
	font-size: 13px;
	line-height: 1.45;
	color: #0a4a5e;
	flex-wrap: wrap;
}
.bha-pq-hero-banner__lede {
	flex: 1 1 auto;
	min-width: 0;
}
.bha-pq-hero-banner__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #7fc5dc;
	border-radius: 6px;
	overflow: hidden;
	background: transparent;
	cursor: pointer;
	transition: transform 0.15s, border-color 0.15s;
}
.bha-pq-hero-banner__thumb:hover {
	transform: scale(1.05);
	border-color: #1097c5;
}
.bha-pq-hero-banner__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bha-pq-hero-banner__apply,
.bha-pq-hero-banner__dismiss {
	flex: 0 0 auto;
	border: 0;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
}
.bha-pq-hero-banner__apply {
	background: #1097c5;
	color: #fff;
}
.bha-pq-hero-banner__apply:hover:not(:disabled) {
	background: #0d7fa8;
}
.bha-pq-hero-banner__dismiss {
	background: transparent;
	color: #4b5563;
}
.bha-pq-hero-banner__dismiss:hover {
	color: #1f2937;
}

.bha-pq-coverage-note {
	font-size: 12px;
	line-height: 1.5;
	color: #4b5563;
	padding: 10px 14px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #9ca3af;
	border-radius: 8px;
}
.bha-pq-coverage-note > div + div {
	margin-top: 4px;
}

/* Tile flash effect — fires after the smooth-scroll lands. Three
   pulses spread over 3 seconds so the host catches the highlight even
   if their attention drifted during the scroll. JS delays the class-
   add by ~400ms to let the scroll mostly finish first. */
.bha-basics-gallery__tile--flash {
	animation: bha-pq-flash 3s ease-in-out;
}
@keyframes bha-pq-flash {
	0%   { box-shadow: 0 0 0 0 rgba(16, 151, 197, 0); }
	10%  { box-shadow: 0 0 0 5px rgba(16, 151, 197, 0.75); }
	33%  { box-shadow: 0 0 0 0 rgba(16, 151, 197, 0); }
	43%  { box-shadow: 0 0 0 5px rgba(16, 151, 197, 0.75); }
	66%  { box-shadow: 0 0 0 0 rgba(16, 151, 197, 0); }
	76%  { box-shadow: 0 0 0 5px rgba(16, 151, 197, 0.75); }
	100% { box-shadow: 0 0 0 0 rgba(16, 151, 197, 0); }
}
@keyframes bha-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}
.bha-basics-gallery__delete:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Upload drop-zone — taps to open file picker, accepts drag-drop. */
.bha-basics-gallery__dropzone {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 4px;
	padding: 24px 16px;
	margin-top: 6px;
	background: #f9fafb;
	border: 2px dashed #cbd5e1;
	border-radius: 10px;
	color: #4b5563;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.bha-basics-gallery__dropzone:hover { background: #f3f4f6; border-color: #94a3b8; }
.bha-basics-gallery__dropzone.is-dragover { background: #f0f7fa; border-color: #1097c5; color: #0d7fa8; }
.bha-basics-gallery__dropzone-icon { color: #94a3b8; }
.bha-basics-gallery__dropzone:hover .bha-basics-gallery__dropzone-icon,
.bha-basics-gallery__dropzone.is-dragover .bha-basics-gallery__dropzone-icon { color: #1097c5; }
.bha-basics-gallery__dropzone-label { font-size: 14px; font-weight: 600; }
.bha-basics-gallery__dropzone-sub   { font-size: 11px; color: #6b7280; }
@media (max-width: 768px) {
	/* Drag-and-drop from another app isn't a thing on mobile — tap is the
	   only real affordance. Hide the desktop-only "or drop them here" tail. */
	.bha-basics-gallery__dropzone-label-desktop-suffix { display: none; }
}

/* Uploading placeholder tile — replaces a drop-zone-or-file-pick file
   while it's inflight. Spinner respects the same aspect ratio as a
   real tile so the grid doesn't reflow on completion. */
.bha-basics-gallery__tile--uploading {
	background: #f3f4f6;
	display: flex; align-items: center; justify-content: center;
	cursor: default;
}
.bha-basics-gallery__spinner {
	width: 22px; height: 22px;
	border: 3px solid #e5e7eb;
	border-top-color: #1097c5;
	border-radius: 50%;
	animation: bha-spin 0.7s linear infinite;
}
@keyframes bha-spin { to { transform: rotate(360deg); } }

/* Counter pill + helper note */
.bha-basics-gallery__counter {
	display: flex; align-items: center; gap: 8px;
	margin-top: 10px;
	font-size: 12px; color: #4b5563;
}
.bha-basics-gallery__counter-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 22px;
	padding: 0 8px;
	background: #fef3c7; color: #92400e;
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
}
.bha-basics-gallery__counter-badge--ok {
	background: #d1fae5; color: #065f46;
}
.bha-basics-gallery__counter-note { line-height: 1.4; }

/* Footer: sweep + status + save. Save sits at the right, sweep at the
   left, status bridges them when there's enough space. */
.bha-basics-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid #e5e7eb;
}

.bha-basics-form__footer .bha-group-status {
	margin: 0;
	flex: 1;
	min-width: 140px;
}

/* The amber Awaiting-review visual comes from `.bha-field--awaiting-review`
   (defined above, Phase 4.0). When applied to a basics form field wrapper,
   the left border + light bg matches the progress-bar Review pill. */

/* ==================================================================== */
/* Phase 4.2 — "Location" group form                                    */
/* Mirrors the basics form layout with address controls + static map +  */
/* nearby textarea. Same header + footer + amber-review patterns.       */
/* ==================================================================== */

.bha-location-form {
	margin: 14px 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	font-size: 14px;
	line-height: 1.55;
}

.bha-location-form__loading,
.bha-location-form__error {
	padding: 18px 4px;
	text-align: center;
	color: #6b7280;
	font-size: 13px;
}
.bha-location-form__error { color: #b91c1c; }

.bha-location-form__header {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f3f4f6;
}

.bha-location-form__title {
	margin: 0 0 6px 0;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
}

.bha-location-form__intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #4b5563;
}

/* Inline error — same treatment as the basics form. */
.bha-location-form__error-inline {
	margin: 0 0 14px 0;
	padding: 10px 14px;
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	border-left: 3px solid #dc2626;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
}

/* Regenerate-nearby confirmation notice — info tone, not error. */
.bha-location-form__notice {
	margin: 0 0 14px 0;
	padding: 10px 14px;
	background: #f0f7fa;
	color: #0a4a5e;
	border: 1px solid #a8d6e6;
	border-left: 3px solid #1097c5;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
}

.bha-location-form__field + .bha-location-form__field {
	margin-top: 18px;
}

.bha-location-form__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}

/* Shared field-header row: label on the left, AI chip on the right. Used
   by every form that has a per-field AI tool (location nearby, story
   description, each rooms textarea). Wraps on narrow viewports so a long
   chip label drops below the field label rather than overflowing
   horizontally. */
.bha-field-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.bha-field-header > label,
.bha-field-header .bha-location-form__label,
.bha-field-header .bha-story-form__label,
.bha-field-header .bha-rooms-form__label {
	margin-bottom: 0;
}
.bha-field-header .bha-draft-ai,
.bha-field-header .bha-draft-ai__btn {
	margin: 0;
}

.bha-location-form__input-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.bha-location-form__textarea {
	flex: 1;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.5;
	color: #111827;
	background: #fff;
	outline: none;
	resize: vertical;
	min-height: 96px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.bha-location-form__textarea:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}

.bha-location-form__hint {
	margin-top: 6px;
	font-size: 12px;
	color: #6b7280;
}

/* Address display mode: text + "Change address" button side by side. */
.bha-location-form__addr-mode {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.bha-location-form__addr-display {
	flex: 1;
	min-width: 200px;
	padding: 9px 12px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	color: #111827;
	font-size: 14px;
	line-height: 1.5;
}

.bha-location-form__addr-change,
.bha-location-form__addr-cancel {
	padding: 8px 14px;
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.bha-location-form__addr-change:hover,
.bha-location-form__addr-cancel:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
}

/* Edit mode: form containing the HP Mapbox widget + button row. */
.bha-location-form__editor {
	flex: 1 0 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bha-location-form__widget {
	position: relative;
}

.bha-location-form__addr-input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: #111827;
	background: #fff;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}

.bha-location-form__addr-input:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}

.bha-location-form__editor-btns {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.bha-location-form__addr-use {
	padding: 8px 14px;
	background: #1097c5;
	color: #fff;
	border: 1px solid #1097c5;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.bha-location-form__addr-use:hover:not(:disabled) {
	background: #0d7fa8;
	border-color: #0d7fa8;
}

.bha-location-form__addr-use:disabled {
	background: #cbd5e1;
	border-color: #cbd5e1;
	cursor: not-allowed;
}

/* Static map preview — 16:7 (~640x280 at retina). */
.bha-location-form__map {
	/* Bottom margin separates the map from the nearby-attractions
	   section below — without it the map touches the next field. */
	margin: 14px 0 20px 0;
	padding: 0;
}

.bha-location-form__map-img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	border-radius: 10px;
	border: 1px solid #e5e7eb;
}

/* Amber/Reviewed wrapper overrides — scoped to the location form so we
   don't disturb the basics form's consistent-every-field amber treatment.
   Location has a mix: address + map have no amber wrapper, only nearby
   does. Out of the box, `.bha-field--awaiting-review`'s 12px left padding
   pushes nearby content inward, making it visually indented against the
   flush-left address/map above. Fix: negative-margin the wrapper so the
   amber bar hangs in the form's own padding area and content lands at
   the same x-position as the other sections. */
.bha-location-form__field.bha-field--awaiting-review,
.bha-location-form__field.bha-field--reviewed {
	margin-left: -14px;
	margin-right: -12px;
}

/* ==================================================================== */
/* Phase 4.4 — "The facts" group form                                   */
/* Pure-form group. 5 numerics + 5 taxonomy radio-pill groups + 2       */
/* curated-time radio-pill groups. No narratives, no prepop.            */
/* ==================================================================== */

.bha-facts-form {
	margin: 14px 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	font-size: 14px;
	line-height: 1.55;
}
.bha-facts-form__loading,
.bha-facts-form__error { padding: 18px 4px; text-align: center; color: #6b7280; font-size: 13px; }
.bha-facts-form__error { color: #b91c1c; }
.bha-facts-form__header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f3f4f6; }
.bha-facts-form__title  { margin: 0 0 6px 0; font-size: 17px; font-weight: 700; color: #111827; }
.bha-facts-form__intro  { margin: 0; font-size: 13px; line-height: 1.55; color: #4b5563; }

.bha-facts-form__error-inline {
	margin: 0 0 14px 0; padding: 10px 14px;
	background: #fef2f2; color: #b91c1c;
	border: 1px solid #fecaca; border-left: 3px solid #dc2626;
	border-radius: 6px; font-size: 13px; line-height: 1.5;
}

.bha-facts-form__label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.bha-facts-form__hint  { margin-top: 4px; font-size: 12px; color: #6b7280; }

.bha-facts-form__field + .bha-facts-form__field { margin-top: 18px; }

/* Required asterisk — small amber star beside field labels. */
.bha-facts-form__required {
	color: #b45309;
	font-weight: 700;
}

/* Footer hint replacing the old "X fields need your attention" counter —
   a static reminder that everything is required, no running count. */
.bha-facts-form__required-hint {
	flex: 1;
	font-size: 12px;
	color: #6b7280;
	margin: 0;
}

/* Client-side validation highlight — applied to field rows missing a
   value when Save is clicked. Cleared on next Save attempt. */
.bha-facts-form__field--error {
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	padding: 10px 12px;
	border-radius: 6px;
	margin-left: -14px;
	margin-right: -12px;
}

/* Over-limit shake — brief flash when the host tries to pick more than
   maxValues on a multi-select field. */
.bha-radio-pills__option--over-limit .bha-radio-pills__label {
	background: #fef2f2;
	color: #991b1b;
	border-color: #fca5a5;
	animation: bha-facts-overlimit 0.5s;
}
@keyframes bha-facts-overlimit {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-2px); }
	75%      { transform: translateX(2px); }
}

/* Numeric grid — 4 opener-set fields side-by-side, floor_area on its own row. */
.bha-facts-form__numeric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px 16px;
	margin-bottom: 18px;
}
.bha-facts-form__numeric-cell { display: flex; flex-direction: column; }
.bha-facts-form__numeric-input {
	position: relative;
	display: flex; align-items: center;
}
.bha-facts-form__numeric-input input[type=number] {
	width: 100%;
	padding: 9px 12px;
	padding-right: 36px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px; font-family: inherit;
	color: #111827; background: #fff;
	outline: none; box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bha-facts-form__numeric-input input[type=number]:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-facts-form__numeric-suffix {
	position: absolute;
	right: 12px;
	color: #6b7280;
	font-size: 12px;
	pointer-events: none;
}

/* Radio-pill primitive — shared between taxonomy + time fields. Hides
   the native radio, styles the adjacent label as a pill. :checked and
   :focus-visible give feedback; keyboard navigation works natively. */
.bha-radio-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}
.bha-radio-pills__empty {
	color: #9ca3af;
	font-size: 12px;
	padding: 6px 4px;
}
.bha-radio-pills__option {
	position: relative;
	cursor: pointer;
}
/* Hide both radio AND checkbox — the pill itself is the visible click
 * target for single-select (radio) and multi-select (checkbox) alike.
 * Leaving the native inputs visible produced a checkbox-plus-pill
 * double control that read as cluttered (user-reported 2026-04-24). */
.bha-radio-pills__option input[type=radio],
.bha-radio-pills__option input[type=checkbox] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px; height: 1px;
}
.bha-radio-pills__label {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	user-select: none;
}
.bha-radio-pills__option:hover .bha-radio-pills__label {
	border-color: #9ca3af;
	background: #f9fafb;
}
.bha-radio-pills__option input[type=radio]:checked ~ .bha-radio-pills__label,
.bha-radio-pills__option input[type=checkbox]:checked ~ .bha-radio-pills__label {
	background: #f0f7fa;
	color: #0a4a5e;
	border-color: #1097c5;
	font-weight: 600;
}
.bha-radio-pills__option input[type=radio]:focus-visible ~ .bha-radio-pills__label,
.bha-radio-pills__option input[type=checkbox]:focus-visible ~ .bha-radio-pills__label {
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.2);
}

/* Time pair — two radio groups side-by-side on wide viewports, stacked
   on narrow. Each section acts like a bha-field row. */
.bha-facts-form__time-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 18px;
}
.bha-facts-form__time-section { margin-top: 0 !important; }

/* Custom-time pill reveals an inline <input type=time> beneath the
   pill row. Kept visually attached to the pills via small margin +
   left-indent so it reads as part of the same field control. */
.bha-facts-form__custom-time-row {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.bha-facts-form__custom-time-input {
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1.3;
	color: #111827;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bha-facts-form__custom-time-input:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
	outline: none;
}

/* Footer — same shape as basics/story/location. */
.bha-facts-form__footer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 22px; padding-top: 14px; border-top: 1px solid #e5e7eb;
}
.bha-facts-form__footer .bha-group-status { margin: 0; flex: 1; min-width: 140px; }

/* ==================================================================== */
/* Phase 4.3 — "Tell your story" group form                             */
/* Mirrors basics/location layout. Adds chip-row for tags + single-file */
/* video upload with "No video" skip affordance.                         */
/* ==================================================================== */

.bha-story-form {
	margin: 14px 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	font-size: 14px;
	line-height: 1.55;
}

.bha-story-form__loading,
.bha-story-form__error { padding: 18px 4px; text-align: center; color: #6b7280; font-size: 13px; }
.bha-story-form__error { color: #b91c1c; }

.bha-story-form__header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f3f4f6; }
.bha-story-form__title  { margin: 0 0 6px 0; font-size: 17px; font-weight: 700; color: #111827; }
.bha-story-form__intro  { margin: 0; font-size: 13px; line-height: 1.55; color: #4b5563; }
.bha-story-form__intro em { font-style: normal; font-weight: 600; color: #374151; }
.bha-story-form__intro-check {
	display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center;
	background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; border-radius: 4px;
	font-size: 11px; font-weight: 700; vertical-align: baseline; margin: 0 1px;
}

.bha-story-form__error-inline {
	margin: 0 0 14px 0; padding: 10px 14px;
	background: #fef2f2; color: #b91c1c;
	border: 1px solid #fecaca; border-left: 3px solid #dc2626;
	border-radius: 6px; font-size: 13px; line-height: 1.5;
}

.bha-story-form__field + .bha-story-form__field { margin-top: 18px; }
.bha-story-form__label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.bha-story-form__input-row { display: flex; align-items: flex-start; gap: 8px; }

/* Same negative-margin alignment fix as location: amber wrapper bar
   hangs in the form's padding so content stays flush-left with siblings. */
.bha-story-form__field.bha-field--awaiting-review,
.bha-story-form__field.bha-field--reviewed {
	margin-left: -14px;
	margin-right: -12px;
}

.bha-story-form__textarea {
	flex: 1; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px;
	font-size: 14px; font-family: inherit; line-height: 1.5;
	color: #111827; background: #fff; outline: none; resize: vertical;
	min-height: 160px;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.bha-story-form__textarea:focus { border-color: #1097c5; box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15); }

.bha-story-form__hint { margin-top: 6px; font-size: 12px; color: #6b7280; line-height: 1.5; }
.bha-story-form__hint strong { color: #374151; font-weight: 600; }

/* Required asterisk next to the field label. Amber matches the facts
 * form + profile form for a consistent "this is mandatory" cue. */
.bha-story-form__required {
	color: #b45309;
	font-weight: 700;
}

/* Client-side validation highlight — applied when Save is clicked with
 * an empty required field. Cleared on input or next Save attempt.
 * Same visual language as bha-facts-form__field--error. */
.bha-story-form__field--error {
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	padding: 10px 12px;
	border-radius: 6px;
	margin-left: -14px;
	margin-right: -12px;
}

/* ---- Tags chip-row ---- */
.bha-story-form__chips {
	flex: 1;
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 6px 8px;
	min-height: 44px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	align-content: flex-start;
}
.bha-story-form__chips-empty {
	color: #9ca3af; font-size: 12px; padding: 6px 4px;
}
.bha-story-form__chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 4px 3px 10px;
	background: #f0f7fa;
	color: #0a4a5e;
	border: 1px solid #a8d6e6;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.bha-story-form__chip-remove {
	width: 18px; height: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; background: transparent; color: #0a4a5e;
	font-size: 16px; line-height: 1; cursor: pointer;
	border-radius: 50%;
}
.bha-story-form__chip-remove:hover {
	background: #dbeef5;
}
.bha-story-form__tag-add-row { margin-top: 8px; position: relative; }
.bha-story-form__tag-add-input {
	width: 100%; padding: 8px 12px;
	border: 1px solid #d1d5db; border-radius: 8px;
	font-size: 13px; font-family: inherit;
	background: #fff; color: #111827; outline: none;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bha-story-form__tag-add-input:focus { border-color: #1097c5; box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15); }

/* Autocomplete suggestion dropdown — anchored to the input. */
.bha-story-form__tag-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 10;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	max-height: 220px;
	overflow-y: auto;
}
.bha-story-form__tag-suggest-option {
	padding: 7px 12px;
	font-size: 13px;
	color: #111827;
	cursor: pointer;
	list-style: none;
}
.bha-story-form__tag-suggest-option:hover,
.bha-story-form__tag-suggest-option.is-active {
	background: #f0f7fa;
	color: #0a4a5e;
}

/* ---- Video field ---- */
.bha-story-form__video-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 6px; }

.bha-story-form__video-dropzone {
	flex: 1; min-width: 200px;
	display: flex; align-items: center; justify-content: center;
	padding: 22px 16px;
	background: #f9fafb;
	border: 2px dashed #d1d5db;
	border-radius: 10px;
	color: #6b7280; font-size: 13px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	text-align: center;
}
.bha-story-form__video-dropzone:hover,
.bha-story-form__video-dropzone.is-dragover { background: #f0f7fa; border-color: #7fc5dc; color: #0a4a5e; }

.bha-story-form__video-skip,
.bha-story-form__video-undo,
.bha-story-form__video-remove {
	padding: 8px 14px;
	background: #fff; color: #374151;
	border: 1px solid #d1d5db; border-radius: 8px;
	font-size: 13px; font-weight: 600; font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.bha-story-form__video-skip:hover,
.bha-story-form__video-undo:hover,
.bha-story-form__video-remove:hover { background: #f3f4f6; border-color: #9ca3af; }

.bha-story-form__video-card {
	flex: 1; min-width: 200px;
	padding: 12px 14px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 10px;
	display: flex; flex-direction: column; gap: 6px;
}

/* Embedded HTML5 video player — constrained to the card width with a
   sensible max height so a tall portrait clip doesn't dominate the form. */
.bha-story-form__video-player {
	display: block;
	width: 100%;
	max-height: 320px;
	background: #000;
	border-radius: 8px;
	outline: none;
}
.bha-story-form__video-filename { font-weight: 600; color: #0c4a6e; font-size: 13px; }
.bha-story-form__video-meta     { font-size: 12px; color: #0369a1; }
.bha-story-form__video-card .bha-story-form__video-remove { align-self: flex-start; margin-top: 6px; }

.bha-story-form__video-skipped {
	flex: 1; min-width: 200px;
	padding: 12px 14px;
	background: #f3f4f6;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	color: #4b5563; font-size: 13px;
}

.bha-story-form__video-busy {
	flex: 1;
	padding: 22px 16px;
	background: #f0f7fa;
	border: 1px solid #a8d6e6;
	border-radius: 10px;
	color: #0a4a5e; font-size: 13px;
	text-align: center;
}

/* Footer — same as basics/location */
.bha-story-form__footer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 22px; padding-top: 14px; border-top: 1px solid #e5e7eb;
}
.bha-story-form__footer .bha-group-status { margin: 0; flex: 1; min-width: 140px; }

/* =============================================================
   Phase 4.5 — Rooms & spaces form
   ============================================================= */

.bha-rooms-form {
	margin: 16px 12px 16px 12px;
	padding: 18px 16px 18px 18px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.bha-rooms-form__loading,
.bha-rooms-form__error { color: #6b7280; font-size: 13px; padding: 12px 0; }
.bha-rooms-form__error { color: #b91c1c; }

.bha-rooms-form__header { margin-bottom: 14px; }
.bha-rooms-form__title {
	margin: 0 0 6px 0;
	font-size: 18px; font-weight: 700; color: #111827;
}
.bha-rooms-form__intro {
	margin: 0;
	font-size: 13px; line-height: 1.55; color: #4b5563;
}
.bha-rooms-form__intro strong { color: #374151; font-weight: 600; }
.bha-rooms-form__intro-check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	background: #10b981; color: #fff;
	border-radius: 50%; font-size: 11px; font-weight: 700;
	vertical-align: middle; margin: 0 1px;
}

.bha-rooms-form__error-inline {
	margin: 8px 0 12px 0;
	padding: 10px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 8px;
	font-size: 13px;
}

.bha-rooms-form__field {
	margin-top: 18px;
}
.bha-rooms-form__field--error {
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	padding: 10px 12px;
	border-radius: 6px;
	margin-left: -14px;
	margin-right: -12px;
}
.bha-rooms-form__label {
	display: block;
	font-size: 13px; font-weight: 600; color: #374151;
	margin-bottom: 6px;
}
.bha-rooms-form__hint {
	margin-bottom: 8px;
	font-size: 12px; color: #6b7280; line-height: 1.5;
}
.bha-rooms-form__input-row {
	display: flex; align-items: flex-start; gap: 8px;
}
.bha-rooms-form__textarea {
	flex: 1; min-width: 0;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit; font-size: 14px; line-height: 1.5;
	color: #111827; background: #fff; outline: none; resize: vertical;
	min-height: 96px;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.bha-rooms-form__textarea:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}

/* Live character counter — right-aligned under the textarea. */
.bha-rooms-form__counter {
	margin-top: 4px;
	text-align: right;
	font-size: 11px; color: #9ca3af;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s;
}
.bha-rooms-form__counter.is-warning { color: #d97706; font-weight: 600; }
.bha-rooms-form__counter.is-over    { color: #dc2626; font-weight: 700; }

/* Footer — mirrors story/basics/location. */
.bha-rooms-form__footer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 22px; padding-top: 14px; border-top: 1px solid #e5e7eb;
}
.bha-rooms-form__footer .bha-group-status { margin: 0; flex: 1; min-width: 140px; }

/* =============================================================
   Phase 4.6 — Rules, safety & access form
   (Mirrors the rooms-form layout; adds a required-asterisk + error-
   band pattern for the 3 mandatory narratives. Reuses the shared
   `.bha-radio-pills` CSS for the accessibility multi-select.)
   ============================================================= */

.bha-rules-form {
	margin: 16px 12px 16px 12px;
	padding: 18px 16px 18px 18px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.bha-rules-form__loading,
.bha-rules-form__error { color: #6b7280; font-size: 13px; padding: 12px 0; }
.bha-rules-form__error { color: #b91c1c; }

.bha-rules-form__header { margin-bottom: 14px; }
.bha-rules-form__title {
	margin: 0 0 6px 0;
	font-size: 18px; font-weight: 700; color: #111827;
}
.bha-rules-form__intro {
	margin: 0;
	font-size: 13px; line-height: 1.55; color: #4b5563;
}
.bha-rules-form__intro strong { color: #374151; font-weight: 600; }
.bha-rules-form__intro-check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	background: #10b981; color: #fff;
	border-radius: 50%; font-size: 11px; font-weight: 700;
	vertical-align: middle; margin: 0 1px;
}

.bha-rules-form__error-inline {
	margin: 8px 0 12px 0;
	padding: 10px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 8px;
	font-size: 13px;
}

.bha-rules-form__field {
	margin-top: 18px;
}
.bha-rules-form__label {
	display: block;
	font-size: 13px; font-weight: 600; color: #374151;
	margin-bottom: 6px;
}
.bha-rules-form__required {
	color: #b45309;
	font-weight: 700;
}
.bha-rules-form__hint {
	margin-bottom: 8px;
	font-size: 12px; color: #6b7280; line-height: 1.5;
}
.bha-rules-form__input-row {
	display: flex; align-items: flex-start; gap: 8px;
}
.bha-rules-form__textarea {
	flex: 1; min-width: 0;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit; font-size: 14px; line-height: 1.5;
	color: #111827; background: #fff; outline: none; resize: vertical;
	min-height: 96px;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.bha-rules-form__textarea:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}

.bha-rules-form__counter {
	margin-top: 4px;
	text-align: right;
	font-size: 11px; color: #9ca3af;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s;
}
.bha-rules-form__counter.is-warning { color: #d97706; font-weight: 600; }
.bha-rules-form__counter.is-over    { color: #dc2626; font-weight: 700; }

/* Per-field error highlight — applied when Save is clicked with a
   required field empty. Cleared on input or next Save attempt. */
.bha-rules-form__field--error {
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	padding: 10px 12px;
	border-radius: 6px;
	margin-left: -14px;
	margin-right: -12px;
}

.bha-rules-form__footer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 22px; padding-top: 14px; border-top: 1px solid #e5e7eb;
}
.bha-rules-form__footer .bha-group-status { margin: 0; flex: 1; min-width: 140px; }

/* Footer mirrors the basics form footer exactly. */
.bha-location-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid #e5e7eb;
}

.bha-location-form__footer .bha-group-status {
	margin: 0;
	flex: 1;
	min-width: 140px;
}

/* -------------------------------------------------------------------- */
/* Phase 4.7 — Pricing Config form + embedded Pricing Assistant chat    */
/* -------------------------------------------------------------------- */

.bha-pricing-form {
	margin: 14px 0;
	padding: 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
}

.bha-pricing-form__loading,
.bha-pricing-form__error {
	color: #6b7280;
	font-size: 13px;
	padding: 12px 0;
}
.bha-pricing-form__error { color: #b91c1c; }

.bha-pricing-form__header { margin-bottom: 14px; }
.bha-pricing-form__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
}
.bha-pricing-form__intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #4b5563;
}

.bha-pricing-form__gst-banner {
	margin: 10px 0 16px;
	padding: 10px 14px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #075985;
}
.bha-pricing-form__gst-banner strong { color: #0c4a6e; }

.bha-pricing-form__required { color: #dc2626; font-weight: 700; }

/* Divider between chat and manual form */
.bha-pricing-form__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px 0 14px;
	font-size: 12px;
	color: #9ca3af;
	font-style: italic;
	text-transform: lowercase;
}
.bha-pricing-form__divider::before,
.bha-pricing-form__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e5e7eb;
	margin: 0 12px;
}

.bha-pricing-form__error-inline {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 10px;
	font-size: 13px;
	color: #b91c1c;
}

/* Base price block — always-visible input at the top of the form */
.bha-pricing-form__base {
	margin: 0 0 14px;
	padding: 14px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
}
.bha-pricing-form__base-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	margin-bottom: 4px;
}
.bha-pricing-form__hint {
	margin: 0 0 8px;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}

.bha-pricing-form__currency-row {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.bha-pricing-form__currency-row--compact { min-width: 140px; }
.bha-pricing-form__currency-row:focus-within {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-pricing-form__currency-symbol {
	padding: 8px 10px;
	background: #f3f4f6;
	color: #4b5563;
	font-weight: 600;
	border-right: 1px solid #e5e7eb;
}
.bha-pricing-form__currency-input {
	border: 0;
	outline: none;
	padding: 8px 10px;
	font-size: 14px;
	font-family: inherit;
	width: 100px;
	background: transparent;
	color: #111827;
}
.bha-pricing-form__currency-input::-webkit-outer-spin-button,
.bha-pricing-form__currency-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.bha-pricing-form__currency-input { -moz-appearance: textfield; }
.bha-pricing-form__currency-suffix {
	padding: 8px 10px;
	background: #f3f4f6;
	color: #6b7280;
	font-size: 13px;
	border-left: 1px solid #e5e7eb;
}

/* Accordion sections */
.bha-pricing-form__section {
	margin: 8px 0;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.bha-pricing-form__section--open {
	border-color: #c7d2fe;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Awaiting-review amber border — matches the shared `.bha-field--awaiting-review`
   visual used on other group forms (facts/rules/rooms). Overrides the default
   section border when a field needs host review. */
.bha-pricing-form__section.bha-field--awaiting-review {
	border-color: #fbbf24;
	background: #fffcf3;
	box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25);
}
.bha-pricing-form__section.bha-field--awaiting-review .bha-pricing-form__section-header {
	background: #fffcf3;
}
.bha-pricing-form__section.bha-field--awaiting-review.bha-pricing-form__section--open .bha-pricing-form__section-header {
	background: #fef7e0;
}

/* Amber dot in the header — subtle awaiting indicator visible even when the
   section is collapsed. Tucked between title and summary. */
.bha-pricing-form__section-awaiting-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	background: #f59e0b;
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}

/* Awaiting-review notice at the top of an expanded section body. Pairs the
   host-facing message with an inline ✓ accept button. */
.bha-pricing-form__section-review {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 8px 12px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 8px;
	font-size: 12px;
	color: #78350f;
}
.bha-pricing-form__section-review-msg {
	flex: 1;
	line-height: 1.4;
}
.bha-pricing-form__section-review .bha-field-accept {
	flex: 0 0 auto;
}

/* Awaiting amber on the base-price field container. Matches the section-
   level visual — the "Awaiting your review" notice + ✓ button lives inside
   via the shared `.bha-pricing-form__section-review` element. */
.bha-pricing-form__base.bha-field--awaiting-review {
	border-color: #fbbf24;
	background: #fffcf3;
	box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25);
}

/* Footer hint — ready state picks up a subtle green when all reviewed. */
.bha-pricing-form__footer-hint--ready {
	color: #065f46;
}
.bha-pricing-form__section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 13px 16px;
	background: #fff;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	color: #111827;
}
.bha-pricing-form__section-header:hover { background: #f9fafb; }
.bha-pricing-form__section--open .bha-pricing-form__section-header {
	background: #f5f3ff;
	border-bottom: 1px solid #e5e7eb;
}
.bha-pricing-form__section-title {
	font-size: 14px;
	font-weight: 600;
	flex: 0 0 auto;
}
.bha-pricing-form__section-summary {
	flex: 1;
	font-size: 13px;
	color: #6b7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bha-pricing-form__section-chev {
	display: inline-flex;
	align-items: center;
	color: #9ca3af;
	transition: transform 0.15s;
}
.bha-pricing-form__section--open .bha-pricing-form__section-chev {
	transform: rotate(180deg);
}
.bha-pricing-form__section-body {
	padding: 14px 16px 16px;
	background: #fafafa;
}
.bha-pricing-form__section-description {
	margin: 0 0 12px;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.5;
}

/* Repeater primitive */
.bha-repeater { margin: 0; }
.bha-repeater__rows { display: flex; flex-direction: column; gap: 10px; }
.bha-repeater__row {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 12px 42px 12px 14px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
}
.bha-repeater__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #9ca3af;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}
.bha-repeater__remove:hover {
	background: #fee2e2;
	color: #dc2626;
}
.bha-repeater__empty {
	padding: 10px 12px;
	background: #fff;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	font-size: 12px;
	color: #9ca3af;
	text-align: center;
}
.bha-repeater__add {
	margin-top: 10px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	color: #1097c5;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.bha-repeater__add:hover {
	background: #f0f7fa;
	border-color: #1097c5;
}

/* Shared inputs */
.bha-pricing-form__text-input,
.bha-pricing-form__number-input,
.bha-pricing-form__select {
	padding: 8px 10px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	outline: none;
}
.bha-pricing-form__text-input:focus,
.bha-pricing-form__number-input:focus,
.bha-pricing-form__select:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-pricing-form__number-input {
	width: 90px;
	text-align: left;
	-moz-appearance: textfield;
}
.bha-pricing-form__number-input::-webkit-outer-spin-button,
.bha-pricing-form__number-input::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}

/* Daily prices row */
.bha-pricing-form__daily-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.bha-pricing-form__day-picker { display: flex; flex-direction: column; gap: 8px; }
.bha-pricing-form__day-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bha-pricing-form__day-preset {
	padding: 5px 10px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	color: #4b5563;
	font-size: 12px;
	font-family: inherit;
	cursor: pointer;
}
.bha-pricing-form__day-preset:hover {
	background: #f0f7fa;
	border-color: #7fc5dc;
	color: #1097c5;
}
.bha-pricing-form__day-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bha-pricing-form__day-pill {
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	user-select: none;
}
.bha-pricing-form__day-pill input[type=checkbox] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.bha-pricing-form__day-pill-label {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #4b5563;
}
.bha-pricing-form__day-pill:has(input:checked) {
	background: #1097c5;
	border-color: #1097c5;
}
.bha-pricing-form__day-pill:has(input:checked) .bha-pricing-form__day-pill-label {
	color: #fff;
}

/* Tier row */
.bha-pricing-form__tier-row,
.bha-pricing-form__extra-row,
.bha-pricing-form__discount-row {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}
.bha-pricing-form__tier-field,
.bha-pricing-form__extra-field,
.bha-pricing-form__discount-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 130px;
}
.bha-pricing-form__extra-field--required { flex: 1 1 100%; }
.bha-pricing-form__tier-label,
.bha-pricing-form__extra-label,
.bha-pricing-form__discount-label {
	font-size: 12px;
	font-weight: 600;
	color: #4b5563;
}
.bha-pricing-form__discount-input-wrap {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.bha-pricing-form__discount-input-wrap:focus-within {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-pricing-form__discount-input-wrap .bha-pricing-form__number-input {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.bha-pricing-form__discount-input-wrap .bha-pricing-form__currency-suffix {
	border-left: 1px solid #e5e7eb;
}

/* Extra fee "required" toggle */
.bha-pricing-form__required-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #4b5563;
	cursor: pointer;
}
.bha-pricing-form__required-toggle input[type=checkbox] {
	accent-color: #1097c5;
}

/* Security deposit */
.bha-pricing-form__deposit-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Footer */
.bha-pricing-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid #e5e7eb;
}
.bha-pricing-form__footer-hint {
	flex: 1;
	min-width: 140px;
	font-size: 12px;
	color: #6b7280;
}

/* -------------------------------------------------------------------- */
/* Pricing Assistant chat widget                                        */
/* Visually distinct — gradient border + warm tone so hosts see the     */
/* scope (pricing only, different from the main host-agent chat).       */
/* -------------------------------------------------------------------- */

.bha-pricing-chat {
	position: relative;
	margin: 6px 0 0;
	padding: 16px;
	background: #fff;
	border-radius: 14px;
	border: 2px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #34d399 100%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.bha-pricing-chat__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 2px;
}
.bha-pricing-chat__title-icon { font-size: 16px; }
.bha-pricing-chat__subtitle {
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 12px;
	line-height: 1.5;
}

.bha-pricing-chat__messages {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 280px;
	overflow-y: auto;
	/* Right padding + stable gutter so the scrollbar never overlaps
	   the right-aligned user bubbles. */
	padding: 4px 10px 4px 2px;
	margin-bottom: 10px;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}
.bha-pricing-chat__messages::-webkit-scrollbar {
	width: 8px;
}
.bha-pricing-chat__messages::-webkit-scrollbar-track {
	background: transparent;
}
.bha-pricing-chat__messages::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 4px;
}
.bha-pricing-chat__messages::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Row wrapper — aligns bubble left (assistant, with pin) or right (user).
   Assistant rows use the same Bookably pin glyph as the main chat's
   `.bha-message--assistant::before` for visual consistency. */
.bha-pricing-chat__row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 6px;
}
.bha-pricing-chat__row--user {
	justify-content: flex-end;
}
.bha-pricing-chat__row--assistant {
	justify-content: flex-start;
	position: relative;
	padding-left: 30px;
}
.bha-pricing-chat__row--assistant::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	background: url('/wp-content/uploads/2025/07/bookably-logo-pin.png') no-repeat center / contain;
}

.bha-pricing-chat__bubble {
	max-width: 90%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.55;
}
.bha-pricing-chat__bubble p { margin: 0 0 6px; }
.bha-pricing-chat__bubble p:last-child { margin-bottom: 0; }

.bha-pricing-chat__bubble--user {
	background: #1097c5;
	color: #fff;
	border-bottom-right-radius: 4px;
}

.bha-pricing-chat__bubble--assistant {
	background: #f3f4f6;
	color: #111827;
	border-bottom-left-radius: 4px;
}

/* Sample-booking chip — rendered after a kind=propose auto-apply, invites
   the host to click for a server-computed quote against a realistic
   scenario the LLM picked. Visually lighter than a bubble so it reads
   as an action, not a message. */
.bha-pricing-chat__sample-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	max-width: 100%;
}
.bha-pricing-chat__sample-hint {
	font-size: 11px;
	color: #6b7280;
	font-style: italic;
	letter-spacing: 0.01em;
}
.bha-pricing-chat__sample-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 8px 14px;
	background: #fff;
	color: #374151;
	border: 1px solid #c7d2fe;
	border-radius: 999px;
	font-size: 12px;
	font-family: inherit;
	line-height: 1.35;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
	box-shadow: 0 1px 2px rgba(139, 92, 246, 0.08);
	text-align: left;
}
.bha-pricing-chat__sample-chip:hover:not(:disabled) {
	background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
	border-color: #8b5cf6;
	color: #4c1d95;
	transform: translateY(-1px);
}
.bha-pricing-chat__sample-chip:disabled,
.bha-pricing-chat__sample-chip--clicked {
	cursor: default;
	opacity: 0.55;
	background: #f9fafb;
	color: #9ca3af;
	border-color: #e5e7eb;
	transform: none;
}
.bha-pricing-chat__sample-chip-icon {
	font-size: 14px;
	flex: 0 0 auto;
}
.bha-pricing-chat__sample-chip-label {
	flex: 1;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
}

/* Thinking animation — 3 bouncing dots inside an assistant bubble.
   Visual language matches `.bha-typing-indicator` in the main chat. */
.bha-pricing-chat__typing {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 11px 14px;
}
.bha-pricing-chat__typing span {
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #9ca3af;
	border-radius: 50%;
	animation: bha-bounce 1.2s ease-in-out infinite;
}
.bha-pricing-chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.bha-pricing-chat__typing span:nth-child(3) { animation-delay: 0.4s; }

/* Warnings block (kind=warn) */
.bha-pricing-chat__warnings {
	max-width: 90%;
	padding: 10px 14px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	font-size: 12px;
	color: #78350f;
}
.bha-pricing-chat__warnings-title {
	font-weight: 700;
	margin-bottom: 4px;
}
.bha-pricing-chat__warnings-list {
	margin: 0;
	padding-left: 18px;
	line-height: 1.55;
}

/* Quote breakdown (kind=quote) */
.bha-pricing-chat__quote {
	max-width: 90%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	font-size: 12px;
	color: #14532d;
}
.bha-pricing-chat__quote-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.bha-pricing-chat__quote-row--meta {
	color: #166534;
	font-weight: 600;
	padding-bottom: 6px;
	margin-bottom: 4px;
	border-bottom: 1px dashed #bbf7d0;
}
.bha-pricing-chat__quote-row--discount .bha-pricing-chat__quote-value { color: #be185d; }
.bha-pricing-chat__quote-row--total {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid #bbf7d0;
	font-weight: 700;
	color: #065f46;
}
.bha-pricing-chat__quote-row--deposit {
	margin-top: 2px;
	color: #475569;
	font-style: italic;
}

/* Composer — input pill + round icon send, matches main chat's send-btn pattern */
.bha-pricing-chat__composer {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}
.bha-pricing-chat__input {
	flex: 1;
	min-width: 0; /* allow shrink below intrinsic placeholder width on narrow viewports */
	padding: 9px 15px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	background: #fff;
	color: #111827;
	resize: none;
	overflow-y: auto;
	min-height: 38px;
	max-height: 140px;
	line-height: 1.45;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bha-pricing-chat__input:focus {
	border-color: #8b5cf6;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.bha-pricing-chat__input:disabled { background: #f9fafb; cursor: wait; }

/* 9.7.B.1 — hide the calendar/pricing assistant textarea scrollbar on
   mobile. Same shape as the main composer fix in chat-base.css for
   .bha-input; Chrome on Android paints a preemptive scrollbar on
   focused textareas even before content overflows. */
@media (max-width: 768px) {
	.bha-pricing-chat__input {
		scrollbar-width: none;
	}
	.bha-pricing-chat__input::-webkit-scrollbar {
		display: none;
	}
}

.bha-pricing-chat__send {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #1097c5;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, transform 0.1s;
}
.bha-pricing-chat__send:hover:not(:disabled)  { background: #0d7fa8; }
.bha-pricing-chat__send:active:not(:disabled) { transform: scale(0.93); }
.bha-pricing-chat__send:disabled {
	background: #cbd5e1;
	cursor: not-allowed;
}

.bha-pricing-chat__status {
	margin-top: 8px;
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 8px;
}
.bha-pricing-chat__status--info  { background: #f3f4f6; color: #4b5563; }
.bha-pricing-chat__status--ok    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.bha-pricing-chat__status--error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

/* Facts form derived-field visual (Phase 4.7 cross-cutting) */
.bha-facts-form__numeric-cell--derived .bha-facts-form__numeric-input input[type=number] {
	background: #f9fafb;
	color: #6b7280;
	cursor: not-allowed;
}
.bha-facts-form__derived-note {
	margin-top: 4px;
	font-size: 11px;
	color: #8b5cf6;
	font-style: italic;
	line-height: 1.45;
}

/* -------------------------------------------------------------------- */
/* Phase 4.8 — Booking Settings group form                              */
/* -------------------------------------------------------------------- */

.bha-booking-form {
	margin: 12px 0;
	padding: 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.bha-booking-form__loading,
.bha-booking-form__error { color: #6b7280; font-size: 13px; padding: 12px 0; }
.bha-booking-form__error { color: #b91c1c; }

.bha-booking-form__header { margin-bottom: 14px; }
.bha-booking-form__title {
	margin: 0 0 6px 0;
	font-size: 18px; font-weight: 700; color: #111827;
}
.bha-booking-form__intro {
	margin: 0;
	font-size: 13px; line-height: 1.55; color: #4b5563;
}

.bha-booking-form__error-inline {
	margin: 8px 0 12px 0;
	padding: 10px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 8px;
	font-size: 13px;
}

.bha-booking-form__field {
	margin-top: 18px;
}
.bha-booking-form__label {
	display: block;
	font-size: 13px; font-weight: 600; color: #374151;
	margin-bottom: 6px;
}
.bha-booking-form__required {
	color: #b45309;
	font-weight: 700;
}
.bha-booking-form__hint {
	margin-bottom: 8px;
	font-size: 12px; color: #6b7280; line-height: 1.5;
}
.bha-booking-form__input-row {
	display: flex; align-items: flex-start; gap: 8px;
}

/* Numeric pair — qty (min/max) and length (min/max) share this layout */
.bha-booking-form__numeric-section { margin-top: 18px; }
.bha-booking-form__numeric-title {
	font-size: 13px; font-weight: 700; color: #111827;
	margin-bottom: 4px;
}
.bha-booking-form__numeric-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 8px;
}
.bha-booking-form__numeric-cell { display: flex; flex-direction: column; }
.bha-booking-form__numeric-input {
	display: flex; align-items: center; gap: 6px;
	flex: 1; min-width: 0;
}
.bha-booking-form__numeric-input input[type=number] {
	flex: 1; min-width: 0;
	padding: 9px 10px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit; font-size: 14px; line-height: 1.4;
	color: #111827; background: #fff; outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.bha-booking-form__numeric-input input[type=number]:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-booking-form__numeric-suffix {
	font-size: 12px; color: #6b7280;
	white-space: nowrap;
}

/* Tier-derived booking_max_quantity — read-only with helper note,
   mirrors facts/sleeps under guest_price_tiers. */
.bha-booking-form__numeric-cell--derived .bha-booking-form__numeric-input input[type=number] {
	background: #f9fafb;
	color: #6b7280;
	cursor: not-allowed;
}
/* Section-level note (under the grid). Sits below both cells so the
   right cell doesn't grow taller than the left. */
.bha-booking-form__numeric-section > .bha-booking-form__derived-note {
	margin-top: 6px;
	font-size: 11px;
	color: #8b5cf6;
	font-style: italic;
	line-height: 1.45;
	text-align: right;
}

/* Auto-approve warning — appears under the moderation pill row only
   when the host has selected "Auto-approve every booking". Amber to
   sit between info and error visually. */
.bha-booking-form__moderation-warning {
	margin-top: 10px;
	padding: 10px 12px;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	color: #92400e;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.55;
}

/* Cancellation policy summary — selected term description, shows under
   the combobox after a pick. */
.bha-booking-form__cancellation-summary {
	margin-top: 6px;
	padding: 8px 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	font-size: 12px; line-height: 1.5; color: #4b5563;
}

/* Sublabel under each radio pill — used by booking_moderated to surface
   the "what this means" copy without burying it in a tooltip. */
.bha-booking-form .bha-radio-pills__sublabel {
	display: block;
	margin-top: 2px;
	font-size: 11px; color: #6b7280; font-weight: 400;
	line-height: 1.4;
}

/* Per-field error highlight — applied when Save reports a validation
   failure for a specific field; cleared on input. */
.bha-booking-form__field--error,
.bha-booking-form__numeric-cell--error {
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	padding: 10px 12px;
	border-radius: 6px;
	margin-left: -14px;
	margin-right: -12px;
}

/* Inline cross-pair error — appears under a numeric pair when min > max. */
.bha-booking-form__pair-error {
	margin-top: 8px;
	padding: 8px 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.bha-booking-form__footer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 22px; padding-top: 14px; border-top: 1px solid #e5e7eb;
}
.bha-booking-form__required-hint {
	flex: 1; min-width: 140px;
	font-size: 12px; color: #6b7280;
}

/* -------------------------------------------------------------------- */
/* Phase 4.9 — Calendar Sync group form                                 */
/* -------------------------------------------------------------------- */

.bha-calendar-form,
.bha-tax-form {
	margin: 12px 0;
	padding: 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.bha-calendar-form__loading,
.bha-calendar-form__error,
.bha-tax-form__loading,
.bha-tax-form__error { color: #6b7280; font-size: 13px; padding: 12px 0; }
.bha-calendar-form__error,
.bha-tax-form__error { color: #b91c1c; }

.bha-calendar-form__header,
.bha-tax-form__header { margin-bottom: 14px; }
.bha-calendar-form__title,
.bha-tax-form__title {
	margin: 0 0 6px 0;
	font-size: 18px; font-weight: 700; color: #111827;
}
.bha-calendar-form__intro,
.bha-tax-form__intro {
	margin: 0;
	font-size: 13px; line-height: 1.55; color: #4b5563;
}

.bha-calendar-form__error-inline,
.bha-tax-form__error-inline {
	margin: 8px 0 12px 0;
	padding: 10px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 8px;
	font-size: 13px;
}

.bha-calendar-form__field,
.bha-tax-form__field { margin-top: 18px; }
.bha-calendar-form__label,
.bha-tax-form__label {
	display: block;
	font-size: 13px; font-weight: 600; color: #374151;
	margin-bottom: 6px;
}
.bha-calendar-form__hint,
.bha-tax-form__hint {
	margin-top: 4px;
	font-size: 12px; color: #6b7280; line-height: 1.5;
}

/* Import URL repeater rows */
.bha-calendar-form__import-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* Per-row outer = vertical stack (input row + status pill). Phase C.2. */
.bha-calendar-form__import-row {
	display: flex; flex-direction: column; gap: 6px;
}
.bha-calendar-form__import-row-inputs {
	display: flex; align-items: center; gap: 6px;
}
.bha-calendar-form__export-row {
	display: flex; align-items: center; gap: 6px;
}

/* "Test" button — sits between URL input and the row's × remove button. */
.bha-calendar-form__test-btn {
	padding: 7px 12px;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 12px; font-weight: 600; color: #374151;
	cursor: pointer; transition: background 0.15s, border-color 0.15s;
	white-space: nowrap;
}
.bha-calendar-form__test-btn:hover { background: #e5e7eb; }

/* Validation status pill — appears under the input row when the host
   engages with the field. Four state variants drive color + iconography:
   pending (grey, "needs check"), validating (blue, spinner), valid
   (green, ✓), invalid (red, ✗). */
.bha-calendar-form__sync-pill {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 12px; line-height: 1.4;
	border: 1px solid transparent;
}
.bha-calendar-form__sync-pill--pending {
	background: #f3f4f6; color: #4b5563; border-color: #e5e7eb;
}
.bha-calendar-form__sync-pill--validating {
	background: #f0f7fa; color: #0a4a5e; border-color: #a8d6e6;
}
.bha-calendar-form__sync-pill--valid {
	background: #ecfdf5; color: #065f46; border-color: #a7f3d0;
}
.bha-calendar-form__sync-pill--invalid {
	background: #fef2f2; color: #991b1b; border-color: #fecaca;
}
.bha-calendar-form__sync-pill-msg { flex: 1 1 auto; }
.bha-calendar-form__sync-pill-actions {
	display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bha-calendar-form__sync-help-link {
	color: #0d7fa8; text-decoration: underline; font-weight: 600;
}
.bha-calendar-form__sync-help-link:hover { color: #0a4a5e; }
.bha-calendar-form__sync-ask-link {
	background: transparent;
	border: 1px solid #b91c1c;
	color: #b91c1c;
	padding: 3px 9px;
	border-radius: 6px;
	font-size: 11px; font-weight: 600;
	cursor: pointer; font-family: inherit;
	transition: background 0.15s, color 0.15s;
}
.bha-calendar-form__sync-ask-link:hover { background: #b91c1c; color: #fff; }
@media (max-width: 768px) {
	/* On mobile the chat sits behind the sheet, so tapping "Ask the assistant"
	   fires the message invisibly. Hide it — "Find help on <platform>" remains
	   as an external way out, and tearing down the sheet would discard
	   in-progress form state (especially mid listing-creation). */
	.bha-calendar-form__sync-ask-link { display: none; }
}
.bha-calendar-form__url-input {
	flex: 1; min-width: 0;
	padding: 9px 10px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit; font-size: 13px; line-height: 1.4;
	color: #111827; background: #fff; outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.bha-calendar-form__url-input:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-calendar-form__url-input--readonly {
	background: #f9fafb; color: #4b5563; cursor: text;
}
.bha-calendar-form__remove-row {
	width: 28px; height: 28px;
	background: #fff; color: #b91c1c;
	border: 1px solid #e5e7eb; border-radius: 6px;
	font-size: 18px; line-height: 1; cursor: pointer;
}
.bha-calendar-form__remove-row:hover { background: #fef2f2; border-color: #fecaca; }
.bha-calendar-form__add-row {
	margin-top: 6px;
	padding: 6px 10px;
	background: transparent;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	color: #1097c5;
	font-size: 12px; font-weight: 600;
	cursor: pointer;
}
.bha-calendar-form__add-row:hover { background: #f3f4f6; border-color: #94a3b8; }

.bha-calendar-form__copy-btn,
.bha-tax-form__copy-btn {
	padding: 7px 12px;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 12px; font-weight: 600; color: #374151;
	cursor: pointer; transition: background 0.15s;
}
.bha-calendar-form__copy-btn:hover { background: #e5e7eb; }

.bha-calendar-form__checkbox,
.bha-tax-form__checkbox {
	display: flex; align-items: flex-start; gap: 8px;
	cursor: pointer;
}
.bha-calendar-form__checkbox input,
.bha-tax-form__checkbox input { margin-top: 2px; }
.bha-calendar-form__checkbox-label,
.bha-tax-form__checkbox-label {
	font-size: 13px; color: #111827;
}

.bha-calendar-form__footer,
.bha-tax-form__footer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 22px; padding-top: 14px; border-top: 1px solid #e5e7eb;
	/* Save button right-aligned for visual consistency with every other
	   group form (basics/location/story/facts/rooms/rules/booking). The
	   tax form already has a "* Required" hint with flex:1 that pushes
	   save right; the calendar footer has no hint, so explicitly align
	   the lone save button to the end. */
	justify-content: flex-end;
}

/* -------------------------------------------------------------------- */
/* Phase 4.10 — Tax & compliance group form                             */
/* -------------------------------------------------------------------- */

.bha-tax-form__required {
	color: #b45309;
	font-weight: 700;
}
.bha-tax-form__required-hint {
	flex: 1; min-width: 140px;
	font-size: 12px; color: #6b7280;
}
.bha-tax-form__text-input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit; font-size: 14px; line-height: 1.4;
	color: #111827; background: #fff; outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.bha-tax-form__text-input:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-tax-form__field--error {
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	padding: 10px 12px;
	border-radius: 6px;
	margin-left: -14px;
	margin-right: -12px;
}

/* -------------------------------------------------------------------- */
/* Phase 4.11 — Preview & publish tile                                  */
/* -------------------------------------------------------------------- */

.bha-preview {
	margin: 12px 0;
	padding: 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	/* Cap the tile so the hero image doesn't get stretched past its
	   native resolution (gets pixelated) on wide chat panels. 800px
	   keeps the listing card at typical guest-listing-page width. */
	max-width: 800px;
}

.bha-preview__loading,
.bha-preview__error { color: #6b7280; font-size: 13px; padding: 12px 0; }
.bha-preview__error { color: #b91c1c; }

.bha-preview__intro { margin-bottom: 16px; }
.bha-preview__title-h {
	margin: 0 0 6px 0;
	font-size: 18px; font-weight: 700; color: #111827;
}
.bha-preview__lede {
	margin: 0;
	font-size: 13px; line-height: 1.55; color: #4b5563;
}

/* Inline error block — appears when publish gate rejects */
.bha-preview__error-inline {
	margin: 0 0 14px 0;
	padding: 12px 14px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.55;
}
.bha-preview__error-heading {
	font-weight: 700;
	margin-bottom: 6px;
}
.bha-preview__error-list {
	margin: 0;
	padding-left: 18px;
}
.bha-preview__error-list li { margin-bottom: 4px; }
.bha-preview__error-jump {
	margin-left: 6px;
	padding: 2px 8px;
	background: #fff;
	border: 1px solid #fecaca;
	border-radius: 4px;
	color: #b91c1c;
	font-size: 12px; font-weight: 600;
	cursor: pointer;
}
.bha-preview__error-jump:hover { background: #fef2f2; }

/* Bar pill ring when an error is associated with that step */
.bha-signup-step--has-publish-error .bha-signup-step__node {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.45) !important;
}

/* The card itself — visual mirror of guest-side bga-detail */
.bha-preview__card {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

/* Gallery */
.bha-preview__gallery {
	position: relative;
	background: #f3f4f6;
}
.bha-preview__hero {
	width: 100%;
	/* Capped height so high-res photos don't dominate the chat column.
	   Aspect-ratio keeps the framing consistent on smaller viewports. */
	max-height: 360px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.bha-preview__hero img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.bha-preview__thumbs {
	display: flex; gap: 6px;
	padding: 8px;
	background: #fff;
	border-top: 1px solid #f3f4f6;
}
.bha-preview__thumb {
	width: 64px; height: 48px;
	object-fit: cover;
	border-radius: 4px;
}
.bha-preview__more-photos {
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 48px;
	background: #f3f4f6;
	color: #6b7280;
	border-radius: 4px;
	font-size: 11px; font-weight: 600;
}
.bha-preview__no-photos {
	padding: 32px 16px;
	text-align: center;
	background: #f9fafb;
	color: #6b7280;
	font-size: 13px;
}

/* Edit-link buttons (corner + inline + section-header variants) */
.bha-preview__edit-link {
	padding: 4px 10px;
	background: transparent;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	color: #1097c5;
	font-size: 12px; font-weight: 600; font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.bha-preview__edit-link:hover {
	background: #f0f7fa;
	border-color: #7fc5dc;
}
.bha-preview__edit-link--corner {
	position: absolute; top: 8px; right: 8px;
	background: rgba(255,255,255,0.95);
}

/* Title + location — `padding-right` reserves a 160px column for the
   Edit button so a long title can't run into it. The button itself
   stays absolutely positioned in that reserved column. */
.bha-preview__title-section {
	position: relative;
	padding: 16px 160px 8px 16px;
}
.bha-preview__listing-title {
	margin: 0;
	font-size: 22px; font-weight: 700; color: #111827; line-height: 1.3;
}
.bha-preview__listing-location {
	margin-top: 4px;
	font-size: 14px; color: #4b5563;
}
.bha-preview__listing-category {
	margin-top: 4px;
	font-size: 12px; color: #6b7280; text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bha-preview__title-section .bha-preview__edit-link {
	position: absolute; top: 16px; right: 16px;
}

/* Sections */
.bha-preview__section {
	padding: 14px 16px;
	border-top: 1px solid #f3f4f6;
}
.bha-preview__section-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 10px;
}
.bha-preview__section-title {
	font-size: 14px; font-weight: 700; color: #111827;
}
.bha-preview__desc {
	font-size: 14px; line-height: 1.6; color: #374151;
}

/* Tags */
.bha-preview__tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.bha-preview__tag {
	padding: 3px 10px;
	background: #f0f7fa;
	color: #0d7fa8;
	border-radius: 12px;
	font-size: 12px; font-weight: 500;
}

/* At-a-glance attribute grid — definition-list style. Each cell is a
   tight label-then-value pair with a fixed label gutter so column 1
   and column 2 align even when values are very different lengths
   ("6" vs "Boat/Trailer, Carport"). Locked to 2 columns; on narrow
   viewports the cells wrap into one (handled below by the media
   query). max-width keeps it readable on very wide chat panels. */
.bha-preview__attr-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 32px;
	max-width: 640px;
}
@media (max-width: 540px) {
	.bha-preview__attr-grid {
		grid-template-columns: 1fr;
	}
}
.bha-preview__attr {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
	padding: 5px 0;
	border-bottom: 1px solid #f9fafb;
}
.bha-preview__attr-label {
	color: #6b7280;
	flex: 0 0 96px;
	font-size: 12px;
}
.bha-preview__attr-value {
	color: #111827;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Media wrapper — holds gallery + video panel + tabs (Ship 2) */
.bha-preview__media {
	position: relative;
}
.bha-preview__media-tabs {
	display: flex; gap: 0;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 8px;
}
.bha-preview__media-tab {
	background: none; border: none;
	padding: 8px 16px;
	font: inherit; font-size: 13px; font-weight: 500;
	color: #64748b;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.bha-preview__media-tab:hover { color: #1e293b; }
.bha-preview__media-tab--active {
	color: #1097c5;
	border-bottom-color: #1097c5;
}
.bha-preview__video-panel {
	width: 100%;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	max-height: 360px;
	display: flex; align-items: center; justify-content: center;
}
.bha-preview__video {
	width: 100%; max-height: 360px;
	display: block;
}

/* Lightbox — fullscreen photo viewer (Ship 2) */
.bha-lightbox {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 100001;
	display: flex; align-items: center; justify-content: center;
	cursor: zoom-out;
}
.bha-lightbox__img {
	max-width: 95vw; max-height: 90vh;
	object-fit: contain;
	cursor: default;
	user-select: none;
}
.bha-lightbox__close {
	position: absolute; top: 16px; right: 16px;
	width: 44px; height: 44px;
	border-radius: 50%; border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 28px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s;
}
.bha-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.bha-lightbox__counter {
	position: absolute; bottom: 24px; left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	background: rgba(0, 0, 0, 0.5);
	padding: 6px 14px;
	border-radius: 20px;
	user-select: none;
}
.bha-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 56px; height: 56px;
	border-radius: 50%; border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 32px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s;
}
.bha-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.bha-lightbox__nav--prev { left: 24px; }
.bha-lightbox__nav--next { right: 24px; }

/* Phase 9.7 — optional metadata strip in the lightbox: subject pill +
   caption. Sits above the page counter; only rendered when the caller
   passes a `meta` array with non-empty caption/subject entries. */
.bha-lightbox__meta {
	position: absolute;
	bottom: 64px;
	left: 50%;
	transform: translateX(-50%);
	max-width: min(640px, 90vw);
	text-align: center;
	color: #fff;
	pointer-events: none;
}
.bha-lightbox__meta-subject {
	display: inline-block;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 6px;
}
.bha-lightbox__meta-caption {
	background: rgba(0, 0, 0, 0.55);
	font-size: 14px;
	line-height: 1.4;
	padding: 8px 14px;
	border-radius: 8px;
}

/* Location section map embed (Ship 3) */
.bha-preview__map {
	display: block;
	width: 100%;
	max-height: 280px;
	object-fit: cover;
	border-radius: 8px;
	margin-top: 8px;
	background: #f1f5f9;
}
.bha-preview__nearby-label {
	font-size: 13px; font-weight: 600; color: #374151;
	margin-top: 14px; margin-bottom: 4px;
}

/* Rooms blocks — native <details> accordion (closed by default) */
.bha-preview__room {
	margin-top: 12px;
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 8px;
}
.bha-preview__room:last-child { border-bottom: none; }
.bha-preview__room-label {
	font-size: 13px; font-weight: 600; color: #374151;
	margin-bottom: 4px;
	cursor: pointer;
	list-style: none;
	display: flex; align-items: center; gap: 6px;
	user-select: none;
}
.bha-preview__room-label::-webkit-details-marker { display: none; }
.bha-preview__room-label::before {
	content: '▸';
	display: inline-block;
	font-size: 11px; color: #94a3b8;
	transition: transform 0.15s ease;
}
.bha-preview__room[open] .bha-preview__room-label::before {
	transform: rotate(90deg);
}
.bha-preview__room-value {
	font-size: 13px; line-height: 1.55; color: #4b5563;
	margin-top: 4px;
	padding-left: 17px;
}

/* Read-more toggle — used by description + host bio */
.bha-preview__readmore {
	background: none; border: none; padding: 0;
	color: #1097c5; font: inherit; font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}
.bha-preview__readmore:hover { color: #0d7fa8; }

/* Host bio section */
.bha-preview__host-card {
	display: flex; align-items: flex-start; gap: 14px;
	margin-top: 8px;
}
.bha-preview__host-photo {
	flex: 0 0 auto;
	width: 64px; height: 64px;
	border-radius: 50%;
	object-fit: cover;
	background: #f1f5f9;
}
.bha-preview__host-info {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.bha-preview__host-meta {
	font-size: 12px; color: #64748b;
}
.bha-preview__host-bio {
	font-size: 13px; line-height: 1.55; color: #4b5563;
	margin-top: 2px;
}

/* Pricing */
.bha-preview__price-row {
	font-size: 16px; color: #111827;
	margin-bottom: 8px;
}
.bha-preview__extras,
.bha-preview__discounts { margin-top: 8px; }
.bha-preview__extra,
.bha-preview__discount {
	display: flex; justify-content: space-between;
	font-size: 13px; color: #4b5563;
	padding: 4px 0;
	border-top: 1px dashed #f3f4f6;
}
.bha-preview__discount { color: #059669; font-weight: 500; }

.bha-preview__cp-name {
	font-weight: 600; color: #111827;
	margin-bottom: 4px;
}

/* Booking section (Item 36 / Phase 8.1) — headline + constraint sub-line */
.bha-preview__bc-headline {
	font-size: 14px; color: #1e293b; line-height: 1.5;
}
.bha-preview__bc-constraints {
	font-size: 13px; color: #64748b; line-height: 1.5;
	margin-top: 4px;
}

/* Packages section — sits between the listing card and the publish footer */
.bha-preview__packages {
	margin-top: 18px; padding-top: 14px;
	border-top: 1px solid #e5e7eb;
}
.bha-preview__packages-empty {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 14px; line-height: 1.5;
}
.bha-preview__packages-note {
	color: #1e293b;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 14px;
}
.bha-preview__packages-line { margin: 0 0 4px; font-size: 14px; }
.bha-preview__packages-balance { margin: 0; font-size: 13px; color: #475569; }
.bha-preview__packages-intro { margin: 0 0 8px; font-size: 14px; color: #475569; }
.bha-preview__packages-list {
	display: flex; flex-direction: column; gap: 8px;
}
.bha-preview__packages-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.bha-preview__packages-item:hover { background: #f1f5f9; }
.bha-preview__packages-item:has(input:checked) {
	border-color: #1097c5;
	background: #f0f7fa;
}
.bha-preview__packages-radio {
	width: 18px; height: 18px;
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
	accent-color: #1097c5;
}
.bha-preview__packages-meta {
	flex: 1 1 auto;
	display: flex; flex-direction: column; gap: 2px;
}
.bha-preview__packages-name {
	font-size: 14px; font-weight: 600; color: #1e293b;
}
.bha-preview__packages-tag {
	display: inline-block;
	padding: 2px 6px;
	background: #dbeef5;
	color: #0a4a5e;
	border-radius: 4px;
	font-size: 11px; font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
	margin-left: 2px;
}
.bha-preview__packages-slots {
	font-size: 12px; color: #64748b;
}
.bha-preview__packages-after {
	margin-top: 10px;
	padding: 8px 12px;
	background: #ecfeff;
	border: 1px solid #cffafe;
	border-radius: 6px;
	font-size: 13px; color: #155e75;
}

/* Inline buy-fresh picker (O.2 onboarding refactor) — rendered when the
   host has zero active packages at publish-time. Mounts INSIDE the
   preview tile's Packages section, replacing the cards once a package
   is purchased + entitlement polls confirm. */
.bha-preview__packages-buy-intro {
	margin: 0 0 12px; font-size: 14px; color: #475569;
}
.bha-preview__packages-loading {
	padding: 20px; text-align: center;
	color: #64748b; font-size: 13px;
}

/* Phase 7.3 — Draft-with-AI controls (per-field button + refinement input) */
.bha-draft-ai {
	margin: 6px 0 0;
	display: flex; flex-direction: column; gap: 6px;
}
.bha-draft-ai__btn {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px;
	background: #eef2ff; color: #3730a3;
	border: 1px solid #c7d2fe;
	border-radius: 14px;
	font: inherit; font-size: 12px; font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.bha-draft-ai__btn:hover:not(:disabled) {
	background: #e0e7ff; border-color: #a5b4fc;
}
.bha-draft-ai__btn:disabled,
.bha-draft-ai__btn--capped {
	background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0;
	cursor: not-allowed;
}
.bha-draft-ai__sparkle { font-size: 13px; }
.bha-draft-ai__input-wrap {
	display: flex; gap: 6px;
}
.bha-draft-ai__input {
	flex: 1 1 auto;
	min-width: 0; /* allow shrink below intrinsic placeholder width on narrow viewports */
	padding: 6px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font: inherit; font-size: 13px;
	background: #fff;
}
.bha-draft-ai__input:focus { outline: none; border-color: #6366f1; }
.bha-draft-ai__go {
	flex-shrink: 0;
	white-space: nowrap;
	padding: 6px 12px;
	background: #4f46e5; color: #fff;
	border: none; border-radius: 6px;
	font: inherit; font-size: 12px; font-weight: 600;
	cursor: pointer;
}
.bha-draft-ai__go:hover:not(:disabled) { background: #4338ca; }
.bha-draft-ai__go:disabled { background: #cbd5e1; cursor: not-allowed; }
.bha-draft-ai__msg {
	font-size: 12px; color: #64748b;
}
.bha-draft-ai__msg--success { color: #059669; }
.bha-draft-ai__msg--pending { color: #4f46e5; }
.bha-draft-ai__msg--capped  { color: #b45309; }
.bha-draft-ai__msg--error   { color: #dc2626; }
.bha-draft-ai__textarea--loading {
	background: linear-gradient(90deg, #f8fafc 0%, #eef2ff 50%, #f8fafc 100%);
	background-size: 200% 100%;
	animation: bha-draft-ai-shimmer 1.4s ease-in-out infinite;
}
@keyframes bha-draft-ai-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Footer + publish CTA */
.bha-preview__footer {
	display: flex; flex-direction: row; align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 18px; padding-top: 14px;
	border-top: 1px solid #e5e7eb;
}
.bha-preview__terms-row {
	display: flex; align-items: center; gap: 10px;
	flex: 1 1 auto;
}
.bha-preview__terms-checkbox {
	flex: 0 0 auto; cursor: pointer;
	width: 16px; height: 16px;
	margin: 0;
}
.bha-preview__terms-label {
	color: #475569; font-size: 14px; line-height: 1.5; cursor: pointer;
}
.bha-preview__terms-link {
	background: none; border: none; padding: 0;
	color: #1097c5; font: inherit;
	text-decoration: underline; cursor: pointer;
}
.bha-preview__terms-link:hover { color: #0d7fa8; }
.bha-preview__publish {
	flex: 0 0 auto;
	padding: 11px 24px;
	background: #1097c5;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 15px; font-weight: 700; font-family: inherit;
	cursor: pointer;
	transition: background 0.15s;
}
.bha-preview__publish:hover:not(:disabled) { background: #0d7fa8; }
.bha-preview__publish:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Phase 9.5 edit-existing — Done-editing footer. Skips the terms row
   entirely (already accepted at original publish). Single CTA (teal
   to match the Edit button on tiles, signalling "exit management"). */
.bha-preview__footer--edit-mode {
	justify-content: flex-end;
}
.bha-preview__publish--done-editing {
	background: #0d9488;
}
.bha-preview__publish--done-editing:hover:not(:disabled) {
	background: #0f766e;
}

/* Iframe modal — used by terms-and-conditions link and future same-
 * origin embedded-page links. Backdrop click + ✕ + ESC dismiss. */
.bha-modal-iframe-overlay {
	position: fixed; inset: 0;
	background: rgba(15, 23, 42, 0.6);
	z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; box-sizing: border-box;
	animation: bha-modal-fade-in 0.15s ease-out;
}
.bha-modal-iframe {
	position: relative;
	background: #fff;
	width: 100%; max-width: 900px;
	height: 100%; max-height: 90vh;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	display: flex; flex-direction: column;
}
.bha-modal-iframe__close {
	position: absolute; top: 12px; right: 12px;
	width: 36px; height: 36px;
	border-radius: 50%; border: none;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	color: #1e293b;
	font-size: 22px; line-height: 1;
	cursor: pointer; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s, transform 0.15s;
}
.bha-modal-iframe__close:hover { background: #fff; transform: scale(1.05); }
.bha-modal-iframe__frame {
	flex: 1 1 auto; width: 100%;
	border: none; display: block; background: #fff;
}
@keyframes bha-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
	.bha-modal-iframe-overlay { padding: 0; }
	.bha-modal-iframe { max-width: 100%; max-height: 100%; border-radius: 0; }
}

/* Mobile: stack the field's input + ✓ Accept button vertically so the
   textarea/input takes full width instead of sharing the row. Resets the
   desktop `order: -1` so DOM order applies (input first, Accept below).
   `align-items: stretch` overrides the desktop's `flex-start` so the
   textarea fills the row width; `align-self: flex-start` on the Accept
   button keeps it as a discrete pill below.
   The textareas need `flex: none` because their desktop rule uses `flex: 1`
   (which expands to flex-basis: 0%) — in a column-flex container that
   overrides our autoGrow's inline `height` setting, leaving the textarea
   stuck at min-height. With flex: none, inline height takes effect cleanly.
   Applies to every form module using the `__input-row` flex pattern. */
@media (max-width: 768px) {
	.bha-basics-form__input-row,
	.bha-location-form__input-row,
	.bha-story-form__input-row,
	.bha-rooms-form__input-row,
	.bha-rules-form__input-row,
	.bha-booking-form__input-row {
		flex-direction: column;
		align-items: stretch;
	}
	.bha-basics-form__input-row .bha-field-accept,
	.bha-location-form__input-row .bha-field-accept,
	.bha-story-form__input-row .bha-field-accept,
	.bha-rooms-form__input-row .bha-field-accept,
	.bha-rules-form__input-row .bha-field-accept,
	.bha-booking-form__input-row .bha-field-accept {
		order: 0;
		align-self: flex-start;
	}
	.bha-location-form__textarea,
	.bha-story-form__textarea,
	.bha-rooms-form__textarea,
	.bha-rules-form__textarea {
		flex: none;
	}
}

/* AI-drafted textareas are managed by autoGrowTextarea (form-primitives.js)
   — height always tracks scrollHeight, so neither the scrollbar nor the
   browser's resize drag-handle has any function. Disable both for a
   cleaner look (applies on all viewports). */
.bha-location-form__textarea,
.bha-story-form__textarea,
.bha-rooms-form__textarea,
.bha-rules-form__textarea,
.bha-profile-form__textarea {
	resize: none;
	overflow: hidden;
}