/**
 * Datei: autocomplete.css
 * Modul: Search – Standort Autocomplete
 * Autor: MARKS MEDIA
 *
 * Zweck:
 *   Styling für Standort-Autocomplete auf Basis des globalen UI-Systems.
 *   BFSG-konform (sichtbarer Fokus, ausreichend Kontrast).
 *   Keine festen Hex-Farben (außer wenn technisch zwingend).
 */

/* ============================================================
   Wrapper
============================================================ */
.mp-search-location-wrapper{
	position: relative;
	width: 100%;
}

/* ============================================================
   Autocomplete-Box
============================================================ */
.mp-search-autocomplete{
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;

	background: var(--block-bg);
	border: 1px solid color-mix(in srgb, var(--block-border) 35%, transparent);
	border-radius: var(--radius-lg);

	box-shadow: var(--shadow-md);

	max-height: 260px;
	overflow-y: auto;

	z-index: 99999;
	display: none;
	pointer-events: auto;
}

/* ============================================================
   Einträge
============================================================ */
.mp-ac-item{
	padding: 10px 12px;
	font-size: 15px;

	color: var(--text-main);
	background: transparent;

	cursor: pointer;

	border-bottom: 1px solid color-mix(in srgb, var(--block-border) 35%, transparent);

	transition: background 0.15s ease, color 0.15s ease;
}

.mp-ac-item:last-child{
	border-bottom: 0;
}

.mp-ac-item:hover{
	background: var(--hover-bg);
}

/* Aktiver Eintrag (Keyboard / Hover-State) */
.mp-ac-item.mp-ac-active{
	background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
}

/* Fokus (BFSG / Tastatur) */
.mp-ac-item:focus-visible{
	outline: 2px solid var(--color-1);
	outline-offset: -2px;
	background: var(--hover-bg);
}

/* ============================================================
   Hervorhebung Suchtreffer
============================================================ */
.mp-ac-highlight{
	font-weight: 700;
	color: var(--color-1);
}