/**
 * Frontend styles for the "Hybrid Content & Taxonomy" filter.
 * Deliberately minimal - the markup borrows JetSmartFilters' own
 * `jet-search-filter` structure/behaviour, so most spacing/typography is
 * already covered by the active JetSmartFilters skin; this file only adds
 * the handful of rules unique to our class names.
 */

.jet-hybrid-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.jet-hybrid-filter__input-wrapper {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}

.jet-hybrid-filter__input-icon {
	position: absolute;
	top: 50%;
	left: 13px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: #94a3b8;
	z-index: 2;
	line-height: 1;
}

.jet-hybrid-filter__input-icon svg {
	width: 15px;
	height: 15px;
	display: block;
	stroke-width: 2;
}

.jet-hybrid-filter .jet-search-filter__input,
.jet-hybrid-filter__input {
	width: 100%;
	box-sizing: border-box;
	padding-left: 36px !important;
	padding-right: 32px !important;
}

.jet-hybrid-filter .jet-search-filter__input-clear,
.jet-hybrid-filter__input-clear {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	cursor: pointer;
	display: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	color: #94a3b8;
	background: transparent;
	transition: color 0.15s ease, background-color 0.15s ease;
	align-items: center;
	justify-content: center;
	line-height: 1;
	z-index: 3;
	padding: 0;
}

.jet-hybrid-filter .jet-search-filter__input-clear:hover,
.jet-hybrid-filter__input-clear:hover {
	color: #475569;
	background-color: rgba(0, 0, 0, 0.05);
}

.jet-hybrid-filter .jet-search-filter__input-clear svg,
.jet-hybrid-filter__input-clear svg {
	width: 11px;
	height: 11px;
	display: block;
	stroke-width: 2.2;
}

.jet-hybrid-filter .jet-search-filter__input-loading,
.jet-hybrid-filter__input-loading {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: none;
}

/* Hide native search cancel buttons */
.jet-hybrid-filter input[type="search"]::-webkit-search-cancel-button,
.jet-hybrid-filter input[type="search"]::-webkit-search-decoration,
.jet-hybrid-filter input[type="search"]::-webkit-search-results-button,
.jet-hybrid-filter input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
	display: none;
}

.jet-hybrid-filter input[type="search"]::-ms-clear,
.jet-hybrid-filter input[type="search"]::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

/* RTL Support */
body.rtl .jet-hybrid-filter__input-icon {
	left: auto;
	right: 13px;
}

body.rtl .jet-hybrid-filter .jet-search-filter__input,
body.rtl .jet-hybrid-filter__input {
	padding-left: 32px !important;
	padding-right: 36px !important;
}

body.rtl .jet-hybrid-filter .jet-search-filter__input-clear,
body.rtl .jet-hybrid-filter__input-clear,
body.rtl .jet-hybrid-filter .jet-search-filter__input-loading,
body.rtl .jet-hybrid-filter__input-loading {
	right: auto;
	left: 10px;
}

.jet-hybrid-filter__submit {
	flex: 0 0 auto;
}