/*
 * PayPal-Express-Hinweis (Produktseite): Umrandet den Bereich aus
 * Ratenzahlungs-Hinweis (.ppcp-messages) + PayPal-Buttons (.ppc-button-wrapper,
 * beide vom Plugin "WooCommerce PayPal Payments") als eigenen Container mit
 * vorangestelltem Hinweistext "oder Express-Checkout nutzen". Der Container
 * wird per JS (paypal-express-hint.js) um die vom Plugin gerenderte Markup
 * gelegt -- Farben/Rand über Theme-Variablen, siehe [[feedback_shop_colors]].
 */
/*
 * z-Index-Fix: Das PayPal-SDK hängt bei Bedarf eigene position:fixed-Overlays
 * (z.B. "#smart-menu" für die Funding-Source-Auswahl, "#installments-modal")
 * direkt neben den Button ins DOM. Ohne transformierten/layout-isolierten
 * Vorfahren werden diese Overlays relativ zum VIEWPORT positioniert und
 * erscheinen dann -- da PayPal SDK-seitig einen sehr hohen z-index setzt --
 * über allem, inkl. dem Sticky-Header (der selbst nur z-index 899/900 hat,
 * siehe glozin/sass/components/header/_sticky.scss). "contain: layout"
 * macht diesen Container zum Containing Block für seine fixed-position
 * Nachfahren: Die Overlays werden dann relativ zu DIESEM Container statt
 * zum Viewport positioniert (bleiben aber sichtbar, kein overflow:hidden),
 * wodurch sie nicht mehr über den Header ragen können.
 */
.schu-paypal-express {
	position: relative;
	contain: layout;
	border: 1px solid var(--gz-border-color, #d4d4d4);
	border-radius: 5px;
	padding: 15px 20px;
	margin-top: 15px;
	text-align: center;
}

.schu-paypal-express__hint {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--gz-color-dark, #272727);
	margin-bottom: 8px;
}

/* .ppcp-messages enthält ein SDK-Iframe, das die volle Breite seines
 * Elternelements ausfüllt und den Ratenzahlungs-Text intern selbst umbricht,
 * sobald die Breite knapp wird -- text-align hat darauf keinen Einfluss
 * (fremder Iframe-Inhalt). Damit der Text auf einer Zeile bleibt UND
 * zentriert wirkt, wird die Breite auf einen für den deutschen Satz
 * ausreichend breiten Wert begrenzt (schmaler als die Produktspalte) und
 * per Auto-Margin zentriert. Falls der Text auf sehr schmalen Viewports
 * trotzdem umbricht, max-width hier erhöhen. */
.schu-paypal-express .ppcp-messages {
	max-width: 460px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Sticky-Add-to-Cart-Leiste (unten, #glozin-sticky-add-to-cart): rendert
 * eine EIGENE, zweite Instanz von .ppcp-messages/.ppc-button-wrapper
 * (server-seitig, nicht Teil des oben umhüllten .schu-paypal-express) direkt
 * neben dem "In den Warenkorb"-Button -- ohne jeglichen Abstand dazwischen.
 * Kleiner Abstand zum Button.
 */
.glozin-sticky-atc__actions .ppcp-messages {
	margin-inline-start: 8px;
}