.error-404,
.widget_search,
.ct-search-box,
.search-no-results,
.widget_product_search,
.elementor-widget-wp-widget-search {
	--dropdown-background: #fff;
	--border: 1px dashed rgba(0, 0, 0, 0.05);
	--box-shadow: 0px 50px 70px 0px rgba(210, 213, 218, 0.4);

	.search-form {
		position: relative;
		z-index: 1;

		&.ct-has-dropdown {
			z-index: 2;
		}
	}

	.ct-search-results {
		position: absolute;
		z-index: 1;
		top: -15px;
		left: -15px;
		padding-top: calc(var(--formInputHeight) + 14px);
		width: calc(100% + 30px);
		min-height: 75px;
		border-radius: 5px;
		overflow: hidden;
		background: var(--dropdown-background);
		box-shadow: var(--box-shadow);
		--listIndent: 0;
		--listItemSpacing: 0;
		--listStyleType: none;

		.ct-search-item {
			display: grid;
			grid-template-columns: 45px 1fr;
			grid-column-gap: 15px;
			align-items: center;
			font-size: 14px;
			line-height: 1.4;
			font-weight: 500;
			padding: 16px;

			&:not(:last-child) {
				border-bottom: var(--border);
			}

			.ct-image-container {
				align-self: flex-start;
				border-radius: 3px;
				overflow: hidden;

				&:before {
					content: '';
					top: 0;
					margin: 0;
					padding: 0;
					width: 45px;
					height: 45px;
					background-size: 25px;
				}
			}
		}
	}

	.ct-search-more {
		display: block;
		text-align: center;
		padding: 15px;
		font-size: 14px;
		font-weight: 600;
		text-transform: capitalize;
	}

	[data-loader] {
		--loaderSize: 30px;
		--loaderColor: rgba(44, 62, 80, 0.2);
	}
}

.ct-search-input {
	position: relative;
	z-index: 2;

	input[type="search"] {
		// hide chrome X button
		&::-webkit-search-decoration,
		&::-webkit-search-cancel-button,
		&::-webkit-search-results-button,
		&::-webkit-search-results-decoration {
			display: none;
		}

		&:focus + button {
			opacity: 1;
			color: var(--formBorderFocusColor);
		}
	}

	button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 45px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		padding: 0;
		border: none;
		cursor: pointer;
		background: transparent;
		opacity: 0.5;
		transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
					color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

		svg {
			fill: currentColor;
		}

		[data-loader] {
			opacity: 0;
			visibility: hidden;
		}
	}
}


.ct-searching .search-submit {
	svg {
		opacity: 0;
	}

	[data-loader] {
		opacity: 1;
		visibility: visible;
		animation-play-state: running;
	}
}


// results reveal animation
.ct-search-results {
	&.ct-slide,
	&.ct-fade-leave,
	&.ct-fade-leave-active,
	&.ct-fade-enter,
	&.ct-fade-enter-active {
		transition: all 0.3s ease;
	}

	&.ct-fade-enter {
		opacity: 0;
	}

	&.ct-fade-enter-active {
		opacity: 1;
	}

	&.ct-fade-leave {
		opacity: 1;
	}

	&.ct-fade-leave-active {
		opacity: 0;
	}
}