/**
 * Boat Search — front-end styles. EVERYTHING is scoped under .bs-bsearch so it can never leak into
 * the theme. The wrapper is a container (container-type: inline-size) and the layout is driven by
 * @container queries, so the module reflows to its OWN width — in a tight sidebar as well as on a
 * phone — independent of the viewport.
 *
 * Colour model:
 *   --brand / --brand-d / --accent   → injected inline per broker (navy + darker navy + gold).
 *   Card surface/ink tokens          → theme-aware (light default, dark via prefers-color-scheme).
 *   Field tokens (--bss-field-*)      → FIXED. The toolbar fields sit on a fixed white ground, so
 *                                       their text + placeholder are a fixed DARK colour in BOTH
 *                                       light and dark themes. The gold accent is only the focus
 *                                       ring, never field text.
 */

.bs-bsearch {
	container-type: inline-size;
	--brand: #1a5aa6;
	--brand-d: #14477f;
	--accent: #cf9f34;

	/* theme-aware surface tokens (results area + cards) — light defaults */
	--bss-page-ink: #1f2937;
	--bss-muted: #6b7280;
	--bss-surface: #ffffff;
	--bss-surface-2: #f3f4f6;
	--bss-card-ink: #111827;
	--bss-border: #e5e7eb;
	--bss-shadow: 0 1px 3px rgba(17, 24, 39, .12), 0 1px 2px rgba(17, 24, 39, .08);

	/* FIXED field tokens — identical in light and dark */
	--bss-field-bg: #ffffff;
	--bss-field-ink: #1f2937;
	--bss-field-ph: #6b7280;
	--bss-field-border: rgba(255, 255, 255, .55);

	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1.5rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	color: var(--bss-page-ink);
}
.bs-bsearch *,
.bs-bsearch *::before,
.bs-bsearch *::after { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
	.bs-bsearch {
		--bss-page-ink: #e5e7eb;
		--bss-muted: #9ca3af;
		--bss-surface: #1f2430;
		--bss-surface-2: #171b24;
		--bss-card-ink: #f3f4f6;
		--bss-border: #333a48;
		--bss-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
	}
}

/* ------------------------------------------------------------------ toolbar */
.bs-bsearch__toolbar {
	background: linear-gradient(135deg, var(--brand), var(--brand-d));
	border-radius: 14px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	box-shadow: var(--bss-shadow);
}

.bs-bsearch__keyword {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--bss-field-bg);
	border-radius: 10px;
	padding: 0 .5rem 0 .75rem;
	min-height: 48px;
}
.bs-bsearch__kwicon { display: inline-flex; color: var(--brand); flex: 0 0 auto; }
.bs-bsearch__keyword input[type="search"] {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	font-size: 1rem;
	min-height: 44px;
	padding: 0 .25rem;
	color: var(--bss-field-ink);
	appearance: none;
}
.bs-bsearch__keyword input[type="search"]::placeholder { color: var(--bss-field-ph); opacity: 1; }
.bs-bsearch__keyword input[type="search"]:focus { outline: none; }

.bs-bsearch__submit {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	background: var(--accent);
	color: #1a1a1a;
	font-weight: 600;
	font-size: .95rem;
	border-radius: 8px;
	padding: 0 1.1rem;
	min-height: 40px;
	transition: filter .15s ease;
}
.bs-bsearch__submit:hover { filter: brightness(1.06); }

.bs-bsearch__filters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
}

/* shared field look — fixed white ground, fixed dark ink, in BOTH themes */
.bs-bsearch__filters select,
.bs-bsearch__filters input,
.bs-bsearch__pricegroup input {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--bss-field-border);
	border-radius: 8px;
	background: var(--bss-field-bg);
	color: var(--bss-field-ink);
	font-size: .9rem;
	padding: 0 .6rem;
	appearance: none;
	-webkit-appearance: none;
}
.bs-bsearch__filters select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%236b7280' d='M1 1l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right .55rem center;
	background-size: 10px;
	padding-right: 1.6rem;
	cursor: pointer;
}
.bs-bsearch__filters input::placeholder { color: var(--bss-field-ph); opacity: 1; }
.bs-bsearch__filters select:focus,
.bs-bsearch__filters input:focus,
.bs-bsearch__pricegroup input:focus,
.bs-bsearch__keyword:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}

.bs-bsearch__pricegroup {
	display: flex;
	align-items: center;
	gap: .35rem;
}
.bs-bsearch__pricegroup input { min-width: 0; }
.bs-bsearch__dash { color: #fff; opacity: .8; flex: 0 0 auto; }

/* ------------------------------------------------------------------ results */
.bs-bsearch__results { position: relative; margin-top: 1rem; }
.bs-bsearch__results[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }

.bs-bsearch__count {
	font-size: .85rem;
	color: var(--bss-muted);
	margin-bottom: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.bs-bsearch__empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--bss-muted);
	background: var(--bss-surface-2);
	border: 1px dashed var(--bss-border);
	border-radius: 12px;
}

.bs-bsearch__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

/* Elementor Loop Item mode: each result IS the broker's own loop-item card, at its NATURAL height.
   Broker loop-item cards are designed for an auto-height (masonry-style) Loop Grid — short when a boat
   has no photo, tall when it does — so we lay them out in balanced columns and MUST NOT force equal
   height (that collapses the card's internal photo/info flex row). We own only the column tracks; the
   card's look is entirely Elementor's. Column count reflows on the module's OWN width (@container). */
.bs-bsearch__grid--elementor {
	display: block;
	column-count: 3;
	column-gap: 1rem;
	grid-template-columns: none; /* override the base .bs-bsearch__grid grid */
}
.bs-bsearch__eitem {
	display: block;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 1rem;
	min-width: 0;
}
.bs-bsearch__eitem > .e-loop-item { width: 100%; }

/* built-in fallback card (used when the theme has no listing template) */
.bs-bsearch__card {
	background: var(--bss-surface);
	border: 1px solid var(--bss-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--bss-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}
.bs-bsearch__card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17, 24, 39, .16); }
.bs-bsearch__cardlink { text-decoration: none; color: inherit; display: block; }
.bs-bsearch__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bss-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.bs-bsearch__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-bsearch__noimg { color: var(--bss-muted); opacity: .6; }
.bs-bsearch__price {
	position: absolute;
	left: .6rem;
	bottom: .6rem;
	background: var(--accent);
	color: #1a1a1a;
	font-weight: 700;
	font-size: .9rem;
	padding: .2rem .55rem;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.bs-bsearch__body { padding: .75rem .85rem .9rem; }
.bs-bsearch__title {
	margin: 0 0 .3rem;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--bss-card-ink);
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bs-bsearch__spec { margin: 0; font-size: .82rem; color: var(--bss-muted); }

/* ------------------------------------------------------------------ pager */
.bs-bsearch__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}
.bs-bsearch__pagebtn {
	text-decoration: none;
	color: var(--brand);
	font-weight: 600;
	border: 1px solid var(--bss-border);
	border-radius: 8px;
	padding: .55rem .9rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	background: var(--bss-surface);
	transition: background .15s ease;
}
.bs-bsearch__pagebtn:hover { background: var(--bss-surface-2); }
.bs-bsearch__pagebtn.is-disabled { opacity: .4; pointer-events: none; }
.bs-bsearch__pageof { font-size: .9rem; color: var(--bss-muted); }

@media (prefers-color-scheme: dark) {
	.bs-bsearch__pagebtn { color: #cfe0f5; }
}

/* ------------------------------------------------------------------ spinner */
.bs-bsearch__spinner {
	position: absolute;
	top: 4.5rem;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	border: 3px solid var(--bss-border);
	border-top-color: var(--brand);
	border-radius: 50%;
	animation: bs-bsearch-spin .7s linear infinite;
	z-index: 2;
}
@keyframes bs-bsearch-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ @container reflow */
/* filters: 4-up (wide) → 2-up → 1-up (stacked full width) */
@container (max-width: 900px) {
	.bs-bsearch__filters { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 460px) {
	.bs-bsearch__filters { grid-template-columns: 1fr; }
	.bs-bsearch__keyword { flex-wrap: wrap; }
	.bs-bsearch__submit { width: 100%; margin-top: .4rem; }
}

/* result grid: 4 → 3 → 2 → 1 as the module narrows */
@container (max-width: 1100px) {
	.bs-bsearch__grid { grid-template-columns: repeat(3, 1fr); }
}
@container (max-width: 760px) {
	.bs-bsearch__grid { grid-template-columns: repeat(2, 1fr); }
	.bs-bsearch__grid--elementor { column-count: 2; }
}
@container (max-width: 440px) {
	.bs-bsearch__grid { grid-template-columns: 1fr; }
	.bs-bsearch__grid--elementor { column-count: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bs-bsearch *,
	.bs-bsearch *::before,
	.bs-bsearch *::after { animation-duration: .001ms !important; transition: none !important; }
	.bs-bsearch__spinner { animation: none; }
}