/* P37 Store Locator. Inherits the theme's font; colors come from plugin settings.
   --p37sl-accent = gold, --p37sl-ink = black. Light and dark themes both derive from those two. */
.p37sl {
	--p37sl-accent: #c9a24c;
	--p37sl-ink: #0b0b0b;
	--p37sl-h: 560px;
	--p37sl-radius: 14px;

	/* light theme (default tokens) */
	--p37sl-bg: #fff;
	--p37sl-panel: #fff;
	--p37sl-hover: color-mix(in srgb, var(--p37sl-ink) 4%, #fff);
	--p37sl-text: var(--p37sl-ink);
	--p37sl-title: var(--p37sl-ink);
	--p37sl-muted: color-mix(in srgb, var(--p37sl-ink) 62%, #fff);
	--p37sl-line: color-mix(in srgb, var(--p37sl-ink) 12%, transparent);
	--p37sl-input-bg: #fff;
	--p37sl-btn-bg: var(--p37sl-ink);
	--p37sl-btn-text: #fff;
	--p37sl-btn-hover: var(--p37sl-accent);
	--p37sl-outline: var(--p37sl-ink);
	--p37sl-pin: var(--p37sl-ink);
	--p37sl-pin-ring: #fff;
	--p37sl-pin-dot: #fff;
	--p37sl-map-bg: #eceae6;

	color: var(--p37sl-text);
	font: inherit;
	line-height: 1.45;
	max-width: 100%;
	box-sizing: border-box;
}

/* dark theme: black panels, gold details */
.p37sl.p37sl--dark {
	--p37sl-bg: var(--p37sl-ink);
	--p37sl-panel: color-mix(in srgb, var(--p37sl-ink) 92%, #fff);
	--p37sl-hover: color-mix(in srgb, var(--p37sl-ink) 82%, #fff);
	--p37sl-text: #f4efe4;
	--p37sl-title: var(--p37sl-accent);
	--p37sl-muted: #a7a196;
	--p37sl-line: color-mix(in srgb, var(--p37sl-accent) 28%, transparent);
	--p37sl-input-bg: color-mix(in srgb, var(--p37sl-ink) 88%, #fff);
	--p37sl-btn-bg: var(--p37sl-accent);
	--p37sl-btn-text: var(--p37sl-ink);
	--p37sl-btn-hover: color-mix(in srgb, var(--p37sl-accent) 82%, #fff);
	--p37sl-outline: var(--p37sl-accent);
	--p37sl-pin: var(--p37sl-accent);
	--p37sl-pin-ring: var(--p37sl-ink);
	--p37sl-pin-dot: var(--p37sl-ink);
	--p37sl-map-bg: #1b1b1b;
	padding: clamp(18px, 3vw, 32px);
	background: var(--p37sl-bg);
	border-radius: calc(var(--p37sl-radius) + 6px);
}
.p37sl *, .p37sl *::before, .p37sl *::after { box-sizing: border-box; }

/* ---------- header + search ---------- */
.p37sl-head { margin-bottom: 16px; }
.p37sl .p37sl-title {
	margin: 0 0 14px;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--p37sl-title);
}
.p37sl--dark .p37sl-title { text-transform: uppercase; letter-spacing: .06em; }
.p37sl-search { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.p37sl .p37sl-search input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--p37sl-line);
	border-radius: 999px;
	background: var(--p37sl-input-bg);
	color: var(--p37sl-text);
	font: inherit;
	font-size: 16px; /* prevents iOS zoom */
	box-shadow: none;
	outline: none;
	transition: border-color .15s;
}
.p37sl .p37sl-search input[type="search"]::placeholder { color: var(--p37sl-muted); opacity: 1; }
.p37sl .p37sl-search input[type="search"]:focus { border-color: var(--p37sl-accent); }
.p37sl .p37sl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 46px; margin: 0; padding: 0 22px;
	border: 1.5px solid var(--p37sl-outline);
	border-radius: 999px;
	background: transparent;
	color: var(--p37sl-outline);
	font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .08em;
	line-height: 1; text-transform: uppercase; cursor: pointer;
	box-shadow: none;
	transition: background .15s, color .15s, border-color .15s;
}
.p37sl .p37sl-btn:hover { background: var(--p37sl-outline); color: var(--p37sl-btn-text); }
.p37sl .p37sl-btn--solid { background: var(--p37sl-btn-bg); border-color: var(--p37sl-btn-bg); color: var(--p37sl-btn-text); }
.p37sl .p37sl-btn--solid:hover { background: var(--p37sl-btn-hover); border-color: var(--p37sl-btn-hover); color: var(--p37sl-btn-text); }
.p37sl .p37sl-btn:focus-visible, .p37sl-card:focus-visible { outline: 2px solid var(--p37sl-accent); outline-offset: 2px; }

.p37sl .p37sl-status {
	margin: 10px 2px 0; min-height: 1.4em;
	font-size: 14px; color: var(--p37sl-muted);
}
.p37sl .p37sl-clear {
	margin: 0 0 0 6px; padding: 0; border: 0; background: none;
	color: var(--p37sl-accent); font: inherit; font-weight: 600;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.p37sl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- list + map ---------- */
.p37sl-body {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	height: var(--p37sl-h);
	border: 1px solid var(--p37sl-line);
	border-radius: var(--p37sl-radius);
	overflow: hidden;
	background: var(--p37sl-panel);
}
.p37sl-list {
	position: relative;
	margin: 0; padding: 8px;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-right: 1px solid var(--p37sl-line);
	background: var(--p37sl-panel);
	scrollbar-color: var(--p37sl-line) transparent;
}
.p37sl .p37sl-card {
	margin: 0 0 6px; padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	list-style: none;
	transition: background .15s, border-color .15s;
}
.p37sl .p37sl-card:hover { background: var(--p37sl-hover); }
.p37sl .p37sl-card.is-active {
	background: var(--p37sl-hover);
	border-color: var(--p37sl-accent);
	box-shadow: inset 3px 0 0 var(--p37sl-accent);
}
.p37sl-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.p37sl .p37sl-name {
	margin: 0; padding: 0;
	font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
	color: var(--p37sl-text); letter-spacing: 0; text-transform: none;
}
.p37sl-dist {
	flex: none;
	font-size: 13px; font-weight: 700;
	color: var(--p37sl-accent);
	font-variant-numeric: tabular-nums;
}
.p37sl .p37sl-addr, .p37sl .p37sl-hours { margin: 4px 0 0; font-size: 14px; color: var(--p37sl-muted); }
.p37sl-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.p37sl .p37sl-link {
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--p37sl-text); text-decoration: none;
	border-bottom: 1.5px solid var(--p37sl-accent);
	padding-bottom: 1px;
}
.p37sl .p37sl-link:hover { color: var(--p37sl-accent); }
.p37sl .p37sl-empty { padding: 24px 16px; color: var(--p37sl-muted); font-size: 14px; list-style: none; }

.p37sl-map { width: 100%; height: 100%; min-height: 300px; background: var(--p37sl-map-bg); z-index: 0; }
.p37sl--map-mono .leaflet-tile-pane { filter: grayscale(1) contrast(1.04) brightness(1.03); }
.p37sl--map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(.82) contrast(1.15); }

/* pins */
.p37sl-pin { background: none; border: 0; }
.p37sl-pin span {
	position: absolute; left: 3px; top: 1px;
	width: 22px; height: 22px;
	background: var(--p37sl-pin);
	border: 2px solid var(--p37sl-pin-ring);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 2px 8px rgba(0,0,0,.45);
	transition: background .15s, transform .15s;
}
.p37sl-pin span::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 6px; height: 6px; margin: -3px 0 0 -3px;
	border-radius: 50%; background: var(--p37sl-pin-dot);
}
.p37sl-pin:hover span { background: var(--p37sl-accent); }
.p37sl-pin.is-active span { background: var(--p37sl-accent); transform: rotate(-45deg) scale(1.25); }
.p37sl--dark .p37sl-pin.is-active span { background: #fff3d6; box-shadow: 0 0 0 4px color-mix(in srgb, var(--p37sl-accent) 45%, transparent), 0 2px 8px rgba(0,0,0,.5); }

/* popups + controls */
.p37sl .leaflet-popup-content-wrapper, .p37sl .leaflet-popup-tip { background: var(--p37sl-panel); color: var(--p37sl-text); }
.p37sl .leaflet-popup-content-wrapper { border-radius: 10px; border: 1px solid var(--p37sl-line); }
.p37sl .leaflet-popup-content { margin: 12px 14px; font: inherit; font-size: 14px; line-height: 1.45; color: var(--p37sl-text); }
.p37sl .p37sl-pop strong { color: var(--p37sl-text); }
.p37sl .p37sl-pop a { color: var(--p37sl-text); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--p37sl-accent); }
.p37sl .leaflet-container a.leaflet-popup-close-button { color: var(--p37sl-muted); }
.p37sl .leaflet-tooltip { background: var(--p37sl-panel); color: var(--p37sl-text); border-color: var(--p37sl-line); }
.p37sl--dark .leaflet-bar a { background: var(--p37sl-panel); color: var(--p37sl-accent); border-bottom-color: var(--p37sl-line); }
.p37sl--dark .leaflet-bar a:hover { background: var(--p37sl-hover); }
.p37sl--dark .leaflet-bar { border: 1px solid var(--p37sl-line); box-shadow: none; }
.p37sl--dark .leaflet-control-attribution { background: rgba(0,0,0,.6); color: var(--p37sl-muted); }
.p37sl--dark .leaflet-control-attribution a { color: var(--p37sl-accent); }

/* ---------- mobile: map on top, list below ---------- */
@media (max-width: 860px) {
	.p37sl-body { display: flex; flex-direction: column; height: auto; }
	.p37sl-map { order: -1; height: 340px; min-height: 0; flex: none; }
	.p37sl-list { max-height: none; overflow: visible; border-right: 0; border-top: 1px solid var(--p37sl-line); }
	.p37sl .p37sl-btn { padding: 0 16px; }
	.p37sl .p37sl-search input[type="search"] { flex-basis: 100%; }
	.p37sl-search .p37sl-btn { flex: 1 1 0; }
	.p37sl.p37sl--dark { padding: 16px; border-radius: var(--p37sl-radius); }
}