/* AgroLiquid Location Finder: split layout (list left, map right).
   Everything is namespaced under .agl-lf so theme CSS can't leak in; re-theme via the variables. */

.agl-lf {
	--agl-green: #0f8541;
	--agl-green-dark: #0a5c2c;
	--agl-green-tint: #eef7f1;
	--agl-text: #1f2a24;
	--agl-sub: #56635b;
	--agl-border: #d8ded9;
	--agl-field-border: #6b7a71; /* 4.5:1 on white; WCAG 1.4.11 needs 3:1 for field boundaries */
	--agl-focus: #0066cc;
	--agl-height: var(--agl-lf-height, 640px);
	width: 100%;
	margin: 0 0 2rem;
	color: var(--agl-text);
	font-family: inherit;
	line-height: 1.4;
	box-sizing: border-box;
}
.agl-lf *,
.agl-lf *::before,
.agl-lf *::after { box-sizing: border-box; }
.agl-lf [hidden] { display: none !important; }

.agl-lf__sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.agl-lf :focus-visible { outline: 3px solid var(--agl-focus); outline-offset: 2px; }

/* ── Search bar ───────────────────────────────────────────────────────── */
.agl-lf .agl-lf__search {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
	margin: 0 0 14px; padding: 0;
}
.agl-lf .agl-lf__input {
	flex: 1 1 280px; min-width: 0; height: 46px; margin: 0; padding: 0 14px;
	font-size: 16px; color: var(--agl-text); background: #fff;
	border: 2px solid var(--agl-field-border); border-radius: 4px; box-shadow: none;
}
.agl-lf .agl-lf__input:focus { border-color: var(--agl-green); box-shadow: 0 0 0 3px rgba(15, 133, 65, .2); }
.agl-lf .agl-lf__input.is-error { border-color: #b3261e; }
.agl-lf .agl-lf__error {
	flex: 0 0 100%; margin: 0 0 10px; padding: 8px 12px; font-size: 15px; font-weight: 600;
	color: #8c1d18; background: #fdecea; border-left: 4px solid #b3261e; border-radius: 3px;
}
.agl-lf .agl-lf__radius {
	flex: 0 0 auto; height: 46px; margin: 0; padding: 0 12px; font-size: 16px;
	color: var(--agl-text); background: #fff; border: 2px solid var(--agl-field-border); border-radius: 4px;
}
.agl-lf .agl-lf__btn {
	flex: 0 0 auto; height: 46px; min-width: 44px; margin: 0; padding: 0 18px;
	font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer;
	color: var(--agl-green-dark); background: #fff;
	border: 2px solid var(--agl-green); border-radius: 4px; text-transform: none; letter-spacing: 0;
	transition: background .15s, color .15s;
}
.agl-lf .agl-lf__btn:hover { background: var(--agl-green-tint); }
.agl-lf .agl-lf__btn--primary { color: #fff; background: var(--agl-green); }
.agl-lf .agl-lf__btn--primary:hover { background: var(--agl-green-dark); border-color: var(--agl-green-dark); }
.agl-lf .agl-lf__btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Body: list + map ─────────────────────────────────────────────────── */
.agl-lf .agl-lf__body {
	display: grid; grid-template-columns: minmax(300px, 400px) 1fr;
	height: var(--agl-height);
	border: 1px solid var(--agl-border); border-radius: 6px; overflow: hidden; background: #fff;
}
.agl-lf .agl-lf__panel {
	display: flex; flex-direction: column; min-height: 0; min-width: 0;
	border-right: 1px solid var(--agl-border);
}
.agl-lf .agl-lf__summary {
	flex: 0 0 auto; padding: 12px 16px; font-size: 14px; font-weight: 600;
	color: var(--agl-sub); background: #f6f8f6; border-bottom: 1px solid var(--agl-border);
}
.agl-lf .agl-lf__list {
	flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none;
	overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.agl-lf .agl-lf__pager {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 12px; background: #f6f8f6; border-top: 1px solid var(--agl-border);
}
.agl-lf .agl-lf__prev,
.agl-lf .agl-lf__next {
	margin: 0; padding: 8px 14px; min-height: 40px; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
	color: var(--agl-green-dark); background: #fff; border: 2px solid var(--agl-green); border-radius: 4px;
	text-transform: none; letter-spacing: 0;
}
.agl-lf .agl-lf__prev:hover:not(:disabled),
.agl-lf .agl-lf__next:hover:not(:disabled) { background: var(--agl-green-tint); }
.agl-lf .agl-lf__prev:disabled,
.agl-lf .agl-lf__next:disabled { opacity: .4; cursor: not-allowed; border-color: var(--agl-border); color: var(--agl-sub); }
.agl-lf .agl-lf__range { font-size: 14px; font-weight: 600; color: var(--agl-sub); text-align: center; }

.agl-lf .agl-lf__map { position: relative; min-width: 0; height: 100%; background: #e5e3df; }
.agl-lf .agl-lf__maperror {
	margin: 0; padding: 24px; text-align: center; color: var(--agl-sub); font-size: 15px;
}
.agl-lf.is-loading .agl-lf__map::after {
	content: 'Loading map…'; position: absolute; inset: 0; display: flex;
	align-items: center; justify-content: center; color: var(--agl-sub); font-size: 15px;
}
.agl-lf.is-nomap .agl-lf__body { grid-template-columns: 1fr; }
.agl-lf.is-nomap .agl-lf__map { display: none; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.agl-lf .agl-card {
	position: relative; margin: 0; padding: 14px 16px 14px 20px; list-style: none; cursor: pointer;
	border-bottom: 1px solid var(--agl-border); background: #fff;
	transition: background .15s;
}
.agl-lf .agl-card::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent;
}
.agl-lf .agl-card:hover { background: #fafbfa; }
.agl-lf .agl-card.is-active { background: var(--agl-green-tint); }
.agl-lf .agl-card.is-active::before { background: var(--agl-green); }

.agl-lf .agl-card__title { margin: 0 0 4px; padding: 0; font-size: 17px; line-height: 1.25; font-weight: 700; text-transform: none; letter-spacing: 0; }
.agl-lf .agl-card__title a { color: var(--agl-green-dark); text-decoration: none; }
.agl-lf .agl-card__title a:hover { text-decoration: underline; }
.agl-lf .agl-card__addr { margin: 0 0 4px; font-style: normal; font-size: 15px; color: var(--agl-text); }
.agl-lf .agl-card__phone { display: inline-block; margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--agl-green-dark); text-decoration: none; }
.agl-lf .agl-card__phone:hover { text-decoration: underline; }
.agl-lf .agl-card__dist { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--agl-sub); }
.agl-lf .agl-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.agl-lf .agl-card__link { font-size: 14px; font-weight: 600; color: var(--agl-green-dark); text-decoration: none; }
.agl-lf .agl-card__link:hover { text-decoration: underline; }
.agl-lf .agl-card__map {
	margin: 0 0 0 auto; padding: 5px 12px; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer;
	color: var(--agl-green-dark); background: #fff; border: 1px solid var(--agl-green); border-radius: 3px;
	text-transform: none; letter-spacing: 0;
}
.agl-lf .agl-card__map:hover { background: var(--agl-green-tint); }

/* ── Map markers (advanced markers: content is anchored bottom-centre) ── */
.agl-pin { line-height: 0; cursor: pointer; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.agl-pin svg { width: 30px; height: 40px; }
.agl-pin--active svg { width: 36px; height: 48px; }

.agl-cluster {
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	color: #fff; font: 700 15px/1 Arial, sans-serif; border-radius: 50%;
	background: #0a3d22; border: 3px solid #fff; /* darker than the #0f8541 single pins; white text is ~12:1 */
	box-shadow: 0 0 0 4px rgba(10, 61, 34, .28), 0 2px 5px rgba(0, 0, 0, .35); transform: translateY(50%);
}
.agl-cluster--38 { width: 38px; height: 38px; }
.agl-cluster--46 { width: 46px; height: 46px; }
.agl-cluster--54 { width: 54px; height: 54px; }

.agl-you {
	width: 16px; height: 16px; border-radius: 50%; transform: translateY(50%);
	background: #4285f4; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(66, 133, 244, .35);
}

/* ── Info window ──────────────────────────────────────────────────────── */
/* Google's wrapper adds its own padding / scrollbars; neutralise them for our popups only. */
.gm-style .gm-style-iw-c:has(.agl-iw) { padding: 0 !important; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }
.gm-style .gm-style-iw-d:has(.agl-iw) { overflow: visible !important; max-height: none !important; }

.agl-iw { position: relative; min-width: 230px; padding: 18px 20px 16px; font-size: 15px; line-height: 1.45; color: #1f2a24; }
.agl-iw__close {
	position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; margin: 0; padding: 0;
	font-size: 22px; line-height: 26px; text-align: center; color: #56635b; background: transparent;
	border: 0; border-radius: 50%; cursor: pointer;
}
.agl-iw__close:hover { background: #eef2ef; color: #1f2a24; }
.agl-iw__title {
	display: block; margin: 0 0 10px; padding-right: 24px; font-size: 17px; line-height: 1.25;
	font-weight: 700; color: #0a5c2c; text-decoration: none;
}
a.agl-iw__title:hover,
a.agl-iw__title:focus { color: #0a5c2c; text-decoration: underline; }
.agl-iw__row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; }
.agl-iw__icon { flex: 0 0 16px; padding-top: 3px; color: #0f8541; line-height: 0; }
.agl-iw address { margin: 0; font-style: normal; color: #1f2a24; }
.agl-iw__row a { font-weight: 600; color: #0a5c2c; text-decoration: none; }
.agl-iw__row a:hover,
.agl-iw__row a:focus { color: #0a5c2c; text-decoration: underline; }
.agl-iw__actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e3e8e4; }
.agl-iw a.agl-iw__btn {
	flex: 1 1 0; padding: 9px 12px; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center;
	color: #0a5c2c; text-decoration: none; background: #fff; border: 2px solid #0f8541; border-radius: 4px;
}
.agl-iw a.agl-iw__btn:hover,
.agl-iw a.agl-iw__btn:focus { color: #0a5c2c; background: #eef7f1; text-decoration: none; }
.agl-iw a.agl-iw__btn--primary { color: #fff; background: #0f8541; }
.agl-iw a.agl-iw__btn--primary:hover,
.agl-iw a.agl-iw__btn--primary:focus { color: #fff; background: #0a5c2c; border-color: #0a5c2c; }
.agl-iw__item {
	display: block; width: 100%; margin: 6px 0 0; padding: 8px 10px; text-align: left; font-size: 14px; font-weight: 600;
	color: #0a5c2c; background: #eef7f1; border: 1px solid #0f8541; border-radius: 4px; cursor: pointer;
}
.agl-iw__item:hover { background: #dff0e5; }
.agl-iw__note { margin: 8px 0 0; font-size: 13px; color: #56635b; }

.agl-lf__noscript { margin: 8px 0 0; font-size: 14px; color: var(--agl-sub); }

/* ── Responsive: stack with the map on top ────────────────────────────── */
@media (max-width: 800px) {
	.agl-lf .agl-lf__search { gap: 8px; }
	.agl-lf .agl-lf__input { flex-basis: 100%; }
	.agl-lf .agl-lf__radius { flex: 1 1 auto; }
	.agl-lf .agl-lf__body { grid-template-columns: 1fr; grid-template-rows: 340px auto; height: auto; }
	.agl-lf .agl-lf__map { order: -1; height: 340px; }
	.agl-lf .agl-lf__panel { border-right: 0; border-top: 1px solid var(--agl-border); max-height: 560px; }
	.agl-lf.is-nomap .agl-lf__body { grid-template-rows: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.agl-lf * { transition: none !important; scroll-behavior: auto !important; }
}

/* ── Single-location map (partner pages) ──────────────────────────────── */
.agl-single { margin: 0 0 1.5rem; color: #1f2a24; font-family: inherit; }
.agl-single__map { height: var(--agl-single-height, 300px); border-radius: 6px; background: #e5e3df; }
.agl-single__addr { margin: 10px 0 4px; font-style: normal; font-size: 15px; line-height: 1.4; }
.agl-single a.agl-single__dir { font-size: 15px; font-weight: 700; color: #0a5c2c; text-decoration: underline; }
.agl-single a.agl-single__dir:hover,
.agl-single a.agl-single__dir:focus { color: #0f8541; }
.agl-single :focus-visible { outline: 3px solid #0066cc; outline-offset: 2px; }

/* ── Compact search box ([agroliquid_location_search]) ────────────────── */
.agl-search { margin: 0 0 1rem; font-family: inherit; color: #1f2a24; }
.agl-search__label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #1f2a24; }
.agl-search__row { display: flex; flex-wrap: wrap; gap: 8px; }
.agl-search .agl-search__input {
	flex: 1 1 200px; min-width: 0; height: 46px; margin: 0; padding: 0 14px; font-size: 16px; color: #1f2a24;
	background: #fff; border: 2px solid #6b7a71; border-radius: 4px; box-shadow: none;
}
.agl-search .agl-search__input:focus { border-color: #0f8541; box-shadow: 0 0 0 3px rgba(15, 133, 65, .2); }
.agl-search .agl-search__btn {
	flex: 0 0 auto; height: 46px; margin: 0; padding: 0 18px; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
	color: #fff; background: #0f8541; border: 2px solid #0f8541; border-radius: 4px; text-transform: none; letter-spacing: 0;
}
.agl-search .agl-search__btn:hover,
.agl-search .agl-search__btn:focus { color: #fff; background: #0a5c2c; border-color: #0a5c2c; }
.agl-search :focus-visible { outline: 3px solid #0066cc; outline-offset: 2px; }

/* ── Map-only ([agroliquid_location_map]) ─────────────────────────────── */
.agl-lf--map .agl-lf__map {
	height: var(--agl-height); border: 1px solid var(--agl-border); border-radius: 6px; overflow: hidden;
}
.agl-lf--map .agl-lf__maplink { margin: 10px 0 0; font-size: 15px; }
.agl-lf--map .agl-lf__maplink a { font-weight: 700; color: var(--agl-green-dark); text-decoration: underline; }
.agl-lf--map .agl-lf__maplink a:hover,
.agl-lf--map .agl-lf__maplink a:focus { color: var(--agl-green); }
@media (max-width: 800px) {
	.agl-lf--map .agl-lf__map { height: min(var(--agl-height), 70vh); }
}