/* ==========================================================================
   Business Directory - Public styles (Phase 3)
   Mobile-first. Yelp-inspired hierarchy, Broward Bark coastal accent.
   Scoped under .bbd-page so the theme is never affected.
   ========================================================================== */

.bbd-page {
	/* v0.22.4 (Dave's cosmetic batch): the accent family moves from teal to
	   the site header's blue (#0D4E90). Soft = a whisper of the same blue for
	   box interiors; line = the matching soft border; dark = hover states. */
	--bbd-accent: #0d4e90;
	--bbd-accent-dark: #093a6c;
	--bbd-accent-soft: #eef4fb;
	--bbd-accent-line: #c5d7ec;
	--bbd-ink: #1e293b;
	--bbd-muted: #64748b;
	--bbd-line: #e2e8f0;
	--bbd-open: #15803d;
	--bbd-open-soft: #dcfce7;
	--bbd-closed: #b91c1c;
	--bbd-closed-soft: #fee2e2;
	--bbd-radius: 12px;

	max-width: 1200px; /* Hard site rule (Dave): nothing renders wider than 1200.
	   Since v0.13.3 every real page runs embedded inside the theme's own
	   containers (see single-listing.php); this base sizing is only the
	   fallback if .bbd-page ever renders outside them. */
	margin: 0 auto;
	padding: 16px;
	color: var(--bbd-ink);
	font-size: 16px;
	line-height: 1.6;
}
.bbd-page *, .bbd-page *::before, .bbd-page *::after { box-sizing: border-box; }
.bbd-page a { color: var(--bbd-accent); text-decoration: none; }
.bbd-page a:hover { text-decoration: underline; }
.bbd-muted { color: var(--bbd-muted); }

/* Inline SVG icons */
.bbd-page svg { width: 1em; height: 1em; vertical-align: -0.125em; }

/* ---- Chips & badges ---- */
.bbd-chip-cat {
	display: inline-block; background: var(--bbd-accent-soft); color: var(--bbd-accent-dark);
	/* v0.13.1 (Dave): corner radius matches the Business Info icon squares (8px). */
	border-radius: 8px; padding: 3px 12px; font-size: 13px; font-weight: 600;
}
a.bbd-chip-cat:hover { background: var(--bbd-accent); color: #fff; text-decoration: none; }
.bbd-chip-cat--primary { outline: 2px solid var(--bbd-accent); outline-offset: -1px; }

.bbd-open-badge {
	/* v0.13.2 (Dave): corners match the category pills / info icons (8px). */
	display: inline-block; border-radius: 8px; padding: 3px 12px;
	font-size: 13px; font-weight: 700;
}
.bbd-open-badge--open { background: var(--bbd-open-soft); color: var(--bbd-open); }
.bbd-open-badge--closed { background: var(--bbd-closed-soft); color: var(--bbd-closed); }

/* ==========================================================================
   Archive - card grid
   ========================================================================== */

.bbd-archive-header { margin: 8px 0 20px; }
.bbd-archive-title { margin: 0 0 4px; font-size: 28px; line-height: 1.2; }
.bbd-archive-count { margin: 0; color: var(--bbd-muted); }
.bbd-archive-desc { margin: 8px 0 0; color: var(--bbd-muted); }

.bbd-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .bbd-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .bbd-card-grid { grid-template-columns: repeat(3, 1fr); } }

.bbd-card-item {
	background: #fff; border: 1px solid var(--bbd-line); border-radius: var(--bbd-radius);
	overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.bbd-card-item:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1); transform: translateY(-2px); }

.bbd-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bbd-accent-soft); }
.bbd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bbd-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.bbd-card-title { margin: 0; font-size: 18px; line-height: 1.3; }
/* v0.22.4 (Dave): business names on archive/category cards in the header
   blue too (matches the single-page title); darker on hover for feedback. */
.bbd-card-title a { color: var(--bbd-accent); }
.bbd-card-title a:hover { color: #f59e0b; text-decoration: none; } /* v0.25.7 (C4, Dave 8/13): hover in the star-rating gold (.bbd-stars-fill uses the same #f59e0b) - was accent-dark. */

.bbd-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.bbd-card-city { color: var(--bbd-muted); display: inline-flex; align-items: center; gap: 4px; }
/* v0.23.15 (Dave): PURE BLACK (#000) - his standing rule for every
   section he asks to be "black" (card blurb here; the listing intro and
   claim banner carry the same rule). */
.bbd-card-excerpt { margin: 0; font-size: 14px; color: #000; }

/* Compact (photo-less) cards: tighter, accent edge so they look intentional */
.bbd-card-item--compact { border-left: 4px solid var(--bbd-accent); }
.bbd-card-item--compact .bbd-card-body { padding: 12px 14px 14px; }

/* In-card field rows */
.bbd-card-body .bbd-info-row { padding: 2px 0; font-size: 13px; }
.bbd-card-body .bbd-info-label { display: none; } /* Cards: value only, icon says it */

/* Pagination */
.bbd-pagination { margin: 24px 0 8px; text-align: center; }
.bbd-pagination .page-numbers {
	display: inline-block; padding: 8px 14px; margin: 0 3px;
	border: 1px solid var(--bbd-line); border-radius: 8px; color: var(--bbd-ink);
}
.bbd-pagination .page-numbers.current { background: var(--bbd-accent); border-color: var(--bbd-accent); color: #fff; }
.bbd-pagination a.page-numbers:hover { border-color: var(--bbd-accent); text-decoration: none; }

.bbd-archive-empty { text-align: center; padding: 48px 16px; color: var(--bbd-muted); }

/* ==========================================================================
   Single listing
   ========================================================================== */

/* Top block: photo + header. Mobile: stacked full-width.
   Desktop: side-by-side, edges aligned with the content below. */
.bbd-single-top {
	padding-bottom: 16px; border-bottom: 1px solid var(--bbd-line); margin-bottom: 20px;
}
@media (min-width: 860px) {
	.bbd-single-top--photo {
		display: grid; grid-template-columns: 420px 1fr;
		gap: 28px; align-items: start;
	}
}

.bbd-single-hero-media { border-radius: var(--bbd-radius); overflow: hidden; margin: 0 0 16px; }
@media (min-width: 860px) { .bbd-single-top--photo .bbd-single-hero-media { margin: 0; } }
.bbd-single-hero-media img {
	width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
/* v0.21.0 (item 1): "+N" more-photos badge on the hero, bottom-right, in the
   gallery collage overlay's dark-glass style. pointer-events:none lets the tap
   fall through to the hero link (opens the lightbox at photo #1). */
.bbd-gallery-hero-link { position: relative; }
.bbd-hero-photo-badge {
	position: absolute; right: 10px; bottom: 10px; z-index: 1;
	display: inline-flex; align-items: center; gap: 5px;
	background: rgba(15, 23, 42, 0.62); color: #fff;
	font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
	padding: 5px 11px; border-radius: 999px; pointer-events: none;
}
.bbd-hero-photo-badge svg { width: 15px; height: 15px; }

.bbd-single-header {
	display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 720px) {
	.bbd-single-header { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

.bbd-single-title { margin: 0 0 8px; font-size: 30px; line-height: 1.15; color: var(--bbd-accent); /* v0.22.4 (Dave): business name in the header blue #0D4E90. */ }
@media (min-width: 720px) { .bbd-single-title { font-size: 36px; } }

.bbd-single-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bbd-single-city { color: var(--bbd-muted); display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
/* v0.24.8.2 (cosmetics, Dave): more air above the excerpt (was 10px,
   sat right under the meta chip row) - applies to every listing, current
   and future, since it's the one shared rule. */
.bbd-single-intro { margin: 18px 0 0; color: #000; /* v0.22.4 (Dave): black, was muted gray. v0.23.15: PURE #000 per Dave's black rule. */ font-size: 17px; }

/* Two-column layout on desktop, stacked on mobile.
   v0.25.4 (Dave's cosmetic batch): the mobile order is now EXPLICIT.
   Was flex-direction: column-reverse (whole sidebar first). On phones the
   two wrappers dissolve (display: contents) so every block becomes a direct
   flex item with its own order:
     About, Get in touch, (Coupon), Business Info, Map, Hours, Photos,
     Reviews, Contact-us button.
   Desktop (min-width: 860px) keeps the exact same grid as before - none of
   the mobile rules below apply there. Fallback: a browser too old for
   display: contents shows the main column first, then the sidebar -
   readable, just not interleaved. */
.bbd-single-layout { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 860px) {
	.bbd-single-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
}
@media (max-width: 859.98px) {
	.bbd-single-main, .bbd-single-aside { display: contents; }
	/* Every block: overflow protection the dissolved wrappers used to
	   provide (min-width: 0), plus a safe default order (100) so any FUTURE
	   block lands at the end of the page, never silently on top. */
	.bbd-single-main > *, .bbd-single-aside > * { min-width: 0; order: 100; }
	.bbd-about          { order: 10; }
	.bbd-lead           { order: 20; }
	.bbd-coupon-block   { order: 30; } /* stays glued above Business Info */
	.bbd-info-card      { order: 40; }
	.bbd-map            { order: 50; }
	.bbd-hours-section  { order: 60; }
	.bbd-gallery        { order: 70; }
	.bbd-reviews        { order: 80; }
	.bbd-lead-bottom    { order: 90; }
	/* The layout gap (20px) now separates EVERY block, so the per-block
	   bottom margins that used to do that job would double up - zero them
	   on phones only. (.bbd-lead-bottom keeps its own margins: the gap does
	   not apply after the last item, and its bottom margin spaces the claim
	   banner / footer exactly as before.) */
	.bbd-single-main > .bbd-section { margin-bottom: 0; }
	.bbd-lead { margin-bottom: 0; }
	.bbd-coupon-block { margin-bottom: 0; }
	.bbd-map { margin-top: 0; }
}

.bbd-section { margin: 0 0 26px; }
.bbd-section-title {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 12px; font-size: 21px;
	padding-bottom: 8px; border-bottom: 2px solid var(--bbd-accent-soft);
	/* v0.24.8.2 (cosmetics, Dave): bold + pure black - was inheriting the
	   theme's lighter h2 weight/color (About, Photos, Hours, Reviews all
	   share this one class, so one rule covers all four). */
	font-weight: 700; color: #000;
}
.bbd-section-title svg { color: var(--bbd-accent); }

.bbd-single-content { font-size: 16px; }
.bbd-single-content p { margin: 0 0 1em; }

/* Social links row (v0.15.0) - deliberately subtle, centered under About. */
.bbd-social-row {
	display: flex; justify-content: center; align-items: center;
	gap: 18px; margin-top: 18px; font-size: 20px; line-height: 1;
}
.bbd-single-content + .bbd-social-row { padding-top: 4px; }
.bbd-social-link {
	color: var(--bbd-muted); display: inline-flex; padding: 4px;
	transition: color 0.15s ease; text-decoration: none; border-bottom: 0;
}
.bbd-social-link:hover, .bbd-social-link:focus { color: var(--bbd-accent); }

/* Info card (sidebar) */
.bbd-info-card {
	background: #fff; border: 1px solid var(--bbd-line); border-radius: var(--bbd-radius);
	padding: 18px 18px 10px;
}
@media (min-width: 860px) { .bbd-info-card { position: sticky; top: 24px; } }
/* v0.24.8.2 (cosmetics, Dave): bold + pure black, same reasoning as
   .bbd-section-title - "Business Info" is the sidebar's own heading
   class. */
.bbd-info-card-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #000; }

.bbd-info-row {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 9px 0; border-bottom: 1px solid var(--bbd-line);
}
.bbd-info-card .bbd-info-row:last-child { border-bottom: 0; }
.bbd-info-icon {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
	background: var(--bbd-accent-soft); color: var(--bbd-accent);
	display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.bbd-info-body { display: flex; flex-direction: column; min-width: 0; }
.bbd-info-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--bbd-muted); }
.bbd-info-value { font-size: 15px; word-break: break-word; }

/* Hours table */
.bbd-hours { width: 100%; max-width: 420px; border-collapse: collapse; }
.bbd-hours th, .bbd-hours td { text-align: left; padding: 7px 10px; font-size: 15px; border: 0; }
.bbd-hours th { font-weight: 600; width: 42%; }
.bbd-hours tr:nth-child(odd) { background: #f8fafc; }
.bbd-hours .bbd-hours-today th, .bbd-hours .bbd-hours-today td {
	background: var(--bbd-accent-soft); font-weight: 700; color: var(--bbd-accent-dark);
}
.bbd-hours-closed-text { color: var(--bbd-closed); font-weight: 600; }
.bbd-hours-note-text { margin: 10px 0 0; font-size: 14px; color: var(--bbd-muted); font-style: italic; }

/* Share */
.bbd-share { position: relative; }
.bbd-share-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff; border: 1px solid var(--bbd-line); border-radius: 999px;
	padding: 9px 18px; font-size: 14px; font-weight: 600; color: var(--bbd-ink);
	cursor: pointer; transition: border-color 0.15s ease;
}
/* v0.23.11 (Dave): the hover BACKGROUND is pinned to the soft light blue.
   The base rule never set a hover background, so the theme's own dark
   button:hover bled through - "very dark" on mouseover. */
.bbd-share-toggle:hover { background: var(--bbd-accent-soft); border-color: var(--bbd-accent); color: var(--bbd-accent); }
.bbd-share-menu[hidden] { display: none !important; } /* hidden must beat display:flex */
.bbd-share-menu {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
	background: #fff; border: 1px solid var(--bbd-line); border-radius: 12px;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
	padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 170px;
}
.bbd-share-btn {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 12px; border-radius: 8px; border: 0; background: none;
	font-size: 14px; font-weight: 600; color: var(--bbd-ink); text-align: left; cursor: pointer;
}
.bbd-share-btn:hover { background: var(--bbd-accent-soft); color: var(--bbd-accent-dark); text-decoration: none; }
.bbd-share-btn--copy.bbd-copied { background: var(--bbd-open-soft); color: var(--bbd-open); }

/* Keyboard focus */
.bbd-page a:focus-visible, .bbd-page button:focus-visible {
	outline: 2px solid var(--bbd-accent); outline-offset: 2px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bbd-card-item, .bbd-card-item:hover { transition: none; transform: none; }
}

/* ==========================================================================
   Search (Chunk B)
   ========================================================================== */

/* ---- Hero search: Yelp-style white pill ---- */
.bbd-hero-search { max-width: 720px; margin: 0 auto; }
.bbd-hero-search-bar {
	display: flex; align-items: stretch; background: #fff;
	border-radius: 12px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15);
	overflow: hidden; border: 1px solid #e2e8f0;
}
.bbd-hero-field { display: flex; align-items: center; gap: 8px; padding: 6px 16px; flex: 1; min-width: 0; }
.bbd-hero-field--near { flex: 0 0 38%; }
/* v0.24.8.4 (round 2, Dave): "Find"/"Near" now match the input text
   exactly - 14px was smaller than the 17px input, so the two sat on
   different line-heights within the same flex row even with
   align-items: center. Same font-size + line-height: 1 as the input
   below, so both children now use identical box metrics. */
.bbd-hero-label { font-weight: 700; font-size: 17px; line-height: 1; color: #1e293b; }
/* v0.24.8.5 (round 2, Dave): the Find input's typed/placeholder text
   nudged right about one space, so the gray (autofill/typeahead)
   shows a sliver on the left before the text starts. Scoped to the
   Find input only - the Near select is untouched. */
.bbd-hero-field--find input { padding-left: 6px; }
.bbd-hero-field input, .bbd-hero-field select {
	/* v0.24.8.3 (cosmetics, Dave): font size up one (16px -> 17px, same
	   step used elsewhere in the plugin), one shared rule so it applies
	   on both desktop and mobile - there was never a separate mobile
	   override. line-height: 1 + equal top/bottom padding true-centers
	   the text/placeholder in the pill instead of sitting a hair low. */
	border: 0; outline: 0; background: none; width: 100%;
	font-size: 17px; line-height: 1; padding: 12px 0; color: #1e293b;
}
.bbd-hero-divider { width: 1px; background: #e2e8f0; margin: 10px 0; }
.bbd-hero-submit {
	flex: 0 0 60px; border: 0; cursor: pointer;
	background: #0d4e90; color: #fff; display: flex; align-items: center; justify-content: center;
	transition: background 0.15s ease;
}
.bbd-hero-submit:hover { background: #093a6c; }
.bbd-hero-submit svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
	.bbd-hero-search-bar { flex-direction: column; border-radius: 14px; }
	.bbd-hero-divider { width: auto; height: 1px; margin: 0 16px; }
	.bbd-hero-field--near { flex: 1; }
	.bbd-hero-submit { flex: 0 0 auto; padding: 13px; }
}

/* ---- Compact bar + advanced panel ---- */
.bbd-compact-search { margin: 0 0 20px; }
.bbd-compact-bar { display: flex; gap: 8px; align-items: stretch; }
.bbd-compact-bar input[type="text"] {
	flex: 1; min-width: 0; border: 1px solid var(--bbd-line, #e2e8f0); border-radius: 10px;
	/* v0.25.11 (the zoom, root-caused for real): this was the ONLY editable
	   control family in the plugin coded UNDER iOS's 16px legibility floor
	   at its BASE size (15px). The two controls proven immune on Dave's own
	   phone - the homepage hero pill (17px, v0.24.8.3) and the wizard
	   fields - are legible-size at EVERY width, not just inside a media
	   query. Media-gated overrides leave failure modes open (any context
	   where the query misses, plus 16-exactly sitting right ON the
	   threshold where a stray percent of pre-scale tips it under). Same
	   treatment as the hero now: 17px unconditionally. */
	padding: 11px 14px; font-size: 17px;
}
.bbd-compact-bar input[type="text"]:focus { outline: 2px solid var(--bbd-accent, #0d4e90); border-color: transparent; }
/* v0.25.12 (Dave, 8/13: "the blue border left side gets cut off by
   probably 3 pixels"): the SAME defect the wizard had in v0.24.3 ("a few
   pixels get cut off the edge") with the SAME cause - the focus ring
   paints 2px OUTSIDE the box, the field sits flush with the container
   edge on mobile, and the overflow-x clip slices the ring. Same fix as
   the wizard (lines ~1544-1546): draw the ring inward on mobile. Desktop
   (>950px) keeps the outside ring - there is room for it there. */
@media (max-width: 950px) {
	.bbd-compact-bar input[type="text"]:focus { outline-offset: -2px; }
}
/* v0.25.13 (G, reviewer finding from the v0.25.12 round): the KEYBOARD focus
   ring (:focus-visible) on the Fetch button and the filter toggle sliced at
   the RIGHT clipped edge on mobile - the mirror image of the v0.25.12 input
   fix, keyboard-only (taps never show focus-visible). Rings drawn INWARD at
   <=950px, and the Fetch button's ring is WHITE, because the generic
   accent-blue ring drawn inside the accent-blue button would be invisible
   (the blue-on-blue trap the queue note warned about). The toggle is white,
   so the accent ring stays. Desktop >950px keeps the outside rings - there
   is room for them there. */
@media (max-width: 950px) {
	.bbd-page .bbd-compact-submit:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
	.bbd-page .bbd-adv-toggle:focus-visible { outline: 2px solid var(--bbd-accent, #0d4e90); outline-offset: -4px; }
}
.bbd-compact-submit {
	border: 0; background: var(--bbd-accent, #0d4e90); color: #fff; font-weight: 700;
	border-radius: 10px; padding: 0 18px; cursor: pointer; font-size: 14px; white-space: nowrap;
}
.bbd-compact-submit:hover { background: var(--bbd-accent-dark, #093a6c); }
.bbd-adv-toggle {
	border: 1px solid var(--bbd-line, #e2e8f0); background: #fff; border-radius: 10px;
	width: 46px; cursor: pointer; color: var(--bbd-accent, #0d4e90);
	display: flex; align-items: center; justify-content: center;
}
.bbd-adv-toggle:hover, .bbd-adv-toggle[aria-expanded="true"] { border-color: var(--bbd-accent, #0d4e90); background: var(--bbd-accent-soft, #eef4fb); }
.bbd-adv-toggle svg { width: 20px; height: 20px; }

.bbd-adv-panel {
	display: grid; grid-template-columns: 1fr; gap: 12px;
	background: #f8fafc; border: 1px solid var(--bbd-line, #e2e8f0); border-radius: 10px;
	padding: 14px; margin-top: 10px;
}
@media (min-width: 640px) { .bbd-adv-panel { grid-template-columns: repeat(3, 1fr); } }
.bbd-adv-panel label span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--bbd-muted, #64748b); text-transform: uppercase; letter-spacing: 0.4px; }
.bbd-adv-panel select, .bbd-adv-panel input {
	/* v0.25.11: 15px -> 17px, same reasoning as the compact-bar input
	   above - legible-size at the BASE, every width, like the hero pill. */
	width: 100%; border: 1px solid var(--bbd-line, #e2e8f0); border-radius: 8px; padding: 9px 10px; font-size: 17px; background: #fff;
}

/* v0.25.7 (C4) / REWORKED v0.25.8: iOS Safari AUTO-ZOOMS when a focused
   control's font is under 16px, and the page stays zoomed until a pinch
   resets it. The v0.25.7 rule was written at MINIMUM specificity (0,1,1)
   and lost the cascade to theme rules on the live site - the v0.24.2
   wizard fix survives precisely because its selectors are armor-plated.
   Same treatment now: ancestor-scoped selectors, !important as the final
   word (this is a device-behavior requirement, not a style preference),
   and the gate widened to 950px so LANDSCAPE phones are covered too (the
   accepted v0.25.7 F4 gap). overflow-x: clip is the wizard's
   belt-and-braces page lock against the pull-left-and-right state. */
@media (max-width: 950px) {
	/* v0.25.11: the BASE rules above are now 17px at every width (the real
	   fix - see the compact-bar comment). This armored block stays as the
	   last line of defense against theme/optimizer cascade surprises, and
	   moves 16 -> 17 to match: 16-exactly sits ON the iOS threshold, where
	   any residual pre-scale (a few px of document overflow) renders it a
	   hair under and the tap zooms anyway. 17 keeps a margin. */
	.bbd-page .bbd-compact-bar input[type="text"],
	.bbd-page .bbd-adv-panel select,
	.bbd-page .bbd-adv-panel input { font-size: 17px !important; }
	.bbd-page--embedded { overflow-x: clip; }
}
.bbd-results-count { color: var(--bbd-muted, #64748b); margin: 0 0 14px; }

/* ---- Category menu strip ---- */
.bbd-cat-menu {
	display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
	padding: 8px 4px; scrollbar-width: none;
}
.bbd-cat-menu::-webkit-scrollbar { display: none; }
.bbd-cat-menu a {
	white-space: nowrap; padding: 8px 16px; border-radius: 999px;
	font-size: 14px; font-weight: 600; color: #1e293b; text-decoration: none;
	border: 1px solid transparent;
}
.bbd-cat-menu a:hover { background: #eef4fb; color: #093a6c; border-color: #0d4e90; text-decoration: none; }

/* Embedded mode: content rendered inside the theme's own container
   (shortcode pages like Fetched). The theme's padding is the only padding -
   ours zeroes out so edges match every other page on the site exactly. */
.bbd-page--embedded { padding: 16px 0; max-width: none; } /* v0.13.2: vertical stays 16px as before the 40px change - /fetched/ must not shift. */

/* ==========================================================================
   Chunk C: breadcrumbs + map
   ========================================================================== */

.bbd-breadcrumbs {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	font-size: 13px; margin: 0 0 14px; color: var(--bbd-muted, #64748b);
}
.bbd-breadcrumbs a { color: var(--bbd-muted, #64748b); }
.bbd-breadcrumbs a:hover { color: var(--bbd-accent, #0d4e90); }
.bbd-breadcrumbs [aria-current="page"] { color: var(--bbd-ink, #1e293b); font-weight: 600; }
.bbd-crumb-sep { color: #cbd5e1; }

.bbd-map {
	margin-top: 16px; border: 1px solid var(--bbd-line, #e2e8f0);
	border-radius: var(--bbd-radius, 12px); overflow: hidden; background: #fff;
}
.bbd-map iframe { display: block; width: 100%; height: 260px; border: 0; }
.bbd-map-directions {
	display: block; text-align: center; padding: 11px;
	font-weight: 700; font-size: 14px; border-top: 1px solid var(--bbd-line, #e2e8f0);
}
.bbd-map-directions:hover { background: var(--bbd-accent-soft, #eef4fb); text-decoration: none; }

/* ==========================================================================
   Phase 4A: login card
   ========================================================================== */

.bbd-login-card {
	max-width: 440px; margin: 0 auto; background: #fff;
	border: 1px solid #e2e8f0; border-radius: 14px;
	padding: 28px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
.bbd-login-title { margin: 0 0 6px; font-size: 22px; color: #1e293b; }
.bbd-login-sub { margin: 0 0 18px; color: #64748b; font-size: 15px; }
.bbd-login-form { display: flex; flex-direction: column; gap: 12px; }
.bbd-login-form input[type="email"] {
	border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; font-size: 16px;
}
.bbd-login-form input[type="email"]:focus { outline: 2px solid #0d4e90; border-color: transparent; }
.bbd-login-btn {
	display: inline-flex; align-items: center; justify-content: center;
	background: #0d4e90; color: #fff; border: 0; border-radius: 10px;
	padding: 13px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
	text-decoration: none; transition: background 0.15s ease;
}
.bbd-login-btn:hover { background: #093a6c; color: #fff; text-decoration: none; }
.bbd-login-btn--ghost { background: #fff; color: #0d4e90; border: 1px solid #0d4e90; }
.bbd-login-btn--ghost:hover { background: #eef4fb; color: #093a6c; }
.bbd-login-hello { font-size: 16px; margin: 0 0 14px; }
.bbd-login-sent h3 { margin: 0 0 8px; }
.bbd-login-sent p { color: #475569; margin: 0 0 8px; }
.bbd-login-fineprint { font-size: 13px; color: #94a3b8; }
/* v0.24.8.1 (cosmetics): "thanks - your business is under review" only,
   ~20% wider (440px -> 528px) - desktop only per Dave's request; mobile
   is a follow-up once he has looked at it there. */
@media (min-width: 641px) {
	.bbd-login-card--wide { max-width: 528px; }
}
.bbd-login-error {
	background: #fee2e2; color: #b91c1c; border-radius: 10px;
	padding: 12px 14px; font-size: 14px; margin-bottom: 16px;
}
.bbd-login-error p { margin: 0; }
.bbd-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

/* ============================== Claim a listing (Phase 4B-1) */
/* v0.22.4 (Dave): the banner now sits at the FAR BOTTOM of the listing page
   (under all business info) and goes quiet - light gray box, black text.
   The button keeps the accent blue so the action still reads as a button. */
.bbd-claim-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap;
	background: #f1f5f9; border: 1px solid #dbe1e8; border-left: 4px solid #94a3b8;
	border-radius: 10px; padding: 14px 18px; margin: 24px 0 8px;
}
.bbd-claim-banner-text { display: flex; flex-direction: column; gap: 2px; }
/* v0.23.15: PURE #000 per Dave's black rule (was #111111). */
.bbd-claim-banner-text strong { color: #000; font-size: 16px; }
.bbd-claim-banner-text span { color: #000; font-size: 14px; }
.bbd-claim-banner-btn {
	background: #0d4e90; color: #fff; border-radius: 8px; padding: 10px 18px;
	font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.bbd-claim-banner-btn:hover { background: #093a6c; color: #fff; text-decoration: none; }
.bbd-claim-card .bbd-claim-label {
	display: block; font-weight: 600; font-size: 14px; color: #334155; margin-bottom: 12px;
}
.bbd-claim-card .bbd-claim-label input {
	display: block; width: 100%; margin-top: 4px; font-weight: 400;
}
@media (max-width: 600px) {
	.bbd-claim-banner { flex-direction: column; align-items: stretch; text-align: center; }
}
.bbd-claim-banner-btn:visited { color: #fff; } /* GP a:visited outranked the class - button text was invisible. */
.bbd-claim-banner-btn:focus { color: #fff; }
.bbd-claim-card .bbd-claim-note {
	display: block; font-weight: 400; font-size: 12.5px; color: #64748b; margin-top: 4px; line-height: 1.4;
}

/* ============================= Owner dashboard (4B-2) ==================== */
.bbd-dash { max-width: 760px; margin: 0 auto; }
.bbd-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bbd-dash-title { margin: 0; font-size: 24px; color: #1e293b; }
.bbd-dash-logout { padding: 8px 16px !important; font-size: 14px !important; }
.bbd-dash-flash { margin-bottom: 18px; border-radius: 10px; padding: 14px 16px; }
.bbd-dash-flash p { margin: 0; }
.bbd-dash-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.bbd-dash-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.bbd-dash-card-top { display: flex; gap: 14px; align-items: center; }
.bbd-dash-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.bbd-dash-card-title { margin: 0 0 6px; font-size: 18px; color: #1e293b; }
.bbd-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-right: 6px; }
.bbd-chip--live { background: #dcfce7; color: #166534; }
.bbd-chip--review { background: #fef3c7; color: #92400e; }
.bbd-chip--off { background: #e2e8f0; color: #475569; }
.bbd-dash-card-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.bbd-dash-link { color: #0d4e90; font-size: 14px; text-decoration: underline; }
.bbd-dash-edit-btn { padding: 9px 18px !important; font-size: 14px !important; }
.bbd-dash-form-card { max-width: none; }
.bbd-dash-form .bbd-claim-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: #334155; font-size: 14px; }
/* v0.23.12 (Dave): radios excluded - the blanket width:100% was
   stretching the "Make main photo" / "keep current" radios full width,
   detaching the dot from its label. */
.bbd-dash-form .bbd-claim-label input:not([type="checkbox"]):not([type="file"]):not([type="radio"]),
.bbd-dash-form .bbd-claim-label select,
.bbd-dash-form .bbd-claim-label textarea {
	padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; font-weight: 400; width: 100%; box-sizing: border-box;
}
.bbd-dash-form .bbd-claim-label textarea { resize: vertical; }
.bbd-dash-check { font-weight: 400; }
.bbd-dash-pending-note { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #78350f; margin-bottom: 16px; }
.bbd-dash-photo-preview { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.bbd-dash-photo-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.bbd-dash-hours { display: flex; flex-direction: column; gap: 8px; font-weight: 400; }
.bbd-dash-hours-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.bbd-dash-hours-day { width: 82px; font-weight: 600; color: #334155; }
/* v0.23.18 (Dave 7/27): font-family/size were never set here, so time
   inputs fell back to the BROWSER's own time-widget font (monospace on
   some platforms, oversized on Dave's staging theme) - and the unpinned
   intrinsic width let the flex-wrapped row jitter a few px on focus/
   blur. Pinning the font stabilizes both. Reach: the wizard everywhere,
   and the desktop dashboard font-family (its 14px size was already set
   by the 0.23.17 compact override below; the MOBILE dashboard's blanket
   15px width rule still out-specifies this - unchanged there on
   purpose). No line-height on purpose - it would nudge the 0.23.17
   compact row height. */
/* v0.23.19 (F1b, Dave's staging retest): a time input's intrinsic width
   comes from its CONTENT - empty "--:-- --" and filled "09:00 AM" differ
   by ~6px, so toggling Closed (which clears/restores times) nudged the
   row. Fixed em width ends the bump on every platform; em scales with
   the pinned 14px font. Mobile keeps full-width (later rules win). */
.bbd-dash-hours-row input[type="time"] { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; font-size: 14px; width: 8.6em; box-sizing: border-box; }
.bbd-dash-hours-closed { font-size: 13px; color: #64748b; }
@media (max-width: 560px) {
	.bbd-dash-head { flex-direction: column; align-items: flex-start; }
}
/* v0.23.12 (Dave): the dashboard hours grid now matches the wizard.
   The dashboard markup carries the same top/times wrappers as the Add
   wizard (v0.23.6), so desktop collapses to the compact one-liner
   "Monday [open] to [close]  Closed" (display:contents + the Closed
   label ordered last), and mobile stacks "Monday  [x] Closed" with the
   full-width time boxes underneath - the locked wizard pattern. */
@media (min-width: 641px) {
	/* v0.23.17 (sweep): the 0.23.12 selector was DEAD - adding
	   :not([type="radio"]) to the blanket width rule raised it to
	   (0,5,1), outranking the old (0,4,1) override, so the compact
	   one-liner never actually rendered. Now (0,5,1) + later in file. */
	.bbd-dash-form .bbd-claim-label .bbd-dash-hours-row .bbd-add-hours-times input[type="time"] {
		/* v0.23.19 (F1b): was width:auto - content-driven width bumped the
		   row a few px when Closed toggles cleared/restored times. Same
		   fixed em width as the base rule (slightly wider padding here). */
		width: 8.9em; padding: 8px 10px; font-size: 14px;
	}
	.bbd-dash-form .bbd-dash-hours-closed { order: 9; }
}
@media (max-width: 640px) {
	.bbd-dash-form .bbd-dash-hours-day { width: auto; }
}

/* v0.8.3: submit-button saving state */
.bbd-btn-saving { opacity: .85; cursor: default; pointer-events: none; }
.bbd-spinner {
	display: inline-block; width: 14px; height: 14px; margin-right: 8px;
	border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
	border-radius: 50%; vertical-align: -2px;
	animation: bbd-spin .7s linear infinite;
}
@keyframes bbd-spin { to { transform: rotate(360deg); } }

/* v0.13.1 (Dave): claim-button text was invisible until hover on the live theme
   AGAIN (0.7.1 fixed :visited; another GP link state still outranked us).
   Belt and suspenders: every state, doubled specificity, !important. */
.bbd-claim-banner a.bbd-claim-banner-btn,
.bbd-claim-banner a.bbd-claim-banner-btn:link,
.bbd-claim-banner a.bbd-claim-banner-btn:visited,
.bbd-claim-banner a.bbd-claim-banner-btn:hover,
.bbd-claim-banner a.bbd-claim-banner-btn:focus,
.bbd-claim-banner a.bbd-claim-banner-btn:active {
	color: #fff !important;
	/* v0.23.16 (Dave): no underline in any state either - the theme's
	   a:hover underline outranked the plain rule (the bottom-CTA lesson). */
	text-decoration: none !important;
}

/* ==========================================================================
   Reviews & ratings (Phase 5, v0.16.0)
   ========================================================================== */

/* ---- Read-only stars: two stacked rows, the gold row clipped to avg/5 ---- */
.bbd-stars {
	position: relative; display: inline-block; line-height: 1;
	font-size: 17px; vertical-align: -0.125em;
}
.bbd-stars-bg, .bbd-stars-fill { white-space: nowrap; display: block; }
.bbd-stars-bg { color: #cbd5e1; }
.bbd-stars-fill {
	position: absolute; top: 0; left: 0; overflow: hidden;
	color: #f59e0b;
}
/* The stars must keep their own gray/gold even inside contexts that color
   svgs (e.g. .bbd-section-title svg -> accent), or the fractional average
   reads as five identical stars. This rule sits later in the file, so it
   wins the equal-specificity fight against those context rules. */
.bbd-stars svg { width: 1em; height: 1em; vertical-align: top; color: inherit; }

/* ---- Compact badge (listing header + archive cards) ---- */
.bbd-review-badge {
	display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
	color: var(--bbd-muted, #64748b);
}
a.bbd-review-badge:hover { text-decoration: none; }
a.bbd-review-badge:hover .bbd-review-badge-text { text-decoration: underline; }
.bbd-review-badge-text { font-weight: 600; }

/* ---- The reviews section ---- */
.bbd-reviews-avg {
	display: inline-flex; align-items: center; gap: 8px; margin-left: 10px;
	font-size: 15px; font-weight: 400; color: var(--bbd-muted, #64748b);
}
.bbd-reviews-empty { color: var(--bbd-muted, #64748b); }

/* v0.18.3: Newest/Oldest sort - one compact right-aligned row, ships with
   the hidden attribute until the JS reveals it. */
.bbd-reviews-sort {
	display: flex; justify-content: flex-end; align-items: center; gap: 6px;
	margin: 0 0 6px; font-size: 13px; color: var(--bbd-muted, #64748b);
}
.bbd-reviews-sort[hidden] { display: none; }
.bbd-reviews-sort select {
	font: inherit; font-size: 13px; padding: 3px 24px 3px 8px;
	border: 1px solid var(--bbd-line, #e2e8f0); border-radius: 6px;
	background: #fff; color: var(--bbd-ink, #0f172a); max-width: 160px;
}

.bbd-review {
	border-top: 1px solid var(--bbd-line, #e2e8f0);
	padding: 16px 0 14px;
}
/* v0.25.4 (Dave): a listing with exactly ONE review showed two stacked
   lines - the heading's underline plus the first review's separator, with
   nothing between them (the Sort row only renders when there are 2+
   reviews). The first review now drops its top line UNLESS the Sort row is
   actually visible above it (multi-review look: unchanged). Zero-review
   listings never had a review node, so they are untouched either way. */
.bbd-reviews-list > .bbd-review:first-child { border-top: 0; padding-top: 4px; }
.bbd-reviews-sort:not([hidden]) + .bbd-reviews-list > .bbd-review:first-child {
	border-top: 1px solid var(--bbd-line, #e2e8f0);
	padding-top: 16px;
}
.bbd-review-head {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-bottom: 6px;
}
.bbd-review-name { font-weight: 700; }
.bbd-review-date { color: var(--bbd-muted, #64748b); font-size: 13px; }
.bbd-review-text { font-size: 15px; }

/* Owner's public reply */
.bbd-review-reply {
	margin: 10px 0 0 14px; padding: 10px 14px;
	background: var(--bbd-accent-soft, #eef4fb);
	border-left: 3px solid var(--bbd-accent, #0d4e90);
	border-radius: 0 8px 8px 0; font-size: 14px;
}
.bbd-review-reply-label {
	display: block; font-weight: 700; color: var(--bbd-accent-dark, #093a6c);
	margin-bottom: 4px; font-size: 13px;
}

/* Owner tools (reply / report) - only the listing's owner sees these */
.bbd-review-owner-tools { margin-top: 10px; font-size: 14px; }
.bbd-review-owner-note {
	margin: 6px 0; padding: 6px 10px; background: #fef9c3; border-radius: 6px;
	color: #854d0e; font-size: 13px; display: inline-block;
}
.bbd-review-owner-box { margin: 6px 0; }
.bbd-review-owner-box summary {
	cursor: pointer; color: var(--bbd-accent, #0d4e90); font-weight: 600;
}
.bbd-review-owner-form { margin: 8px 0 4px; max-width: 560px; }
.bbd-review-owner-form textarea {
	width: 100%; border: 1px solid var(--bbd-line, #e2e8f0); border-radius: 8px;
	padding: 8px 10px; font: inherit; font-size: 14px;
}
.bbd-review-owner-form .bbd-login-btn {
	margin-top: 6px; font-size: 14px; padding: 8px 16px;
}

/* Status notice after a redirect back */
/* v0.22.4 (Dave): the box had almost no padding of its own and let the
   theme's paragraph bottom-margin show through - which read as an extra
   blank line under the last line of text. Real padding, zeroed p margins. */
.bbd-review-notice { border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.bbd-review-notice p { margin: 0; }
/* v0.24.8.1 (cosmetics, Dave): text black instead of green - shared by
   the review-thanks notice and the lead-form success notice (both use
   the same --ok modifier); background stays the same soft green. */
.bbd-review-notice--ok { background: var(--bbd-open-soft, #dcfce7); color: #000; }
.bbd-review-notice--err { background: var(--bbd-closed-soft, #fee2e2); color: var(--bbd-closed, #b91c1c); }

/* ---- Write-a-review form ---- */
.bbd-review-form-wrap {
	margin-top: 18px; padding: 18px; background: #f8fafc;
	border: 1px solid var(--bbd-line, #e2e8f0); border-radius: var(--bbd-radius, 12px);
}
.bbd-review-form-title { margin: 0 0 12px; font-size: 18px; }
.bbd-review-form { display: grid; gap: 12px; }
.bbd-review-label { display: block; font-weight: 600; font-size: 14px; }
.bbd-review-form input[type="text"],
.bbd-review-form input[type="email"],
.bbd-review-form textarea {
	width: 100%; margin-top: 4px; border: 1px solid var(--bbd-line, #e2e8f0);
	border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 15px; background: #fff;
}
.bbd-review-note { display: block; font-weight: 400; font-size: 12.5px; color: var(--bbd-muted, #64748b); margin-top: 3px; }
.bbd-review-form-cols { display: grid; gap: 12px; }
@media (min-width: 640px) {
	.bbd-review-form-cols { grid-template-columns: 1fr 1fr; }
}
.bbd-review-submit { justify-self: start; }

/* Star input: radios + labels in reverse DOM order, flipped back by
   row-reverse - "checked colors everything after it in the DOM" then means
   "the chosen star and every star to its left". Pure CSS, no JS. */
.bbd-star-input-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bbd-star-input { display: inline-flex; flex-direction: row-reverse; }
.bbd-star-input input {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.bbd-star-input label {
	cursor: pointer; color: #cbd5e1; font-size: 30px; line-height: 1;
	padding: 0 2px; transition: color .1s ease, transform .1s ease;
}
.bbd-star-input label svg { width: 1em; height: 1em; vertical-align: top; }
.bbd-star-input label:hover { transform: scale(1.12); }
.bbd-star-input input:checked ~ label,
.bbd-star-input label:hover,
.bbd-star-input label:hover ~ label { color: #f59e0b; }
.bbd-star-input:focus-within { outline: 2px solid var(--bbd-accent, #0d4e90); outline-offset: 3px; border-radius: 6px; }

/* ==========================================================================
   Phase 6 (v0.17.0) - Coupons
   ========================================================================== */

/* Small badge in the listing header + archive/search card meta (behind the
   site-wide toggle). Default look = "Variant A" (Dave picked from mockups);
   the label text is editable under Settings > Text & prompts. */
.bbd-coupon-badge {
	display: inline-block; border-radius: 8px; padding: 2px 11px;
	font-size: 13px; font-weight: 700;
	/* v0.23.14 (Dave): green, matching the coupon card. The DASHED border
	   is deliberate - it echoes the coupon box, so the pill doesn't read
	   as a twin of the same-green "Open Now" badge beside it. */
	background: var(--bbd-open-soft); color: var(--bbd-open);
	border: 1px dashed var(--bbd-open);
}
.bbd-coupon-badge svg { margin-right: 2px; }

/* Phase 6 step 4 (v0.20.0) - Featured tag on archive/search cards ONLY
   (no listing-page badge, no highlighted card style - locked spec).
   Same geometry as the coupon badge; violet, deliberately distinct from
   the coupon amber, the open/closed green-red, and the category cyan. */
.bbd-featured-tag {
	display: inline-block; border-radius: 8px; padding: 3px 12px;
	font-size: 13px; font-weight: 700;
	background: #ede9fe; color: #5b21b6;
}
.bbd-featured-tag svg { margin-right: 2px; }

/* The offer card in the listing sidebar (renders via field_row).
   v0.19.0 (Dave 7/15, color coding): coupon interior goes LIGHT GREEN
   (money), keeping its dashed coupon-style border - the new light-BLUE
   lead block next to it has the solid border. */
.bbd-coupon-card {
	border: 1px dashed var(--bbd-open); border-radius: var(--bbd-radius);
	background: var(--bbd-open-soft); padding: 14px 16px; margin: 12px 0;
}
/* v0.23.13 (Dave): the coupon's OWN sidebar block (no longer nested in
   the Business Info card) - the card fills the block, text gains the
   width the info card's padding used to eat. */
.bbd-coupon-block { margin: 0 0 16px; }
.bbd-coupon-block .bbd-coupon-card { margin: 0; }
.bbd-coupon-card-label {
	/* v0.24.8.3 (cosmetics, Dave): icon + "COUPON" up one size (the icon
	   is 1em via .bbd-page svg, so it scales with the label's font-size -
	   one change moves both). */
	display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
	text-transform: uppercase; color: var(--bbd-open); margin-bottom: 4px;
}
.bbd-coupon-card-label svg { margin-right: 3px; }
.bbd-coupon-text { margin: 0 0 8px; font-weight: 600; color: var(--bbd-ink); }
.bbd-coupon-code {
	display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
	background: #fff; border: 1px solid var(--bbd-open); border-radius: 6px;
	color: var(--bbd-open); padding: 3px 10px; margin-right: 10px;
}
/* v0.21.0 (item 3): code pill + "Valid through:" (label over date) on one row,
   vertically centered. flex gap handles the spacing, so the pill's own
   margin-right is zeroed here; wraps in a tight sidebar. */
.bbd-coupon-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.bbd-coupon-meta .bbd-coupon-code { margin-right: 0; }
.bbd-coupon-expires { font-size: 12.5px; color: var(--bbd-muted); line-height: 1.3; }
.bbd-coupon-valid-label { display: block; font-weight: 600; }
.bbd-coupon-valid-date { display: block; font-weight: 700; color: var(--bbd-ink); }

/* Owner dashboard coupon inputs (shared markup with the admin metabox). */
.bbd-coupon-grid { display: flex; flex-direction: column; gap: 10px; font-weight: 400; }
.bbd-coupon-part label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 3px; }
.bbd-coupon-part input[type="date"] { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }

/* ==========================================================================
   Phase 6 step 2 (v0.18.0) - Photo galleries
   ========================================================================== */

/* ---- Listing page: the Photos section grid ---- */
.bbd-gallery-count { font-size: 15px; font-weight: 400; color: var(--bbd-muted, #64748b); }
.bbd-gallery-grid {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
@media (min-width: 640px) {
	.bbd-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.bbd-gallery-item {
	display: block; aspect-ratio: 4 / 3; overflow: hidden;
	border-radius: 8px; background: var(--bbd-accent-soft, #eef4fb);
	cursor: zoom-in;
}
.bbd-gallery-item img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.15s ease;
}
.bbd-gallery-item:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.bbd-gallery-item img, .bbd-gallery-item:hover img { transition: none; transform: none; }
}

/* The hero photo is lightbox item #1 - hint that it opens. */
.bbd-gallery-hero-link { display: block; cursor: zoom-in; }
/* v0.23.16 (Dave): the gallery tiles' hover zoom, on the hero photo too.
   .bbd-single-hero-media already clips (overflow hidden + radius), so the
   scale stays inside the rounded frame. Hover-only = desktop by nature. */
.bbd-gallery-hero-link img { transition: transform 0.15s ease; }
.bbd-gallery-hero-link:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.bbd-gallery-hero-link img, .bbd-gallery-hero-link:hover img { transition: none; transform: none; }
}

/* ---- Lightbox overlay (shared: gallery + review photos) ---- */
body.bbd-lightbox-open { overflow: hidden; }
.bbd-lightbox {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(15, 23, 42, 0.94);
	display: flex; align-items: center; justify-content: center;
	/* v0.18.1 internal review: iOS Safari ignores body overflow for TOUCH
	   scrolling - without this, swiping the photo also scrolls/rubber-bands
	   the page underneath and dumps the visitor somewhere else on close. */
	touch-action: none;
}
.bbd-lightbox[hidden] { display: none !important; }
.bbd-lightbox-img {
	max-width: min(92vw, 1200px); max-height: 86vh;
	object-fit: contain; border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	cursor: zoom-out;
}
.bbd-lightbox button {
	position: absolute; border: 0; cursor: pointer; color: #fff;
	background: rgba(255, 255, 255, 0.12); border-radius: 999px;
	width: 44px; height: 44px; font-size: 26px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s ease;
}
.bbd-lightbox button:hover { background: rgba(255, 255, 255, 0.28); }
.bbd-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* v0.25.8 (C6, Dave 8/13 - reference: his Events-page popup): the X is a
   circle sitting ON the tip of the photo's top-right corner, half on/half
   off. White 2px border, header-blue fill (--bbd-accent #0D4E90 - Dave's
   recorded name for this blue, v0.22.4), white glyph. The corner
   straddle needs only ~24px of margin on each axis, which the 92vw/86vh
   image caps always leave - so ONE placement serves desktop AND mobile,
   and the v0.25.7 short-window fallback is no longer needed.
   Two-class selectors on purpose: the shared `.bbd-lightbox button` rule
   above is (0,1,1) and out-ranks a lone class - the exact cascade trap
   Playwright caught in v0.25.7. */
.bbd-lightbox-frame { position: relative; display: flex; }
.bbd-lightbox-frame .bbd-lightbox-close {
	/* right is SELF-CLAMPING (Playwright caught the 92vw mobile case: only
	   ~8px of side margin, a fixed -22px pushed the X off-screen): overhang
	   the corner by 22px when the margin allows, otherwise stay 4px inside
	   the viewport. (100vw - 100%)/2 is the frame's own side margin. */
	position: absolute; top: -22px;
	right: max(-22px, calc(4px - (100vw - 100%) / 2));
	background: var(--bbd-accent, #0d4e90);
	border: 2px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.bbd-lightbox-frame .bbd-lightbox-close:hover { background: var(--bbd-accent-dark, #093a6c); }
/* v0.25.8 (closes the v0.25.7 accepted F5): before the image has loaded
   the frame is 0x0 and the X would float mid-screen - hidden until
   public.js flips the loaded flag on the frame. */
.bbd-lightbox-frame:not(.bbd-lightbox-frame--loaded) .bbd-lightbox-close { visibility: hidden; }
.bbd-lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.bbd-lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }
.bbd-lightbox-counter {
	position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
	color: #e2e8f0; font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
	background: rgba(15, 23, 42, 0.55); border-radius: 999px; padding: 4px 14px;
}
@media (max-width: 640px) {
	.bbd-lightbox-prev { left: 6px; }
	.bbd-lightbox-next { right: 6px; }
	.bbd-lightbox-img { max-width: 96vw; }
}

/* ---- Review photos (under approved reviews) ---- */
.bbd-review-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bbd-review-photo {
	display: block; width: 72px; height: 72px; overflow: hidden;
	border-radius: 8px; border: 1px solid var(--bbd-line, #e2e8f0);
	cursor: zoom-in; background: var(--bbd-accent-soft, #eef4fb);
}
.bbd-review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Owner dashboard gallery editor ---- */
.bbd-dash-gallery-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 10px; }
.bbd-dash-gallery-item {
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px;
	background: #f8fafc; font-weight: 400;
}
.bbd-dash-gallery-item img {
	/* v0.23.12 (Dave): the tile grew a tad (88 -> 96) so "Make main
	   photo" sits comfortably on one line. */
	width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block;
}
.bbd-dash-gallery-item.is-removed { opacity: 0.45; border-style: dashed; }
.bbd-dash-gallery-controls { display: flex; gap: 6px; }
.bbd-dash-gal-up, .bbd-dash-gal-down {
	border: 1px solid #cbd5e1; background: #fff; border-radius: 6px;
	width: 30px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1;
	color: #334155;
	/* v0.23.12 (Dave): the arrow glyph is dead-centered in its box. */
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.bbd-dash-gal-up:hover, .bbd-dash-gal-down:hover { border-color: #0d4e90; color: #0d4e90; }
.bbd-dash-gallery-remove { font-size: 12.5px; color: #64748b; font-weight: 400; }
/* v0.23.11 (Dave): "Make main" radio on each gallery tile + the "keep
   current" default beside the main-photo preview. */
/* v0.23.12 (Dave): dot and text on ONE line, never wrapping - the tile
   is sized to fit "Make main photo" at 12px. */
.bbd-dash-gallery-mainpick {
	display: flex; align-items: center; gap: 5px; white-space: nowrap;
	font-size: 12px; color: #334155; font-weight: 600;
}
.bbd-dash-gallery-mainpick input { margin: 0; }
.bbd-dash-gallery-item.is-removed .bbd-dash-gallery-mainpick { visibility: hidden; }
.bbd-dash-photo-keep {
	display: flex; align-items: center; gap: 6px; white-space: nowrap;
	font-size: 13px; color: #334155; font-weight: 400; margin: 4px 0 2px;
}
.bbd-dash-photo-keep input { margin: 0; }

/* ==========================================================================
   v0.18.1 - Dave's 0.18.0 testing batch
   ========================================================================== */

/* ---- Friendly photo picker (review form + owner dashboard) ---- */
.bbd-filepick { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bbd-filepick-btn {
	align-self: flex-start; font-size: 14px !important; padding: 10px 16px !important;
	font-weight: 600 !important;
}
.bbd-filepick-chips { display: flex; flex-wrap: wrap; gap: 12px; }
/* v0.23.11 (Dave): reorder-enabled pickers (the wizard photo step) breathe -
   the x (top corners) and arrows (bottom corners) protrude 7px past each
   chip, so at 8px the neighbors' controls nearly touched. Desktop and
   mobile alike (one rule; the row simply wraps). */
.bbd-filepick--reorder .bbd-filepick-chips { gap: 22px 20px; }
/* v0.24.8.1 (cosmetics): the wizard photo step only (data-bbd-reorder is
   unique to it) - more air above the thumbs (was flush under the helper
   text) and more room below them before "Add more photos…" (was the base
   picker's 8px column gap, too tight once thumbs got taller). */
.bbd-filepick--reorder { margin-top: 16px; gap: 18px; }
/* v0.23.12 (Dave): wizard upload thumbs ~20% larger on DESKTOP only
   (70 -> 84px); mobile keeps 70px until Dave checks it there. */
@media (min-width: 641px) {
	.bbd-filepick--reorder .bbd-filepick-chip { width: 84px; height: 84px; }
}
.bbd-filepick-chips:empty { display: none; }
.bbd-filepick-chip {
	/* v0.22.4 (Dave): upload-preview thumbs ~10% larger (64 -> 70px),
	   mobile and desktop - still no wrap in the mobile chip row. */
	position: relative; width: 70px; height: 70px;
	border-radius: 8px; overflow: visible;
	border: 1px solid var(--bbd-line, #e2e8f0); background: var(--bbd-accent-soft, #eef4fb);
}
.bbd-filepick-chip img {
	width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px;
}
.bbd-filepick-x {
	position: absolute; top: -7px; right: -7px; z-index: 2;
	width: 20px; height: 20px; border-radius: 999px; border: 0;
	background: var(--bbd-closed, #b91c1c); color: #fff;
	font-size: 13px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0;
}
.bbd-filepick-x:hover { background: #7f1d1d; }
/* The native input stays in the form (it carries the files) but out of view. */
.bbd-filepick-native {
	position: absolute !important; width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important; overflow: hidden !important;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important;
}
.bbd-review-photos-field { display: block; }

/* ---- Gallery collage (Yelp-style preview) ---- */
.bbd-gallery-grid--collage { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) {
	.bbd-gallery-grid--collage { grid-template-columns: repeat(4, 1fr); }
}
.bbd-gallery-grid--collage .bbd-gallery-item { position: relative; }
.bbd-gallery-item--lead {
	grid-column: span 2; grid-row: span 2;
	aspect-ratio: auto; /* fills its two rows exactly; the rows are sized by the small tiles */
}
/* Collapsed preview: mobile = lead + 2 (Dave's "1 large, 2 on the right"),
   desktop = lead + 4. Hidden tiles stay in the DOM so the lightbox keeps
   every photo. */
.bbd-gallery-grid--collage.is-collapsed .bbd-gallery-item:nth-child(n+4) { display: none; }
@media (min-width: 640px) {
	.bbd-gallery-grid--collage.is-collapsed .bbd-gallery-item:nth-child(n+4) { display: block; }
	.bbd-gallery-grid--collage.is-collapsed .bbd-gallery-item:nth-child(n+6) { display: none; }
	/* Exactly 4 tiles would leave a one-cell hole in the collapsed preview
	   (internal review) - collapse that case to lead + 2 with a "+1". */
	.bbd-gallery-grid--collage.is-collapsed .bbd-gallery-item:nth-child(4):last-child { display: none; }
}
/* "+K" pill on the last visible tile (K set by JS at the current width).
   v0.23.0 (Dave 7/24): the tile now wears the HERO badge's pill verbatim -
   same dark glass (0.62), 14px text, 15px camera, 999px radius - instead of
   the old full-tile scrim with 22px type. It stays CENTERED on the photo
   (Dave's call); only the style matches the header. */
.bbd-gallery-item[data-bbd-more]::after {
	/* v0.23.8 (Dave): the old content-list icon (content: url(svg) + text)
	   sat on the TEXT BASELINE, so the "+K" rode low next to the camera -
	   visibly off-center vs the hero badge. The icon is now a
	   background-image, vertically centered by definition, and the pill's
	   only content is the "+K" text. line-height 15px matches the hero
	   badge's 15px icon row, so both pills are the same height. */
	content: attr(data-bbd-more);
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(15, 23, 42, 0.62);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 11px center;
	background-size: 15px 15px;
	color: #fff;
	font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 15px;
	padding: 5px 11px 5px 31px; border-radius: 999px; pointer-events: none;
	white-space: nowrap;
}
.bbd-gallery-more {
	margin-top: 12px; font-size: 14px !important; padding: 10px 18px !important;
}
.bbd-gallery-more[hidden] { display: none !important; }

/* ==========================================================================
   v0.18.2 - Dave's second 0.18.x testing batch
   ========================================================================== */

/* Combined address box: street (linked) + quiet "City, FL 33328" line. */
.bbd-info-locality { display: block; color: var(--bbd-ink, #1e293b); }

/* MOBILE WIGGLE FIX (Dave 7/15): nothing in the listing layout may force
   sideways scroll. Flex/grid children default to min-width:auto, so one
   non-shrinking element (a native file input is the classic offender)
   silently widens the whole column past the phone screen. Lock the layout
   children down and clip the sections that host user-generated widths. */
.bbd-single-main, .bbd-single-aside { min-width: 0; }
.bbd-review-form > *, .bbd-review-form-cols > * { min-width: 0; }
.bbd-review-form input[type="file"],
.bbd-dash-form input[type="file"] { max-width: 100%; min-width: 0; }
.bbd-reviews, .bbd-review-form-wrap, .bbd-gallery {
	overflow-x: hidden; /* older Safari fallback */
	overflow-x: clip;   /* preferred: clips without creating a scroll context */
}

/* ==========================================================================
   v0.19.0 (Phase 6 step 3): lead capture.
   The block above Business Info: SOLID border (the coupon block keeps its
   dashed one), light-blue interior (accent-soft family - Dave's color
   coding: green = money/coupon, blue = contact/lead).
   ========================================================================== */
.bbd-lead {
	/* v0.22.4 (Dave): soft blue border from the header-blue family - the
	   strong accent now lives on the button, not the box edge. */
	border: 2px solid var(--bbd-accent-line); border-radius: var(--bbd-radius);
	background: var(--bbd-accent-soft); padding: 16px; margin: 0 0 20px;
}
/* v0.24.8.2 (cosmetics, Dave): bold + pure black instead of --bbd-ink
   slate, matching the section titles above ("Get in touch"). */
.bbd-lead-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #000; }
.bbd-lead-intro { margin: 0 0 12px; font-size: 14px; color: var(--bbd-muted); }

/* The CTA button IS the summary - opening it reveals the form (no JS needed). */
.bbd-lead-details { margin: 0; }
.bbd-lead-cta {
	display: block; text-align: center; cursor: pointer;
	background: var(--bbd-accent); color: #fff;
	font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
	border-radius: 8px; padding: 11px 18px;
	list-style: none; user-select: none;
}
.bbd-lead-cta::-webkit-details-marker { display: none; }
.bbd-lead-cta::marker { content: ''; }
/* v0.23.14 (Dave): no hover underline - the theme was decorating the
   summary on hover; no other button/link on the site underlines. */
.bbd-lead-cta, .bbd-lead-cta:hover { text-decoration: none !important; }
.bbd-lead-cta:hover { background: var(--bbd-accent-dark); }
.bbd-lead-details[open] .bbd-lead-cta { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.bbd-lead-form {
	background: #fff; border: 1px solid var(--bbd-line);
	border-top: 0; border-radius: 0 0 8px 8px; padding: 14px;
	display: flex; flex-direction: column; gap: 10px;
}
.bbd-lead-label { display: block; font-size: 14px; font-weight: 600; color: var(--bbd-ink); }
.bbd-lead-form input[type="text"],
.bbd-lead-form input[type="email"],
.bbd-lead-form input[type="tel"],
.bbd-lead-form textarea {
	display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
	padding: 8px 10px; font: inherit; font-weight: 400;
	border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
}
.bbd-lead-form textarea { resize: vertical; }
.bbd-lead-submit { margin-top: 2px; }
.bbd-lead-fineprint { margin: 2px 0 0; font-size: 12px; color: var(--bbd-muted); }
.bbd-lead-notice { margin-bottom: 12px; }
/* v0.21.0 (item 2): the response box under the Send button. Empty (no notice)
   it collapses to nothing; with a notice it gets a little air below the button.
   The notice's own bottom margin then separates it from the fine print. */
.bbd-lead-response:not(:empty) { margin-top: 12px; }
/* v0.21.1: the button after an in-place send - "Thank You - Sent!". Calm, done,
   not clickable. */
.bbd-lead-submit:disabled { opacity: .8; cursor: default; }

/* The stretched duplicate CTA at the bottom of the page (Dave: large,
   full width - "this will help stand out a listing"). */
.bbd-lead-bottom { margin: 4px 0 26px; }
.bbd-lead-cta-bottom {
	display: block; width: 100%; box-sizing: border-box; text-align: center;
	background: var(--bbd-accent); color: #fff !important;
	font-size: 17px; font-weight: 700; letter-spacing: 0.02em;
	border-radius: 10px; padding: 15px 20px; text-decoration: none;
}
/* v0.23.15 (Dave): the plain "text-decoration: none" was losing to a
   higher-specificity theme a:hover underline - the sidebar CTA's
   !important treatment (0.23.14) now covers the bottom CTA too. */
.bbd-lead-cta-bottom,
.bbd-lead-cta-bottom:hover,
.bbd-lead-cta-bottom:focus { text-decoration: none !important; }
.bbd-lead-cta-bottom:hover { background: var(--bbd-accent-dark); }

/* Owner dashboard: "X leads this month" chip on the listing card. */
.bbd-dash-leads {
	display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 600;
	color: var(--bbd-accent-dark, #093a6c);
}

/* ---- v0.22.0 (Phase 6 step 5): billing on the owner dashboard ---- */
/* The membership row on a dashboard card. Literal fallbacks alongside the
   vars, same as the leads chip above (dashboard renders inside themes that
   may not carry our :root scope). */
.bbd-dash-plan {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
	margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bbd-line, #e2e8f0);
}
.bbd-dash-plan-label {
	display: inline-block; background: var(--bbd-accent-soft, #eef4fb);
	color: var(--bbd-accent-dark, #093a6c); border-radius: 999px;
	padding: 3px 11px; font-size: 12px; font-weight: 700;
}
.bbd-dash-plan-detail { font-size: 13px; color: var(--bbd-muted, #64748b); }
.bbd-dash-plan-note { font-size: 12px; color: var(--bbd-accent-dark, #093a6c); font-weight: 600; width: 100%; }
.bbd-dash-upgrade-form { display: inline; margin: 0; }
.bbd-dash-upgrade { font-size: 14px; padding: 8px 16px; }
/* Billing flashes get a real green treatment - "payment received" must
   not look like plain text next to the pink error style. Scoped with its
   own class so the existing OK flashes (edit submitted etc.) are untouched. */
.bbd-dash-flash--ok { background: #dcfce7; }
.bbd-dash-flash--ok p { color: #15803d; }

/* The cancel link is TINY on purpose (Dave: low-key, not a button). */
.bbd-dash-cancel {
	margin-left: auto; font-size: 12px; color: var(--bbd-muted, #64748b);
	text-decoration: underline;
}
.bbd-dash-cancel:hover { color: var(--bbd-closed, #b91c1c); }

/* The cancel confirmation card: keeping is the big action, canceling the quiet one. */
.bbd-cancel-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.bbd-cancel-actions form { margin: 0; }
@media (max-width: 480px) {
	.bbd-dash-cancel { margin-left: 0; }
	.bbd-cancel-actions { flex-direction: column; align-items: stretch; }
	.bbd-cancel-actions form { width: 100%; }
	.bbd-cancel-actions .bbd-login-btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   v0.23.0 (Phase 6 step 6) - Add Your Business wizard
   Four steps in one form. Without JS all steps render stacked (a long but
   working form); with JS the form gets .bbd-add-form--stepped and only the
   .is-active step shows. The numbered progress bar is the old site's look,
   restyled to the header blue (locked default, decisions doc).
   ========================================================================== */
.bbd-add-wrap { max-width: 760px; margin: 0 auto; }
.bbd-add-intro { font-size: 16px; color: var(--bbd-ink, #1e293b); margin: 0 0 18px; }

.bbd-add-progress {
	display: flex; gap: 4px; list-style: none; margin: 0 0 22px; padding: 0;
	counter-reset: none;
}
.bbd-add-progress li {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 0; margin: 0; text-align: center; position: relative;
}
/* Connector line between the numbered dots. */
.bbd-add-progress li + li::before {
	content: ""; position: absolute; top: 16px; right: 50%;
	width: 100%; height: 2px; background: var(--bbd-accent-line, #c5d7ec);
	transform: translateX(-16px); z-index: 0;
}
.bbd-add-progress-num {
	width: 32px; height: 32px; border-radius: 50%; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	background: #fff; color: var(--bbd-muted, #64748b);
	border: 2px solid var(--bbd-accent-line, #c5d7ec);
	font-weight: 700; font-size: 14px;
}
.bbd-add-progress li.is-active .bbd-add-progress-num {
	background: var(--bbd-accent, #0d4e90); border-color: var(--bbd-accent, #0d4e90); color: #fff;
}
.bbd-add-progress li.is-done .bbd-add-progress-num {
	background: var(--bbd-accent-soft, #eef4fb); border-color: var(--bbd-accent, #0d4e90); color: var(--bbd-accent, #0d4e90);
}
.bbd-add-progress-label { font-size: 12px; color: var(--bbd-muted, #64748b); font-weight: 600; }
.bbd-add-progress li.is-active .bbd-add-progress-label { color: var(--bbd-accent, #0d4e90); }
@media (max-width: 480px) {
	.bbd-add-progress-label { display: none; } /* dots only on small phones */
}

.bbd-add-step {
	border: 1px solid var(--bbd-line, #e2e8f0); border-radius: var(--bbd-radius, 12px);
	padding: 20px; margin: 0 0 16px; background: #fff;
}
.bbd-add-form--stepped .bbd-add-step { display: none; }
.bbd-add-form--stepped .bbd-add-step.is-active { display: block; }
/* v0.24.8.1 (cosmetics): breathing room between each step's title and its
   first field label (Category / Business Name / Photos) - was 6px with the
   group's own 0 top margin on top, so title and label nearly touched. One
   shared rule fixes all four wizard steps at once. */
.bbd-add-step-title { font-size: 20px; font-weight: 700; color: var(--bbd-accent, #0d4e90); padding: 0; margin-bottom: 22px; }

.bbd-add-group { margin: 0 0 18px; }
.bbd-add-label { display: block; font-weight: 600; margin: 0 0 4px; }
.bbd-add-note { display: block; font-size: 13px; color: var(--bbd-muted, #64748b); margin: 0 0 6px; }
.bbd-add-group input[type="text"],
.bbd-add-group input[type="email"],
.bbd-add-group input[type="tel"],
.bbd-add-group input[type="url"],
.bbd-add-group input[type="number"],
.bbd-add-group select,
.bbd-add-group textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--bbd-line, #e2e8f0);
	border-radius: 8px; font-size: 15px; box-sizing: border-box;
}
.bbd-add-group input:focus, .bbd-add-group select:focus, .bbd-add-group textarea:focus {
	outline: 2px solid var(--bbd-accent, #0d4e90); border-color: transparent;
}
/* v0.24.3 (Dave): the intro is one line tall on desktop (its hint lives
   in the placeholder now); mobile keeps two lines for thumb-typing. */
.bbd-add-intro-input { resize: vertical; }
@media (min-width: 641px) {
	.bbd-add-intro-input { height: 44px; min-height: 44px; }
}

/* Category / city pickers: tappable chip grid. */
.bbd-add-choices {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px;
}
.bbd-add-choice {
	display: flex; align-items: center; gap: 8px;
	border: 1px solid var(--bbd-line, #e2e8f0); border-radius: 8px;
	padding: 9px 11px; cursor: pointer; font-size: 14px; background: #fff;
}
.bbd-add-choice:has(input:checked) {
	border-color: var(--bbd-accent, #0d4e90); background: var(--bbd-accent-soft, #eef4fb);
	font-weight: 600;
}
/* v0.23.1: the "+ Surrounding Cities" pill - a styled checkbox under the
   home-city select (service-area categories only; JS hides it for parks). */
.bbd-add-surroundwrap { margin-top: 10px; }
.bbd-add-surroundwrap[hidden] { display: none !important; }
.bbd-add-surrounding {
	display: inline-block; margin: 0 0 6px; padding: 8px 16px;
	border: 2px solid var(--bbd-accent, #0d4e90); border-radius: 999px;
	background: #fff; color: var(--bbd-accent, #0d4e90);
	font-weight: 700; font-size: 14px; cursor: pointer; user-select: none;
}
.bbd-add-surrounding input { position: absolute; opacity: 0; pointer-events: none; }
.bbd-add-surrounding.is-active,
.bbd-add-surrounding:has(input:checked) { background: var(--bbd-accent, #0d4e90); color: #fff; }

/* v0.24.0 (radius picker): ticking the pill expands the city checkbox
   list + quick-pick chips. Closed by default; opened by :has (works with
   or without JS) and doubled by the JS is-open class (works where :has
   doesn't). The chips row ships hidden - the wizard JS unhides it, so a
   no-JS visitor only ever sees the plain (fully working) checkboxes. */
.bbd-add-surroundpanel {
	display: none; margin: 4px 0 10px; padding: 12px;
	border: 1px solid var(--bbd-line, #e2e8f0); border-radius: 8px; background: #fff;
}
.bbd-add-surroundpanel.is-open,
.bbd-add-surroundwrap:has(.bbd-add-surrounding input:checked) .bbd-add-surroundpanel { display: block; }
.bbd-add-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.bbd-add-chips[hidden] { display: none !important; }
.bbd-add-chips-label { font-size: 13px; font-weight: 600; color: var(--bbd-muted, #64748b); }
.bbd-add-chip {
	border: 1px solid var(--bbd-accent, #0d4e90); border-radius: 999px;
	background: #fff; color: var(--bbd-accent, #0d4e90);
	font-weight: 600; font-size: 13px; padding: 6px 14px; cursor: pointer; user-select: none;
}
.bbd-add-chip.is-active { background: var(--bbd-accent, #0d4e90); color: #fff; }
.bbd-add-chip:disabled { opacity: .45; cursor: default; }
.bbd-add-surroundcities { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bbd-add-surroundcity { font-size: 13px; padding: 7px 9px; }
/* [hidden] loses to the .bbd-add-choice display:flex without this - the
   home city's own row must actually disappear (it is always included). */
.bbd-add-surroundcity[hidden] { display: none !important; }

/* v0.24.1 (Dave): on DESKTOP the wizard breaks out of the theme's content
   column so labels stop wrapping ("Vets & Animal Hospitals",
   "Lauderdale-by-the-Sea") - centered, up to 1240px, on every step. The
   category grid and the surrounding-city grid are pinned to exactly FOUR
   across (Dave: "4 cities across and 4 categories across"). Mobile is
   untouched. transform-centering keys off the theme's centered content
   column, so no 100vw scrollbar overflow. */
@media (min-width: 1280px) {
	/* Double class: outranks the wizard's own 760px cap AND ties broken
	   against theme layout rules (block themes constrain children with
	   :where() at the same single-class specificity). Width honors the
	   standing 1200px hard site rule (.bbd-page). */
	.bbd-add-wrap.bbd-page {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: min(1200px, 94vw);
		max-width: none;
		box-sizing: border-box;
	}
	.bbd-add-choices { grid-template-columns: repeat(4, 1fr); }
	.bbd-add-surroundcities { grid-template-columns: repeat(4, 1fr); }
	/* v0.24.3 (Dave): the seven social-link rows pair up two across so
	   step 2 stops being a mile long. The step becomes a 2-col grid;
	   everything EXCEPT social rows spans both columns, so only the
	   social rows (consecutive in the markup) actually pair up. Both
	   display rules beat .bbd-add-form--stepped .bbd-add-step.is-active
	   { display:block } on specificity. */
	.bbd-add-form--stepped .bbd-add-step[data-bbd-step="2"].is-active,
	.bbd-add-form:not(.bbd-add-form--stepped) .bbd-add-step[data-bbd-step="2"] {
		display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px;
	}
	.bbd-add-step[data-bbd-step="2"] > * { grid-column: 1 / -1; min-width: 0; }
	.bbd-add-step[data-bbd-step="2"] > .bbd-add-field-row--social { grid-column: auto; }
}

/* Plan cards (step 4). */
.bbd-add-plan {
	display: block; border: 1px solid var(--bbd-line, #e2e8f0); border-radius: var(--bbd-radius, 12px);
	padding: 14px 16px; margin: 0 0 10px; cursor: pointer; background: #fff;
}
.bbd-add-plan:has(input:checked) { border: 2px solid var(--bbd-accent, #0d4e90); background: var(--bbd-accent-soft, #eef4fb); }
.bbd-add-plan-name { display: inline-block; font-weight: 700; font-size: 16px; margin-left: 4px; color: var(--bbd-accent, #0d4e90); }
.bbd-add-plan-desc { display: block; font-size: 14px; color: var(--bbd-muted, #64748b); margin: 4px 0 0 26px; }
.bbd-add-plan-note { font-size: 13px; color: var(--bbd-muted, #64748b); margin: 10px 0 0; }

.bbd-add-namerow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .bbd-add-namerow { grid-template-columns: 1fr; } }
.bbd-add-sublabel { display: block; font-size: 13px; font-weight: 600; color: var(--bbd-muted, #64748b); }
.bbd-add-sublabel input { margin-top: 4px; }

.bbd-add-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.bbd-add-nav .bbd-add-back { margin-right: auto; }
/* v0.24.2 (Dave): on desktop the Back/Next pair sat at opposite edges of
   the (now 1200px) form. v0.24.5 (Dave, after seeing 2in): "push them to
   normal center together" - a regular gap, centered. */
@media (min-width: 641px) {
	.bbd-add-nav { justify-content: center; gap: 16px; }
	.bbd-add-nav .bbd-add-back { margin-right: 0; }
}

/* Duplicate soft-suggest (never a block - just a nudge with a link). */
.bbd-add-dupe {
	border: 1px solid var(--bbd-accent-line, #c5d7ec); background: var(--bbd-accent-soft, #eef4fb);
	border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 0 0 14px;
}
.bbd-add-dupe a { font-weight: 700; }
.bbd-add-dupe[hidden] { display: none !important; }
.bbd-add-notice { margin-bottom: 16px; }

/* v0.23.3 (Dave): filepick reorder arrows + "Main" badge (opt-in via
   data-bbd-reorder / data-bbd-main-label - the Add wizard's photo step). */
.bbd-filepick-move {
	position: absolute; bottom: -7px; z-index: 2;
	width: 20px; height: 20px; border-radius: 999px; border: 0;
	background: var(--bbd-accent, #0d4e90); color: #fff;
	font-size: 14px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0;
}
.bbd-filepick-move:hover { background: var(--bbd-accent-dark, #093a6c); }
.bbd-filepick-move--left { left: -7px; }
.bbd-filepick-move--right { right: -7px; }
.bbd-filepick-main {
	position: absolute; left: 0; right: 0; top: 0; z-index: 1;
	background: rgba(13, 78, 144, 0.85); color: #fff;
	font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
	text-align: center; padding: 2px 0; border-radius: 7px 7px 0 0;
	pointer-events: none; text-transform: uppercase;
}

/* v0.23.6 (Dave's mobile screenshot, the locked hours spec):
   DESKTOP: the wizard hours wrappers dissolve (display:contents) and the
   Closed label flexes to the END of the line - pixel-identical to stock.
   MOBILE: the wrappers become real rows -
     "Monday  [x] Closed"
     "[ 11:30 PM ]  to  [ 11:30 AM ]"  <- boxes stretch to fill, like the
   other form fields. Also (Dave): the step border/box is GONE everywhere -
   it only ate space - and the wizard uses the exact same left/right
   working space as the directory's own mobile pages (.bbd-page's 16px). */
.bbd-add-hours-top, .bbd-add-hours-times { display: contents; }
.bbd-add-form .bbd-dash-hours-closed { order: 9; }

.bbd-add-step { border: 0; padding: 0; background: transparent; margin: 0 0 16px; }

@media (max-width: 640px) {
	/* v0.23.7 (Dave): the wizard gets the ENTIRE theme content width on
	   mobile - flush with the page title, no extra indent of its own. */
	.bbd-add-wrap.bbd-page { padding-left: 0; padding-right: 0; }
	/* v0.24.2 (Dave: "I can pull the page left and right"): iOS Safari
	   AUTO-ZOOMS when a focused control's font is under 16px, and the
	   page stays zoomed (= pannable) until a pinch resets it. Every
	   wizard control goes to 16px on mobile so the zoom never fires;
	   overflow-x is clipped as a belt-and-braces page lock. */
	.bbd-add-wrap { overflow-x: clip; }
	.bbd-add-form input:not([type="checkbox"]):not([type="radio"]),
	.bbd-add-form select,
	.bbd-add-form textarea,
	.bbd-add-form .bbd-dash-hours-row input[type="time"] { font-size: 16px; }
	.bbd-add-hours-top {
		display: flex; align-items: center; gap: 12px; width: 100%;
	}
	.bbd-add-hours-times {
		display: flex; align-items: center; gap: 8px; width: 100%;
	}
	.bbd-add-hours-times input[type="time"] {
		flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box;
	}
	.bbd-add-form .bbd-dash-hours-day { width: auto; }
	.bbd-add-form .bbd-dash-hours-closed { order: 0; }
	/* v0.24.2 (Dave): breathing room between day blocks - they read
	   "crunched together" on the phone, especially with the Closed tick. */
	.bbd-add-form .bbd-add-hours-row { margin-top: 14px; }
	.bbd-add-form .bbd-add-hours-row:first-child { margin-top: 0; }
	.bbd-add-hours-top { margin-bottom: 2px; }
	/* v0.24.3 (Dave: "a few pixels get cut off the edge"): the wizard is
	   flush with the viewport on mobile (0.23.7) and 0.24.2's overflow
	   clip now CUTS the 2px focus ring that painted outside the field.
	   Draw the ring inward instead - flush look, nothing clipped. */
	.bbd-add-group input:focus,
	.bbd-add-group select:focus,
	.bbd-add-group textarea:focus { outline-offset: -2px; }
	/* v0.24.4 (Dave): step 1's lone Next button sits centered on mobile.
	   Steps with a Back button keep the spread layout. */
	.bbd-add-step[data-bbd-step="1"] .bbd-add-nav { justify-content: center; }
}

/* v0.24.5 (Dave): his own green tip box on step 1 - coupon-style dashed
   green (echoes .bbd-coupon-card on purpose), text editable under Text &
   prompts (<b>/<i>/links allowed). Desktop: the city group becomes a
   2-col grid - dropdown left, tip right (the full-width select "looked
   weird so big"); the surrounding-cities block spans below both. Mobile:
   natural flow = tip below the city/surrounding block. */
.bbd-add-citytip {
	border: 1px dashed var(--bbd-open, #15803d); border-radius: var(--bbd-radius, 12px);
	background: var(--bbd-open-soft, #dcfce7); padding: 12px 14px;
	font-size: 14px; line-height: 1.5; color: var(--bbd-ink, #1e293b);
	margin: 10px 0 0;
}
@media (min-width: 641px) {
	.bbd-add-group--city { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 8px; align-items: start; }
	.bbd-add-group--city > .bbd-add-label { grid-column: 1 / -1; }
	.bbd-add-group--city > select { grid-column: 1; grid-row: 2; }
	.bbd-add-group--city > .bbd-add-citytip { grid-column: 2; grid-row: 2; margin: 0; }
	.bbd-add-group--city > .bbd-add-surroundwrap { grid-column: 1 / -1; }
}

/* v0.24.2 (Dave's idea): the Service-area row's covered-cities expander.
   The summary reads as the normal value line plus a small "see cities"
   affordance; open = the full list in small muted type. Default
   disclosure triangle suppressed (both syntaxes for WebKit). */
.bbd-service-cities summary { cursor: pointer; list-style: none; }
.bbd-service-cities summary::-webkit-details-marker { display: none; }
/* v0.24.3 (Dave): the label breaks into two lines everywhere -
   "Serving Coral Springs" / "+ Surrounding Areas: see cities". */
.bbd-service-cities-line1, .bbd-service-cities-line2 { display: block; }
.bbd-service-cities-line2 { margin-top: 2px; }
.bbd-service-cities-toggle {
	font-size: 12px; font-weight: 600; color: var(--bbd-accent, #0d4e90);
	white-space: nowrap;
}
/* v0.24.3 (Dave): triangle a tad larger. */
.bbd-service-cities-toggle::after { content: " \25BE"; font-size: 16px; line-height: 1; }
.bbd-service-cities[open] .bbd-service-cities-toggle::after { content: " \25B4"; }
.bbd-service-cities summary:hover .bbd-service-cities-toggle { text-decoration: underline; }
.bbd-service-cities-list {
	display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.55;
	color: var(--bbd-muted, #64748b);
}

/* v0.24.2 (Dave, iOS): an EMPTY time box on iOS Safari renders as a
   plain blank pill - no "--:-- --" hint like desktop/Android, so the
   form reads as dead boxes. iOS-only (the -webkit-touch-callout
   @supports gate): blank time inputs (JS keeps .bbd-time-blank in
   sync) get the hint drawn as a background - it vanishes the moment a
   value lands. Everywhere else the browser's own hint shows, so this
   never double-renders. */
@supports (-webkit-touch-callout: none) {
	.bbd-dash-hours-row input[type="time"].bbd-time-blank {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='20'%3E%3Ctext x='35' y='15' text-anchor='middle' font-family='-apple-system,sans-serif' font-size='15' fill='%2394a3b8'%3E--%3A-- --%3C/text%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}
}

/* v0.24.5 (Dave): the LISTING pages could be dragged sideways on phones
   too (gallery area, and the moment the review form is tapped) - the
   same iOS mechanics as the wizard: any focused control under 16px
   triggers Safari's auto-zoom and leaves the page pannable, and any
   stray pixel of overflow gives the drag somewhere to go. Site-wide on
   mobile: every plugin form control is 16px, and the plugin's page
   containers clip sideways overflow. Inner scroll regions (lightbox,
   etc.) keep their own overflow; the lightbox overlay lives on <body>,
   outside this clip. */
/* v0.25.11 adversarial review (both reviewers, independently): this block
   sits LATER in the file than the new 17px base rules above and used to say
   16px at 640px - so on portrait phones it silently pulled the search
   controls back DOWN to 16 (the threshold value that already failed on
   Dave's phone), leaving the !important armor as the only thing delivering
   17. Fixed at the source: 17px here too, and the gate widened 640 -> 950
   so landscape phones get the same floor (the same v0.25.8 reasoning that
   widened the search armor - review forms and dashboard fields on a
   sideways phone were still tappable at 13-15px). */
@media (max-width: 950px) {
	.bbd-page { overflow-x: clip; }
	.bbd-page input:not([type="checkbox"]):not([type="radio"]),
	.bbd-page select,
	.bbd-page textarea { font-size: 17px; }
}