/*
 * FilmBaseFinder palette + hero-search styling on top of Best Classifieds.
 * Overrides the parent's CSS custom properties, then styles the new
 * What/Where/When search markup added in template-parts/hero.php.
 */

/* Approximate USD conversion shown next to a THB price (see
   bcfb_append_usd_price_estimate() in functions.php) - deliberately muted
   and smaller than the real price so it never gets mistaken for it. */
.bcfb-price-usd-approx {
	display: inline-block;
	margin-left: 6px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--bc-text-muted);
	white-space: nowrap;
}

:root {
	--bc-primary: #00897B;       /* teal-deep, replaces parent emerald */
	--bc-primary-dark: #00695C;
	--bc-accent: #F94D6A;        /* coral, replaces parent gold */
	--bc-accent-dark: #D63C57;
	--bc-bg: #FFFFFF;
	--bc-bg-alt: #FAFAFA;
	--bc-surface: #FFFFFF;
	--bc-text: #222222;
	--bc-text-muted: #6B6B6B;
	--bc-text-subtle: #9A9A9A;
	/* Dividers and card edges, tinted with the same teal as the field
	   borders. Grey lines on a white page read as smudges rather than
	   structure - you see them without noticing them, which defeats the
	   point of drawing them.

	   Much lighter than --bcfb-field-border on purpose. A field border is
	   an instruction ("type here") and earns full strength; a divider is
	   punctuation. If every line were the same weight, none of them would
	   mean anything. */
	--bc-border: #A8D5D0;
	--bc-border-soft: #D8ECEA;

	/* The pale green behind anything you can press: header pills, the HOST
	   code on a listing page. One named value rather than the same hex typed
	   in six places, which is how two buttons side by side end up very
	   slightly different greens. Kept far lighter than --bc-primary so black
	   text on it stays comfortably readable. */
	--bcfb-tint: #EAF7F5;
	--bc-footer-bg: #2C2C2C;     /* charcoal */
	--bc-footer-text: #999999;

	/* ONE typeface for the whole site (2026-08). It was three - Bebas Neue for
	   headings, Inter for body, IBM Plex Mono for the footer and eyebrows -
	   and the three sat badly together: Bebas is an extreme condensed display
	   face, mono is fixed-width, so the same sentence read cramped in one
	   place and airy in another. Two things settled it:

	   - Bebas has NO Thai glyphs. This site takes bookings in Thailand; the
	     first Thai heading would silently fall back to Georgia and look
	     nothing like the English one beside it.
	   - Bebas ships one weight (400) and uppercase only, so hierarchy had to
	     be faked with size alone.

	   Both variables now point at the same stack on purpose. --bc-font-heading
	   is kept rather than deleted because the parent theme sets h1-h6 and a
	   dozen other rules from it; pointing it at Inter changes everything in
	   one line. Hierarchy comes from weight and letter-spacing instead - see
	   the h1-h6 rule below. */
	--bc-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--bc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--bcfb-teal: #00BFA5;

	/* Every field border on the site. Grey on white is technically a border
	   and practically invisible - people could not tell where a field was
	   until they clicked one. This is the same teal as --bc-primary, kept as
	   its own token so field borders can be retuned in one place without
	   touching the buttons and headings that also use the brand colour. */
	--bcfb-field-border: #00897B;
	--bcfb-field-border-hover: #00695C;
	--bcfb-field-ring: rgba( 0, 137, 123, 0.15 );

	/* Carousel arrow tiles (.bcfb-promo-arrow). Own tokens rather than reusing
	   --bc-border-soft directly: that one means "a divider so faint it is
	   almost not there", and a control you are meant to click wants to be
	   retunable without dragging every hairline on the site with it.

	   The fill is WHITE, not the soft teal it started as. The banners these
	   arrows sit in are painted linear-gradient(135deg, #e6f8f5, #fdeceb) -
	   the pale end of that is #e6f8f5, and the first attempt at a tile was
	   #E4F4F1, i.e. the same colour to the eye. The left arrow sits exactly
	   where the panel is greenest, so it vanished. No pale tint can win here,
	   because the panel is itself a pale tint at one end and a pale pink at
	   the other; white is the only fill that reads against both. The green
	   moved to hover, where it is a response rather than camouflage. */
	--bcfb-arrow-bg: #FFFFFF;
	--bcfb-arrow-bg-hover: #E4F4F1;
	--bcfb-arrow-border: #00897B;

	/* Card image shape. Must match bcfb_get_target_image_ratio() in
	   functions.php, which is what uploads are cropped/padded to - if these
	   two ever disagree, every thumbnail on the site is silently re-cropped
	   by the browser. */
	--bcfb-card-ratio: 16 / 10;

	/* Space between cards in a row. One value, used by the homepage rows and
	   the search results alike. */
	--bcfb-row-gap: 14px;
	--bcfb-row-gap-wide: 20px;

	/* Corner scale. Five steps, chosen so the corner tells you how big the
	   thing is: the larger the box, the softer its corner, which is how a
	   radius behaves on a real object.

	     xs  4px  - swatches, scrollbar thumbs, status pips
	     sm  6px  - small chips and inline tags
	     md  8px  - buttons, inputs, anything you click or type into
	     lg 12px  - cards, thumbnails, medium boxes
	     xl 16px  - panels and large containers

	   Values off this scale (9, 10, 14, 20, 24, 26, 30px) were each a
	   one-off decision nobody revisited, and together they were why two
	   buttons side by side could have visibly different corners.

	   --bcfb-r-pill is for the handful of labels that sit ON a photograph,
	   where a rectangle reads as a UI panel rather than a tag. Circles keep
	   50%: a circle is not a rounded rectangle. */
	--bcfb-r-xs: 4px;
	--bcfb-r-sm: 6px;
	--bcfb-r-md: 8px;
	--bcfb-r-lg: 12px;
	--bcfb-r-xl: 16px;
	--bcfb-r-pill: 999px;
	--bcfb-charcoal: #2C2C2C;
	--bcfb-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	/* New 2026-08: no red/danger token existed anywhere in the theme before
	   this. Added here rather than writing a raw hex into the footer
	   disclaimer rule below, so any future "this is serious, make it red"
	   request has one value to reach for instead of a second invented red. */
	--bcfb-danger: #D92D20;
	--bcfb-danger-bg: #FDECEA;
}

/* Headings carried their weight from Bebas Neue, which only has one (400).
   Now that they are Inter, the parent theme's `font-weight: 400` on h1-h6
   (best-classifieds/assets/css/main.css) leaves them the same weight as the
   paragraph underneath - a heading that is only "bigger" is not a heading.
   Weight, not a second typeface, is what separates them now. */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Site title styled like the FilmBaseFinder wordmark when no custom logo is set. */
.bc-site-title a {
	font-family: var(--bc-font-heading);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---------- Hero ---------- */

.bc-hero.bcfb-hero {
	padding: 24px 16px 20px !important;
	text-align: center;
	background: none !important;
	border-bottom: none !important;
}
.bcfb-hero-inner {
	max-width: 1200px;
}
.bcfb-hero .bc-eyebrow {
	/* Was IBM Plex Mono. The eyebrow's character comes from being small,
	   uppercase and widely tracked - the letter-spacing below - not from
	   being monospaced, so it survives the move to one typeface. */
	font-family: var(--bc-font-body);
	font-size: 10px;
	color: var(--bc-primary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.bcfb-hero-title {
	font-size: 24px;
	/* Same teal as the "BASE" part of the FILMBASEFINDER logo. */
	color: var(--bc-primary);
	margin-top: 6px;
	line-height: 1.15;
}

/* Search bar: What / Where / When - stacked on mobile */
.bcfb-search-bar {
	max-width: 640px;
	width: 100%;
	margin: 20px auto 0;
	background: #fff;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-lg);
	box-shadow: var(--bcfb-shadow);
	position: relative;
	box-sizing: border-box;
}
.bcfb-search-field {
	padding: 16px 22px;
	text-align: center;
	cursor: pointer;
	position: relative;
	border-bottom: 1px solid var(--bc-border);
	transition: background-color 0.15s ease, border-radius 0.15s ease;
}
.bcfb-search-field:last-of-type { border-bottom: none; }
.bcfb-search-field .bcfb-field-label { font-size: 13px; }
.bcfb-search-field .bcfb-field-value { font-size: 14px; }
.bcfb-search-field.bcfb-active { background: #fafafa; }
/* "When" field hidden from view (see template-parts/hero.php note) but left
   in the DOM so filmbase-hero-search.js's event listeners don't error. */
.bcfb-field-hidden { display: none !important; }
/* Airbnb-style hover: whole pill segment goes light gray with rounded
   corners, not just a plain rectangle - matches the rounded shape of the
   search bar itself. Only the open/active field's own background wins
   over this (see the ".bcfb-active" rule above and its higher specificity
   below), so hovering a different field while one is already open doesn't
   fight with it. */
.bcfb-search-field:hover { background: #f2f2f2; border-radius: var(--bcfb-r-md); }
.bcfb-search-field.bcfb-active:hover { background: #fafafa; }
.bcfb-field-label { font-size: 12px; font-weight: 700; color: var(--bc-text); }
.bcfb-field-value {
	font-size: 13px;
	color: var(--bc-text-muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Once a real choice is made (not just the placeholder hint text), show it
   in the same dark color as the field label so a filled-in field is
   obviously different from an empty one at a glance. */
.bcfb-field-value.bcfb-field-value-filled {
	color: var(--bc-text);
	font-weight: 600;
}

/* The parent theme's buttons, brought onto our radius scale.
   .bc-btn is styled in the parent's main.css with border-radius:
   var(--bc-radius-sm), which is 3px on the PARENT's own scale - a different
   set of variables that happens to use similar names to ours. So "Add to
   booking" came out with 3px corners next to our 8px ones, and the mismatch
   was invisible in the CSS because both lines read "radius-sm".
   Only the radius is taken over; everything else about .bc-btn stays the
   parent's. */
.bc-btn,
.bc-btn-primary,
.bc-btn-secondary {
	border-radius: var(--bcfb-r-md);
}

/* Teal, matching every other submit button on the site (see the comment on
   .comment-form .submit). Coral now means one thing only: an unread count. */
.bcfb-search-submit {
	width: 100%;
	background: var(--bc-primary);
	color: #fff;
	border: none;
	border-radius: 0 0 var(--bcfb-r-lg) var(--bcfb-r-lg);
	padding: 14px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.bcfb-search-submit:hover { background: var(--bc-primary-dark); }

.bcfb-dropdown-panel {
	display: none;
	position: relative;
	background: #fbfbfb;
	border-top: 1px solid var(--bc-border);
	padding: 10px 4px;
	text-align: left;
}
.bcfb-dropdown-panel.bcfb-open { display: block; }
/* vh instead of a fixed px: scales with the visitor's own screen instead
   of a number picked for one laptop size - a fixed height tall enough to
   avoid scrolling on the largest Space Type group (up to ~23 rows once a
   sub-type is expanded too) would overflow a small screen instead. 55,
   not 60 - tuned on a 16:10 monitor, backed off slightly so a shorter
   16:9 screen at the same width doesn't get a taller-looking panel. */
.bcfb-dropdown-panel.bcfb-wide { max-height: 55vh; overflow-y: auto; }
.bcfb-dropdown-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 10px;
	border-radius: var(--bcfb-r-md);
	font-size: 14px;
	color: var(--bc-text);
	cursor: pointer;
}
.bcfb-dropdown-option:hover { background: #f2f2f2; }
.bcfb-dropdown-option .bcfb-ic { color: var(--bc-primary); font-size: 14px; width: 16px; display: inline-block; text-align: center; margin-right: 4px; }
.bcfb-dropdown-option.bcfb-manual-entry { color: var(--bc-primary); font-weight: 600; }
.bcfb-dropdown-option.bcfb-manual-entry .bcfb-ic { color: var(--bc-primary); }
.bcfb-province-pick { display: flex; align-items: center; flex: 1; padding: 4px 0; }
.bcfb-arrow-r { padding: 4px 6px; border-radius: var(--bcfb-r-sm); color: var(--bc-text-muted); }
.bcfb-arrow-r:hover { background: #e6e6e6; color: var(--bc-text); }
.bcfb-arrow-r-disabled { opacity: 0.35; cursor: not-allowed; }
.bcfb-arrow-r-disabled:hover { background: none; color: var(--bc-text-muted); }
.bcfb-dropdown-empty { padding: 14px 10px; font-size: 12.5px; color: var(--bc-text-muted); line-height: 1.5; }

.bcfb-manual-entry-form { padding: 10px 4px; }
.bcfb-manual-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	font-family: var(--bc-font-body);
	font-size: 14px;
	box-sizing: border-box;
}
.bcfb-manual-btn {
	margin-top: 10px;
	width: 100%;
	background: var(--bcfb-teal);
	color: #fff;
	border: none;
	padding: 11px;
	border-radius: var(--bcfb-r-md);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.bcfb-manual-btn:hover { background: var(--bc-primary); }

.bcfb-manual-suggestions { margin-top: 6px; }
.bcfb-manual-suggestion {
	padding: 8px 10px;
	font-size: 13px;
	color: var(--bc-text);
	border-radius: var(--bcfb-r-sm);
	cursor: pointer;
}
.bcfb-manual-suggestion:hover { background: var(--bc-bg-alt, #f5f5f5); color: var(--bc-primary); }

.bcfb-accordion-item { border-bottom: 1px solid var(--bc-border); }
.bcfb-accordion-item:last-child { border-bottom: none; }
.bcfb-accordion-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: var(--bc-text);
}
.bcfb-accordion-head .bcfb-chev { font-size: 10px; color: var(--bc-text-muted); transition: transform .15s ease; }
.bcfb-accordion-item.bcfb-open .bcfb-accordion-head .bcfb-chev { transform: rotate(180deg); }
.bcfb-accordion-body { display: none; padding: 0 0 8px 8px; }
.bcfb-accordion-item.bcfb-open .bcfb-accordion-body { display: block; }
.bcfb-accordion-body .bcfb-dropdown-option { font-size: 13.5px; color: var(--bc-text-muted); padding: 9px 10px; }
.bcfb-st-num { color: var(--bc-text-muted); font-size: 12px; margin-right: 6px; opacity: 0.75; flex-shrink: 0; }
.bcfb-accordion-head .bcfb-st-num { color: inherit; opacity: 0.55; }
.bcfb-st-label { text-align: left; }
/* Plain (non-toggle) rows - a leaf sub-type or a 3rd-level child - are just
   "number + label" with nothing that belongs on the right, so left-align
   them instead of inheriting .bcfb-dropdown-option's default
   justify-content: space-between (which was shoving the label to the far
   right, away from its number). The sub-type toggle row is deliberately
   excluded - it still needs its chevron pinned to the right. */
.bcfb-accordion-body > .bcfb-dropdown-option:not(.bcfb-sub-toggle),
.bcfb-child-option {
	justify-content: flex-start;
}
.bcfb-sub-item { border-radius: var(--bcfb-r-sm); }
.bcfb-sub-toggle { justify-content: space-between; }
.bcfb-sub-chev {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	margin: -6px -6px -6px 0; /* Enlarge the tap target without pushing the row's own layout around. */
	font-size: 13px;
	border-radius: var(--bcfb-r-sm);
	transition: transform .15s ease, background-color .1s ease;
}
.bcfb-sub-chev:hover { background: #e6e6e6; }
.bcfb-sub-item.bcfb-open .bcfb-sub-toggle .bcfb-chev { transform: rotate(180deg); }
.bcfb-sub-children { display: none; padding-left: 18px; }
.bcfb-sub-item.bcfb-open .bcfb-sub-children { display: block; }
.bcfb-child-option { font-size: 13px; color: var(--bc-text-muted); padding: 8px 10px; }

.bcfb-drill-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; font-size: 12px; font-weight: 600; color: var(--bc-primary); cursor: pointer; }
.bcfb-drill-list .bcfb-dropdown-option { justify-content: space-between; }

.bcfb-when-row { display: flex; gap: 10px; padding: 4px; }
.bcfb-when-row div { flex: 1; }
.bcfb-small { font-size: 11px; color: var(--bc-text-muted); font-weight: 600; display: block; margin-bottom: 4px; }
.bcfb-dropdown-panel input[type=date] { width: 100%; border: 1px solid var(--bc-border); border-radius: var(--bcfb-r-md); padding: 8px; font-family: var(--bc-font-body); font-size: 12px; }

/* AI search + cost tool row (legacy two-field version, kept for reference) */
.bcfb-tools-row { max-width: 520px; margin: 14px auto 0; }
.bcfb-tool-bar { background: #fff; border: 1px solid var(--bc-border); border-radius: var(--bcfb-r-lg); box-shadow: var(--bcfb-shadow); }
.bcfb-tool-field { padding: 13px 18px; text-align: left; }
.bcfb-tool-field .bcfb-top-row { display: flex; align-items: center; gap: 8px; }
.bcfb-ai-input { border: none; outline: none; background: transparent; font-family: var(--bc-font-body); font-size: 13px; color: var(--bc-text-muted); width: 100%; padding: 0; margin-top: 2px; }
.bcfb-ai-input::placeholder { color: #9a9a9a; }
.bcfb-tool-divider { height: 1px; background: var(--bc-border); }
.bcfb-tool-field.bcfb-cost { background: rgba(0, 191, 165, 0.08); cursor: pointer; border-radius: 0 0 var(--bcfb-r-lg) var(--bcfb-r-lg); }
.bcfb-tool-field.bcfb-cost .bcfb-field-label { font-weight: 600; color: var(--bc-primary); }

/* ---------- Desktop enhancement ---------- */
@media (min-width: 800px) {
	.bc-hero.bcfb-hero { padding: 36px 40px 24px !important; }
	.bcfb-hero-title { font-size: 34px; }

	/* Corner scale: 8px on buttons, 12px on the big bars (search, AI,
	   tool bar), 10px on the round submit. These were 50px/50% pills,
	   which clashed with the squarer header buttons. */
	.bcfb-search-bar { max-width: 920px; border-radius: var(--bcfb-r-lg); display: flex; align-items: center; }
	.bcfb-search-field { flex: 1; padding: 18px 30px; border-bottom: none; border-right: 1px solid var(--bc-border); }
	.bcfb-search-field:last-of-type { border-right: none; }
	.bcfb-search-field .bcfb-field-label { font-size: 13px; }
	.bcfb-search-field .bcfb-field-value { font-size: 14.5px; }
	/* The button had margin: 6px 8px 6px 0 - 8px to the right, nothing to the
	   left - so it sat hard against the "Where" field and left a visible gap
	   at the end of the bar. Equal margins on all four sides centre it in the
	   rounded end instead. */
	.bcfb-search-submit { width: 56px; height: 56px; border-radius: var(--bcfb-r-md); padding: 0; margin: 6px; flex-shrink: 0; }
	/* The last field's own right padding was adding to that gap: 30px of field
	   padding on the left of the button against 6px of margin on its right.
	   Trimmed so the space either side of the button reads as even. */
	.bcfb-search-field:last-of-type { padding-right: 12px; }
	.bcfb-btn-text { display: none; }

	.bcfb-dropdown-panel { position: absolute; top: calc(100% + 10px); left: 0; border: 1px solid var(--bc-border); border-radius: var(--bcfb-r-xl); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); min-width: 300px; background: #fff; z-index: 20; }

	.bcfb-tools-row { max-width: 760px; }
	.bcfb-tool-bar { display: flex; align-items: stretch; border-radius: var(--bcfb-r-lg); }
	.bcfb-tool-field { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 26px; }
	.bcfb-tool-divider { width: 1px; height: auto; margin: 8px 0; }
	.bcfb-tool-field.bcfb-cost { flex: 0 0 auto; border-radius: 0 var(--bcfb-r-lg) var(--bcfb-r-lg) 0; border-left: 2px solid var(--bcfb-teal); justify-content: center; }
}

/* ---------- Header (pill buttons, matches v26 mockup) ---------- */
.bcfb-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 14px;
	padding-bottom: 14px;
}
.bcfb-logo-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	box-sizing: border-box;
	border: 1.5px solid var(--bcfb-charcoal);
	border-radius: var(--bcfb-r-md);
	/* Tinted with everything else in the header. The case for keeping it
	   white was that a logo is a brand mark, not a control - but it is the
	   only white pill left in the row, and "the odd one out" reads as an
	   oversight long before it reads as a distinction. The logo is still
	   told apart by what is inside it: the mark, the weight, the teal. */
	background: var(--bcfb-tint);
	padding: 0 12px 0 6px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.bcfb-logo-pill:hover { background: var(--bcfb-charcoal); }
.bcfb-logo-pill:hover .bcfb-logo-text { color: #fff; }
.bcfb-logo-pill:hover .bcfb-logo-accent { color: var(--bcfb-teal); }
.bcfb-logo-mark {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid var(--bcfb-teal);
	position: relative;
	flex-shrink: 0;
}
.bcfb-logo-mark::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bcfb-teal);
	transform: translate(-50%, -50%);
}
.bcfb-logo-text {
	font-family: var(--bc-font-heading);
	font-size: 15px;
	color: var(--bcfb-charcoal);
	line-height: 1;
	/* The 2px downward nudge that used to be here corrected for Bebas Neue
	   sitting optically high (it has no descenders). Inter has normal
	   metrics, so the nudge is now the thing that misaligns it. */
	font-weight: 800;
	letter-spacing: 0.01em;
}
.bcfb-logo-accent { color: var(--bcfb-teal); }

.bcfb-header-right { display: flex; align-items: center; gap: 18px; }
.bcfb-cart-btn {
	position: relative;
	color: var(--bc-text);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	/* Same tint as the pills beside it, so the cart is visibly part of the
	   same row of controls rather than a loose icon floating next to them. */
	background: var(--bcfb-tint);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.bcfb-cart-btn:hover { background: var(--bcfb-charcoal); color: #fff; }
.bcfb-cart-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--bc-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Header buttons: slightly rounded corners rather than full pills - a
   20px radius on a 36px-tall button reads as an ellipse.
   Filled with --bcfb-tint rather than white. On a white page a white button
   is only a button because of its outline, so the row read as a set of empty
   boxes; the tint gives every pressable thing in the header one shared
   surface, and matches the HOST chip on a listing page. The charcoal border
   and the charcoal-fill hover are unchanged - they are what makes the header
   legible at a glance, and the tint is a background, not a new identity. */
.bcfb-btn-account, .bcfb-btn-host {
	height: 36px;
	box-sizing: border-box;
	border: 1.5px solid var(--bcfb-charcoal);
	border-radius: var(--bcfb-r-md);
	background: var(--bcfb-tint);
	white-space: nowrap;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
	display: flex;
	align-items: center;
}
.bcfb-btn-host { padding: 0 12px; font-weight: 700; font-size: 12px; color: var(--bc-text); }
.bcfb-btn-host:hover { background: var(--bcfb-charcoal); color: #fff; }
.bcfb-btn-account { gap: 6px; padding: 0 10px 0 4px; }
.bcfb-btn-account:hover { background: var(--bcfb-charcoal); }
.bcfb-btn-account:hover .bcfb-label { color: #fff; }
.bcfb-avatar { width: 26px; height: 26px; border-radius: 50%; background: #ccc; flex-shrink: 0; overflow: hidden; }
.bcfb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bcfb-label { font-size: 12px; font-weight: 700; color: var(--bc-text); }

/* Logout - same neutral pill style as "admin"/"Earn as a Host" (white bg,
   charcoal border/text, charcoal fill on hover) rather than a red pill, so
   it matches the rest of the header instead of standing out as a warning. */
.bcfb-btn-logout {
	height: 36px;
	box-sizing: border-box;
	border: 1.5px solid var(--bcfb-charcoal);
	border-radius: var(--bcfb-r-md);
	background: var(--bcfb-tint);
	color: var(--bc-text);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px 0 10px;
	flex-shrink: 0;
	white-space: nowrap;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bcfb-btn-logout svg { flex-shrink: 0; }
.bcfb-btn-logout:hover {
	background: var(--bcfb-charcoal);
	border-color: var(--bcfb-charcoal);
	color: #fff;
}

@media (min-width: 800px) {
	.bcfb-logo-pill { height: 46px; padding: 0 20px 0 8px; gap: 10px; }
	.bcfb-logo-mark { width: 30px; height: 30px; }
	.bcfb-logo-text { font-size: 19px; }
	.bcfb-header-right { gap: 18px; }
	.bcfb-btn-account, .bcfb-btn-host { height: 46px; }
	.bcfb-btn-host { padding: 0 20px; font-size: 14px; }
	.bcfb-cart-btn { width: 46px; height: 46px; }
	.bcfb-btn-account { gap: 8px; padding: 0 16px 0 6px; box-shadow: var(--bcfb-shadow); }
	.bcfb-avatar { width: 34px; height: 34px; }
	.bcfb-label { font-size: 14px; }
	.bcfb-btn-logout { height: 46px; padding: 0 18px 0 12px; font-size: 14px; gap: 8px; }
}

/* ---------- Single AI search pill (replaces the two-field tool row) ---------- */
.bcfb-ai-wrap {
	max-width: 520px;
	margin: 14px auto 0;
	position: relative;
}
/* Match the AI Search bar's width to the regular search bar above it
   (.bcfb-search-bar also jumps from 520px -> 760px at this same breakpoint -
   see the desktop enhancement block above). Placed after the base rule
   above (not inside that earlier @media block) since two rules with equal
   specificity resolve by source order - putting it earlier would have let
   the unconditional 520px rule silently win despite the media query matching. */
@media (min-width: 800px) {
	.bcfb-ai-wrap { max-width: 760px; }
}
.bcfb-ai-search-bar {
	background: #fff;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-lg);
	box-shadow: var(--bcfb-shadow);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	cursor: text;
	text-align: left;
}
.bcfb-ai-suggestions {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-lg);
	box-shadow: var(--bcfb-shadow);
	padding: 6px;
	text-align: left;
	z-index: 20;
	display: none;
}
.bcfb-ai-suggestions.bcfb-open { display: block; }
.bcfb-ai-suggestion {
	padding: 9px 12px;
	font-size: 13px;
	color: var(--bc-text);
	border-radius: var(--bcfb-r-md);
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.bcfb-ai-suggestion:hover { background: var(--bc-bg-alt, #f5f5f5); color: var(--bc-primary); }
.bcfb-ai-suggestion-group { font-size: 11px; color: var(--bc-text-muted); }
.bcfb-ai-photo-status {
	margin-top: 6px;
	padding: 8px 12px;
	font-size: 12px;
	color: var(--bc-text-muted);
	background: #f5f5f5;
	border-radius: var(--bcfb-r-md);
	text-align: center;
}
.bcfb-ai-photo-status.bcfb-error { background: #fdecea; color: #b3261e; }
.bcfb-ai-photo-status.bcfb-success { background: #e8f0fe; color: #1a56db; font-weight: 700; }
.bcfb-ai-photo-status.bcfb-loading { background: #e8f0fe; color: #1a56db; font-weight: 700; animation: bcfb-pulse 1.1s ease-in-out infinite; }

#bcfb-ai-scene-input { color: #1a56db; font-weight: 600; }
#bcfb-ai-scene-input::placeholder { color: #9a9a9a; font-weight: 400; }

@keyframes bcfb-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}
.bcfb-ai-plus { font-size: 18px; color: var(--bc-text-muted); flex-shrink: 0; }
.bcfb-ai-search-bar input {
	flex: 1;
	border: none;
	outline: none;
	font-family: var(--bc-font-body);
	font-size: 13px;
	color: var(--bc-text);
	background: transparent;
	min-width: 0;
}
.bcfb-ai-search-bar input::placeholder { color: #9a9a9a; }
.bcfb-ai-icon-btn {
	background: none;
	border: none;
	color: var(--bc-text-muted);
	padding: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	transition: background .15s ease;
}
.bcfb-ai-icon-btn:hover { background: #f0f0f0; color: var(--bc-text); }
.bcfb-ai-icon-btn.bcfb-listening { background: #fdecea; color: #d93025; animation: bcfb-pulse 1s ease-in-out infinite; }
.bcfb-ai-badge {
	display: flex;
	align-items: center;
	gap: 5px;
	background: #eef6f5;
	color: var(--bc-primary);
	font-size: 12px;
	font-weight: 700;
	padding: 7px 12px;
	/* 8px, the same corner as every other button on the site. It was 20px -
	   a full pill - which is the shape this project moved away from when the
	   header and search buttons were squared off; it survived here only
	   because nothing had prompted a second look at it. */
	border-radius: var(--bcfb-r-md);
	flex-shrink: 0;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.bcfb-ai-badge:hover { background: #e2f0ee; }
@media (min-width: 800px) {
	.bcfb-ai-search-bar { max-width: 760px; padding: 14px 20px; margin-top: 18px; }
	.bcfb-ai-search-bar input { font-size: 14px; }
}

/* ---------- Promo banner ---------- */
/* The parent theme's generic ".bc-section { padding: 80px 0; }" gives each
   stacked promo-style banner (Host favorite, Early bird) 80px of its own
   top+bottom padding - back to back that's a 160px gap between them.
   Tighten it down to a 25px gap total (12.5px each side) instead. */
.bcfb-promo-section { padding: 12.5px 0; }
/* The last one on the page (the Early bird banner) sits right above the
   footer - drop its bottom padding to (near) nothing instead of the same
   12.5px the others get, so there's no leftover gap before the footer starts. */
.bc-front-page .bcfb-promo-section:last-of-type { padding-bottom: 0; }

.bcfb-promo-banner {
	background: linear-gradient(135deg, #e6f8f5, #fdeceb);
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-xl);
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bcfb-promo-top { display: flex; flex-direction: column; gap: 14px; }
.bcfb-promo-top-minimal { flex-direction: row; justify-content: flex-end; }
.bcfb-promo-tag {
	display: inline-block;
	background: var(--bc-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--bcfb-r-lg);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 8px;
}
.bcfb-promo-text h3 { font-family: var(--bc-font-body); font-size: 19px; font-weight: 800; color: var(--bcfb-charcoal); margin: 0 0 6px; line-height: 1.25; }
.bcfb-promo-text p { font-size: 13px; color: var(--bc-text-muted); line-height: 1.5; margin: 0; }
.bcfb-promo-cta {
	background: var(--bcfb-charcoal);
	color: #fff;
	border: none;
	padding: 12px 18px;
	border-radius: var(--bcfb-r-md);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	align-self: flex-start;
	text-decoration: none;
	display: inline-block;
}
.bcfb-promo-cta:hover { background: var(--bc-primary); color: #fff; }

.bcfb-promo-carousel { position: relative; display: flex; align-items: center; gap: 6px; }
.bcfb-promo-row {
	display: flex;
	gap: 14px;
	/* That 10px of bottom padding used to be breathing room for the
	   scrollbar track - no longer needed now the scrollbar's hidden. */
	padding: 2px 2px 2px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	min-width: 0;
	/* Hide the native scrollbar - the row is still scrollable (drag/swipe/
	   wheel all still work), just via the arrow buttons instead of a visible
	   track, for a cleaner look. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
}
.bcfb-promo-row::-webkit-scrollbar { display: none; height: 0; } /* Chrome/Safari */
/* The carousel rows hold the SAME card as everywhere else on the site
   (.bcfb-card, from bcfb_render_listing_card()) - they used to hold a
   near-duplicate .bcfb-promo-card built inline in three template-parts, which
   is why "Booked" and the favourite heart appeared in search results and not
   on the homepage. All that is left here is how wide a card is inside a
   horizontally scrolling row, which is genuinely a property of the row and
   not of the card. */
.bcfb-promo-row > .bcfb-card {
	flex: 0 0 auto;
	width: calc((100% - 14px) / 2);
	scroll-snap-align: start;
}
/* Carousel arrows. One class for every one of them on the site (promo banner,
   host favourites, general locations, and the generic hscroll rows), so they
   cannot drift apart the way per-banner styling did.

   Rounded square rather than a circle: a circle read as a floating control
   borrowed from somewhere else, while the boxes it sits beside are all rounded
   rectangles. Same corner token as the cards, so if the corner scale is ever
   retuned these follow.

   White tile, teal edge - see the --bcfb-arrow-* tokens for why the fill is
   not the soft green it looks like it should be. */
.bcfb-promo-arrow {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--bcfb-r-md);
	border: 1px solid var(--bcfb-arrow-border);
	background: var(--bcfb-arrow-bg);
	/* Deep teal, not --bc-text: a dark grey chevron inside a teal-edged tile
	   reads as two unrelated decisions. Against white this is about 6:1, so
	   it stays legible at 16px. */
	color: var(--bc-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	/* A hair of lift, so the tile sits ON the tinted panel rather than in it.
	   Deliberately tiny - the arrows are furniture, and a real drop shadow
	   would make them the most three-dimensional thing on a page full of flat
	   cards. */
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 );
	transition: background-color 120ms ease, border-color 120ms ease;
}
.bcfb-promo-arrow:hover {
	background: var(--bcfb-arrow-bg-hover);
	border-color: var(--bcfb-field-border);
}
/* Keyboard users get the same ring the fields use, rather than the browser
   default outline that the rounded corners cut through. */
.bcfb-promo-arrow:focus-visible {
	outline: 2px solid var(--bcfb-field-border);
	outline-offset: 2px;
}
/* One ratio for every card image on the site.
   16:10 because that is what uploads are normalised to
   (bcfb_normalize_upload_aspect() in functions.php, --bcfb-card-ratio below):
   showing them at the same shape they are stored in means the browser crops
   nothing, so the watermark along the bottom edge survives and hosts see
   the framing they chose.
   Fixed pixel heights were what broke this - each banner had its own
   (160px, 200px, 150px) while card widths differed between banners too, so
   the same photo appeared in three different shapes on one page. */
/* The .bcfb-promo-card-image / -placeholder / -body / -price rules that used
   to live here are gone (06-AUG-2026). They dressed a second card design that
   three homepage template-parts built inline; those now render the shared
   .bcfb-card, so nothing matched these selectors any more. .bcfb-discount-pill
   below is NOT dead - the shared card prints it. */
.bcfb-discount-pill {
	background: var(--bc-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 9px;
	border-radius: var(--bcfb-r-lg);
	white-space: nowrap;
}

@media (min-width: 800px) {
	.bcfb-promo-banner { padding: 28px 32px; }
	.bcfb-promo-top { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
	.bcfb-promo-text h3 { font-size: 24px; }
	.bcfb-promo-text p { font-size: 14px; max-width: 520px; }
	.bcfb-promo-cta { padding: 14px 24px; font-size: 14px; flex-shrink: 0; }
	.bcfb-promo-row { gap: 20px; }
	.bcfb-promo-row > .bcfb-card { width: calc((100% - 5 * 20px) / 6); }
}

@media (max-width: 1200px) and (min-width: 800px) {
	.bcfb-promo-row > .bcfb-card { width: calc((100% - 3 * 20px) / 4); }
}
@media (max-width: 860px) {
	.bcfb-promo-row > .bcfb-card { width: calc((100% - 2 * 14px) / 3); }
}
@media (max-width: 600px) {
	.bcfb-promo-row > .bcfb-card { width: calc((100% - 14px) / 2); }
	.bcfb-promo-arrow { width: 32px; height: 32px; font-size: 14px; }
}

/* ---------- "Other listings from this host" row (About the host) ----------
   Holds the SAME .bcfb-card as every other bcfb-promo-row on the site (see
   bcfb_render_public_section_host() - switched from a shrunk custom card to
   this, 10-AUG-2026, so it reads as "the same site" rather than a lesser
   version). Only the label/"View all" header above the row is unique here. */
.bcfb-host-mini-row-wrap { margin-top: 18px; }
.bcfb-host-mini-row-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.bcfb-host-mini-row-label { font-size: 12px; color: var(--bc-text-muted); }

/* ---------- Listing cards (reskin to match rounded thumb style) ---------- */
.bc-listing-card { border: none; }
.bc-listing-card-image {
	/* Same ratio as the promo cards - search results and homepage rows show
	   the same listings, and a photo that changes shape between the two
	   reads as a different photo. */
	aspect-ratio: var(--bcfb-card-ratio, 16 / 10);
	border-radius: var(--bcfb-r-lg);
	overflow: hidden;
	display: block;
}

.bc-listing-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bc-listing-card-title a { font-family: var(--bc-font-body); }

/* ---------- Card row sections ("Popular studios in Bangkok", "Practical sets ready this week") ---------- */
/* The parent theme's generic ".bc-section { padding: 80px 0; }" left huge
   gaps above/below this section now that "Practical sets" is just a
   heading + links (no card rows under it any more) - tighten to 25px. */
.bcfb-card-row-section { padding: 10px 0; }
.bcfb-card-row-section .bc-section-header-split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.bcfb-card-row-section .bc-section-title {
	/* Matches ".bc-link-arrow" (the "View all" etc. links next to it) -
	   this heading is now the reused hero eyebrow line, not a real section
	   title, so it shouldn't stand out any bigger/bolder than those links. */
	font-size: 13px;
	color: var(--bc-primary);
	font-family: var(--bc-font-body);
	font-weight: 500;
	margin: 0;
}
.bcfb-card-row-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bcfb-card-row-links .bc-link-arrow { white-space: nowrap; }

/* ---------- Mimic Payment Approval (demo only - see page-mimic-payment.php,
   and remove this block with it) ---------- */

/* Dashed, not solid: everywhere else on this site a solid pill is a real
   control. This one is a prop and should not be mistaken for the payment
   screen it stands in for. */
.bcfb-btn-mimic {
	border-style: dashed !important;

	/* It sits beside the logo now, not in the working controls on the right.
	   .bcfb-header-inner is a flex row with space-between, which on its own
	   would park this in the middle of the header - "auto" on this side pushes
	   everything after it to the right instead, leaving the prop next to the
	   wordmark where it reads as separate from the real navigation. */
	margin-right: auto;
}

.bcfb-mimic-warning {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px dashed var(--bc-accent);
	border-radius: var(--bcfb-r-md);
	background: #fff5f7;
	font-size: 14px;
	color: #7a2c3c;
}

.bcfb-mimic-notice {
	margin: 0 0 18px;
	padding: 10px 14px;
	border-radius: var(--bcfb-r-md);
	background: #e8f6f4;
	font-size: 14px;
}

.bcfb-mimic-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bcfb-mimic-table th,
.bcfb-mimic-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--bc-border-soft);
	text-align: left;
	vertical-align: top;
}

.bcfb-mimic-table th {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #55636e;
}

.bcfb-mimic-muted {
	color: #7a858e;
	font-size: 13px;
}

.bcfb-mimic-actions a {
	display: inline-block;
	padding: 7px 12px;
	border-radius: var(--bcfb-r-md);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bcfb-mimic-pay {
	background: var(--bc-accent);
	color: #fff;
}

.bcfb-mimic-pay:hover { background: var(--bc-accent-dark); }

.bcfb-mimic-decline {
	margin-left: 6px;
	border: 1px solid var(--bc-border-soft);
	color: #55636e;
}

/* Shown in place of the review form when the visitor has not paid for this
   listing - see comments.php and bcfb_user_can_review_listing(). */
.bcfb-review-locked {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--bc-border-soft);
	border-radius: var(--bcfb-r-md);
	background: #f7f9fa;
	font-size: 14px;
	color: #55636e;
}

/* "How to book" opens a modal; the links beside it navigate. It now sits at
   the far left of the section header, where the heading used to be, so the
   selector is no longer scoped to .bcfb-card-row-links - it is not inside
   that group any more. The accent colour stays: position separates it from
   the group, colour says it does something different. */
/* A held day whose 2 hours ran out, in "In your list" and in the Cart.
   Shown once, greyed and italic, then gone on the next page load - see
   bcfb_sweep_held_items(). Deliberately quiet: nothing went wrong, a hold
   simply ended, and a red warning would make an ordinary expiry look like a
   failure the customer has to deal with. */
.bcfb-cart-item-expired {
	font-style: italic;
	color: var(--bc-text-subtle);
	opacity: .75;
}

.bcfb-cart-item-expired a {
	color: inherit;
}

/* "Held until 18:20 · 2 minutes left".
   This used to be styled as "a fact about the row, not a warning about it" -
   subtle grey, 12.5px, the same weight as the meta line above it. That was
   wrong (changed 06-AUG-2026): it is the only thing on the row with a clock
   running against it, and set that quietly it disappeared into the block of
   text around it. A customer who misses it loses the day they picked.
   Accent coral and a size up - the same colour the site already uses for the
   discount pill and the header's count badges, i.e. "look here". */
.bcfb-cart-item-hold {
	display: inline-block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--bc-accent);
}

/* A Send/Pay control on a row the timer has just seen lapse. The server would
   refuse it anyway; this stops the click being worth making. */
.bcfb-is-disabled {
	pointer-events: none;
	opacity: .5;
}

.bcfb-cart-item-timeout {
	display: inline-block;
	margin-top: 2px;
	font-style: italic;
	font-size: 12.5px;
	color: var(--bc-text-subtle);
}

/* One review in the list under a listing (see bcfb_render_review). */
.bcfb-review {
	list-style: none;
	padding: 18px 0;
	border-bottom: 1px solid var(--bc-border-soft);
}

.bcfb-review:last-child { border-bottom: none; }

.bcfb-review-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bcfb-review-avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.bcfb-review-byline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.bcfb-review-author {
	font-weight: 700;
	color: var(--bc-text);
}

.bcfb-review-date {
	font-size: 12.5px;
	color: var(--bc-text-subtle);
}

.bcfb-review-held {
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--bcfb-r-xs);
	background: #fff3cd;
	color: #8a6d00;
}

.bcfb-review-text {
	margin-top: 8px;
}

/* Star rating on a listing card, under the price (see bcfb_render_listing_card).
   The star is amber and the rest is not: colouring the whole line would make
   every reviewed card shout, when the job here is only to be findable by
   someone already scanning for it. */
.bcfb-card-rating {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.4;
}

.bcfb-card-rating-star {
	color: #F5A623;
	font-size: 13px;
}

.bcfb-card-rating-score {
	font-weight: 700;
	color: var(--bc-text);
}

.bcfb-card-rating-count {
	color: var(--bc-text-subtle);
}

/* The HOST code on a single listing page, linking to that host's profile.
   A tinted chip rather than underline-on-hover: hover states are invisible
   until the mouse is already there, so anyone who did not happen to sweep
   across the code would never learn it leads anywhere - and on a touch screen
   there is no hover at all. The chip says "this does something" while the
   page is still sitting still. */
/* Its own row below the FBID, label first (see
   bcfb_render_single_reference_rows()). Sized here rather than left to
   inherit: this sits inside .bcfb-listing-banner-title, which sets its child
   rows to 32px for the heading. A 32px "View all locations by" would shout
   louder than the location above it, but the first attempt at 13px went too
   far the other way and read as a footnote against a 32px heading. 20px is
   clearly subordinate to the heading while still belonging to it.
   The chip's own font-size is relative (0.85em), so it follows this. */
.bcfb-host-link-row {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 14px;
}
.bcfb-listing-banner-title .bcfb-host-link-row { font-size: 20px; }
.bcfb-host-link-label {
	color: var(--bc-text-muted);
	font-weight: 500;
}

.bcfb-host-link {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--bc-border-soft);
	/* md, because this is something you click. --bcfb-r-pill is reserved for
	   labels sitting on a photograph - see the note on the radius scale. */
	border-radius: var(--bcfb-r-md);
	background: var(--bcfb-tint);
	color: var(--bc-primary);
	text-decoration: none;
	/* The row it sits in is set in the display face at heading size; holding
	   the chip a touch smaller keeps it from competing with the location. */
	font-size: 0.85em;
	line-height: 1.5;
	vertical-align: middle;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.bcfb-host-link:hover,
.bcfb-host-link:focus {
	background: var(--bc-border-soft);
	border-color: var(--bc-primary);
	color: var(--bc-primary);
	text-decoration: none;
}

/* ---------- Host profile (/host/HOST-000200/, see host-profile.php) ---------- */
.bcfb-host-profile-head {
	margin-bottom: 22px;
}

.bcfb-host-profile-meta {
	margin: 6px 0 0;
	font-size: 14px;
	color: #55636e;
}

.bcfb-host-profile-sep {
	margin: 0 8px;
	color: #b6c0c7;
}

.bcfb-host-profile-rating {
	color: #1d2327;
	font-weight: 600;
}

/* The card grid is the same six-column one used by the homepage rows, so a
   card looks identical wherever it appears - only the wrapper differs. */
.bcfb-host-profile-grid {
	margin-top: 4px;
}

/* Left-hand side of the split header: a heading when the caller passes one,
   and "How to book" either way. */
.bcfb-section-header-lead {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.bcfb-howto-link {
	/* Was --bc-accent (pink) - now matches .bc-link-arrow's green
	   (the "View all"/"View featured" links), per request: one link
	   color across the row instead of "How to book" standing out as if
	   it were a warning or a different kind of action. */
	color: var(--bc-primary);
	white-space: nowrap;
}

.bcfb-howto-link:hover,
.bcfb-howto-link:focus { color: var(--bc-primary-dark); }

.bcfb-card-row {
	display: grid;
	/* Same guard as the results grid - see the note there. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--bcfb-row-gap, 14px);
	padding: 2px 2px 8px;
}
.bcfb-card { width: 100%; min-width: 0; }
.bcfb-card-empty-slot {
	border: 1px dashed #e0e0e0;
	border-radius: var(--bcfb-r-lg);
	min-height: 160px;
	background: repeating-linear-gradient(135deg, #fafafa, #fafafa 10px, #f2f2f2 10px, #f2f2f2 20px);
}

/* ---------- "Practical sets" rows: independent horizontal-scroll carousels
   (Host favorite / Early bird / random x2), same interaction as the promo
   banner's carousel, just reusing the regular .bcfb-card markup instead of
   .bcfb-promo-card. ---------- */
.bcfb-hscroll-carousel { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.bcfb-hscroll-carousel:last-child { margin-bottom: 0; }
.bcfb-hscroll-row {
	display: flex;
	gap: 14px;
	padding: 2px 2px 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	min-width: 0;
}
.bcfb-hscroll-row::-webkit-scrollbar { height: 6px; }
.bcfb-hscroll-row::-webkit-scrollbar-thumb { background: var(--bc-border); border-radius: var(--bcfb-r-xs); }
.bcfb-hscroll-row .bcfb-card,
.bcfb-hscroll-row .bcfb-card-empty-slot {
	flex: 0 0 auto;
	width: calc((100% - 2 * 14px) / 3);
	scroll-snap-align: start;
}
@media (min-width: 800px) {
	.bcfb-hscroll-row { gap: 20px; }
	.bcfb-hscroll-row .bcfb-card,
	.bcfb-hscroll-row .bcfb-card-empty-slot { width: calc((100% - 5 * 20px) / 6); }
}
@media (max-width: 1200px) and (min-width: 800px) {
	.bcfb-hscroll-row .bcfb-card,
	.bcfb-hscroll-row .bcfb-card-empty-slot { width: calc((100% - 3 * 20px) / 4); }
}
@media (max-width: 600px) {
	.bcfb-hscroll-row .bcfb-card,
	.bcfb-hscroll-row .bcfb-card-empty-slot { width: calc((100% - 14px) / 2); }
}
.bcfb-card-thumb-link { display: block; }
.bcfb-card-thumb {
	display: block;
	/* Was height: 160px, which gave a different shape from the homepage
	   cards because the two grids have different column widths. The ratio
	   token keeps them identical whatever the column width works out to. */
	aspect-ratio: var(--bcfb-card-ratio, 16 / 10);
	border-radius: var(--bcfb-r-lg);
	overflow: hidden;
	position: relative;
	background: var(--bc-bg-alt);
}
.bcfb-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bcfb-card-thumb-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--bc-text-subtle); font-size: 24px; }
.bcfb-card-badge-row {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 34px; /* leaves room for .bcfb-card-fav in the opposite corner */
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.bcfb-card-badge {
	/* White -> green, 2026-08 (investor request): --bc-primary is the
	   theme's actual green (--bc-accent is gold, despite the name). Text
	   flipped to white to stay readable on the now-dark background. */
	background: var(--bc-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: var(--bcfb-r-pill);
	white-space: nowrap;
}
.bcfb-card-fav {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #fff;
	font-size: 15px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	/* Reset <button> defaults - this used to be a plain decorative <span>,
	   now a real clickable control (see bcfb_render_listing_card() /
	   bcfb_print_favorite_toggle_script() in functions.php). */
	background: none;
	border: none;
	padding: 4px;
	margin: 0;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
	transition: transform .1s ease, color .15s ease;
}
.bcfb-card-fav:hover { transform: scale(1.12); }
.bcfb-card-fav:disabled { cursor: default; opacity: .7; }
/* Filled-heart look once favorited - swap the visible glyph via CSS
   (outline heart text hidden with font-size:0, filled heart glyph drawn by
   ::before at the real size) instead of touching the button's text content
   in JS, so bcfb_print_favorite_toggle_script() only ever needs to
   toggle one class name. */
.bcfb-card-fav-active {
	color: #ff4d6d;
	text-shadow: none;
	font-size: 0;
}
.bcfb-card-fav-active::before {
	content: '\2665';
	font-size: 15px;
}
/* Standalone "Add to Favorites" button inside the single-listing <h1>
   (single.php) - same ".bcfb-card-fav" class handles the click/AJAX/
   active-state toggle (see bcfb_print_favorite_toggle_script(), which only
   ever adds/removes the "bcfb-card-fav-active" class and never touches
   markup), this just overrides layout/labeling since it isn't a bare
   floating heart over a thumbnail here. Floated right so it docks next to
   the first (space-type) line of the title specifically, instead of
   aligning to the top of the whole multi-line title block.

   Two label spans (bcfb-card-fav-label-off / -on) swap visibility via the
   active class instead of the grid card's font-size:0 + ::before trick,
   since that trick assumed the button's only content was the heart glyph -
   here it also has real translated text (see single.php), which needs its
   own toggle rather than being hidden by font-size. */
.bcfb-card-fav-inline {
	position: static;
	float: right;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #999;
	text-shadow: none;
	font-size: 13px;
	/* Was 600 - now matches the weight of the HOST-000200 pill next to it
	   (.bcfb-host-link-label, same tint/pill family, weight 500), since the
	   two now sit close together in the new stacked layout above and a
	   heavier weight here read as more important than the host chip. */
	font-weight: 500;
	border: 1px solid var(--bc-border);
	/* md, not pill: this is a button. --bcfb-r-pill is for labels lying on a
	   photograph - see the note on the radius scale. */
	border-radius: var(--bcfb-r-md);
	/* Same tint as the header pills and the HOST chip - one surface for
	   everything you can press. The favorited state below keeps its own pink,
	   which is not decoration: it is how the button reports what it did. */
	background: var(--bcfb-tint);
	padding: 6px 14px 6px 10px;
	margin: 4px 0 8px 12px;
}
.bcfb-card-fav-inline .bcfb-card-fav-glyph { font-size: 16px; line-height: 1; }
.bcfb-card-fav-inline .bcfb-card-fav-label-on { display: none; }
.bcfb-card-fav-inline.bcfb-card-fav-active {
	color: #ff4d6d;
	border-color: #ffd3db;
	background: #fff5f6;
	font-size: 13px; /* undo the grid card's .bcfb-card-fav-active { font-size: 0 } */
}
/* The grid card's ".bcfb-card-fav-active::before" (unscoped, draws its own
   heart glyph directly on the button) would otherwise double up with this
   button's own .bcfb-card-fav-glyph::before - suppress it here only. */
.bcfb-card-fav-inline.bcfb-card-fav-active::before { content: none; }
.bcfb-card-fav-inline.bcfb-card-fav-active .bcfb-card-fav-glyph {
	font-size: 0;
}
.bcfb-card-fav-inline.bcfb-card-fav-active .bcfb-card-fav-glyph::before {
	content: '\2665';
	font-size: 16px;
}
.bcfb-card-fav-inline.bcfb-card-fav-active .bcfb-card-fav-label-off { display: none; }
.bcfb-card-fav-inline.bcfb-card-fav-active .bcfb-card-fav-label-on { display: inline; }
.bcfb-card-info { padding: 8px 2px 0; }
/* .bcfb-card-name is now the clickable wrapper itself (an <a> around 3
   stacked rows: FBID / Province, Country / Space Type) rather than a <div>
   around one line of title text - see bcfb_render_card_reference_rows() in
   functions.php. */
.bcfb-card-name { display: block; color: inherit; text-decoration: none; }
.bcfb-card-name:hover .bcfb-card-spacetype { color: var(--bc-primary-dark); }
.bcfb-card-fbid { font-size: 11px; color: var(--bc-text-muted); font-weight: 500; letter-spacing: .2px; }
.bcfb-card-loc { font-size: 12px; color: var(--bc-text-muted); margin-top: 2px; }
.bcfb-card-spacetype { font-size: 13.5px; font-weight: 700; color: var(--bc-text); margin-top: 2px; }
.bcfb-card-price { font-size: 12px; font-weight: 600; margin-top: 6px; }
.bcfb-card-ai-reason { font-size: 11px; color: var(--bc-text-muted); margin-top: 5px; line-height: 1.4; }

/* Same FBID/Location/Space Type rows, but sized up for the single listing
   page's <h1> heading (bcfb_render_single_reference_rows() in functions.php)
   - the card-sized text above is meant for tight grid layouts, not a page
   title, so it needs its own larger scale here. Lives in the full-width
   banner at the top of the page now (.bcfb-listing-banner-title, see
   single.php) rather than inside the old sidebar card's .bc-listing-title -
   that sidebar block was removed since it duplicated this banner. */
.bcfb-listing-banner-title .bcfb-card-fbid,
.bcfb-listing-banner-title .bcfb-card-loc,
.bcfb-listing-banner-title .bcfb-card-spacetype { font-size: 32px; margin-top: 8px; line-height: 1.25; }

/* ---------- Star-rating reviews (see functions.php: bcfb_add_star_rating_field(),
   bcfb_render_average_rating_summary(), bcfb_prepend_star_rating_to_comment()) ---------- */

/* Average rating summary line shown near the price on the single listing page. */
.bcfb-rating-summary-wrap { margin: 4px 0 10px; }
.bcfb-rating-summary { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.bcfb-rating-summary:hover .bcfb-rating-value { text-decoration: underline; }
.bcfb-rating-stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; }
.bcfb-rating-value { font-weight: 700; font-size: 14px; }
.bcfb-rating-count { font-size: 13px; color: var(--bc-text-muted); }

/* Read-only stars prepended to each comment that has a saved rating. */
.bcfb-comment-rating { display: block; color: #f5a623; font-size: 15px; letter-spacing: 1px; margin-bottom: 4px; }

/* 5-star input widget on the comment form (comment_form_top). Radios are
   rendered in DOM order 5,4,3,2,1 and displayed in reverse (row-reverse) so
   the ~ sibling-combinator hover/checked trick works left-to-right visually
   while still submitting the correct picked value. */
.bcfb-star-rating {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
}
.bcfb-star-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bcfb-star-rating label {
	font-size: 48px;
	line-height: 1;
	color: #d9d9d9;
	cursor: pointer;
	transition: color .1s ease;
}
.bcfb-star-rating input:checked ~ label,
.bcfb-star-rating label:hover,
.bcfb-star-rating label:hover ~ label {
	color: #f5a623;
}
.comment-form-rating { margin-bottom: 14px; }
.bcfb-listing-banner-title .bcfb-card-fbid { margin-top: 0; }

/* Draft placeholder cards - shown when a row has no real Listings yet */
.bcfb-placeholder-card { cursor: default; }
.bcfb-placeholder-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, var(--bc-bg-alt), var(--bc-bg-alt) 10px, #f0f0f0 10px, #f0f0f0 20px);
	border: 1px dashed var(--bc-border);
	color: var(--bc-text-subtle);
	font-size: 22px;
}
.bcfb-placeholder-text { color: var(--bc-text-subtle) !important; font-style: italic; }

@media (min-width: 800px) {
	.bcfb-card-row { gap: var(--bcfb-row-gap-wide, 20px); }
	/* .bcfb-card-thumb's height: 200px used to live here. An explicit height
	   beats aspect-ratio outright, so this one line was quietly cancelling the
	   16:10 shape on every screen wider than 800px - which is every screen the
	   grid actually looks like a grid on. */
}

@media (max-width: 1200px) {
	.bcfb-card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.bcfb-card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.bcfb-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Footer ---------- */
.bc-site-footer, footer.bc-site-footer {
	/* Was IBM Plex Mono - see the note on --bc-font-heading. */
	font-family: var(--bc-font-body);
	background: var(--bcfb-charcoal);
	color: #999;
	padding: 24px 0;
}
.bcfb-footer-inner { text-align: center; }
.bcfb-footer-contact {
	font-size: 12px;
	margin-bottom: 10px;
}
.bcfb-footer-contact a { color: var(--bcfb-teal); text-decoration: none; }
.bcfb-footer-contact a:hover { text-decoration: underline; }

/* Reads as a continuation of the maintenance notice directly above it, so it
   matches that line rather than sitting centred in its own 640px column at
   10px - two sentences of small print, set two different ways, looked like a
   mistake. Same left edge, same size; only the colour stays dimmer, because
   this one is background and the maintenance window is something to act on. */
.bcfb-footer-disclaimer {
	/* Bigger + red + its own box, 2026-08 (investor request, ahead of
	   launch): this line used to read as fine print (12.5px, muted grey) -
	   the opposite of what a "this is a demo, not a real service" notice
	   needs before real visitors arrive. --bcfb-danger-bg is a flat tint,
	   not the --bcfb-danger-bg token's light-mode pink, because the footer
	   itself is dark - a pale pink box would fight the surrounding charcoal
	   rather than read as a warning inside it. */
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--bcfb-danger);
	background: rgba( 217, 45, 32, 0.12 );
	border: 1px solid rgba( 217, 45, 32, 0.35 );
	border-radius: var(--bcfb-r-md);
	padding: 10px 14px;
}

.bcfb-footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	font-size: 11px;
	padding-top: 14px;
	border-top: 1px solid #3a3a3a;
}
.bcfb-footer-credit a { color: #ccc; text-decoration: underline; }
.bcfb-footer-credit a:hover { color: #fff; }

@media (min-width: 640px) {
	.bcfb-footer-inner { text-align: left; }
	.bcfb-footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* ---------- Become a Host page ---------- */
.bcfb-host-page-inner { max-width: 720px; margin: 0 auto; padding: 40px 16px 60px; }
.bcfb-host-page-title { font-size: 30px; margin: 0 0 24px; }
.bcfb-host-page-content { font-size: 15px; line-height: 1.7; color: var(--bc-text); }
.bcfb-host-page-content ul { padding-left: 20px; }
.bcfb-host-page-content li { margin-bottom: 8px; }
.bcfb-host-apply-row { margin-top: 32px; text-align: center; }
.bcfb-host-apply-btn { display: inline-block; }

.bcfb-host-manual-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #f7f7f7;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	padding: 16px 18px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.bcfb-host-manual-box-text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--bc-text-muted); }
.bcfb-host-manual-box-text strong { font-size: 15px; color: var(--bc-text); }
.bcfb-host-manual-btn { flex-shrink: 0; padding: 10px 18px; font-size: 13.5px; }

@media ( max-width: 480px ) {
	.bcfb-host-manual-box { flex-direction: column; align-items: flex-start; }
}

/* ---------- Request to Book (simple booking system) ---------- */
.bcfb-booking-box { margin: 16px 0; }
.bcfb-booking-notice {
	font-size: 13px;
	padding: 10px 14px;
	border-radius: var(--bcfb-r-md);
	margin: 0 0 12px;
}
.bcfb-booking-notice-success { background: #e6f8f0; color: #0a7a4b; border: 1px solid #b7e8d0; }
.bcfb-booking-notice-error { background: #fdeceb; color: #a83b30; border: 1px solid #f3c6c0; }

/* The same notice sitting under the Add to booking button rather than above a
   box. Its 12px bottom margin was written for the top position; below the
   button the space is needed on the other side. */
.bcfb-quick-book .bcfb-booking-notice {
	margin: 12px 0 0;
}

/* No focus ring around the whole booking form or the booking box.
   After a press, the handler redirects to #bcfb-quickbook-form (or
   #bcfb-booking-box) so the page lands on the control that was used - and the
   browser moves focus to a fragment target, which draws its default outline
   around the entire container. It looked like the form had been selected.
   Removed only on these two NON-INTERACTIVE containers: every control inside
   them keeps its own focus ring, so nothing a keyboard user actually operates
   loses its indicator. */
#bcfb-quickbook-form:focus,
#bcfb-quickbook-form:focus-visible,
#bcfb-booking-box:focus,
#bcfb-booking-box:focus-visible {
	outline: none;
}
.bcfb-booking-form {
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
	padding: 14px;
	background: #fafafa;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
}
.bcfb-booking-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bc-text);
}
.bcfb-booking-form input,
.bcfb-booking-form textarea {
	font-family: var(--bc-font-body);
	font-weight: 400;
	font-size: 13.5px;
	padding: 9px 11px;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-sm);
	box-sizing: border-box;
	width: 100%;
}
.bcfb-booking-form-row { display: flex; gap: 10px; }
.bcfb-booking-form-row label { flex: 1; }

/* "Ask a Question" box - now rendered directly below the "Leave a Reply"
   comment form (see single.php: bcfb_render_ask_question_form() is called
   right after comments_template(), no longer hooked into the sidebar's
   'best_classifieds_listing_actions' action) - restyled to look like a
   natural continuation of that comment form (.bc-comments-title /
   .comment-form in best-classifieds/assets/css/main.css) instead of a
   separate gray card, since it's no longer sitting in the sidebar next to
   Request to Book. */
/* The parent theme gives .bc-comments-area the same divider-and-padding
   treatment the question box used to have (best-classifieds/assets/css/main.css).
   Only the 48px margin is cancelled, because it breaks the even 16px rhythm
   between sections.

   Its border-top and padding-top are deliberately LEFT ALONE. Both happen to
   be identical to the card's own (1px solid var(--bc-border), 32px), so on a
   card they are not a second divider - they are the card's top edge and top
   padding, declared twice with the same value. Zeroing the border here, which
   was the first attempt, removed the card's top border and left the review
   box looking open at the top. */
.bc-comments-area {
	margin-top: 0;
}
.bc-comments-title {
	font-weight: 700;
}

/* 2026-08: the box is now a real card (.bc-listing-description, added in the
   markup - see the note there), so the divider rule and the padding that used
   to stand in for a card edge are gone. Leaving `padding-top: 32px` here would
   have restated the card's own padding, and `border-top` its own top edge -
   the same mistake already documented on the host section below. */
.bcfb-question-box {
	margin-top: 0;
}

/* Breathing room between the stacked section cards on a listing page.
   .bc-listing-description (the parent theme) carries a border and 32px of
   padding but no margin whatsoever, so consecutive sections met border to
   border and the whole column read as one long box with rules across it
   rather than as separate cards.

   Adjacent-sibling rather than a blanket margin-bottom, so the last section
   doesn't push extra space onto whatever follows it.

   No exceptions (2026-08). "About the host" used to be excluded here and set
   its own 80px gap with a divider drawn above it, from when reviews and the
   question box were unboxed blocks and the tail of the page needed something
   to separate it. Now that every block on the page is a card, one card edge
   is already a boundary: a rule above a bordered box is a second boundary
   drawn for the same job, and an 80px gap in a column otherwise spaced at
   16px reads as something missing rather than as emphasis. */
.bcfb-public-section + .bcfb-public-section {
	margin-top: 16px;
}
.bcfb-question-box-title {
	font-family: var(--bc-font-heading);
	font-size: 1.5rem;
	/* Was 400 - the only weight Bebas Neue had. */
	font-weight: 700 !important;
	margin: 0 0 24px !important;
}
.bcfb-question-box .bcfb-question-form {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
}
.bcfb-question-box .bcfb-question-form label {
	font-size: 14px;
	font-weight: 400;
	color: var(--bc-text);
}
.bcfb-question-box .bcfb-question-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-sm);
	font-size: 14px;
	font-family: var(--bc-font-body);
	background: var(--bc-surface);
	margin: 8px 0 4px;
	box-sizing: border-box;
}
.bcfb-question-box .bcfb-question-form button[type="submit"] {
	/* Overrides .bc-btn-block's width:100% (see best-classifieds/main.css) -
	   "Send question" should sit left-aligned like "Post Comment" below the
	   comment form, not stretch full-width like it did in the old sidebar
	   card. */
	width: auto;
	align-self: flex-start;
	background: var(--bc-primary);
	color: var(--bc-bg);
	border: none;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--bcfb-r-sm);
	cursor: pointer;
	margin-top: 12px;
}
.bcfb-question-box .bcfb-question-form button[type="submit"]:hover { background: var(--bc-primary-dark); }

/* Grayed-out "please log in" state shown instead of the form to a guest -
   deliberately muted/disabled-looking rather than styled like a normal
   call to action, so it reads as "locked" rather than "click here". */
.bcfb-question-login-notice {
	background: #f2f2f2;
	border: 1px dashed #ccc;
	border-radius: var(--bcfb-r-md);
	padding: 14px;
	text-align: center;
}
.bcfb-question-login-notice p {
	margin: 0 0 10px;
	color: #888;
	font-size: 13.5px;
}

/* Past question + host answer shown above the form, for an account that's
   already asked about this listing before. */
.bcfb-question-thread {
	background: #fafafa;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	padding: 10px 12px;
	margin-bottom: 8px;
	font-size: 13px;
}
.bcfb-question-thread-q { margin: 0 0 6px; color: var(--bc-text); }
.bcfb-question-thread-a { margin: 0; color: #0a7a4b; }
.bcfb-question-thread-pending { margin: 0; color: #8a6d00; }

.bcfb-question-char-hint { font-size: 11.5px; font-weight: 400; color: #999; align-self: flex-end; }
.bcfb-question-limit-notice {
	font-size: 13px;
	color: #8a6d00;
	background: #fff8e6;
	border: 1px solid #f0d999;
	border-radius: var(--bcfb-r-md);
	padding: 10px 14px;
	margin: 0;
}

/* Public 3-month "Check Availability & Book" calendar - same palette as
   the admin-side Availability Calendar editor in the Listing Editor, so
   the colors mean the same thing on both sides of the site. */
.bcfb-pub-cal-wrap {
	background: #fafafa;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	padding: 12px;
	margin: 10px 0;
}
.bcfb-pub-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
	font-size: 12px;
}
.bcfb-pub-cal-legend-item { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--bc-text); }
.bcfb-pub-cal-swatch { display: inline-block; width: 13px; height: 13px; border-radius: var(--bcfb-r-xs); border: 1px solid #ccc; }
/* Key swatch for "Your selection" - the same half-filled blue as the day
   tiles, so the legend matches the grid rather than describing it. */
.bcfb-pub-cal-swatch-selected {
	background-image: linear-gradient(to top right, rgba(74, 144, 217, 0.55) 0 50%, transparent 50% 100%);
	border-color: #4a90d9;
}
/* The in-progress twin of the above, carrying the same dashed edge the live
   selection wears in the grid so the key and the tile match. */
.bcfb-pub-cal-swatch-pending {
	border-style: dashed;
}

.bcfb-pub-cal-selection-readout {
	font-size: 13px;
	font-weight: 600;
	color: var(--bc-primary);
	margin: 0 0 10px;
}

.bcfb-pub-cal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

/* Wrapper for the month grid, so the paging arrows have something to sit
   against. Only .is-paged reserves room for them - the twelve-month Check
   Availability calendar shows every month at once and has no arrows, so
   padding it would leave two empty gutters. */
.bcfb-pub-cal-viewport { position: relative; }
.bcfb-pub-cal-viewport.is-paged { padding: 0 34px; }
.bcfb-pub-cal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--bc-text);
	background: #fff;
	border: 1.5px solid var(--bcfb-charcoal);
	border-radius: 50%;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.bcfb-pub-cal-nav:hover:not(:disabled) { background: var(--bcfb-charcoal); color: #fff; }
/* Kept in place rather than hidden at the ends of the range: an arrow that
   disappears makes the grid jump sideways by its own width. */
.bcfb-pub-cal-nav:disabled { opacity: 0.3; cursor: default; }
.bcfb-pub-cal-nav-prev { left: 0; }
.bcfb-pub-cal-nav-next { right: 0; }
@media (max-width: 640px) {
	.bcfb-pub-cal-viewport.is-paged { padding: 0 30px; }
}
.bcfb-pub-cal-month-label {
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
	text-transform: uppercase;
	color: var(--bc-text);
}
.bcfb-pub-cal-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.bcfb-pub-cal-table th { padding: 3px 2px; color: #888; font-weight: 600; }
.bcfb-pub-cal-day {
	text-align: center;
	padding: 5px 2px;
	border-radius: var(--bcfb-r-xs);
	cursor: pointer;
}
.bcfb-pub-cal-day:not(.bcfb-pub-cal-day-locked):hover { outline: 2px solid var(--bc-primary); outline-offset: -2px; }

/* Sunday marker, shared by the public calendar and the Listing Editor's.
   Both grids are Monday-first, so the last column is the one a Sunday-first
   reader misreads as Saturday.

   The yellow is on the column HEADER only. Day cells already use background
   colour to mean a status, and Booked is #f4b400 - amber - so tinting Sundays
   yellow would make every Sunday look booked. Day numbers get a warm text
   colour instead: text is the one channel the legend doesn't use.

   NOTE: bcfb_render_availability_calendar_editor() in functions.php repeats
   these three rules in an inline <style> block, because the wp-admin copy of
   the Listing Editor never loads this stylesheet. The two are twins - change
   both or neither. */
.bcfb-cal-dow-sun {
	background-color: #ffe89a;
	color: #6b5200 !important;
	border-radius: 3px 3px 0 0;
}
.bcfb-cal-day-sun { color: #a86a00; font-weight: 700; }
.bcfb-cal-day-sun.bcfb-pub-cal-day-locked { color: #999; font-weight: 600; }
.bcfb-pub-cal-day-locked {
	cursor: not-allowed;
	background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.06) 4px, transparent 4px, transparent 8px);
	opacity: 0.75;
}
/* A selected day, a day sitting in the list, and a day sitting in the cart
   all share one look: a HALF-filled blue tile.

   Half, not solid, for the same reason "Part of the day booked" is half - a
   solid tile is the site's way of saying a day is settled, and a selection is
   the opposite of settled. Blue rather than the old green because green reads
   as confirmed, and nothing here is confirmed: the day is held, the host has
   not agreed to anything, and the request has not even been sent.

   The slant matches part_booked's (both "to top right") rather than mirroring
   it. Mirrored diagonals were the original idea - the two could never be
   confused - but they turned out to be mutually exclusive in practice: both
   rules set background-image on the same cell, so on a day that was BOTH
   part-booked and held, one simply overwrote the other and a whole state went
   invisible. Same axis + the combined rule below means both halves show. */
.bcfb-pub-cal-day-selected,
.bcfb-pub-cal-day-incart {
	background-image: linear-gradient(to top right, rgba(74, 144, 217, 0.55) 0 50%, transparent 50% 100%);
	font-weight: 700;
	color: var(--bc-primary-dark);
}

/* Same blue, two different meanings: -incart is a finished item, fixed and
   priced; -selected is still being assembled and its fill moves every time
   the length buttons change. A dashed outline is the "not settled yet" mark -
   the customer can see at a glance which days are still in play and which are
   already banked, which is what made the repaint look like a bug.

   outline rather than border: a border would resize the tile and shift the
   grid on every click. Offset inward so it reads as part of the tile. */
.bcfb-pub-cal-day-selected {
	outline: 2px dashed #4a90d9;
	outline-offset: -3px;
}

/* Both at once: part-booked by someone else AND held by this customer.
   One tile, one slant, split down the same diagonal - amber on the upper
   half (already taken), blue on the lower half (held by you). Neither state
   can hide the other, which is the whole point.

   Listed after the two single-state rules so it wins on source order without
   needing !important. */
.bcfb-pub-cal-day[data-status="part_booked"].bcfb-pub-cal-day-incart,
.bcfb-pub-cal-day[data-status="part_booked"].bcfb-pub-cal-day-selected {
	background-image: linear-gradient(to top right, rgba(74, 144, 217, 0.55) 0 50%, rgba(244, 180, 0, 0.55) 50% 100%);
}

/* 24 hours fills the tile solid. Half means "part of this day"; a whole-day
   booking leaves no other part, so the half tile would be saying something
   untrue. .is-full-day is toggled live on the grid as the length is changed;
   .bcfb-pub-cal-day-fullday is set server-side for a 24-hour item already in
   the cart. The colour is the same blue - still held, still unconfirmed.

   !important because the day cell carries its status colour as an inline
   style, which a class cannot otherwise beat. */
.bcfb-pub-cal-grid.is-full-day .bcfb-pub-cal-day-selected,
.bcfb-pub-cal-day-fullday {
	background-image: none;
	background-color: rgba(74, 144, 217, 0.55) !important;
}

/* ...except on a day that is also part-booked, where filling solid would
   paint over the amber and claim the whole day is yours when part of it
   already belongs to someone else's confirmed booking. Keep the split. */
.bcfb-pub-cal-grid.is-full-day .bcfb-pub-cal-day[data-status="part_booked"].bcfb-pub-cal-day-selected,
.bcfb-pub-cal-day[data-status="part_booked"].bcfb-pub-cal-day-fullday {
	background-image: linear-gradient(to top right, rgba(74, 144, 217, 0.55) 0 50%, rgba(244, 180, 0, 0.55) 50% 100%);
	background-color: transparent !important;
}

/* Persistent "my booking status" card(s) above the Check Availability &
   Book button - replaces the old one-time URL-flash "Request sent!"
   notice, and keeps itself live-updated via polling (see
   bcfb_ajax_check_booking_status()). */
.bcfb-booking-status-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fafafa;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	padding: 8px 12px;
	margin-bottom: 8px;
	font-size: 13px;
}
.bcfb-booking-status-dates { color: var(--bc-text); font-weight: 600; }
.bcfb-booking-status-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--bcfb-r-xs);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Sign In / Sign Up mockup page ---------- */
.bcfb-auth-wrap {
	max-width: 440px;
	margin: 0 auto;
	padding: 48px 16px 60px;
}
.bcfb-auth-card {
	background: #fff;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-xl);
	box-shadow: var(--bcfb-shadow);
	padding: 28px 24px;
}
.bcfb-auth-tabs {
	display: flex;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	padding: 3px;
	margin-bottom: 24px;
}
.bcfb-auth-tab {
	flex: 1;
	background: none;
	border: none;
	padding: 10px 0;
	border-radius: var(--bcfb-r-md);
	font-family: var(--bc-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--bc-text-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.bcfb-auth-tab-active { background: var(--bcfb-charcoal); color: #fff; }

.bcfb-auth-form { display: none; flex-direction: column; gap: 16px; }
.bcfb-auth-form-active { display: flex; }

.bcfb-auth-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bc-text);
}
.bcfb-auth-input {
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	padding: 11px 12px;
	font-family: var(--bc-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--bc-text);
}
.bcfb-auth-input:focus { outline: 2px solid var(--bc-primary); outline-offset: 1px; }
/* Hide the browser's built-in "show password" reveal control on password
   fields - Firefox and Edge both add one, and it was rendering oddly
   (full-width bar) inside our styled input. */
.bcfb-auth-input::-ms-reveal,
.bcfb-auth-input::-moz-reveal {
	display: none;
}

.bcfb-auth-forgot {
	align-self: flex-end;
	font-size: 12px;
	color: var(--bc-primary);
	text-decoration: none;
	margin-top: -8px;
}
.bcfb-auth-forgot:hover { text-decoration: underline; }

.bcfb-auth-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--bc-text-muted);
}
.bcfb-auth-checkbox input { margin-top: 2px; }

.bcfb-auth-submit { width: 100%; text-align: center; border: none; }

.bcfb-auth-switch-text {
	text-align: center;
	font-size: 13px;
	color: var(--bc-text-muted);
	margin: 4px 0 0;
}
.bcfb-auth-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--bc-primary);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

.bcfb-auth-mockup-note {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px dashed var(--bc-border);
	font-size: 12px;
	color: var(--bc-text-subtle);
	font-style: italic;
	text-align: center;
}

/* Search results page - grid of cards (vs. the homepage's horizontal
   scrolling row, .bcfb-card-row) reusing the same .bcfb-card markup/styles. */
/* The same frame as the homepage rows (.bcfb-promo-banner), so a listing
   looks the same on the page you clicked from and the page you land on.
   Column count and gap deliberately match .bcfb-general-carousel's six
   columns and 20px gap - that is what makes a card the same size in both
   places, not just the same shape. */
/* The panel IS the homepage banner - the template carries
   .bcfb-promo-banner .bcfb-general-banner, so background, border, radius and
   padding all come from there. Re-declaring them here was the mistake that
   produced a panel that looked almost but not quite like the homepage: I had
   written 24px/20px padding against the banner's own 24px/20px... and 16px
   radius against its 16px, with a gradient copied by hand. Any later change
   to the banner would have left this behind.

   All this rule adds is the couple of things a results page needs and a
   homepage row does not. */
.bcfb-results-panel {
	margin: 24px 0 48px;
	box-sizing: border-box;
	overflow: hidden;
}

/* The results grid carries .bcfb-card-row as well, which is the homepage's
   own grid - six columns, 14px gap, same card sizing. Everything about how
   the cards look and how big they are therefore comes from one place.
   .bcfb-card-row is a grid, so a fourth and fifth row of results simply wrap;
   nothing extra is needed to turn one row into many.

   The rules below are only the handful of things a page of results needs that
   a homepage row does not. Anything else here would be a second definition of
   something already defined, which is exactly what made the two pages drift
   apart in the first place. */
.bcfb-search-results-grid {
	margin: 0;
}

/* The two durations in the "In your list" explanation - the hold length and
   the cooldown. Same accent coral as the live countdown on each row, so the
   figure a customer reads about beforehand and the clock they watch later are
   visibly the same subject. */
.bcfb-cart-note-figure {
	color: var(--bc-accent);
	font-weight: 700;
}

/* A note about a rule that does not exist yet (see page-cart.php). Dashed
   border and muted text so it reads as a margin note rather than as a term of
   service - it is a memo to us, shown in the open, and it goes when the
   payment work lands. */
.bcfb-cart-planned-note {
	border: 1px dashed var(--bc-border);
	border-radius: var(--bcfb-r-md);
	padding: 8px 12px;
	margin-top: 12px;
	font-style: italic;
}

/* Divides "how this works" from "what you have" inside the list box.

   --bc-border, not --bc-border-soft. The soft token (#D8ECEA) is a divider for
   a white background; inside the "In your list" box it sits on --bcfb-tint
   (#EAF7F5), two colours close enough that the rule was drawn and simply could
   not be seen. Same line in the Cart, where the background IS white, read
   fine - which is what made it look like the rule had never been added. */
.bcfb-cart-box-rule {
	border: 0;
	border-top: 1px solid var(--bc-border);
	margin: 14px 0;
}

/* A heart that cannot be pressed because the list is full. Dimmed and
   not-allowed rather than hidden: a heart that disappears from some cards and
   not others looks like those listings cannot be saved at all. */
.bcfb-card-fav-full {
	opacity: 0.4;
	cursor: not-allowed;
}

/* "12 of 54 saved..." under the My Favorites heading. Muted: it is a fact
   about the list, not an instruction, and it should not compete with the
   heading it sits under. */
.bcfb-favorites-count {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--bc-text-muted);
}

.bcfb-search-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: -24px 0 48px;
	flex-wrap: wrap;
}
.bcfb-search-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--bcfb-r-md);
	border: 1px solid var(--bc-border);
	color: var(--bc-text);
	font-size: 13.5px;
	text-decoration: none;
}
.bcfb-search-page-link:hover { background: #f2f2f2; }
.bcfb-search-page-link-active {
	background: var(--bc-primary);
	border-color: var(--bc-primary);
	color: #fff;
}

/* ---------- Cap the parent theme's "wide screen excellence" hero rules ----------
   The stock Best Classifieds theme balloons the hero (huge title + up to
   160px/78vh of padding) at 1440px/1680px/1920px/2560px breakpoints, which
   is meant for tall marketing sites but on a normal 1920x1080 monitor pushes
   everything below the fold - the "Early book" carousel image gets clipped
   by the viewport. Keep the FilmBaseFinder hero compact at every width. */
@media (min-width: 1440px) {
	.bc-front-page .bc-hero.bcfb-hero {
		padding: 24px 40px 24px !important;
		min-height: 0 !important;
		display: block !important;
	}
	.bc-front-page .bcfb-hero-inner { max-width: 1200px !important; }
	.bc-front-page .bcfb-hero-title {
		font-size: 40px !important;
		letter-spacing: -1px !important;
		line-height: 1.15 !important;
	}
	.bc-front-page .bc-hero-subtitle,
	.bc-front-page .bcfb-hero .bc-hero-subtitle {
		font-size: 17px !important;
		margin-bottom: 0 !important;
	}
}

/* Hero subtitle marquee - slow continuous scroll, pauses on hover, and
   respects users who've asked for reduced motion. */
.bcfb-marquee {
	overflow: hidden;
	white-space: nowrap;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bcfb-marquee-track {
	display: inline-flex;
	width: max-content;
	animation: bcfb-marquee-scroll 18s linear infinite;
}
.bcfb-marquee:hover .bcfb-marquee-track {
	animation-play-state: paused;
}
.bcfb-marquee-item {
	display: inline-block;
	padding-right: 48px;
}
@keyframes bcfb-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.bcfb-marquee-track { animation: none; }
	/* Hide the loop copy, not "the last one". With two messages :last-child
	   happened to drop one of the two duplicates and left the strip reading
	   almost right; with three it left two of them showing. The duplicates
	   are exactly the aria-hidden ones, so say that instead. */
	.bcfb-marquee-item[aria-hidden="true"] { display: none; }
}

/* ---------- Single listing page: full-width top banner ----------
   Replaces the old sidebar card's duplicated title/price/favorite block
   (see single.php) - shown once, full-width, above the two-column hero/
   sidebar layout instead of only inside the sticky sidebar card. */
.bcfb-listing-banner {
	display: flex;
	flex-wrap: wrap;
	/* Was center - the left column (title + location + FBID + HOST pill) is
	   taller than the right column (price + Add to Favorites), so centering
	   left empty space above the price. flex-end sits the price/button
	   block on the same baseline as the HOST pill row instead. */
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	margin-top: 8px;
	border-bottom: 1px solid var(--bc-border);
}
.bcfb-listing-banner-identity { min-width: 0; }
.bcfb-listing-banner-title {
	font-family: var(--bc-font-heading);
	/* Was 400 - the only weight Bebas Neue had. */
	font-weight: 700;
	line-height: 1.2;
	margin: 4px 0 0;
	letter-spacing: -0.5px;
}
.bcfb-listing-banner-actions {
	/* Column, not row: Add to Favorites moved below the price (2026-08,
	   Yong's call) - it was competing with the price for the same line at
	   the top of the page. align-items: flex-end keeps both right-aligned
	   in their new stacked order, same as before. */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
}
.bcfb-listing-banner-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--bc-font-heading);
}
/* The currency word. It used to be the only thing sized here, which left
   "THB" at 1.8rem shouting over an 80,000 sitting at body size - the wrong
   way round, since the number is what a customer is actually reading. The
   amount is now the large element and the currency is held below it. */
.bcfb-listing-banner-price > span:first-child {
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--bc-primary);
}
.bcfb-listing-banner-price .bc-price-amount {
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--bc-text);
}
/* Both of these are muted by design and stay clearly secondary to the
   amount - they were simply too small to read beside a 32px heading.
   Scoped to the banner so listing cards, where 11.5px is right for a tight
   grid, are untouched. */
.bcfb-listing-banner-price .bcfb-price-usd-approx { font-size: 14px; }
.bcfb-listing-banner-price .bc-listing-price-note { font-size: 14px; }
/* .bcfb-card-fav-inline's float:right + margin (see its own rule above)
   were tuned for floating inside the old sidebar <h1> - harmless but
   unnecessary now that it's a flex child of .bcfb-listing-banner-actions,
   just reset here so it doesn't pick up stray margin in its new context. */
.bcfb-listing-banner .bcfb-card-fav-inline { float: none; margin: 0; }

@media (max-width: 782px) {
	.bcfb-listing-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
	/* Was "width:100%; justify-content:space-between" from when this was a
	   row (price left, button right). Now that it's a column (see above),
	   justify-content has no row left to space out - just keep it full
	   width so flex-end still means "right edge of the page", not "right
	   edge of the price". */
	.bcfb-listing-banner-actions { width: 100%; }
}

/* Pricing section rate grid (bcfb_render_public_section_pricing()) -
   deliberately the same shape as the host's own "8. Pricing" grid in the
   Listing Editor, so the same durations read the same way on both sides of
   the site. Here they're radio options: picking one sets the duration for
   the quick request row below. */
/* Hero photo on the listing page, held to 80% of the column and centred.
   Since the sidebar was removed the main column runs the full container
   width, which made a 16:10 hero tall enough to fill most of a 1080p
   window on its own - the page opened on a photo and nothing else.
   Only above 782px: on a phone the image should still use the full width,
   where 80% would just waste it. */
@media (min-width: 783px) {
	.bcfb-public-section .bc-listing-hero-image {
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	/* Thumbnails line up under the hero rather than under the column. */
	.bcfb-public-section .bcfb-listing-gallery {
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Listing photo thumbnails (bcfb_render_public_section_photos()). Buttons
   rather than links - clicking swaps the big image above instead of opening
   the file in a new tab. The gallery renderer still hooked to
   'best_classifieds_after_listing_image' keeps its old link behaviour for
   any template that fires that action. */
.bcfb-listing-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
}
.bcfb-gallery-thumb {
	width: 96px;
	height: 96px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--bcfb-r-sm);
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}
.bcfb-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcfb-gallery-thumb:hover { border-color: #bdbdbd; }
/* Which photo is currently in the hero. Border rather than opacity so it
   stays legible against both light and dark images. */
.bcfb-gallery-thumb-active { border-color: #0a7a4b; }
.bcfb-gallery-thumb:focus-visible { outline: 2px solid #0a7a4b; outline-offset: 2px; }

/* A day with a confirmed booking that only covers part of the permitted
   hours (bcfb_get_listing_partial_booked_dates()). The cell keeps the plain
   "available" background from its inline style; this paints the booked half
   diagonally over it, so a half-used day is distinguishable at a glance
   from a fully booked one. background-image is used deliberately - the
   inline style sets background-color, so the two layer instead of fighting. */
.bcfb-pub-cal-day[data-status="part_booked"] {
	background-image: linear-gradient(to top right, rgba(244, 180, 0, 0.55) 0 50%, transparent 50% 100%);
}
/* Same treatment for the legend swatch, so the key matches the grid. */
.bcfb-pub-cal-swatch-part-booked {
	background-image: linear-gradient(to top right, rgba(244, 180, 0, 0.55) 0 50%, transparent 50% 100%);
}

.bcfb-pricing-hours {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 4px;
}
.bcfb-pricing-hours > span { color: #666; }

.bcfb-rate-grid {
	display: grid;
	/* 160px fits the widest pair ("24 hours" over "20,000 THB") without the
	   price being pushed against the tile edge. auto-fit rather than
	   auto-fill so a row of 6 spreads evenly instead of leaving a phantom
	   empty column. */
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin: 10px 0 4px;
}
/* Fixed 5-per-row for rate tables with more than 5 durations (Shooting day,
   2026-08) - keeps a 10-item table as two even rows of five instead of
   auto-fit's uneven wrap. Falls back to a single column below 700px so tiles
   don't get squeezed unreadably narrow on phones. */
.bcfb-rate-grid-fixed5 {
	grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 700px) {
	.bcfb-rate-grid-fixed5 {
		grid-template-columns: repeat(2, 1fr);
	}
}
.bcfb-rate-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	padding: 12px;
	cursor: pointer;
	font-weight: 400;
	/* The radio would otherwise shrink and the text overflow the tile. */
	min-width: 0;
}
.bcfb-rate-option input[type="radio"] { flex: 0 0 auto; margin-top: 2px; }
/* Label above price - side by side, long pairs collided with the edge. */
.bcfb-rate-option-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
/* :has() lets the whole tile show selection, not just the radio dot.
   Browsers without it simply keep the plain border - the radio itself is
   still visibly checked, so nothing is lost. */
.bcfb-rate-option:has(input:checked) {
	border-color: #0a7a4b;
	background: #f2fbf7;
}
.bcfb-rate-option:hover { border-color: #bdbdbd; }
/* A length that cannot fit in the hours still free on the chosen day. Shown
   greyed rather than removed: a tile that vanishes and reappears as the date
   changes is harder to read than one that stays put and dims, and the price
   is still worth seeing while deciding which day to shoot on. */
.bcfb-rate-option-unavailable {
	opacity: 0.45;
	cursor: not-allowed;
	background: #fafafa;
}
.bcfb-rate-option-unavailable:hover { border-color: var(--bc-border); }
.bcfb-rate-option-label { font-size: 13px; color: #666; line-height: 1.3; }
.bcfb-rate-option-price { font-weight: 600; font-size: 15px; line-height: 1.3; }
/* A rate the viewer can't act on (logged out, or a host on their own
   listing) still needs to be readable - just not to look clickable. */
.bcfb-rate-option:has(input:disabled) { cursor: default; opacity: 0.75; }

.bcfb-quick-book {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	/* One booking row for the whole section now, under both rate grids -
	   it used to be one form per grid, alternating down the page. */
	margin: 10px 0 22px;
}

/* Start and end time on a line of their own, directly under the rate tables.
   End time is a derived value, not a control, so it is styled as a read-out -
   same height and baseline as the select beside it, but plainly not something
   you can open. */
.bcfb-quick-book-times {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	/* Framed so the time row reads as its own step rather than floating
	   between the rate tiles and the calendar (2026-08 feedback). */
	padding: 12px;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	background: var(--bc-bg-alt);
}
/* "Time of Use" / "Date" now sit outside their boxes as real headings,
   matching the "Shooting day" / "Setup / Takedown day" rate-table titles
   (2026-08 feedback: labels read better outside the box, styled like the
   other section headings, than as small gray text inside it). They're
   siblings inside the flex form, so force each onto its own row. */
.bcfb-quick-book-heading {
	flex: 1 1 100%;
}
.bcfb-quick-end {
	height: 40px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-weight: 700;
	color: var(--bc-text);
	background: var(--bc-bg-alt);
	border: 1px dashed var(--bc-border);
	border-radius: var(--bcfb-r-sm);
	min-width: 84px;
}

/* The date picker is a real calendar rather than a native date field, so it
   needs its own line instead of sitting inline beside the start time and the
   button.

   Four months, laid out by the shared .bcfb-pub-cal-grid auto-fit rule - so
   they sit side by side when there is room and stack when there isn't, rather
   than being pinned to a fixed count that breaks on a phone. The 280px cap and
   the forced single column that were here for the one-month version are gone:
   they would have stacked all four into one tall ribbon. */
.bcfb-quick-book-calendar { flex: 1 1 100%; }
.bcfb-quick-book-calendar .bcfb-pub-cal-wrap { margin: 4px 0 0; }

/* Months separated by a rule, not just by space.

   Each month's table stretches to fill its column, so its cells - and the
   full-width yellow SU header - run right to the column edge, and the weeks of
   one month appeared to continue into the next. Space alone helped; a line
   settles it.

   The column count is fixed per breakpoint here rather than left to the shared
   auto-fit rule. That is the price of the divider: the line has to be hidden on
   whichever month begins a row, and knowing which one that is means knowing how
   many columns there are. With auto-fit the browser decides, and the first month
   of the second row would wear a leading line pointing at nothing.

   gap is 0 across, with the breathing space moved into each month's own
   padding, so the rule sits centred in the channel instead of hard against the
   month that follows it. */
.bcfb-quick-book-calendar .bcfb-pub-cal-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 0;
}
.bcfb-quick-book-calendar .bcfb-pub-cal-month {
	padding: 0 16px;
	border-left: 1px solid var(--bc-border);
}
.bcfb-quick-book-calendar .bcfb-pub-cal-month:nth-child(4n + 1) { border-left: 0; }

@media (max-width: 1200px) {
	.bcfb-quick-book-calendar .bcfb-pub-cal-grid { grid-template-columns: repeat(2, 1fr); }
	.bcfb-quick-book-calendar .bcfb-pub-cal-month:nth-child(4n + 1) { border-left: 1px solid var(--bc-border); }
	.bcfb-quick-book-calendar .bcfb-pub-cal-month:nth-child(2n + 1) { border-left: 0; }
}

@media (max-width: 700px) {
	/* One month per row - every month starts a row, so no dividers at all. */
	.bcfb-quick-book-calendar .bcfb-pub-cal-grid { grid-template-columns: 1fr; }
	.bcfb-quick-book-calendar .bcfb-pub-cal-month {
		padding: 0;
		border-left: 0;
	}
}
.bcfb-quick-book-field { display: flex; flex-direction: column; gap: 4px; }
.bcfb-quick-book-field > span { font-size: 12px; color: #666; }
.bcfb-quick-book-field select,
.bcfb-quick-book-field input[type="date"] {
	height: 40px;
	padding: 0 10px;
	border: 1px solid #ccc;
	border-radius: var(--bcfb-r-sm);
	background: #fff;
}
.bcfb-quick-book .bc-btn { height: 40px; }
.bcfb-quick-book-note { font-size: 12.5px; color: #666; font-style: italic; margin: 8px 0 0; }

/* "In your cart" - the review box under the Pricing section. Its own card, in
   the brand teal rather than the page's neutral grey, because it is the one
   thing in this section that reflects something the customer has done rather
   than something the host has published. */
.bcfb-cart-box {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid var(--bcfb-field-border);
	border-radius: var(--bcfb-r-md);
	background: var(--bcfb-arrow-bg-hover);
}
.bcfb-cart-box-title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
}
.bcfb-cart-list { list-style: none; margin: 0 0 12px; padding: 0; }
.bcfb-cart-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--bc-border-soft);
}
.bcfb-cart-item:last-child { border-bottom: 0; }
.bcfb-cart-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bcfb-cart-item-meta { font-size: 12.5px; color: var(--bc-text-muted); }
.bcfb-cart-item-remove { font-size: 12.5px; color: var(--bc-text-muted); white-space: nowrap; }
.bcfb-cart-item-remove:hover { color: var(--bc-accent); }
/* Cart page only: a row can have both "Send request" (a real button) and
   "Remove" (a text link) side by side, unlike the review box's Remove-only
   row, so it needs its own wrapper and a center-aligned parent rather than
   the review box's baseline alignment. */
.bcfb-cart-item-full { align-items: center; }
.bcfb-cart-item-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Cart page total + pay-all row, below the list. The amount is deliberately
   the largest type on the page - it's the one number a customer checks
   before committing, and it was previously only inferable by adding up the
   per-row prices by hand. */
.bcfb-cart-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 6px;
	padding-top: 16px;
	border-top: 2px solid var(--bcfb-charcoal);
}
.bcfb-cart-total-figure { display: flex; align-items: baseline; gap: 10px; }
.bcfb-cart-total-label { font-size: 13px; font-weight: 700; color: var(--bc-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bcfb-cart-total-amount { font-size: 28px; font-weight: 800; color: var(--bc-text); line-height: 1.1; }
@media (max-width: 640px) {
	.bcfb-cart-total-row { flex-direction: column; align-items: stretch; }
	.bcfb-cart-total-btn { text-align: center; justify-content: center; }
}
.bcfb-cart-box-note { font-size: 12.5px; color: var(--bc-text-muted); margin: 10px 0 0; }
.bcfb-cart-box-added {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bc-primary-dark);
}

/* The colour key, printed under the note that closes the Pricing section.
   Separated by a rule because it explains the calendar above rather than
   continuing the sentence before it. */
.bcfb-quick-book-legend {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--bc-border-soft);
}
.bcfb-quick-book-legend .bcfb-pub-cal-legend { margin: 0; }

/* "My Bookings" (page-my-bookings.php) - the customer-side counterpart to
   the host's Booking List. Plain table on desktop; on narrow screens each
   row becomes its own card with the column name shown beside each value
   (via the data-label attributes in the template), since a six-column
   table can't shrink usefully on a phone. */
.bcfb-my-bookings-wrap { overflow-x: auto; }
.bcfb-my-bookings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.bcfb-my-bookings-table th,
.bcfb-my-bookings-table td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--bc-border);
	vertical-align: top;
}
.bcfb-my-bookings-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #666;
	border-bottom-width: 2px;
}
.bcfb-my-bookings-table code { font-size: 12px; }
.bcfb-my-bookings-sub { font-size: 12px; color: #666; }
/* "Edit listing" on My Listings. Sits inside the Listing cell rather than
   in its own right-hand column - at six columns the table was wider than a
   laptop window and the one control a host needs scrolled out of view. */
.bcfb-my-listings-edit {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 12px;
	border: 1px solid #ccc;
	border-radius: var(--bcfb-r-sm);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	color: #111;
}
.bcfb-my-listings-edit:hover { border-color: #0a7a4b; color: #0a7a4b; }
.bcfb-my-bookings-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--bcfb-r-xs);
	font-size: 12px;
	font-weight: 600;
	/* Status changes are swapped in by the polling script, so a transition
	   makes a confirmation land as a visible change rather than a silent
	   repaint the customer might not notice. */
	transition: background-color 0.3s ease, color 0.3s ease;
}

@media (max-width: 782px) {
	.bcfb-my-bookings-table thead { display: none; }
	.bcfb-my-bookings-table,
	.bcfb-my-bookings-table tbody,
	.bcfb-my-bookings-table tr,
	.bcfb-my-bookings-table td { display: block; width: 100%; }
	.bcfb-my-bookings-table tr {
		border: 1px solid var(--bc-border);
		border-radius: var(--bcfb-r-md);
		margin-bottom: 12px;
		padding: 4px 0;
	}
	.bcfb-my-bookings-table td {
		border-bottom: none;
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 8px 14px;
	}
	.bcfb-my-bookings-table td::before {
		content: attr(data-label);
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.4px;
		color: #666;
		flex: 0 0 auto;
	}
}

/* Single listing page with no sidebar (see single.php - the whole
   <aside class="bc-listing-sidebar"> was removed in the redesign).
   .bc-listing-layout is "grid-template-columns: 1.5fr 1fr" in the parent
   theme (assets/css/main.css), so with only one child left the content
   would otherwise be squeezed into the left ~60% with a dead gutter on the
   right. The parent theme's own responsive rules already collapse
   .bc-listing-layout to a single column below 1024px/782px, so this only
   needs to cover the wide-screen case. */
.bcfb-listing-layout-single { grid-template-columns: 1fr; }

/* List / Map switcher on the search results page. */

/* Map view: the map is the page, so it's ordered above the results. The
   markup can't be moved - the map div needs $map_pins, which is only filled
   once the results loop has run - so the reorder is visual. */
.bcfb-results-mapmode { display: flex; flex-direction: column; }
.bcfb-results-mapmode .bcfb-results-map-wrap { order: -1; margin-top: 0; }
.bcfb-map-toggle {
	border: 1px solid #ccc;
	background: #fff;
	border-radius: var(--bcfb-r-md);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 10px;
}
.bcfb-map-toggle:hover { border-color: #888; }
.bcfb-results-map { width: 100%; border: 1px solid var(--bc-border); border-radius: var(--bcfb-r-lg); }

.bcfb-results-map-wrap { margin: 8px 0 36px; }
.bcfb-results-map {
	width: 100%;
	height: 360px;
	border-radius: var(--bcfb-r-lg);
	overflow: hidden;
	border: 1px solid var(--bc-border);
}

/* Contact section: the "unlocks when your booking is confirmed" notice.
   Styled as a quiet panel rather than a warning - nothing has gone wrong,
   this is simply how the platform works. */
.bcfb-contact-locked {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-sm);
	background: #f6f7f7;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

/* ------------------------------------------------------------------
   Listing Editor buttons.

   The editor markup is shared with the wp-admin screen, so its buttons
   carry wp-admin's classes (.button, .button-primary, .button-hero).
   On the front-end page those stylesheets aren't loaded, so the buttons
   fell back to the browser's default grey chrome - small, unstyled and
   visibly out of place next to the rest of the site.

   Rather than loading wp-admin CSS on a public page (heavy, and it would
   fight the theme everywhere else), the same three classes are given the
   theme's own button look, scoped to the editor page so nothing in
   wp-admin is affected.
   ------------------------------------------------------------------ */
.bcfb-listing-editor-page .button,
.bcfb-listing-editor-page .button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border-radius: var(--bcfb-r-md);
	border: 1.5px solid var(--bcfb-charcoal);
	background: #fff;
	color: var(--bcfb-charcoal);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bcfb-listing-editor-page .button:hover {
	background: var(--bcfb-charcoal);
	color: #fff;
}

/* The primary action - "Save Listing", "Submit for review" - carries the
   site's accent so it reads as the button to press. */
.bcfb-listing-editor-page .button-primary {
	background: var(--bc-accent);
	border-color: var(--bc-accent);
	color: #fff;
}

.bcfb-listing-editor-page .button-primary:hover {
	background: var(--bc-accent-dark);
	border-color: var(--bc-accent-dark);
	color: #fff;
}

/* .button-hero is wp-admin's "bigger than normal" modifier. */
.bcfb-listing-editor-page .button-hero {
	height: 52px;
	padding: 0 32px;
	font-size: 15px;
}

.bcfb-listing-editor-page .button:focus-visible,
.bcfb-listing-editor-page .button-primary:focus-visible {
	outline: 2px solid var(--bc-accent);
	outline-offset: 2px;
}

/* Number and date inputs in section 11 sit inline with their labels; keep
   them from inheriting the tall button metrics above. */
.bcfb-listing-editor-page .bcfb-rank-note input[type="number"] {
	height: 30px;
	padding: 0 8px;
	border: 1px solid #8c8f94;
	border-radius: var(--bcfb-r-xs);
}

/* "My Listings" and "Add listing" in the header. Both borrow the outlined
   pill of .bcfb-btn-host but sit quieter: they are utility links for people
   who already have an account, not the call to action that "Earn as a Host"
   is. Sized together so the two neighbours cannot drift apart. */
.bcfb-btn-listings,
.bcfb-btn-add-listing {
	font-weight: 600;
	font-size: 12px;
}

@media (max-width: 782px) {
	/* On a narrow header the account name, log out, "Earn as a Host" and these
	   all compete for one row. Both are reachable from the Listing Editor and
	   from each other, so they yield first. */
	.bcfb-btn-listings,
	.bcfb-btn-add-listing { display: none; }
}

/* ------------------------------------------------------------------
   Admin Queue (page-admin-queue.php)

   Front-end moderation screen. Styled with the theme's own vocabulary
   rather than anything resembling wp-admin - a moderator should never
   have to think about which "admin" they are looking at.
   ------------------------------------------------------------------ */
.bcfb-queue-tabs {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid var(--bc-border);
	margin: 0 0 24px;
}

.bcfb-queue-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--bcfb-r-md) var(--bcfb-r-md) 0 0;
	font-weight: 600;
	font-size: 14px;
	color: var(--bc-text-muted, #666);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.bcfb-queue-tab:hover { background: #f6f7f7; }

.bcfb-queue-tab.is-active {
	color: var(--bcfb-charcoal);
	border-bottom-color: var(--bc-accent);
}

/* The count is the point of the tab - it says whether there is work. */
.bcfb-queue-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--bcfb-r-md);
	background: var(--bc-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.bcfb-queue-notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--bcfb-r-md);
	background: #e6f8f0;
	border: 1px solid #b6e5d0;
	color: #0a7a4b;
	font-size: 14px;
}

.bcfb-queue-heading { margin: 32px 0 4px; font-size: 18px; }
.bcfb-queue-heading:first-of-type { margin-top: 0; }
.bcfb-queue-sub { margin: 0 0 16px; font-size: 13px; color: #666; }
.bcfb-queue-empty {
	margin: 0 0 16px;
	padding: 20px;
	border: 1px dashed #dcdcde;
	border-radius: var(--bcfb-r-md);
	color: #777;
	font-size: 14px;
}

.bcfb-queue-card {
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-lg);
	padding: 20px;
	margin: 0 0 16px;
	background: #fff;
}

.bcfb-queue-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

.bcfb-queue-card-title { margin: 0 0 4px; font-size: 16px; }
.bcfb-queue-meta { margin: 0 0 12px; font-size: 12.5px; color: #777; }
.bcfb-queue-thumb { border-radius: var(--bcfb-r-md); flex-shrink: 0; }

.bcfb-queue-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.bcfb-queue-btn {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border-radius: var(--bcfb-r-md);
	border: 1.5px solid var(--bcfb-charcoal);
	background: #fff;
	color: var(--bcfb-charcoal);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.bcfb-queue-btn:hover { background: var(--bcfb-charcoal); color: #fff; }

.bcfb-queue-btn-primary {
	background: var(--bc-accent);
	border-color: var(--bc-accent);
	color: #fff;
}

.bcfb-queue-btn-primary:hover {
	background: var(--bc-accent-dark);
	border-color: var(--bc-accent-dark);
	color: #fff;
}

.bcfb-queue-reject,
.bcfb-queue-answer { margin: 16px 0 0; }

.bcfb-queue-reject label,
.bcfb-queue-answer label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	margin: 0 0 6px;
}

.bcfb-queue-reject textarea,
.bcfb-queue-answer textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bc-border);
	border-radius: var(--bcfb-r-md);
	font-family: inherit;
	font-size: 14px;
	margin: 0 0 10px;
}

.bcfb-queue-question {
	margin: 0 0 4px;
	padding: 12px 16px;
	border-left: 3px solid var(--bc-accent);
	background: #faf9f8;
	border-radius: 0 var(--bcfb-r-md) var(--bcfb-r-md) 0;
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.bcfb-queue-tabs { flex-direction: column; border-bottom: 0; }
	.bcfb-queue-tab { border-radius: var(--bcfb-r-md); border-bottom: 0; margin-bottom: 0; }
	.bcfb-queue-tab.is-active { background: #f6f7f7; }
	.bcfb-queue-card-head { flex-direction: column-reverse; }
	.bcfb-queue-thumb { width: 100%; height: auto; }
}

/* Header "Queue" button with its waiting count. */
.bcfb-btn-queue { gap: 6px; font-weight: 600; font-size: 12px; }

.bcfb-queue-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--bcfb-r-pill);
	background: var(--bc-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.bcfb-btn-queue:hover .bcfb-queue-badge { background: #fff; color: var(--bc-accent); }

@media (max-width: 782px) {
	/* Same reasoning as .bcfb-btn-listings - the row is full. */
	.bcfb-btn-queue { display: none; }

	/* ...but My Bookings is not a staff shortcut like Queue and To do, which
	   a moderator can reach another way. It is the customer's own stuff, and
	   it was reachable at every width until it was restyled from a bare icon
	   into a text pill and picked up .bcfb-btn-queue's hiding along with its
	   spacing. Kept visible, and reverted to icon-only here - which is what
	   it was before, and the reason the row had space for it. */
	.bcfb-btn-bookings {
		display: inline-flex;
		justify-content: center;
		padding: 0 12px;
	}
	.bcfb-btn-bookings .bcfb-btn-bookings-label { display: none; }
}

/* Destructive action. Outlined rather than filled: it should be findable
   without competing with Restore, which is the button we would rather
   someone pressed. */
.bcfb-queue-btn-danger {
	border-color: #d63638;
	color: #d63638;
	background: #fff;
}

.bcfb-queue-btn-danger:hover {
	background: #d63638;
	border-color: #d63638;
	color: #fff;
}

/* Host Queue: the requested date/time line on a booking card. */
.bcfb-queue-booking-when {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bcfb-charcoal);
}

/* ------------------------------------------------------------------
   Reviews + "Have a question?" - readability pass.

   Three things made this stretch of the page hard to read, all of them
   inherited defaults rather than decisions:

   1. The fields ran the full width of the container. On a wide screen a
      comment box a metre across gives no sense of how much to write, and
      the eye has nowhere to rest. Prose wants a measure; 720px is about
      90 characters at this size.
   2. The buttons were the parent theme's green (--bc-primary) while every
      other button on the site is coral. Two accent colours on one page
      reads as two different systems.
   3. "Logged in as X. Edit your profile. Log out? Required fields are
      marked *" was set at body size in link colour, so four pieces of
      housekeeping had the same visual weight as the question being asked.
   ------------------------------------------------------------------ */
/* Full width, as before. The measure argument holds for reading prose, but
   these are boxes people type INTO, and the wider box was preferred - a
   review of a location often quotes a list of details, and narrow wrapping
   makes that harder to scan while writing it. Both boxes match each other,
   which was the real problem. */

.comment-form textarea,
.bcfb-question-box .bcfb-question-form textarea {
	max-width: 100%;
	border-radius: var(--bcfb-r-md);
	line-height: 1.6;
}

.comment-form textarea { min-height: 140px; }
.bcfb-question-box .bcfb-question-form textarea { min-height: 96px; }

.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.bcfb-question-box .bcfb-question-form textarea:focus {
	outline: none;
	border-color: var(--bc-primary-dark);
	box-shadow: 0 0 0 3px rgba( 0, 137, 123, 0.15 );
}

/* Teal, not coral.
   Coral is the loudest colour on the site, and these two buttons sit at the
   bottom of a quiet page of text where nothing is competing for attention -
   so the volume was doing no work and just read as alarming, on a pair of
   actions that are neither urgent nor dangerous.
   Teal is the brand colour and the same green the header pills are tinted
   with, so a filled teal button reads as the strong version of something the
   reader has already seen, rather than as a warning. Coral is left to the
   notification badges, where being hard to ignore is the entire job. */
.comment-form .submit,
.bcfb-question-box .bcfb-question-form button[type="submit"] {
	background: var(--bc-primary);
	border: none;
	border-radius: var(--bcfb-r-md);
	padding: 12px 24px;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
}

.comment-form .submit:hover,
.bcfb-question-box .bcfb-question-form button[type="submit"]:hover {
	background: var(--bc-primary-dark);
}

/* Housekeeping line: present, but out of the way. */
.comment-form .logged-in-as {
	font-size: 12.5px;
	color: #8a8a8a;
	margin: 0 0 18px;
}

.comment-form .logged-in-as a {
	color: #8a8a8a;
	text-decoration: underline;
}

.comment-form .logged-in-as a:hover { color: var(--bc-accent); }

/* Labels above the fields, consistent across both forms. */
.comment-form label,
.bcfb-question-box .bcfb-question-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--bcfb-charcoal);
}

/* The star row is the first thing asked for - give it room. */
.comment-form-rating { margin-bottom: 20px !important; }

/* Breathing space between the review block and the question block, which
   were previously separated only by a hairline. */
.bcfb-question-box {
	margin-top: 56px;
	padding-top: 36px;
}

/* ------------------------------------------------------------------
   Make the input fields look like fields.

   The borders were --bc-border, a hairline meant for separating sections.
   On a white page a white box with a near-white outline does not read as
   somewhere to type - the field disappears and only the button suggests
   anything is being asked. These get a real, visible edge.
   ------------------------------------------------------------------ */
/* Teal rather than grey - the site's second colour, already used for the
   "BASE" in the logo and the search accent, so the field reads as part of
   this site rather than a browser default. Kept clearly lighter than the
   coral buttons: the border says "here is the field", the button says
   "press me", and those two should not compete. */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.bcfb-question-box .bcfb-question-form textarea {
	border: 1.5px solid var(--bc-primary);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-form textarea:hover,
.comment-form input[type="text"]:hover,
.comment-form input[type="email"]:hover,
.comment-form input[type="url"]:hover,
.bcfb-question-box .bcfb-question-form textarea:hover {
	border-color: var(--bc-primary-dark);
}

/* Character counter under the review box, matching .bcfb-question-char-hint
   on the question box so the two forms speak the same language. */
.bcfb-review-char-hint {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: #999;
	text-align: right;
}

.bcfb-review-char-hint.is-near-limit {
	color: #d63638;
	font-weight: 600;
}

/* Both message boxes are the same object asking for the same thing, so they
   get the same width, the same height and the same counter. The review form
   was inheriting the container's full width while the question form was
   capped, which made them look like parts of two different pages. */
.comment-form,
.comment-respond,
.bcfb-question-box,
.bcfb-question-box .bcfb-question-form {
	max-width: none;
}

.comment-form textarea,
.bcfb-question-box .bcfb-question-form textarea {
	width: 100%;
	min-height: 150px;
	box-sizing: border-box;
}

/* Counter, identical in both places. */
.bcfb-review-char-hint,
.bcfb-question-char-hint {
	display: block;
	margin: 6px 0 0;
	font-size: 11.5px;
	color: #999;
	text-align: right;
	align-self: auto;
}

.bcfb-review-char-hint.is-near-limit,
.bcfb-question-char-hint.is-near-limit {
	color: #d63638;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Field borders, site-wide.

   Applied by element rather than by class so it covers markup this theme
   does not own: the parent theme's forms, WordPress's comment fields, the
   Listing Editor's wp-admin-classed inputs, and anything added later.

   Excluded on purpose:
   - checkboxes, radios and file inputs, which the browser draws itself and
     which look wrong with an author-supplied border
   - buttons, which have their own treatment
   - anything inside wp-admin, which is not ours to restyle
   ------------------------------------------------------------------ */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
	border: 1.5px solid var(--bcfb-field-border);
	border-radius: var(--bcfb-r-md);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
select:hover,
textarea:hover {
	border-color: var(--bcfb-field-border-hover);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--bcfb-field-border-hover);
	box-shadow: 0 0 0 3px var(--bcfb-field-ring);
}

/* A disabled field should not advertise itself as somewhere to type. */
input:disabled,
select:disabled,
textarea:disabled {
	border-color: #dcdcde;
	background: #f6f7f7;
	color: #999;
}

/* Composed controls: a single pill that already has its own outer border,
   with icons and buttons sitting inside it. Bordering the input as well
   draws a box inside a box - which is exactly what happened to the AI
   search field, whose own `border: none` lost to the site-wide rule above
   on equal specificity, simply because that rule comes later in the file. */
.bcfb-search-bar input,
.bcfb-search-field input,
.bcfb-tool-field input,
.bcfb-ai-search-bar input,
.bcfb-quick-book input,
.bcfb-quick-book select {
	border: none;
	box-shadow: none;
}

.bcfb-search-bar input:focus,
.bcfb-search-field input:focus,
.bcfb-tool-field input:focus,
.bcfb-ai-search-bar input:focus,
.bcfb-quick-book input:focus,
.bcfb-quick-book select:focus {
	border: none;
	box-shadow: none;
}

/* Long placeholder, one line, fading out rather than running under the
   button beside it. */
.bcfb-ai-search-bar input {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   General locations banner: one panel, two arrows.

   Previously three stacked panels, each with its own left/right pair -
   six arrows for one block of content, and rows that could be scrolled
   out of step with one another.

   The two arrows sit inside the panel, one at each side, centred against
   the full height of all three rows. Stacking them in bars above and
   below was worse: the arrow ended up a long way from the cards it moved,
   and the top-left/bottom-right pairing read as two unrelated controls
   rather than back and forward. The panel is padded to make room for them
   so they never overlap a card.

   Card width is set here rather than inherited from the generic
   .bcfb-promo-row > .bcfb-card rule
   because the count and the gap have to agree with each other - stated
   once as custom properties, so the arithmetic cannot drift from the
   actual gap the way it did when the two were written out separately.
   ------------------------------------------------------------------ */
.bcfb-general-banner {
	/* Room for an arrow on each side, plus a little air. */
	padding: 24px 20px;
}

.bcfb-general-carousel {
	--bcfb-general-cards: 6;
	--bcfb-general-gap: 20px;
}

.bcfb-general-carousel {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

/* The rows take whatever is left once both arrows have their space. */
.bcfb-general-rows {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
}

.bcfb-general-rows .bcfb-promo-row {
	gap: var(--bcfb-general-gap);
	flex: 0 0 auto;
	scrollbar-width: none;
}

.bcfb-general-rows .bcfb-promo-row::-webkit-scrollbar {
	display: none;
	height: 0;
}

.bcfb-general-rows .bcfb-card {
	width: calc(
		( 100% - ( var(--bcfb-general-cards) - 1 ) * var(--bcfb-general-gap) )
		/ var(--bcfb-general-cards)
	);
	flex: 0 0 auto;
}

.bcfb-general-arrowbar {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* No box-shadow override here any more. It used to carry its own
   (0 1px 4px / 0.08) while .bcfb-promo-arrow had none, so this one arrow was
   subtly heavier than the identical arrows in the other banners. The lift now
   lives once, on .bcfb-promo-arrow. */

/* Only this banner disables its arrows (it knows when the row is at either
   end). 0.35 was too far: the tile faded to roughly the colour of the panel
   behind it, which read as a half-rendered button rather than an unavailable
   one - it was mistaken for the restyle not having applied at all. At 0.5 the
   teal edge still states it is a button; the muted chevron says it is off. */
.bcfb-general-arrow:disabled {
	opacity: 0.5;
	cursor: default;
	box-shadow: none;
	color: var(--bc-text-subtle);
}

/* Hover must not light up a button that does nothing. Uses the token rather
   than a hardcoded #fff, which is what it said before - and would have
   silently gone back to white the moment the tile colour changed. */
.bcfb-general-arrow:disabled:hover {
	background: var(--bcfb-arrow-bg);
	border-color: var(--bcfb-arrow-border);
}

@media (max-width: 1200px) {
	.bcfb-general-carousel { --bcfb-general-cards: 4; }
}

@media (max-width: 900px) {
	.bcfb-general-banner { padding: 20px 12px; }
	.bcfb-general-carousel { --bcfb-general-cards: 3; --bcfb-general-gap: 14px; gap: 8px; }
}

@media (max-width: 600px) {
	.bcfb-general-carousel { --bcfb-general-cards: 2; --bcfb-general-gap: 14px; }
}

/* ------------------------------------------------------------------
   Listing Editor section boxes.

   The eleven numbered sections used to carry their border inline, which
   meant they kept wp-admin's grey no matter what the theme said - a
   stylesheet cannot override an inline style without !important, and
   reaching for !important to fight your own markup is a sign the style
   is in the wrong place. They are a class now, so they follow the same
   border colour and corner scale as everything else.

   The fallback values in each var() are what the wp-admin copy of this
   screen renders with, since this stylesheet is front-end only. Keeping
   them means the dashboard version still looks deliberate rather than
   unstyled.
   ------------------------------------------------------------------ */
.bcfb-editor-section {
	background: #fff;
	border: 1px solid var(--bc-border, #dcdcde);
	border-radius: var(--bcfb-r-sm, 6px);
	padding: 20px;
	margin-bottom: 16px;
}

/* The grey explanatory panels inside those sections. Fallbacks again, for the
   wp-admin copy of the screen. */
.bcfb-editor-note {
	background: #f6f7f7;
	border: 1px solid var(--bc-border, #dcdcde);
	border-radius: var(--bcfb-r-xs, 4px);
	padding: 12px 14px;
}

/* "How to book" modal - front page only, see bcfb_render_practical_sets_section()
   in functions.php. [hidden] is what JS toggles; the flex display only
   applies once that attribute is removed, so the overlay never flashes
   visible before the script runs. */
.bcfb-howto-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.bcfb-howto-overlay[hidden] {
	display: none;
}
.bcfb-howto-modal {
	position: relative;
	background: var(--bc-surface, #fff);
	border-radius: var(--bcfb-r-lg, 12px);
	box-shadow: var(--bcfb-shadow, 0 2px 10px rgba(0, 0, 0, .06));
	max-width: 440px;
	width: 100%;
	padding: 28px 24px 24px;
}
.bcfb-howto-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--bc-text-muted, #6B6B6B);
	cursor: pointer;
	padding: 4px;
}
.bcfb-howto-close:hover {
	color: var(--bc-text, #222);
}
.bcfb-howto-title {
	margin: 0 0 16px;
	font-size: 20px;
	color: var(--bc-text, #222);
}
.bcfb-howto-steps {
	margin: 0;
	padding-left: 20px;
	color: var(--bc-text, #222);
}
.bcfb-howto-steps li {
	margin-bottom: 10px;
	line-height: 1.5;
}
.bcfb-howto-steps li:last-child {
	margin-bottom: 0;
}