/* ==========================================================================
   BookieFinder — Betting Shop Finder
   ========================================================================== */
.bf-filter-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--bf-white);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bf-ink);
	cursor: pointer;
}
.bf-filter-toggle .bf-i { width: 14px; height: 14px; transition: transform .15s; }
.bf-filter-toggle[aria-expanded="true"] .bf-i { transform: rotate(180deg); }

.bf-finder-quick-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 10px 14px;
	margin-bottom: 12px;
}
.bf-finder-quick-filters label,
.bf-finder-filters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bf-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.bf-finder-quick-filters label > span:first-child { min-height: 16px; }
.bf-finder-quick-filters select {
	min-height: 42px;
	padding: 8px 10px;
	border-radius: var(--bf-radius-sm);
	border: 1px solid var(--bf-border);
	background: var(--bf-white);
	font-size: 14px;
	color: var(--bf-ink);
}
.bf-finder-quick-filters .bf-finder-filter-checkbox {
	flex-direction: row;
	align-items: center;
	align-self: end;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	background: var(--bf-white);
	color: var(--bf-ink);
	text-transform: none;
	letter-spacing: 0;
}
.bf-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--bf-brand);
	color: #fff;
	font-size: 10px;
	line-height: 1;
}
.bf-finder-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 16px;
	background: var(--bf-white);
	border: 1px solid var(--bf-border);
	margin-bottom: 18px;
}
.bf-finder-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--bf-muted); text-transform: uppercase; letter-spacing: .06em; }
.bf-finder-filter-fieldset { border: 0; margin: 0; padding: 0; min-width: 220px; }
.bf-finder-filter-fieldset legend { font-size: 12px; font-weight: 600; color: var(--bf-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.bf-finder-facility-options { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.bf-finder-filters select {
	padding: 8px 10px;
	border-radius: var(--bf-radius-sm);
	border: 1px solid var(--bf-border);
	background: var(--bf-white);
	font-size: 14px;
	color: var(--bf-ink);
}
.bf-finder-filter-checkbox { flex-direction: row !important; align-items: center; gap: 6px !important; align-self: flex-end; padding-bottom: 9px; }

.bf-finder-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
	gap: 18px;
	align-items: stretch;
}
.bf-finder-layout.is-empty { grid-template-columns: minmax(0, 1fr); }
.bf-finder-layout.is-empty .bf-finder-map { min-height: 170px; }
.bf-finder-layout.is-empty .bf-finder-list-wrap { max-width: 760px; }
.bf-finder-layout.has-results .bf-finder-list-wrap { min-width: 0; }

.bf-finder-map {
	overflow: hidden;
	border: 1px solid var(--bf-border);
	min-height: 360px;
	background: var(--bf-white);
}
.bf-finder-layout.is-empty .bf-finder-map {
	border-style: dashed;
	background: var(--bf-bg);
}
.bf-finder-live-map { display: block; width: 100%; height: 340px; border: 0; }
.bf-finder-map-footer { display: flex; align-items: center; justify-content: flex-end; min-height: 32px; padding: 6px 10px; border-top: 1px solid var(--bf-border-light); color: var(--bf-muted); font-size: 10px; }
.bf-map-empty {
	min-height: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 24px;
	text-align: center;
	color: var(--bf-muted);
}
.bf-map-empty strong { color: var(--bf-ink); font-family: var(--bf-font-display); font-size: 20px; }
.bf-map-empty-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: var(--bf-brand-soft); color: var(--bf-brand); }
.bf-map-empty-icon .bf-i { width: 20px; height: 20px; }
.bf-leaflet-map { width: 100%; height: 100%; min-height: 340px; }
.bf-map-marker {
	width: 30px !important; height: 30px !important;
	border-radius: 50%;
	background: transparent;
}
.bf-map-marker span {
	width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--bf-brand); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.bf-map-marker.is-active { width: 36px !important; height: 36px !important; }
.bf-map-marker.is-active span { width: 36px; height: 36px; box-shadow: 0 0 0 4px rgba(18,61,44,.18), 0 3px 10px rgba(0,0,0,.25); }
.bf-map-marker span { font-size: 12px; font-weight: 800; }
.bf-finder-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bf-finder-status-message { font-family: var(--bf-font-display); font-size: 20px; font-weight: 600; color: var(--bf-ink); margin: 0 0 10px; }
.bf-finder-map-toggle { display: none; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 40px; padding: 7px 11px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm); background: var(--bf-white); color: var(--bf-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.bf-finder-map-toggle .bf-i { width: 15px; height: 15px; }
.bf-finder-error {
	font-size: 14px;
	color: var(--bf-closed);
	background: #fbecea;
	border-left: 3px solid var(--bf-closed);
	padding: 10px 12px;
	margin: 10px 0 12px;
}
.bf-finder-loading { display: grid; gap: 8px; }
.bf-finder-skeleton {
	display: grid;
	grid-template-columns: 22px 1fr 80px;
	gap: 10px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--bf-border-light);
}
.bf-finder-skeleton span {
	display: block;
	height: 12px;
	border-radius: 3px;
	background: var(--bf-border-light);
	animation: bf-skeleton 1.2s ease-in-out infinite alternate;
}
.bf-finder-skeleton span:nth-child(2) { width: 80%; }
.bf-finder-skeleton span:nth-child(3) { width: 60px; justify-self: end; }
@keyframes bf-skeleton { from { opacity: .45; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
	.bf-finder-skeleton span { animation: none; }
}
.bf-finder-view-all { margin-top: 8px; }

.bf-finder-empty { font-size: 13px; color: var(--bf-muted); padding: 16px 6px; text-align: center; }

.bf-finder-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.bf-finder-row {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--bf-border-light);
}
.bf-finder-row:last-child { border-bottom: none; }
.bf-finder-row { cursor: pointer; border-radius: var(--bf-radius-sm); }
.bf-finder-row:hover, .bf-finder-row:focus-visible, .bf-finder-row.is-selected { background: var(--bf-brand-soft); outline: none; }
.bf-finder-row:focus-visible { box-shadow: inset 0 0 0 2px var(--bf-brand); }

.bf-finder-index {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--bf-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	display: flex; align-items: center; justify-content: center;
}

.bf-finder-details { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bf-finder-name { font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-finder-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.bf-finder-address { font-size: 13px; color: var(--bf-muted); }

.bf-finder-status { font-size: 12px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.bf-finder-status--open { color: var(--bf-open); }
.bf-finder-status--closed { color: var(--bf-closed); }
.bf-finder-status--unknown { color: var(--bf-muted-light); }

.bf-finder-distance { font-size: 13px; color: var(--bf-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
	.bf-finder-layout, .bf-finder-layout.is-empty { grid-template-columns: 1fr; }
	.bf-finder-map { min-height: 220px; }
	.bf-finder-layout.has-results:not(.is-map-open) .bf-finder-map { display: none; }
	.bf-finder-layout.has-results.is-map-open .bf-finder-list-wrap { display: none; }
	.bf-finder-layout.has-results .bf-finder-map-toggle { display: inline-flex; }
	.bf-finder-live-map, .bf-map-empty, .bf-leaflet-map { min-height: 220px; height: 220px; }
	.bf-finder-layout.is-empty .bf-finder-map { min-height: 150px; }
	.bf-finder-layout.is-empty .bf-map-empty { min-height: 150px; padding: 20px; }
}

/* ---- Standalone finder page search form ---- */
.bf-finder-page-form { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.bf-finder-page-form input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	font-size: 14px;
}
.bf-finder-page-form .bf-finder-locate,
.bf-finder-page-form .bf-btn { flex: 0 0 auto; min-height: 44px; }
.bf-finder-page-form .bf-finder-locate {
	padding: 11px 14px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	background: var(--bf-white);
	cursor: pointer;
	font-size: 14px;
}

/* Listing rows without the ranked distance column (archives, city pages, search). */
.bf-finder-row--plain { grid-template-columns: minmax(0, 1fr) auto auto; }

@media (max-width: 480px) {
	.bf-finder-quick-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.bf-finder-quick-filters label:first-child { grid-column: 1 / -1; }
	.bf-finder-quick-filters .bf-finder-filter-checkbox { min-height: 44px; justify-content: center; }
	.bf-finder-filters { display: grid; grid-template-columns: 1fr; gap: 10px; }
	.bf-finder-filters select, .bf-finder-filters input[type="checkbox"] { min-height: 44px; }
	.bf-finder-filter-checkbox { min-height: 44px; padding: 0; align-self: auto; }
	.bf-finder-page-form { position: relative; }
	.bf-finder-page-form input, .bf-finder-page-form .bf-finder-locate, .bf-finder-page-form .bf-btn { width: 100%; }
	.bf-finder-row { grid-template-columns: 22px minmax(0, 1fr); row-gap: 4px; }
	.bf-finder-status, .bf-finder-distance { grid-column: 2; }
	.bf-finder-row--plain { grid-template-columns: minmax(0, 1fr); }
	.bf-finder-row--plain .bf-finder-status, .bf-finder-row--plain .bf-finder-distance { grid-column: 1; }
}

/* v1.5.3: on wide screens the finder map fills the whole card beside the list
   (the iframe used to stay a fixed 340px and leave empty space below it). */
@media (min-width: 901px) {
	.bf-finder-map { display: flex; flex-direction: column; }
	.bf-finder-live-map { flex: 1 1 auto; height: auto; min-height: 340px; }
	.bf-finder-map .bf-map-empty { flex: 1 1 auto; }
	.bf-finder-map-footer { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.bf-map-marker, .bf-map-marker span { transition: none; }
}

/* Respect the native hidden state; display:grid must not expose idle skeletons. */
.bf-finder-loading[hidden] { display: none !important; }