/* =========================================================================
 * UMI Store locator
 * Kaart (Leaflet/OSM) + filterbalk + lijst van salon-kaartjes.
 * Sluit aan op de design-tokens uit main.css (crème/ink, sage, hairlines).
 * ===================================================================== */

.umi-locator {
	margin: 8px 0 56px;
}

/* --- Kop ----------------------------------------------------------------- */
.umi-locator__head {
	max-width: 720px;
	margin: 0 0 28px;
}

.umi-locator__title {
	margin: 8px 0 12px;
	letter-spacing: -.01em;
	text-transform: none;
}

.umi-locator__intro {
	color: var(--ink-soft);
	margin: 0;
}

/* --- Filterbalk ---------------------------------------------------------- */
.umi-locator__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	margin: 0 0 18px;
}

.umi-locator__field {
	display: block;
	margin: 0;
}

.umi-locator__field--search {
	flex: 1 1 320px;
	min-width: 0;
}

.umi-locator__field--province {
	flex: 0 1 240px;
	min-width: 0;
}

.umi-locator__search,
.umi-locator__province {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: .95rem;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.umi-locator__province {
	background-image:
		linear-gradient( 45deg, transparent 50%, var(--ink-soft) 50% ),
		linear-gradient( 135deg, var(--ink-soft) 50%, transparent 50% );
	background-position:
		calc( 100% - 20px ) calc( 50% - 3px ),
		calc( 100% - 15px ) calc( 50% - 3px );
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
	cursor: pointer;
}

.umi-locator__search:focus,
.umi-locator__province:focus {
	outline: none;
	border-color: var(--sage-dark);
	box-shadow: 0 0 0 3px var(--sage-soft);
}

.umi-locator__search::placeholder {
	color: var(--ink-mute);
}

.umi-locator__reset {
	flex: 0 0 auto;
	min-height: 48px;
	min-width: 88px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Kaart --------------------------------------------------------------- */
.umi-locator__map {
	height: 460px;
	width: 100%;
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line-soft);
	background: var(--bg-soft);
	z-index: 0; /* houd Leaflet-panes onder de site-header */
}

/* Leaflet-bedieningen / attributie in de thema-stijl. */
.umi-locator__map .leaflet-container {
	font-family: inherit;
	background: var(--bg-soft);
}

.umi-locator__map .leaflet-bar a {
	color: var(--ink);
	border-bottom-color: var(--line-soft);
}

.umi-locator__map .leaflet-control-attribution {
	background: rgba( 255, 255, 255, .82 );
	color: var(--ink-mute);
	font-size: 11px;
}

.umi-locator__map .leaflet-control-attribution a {
	color: var(--ink-soft);
}

/* --- Popup --------------------------------------------------------------- */
.leaflet-popup-content .umi-locator-popup {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: inherit;
}

.umi-locator-popup__name {
	font-size: 1rem;
	color: var(--ink);
	font-weight: 600;
}

.umi-locator-popup__addr {
	color: var(--ink-soft);
	font-size: .86rem;
	line-height: 1.45;
}

.umi-locator-popup__site {
	color: var(--success);
	font-weight: 600;
	font-size: .86rem;
	text-decoration: none;
	margin-top: 2px;
}

.umi-locator-popup__site:hover {
	text-decoration: underline;
}

/* --- Resultaten-teller --------------------------------------------------- */
.umi-locator__count {
	margin: 16px 0 14px;
	color: var(--ink-mute);
	font-size: .85rem;
	letter-spacing: .01em;
}

.umi-locator__count:empty {
	display: none;
}

/* --- Lijst (grid van kaartjes) ------------------------------------------ */
.umi-locator-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 16px;
}

.umi-salon-card {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-lg);
	padding: 22px;
	display: flex;
	flex-direction: column;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.umi-salon-card[role="button"] {
	cursor: pointer;
}

.umi-salon-card[role="button"]:hover {
	border-color: var(--sage-dark);
	box-shadow: 0 8px 24px rgba( 26, 24, 20, .06 );
	transform: translateY( -2px );
}

.umi-salon-card:focus-visible {
	outline: none;
	border-color: var(--sage-dark);
	box-shadow: 0 0 0 3px var(--sage-soft);
}

.umi-salon-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.umi-salon-card__province {
	margin: 0 0 2px;
}

.umi-salon-card__name {
	margin: 0;
	font-size: 1.1rem;
	letter-spacing: -.005em;
	text-transform: none;
	color: var(--ink);
}

.umi-salon-card__city {
	margin: 0;
	color: var(--ink);
	font-weight: 500;
	font-size: .95rem;
}

.umi-salon-card__address {
	margin: 2px 0 0;
	color: var(--ink-soft);
	font-size: .86rem;
	line-height: 1.5;
}

.umi-salon-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
}

.umi-salon-card__link {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	color: var(--ink-soft);
	font-size: .86rem;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s ease;
}

.umi-salon-card__link:hover {
	color: var(--ink);
}

.umi-salon-card__link--site {
	color: var(--success);
}

.umi-salon-card__link--site:hover {
	color: var(--success);
	text-decoration: underline;
}

/* --- Lege staat / geen resultaten --------------------------------------- */
.umi-locator__empty {
	grid-column: 1 / -1;
	background: var(--card-soft);
	border: 1px dashed var(--line);
	border-radius: var(--r-lg);
	padding: 36px 28px;
	text-align: center;
	color: var(--ink-soft);
}

.umi-locator__empty p {
	margin: 0;
}

/* --- Responsive ---------------------------------------------------------- */
@media ( max-width: 760px ) {
	.umi-locator__map {
		height: 320px;
	}

	.umi-locator__filters {
		flex-direction: column;
	}

	.umi-locator__field--search,
	.umi-locator__field--province {
		flex: 1 1 auto;
	}

	.umi-locator__reset {
		width: 100%;
	}

	.umi-locator-list {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 420px ) {
	.umi-locator {
		margin-bottom: 40px;
	}

	.umi-salon-card {
		padding: 18px;
	}
}