/*
 * D-EDGE / FastBooking Offers-Widget — Theme-Polish
 *
 * Wird ausschliesslich auf den Angebote-/Offers-Seiten geladen
 * (siehe inc/dedge-offers-widget.php). Aufgaben:
 *
 *  1) Container-Layout (Breite, Spacing, Hintergrund) damit das Widget
 *     nicht "freischwebt", sondern als gerahmter Block in unsere
 *     mc-section-Reihe passt.
 *  2) Typography & Farben so abstimmen, dass die Widget-Eigenstyles
 *     (offersthm1) nicht visuell mit dem Mercure-Branding kollidieren.
 *     `mainColor: #a790c4` ist bereits im Widget-Config gesetzt; hier
 *     ergaenzen wir Spacing/Linien/Rounded-Corners.
 *  3) Mobile-Optimierung — das SDK ist responsive, aber die Touch-
 *     Targets in unserer Theme-Umgebung profitieren von etwas mehr Luft.
 *  4) Loading-State: Bevor das SDK gemountet hat, zeigt der leere
 *     Container nichts an — wir blenden ein dezentes Skeleton ein.
 *
 * WICHTIG: Wir greifen NICHT in die Widget-internen Klassen ein
 * (z. B. `.fb-offer-card`, `.fb-rate-button`), weil FastBooking diese
 * jederzeit umbenennen kann. Wir stylen nur unsere eigenen Wrapper.
 */

.mc-dedge-offers {
	margin: clamp(20px, 3vw, 32px) auto 0;
	padding: 0;
	width: 100%;
	max-width: 1180px;
}

/* Loading-/Idle-State: solange das SDK noch nicht gemountet hat,
 * ist #fb-widget-2 leer (`:empty` matched). Skeleton zeigt dem User,
 * dass etwas laedt — und verhindert einen abrupten Layout-Sprung. */
#fb-widget-2:empty {
	display: block;
	min-height: 280px;
	border-radius: 14px;
	background:
		linear-gradient(
			110deg,
			rgba(167, 144, 196, 0.04) 0%,
			rgba(167, 144, 196, 0.10) 35%,
			rgba(167, 144, 196, 0.04) 70%
		),
		#f7f4fb;
	background-size: 200% 100%;
	animation: mcDedgeSkeleton 2.4s ease-in-out infinite;
	position: relative;
}

#fb-widget-2:empty::after {
	content: 'Aktuelle Raten werden geladen …';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mc-font-sans, 'Montserrat', system-ui, sans-serif);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(48, 40, 60, 0.55);
}

html[lang='en'] #fb-widget-2:empty::after {
	content: 'Loading current rates …';
}

@keyframes mcDedgeSkeleton {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

/* Sobald gemountet (Container nicht mehr empty), Skeleton-Hintergrund weg.
 * Das SDK rendert seine eigene Layout-Struktur in den Container hinein. */
#fb-widget-2:not(:empty) {
	background: transparent;
	min-height: 0;
	animation: none;
}

#fb-widget-2:not(:empty)::after {
	content: none;
}

/* No-Script-Fallback: dezenter Hinweis-Block statt rohem <p>. */
.mc-dedge-offers__noscript {
	margin: 0;
	padding: 18px 22px;
	border-radius: 12px;
	background: #f7f4fb;
	border: 1px solid rgba(167, 144, 196, 0.30);
	font-size: 14px;
	line-height: 1.55;
	color: var(--dark, #2a2233);
	text-align: center;
}

.mc-dedge-offers__noscript a {
	color: var(--purple, #a790c4);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tablet & Mobile: kleinere Loading-Box, weniger Spacing nach oben. */
@media (max-width: 768px) {
	.mc-dedge-offers {
		margin-top: clamp(16px, 4vw, 24px);
	}

	#fb-widget-2:empty {
		min-height: 220px;
		border-radius: 10px;
	}

	#fb-widget-2:empty::after {
		font-size: 11px;
		letter-spacing: 0.10em;
		padding: 0 16px;
		text-align: center;
	}
}

/* Sehr kleine Viewports — Skeleton noch kompakter halten. */
@media (max-width: 480px) {
	#fb-widget-2:empty {
		min-height: 180px;
	}
}