/**
 * Flatsome child: Codemanas Typesense (Autocomplete) styling overrides.
 * Enqueued as effectio-child-typesense-ui (after Codemanas + Flatsome styles).
 */

/* ==========================================================================
   Variables
   ========================================================================== */

body.effectio-search-skin {
	--effectio-ts-radius: 10px;
	--effectio-ts-radius-sm: 6px;
	--effectio-ts-panel-bg-rgb: 255, 255, 255;
	--effectio-ts-panel-bg-alpha: 1;
	--effectio-ts-text-rgb: 51, 51, 51;
	--effectio-ts-text-alpha: 1;
	--effectio-ts-muted-rgb: 110, 110, 120;
	--effectio-ts-muted-alpha: 1;
	--effectio-ts-accent-rgb: 0, 136, 204;
	--effectio-ts-accent-alpha: 1;
	--effectio-ts-border-rgb: 0, 0, 0;
	--effectio-ts-border-alpha: 0.08;
	--effectio-ts-highlight-rgb: 255, 243, 205;
	--effectio-ts-highlight-alpha: 0.95;
	--effectio-ts-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);

	--aa-font-family: inherit;
	--aa-font-size: 15px;
	--aa-base-z-index: 100050;
	--aa-panel-max-height: min(70vh, 560px);
	--aa-panel-shadow: var(--effectio-ts-shadow);
	--aa-text-color-rgb: var(--effectio-ts-text-rgb);
	--aa-text-color-alpha: var(--effectio-ts-text-alpha);
	--aa-muted-color-rgb: var(--effectio-ts-muted-rgb);
	--aa-muted-color-alpha: var(--effectio-ts-muted-alpha);
	--aa-primary-color-rgb: var(--effectio-ts-accent-rgb);
	--aa-primary-color-alpha: 0.22;
	--aa-background-color-rgb: var(--effectio-ts-panel-bg-rgb);
	--aa-background-color-alpha: var(--effectio-ts-panel-bg-alpha);
	--aa-input-background-color-rgb: 255, 255, 255;
	--aa-input-background-color-alpha: 1;
	--aa-input-border-color-rgb: var(--effectio-ts-border-rgb);
	--aa-input-border-color-alpha: 0.12;
	--aa-panel-border-color-rgb: var(--effectio-ts-border-rgb);
	--aa-panel-border-color-alpha: var(--effectio-ts-border-alpha);
	--aa-description-highlight-background-color-rgb: var(--effectio-ts-highlight-rgb);
	--aa-description-highlight-background-color-alpha: var(--effectio-ts-highlight-alpha);
	--aa-selected-color-rgb: var(--effectio-ts-accent-rgb);
	--aa-selected-color-alpha: 0.12;
}

/* ==========================================================================
   Autocomplete dropdown (header search)
   ========================================================================== */

body.effectio-search-skin .aa-InputWrapperPrefix,
body.effectio-search-skin .aa-InputWrapperSuffix {
	align-self: stretch;
}

body.effectio-search-skin .aa-InputWrapper {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Flatsome applies input[type=search] field chrome (inset shadow, border, 2.507em height).
 * .aa-Input is type=search — without a reset it inherits that chrome inside .aa-Form.
 */
body.effectio-search-skin .aa-Input,
body.effectio-search-skin .aa-Input:focus,
body.effectio-search-skin .aa-Input:focus-visible {
	margin: 0 !important;
	box-sizing: border-box;
	line-height: var(--aa-search-input-height);
	min-height: var(--aa-search-input-height);
	height: var(--aa-search-input-height);
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	opacity: 1 !important;
	padding: 0 10px;
	vertical-align: middle;
}

body.effectio-search-skin .aa-Form {
	align-items: stretch;
	box-sizing: border-box;
	border-radius: var(--effectio-ts-radius);
	overflow: hidden;
	min-height: var(--aa-search-input-height);
}

body.effectio-search-skin .aa-Form:focus-within {
	box-shadow: rgba(var(--aa-primary-color-rgb), 0.28) 0 0 0 2px;
}

body.effectio-search-skin .aa-Panel {
	border-radius: var(--effectio-ts-radius);
	overflow: hidden;
	margin-top: 6px;
}

body.effectio-search-skin .aa-PanelLayout {
	max-height: inherit;
}

body.effectio-search-skin .aa-SourceHeader {
	padding: 10px 14px 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(var(--effectio-ts-muted-rgb), 0.85);
	background: rgba(var(--effectio-ts-border-rgb), 0.04);
	border-bottom: 1px solid rgba(var(--effectio-ts-border-rgb), 0.08);
}

body.effectio-search-skin .aa-List {
	padding: 6px 0;
}

body.effectio-search-skin .aa-Item {
	padding: 0;
}

body.effectio-search-skin .aa-Item[aria-selected='true'] {
	background: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha));
}

body.effectio-search-skin .aa-ItemWrapper {
	padding: 10px 14px;
	min-height: 56px;
}

body.effectio-search-skin .aa-ItemContent {
	align-items: flex-start;
	gap: 12px;
}

body.effectio-search-skin .aa-ItemIcon {
	width: 48px;
	height: 48px;
	border-radius: var(--effectio-ts-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: rgba(var(--effectio-ts-border-rgb), 0.06);
}

body.effectio-search-skin .aa-ItemIcon img {
	width: 48px !important;
	height: 48px !important;
	max-width: none;
	object-fit: cover;
	border-radius: var(--effectio-ts-radius-sm);
}

body.effectio-search-skin .aa-ItemContentTitle {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
	color: rgba(var(--effectio-ts-text-rgb), var(--effectio-ts-text-alpha));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.effectio-search-skin .aa-ItemContentDescription {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: rgba(var(--effectio-ts-muted-rgb), 0.85);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 2px;
}

body.effectio-search-skin .aa-ItemContentDescription:empty {
	display: none;
}

body.effectio-search-skin .aa-ItemContentTitle mark,
body.effectio-search-skin .aa-ItemContentTitle .ais-Highlight-highlighted {
	background: rgba(var(--effectio-ts-highlight-rgb), var(--effectio-ts-highlight-alpha));
	padding: 0 0.12em;
	border-radius: 3px;
	font-weight: 600;
}

/* Flatsome .nav-uppercase forces uppercase on descendants — undo for autocomplete */
body.effectio-search-skin .effectio-ts-flatsome-search .aa-ItemContentTitle,
body.effectio-search-skin .effectio-ts-flatsome-search .aa-ItemContentTitle *,
body.effectio-search-skin .effectio-ts-flatsome-search .aa-SourceHeader,
body.effectio-search-skin .effectio-ts-flatsome-search .aa-SourceHeader h5,
body.effectio-search-skin .effectio-ts-flatsome-search .aa-SourceNoResults {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-variant: normal;
}

/* Flatsome: keep autocomplete panel opaque and above sticky header */
body.effectio-search-flatsome {
	--effectio-ts-panel-bg-rgb: 255, 255, 255;
	--effectio-ts-panel-bg-alpha: 1;
	--aa-base-z-index: 100060;
}

body.effectio-search-flatsome .aa-Panel,
body.effectio-search-flatsome .aa-Autocomplete--detached .aa-Panel {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.effectio-search-flatsome .header-search .aa-Autocomplete,
body.effectio-search-flatsome .search-wrapper .aa-Autocomplete {
	width: 100%;
}

body.effectio-search-flatsome #search-lightbox .aa-Panel {
	margin-top: 8px;
}

@media screen and (max-width: 680px) {
	body.effectio-search-skin {
		--aa-panel-max-height: min(78vh, 620px);
		--aa-detached-modal-max-height: min(85vh, 640px);
	}

	body.effectio-search-skin .aa-DetachedSearchButton {
		min-height: 48px;
	}

	body.effectio-search-skin .aa-ItemWrapper {
		padding: 12px 16px;
		min-height: 60px;
	}

	body.effectio-search-skin .aa-ItemIcon,
	body.effectio-search-skin .aa-ItemIcon img {
		width: 52px !important;
		height: 52px !important;
	}
}