/* Advanced Search CSS */

.header-search-advanced {

	position: relative;

	form.search-form {
		position: relative;
		border: 1px solid var(--global-gray-400);
		background-color: var(--global-palette8);
		border-radius: 4px;
		display: flex;
		&.woocommerce-product-search{
			display: flex;
		}

		label{
			width: 100%;
		}
	
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
		}
		.search-category-field {
			position: relative;
	
			.search-select {
				font-size: 15px;
				height: 40px;
				border: none;
				border-color: transparent;
				background-color: transparent;
				box-shadow: none;
				flex-shrink: 0;
				max-width: 100%;
				min-height: 41px;
				outline: none;
				padding: 3px 25px 3px 15px;
				width: 167px;
				text-overflow: ellipsis;
				white-space: nowrap;
				cursor: pointer;
				background-size: 21px;
				background-position: right 10px top 55%;

				@media screen and ( max-width: 767px ) {
					padding: 3px 25px 3px 10px;
					width: 140px;
				}
			}
	
			&:after {
				content: "";
				position: absolute;
				right: 0;
				width: 1px;
				height: 25px;
				top: 50%;
				transform: translateY(-50%);
				background: var(--global-gray-400);
			}
		}
		
		.search-field {
			position: relative;
			flex-grow:1;
			border: none!important;
			border-color: transparent!important;
			background-color: transparent!important;
			box-shadow: none!important;
			padding-left: 15px;
			padding-right: 10px;
			height: 40px;
		}

		.search-btn-icon {
			line-height: 0;
				display: block;
			}

		.search-submit {
			width: auto;
			position: relative;
			display: flex;
			align-items: center;
			column-gap: 5px;
			overflow: visible;
			line-height: 1.25;

		}

		.base-search-icon-wrap {
			display: none;
		}

		.input-container {
			position: relative;
			width: 100%;
		}
		.loader-container {
			position: absolute;
			right: 30px;
			top: 50%;
		}

		/* .loader {
			position: relative;
			height: 20px;
			width: 20px;
			display: inline-block;
			animation: around-loader 5.4s infinite;
		}
		
		.loader::before {
			background: none;
		}
		.loader::before {
			content: "";
			background: transparent;
			position: absolute;
			display: inline-block;
			width: 100%;
			height: 100%;
			border-width: 2px;
			border-color: var(--global-palette3) var(--global-palette3) transparent transparent;
			border-style: solid;
			border-radius: 20px;
			box-sizing: border-box;
			top: 0;
			left: 0;
			animation: around-loader 0.7s ease-in-out infinite;
		}
		
		.loader::before {
			animation: around-loader 0.7s ease-in-out 0.1s infinite;
			background: transparent;
		} */


		.loader::before {
			--loader-size: 25px;
			height: var(--loader-size);
			width: var(--loader-size); 
			display: inline-block;
			top: 50%;
			left: 50%;
			margin-top: calc( var(--loader-size) * -0.5 );
			margin-left: calc( var(--loader-size) * -0.5 );
			content: '';
			animation: spin 2s linear infinite;
			background: transparent !important;
			border: 2px solid rgba(0,0,0,.15);
			border-top-color: var(--global-palette3);
			border-radius: 50%;
			text-align: center;
			position: absolute;
			line-height: 1;
			text-align: center;
			font-size: 2em;
			color: var(--global-palette4);
		}

	}

	.search-results {
		width: 100%;
		top: calc(100% + 2px) !important;
		padding: 0;
		max-height: 400px;
		overflow: auto;
		position: absolute;
		top: 100%;
		left: 0px;
		z-index: 100;
		display: none;

		.search-data {
			display: grid;
			grid-template-columns: 1fr 1fr;
			background-color: var(--global-palette9);
			border: 1px solid var(--global-gray-400);
		}
		.search-data:empty {
			border: none;
			background-color:unset;
		}
		  
	}

	.tmc-suggestion.tmc-selectable {
		cursor: pointer;
	}
	.tmc-suggestion:nth-child(2n+1) {
		clear: both;
	}

	.tmc-suggestion {
		width: 100%;
		float: left;
		padding: 10px;
		box-sizing: border-box;

		.tmc-product-search-item {
			display: flex;
    		position: relative;

			.tmc-product-search-image {
				
    			vertical-align: middle;
				width: 100%;
				max-width: 80px;

				img {
					display: block;
					width: 80px;
				}
			}
			.tmc-product-search-item-content {
				
				vertical-align: middle;
				padding: 0 0 0 10px;
				text-align: left;

				.tmc-product-search-item-cat {
					font-size: 85%;
					color: var(--global-palette5);
				}

				.tmc-product-search-title {
					margin-top: 5px;
    				margin-bottom: 10px;
					font-size: 14px;
					font-weight: normal;

					a {
						&:hover ,&:active ,&:focus{
							color: var(--global-palette-highlight);
						}
					}
				}

				.tmc-product-search-price {
					line-height: 1;
					margin: 0;
					color: var(--global-palette3);
					font-weight: 500;
					display: flex;
					
					del {
						color: var(--global-palette4);
						opacity: 0.5;
						margin: 0 0 0 3px;
					}
				}
			}
		}
	}
}