/**
 * Wav-E Store Finder — restyle for the native WPSL [wpsl] locator.
 *
 * The result card markup is produced server-side by WPSL via the
 * wpsl_listing_template filter (see wave-location-finder.php), so the
 * .wave-lf-sf-* classes below are real DOM, not injected. The rest targets
 * WPSL's own ids/classes (verified against wp-store-locator/css/styles.css and
 * frontend/templates/default.php). WPSL styles with #wpsl-wrap #id selectors,
 * so the layout overrides here carry matching (or higher) specificity.
 *
 * Scoped entirely to #wpsl-* / .wave-lf-sf-* — inert on pages without the locator.
 */

:root {
	--wave-sf-accent: #c4d82e;          /* Wav-E lime — buttons, highlights */
	--wave-sf-accent-hover: #b1c421;
	--wave-sf-accent-dark: #7f8f1c;     /* "Meest dichtbij" text */
	--wave-sf-ink: #1d1d1b;             /* near-black text / on-accent text */
	--wave-sf-muted: #6b6b6b;           /* address / phone text */
	--wave-sf-card-bg: #f2efeb;
	--wave-sf-card-border: #e8e8e3;
	--wave-sf-field-h: 52px;
	--wave-sf-col-h: 480px;             /* shared height for map + result list */
	--wave-sf-radius: 14px;
	--wave-sf-gap: 24px;
}

/* ============================================================
 * 1. LAYOUT — search full width, map LEFT, result list RIGHT
 * ------------------------------------------------------------
 * WPSL defaults: #wpsl-gmap { float:right; width:66.5% }, #wpsl-result-list
 * { width:33% }. #wpsl-wrap is already overflow:hidden (a BFC), so floats are
 * contained without extra clearfix. We flip the sides and rebalance widths.
 * ============================================================ */

/* Two columns: LEFT = search bar (top) + map (below); RIGHT = result list,
   spanning the full height of both (mockup). Grid (not floats) so the list top
   aligns with the search bar, not the map. */
#wpsl-wrap {
	display: grid;
	grid-template-columns: 47% 50%;
	grid-template-areas:
		"search list"
		"map    list";
	/* Row 1 is fixed to the search-bar height and row 2 grows: the result list
	   spans both rows, so when it lengthens (load-more) only row 2 absorbs the
	   extra height — the map keeps a constant distance below the search bar
	   instead of being shoved down. */
	grid-template-rows: var(--wave-sf-field-h) auto;
	column-gap: 3%;
	row-gap: var(--wave-sf-gap);
	align-items: start;
	overflow: visible;
	margin-bottom: 24px;
}

#wpsl-wrap #wpsl-gmap {
	grid-area: map;
	width: auto;
	height: var(--wave-sf-col-h);
	margin: 0;
	border-radius: var(--wave-sf-radius);
	overflow: hidden;
}

#wpsl-wrap #wpsl-result-list {
	grid-area: list;
	width: auto;
	margin: 0;
}

/* No internal scroll — the load-more button (store-finder.js) controls length.
   WPSL's get_custom_css() prints an inline <style> with
   `#wpsl-stores, #wpsl-direction-details, #wpsl-gmap {height:<map height>px !important}`
   (class-frontend.php, driven by the WPSL "height" setting), which clamps the
   growing list so revealed cards overlap the load-more button. Our two-ID
   selector + !important outranks that single-ID rule, so the list grows; the map
   keeps WPSL's height. overflow:visible keeps the nearest-card accent ring from
   being clipped. */
#wpsl-wrap #wpsl-stores {
	height: auto !important;
	overflow: visible;
	padding: 2px 4px;
}

#wpsl-wrap #wpsl-stores ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#wpsl-wrap .wpsl-provided-by {
	grid-column: 1 / -1;
}

/* Load-more: hidden cards + the "Meer studio's laden" pill */
.wave-lf-sf-hidden {
	display: none !important;
}

/* Smooth reveal for cards shown via "Meer studio's laden" — store-finder.js adds
   .wave-lf-sf-reveal (lightly staggered) to each newly-shown card so they fade/
   slide in rather than appearing instantly. */
@keyframes wave-lf-sf-reveal-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card.wave-lf-sf-reveal {
	animation: wave-lf-sf-reveal-in .35s ease both;
}

@media (prefers-reduced-motion: reduce) {
	#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card.wave-lf-sf-reveal {
		animation: none;
	}
}

.wave-lf-sf-more {
	display: block;
	margin: 18px auto 0;
	padding: 13px 32px;
	border: 1px solid var(--wave-sf-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--wave-sf-ink);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.wave-lf-sf-more:hover {
	background: var(--wave-sf-ink);
	color: #fff;
}

/* Stack below ~992px: the 47% column is too narrow for the search bar to stay on
   one row there, and a wrapped search would overflow the fixed search row and
   slide under the map. Stacking gives the search full width (one clean row). */
@media (max-width: 991px) {
	#wpsl-wrap {
		grid-template-columns: 1fr;
		grid-template-rows: auto;          /* single column stacks; let each row size itself */
		grid-template-areas:
			"search"
			"map"
			"list";
	}
	#wpsl-wrap #wpsl-gmap {
		height: 320px;
	}
	#wpsl-wrap #wpsl-stores {
		height: auto;
		max-height: none;
	}
}

/* ============================================================
 * 2. SEARCH BAR — clean single row: input (grow) + radius + ZOEK
 * ------------------------------------------------------------
 * WPSL markup: .wpsl-search > #wpsl-search-wrap > form >
 *   .wpsl-input (label + #wpsl-search-input)
 *   .wpsl-select-wrap (#wpsl-radius / #wpsl-results > .wpsl-dropdown)
 *   .wpsl-search-btn-wrap > #wpsl-search-btn
 * ============================================================ */

/* Search bar = top of the left column (placed by the grid above). */
#wpsl-wrap .wpsl-search {
	grid-area: search;
	margin: 0;
	padding: 0;
	background: transparent;
}

#wpsl-wrap #wpsl-search-wrap form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

#wpsl-wrap .wpsl-input {
	/* Small basis + min-width:0 so the input shrinks rather than wrapping the row
	   in the 2-column layout — a wrapped search would overflow the fixed search
	   row and slide under the map. It still flex-grows to fill on wider screens. */
	flex: 1 1 160px;
	min-width: 0;
	margin: 0;
	display: block;        /* WPSL sets this to display:table — reset to a plain block column */
}

/* Visually hide WPSL's field labels — the placeholder + dropdown carry meaning. */
#wpsl-wrap .wpsl-input > div:first-child,
#wpsl-wrap #wpsl-radius label,
#wpsl-wrap #wpsl-results label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

#wpsl-wrap #wpsl-search-input {
	width: 100%;
	height: var(--wave-sf-field-h);
	padding: 0 18px;
	margin: 0;
	border: 1px solid var(--wave-sf-card-border);
	border-radius: 10px;
	background: var(--wave-sf-card-bg);
	font-size: 15px;
	box-sizing: border-box;
}

#wpsl-wrap .wpsl-select-wrap {
	display: flex;
	gap: 10px;
	margin: 0;
}

#wpsl-wrap #wpsl-radius,
#wpsl-wrap #wpsl-results {
	margin: 0;
	width: auto;   /* override WPSL's <=570px {width:50%}, which stretches the wrapper
	                  far wider than the dropdown and opens a big gap between the two */
}

/* Native <select> — used on mobile, or when wpsl_enable_styled_dropdowns is off. */
#wpsl-wrap #wpsl-radius select,
#wpsl-wrap #wpsl-results select {
	height: var(--wave-sf-field-h);
	padding: 0 14px;
	border: 1px solid var(--wave-sf-card-border);
	border-radius: 10px;
	background: var(--wave-sf-card-bg);
	font-size: 14px;
	box-sizing: border-box;
}

/* WPSL's custom dropdown widget (default on desktop): its JS hides the <select>
   and builds .wpsl-dropdown > .wpsl-selected-item (+ a black :after caret) at a
   fixed 90px width. Override those to match the clean Wav-E pill. */
#wpsl-wrap .wpsl-dropdown {
	width: auto !important;
	min-width: 96px;
	height: var(--wave-sf-field-h);
	border: 1px solid var(--wave-sf-card-border);
	border-radius: 10px;
	background: var(--wave-sf-card-bg);
	box-sizing: border-box;
}

#wpsl-wrap #wpsl-results .wpsl-dropdown {
	min-width: 80px;
}

#wpsl-wrap .wpsl-dropdown .wpsl-selected-item {
	padding: 0 36px 0 16px !important;   /* beat WPSL's 9px 12px !important + 35px right */
	line-height: 50px;                   /* vertically centre within the 52px field */
	font-size: 14px;
	color: var(--wave-sf-ink);
}

#wpsl-wrap .wpsl-selected-item:after {
	right: 14px;
	border-top-color: var(--wave-sf-ink);
}

#wpsl-wrap .wpsl-active .wpsl-selected-item:after {
	border-bottom-color: var(--wave-sf-ink);
}

#wpsl-wrap .wpsl-dropdown li {
	padding: 9px 16px !important;
	font-size: 14px;
}

#wpsl-wrap .wpsl-search-btn-wrap {
	margin: 0;
}

/* Override WPSL's grey gradient submit button. */
#wpsl-wrap #wpsl-search-btn {
	display: inline-block;
	height: var(--wave-sf-field-h);
	padding: 0 28px;
	border: 0;
	border-radius: 10px;
	background: var(--wave-sf-accent);
	background-image: none;
	color: var(--wave-sf-ink);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase !important;   /* beat WPSL's text-transform:none !important */
	letter-spacing: .03em;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

#wpsl-wrap #wpsl-search-btn:hover {
	background: var(--wave-sf-accent-hover);
}

/* ============================================================
 * 3. RESULT CARDS
 * ------------------------------------------------------------
 * Override WPSL's default li (#wpsl-wrap #wpsl-result-list li, two ids) — so
 * these selectors must keep that weight to win.
 * ============================================================ */

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 14px;
	padding: 20px 22px;
	background: var(--wave-sf-card-bg);
	border: 1px solid var(--wave-sf-card-border);
	border-radius: var(--wave-sf-radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
	overflow: visible;
	list-style: none;
	cursor: pointer;
	transition: box-shadow .15s ease, border-color .15s ease;
}

/* The whole card is clickable (opens the store's map marker — see store-finder.js).
   Hover + keyboard-focus highlight to signal that. */
#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card:hover {
	border-color: var(--wave-sf-accent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card:focus-visible {
	border-color: var(--wave-sf-accent);
	box-shadow: 0 0 0 2px var(--wave-sf-accent);
	outline: none;
}

/* Left column grows; min-width:0 lets a long name wrap instead of shoving the
   action column off the card. The action column then sizes to its own content,
   so cards without a "Plan hier" button no longer leave a wide empty gutter. */
#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wave-lf-sf-info {
	flex: 1 1 auto;
	min-width: 0;
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card:last-child {
	margin-bottom: 0;
}

/* Nearest (first) card: lime outline + reveal the badge. */
#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card:first-child {
	border-color: var(--wave-sf-accent);
	box-shadow: 0 0 0 1px var(--wave-sf-accent);
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card:first-child .wave-lf-sf-badge {
	display: inline-block;
}

/* Card text (reset WPSL's inner <p> padding/margins). */
#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card p {
	margin: 0 0 6px;
	padding: 0;
	color: var(--wave-sf-muted);
	font-size: 14px;
	line-height: 1.5;
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wave-lf-sf-name {
	position: relative;
	margin-bottom: 8px;
	padding-left: 26px;
}

/* Location pin before the store name (mockup). */
#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wave-lf-sf-name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wave-lf-sf-name strong {
	font-size: 18px;
	font-weight: 700;
	overflow-wrap: anywhere;   /* a long store name can't overflow into the action column */
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wave-lf-sf-name strong a {
	color: var(--wave-sf-ink);
	text-decoration: none;
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wave-lf-sf-name strong a:hover {
	color: var(--wave-sf-accent-dark);
}

#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wave-lf-sf-address,
#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wave-lf-sf-phone {
	position: relative;
	padding-left: 26px;
}

/* Compact address like the mockup — drop the "Nederland" country line.
   (Dropping the state and the zip/city order is a WPSL address-format setting.) */
#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card .wpsl-country {
	display: none;
}

.wave-lf-sf-ico {
	position: absolute;
	left: 0;
	top: 1px;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.wave-lf-sf-ico-pin {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.wave-lf-sf-ico-phone {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* ============================================================
 * 4. WAV-E ACTION COLUMN — badge, Plan-hier button, Bekijk-studio link
 * ============================================================ */

.wave-lf-sf-actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}

.wave-lf-sf-badge {
	display: none;        /* shown on the first card via the rule above */
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wave-sf-accent-dark);
}

.wave-lf-sf-plan {
	display: inline-block;
	padding: 11px 22px;
	background: var(--wave-sf-accent);
	color: var(--wave-sf-ink) !important;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration: none !important;
	border-radius: 8px;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.wave-lf-sf-plan:hover {
	background: var(--wave-sf-accent-hover);
	color: var(--wave-sf-ink) !important;
}

.wave-lf-sf-view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wave-sf-ink) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .15s ease;
}

.wave-lf-sf-view:hover {
	color: var(--wave-sf-accent-dark) !important;
}

.wave-lf-sf-arrow {
	transition: transform .15s ease;
}

.wave-lf-sf-view:hover .wave-lf-sf-arrow {
	transform: translateX(3px);
}

@media (max-width: 600px) {
	#wpsl-wrap #wpsl-result-list li.wave-lf-sf-card {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.wave-lf-sf-actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		text-align: left;
	}
}