/* ==========================================
	   SEARCH CONTAINER
	========================================== */
	.search-container {
		position: relative;
		width: 100%;
		z-index: 99999;
		overflow: visible !important;
	}
	
	.search-container .search {
		width: 100%;
		box-sizing: border-box;
	}

	/* ==========================================
	   SEARCH INPUT
	========================================== */
	.search {
		width: 100%;
		box-sizing: border-box;
		padding: 12px 16px;
		border: 1px solid #dddddd;
		border-radius: 10px;
		outline: none;
		background: #ffffff;
		font-size: 15px;
		transition:
			border-color 0.2s ease,
			box-shadow 0.2s ease;
	}


	/* ==========================================
	   SEARCH INPUT FOCUS
	========================================== */
	.search:focus {
		border-color: #333333;
		box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
	}


	/* ==========================================
	   AUTOCOMPLETE SUGGESTIONS BOX
	========================================== */
	.search-suggestions {
		position: absolute !important;
		top: calc(100% + 5px) !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		display: none;
		background: #ffffff !important;
		border: 1px solid #dddddd !important;
		border-radius: 10px;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		max-height: 300px;
		z-index: 999999 !important;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20);
		box-sizing: border-box;
	}


	/* ==========================================
	   INDIVIDUAL SUGGESTION ITEM
	========================================== */
	.search-suggestion-item {
		padding: 13px 16px;
		cursor: pointer;
		font-size: 14px;
		line-height: 1.4;
		background: #ffffff;
		border-bottom: 1px solid #f0f0f0;
		transition:
			background-color 0.15s ease,
			padding-left 0.15s ease;
	}


	/* ==========================================
	   REMOVE BORDER FROM LAST ITEM
	========================================== */
	.search-suggestion-item:last-child {
		border-bottom: none;
	}


	/* ==========================================
	   SUGGESTION HOVER EFFECT
	========================================== */
	.search-suggestion-item:hover {
		background: #f7f7f7;
		padding-left: 20px;
	}


	/* ==========================================
	   SCROLLBAR FOR SUGGESTION BOX
	========================================== */
	.search-suggestions::-webkit-scrollbar {
		width: 6px;
	}


	.search-suggestions::-webkit-scrollbar-track {
		background: #f5f5f5;
	}


	.search-suggestions::-webkit-scrollbar-thumb {
		background: #cccccc;
		border-radius: 10px;
	}


	.search-suggestions::-webkit-scrollbar-thumb:hover {
		background: #aaaaaa;
	}


	/* ==========================================
	   MOBILE RESPONSIVE ADJUSTMENTS
	========================================== */
	@media (max-width: 576px) {
		.search {
			padding: 11px 14px;
			font-size: 14px;
		}


		.search-suggestions {
			max-height: 260px;
			border-radius: 8px;
		}


		.search-suggestion-item {
			padding: 12px 14px;
			font-size: 14px;
		}


		.search-suggestion-item:hover {
			padding-left: 14px;
		}
	}