/**
 * Styles für [immomakler-ortssuche] - das Suchfeld mit Ort-Vervollständigung.
 *
 * Eigene Datei, weil der Shortcode für die Startseite gedacht ist. Dort lädt
 * WP-ImmoMakler seine eigenen Styles nicht, das Feld muss sich also selbst
 * vollständig gestalten.
 *
 * Gehört zu beon-immomakler-ortssuche.js und wird zusammen mit den übrigen
 * Shortcode-Assets aus beon-immomakler-shortcodes.php eingebunden.
 */

/*
 * Kein Kasten, sondern eine durchgehende Linie unter Feld UND Pfeil - deshalb
 * sitzt der Rahmen am Formular selbst, nicht am Eingabefeld.
 */
.beon-ortssuche {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--abstand-md, 16px);
	align-items: center;
	width: 100%;
	max-width: 44em;
	margin: 0;
	padding-bottom: 3px;
	border-bottom: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
	background: none;
}

.beon-ortssuche__submit:hover, .beon-ortssuche__submit:focus {
    background-color: transparent !important;
}

/*
 * Fokus über die Linie statt über einen Rahmen: box-shadow statt einer
 * dickeren border, damit die Zeile beim Fokussieren nicht um einen Pixel
 * springt.
 */
.beon-ortssuche:focus-within {
	border-bottom-color: var(--color-gold-600, #c29b40);
	box-shadow: 0 1px 0 0 var(--color-gold-600, #c29b40);
}

/* Beschriftung bleibt für Screenreader erhalten, ist aber unsichtbar. */
.beon-ortssuche .beon-ortssuche__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Bezugspunkt für die absolut positionierte Vorschlagsliste. */
.beon-ortssuche .beon-ortssuche__field {
	position: relative;
	flex: 1 1 18em;
	min-width: 0;
}

/*
 * Lupe als Hintergrundbild links im Feld. Der Innenabstand links hält den
 * Text vom Icon frei.
 */
.beon-ortssuche .beon-ortssuche__input {
	width: 100%;
	min-height: 44px;
	/* Innenabstand links hält den Text von der Lupe frei. */
	padding: 8px 0 8px 40px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: url(/wp-content/uploads/2026/08/magnifying-glass-light-full.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px 20px;
	box-shadow: none;
	color: var(--color-navy-900, #001731);
	font-family: var(--mercurydisplay, inherit);
	font-size: var(--size-18, 18px);
	line-height: 1.4;
	/* Das Kreuz, das Safari und Chrome in type="search" einbauen, passt nicht
	   zur eigenen Liste - es wird entfernt. */
	appearance: none;
}

.beon-ortssuche .beon-ortssuche__input::-webkit-search-cancel-button,
.beon-ortssuche .beon-ortssuche__input::-webkit-search-decoration {
	appearance: none;
}

.beon-ortssuche .beon-ortssuche__input::placeholder {
	color: var(--color-gray-600, #666666);
	opacity: 1;
}

/*
 * Kein eigener Fokusring am Feld: die Linie am Formular übernimmt die
 * Rückmeldung (siehe .beon-ortssuche:focus-within). Ein Kasten würde die
 * Optik brechen.
 */
.beon-ortssuche .beon-ortssuche__input:focus,
.beon-ortssuche .beon-ortssuche__input:focus-visible {
	outline: none;
}

/* --- Vorschlagsliste --------------------------------------------------- */
.beon-ortssuche .beon-ortssuche__list {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	z-index: 20;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 20em;
	overflow-y: auto;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-300, #f2f2f2);
	background-color: #fff;
	box-shadow: 0 14px 32px rgba(0, 10, 25, 0.14);
}

.beon-ortssuche .beon-ortssuche__list[hidden] {
	display: none;
}

.beon-ortssuche .beon-ortssuche__option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding: 12px 20px;
	cursor: pointer;
	color: var(--color-navy-900, #001731);
	font-size: var(--size-16, 16px);
	line-height: 1.3;
}

.beon-ortssuche .beon-ortssuche__option + .beon-ortssuche__option {
	border-top: var(--stroke-width-1, 1px) solid var(--color-gray-300, #f2f2f2);
}

/*
 * is-active setzt das Script bei Bedienung über die Pfeiltasten - Maus- und
 * Tastaturweg sehen damit gleich aus.
 */
.beon-ortssuche .beon-ortssuche__option:hover,
.beon-ortssuche .beon-ortssuche__option.is-active {
	background-color: var(--color-gray-300, #f2f2f2);
}

.beon-ortssuche .beon-ortssuche__option-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Anzahl der Objekte im jeweiligen Ort. */
.beon-ortssuche .beon-ortssuche__option-count {
	flex: 0 0 auto;
	color: var(--color-gray-500, #5b5b5b);
	font-size: var(--size-13, 13px);
	font-variant-numeric: tabular-nums;
}

/* --- Button: nur der Pfeil --------------------------------------------- */

/*
 * Der Pfeil sitzt auf einem Pseudo-Element statt als Hintergrund des Buttons.
 * Nur so lässt er sich beim Hover verschieben, ohne die Fläche mitzubewegen -
 * dasselbe Verhalten wie beim Absende-Button des Kontaktformulars.
 */
.beon-ortssuche .beon-ortssuche__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	cursor: pointer;
	overflow: hidden;
}

.beon-ortssuche .beon-ortssuche__submit::after {
	content: "";
	/* Als Flex-Element würde der Pfeil sonst zusammengestaucht. */
	flex: 0 0 auto;
	width: 26px;
	height: 16px;
	background-image: url(/wp-content/uploads/2026/08/arrow-right-long-sharp-light-full.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 300ms ease;
}

.beon-ortssuche .beon-ortssuche__submit:hover::after,
.beon-ortssuche .beon-ortssuche__submit:focus-visible::after {
	transform: translateX(6px);
}

.beon-ortssuche .beon-ortssuche__submit:focus-visible {
	outline: var(--stroke-width, 2px) solid var(--color-gold-600, #c29b40);
	outline-offset: 2px;
}

/* Beschriftung bleibt für Screenreader erhalten, ist aber unsichtbar. */
.beon-ortssuche .beon-ortssuche__submit-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Auch auf dem Handy bleibt alles in einer Zeile - Lupe, Feld und Pfeil
 * passen nebeneinander. Nur die Schrift wird etwas kleiner, damit der
 * Platzhalter nicht zu früh abgeschnitten wird.
 */
@media (max-width: 600px) {
	.beon-ortssuche {
		gap: var(--abstand-sm, 8px);
	}

	.beon-ortssuche .beon-ortssuche__input {
		padding-left: 34px;
		background-size: 18px 18px;
		font-size: var(--size-16, 16px);
	}

	.beon-ortssuche .beon-ortssuche__submit {
		width: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.beon-ortssuche .beon-ortssuche__submit::after {
		transition: none;
	}
}