/* ==========================================================================
   HOTEL AFFILIATE IFRAME (.mgc-hotel-search)
   Nur auf Hotel-/Holiday-Home-Seiten mit [mgc_hotel_iframe]-Platzhalter.

   v2.3.1: Zwei Zustände statt drei, plus ein dauerhaft sichtbarer Direktlink.

     (Standard)                  → .mgc-hotel-loading sichtbar (Spinner)
     .mgc-hotel-search--loaded   → .mgc-hotel-iframe sichtbar, Spinner aus
     .mgc-hotel-search--blocked  → nur noch Spinner aus, kein eigener Inhalt

   .mgc-hotel-direct ist in JEDEM Zustand sichtbar und hängt an keiner
   Zustandsklasse.

   Fund (August 2026): Der früher per --blocked eingeblendete
   .mgc-hotel-fallback konnte den Fall, für den er geschrieben wurde, gar
   nicht erreichen. Messung in Brave mit Standard-Shields: der Request an
   awin1.com wird blockiert, das iframe feuert aber trotzdem ein load-Event
   (contentDocument bleibt dabei null, also nicht von einem echten
   Cross-Origin-Dokument unterscheidbar). hotels.js setzt daraufhin --loaded
   statt --blocked — der Fallback blieb versteckt. Brave kollabiert das
   blockierte iframe zusätzlich, sodass der Besucher weder Inhalt noch
   Hinweis sah. Konsequenz: Der Notausgang darf nicht von JS abhängen. Er ist
   jetzt dauerhaft sichtbar, der Fallback-Block ersatzlos entfallen.
   Nebeneffekt: Das in hotels.js dokumentierte Flackern bei knappem
   TIMEOUT_MS gibt es nicht mehr — es ist nichts mehr da, was flackern könnte.
   ========================================================================== */

/* Fund (August 2026): Diese Regel stand bis v2.2.x in style.css und wurde
   damit sitewide ausgeliefert, obwohl sie nur hier gebraucht wird. Die
   zweite Regel von dort (.mgc-hotel-search iframe) ist ersatzlos entfallen:
   border und width waren Dubletten zu .mgc-hotel-iframe, ihr display:block
   hat mit Spezifität 0-1-1 das display:none von .mgc-hotel-iframe (0-1-0)
   überstimmt und damit die Zustandslogik ausgehebelt. */
.mgc-hotel-search {
	margin-block: 1.5rem;
}

/* Fund (August 2026): Der Wrapper ist auf allen 1.581 Hotel-Seiten das ERSTE
   Kind von .entry-content. Core setzt dort margin-block-start:0 — aber über
   :where() mit Spezifität 0, also überstimmt die Regel darüber das wieder und
   schiebt den Block um 1.5rem nach unten. Genau derselbe Mechanismus wie beim
   Maps-Div in style.css (Fund Juli 2026). Hier gezielt zurücknehmen, statt die
   Regel oben zu kastrieren — sitzt der Wrapper mal mitten im Content, soll der
   Abstand nach oben erhalten bleiben. */
.wp-block-post-content > .mgc-hotel-search:first-child {
	margin-block-start: 0;
}

/* .mgc-hotel-frame existiert ausschließlich als wpautop-Schild: <iframe> steht
   nicht auf wpautops Block-Element-Liste und wurde bis v2.3.0 in ein <p>
   gewickelt, dessen Browser-Default-Margin unsichtbar über der Suchmaske sass.
   <div> steht auf der Liste. Der Container braucht deshalb keine eigenen
   Eigenschaften — Begründung in mgc_hotels.php. */

.mgc-hotel-iframe {
	display: none; /* Standardfall: versteckt, bis --loaded gesetzt wird */
	border: none;
	width: 100%;
}

.mgc-hotel-search--loaded .mgc-hotel-iframe {
	display: block;
}

/* ---- Loading-Zustand (Spinner) ------------------------------------------
   min-height reserviert bewusst nicht die vollen 2000px des iframes (das
   ergäbe eine riesige, halb leere Fläche und der Spinner läge oft
   außerhalb des sichtbaren Viewports). 320px ist ein Kompromiss: groß
   genug, um den Spinner auf Mobile wie Desktop im sichtbaren Bereich zu
   zeigen, verhindert aber keinen Layout-Sprung (CLS), sobald das iframe
   auf seine volle Höhe wechselt. Bei Bedarf anpassbar. */
.mgc-hotel-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	min-height: 320px;
}

.mgc-hotel-search--loaded .mgc-hotel-loading,
.mgc-hotel-search--blocked .mgc-hotel-loading {
	display: none;
}

.mgc-hotel-spinner {
	width: 56px;
	height: 56px;
	border: 5px solid #ddd;
	border-top-color: var(--wp--preset--color--booking-orange);
	border-radius: 50%;
	animation: mgc-hotel-spin 0.8s linear infinite;
}

@keyframes mgc-hotel-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mgc-hotel-spinner {
		animation-duration: 2.4s; /* deutlich langsamer statt ganz ohne Bewegung — bleibt als "lädt" erkennbar */
	}
}

/* ---- Direktlink (Notausgang, immer sichtbar) -----------------------------
   Bewusst an KEINE Zustandsklasse gebunden: Er muss auch dann stehen, wenn
   hotels.js gar nicht läuft oder wenn ein Blocker das iframe abräumt, ohne
   dass wir es erkennen können.

   flex-wrap statt Inline-Fluss: Auf schmalen Viewports rutscht der Button
   sauber unter den Satz, statt mitten in eine Zeile mit line-height 1.65
   eingebettet zu werden. Gleiche Konstruktion wie beim früheren
   .mgc-hotel-fallback-cta, nur mit Umbruch. */
.mgc-hotel-direct {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin: 0.75em 0 0;
}

.mgc-hotel-direct-text {
	font-size: 0.9375em;
}

.mgc-hotel-direct-link {
	display: inline-block;
	padding: 0.55em 1.1em;
	background: var(--wp--preset--color--booking-orange);
	color: #fff;
	border-radius: 3px;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.mgc-hotel-direct-link:hover,
.mgc-hotel-direct-link:focus-visible {
	background: #963e00;
	color: #fff;
}