/* =========================================================
   EcoVG TV Header Search
   Premium white header style
========================================================= */

.header-user {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-left: auto;
	min-width: 0;
}

.header-user__search {
	position: relative;
	display: flex !important;
	align-items: center;
	flex: 0 1 500px;
	width: 500px;
	max-width: 500px;
	min-width: 250px;
}

.header-user__search > .ecovg-header-search--mounted {
	display: block;
	width: 100%;
	min-width: 0;
}


/* =========================================================
   MAIN SEARCH WRAPPER
========================================================= */

.ecovg-header-search {
	position: relative;
	width: 100%;
	min-width: 0;
	z-index: 99990;
	font-family: inherit;
}

.ecovg-header-search--template {
	display: none !important;
}

.ecovg-header-search--mounted {
	display: block !important;
}


/* =========================================================
   SEARCH BAR
========================================================= */

.ecovg-header-search__form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;

	margin: 0;
	padding: 0 4px 0 0;

	background:
		linear-gradient(
			180deg,
			#f8fafe 0%,
			#f2f5f9 100%
		);

	border: 1px solid #dbe3ed;
	border-radius: 999px;

	box-sizing: border-box;

	box-shadow:
		0 4px 14px rgba(25, 45, 75, 0.06);

	overflow: hidden;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}

.ecovg-header-search__form:hover {
	border-color: #cbd6e4;
}

.ecovg-header-search__form:focus-within {
	background: #ffffff;
	border-color: #b8c8df;

	box-shadow:
		0 6px 22px rgba(0, 60, 151, 0.10);
}


/* =========================================================
   LEFT FILTER ICON
========================================================= */

.ecovg-header-search__leading {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 54px;

	width: 54px;
	height: 46px;

	color: #66758a;

	border-right: 1px solid #dde4ec;

	pointer-events: none;
}

.ecovg-header-search__leading svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}


/* =========================================================
   INPUT
========================================================= */

.ecovg-header-search__input {
	flex: 1 1 auto;

	width: 100%;
	min-width: 0;

	height: 46px !important;

	margin: 0 !important;

	padding:
		0 14px !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;

	box-shadow: none !important;
	outline: none !important;

	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 46px !important;

	color: #243247 !important;

	-webkit-appearance: none;
	appearance: none;
}

.ecovg-header-search__input::placeholder {
	color: #8491a5;
	opacity: 1;
}

.ecovg-header-search__input::-webkit-search-cancel-button {
	display: none;
}


/* =========================================================
   CLEAR BUTTON
========================================================= */

.ecovg-header-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 30px;

	width: 30px;
	height: 30px;

	margin: 0 4px 0 0;
	padding: 0;

	border: 0;

	background: transparent;

	color: #738096;

	font-size: 20px;
	line-height: 1;

	cursor: pointer;

	border-radius: 50%;
}

.ecovg-header-search__clear[hidden] {
	display: none !important;
}

.ecovg-header-search__clear:hover {
	background: #e7edf5;
	color: #25344a;
}


/* =========================================================
   BLUE SEARCH BUTTON
========================================================= */

.ecovg-header-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 40px;

	width: 40px;
	height: 40px;

	margin: 0;

	padding: 0;

	border: 0 !important;

	border-radius: 50% !important;

	background:
		linear-gradient(
			135deg,
			#2879ff 0%,
			#075ce4 100%
		) !important;

	color: #ffffff !important;

	box-shadow:
		0 4px 12px rgba(11, 94, 225, 0.28);

	cursor: pointer;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease;
}

.ecovg-header-search__submit svg {
	display: block;

	width: 19px;
	height: 19px;

	fill: currentColor;
}

.ecovg-header-search__submit:hover,
.ecovg-header-search__submit:focus {
	background:
		linear-gradient(
			135deg,
			#1268f7 0%,
			#004fcf 100%
		) !important;

	color: #ffffff !important;

	transform: translateY(-1px);

	box-shadow:
		0 6px 16px rgba(11, 94, 225, 0.34);

	outline: none;
}


/* =========================================================
   AJAX DROPDOWN
========================================================= */

.ecovg-header-search__results {
	position: absolute;

	top: calc(100% + 9px);
	left: 0;
	right: 0;

	width: 100%;

	max-height: min(430px, 70vh);

	padding: 7px;

	overflow-y: auto;
	overflow-x: hidden;

	background: #ffffff;

	border: 1px solid #e1e7ef;
	border-radius: 16px;

	box-shadow:
		0 18px 45px rgba(26, 41, 63, 0.18);

	box-sizing: border-box;

	z-index: 999999;
}

.ecovg-header-search__results[hidden] {
	display: none !important;
}

.ecovg-header-search__state {
	padding: 13px 14px;

	font-size: 13px;

	color: #778397;
}


/* =========================================================
   RESULT
========================================================= */

.ecovg-header-search__item {
	display: flex !important;
	align-items: center;

	gap: 12px;

	min-height: 64px;

	padding: 8px;

	border-radius: 11px;

	text-decoration: none !important;

	color: #1d2939 !important;

	transition:
		background 0.15s ease;
}

.ecovg-header-search__item:hover,
.ecovg-header-search__item:focus,
.ecovg-header-search__item.is-active {
	background: #f3f6fa;

	outline: none;
}

.ecovg-header-search__thumb {
	display: block;

	flex: 0 0 78px;

	width: 78px;
	height: 48px;

	overflow: hidden;

	border-radius: 8px;

	background: #edf1f5;
}

.ecovg-header-search__thumb img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.ecovg-header-search__thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	color: #8491a5;
}

.ecovg-header-search__content {
	flex: 1 1 auto;
	min-width: 0;
}

.ecovg-header-search__title {
	display: block;

	overflow: hidden;

	white-space: nowrap;
	text-overflow: ellipsis;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;

	color: #172033;
}

.ecovg-header-search__meta {
	display: block;

	margin-top: 3px;

	font-size: 12px;

	color: #8792a5;
}

.ecovg-header-search__arrow {
	flex: 0 0 auto;

	color: #8a95a5;

	font-size: 20px;
}

.ecovg-header-search__all {
	display: flex !important;

	align-items: center;
	justify-content: space-between;

	gap: 10px;

	margin-top: 4px;

	padding: 12px 11px 9px;

	border-top: 1px solid #edf1f5;

	font-size: 13px;
	font-weight: 600;

	text-decoration: none !important;

	color: #075fdf !important;
}


/* =========================================================
   OLD THEME SEARCH
========================================================= */

.ecovg-header-search-target-hidden {
	display: none !important;
}

#site-search.ecovg-header-search-target-hidden {
	display: none !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

	.header-user__search {
		width: clamp(
			400px,
			27vw,
			520px
		);

		max-width: 520px;
	}
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

	.header-user__search {
		flex: 0 1 350px;

		width: 350px;
		max-width: 350px;

		min-width: 220px;
	}

	.ecovg-header-search__form {
		height: 44px;
	}

	.ecovg-header-search__leading {
		flex-basis: 46px;

		width: 46px;
		height: 42px;
	}

	.ecovg-header-search__leading svg {
		width: 20px;
		height: 20px;
	}

	.ecovg-header-search__input {
		height: 42px !important;

		font-size: 14px !important;
		line-height: 42px !important;
	}

	.ecovg-header-search__submit {
		flex-basis: 36px;

		width: 36px;
		height: 36px;
	}
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.container-header,
	.container-fluid.container-header {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.header-user {
		flex: 1 1 auto !important;

		gap: 7px !important;

		min-width: 0 !important;
	}

	.header-user__search {
		flex: 1 1 auto !important;

		width: auto !important;
		max-width: none !important;

		min-width: 0 !important;
	}

	.header-user__search >
	.ecovg-header-search--mounted {
		width: 100% !important;

		min-width: 0 !important;
	}

	.ecovg-header-search {
		width: 100% !important;

		min-width: 0 !important;
	}

	.ecovg-header-search__form {
		width: 100% !important;

		min-width: 0 !important;

		height: 40px;

		padding-right: 3px;
	}

	.ecovg-header-search__leading {
		flex: 0 0 36px;

		width: 36px;
		height: 38px;
	}

	.ecovg-header-search__leading svg {
		width: 17px;
		height: 17px;
	}

	.ecovg-header-search__input {
		width: 100% !important;
		min-width: 0 !important;

		height: 38px !important;

		padding:
			0 8px !important;

		font-size: 13px !important;
		line-height: 38px !important;
	}

	.ecovg-header-search__input::placeholder {
		font-size: 13px;
	}

	.ecovg-header-search__clear {
		flex-basis: 25px;

		width: 25px;
		height: 25px;

		font-size: 17px;
	}

	.ecovg-header-search__submit {
		flex: 0 0 34px;

		width: 34px;
		height: 34px;
	}

	.ecovg-header-search__submit svg {
		width: 16px;
		height: 16px;
	}

	.ecovg-header-search__results {
		position: fixed;

		left: 10px;
		right: 10px;

		width: auto;

		max-height: 65vh;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.container-header,
	.container-fluid.container-header {
		padding-left: 7px !important;
		padding-right: 7px !important;
	}

	.header-user {
		gap: 5px !important;
	}

	.ecovg-header-search__leading {
		flex-basis: 31px;

		width: 31px;
	}

	.ecovg-header-search__input {
		padding-left: 6px !important;

		font-size: 12px !important;
	}

	.ecovg-header-search__input::placeholder {
		font-size: 12px;
	}

	.ecovg-header-search__submit {
		flex-basis: 32px;

		width: 32px;
		height: 32px;
	}
}