/**
 * Header Share Bar Styles - Teilen-Leiste oben rechts.
 *
 * Layout-only. Farben aus den CI-Custom-Properties (--wp-immo-ci-color-1/2),
 * damit die Icons dieselbe CI wie der Rest der Seite tragen.
 */

/* Location-Zeile wird zum Flex-Container, wenn Share aktiv ist:
   PLZ/Ort links, Teilen rechts, beide vertikal zentriert.
   Der Share ist Kind der .h3-Klasse -> erbt automatisch dieselbe Farbe,
   Font-Size, Line-Height wie PLZ/Ort. */
.wp-immo-header-location--has-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

/* Wrapper uebernimmt das gap:15px-Verhalten der urspruenglichen
   .wp-immo-header-location, damit Badge und PLZ/Ort den gleichen Abstand
   wie ohne Share-Leiste behalten. */
.wp-immo-header-location-text {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.wp-immo-share {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	position: relative;
	color: inherit;
	font: inherit;
}

.wp-immo-share-label {
	color: inherit;
	font: inherit;
	white-space: nowrap;
}

.wp-immo-share-list {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-immo-share-item {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
}

.wp-immo-share-item[hidden] {
	display: none;
}

/* Reine Icon-Links: kein Padding, kein Kreis, kein Hintergrund.
   Farbe wird von .h3 geerbt (currentColor). Hover: CI-Akzent. */
.wp-immo-share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s ease;
	line-height: 1;
}

.wp-immo-share-link:hover,
.wp-immo-share-link:focus-visible {
	background: none;
	color: var(--wp-immo-ci-color-1, #aa9a7f);
}

/* Icons in em -> waechst proportional mit der h3-Textgroesse mit. */
.wp-immo-share-icon {
	width: 1.35em;
	height: 1.35em;
	flex-shrink: 0;
	display: block;
}

.wp-immo-share-feedback {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	padding: 6px 12px;
	border-radius: 4px;
	background-color: var(--wp-immo-ci-color-2, #333);
	color: #fff;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 5;
}

.wp-immo-share-feedback-visible {
	opacity: 1;
}

/* Bottom-Variante: eigener Block ganz unten auf der Seite (Mobile).
   Farbe kommt hier vom Body/Theme (color: inherit), kein h3-Kontext. */
.wp-immo-share-bottom-wrap {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

.wp-immo-share--bottom {
	color: inherit;
	font-size: 16px;
}

/* Desktop: Top im Header sichtbar, Bottom versteckt. */
@media (min-width: 601px) {
	.wp-immo-share--bottom,
	.wp-immo-share-bottom-wrap {
		display: none;
	}
}

/* Mobile: Top im Header versteckt (dort ist wenig Platz),
   Bottom am Seiten-Ende sichtbar. */
@media (max-width: 600px) {
	.wp-immo-share--top {
		display: none;
	}
	.wp-immo-header-location--has-share {
		gap: 12px;
	}
	.wp-immo-share-feedback {
		right: auto;
		left: 0;
	}
}