/* FVP Vermogensplanner zoeker – uses the theme's preset colours so it follows futurevermogensplanning-theme. */
.fvp-pf {
	--fvp-accent: var(--wp--preset--color--accent, #e9530d);
	--fvp-accent-hover: var(--wp--preset--color--accent-hover, #c7440a);
	--fvp-mint: var(--wp--preset--color--mint, #98cdab);
	--fvp-dark: var(--wp--preset--color--primary, #243830);
	--fvp-text: var(--wp--preset--color--contrast, #101b15);
	--fvp-muted: var(--wp--preset--color--muted, #66736d);
	--fvp-surface: var(--wp--preset--color--surface, #edf2f7);
	--fvp-line: #d9e0e6;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding: 0 16px 4rem;
	color: var(--fvp-text);
}

.fvp-pf [hidden] {
	display: none !important;
}

.fvp-pf *,
.fvp-pf *::before,
.fvp-pf *::after {
	box-sizing: inherit;
}

/* View tabs */
.fvp-pf__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.fvp-pf__tab {
	padding: 0.55rem 1.3rem;
	border: 2px solid var(--fvp-dark);
	border-radius: 999px;
	background: transparent;
	color: var(--fvp-dark);
	font: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}

.fvp-pf__tab[aria-selected="true"] {
	background: var(--fvp-dark);
	color: #fff;
}

.fvp-pf__tab:focus-visible,
.fvp-pf__pager button:focus-visible,
.fvp-pf__website:focus-visible {
	outline: 3px solid var(--fvp-mint);
	outline-offset: 3px;
}

/* Layout */
.fvp-pf__layout {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (max-width: 860px) {
	.fvp-pf__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
}

/* Filters */
.fvp-pf__filters {
	display: grid;
	gap: 1rem;
	padding: 1.5rem;
	border-radius: 20px;
	background: var(--fvp-surface);
}

@media (min-width: 861px) {
	.fvp-pf__filters {
		position: sticky;
		top: 7rem;
	}
}

.fvp-pf__field {
	display: grid;
	gap: 0.35rem;
}

.fvp-pf__field label {
	font-weight: 700;
	font-size: 0.85rem;
}

.fvp-pf__field input,
.fvp-pf__field select {
	width: 100%;
	min-height: 2.8rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--fvp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--fvp-text);
	font: inherit;
	font-size: 1rem;
}

.fvp-pf__field input:focus,
.fvp-pf__field select:focus {
	outline: 3px solid var(--fvp-mint);
	outline-offset: 1px;
	border-color: var(--fvp-dark);
}

.fvp-pf__submit {
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.8rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--fvp-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.fvp-pf__submit:hover {
	background: var(--fvp-accent-hover);
}

.fvp-pf__submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.fvp-pf__reset {
	justify-self: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fvp-muted);
	font: inherit;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

/* Results */
.fvp-pf__status {
	margin: 0 0 1rem;
	color: var(--fvp-muted);
	font-size: 0.9rem;
}

.fvp-pf__status:empty {
	display: none;
}

.fvp-pf .fvp-pf__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fvp-pf__card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem;
	border: 1px solid var(--fvp-line);
	border-radius: 20px;
	background: #fff;
}

.fvp-pf__card-text {
	min-width: 0;
	flex: 1 1 260px;
}

.fvp-pf .fvp-pf__name {
	margin: 0 0 0.25rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.fvp-pf__name a {
	color: inherit;
	text-decoration: none;
}

.fvp-pf__name a:hover {
	color: var(--fvp-accent);
}

.fvp-pf .fvp-pf__subtitle,
.fvp-pf .fvp-pf__address,
.fvp-pf .fvp-pf__contact {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	overflow-wrap: anywhere;
}

.fvp-pf .fvp-pf__subtitle {
	color: var(--fvp-muted);
}

.fvp-pf__distance {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var(--fvp-surface);
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}

.fvp-pf__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--fvp-text);
	text-decoration: none;
}

.fvp-pf__contact a:hover {
	color: var(--fvp-accent);
}

.fvp-pf__icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	background: var(--fvp-mint);
	-webkit-mask: var(--fvp-icon) center / contain no-repeat;
	mask: var(--fvp-icon) center / contain no-repeat;
}

.fvp-pf__icon--mail {
	--fvp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 2.4V17h16V7.4l-8 5.6-8-5.6ZM5.5 7l6.5 4.55L18.5 7h-13Z'/%3E%3C/svg%3E");
}

.fvp-pf__icon--phone {
	--fvp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1l-2.2 2.2Z'/%3E%3C/svg%3E");
}

.fvp-pf__website {
	flex: none;
	padding: 0.6rem 1.2rem;
	border: 2px solid var(--fvp-mint);
	border-radius: 999px;
	color: var(--fvp-dark);
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	white-space: nowrap;
}

.fvp-pf__website:hover {
	background: var(--fvp-mint);
	color: var(--fvp-text);
}

/* Pager */
.fvp-pf__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1.5rem;
}

.fvp-pf__pager:empty {
	display: none;
}

.fvp-pf__pager button {
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid var(--fvp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--fvp-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.fvp-pf__pager button[aria-current="page"] {
	border-color: var(--fvp-dark);
	background: var(--fvp-dark);
	color: #fff;
}

.fvp-pf__pager button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Map */
.fvp-pf__map {
	width: 100%;
	height: min(70vh, 640px);
	min-height: 380px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--fvp-surface);
	z-index: 0;
}

.fvp-pf__pin {
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	background: var(--fvp-accent);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transform: rotate(-45deg);
}

.fvp-pf__radius {
	stroke: var(--fvp-dark);
	stroke-width: 2;
	fill: var(--fvp-mint);
	fill-opacity: 0.12;
}

.fvp-pf__popup {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: inherit;
}

.fvp-pf__popup .fvp-pf__card {
	padding: 0;
	border: 0;
}

.fvp-pf .leaflet-popup-content {
	margin: 1rem 1.1rem;
	font-family: inherit;
}

/* Leaflet colours every link inside the map blue; keep the card styling in popups. */
.fvp-pf .leaflet-container a.fvp-pf__website {
	color: var(--fvp-dark);
}

.fvp-pf .leaflet-container .fvp-pf__contact a {
	color: var(--fvp-text);
}

.fvp-pf .leaflet-container .fvp-pf__name a {
	color: var(--fvp-accent);
}