/* =========================================================
   Floating Contact Bar v1.3
   Layout: Button + Panel nebeneinander in einer Zeile
   Icons: 28px, robust gegen Theme-Überschreibungen
   ========================================================= */

/* ----- Custom Properties ----- */
#fcb-widget {
	--fcb-z:         9999;
	--fcb-btn-size:  52px;
	--fcb-icon-size: 28px;
	--fcb-radius:    10px;
	--fcb-shadow:    0 4px 18px rgba(0,0,0,.22);
	--fcb-panel-w:   280px;
	--fcb-trans:     .38s ease;
	--fcb-gap:       6px;

	--fcb-c-whatsapp:  #25D366;
	--fcb-c-facebook:  #1877F2;
	--fcb-c-instagram: #C13584;
	--fcb-c-contact:   #444444;
	--fcb-c-youtube:   #FF0000;
	--fcb-c-info:      #0073aa;
	--fcb-c-newsletter: #e67e22;
}

/* ----- Scope-Reset: Box-Sizing isolieren, Schrift vom Theme erben ----- */
#fcb-widget,
#fcb-widget * {
	box-sizing: border-box !important;
}

/* ----- Overlay (Mobile) ----- */
#fcb-overlay {
	display: none;
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0,0,0,.4) !important;
	z-index: calc(var(--fcb-z) - 1) !important;
}
#fcb-overlay.fcb-active { display: block !important; }

/* =========================================================
   DESKTOP SIDEBAR
   Jede Zeile = [Panel] [Button] (rechts)
               [Button] [Panel] (links)
   Panel und Button sind flex-Geschwister, nicht absolute
   ========================================================= */
.fcb-sidebar {
	position: fixed !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: var(--fcb-z) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--fcb-gap) !important;
	/* Breite = Panel + Button, aber Panel eingeklappt → nur Button sichtbar */
}
.fcb-pos-right .fcb-sidebar { right: 0 !important; }
.fcb-pos-left  .fcb-sidebar { left: 0 !important;  }

/* ----- Sidebar Row: Button + Panel nebeneinander ----- */
.fcb-sidebar-item {
	display: flex !important;
	align-items: stretch !important;
	position: relative !important;
	/* Panel wächst nach links (rechte Seite) oder rechts (linke Seite) */
}
.fcb-pos-right .fcb-sidebar-item {
	flex-direction: row-reverse !important; /* Button rechts, Panel links */
	justify-content: flex-start !important;
}
.fcb-pos-left .fcb-sidebar-item {
	flex-direction: row !important; /* Button links, Panel rechts */
	justify-content: flex-start !important;
}

/* ----- Der Button ----- */
.fcb-sidebar-btn {
	/* Größe & Layout */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: var(--fcb-btn-size) !important;
	height: var(--fcb-btn-size) !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
	/* Farbe – !important gegen Theme */
	color: #ffffff !important;
	border: none !important;
	outline: none !important;
	cursor: pointer !important;
	/* Sonstige */
	box-shadow: var(--fcb-shadow) !important;
	transition: box-shadow var(--fcb-trans) !important;
	overflow: visible !important;
	/* Kein background hier — kommt über Kanalklasse */
}
.fcb-sidebar-btn:hover,
.fcb-sidebar-btn:focus {
	box-shadow: 0 6px 22px rgba(0,0,0,.32) !important;
	outline: none !important;
}

/* Radius: nur die dem Seitenrand abgewandte Seite rund */
.fcb-pos-right .fcb-sidebar-btn {
	border-radius: var(--fcb-radius) 0 0 var(--fcb-radius) !important;
}
.fcb-pos-left .fcb-sidebar-btn {
	border-radius: 0 var(--fcb-radius) var(--fcb-radius) 0 !important;
}

/* ----- Icon im Button ----- */
.fcb-sidebar-btn svg,
.fcb-sidebar-btn .fcb-icon-emoji {
	width: var(--fcb-icon-size) !important;
	height: var(--fcb-icon-size) !important;
	min-width: var(--fcb-icon-size) !important;
	min-height: var(--fcb-icon-size) !important;
	display: block !important;
	fill: #ffffff !important;
	color: #ffffff !important;
	flex-shrink: 0 !important;
	pointer-events: none !important;
}
.fcb-icon-emoji {
	font-size: var(--fcb-icon-size) !important;
	line-height: 1 !important;
}

/* ----- Kanalfarben (robust mit !important) ----- */
.fcb-btn-whatsapp  { background-color: #25D366 !important; }
.fcb-btn-facebook  { background-color: #1877F2 !important; }
.fcb-btn-instagram { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }
.fcb-btn-contact   { background-color: #444444 !important; }
.fcb-btn-youtube   { background-color: #FF0000 !important; }
.fcb-btn-info       { background-color: #0073aa !important; }
.fcb-btn-newsletter { background-color: #e67e22 !important; }

/* ----- Das Panel — fährt seitwärts neben dem Button raus ----- */
.fcb-panel {
	/* Panel ist normaler flex-Sibling, klappt per width ein/aus */
	width: 0 !important;
	max-height: var(--fcb-btn-size) !important; /* Anfangshöhe = Button */
	min-height: var(--fcb-btn-size) !important;
	overflow: hidden !important;
	background: #ffffff !important;
	box-shadow: none !important;
	transition:
		width var(--fcb-trans),
		max-height .3s ease,
		box-shadow var(--fcb-trans),
		opacity var(--fcb-trans) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	/* Radius: Seiten die vom Button wegzeigen */
}
.fcb-pos-right .fcb-panel {
	border-radius: var(--fcb-radius) 0 0 var(--fcb-radius) !important;
	/* Panel links vom Button */
}
.fcb-pos-left .fcb-panel {
	border-radius: 0 var(--fcb-radius) var(--fcb-radius) 0 !important;
}

/* Panel offen */
.fcb-panel.fcb-open {
	width: var(--fcb-panel-w) !important;
	max-height: 600px !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	box-shadow: var(--fcb-shadow) !important;
	overflow: visible !important;
	overflow-y: auto !important;
}

/* ----- Panel Inhalte ----- */
.fcb-panel-inner {
	width: var(--fcb-panel-w) !important;
	padding: 14px 16px 16px !important;
	position: relative !important;
}

.fcb-panel-close {
	position: absolute !important;
	top: 6px !important;
	right: 8px !important;
	background: none !important;
	border: none !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	color: #aaaaaa !important;
	padding: 2px 4px !important;
	border-radius: 3px !important;
}
.fcb-panel-close:hover { color: #333333 !important; background: #f0f0f0 !important; }

.fcb-panel-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #222222 !important;
	margin: 0 20px 10px 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.fcb-panel-content {
	font-size: 13px !important;
	color: #444444 !important;
}
.fcb-panel-content p {
	margin: 0 0 10px !important;
	color: #444444 !important;
	font-size: 13px !important;
}

/* CTA-Button im Panel */
.fcb-cta-btn {
	display: inline-block !important;
	padding: 8px 16px !important;
	border-radius: 6px !important;
	color: #ffffff !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border: none !important;
	cursor: pointer !important;
	transition: opacity .18s !important;
	margin-top: 2px !important;
}
.fcb-cta-btn:hover { opacity: .85 !important; color: #ffffff !important; text-decoration: none !important; }
.fcb-btn-whatsapp-cta  { background-color: #25D366 !important; }
.fcb-btn-facebook-cta  { background-color: #1877F2 !important; }
.fcb-btn-instagram-cta { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888) !important; }
.fcb-btn-youtube-cta   { background-color: #FF0000 !important; }

/* ----- Link-Liste (mehrere Einträge) ----- */
.fcb-link-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}
.fcb-link-list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.fcb-link-list li a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 10px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	color: #333333 !important;
	background: #f5f5f5 !important;
	transition: background .15s !important;
	border: none !important;
	box-shadow: none !important;
}
.fcb-link-list li a:hover {
	background: #e8e8e8 !important;
	color: #111111 !important;
	text-decoration: none !important;
}
.fcb-link-list .fcb-link-icon {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
}
.fcb-link-list .fcb-link-icon svg {
	width: 18px !important;
	height: 18px !important;
	fill: #555555 !important;
	color: #555555 !important;
}
.fcb-link-list .fcb-link-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}
.fcb-link-list .fcb-link-text strong {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #222222 !important;
}
.fcb-link-list .fcb-link-text small {
	font-size: 11px !important;
	color: #777777 !important;
	line-height: 1.3 !important;
	font-weight: normal !important;
}

/* =========================================================
   MOBILE BOTTOM BAR
   ========================================================= */
.fcb-mobile-bar  { display: none !important; }
.fcb-mobile-panel { display: none; }

/* Mobile Panel (Slide-up) */
.fcb-mobile-panel {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: #ffffff !important;
	border-radius: 16px 16px 0 0 !important;
	box-shadow: 0 -4px 24px rgba(0,0,0,.18) !important;
	z-index: calc(var(--fcb-z) + 1) !important;
	transform: translateY(100%) !important;
	transition: transform .28s ease !important;
	pointer-events: none !important;
}
.fcb-mobile-panel.fcb-open {
	transform: translateY(0) !important;
	pointer-events: auto !important;
	display: block !important;
}
.fcb-mobile-panel-inner {
	padding: 20px 20px max(24px, env(safe-area-inset-bottom)) !important;
	position: relative !important;
}

/* =========================================================
   RESPONSIVE – Mobile
   ========================================================= */
@media (max-width: 768px) {

	.fcb-sidebar { display: none !important; }

	.fcb-mobile-bar {
		display: flex !important;
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: var(--fcb-z) !important;
		background: #ffffff !important;
		box-shadow: 0 -2px 12px rgba(0,0,0,.15) !important;
		justify-content: space-around !important;
		align-items: center !important;
		padding: 6px 4px max(8px, env(safe-area-inset-bottom)) !important;
		border-top: 1px solid #eeeeee !important;
	}

	.fcb-mobile-icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 48px !important;
		height: 48px !important;
		border: none !important;
		border-radius: 50% !important;
		cursor: pointer !important;
		color: #ffffff !important;
		transition: transform .15s !important;
		flex-shrink: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.fcb-mobile-icon:active { transform: scale(.9) !important; }

	.fcb-mobile-icon svg {
		width: var(--fcb-icon-size) !important;
		height: var(--fcb-icon-size) !important;
		fill: #ffffff !important;
		color: #ffffff !important;
		display: block !important;
	}
	.fcb-mobile-icon .fcb-icon-emoji {
		font-size: var(--fcb-icon-size) !important;
		line-height: 1 !important;
	}

	/* Kanalfarben Mobile */
	.fcb-mobile-icon.fcb-btn-whatsapp  { background-color: #25D366 !important; }
	.fcb-mobile-icon.fcb-btn-facebook  { background-color: #1877F2 !important; }
	.fcb-mobile-icon.fcb-btn-instagram { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888) !important; }
	.fcb-mobile-icon.fcb-btn-contact   { background-color: #444444 !important; }
	.fcb-mobile-icon.fcb-btn-youtube   { background-color: #FF0000 !important; }
		.fcb-mobile-icon.fcb-btn-info       { background-color: #0073aa !important; }
	.fcb-mobile-icon.fcb-btn-newsletter { background-color: #e67e22 !important; }

	.fcb-mobile-panel { display: block; }

	body { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
}

/* =========================================================
   Elementor Form im Panel
   ========================================================= */
.fcb-panel-content .elementor-form,
.fcb-mobile-panel-inner .elementor-form {
	margin: 0 !important;
}
.fcb-panel-content .elementor-field-group,
.fcb-mobile-panel-inner .elementor-field-group {
	margin-bottom: 8px !important;
}
.fcb-panel-content .elementor-field,
.fcb-mobile-panel-inner .elementor-field {
	font-size: 13px !important;
	padding: 7px 10px !important;
	border-radius: 4px !important;
	width: 100% !important;
}
.fcb-panel-content .elementor-button,
.fcb-mobile-panel-inner .elementor-button {
	font-size: 13px !important;
	padding: 8px 16px !important;
}