/*
 * {C} Better Instant Search.
 *
 * Defaults lean on the Voxel theme's own palette (--ts-shade-*, --ts-accent-1),
 * so an untouched widget matches the site it is on.
 *
 * SPECIFICITY, ON PURPOSE
 *
 * Every default is written at low specificity - scoped with :where(.cvis) - so
 * the widget's Style controls, which Elementor emits as `.elementor-<page>
 * .elementor-element.elementor-element-<id> .cvis-...` (four classes), always
 * win. The exceptions are the input and the clear button:
 * Elementor's site-wide "Form fields" and "Buttons" styles reach every input
 * and button with selectors like `.elementor-kit-5 input:not([type=button])`,
 * so those two resets are deliberately stronger, and their colors travel as
 * custom properties the controls set instead of fighting the same selector.
 */

:where(.cvis) {
	--cvis-text: var(--ts-shade-1, currentColor);
	--cvis-muted: var(--ts-shade-2, currentColor);
	--cvis-border: var(--ts-shade-4, currentColor);
	--cvis-hover: var(--ts-shade-6, transparent);
	--cvis-surface: var(--ts-shade-7, Canvas);
	--cvis-accent: var(--ts-accent-1, currentColor);
	--cvis-radius: 10px;
	--cvis-offset: 6px;
	--cvis-panel-max: 400px;
	--cvis-scroll-width: 8px;
	--cvis-scroll-thumb: var(--ts-shade-3, currentColor);
	--cvis-scroll-track: transparent;

	position: relative;
	width: 100%;
	color: var(--cvis-text);
}

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

:where(.cvis) .cvis-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

:where(.cvis) .cvis-field {
	position: relative;
}

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

:where(.cvis) .cvis-control {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 14px;
	background: var(--cvis-surface);
	border: 1px solid var(--cvis-border);
	border-radius: var(--cvis-radius);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* The focus color travels as a variable so the joined dropdown can match it. */
.cvis .cvis-field .cvis-control:focus-within {
	border-color: var(--cvis-focus-border, var(--cvis-accent));
}

:where(.cvis) .cvis-icon {
	--cvis-icon-size: var(--cvis-search-size, 20px);
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--cvis-icon-color, var(--cvis-muted));
	fill: currentColor;
	font-size: var(--cvis-icon-size);
	line-height: 1;
}

:where(.cvis) .cvis-icon svg,
:where(.cvis) .cvis-icon i,
.cvis .cvis-control button.cvis-clear svg,
.cvis .cvis-control button.cvis-clear i {
	width: var(--cvis-icon-size);
	height: var(--cvis-icon-size);
	font-size: var(--cvis-icon-size);
	line-height: 1;
}

/* Strong on purpose - see the note at the top. */
.cvis .cvis-field .cvis-control input.cvis-input,
.cvis .cvis-field .cvis-control input.cvis-input:focus {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--cvis-input-color, inherit);
	/* 16px: iPhones zoom the page into any field set smaller. The Style tab's typography still wins. */
	font-size: 16px;
	line-height: 1.4;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.cvis .cvis-field .cvis-control input.cvis-input::placeholder {
	color: var(--cvis-placeholder, var(--cvis-muted));
	opacity: 1;
}

.cvis .cvis-field .cvis-control input.cvis-input::-webkit-search-cancel-button,
.cvis .cvis-field .cvis-control input.cvis-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.cvis .cvis-field .cvis-control input.cvis-input:disabled {
	cursor: not-allowed;
}

.cvis .cvis-control button.cvis-clear,
.cvis .cvis-control button.cvis-clear:hover,
.cvis .cvis-control button.cvis-clear:focus {
	--cvis-icon-size: var(--cvis-clear-size, 20px);
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 4px;
	color: var(--cvis-clear-color, var(--cvis-muted));
	fill: currentColor;
	font-size: var(--cvis-icon-size);
	line-height: 1;
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}

.cvis .cvis-control button.cvis-clear:hover,
.cvis .cvis-control button.cvis-clear:focus-visible {
	color: var(--cvis-clear-hover, var(--cvis-text));
}

.cvis .cvis-control button.cvis-clear[hidden] {
	display: none;
}

/* ---------- Spinner (takes the search icon's place while a search runs) ---------- */

:where(.cvis) .cvis-spinner {
	display: none;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--cvis-spinner-size, var(--cvis-search-size, 20px));
	height: var(--cvis-spinner-size, var(--cvis-search-size, 20px));
	border: 2px solid color-mix(in srgb, var(--cvis-spinner-color, var(--cvis-accent)) 25%, transparent);
	border-top-color: var(--cvis-spinner-color, var(--cvis-accent));
	border-radius: 50%;
	animation: cvis-spin .7s linear infinite;
}

.cvis[data-cvis-busy="both"] .cvis-control .cvis-spinner,
.cvis[data-cvis-busy="spinner"] .cvis-control .cvis-spinner {
	display: inline-block;
}

.cvis[data-cvis-busy="both"] .cvis-control .cvis-icon,
.cvis[data-cvis-busy="spinner"] .cvis-control .cvis-icon {
	display: none;
}

/* Spinner only: the last results stay, dimmed, until the new ones arrive. */
.cvis[data-cvis-busy="spinner"] .cvis-results {
	opacity: .55;
	transition: opacity .15s ease;
}

@keyframes cvis-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Search button (strong for the same reason as the clear button) ---------- */

.cvis .cvis-control button.cvis-submit,
.cvis .cvis-control button.cvis-submit:focus {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	margin-inline-end: -6px;
	padding: 8px 16px;
	color: var(--cvis-submit-color, var(--ts-shade-7, Canvas));
	line-height: 1.2;
	white-space: nowrap;
	background: var(--cvis-submit-bg, var(--cvis-accent));
	border: 0;
	border-radius: calc(var(--cvis-radius) - 4px);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.cvis .cvis-control button.cvis-submit:hover,
.cvis .cvis-control button.cvis-submit:focus-visible {
	color: var(--cvis-submit-color-hover, var(--cvis-submit-color, var(--ts-shade-7, Canvas)));
	background: var(--cvis-submit-bg-hover, var(--cvis-submit-bg, var(--cvis-accent)));
}

.cvis .cvis-control button.cvis-submit .cvis-submit-icon {
	display: inline-flex;
	font-size: var(--cvis-submit-icon, 18px);
	fill: currentColor;
}

.cvis .cvis-control button.cvis-submit .cvis-submit-icon svg,
.cvis .cvis-control button.cvis-submit .cvis-submit-icon i {
	width: 1em;
	height: 1em;
	font-size: 1em;
}

@media (max-width: 767px) {
	.cvis-submit-compact-yes .cvis .cvis-control button.cvis-submit .cvis-submit-text {
		display: none;
	}
}

/* ---------- The dropdown ---------- */

:where(.cvis) .cvis-panel {
	position: absolute;
	top: calc(100% + var(--cvis-offset));
	inset-inline-start: 0;
	z-index: 50;
	box-sizing: border-box;
	width: 100%;
	max-height: min(var(--cvis-panel-max), var(--cvis-available, var(--cvis-panel-max)));
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--cvis-surface);
	border: 1px solid var(--cvis-border);
	border-radius: var(--cvis-radius);
	box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--cvis-text) 35%, transparent);
	scrollbar-width: thin;
	scrollbar-color: var(--cvis-scroll-thumb) var(--cvis-scroll-track);
}

.cvis .cvis-panel[hidden] {
	display: none;
}

:where(.cvis) .cvis-panel::-webkit-scrollbar {
	width: var(--cvis-scroll-width);
}

:where(.cvis) .cvis-panel::-webkit-scrollbar-track {
	background: var(--cvis-scroll-track);
}

:where(.cvis) .cvis-panel::-webkit-scrollbar-thumb {
	background: var(--cvis-scroll-thumb);
	border: 2px solid transparent;
	border-radius: 999px;
	background-clip: content-box;
}

/*
 * Joined: the field and the open dropdown read as one box, so the corners where
 * the two meet go square whatever radius or border is set - that is what the
 * switch is for.
 *
 * These have to OUTRANK the Style controls, and Elementor's selectors are
 * stronger than they look: `.elementor-<page> .elementor-element
 * .elementor-element-<id> .cvis-panel` is four classes. At four they tied and
 * Elementor's file, loading later, won - a set radius rounded the joined
 * corners back. `.elementor-element.cvis-attached-yes` (the widget's own
 * wrapper) lifts each rule one class above.
 */
.elementor-element.cvis-attached-yes .cvis .cvis-field .cvis-panel {
	top: 100%;
	border-top-width: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.elementor-element.cvis-attached-yes .cvis[data-cvis-open] .cvis-field .cvis-control {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* ...and while you type in it, the dropdown takes the field's focus border too. */
.elementor-element.cvis-attached-yes .cvis:focus-within .cvis-field .cvis-panel {
	border-color: var(--cvis-focus-border, var(--cvis-accent));
}

:where(.cvis) .cvis-message {
	margin: 0;
	padding: 12px 10px;
	color: var(--cvis-muted);
}

.cvis .cvis-message[hidden] {
	display: none;
}

:where(.cvis) ul.cvis-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Groups (one per post type searched) ---------- */

:where(.cvis) .cvis-group + .cvis-group {
	margin-top: 6px;
}

:where(.cvis) .cvis-group-title {
	margin: 0;
	padding: 8px 10px 4px;
	color: var(--cvis-muted);
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------- "See all results" ---------- */

:where(.cvis) a.cvis-all {
	display: block;
	margin-top: 6px;
	padding: 10px;
	color: var(--cvis-accent);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border-top: 1px solid var(--cvis-border);
	outline: none;
}

:where(.cvis) a.cvis-all:where(:hover, :focus-visible) {
	background: var(--cvis-hover);
}

:where(.cvis) a.cvis-all:where(:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--cvis-accent);
}

/* ---------- Recent searches ---------- */

:where(.cvis) .cvis-recent-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 10px 4px;
}

:where(.cvis) .cvis-recent-title {
	margin: 0;
	color: var(--cvis-muted);
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

:where(.cvis) ul.cvis-recent-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Buttons: strong, because the site's button styles reach every <button>. */
.cvis .cvis-panel button.cvis-recent-item,
.cvis .cvis-panel button.cvis-recent-clear {
	display: block;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: 1.4;
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
	background: transparent;
	border: 0;
	border-radius: calc(var(--cvis-radius) - 4px);
	box-shadow: none;
	cursor: pointer;
}

.cvis .cvis-panel button.cvis-recent-item {
	width: 100%;
	padding: 8px 10px;
	color: var(--cvis-recent-color, var(--cvis-text));
}

.cvis .cvis-panel button.cvis-recent-item:hover,
.cvis .cvis-panel button.cvis-recent-item:focus-visible {
	color: var(--cvis-recent-color, var(--cvis-text));
	background: var(--cvis-recent-hover, var(--cvis-hover));
	outline: none;
}

.cvis .cvis-panel button.cvis-recent-clear,
.cvis .cvis-panel button.cvis-recent-clear:hover,
.cvis .cvis-panel button.cvis-recent-clear:focus-visible {
	padding: 2px 6px;
	color: var(--cvis-recent-clear, var(--cvis-muted));
	font-size: .85em;
	background: transparent;
}

.cvis .cvis-panel button.cvis-recent-clear:hover,
.cvis .cvis-panel button.cvis-recent-clear:focus-visible {
	text-decoration: underline;
	outline: none;
}

/* ---------- Inside a result ---------- */

:where(.cvis) mark.cvis-hit {
	padding: 0;
	color: inherit;
	font-weight: 700;
	background: none;
}

:where(.cvis) .cvis-line-icon {
	display: inline-flex;
	align-items: center;
	margin-inline-end: .35em;
	line-height: 1;
	vertical-align: -.125em;
	fill: currentColor;
}

:where(.cvis) .cvis-line-icon svg,
:where(.cvis) .cvis-line-icon i {
	width: 1em;
	height: 1em;
	font-size: 1em;
}

:where(.cvis) li.cvis-item {
	margin: 0;
	padding: 0;
	border-top-color: var(--cvis-border);
}

/* ---------- A result ---------- */

:where(.cvis) a.cvis-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	color: inherit;
	text-decoration: none;
	border-radius: calc(var(--cvis-radius) - 4px);
	outline: none;
}

:where(.cvis) a.cvis-link:where(:hover, :focus-visible) {
	background: var(--cvis-hover);
}

:where(.cvis) a.cvis-link:where(:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--cvis-accent);
}

:where(.cvis) .cvis-media {
	display: block;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	overflow: hidden;
	background: var(--cvis-hover);
	border-radius: 6px;
}

/* "Drop the image space when there is no image". */
.cvis-noimg-hide-yes .cvis .cvis-media--empty {
	display: none;
}

/* Elementor's own `.elementor img { height: auto }` would undo the crop. */
.cvis .cvis-media img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

:where(.cvis) .cvis-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

:where(.cvis) .cvis-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
	min-width: 0;
}

:where(.cvis) .cvis-line {
	min-width: 0;
	color: var(--cvis-text);
	overflow-wrap: anywhere;
}

/* The first line reads as the title until you style it otherwise. */
:where(.cvis .cvis-row:first-child .cvis-line:first-child) {
	font-weight: 600;
}

:where(.cvis) .cvis-notice {
	display: block;
	margin-top: 6px;
	color: var(--cvis-muted);
	font-size: .9em;
}

@media (prefers-reduced-motion: reduce) {
	:where(.cvis) .cvis-control {
		transition: none;
	}
}