/* ******************************************************** */
/* !EXT:ke_search CSS definitions (Classes partially grandfathered from indexed_search) */
/* Stand: 03.12.2018 */
/* Projekt: www.amnog-monitor.com */
/* ******************************************************** */

/* ********************************* */
/* Suchfeld - Alle Seiten */
/* ********************************* */
.searchbox {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	line-height: 140%;
}

	.searchbox form input {
		box-sizing: content-box;
		position: relative;
		margin: 0 10px 0 0;
		padding: 0.5em 2.5em 0.5em 0.5em;
		width: 310px;
		height: 1em;
		border: 1px solid #fff;
		border-radius: 6px;
	}
	@media screen and (max-width: 800px) {
		.searchbox form input {
			width: 80px;
		}
		.searchbox form legend {
			display: none;
		}
	}
	@media screen and (max-width: 639px) {
			.searchbox {
				display: none;
			}
	}

	.searchbox form button {
		position: absolute;
			top: 0;
			right: 10px;
		margin: 0;
		padding: 0.45em 0.4em 0.1em 0.4em;
		font-size: 118%;
		background: transparent;
		border: none;
		border-left: 1px solid #ECF3CE;
		cursor: pointer;
		border-radius: 6px;
	}
		.searchbox form button:hover {
				background: #ceda26;
				cursor: pointer;
			}
			.searchbox form button:after {
				position: relative;
					top: -0.15em;
					left: 0;
				font-family: 'FontAwesome';
				font-size: 100%;
				content:"\f002";
				color: #448193;
				transition: color 0.35s ease-in-out;
			}
				.searchbox form button:hover:after {
					color: #448193;
				}
		.searchbox legend {
			float: right;
			color: #a6bfc8;
			font-family: 'Roboto-Regular'; /* bold */
			font-weight: normal;
			padding: 0.2em 0 0 0;
			transition: color 0.5s ease-in-out;
		}
			.searchbox:hover legend,
			.searchbox:focus legend {
				color: #ceda26;
			}

/* Autocomplete list styling - matching intelligent search */
#qs-autocomplete-list {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 10000;
top: 100%;
left: 0;
right: 0;
max-height: 260px;
overflow-y: auto;
background: white;
border: 1px solid #ddd;
border-radius: 10px;
}

#qs-autocomplete-list li {
padding: 6px 10px;
cursor: pointer;
}

#qs-autocomplete-list li:hover,
#qs-autocomplete-list li.active {
background: #f2f2f2;
}

/* hide the border (and background) when there are no items */
#qs-autocomplete-list:empty {
border: none;
background: none;
}

/* restore it as soon as there is at least one item */
#qs-autocomplete-list:not(:empty) {
border: 1px solid #ddd;
background: white;
}


/* Container for the list item */
#qs-autocomplete-list li.qs-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px; /* Slightly reduced padding for a tighter look */
    border-bottom: 1px solid #f5f5f5;
        font-size: 13px;
}

/* Ensure the text cuts off with ... if it's too long */
.qs-text {
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
    flex: 1; /* Ensure text takes up available space */
}
/* Base Badge Style - Gentle & Professional */
.qs-badge {
    font-size: 9px;          /* Slightly smaller (was 10px) */
    text-transform: uppercase;
    padding: 2px 5px;        /* Less padding for a lighter feel */
    border-radius: 4px;      /* Soft rounded corners */
    white-space: nowrap;
    font-weight: 600;        /* Bold enough to read, but not heavy */
    letter-spacing: 0.3px;   /* Slightly tighter */
    border: none;            /* REMOVED BORDER for a softer look */

    /* Default fallback */
    background-color: #f0f0f0;
    color: #666;
}

/* --- Specific Category Colors (Pastel Backgrounds + Desaturated Text) --- */

/* Wirkstoff (Active Ingredient) - Sage Green */
/* Professional, medical, calm */
.qs-badge-wirkstoff {
    background-color: #eaf4ef;
    color: #2e6b46;
}

/* Titel / Produkt (Brand) - Steel Blue */
/* Trustworthy, distinct from the others */
.qs-badge-titel,
.qs-badge-produkt {
    background-color: #eef6fc;
    color: #346a99;
}

/* Reason/Procedure (Verfahren) - Soft Terracotta/Peach */
/* Warns gently, very distinct from Blue */
.qs-badge-reason_for_procedure {
    background-color: #fef0ea;
    color: #a65e42;
}

/* Indication Tag (Indikation) - Muted Lavender */
/* Distinct but soft */
.qs-badge-indication_tag {
    background-color: #f5f0fa;
    color: #7b5c96;
}

/* Category (Indikationsgebiet) - Warm Stone Grey */
/* Neutral, recedes into background to let others shine */
.qs-badge-kategorie {
    background-color: #f4f2f0;
    color: #75706b;
}

/* Hover States for the LI */
#qs-autocomplete-list li:hover,
#qs-autocomplete-list li.active {
    background-color: #fafafa; /* Extremely subtle grey hover */
    cursor: pointer;
}