/* Frens Page Search — frontend
 * Override any token from Elementor custom CSS, e.g.
 * selector .fps { --fps-radius: 999px; --fps-height: 48px; }
 */

.fps {
	--fps-accent: #2b6777;
	--fps-text: #1f2a30;
	--fps-muted: #5b6a72;
	--fps-bg: #ffffff;
	--fps-border: #d5dde1;
	--fps-hover: #eef4f5;
	--fps-radius: 12px;
	--fps-height: 54px;
	--fps-font-size: 16px;
	--fps-z: 9999;

	position: relative;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	color: var(--fps-text);
	text-align: left;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.fps {
		--fps-hover: color-mix(in srgb, var(--fps-accent) 9%, #ffffff);
	}
}

.fps,
.fps *,
.fps *::before,
.fps *::after {
	box-sizing: border-box;
}

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

/* ---------- field ---------- */

.fps .fps__field {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.fps .fps__icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--fps-muted);
	pointer-events: none;
	transition: color 0.15s ease;
}

.fps .fps__input,
.fps .fps__input[type="text"] {
	display: block !important;
	width: 100% !important;
	height: var(--fps-height) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 46px 0 46px !important;
	font-family: inherit !important;
	font-size: var(--fps-font-size) !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--fps-text) !important;
	background: var(--fps-bg) !important;
	border: 1.5px solid var(--fps-border) !important;
	border-radius: var(--fps-radius) !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fps .fps__input::placeholder {
	color: var(--fps-muted);
	opacity: 1;
}

.fps .fps__input:focus {
	border-color: var(--fps-accent) !important;
	box-shadow: 0 0 0 3px rgba(43, 103, 119, 0.18) !important;
}

@supports (box-shadow: 0 0 0 1px color-mix(in srgb, red 20%, transparent)) {
	.fps .fps__input:focus {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--fps-accent) 22%, transparent) !important;
	}
}

.fps .fps__field:focus-within .fps__icon {
	color: var(--fps-accent);
}

.fps.is-open .fps__input {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.fps .fps__clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fps-muted) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 1 !important;
}

.fps .fps__clear[hidden] {
	display: none !important;
}

.fps .fps__clear:hover,
.fps .fps__clear:focus-visible {
	color: var(--fps-text) !important;
	background: var(--fps-hover) !important;
}

.fps .fps__clear:focus-visible {
	outline: 2px solid var(--fps-accent) !important;
	outline-offset: 1px;
}

/* ---------- suggestions panel ---------- */

.fps .fps__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--fps-z);
	margin-top: -1.5px;
	background: var(--fps-bg);
	border: 1.5px solid var(--fps-accent);
	border-top-color: var(--fps-border);
	border-radius: 0 0 var(--fps-radius) var(--fps-radius);
	box-shadow: 0 14px 30px -12px rgba(20, 40, 50, 0.28);
	overflow: hidden;
}

.fps .fps__panel[hidden] {
	display: none;
}

.fps .fps__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 6px !important;
}

.fps .fps__list:empty {
	display: none;
}

.fps .fps__option {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fps .fps__option::before,
.fps .fps__option::marker {
	content: none !important;
}

.fps .fps__link {
	display: block;
	padding: 11px 14px;
	border-radius: calc(var(--fps-radius) - 4px);
	color: var(--fps-text) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

.fps .fps__option.is-active .fps__link,
.fps .fps__link:focus-visible {
	background: var(--fps-hover);
}

.fps .fps__link:focus-visible {
	outline: 2px solid var(--fps-accent);
	outline-offset: -2px;
}

.fps .fps__title {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
}

.fps .fps__title mark {
	padding: 0;
	color: var(--fps-accent);
	background: none;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.fps .fps__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 3px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--fps-muted);
}

.fps .fps__message {
	margin: 0 !important;
	padding: 16px 18px !important;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--fps-muted);
}

.fps .fps__message[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.fps {
		--fps-height: 50px;
		--fps-font-size: 16px; /* 16px stops iOS zooming on focus */
	}
	.fps .fps__link {
		padding: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fps .fps__input,
	.fps .fps__icon {
		transition: none;
	}
}