/* Closest-vet finder. Uses the variables from locations.css. */
.alf, .alf * { box-sizing: border-box; }
.alf {
	font-family: var(--al-font); color: var(--al-ink);
	display: grid; gap: 20px 28px; align-items: start;
	grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
	grid-template-areas: "search map" "results map";
}
.alf__search { grid-area: search; display: flex; flex-direction: column; gap: 12px; }
.alf__map { grid-area: map; position: sticky; top: 24px; height: min(680px, 80vh); min-height: 420px; border-radius: var(--al-radius); overflow: hidden; background: var(--al-bg); border: 1px solid var(--al-line); }
.alf__results { grid-area: results; display: flex; flex-direction: column; gap: 14px; }

.alf__label { display: block; font-size: 20px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.2px; }
.alf__field { display: flex; gap: 8px; }
.alf__field input {
	flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 14px 18px; border: 1.5px solid var(--al-line);
	border-radius: 999px; background: #fff; color: var(--al-ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.alf__field input:focus { border-color: var(--al-primary); box-shadow: 0 0 0 4px var(--al-primary-tint); }
.alf__go, .alf__more {
	font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border: 0; border-radius: 999px; padding: 0 24px;
	background: var(--al-primary); color: #fff; transition: background .2s;
}
.alf__go:hover, .alf__more:hover { background: var(--al-primary-dark); }
.alf__locate {
	align-self: flex-start; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: none; border: 0; padding: 4px 0;
	color: var(--al-primary); text-decoration: underline; text-underline-offset: 3px;
}
.alf__locate:hover { color: var(--al-primary-dark); }
.alf__status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--al-muted); min-height: 1.5em; }

.alf__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.alf-item {
	padding: 16px 18px; border: 1px solid var(--al-line); border-radius: 16px; background: #fff; cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}
.alf-item:hover, .alf-item.is-active { border-color: var(--al-primary); box-shadow: 0 6px 20px rgba(14, 59, 43, .10); }
.alf-item__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.alf-item__name { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; }
.alf-item__dist { flex: none; font-size: 13px; font-weight: 600; color: var(--al-primary-dark); background: var(--al-primary-tint); padding: 4px 10px; border-radius: 999px; }
.alf-item__addr { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; color: var(--al-muted); }
.alf-item__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.alf-item__actions .al-btn { padding: 8px 16px; font-size: 13px; }
.alf__more { align-self: center; padding: 12px 28px; }
.alf__more[hidden] { display: none; }

.alf-me { width: 18px; height: 18px; border-radius: 50%; background: #2f6fd0; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47, 111, 208, .25); }
.alf-iw { font-family: var(--al-font); font-size: 13px; line-height: 1.5; max-width: 220px; }
.alf-iw a { color: var(--al-primary); font-weight: 600; }

/* No map key: single column list */
.alf--nomap { grid-template-columns: 1fr; grid-template-areas: "search" "results"; }
.alf--nomap .alf__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.alf--nomap .alf__search { display: none; }

@media (max-width: 1024px) {
	.alf { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px 20px; }
}
@media (max-width: 767px) {
	.alf { grid-template-columns: 1fr; grid-template-areas: "search" "map" "results"; gap: 16px; }
	.alf__map { position: static; height: 340px; min-height: 0; }
	.alf__label { font-size: 18px; }
	.alf__go { padding: 0 18px; }
}