/* IZ Checkout-Flow: gemeinsames Stylesheet fuer Warenkorb, Persoenliche Daten
 * und Kasse. Ersetzt die zuvor ueber ~15 einzelne wp_footer-Snippets
 * verstreuten, teils widerspruechlichen CSS-Regeln durch eine einzige
 * konsolidierte Quelle. Wird nur auf Warenkorb-/Checkout-Seiten geladen
 * (siehe iz_enqueue_checkout_assets() in inc/checkout-shared.php).
 */

/* ---- Fortschrittsanzeige (Warenkorb, Persoenliche Daten, Kasse) ---- */
/* Gilt fuer die interaktive Germanized-Navigation (ul.step-nav.nav-wizard,
 * auf Persoenliche-Daten/Kasse) UND die rein dekorative Warenkorb-Leiste
 * (ul.iz-step-progress) - beide teilen dieselben Klassennamen fuer li/a,
 * damit exakt ein Regelsatz beide Ansichten identisch gestaltet. */
ul.step-nav.nav-wizard,
ul.iz-step-progress {
	display: flex;
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	overflow: hidden;
	background-color: #f9f9f9;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
}
ul.step-nav.nav-wizard > li,
ul.iz-step-progress > li {
	flex: 1;
	min-width: 0;
}
ul.step-nav.nav-wizard .step-number,
ul.iz-step-progress .step-number {
	display: none;
}
ul.step-nav.nav-wizard li a,
ul.iz-step-progress li span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 3rem;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #e8e8e8 !important;
	color: #999 !important;
	text-decoration: none;
	font-weight: 600;
}
/* !important + hohe Spezifitaet: ueberschreibt bewusst zwei fest einprogrammierte
 * Farben aus fremden Stylesheets (Germanized Pro's "wc-gzdp-checkout" und die
 * kompilierte woocommerce.min.css des Themes, die fuer denselben Selektor ein
 * Tuerkis vorgibt), damit ausschliesslich unser Marken-Rot erscheint. */
body.woocommerce-checkout ul.step-nav.nav-wizard li.active a,
body.woocommerce-checkout ul.step-nav.nav-wizard li.done a,
ul.step-nav.nav-wizard li.active a,
ul.step-nav.nav-wizard li.done a,
ul.iz-step-progress li.active span,
ul.iz-step-progress li.done span {
	background: #8b1a1a !important;
	color: #fff !important;
}
body.woocommerce-checkout ul.step-nav.nav-wizard li.active::after,
ul.step-nav.nav-wizard li.active::after {
	border-left-color: #8b1a1a !important;
}
/* Das <li> selbst (nicht nur der <a>-Button darin) traegt bei Germanized
 * Pro ebenfalls eine fest einprogrammierte Tuerkis-Hintergrundfarbe fuer
 * den aktiven Schritt - sie scheint an der Pfeilspitze der Chevron-Form
 * hinter dem roten Button durch, wodurch zwei Farben gleichzeitig
 * sichtbar waren. Auf Markenrot vereinheitlicht (2026-07-22,
 * Nutzer-Feedback). */
body.woocommerce-checkout ul.step-nav.nav-wizard li.active,
ul.step-nav.nav-wizard li.active {
	background: #8b1a1a !important;
}

/* ---- ENTFERNT am 2026-08-08 (Christian-Freigabe) ----
 * Hier stand eine Regel, die Zwischensumme, Steuer-Einzelposten und die von
 * WooCommerce Subscriptions eingefuegte Tabelle der wiederkehrenden Zahlungen
 * per "display: none" ausgeblendet hat. Begruendet war sie mit "redundant zur
 * Gesamtsumme".
 *
 * Das war rechtlich nicht haltbar. Bei einem Verlag, dessen Hauptumsatz aus
 * Abonnements besteht, ist der Preis je Bezugszeitraum keine Dopplung, sondern
 * die wesentliche Preisangabe. Die Preisangabenverordnung und § 312j Abs. 2 BGB
 * verlangen sie unmittelbar vor dem Bestellknopf.
 *
 * Die Zeilen werden deshalb wieder von WooCommerce ausgegeben. Wenn die
 * Darstellung dadurch unruhig wirkt, ist die Loesung eine gestalterische
 * (Abstaende, Schriftschnitt, Gruppierung) - NICHT das erneute Ausblenden.
 * ---- */

/* ---- Warenkorb-Tabelle ---- */
table.shop_table.cart img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 6px;
}
tr.iz-cart-product-row th {
	font-weight: 600;
}
tr.iz-cart-product-row td {
	text-align: right;
}
tr.iz-cart-product-row:last-of-type th,
tr.iz-cart-product-row:last-of-type td {
	padding-bottom: 12px;
	border-bottom: 1px solid #e0e0e0;
}
/* Gesamtsumme-Zeile im Warenkorb (siehe checkout-shared.php,
 * woocommerce_cart_contents-Hook): Bezeichnung linksbuendig statt wie die
 * uebrigen Zeilen rechtsbuendig - WooCommerces eigenes responsives CSS
 * erzwingt auf Mobilgeraeten text-align:right per !important auf JEDEM
 * td, daher hier ebenfalls mit !important gegensteuern (2026-07-22,
 * Nutzer-Feedback). */
tr.iz-cart-total-row td.iz-cart-total-label {
	font-weight: 600;
	text-align: left !important;
}
table.shop_table.cart td.actions {
	overflow: visible;
	padding-top: 14px;
	padding-bottom: 14px;
}
table.shop_table.cart td.actions:after {
	content: "";
	display: table;
	clear: both;
}

.iz-order-review-heading {
	margin: 24px 0 14px;
	font-size: 17px;
}
/* Die Ueberschrift steht als direktes Kind von form.checkout, ausserhalb
 * jedes Schritt-Wrappers (siehe checkout-shared.php,
 * woocommerce_checkout_before_order_review) - dadurch war sie faelschlich
 * bereits auf dem "Persoenliche Daten"-Schritt sichtbar, obwohl die
 * Bestelluebersicht selbst dort noch ausgeblendet ist. Nur auf dem
 * "Kasse"-Schritt zeigen (2026-07-22, Nutzer-Feedback). */
body.woocommerce-multistep-checkout-active-address .iz-order-review-heading {
	display: none;
}
/* Dieselbe Ursache betrifft die Adressbox selbst ("Ihre Angaben" +
 * "Bitte ueberpruefen Sie Ihre Angaben") - sie steht ebenfalls ausserhalb
 * jedes Schritt-Wrappers und war dadurch faelschlich schon auf dem
 * "Persoenliche Daten"-Schritt sichtbar, wo der Kunde seine Adresse noch
 * gar nicht final bestaetigt hat. Nur auf dem "Kasse"-Schritt zeigen
 * (2026-07-22, Nutzer-Feedback). */
body.woocommerce-multistep-checkout-active-address .iz-order-summary-address {
	display: none;
}

/* ---- Zahlungsarten-Liste: echte, sichtbare Radioliste statt Kachel-Buttons ----
 * Kreis-Radio links, Beschriftung + Logo rechts daneben - wie vom Nutzer per
 * Referenzbild vorgegeben (2026-07-24, Kasse-Umbau: "keine Links [gemeint:
 * keine linksbuendigen Buttons], sondern eine Radioliste wie auf dem Bild").
 * !important: Germanized Pro liefert fuer diese Elemente eigene Basis-Styles
 * mit vergleichbarer Spezifitaet mit, die hier bewusst uebersteuert werden. */
#payment ul.wc_payment_methods.payment_methods.methods,
#payment ul.payment_methods.methods {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 1rem 0 !important;
	list-style: none !important;
	border: 1px solid #d8d8d8 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method,
#payment ul.payment_methods.methods li.wc_payment_method {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	border: none !important;
	border-bottom: 1px solid #e5e5e5 !important;
	border-radius: 0 !important;
	background: #fff !important;
	margin: 0 !important;
	padding: 14px 20px !important;
	box-sizing: border-box !important;
	list-style: none !important;
	flex-wrap: wrap !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method:last-of-type,
#payment ul.payment_methods.methods li.wc_payment_method:last-of-type {
	border-bottom: none !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method > input.input-radio,
#payment ul.payment_methods.methods li.wc_payment_method > input.input-radio {
	position: static !important;
	opacity: 1 !important;
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0 !important;
	pointer-events: auto !important;
	accent-color: #8b1a1a !important;
	margin: 0 !important;
	cursor: pointer !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method > label,
#payment ul.payment_methods.methods li.wc_payment_method > label {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex: 1 1 auto !important;
	min-height: 32px !important;
	gap: 10px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	font-family: "Interstate-LightCond", Arial, sans-serif !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #222 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method > label img,
#payment ul.payment_methods.methods li.wc_payment_method > label img {
	max-width: 120px !important;
	height: 28px !important;
	width: auto !important;
	object-fit: contain !important;
	margin-left: auto !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method:has(> input.input-radio:checked),
#payment ul.payment_methods.methods li.wc_payment_method:has(> input.input-radio:checked) {
	background: #fdf5f6 !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method:has(> input.input-radio:checked) > label,
#payment ul.payment_methods.methods li.wc_payment_method:has(> input.input-radio:checked) > label {
	color: #8b1a1a !important;
	font-weight: 600 !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method .payment_box,
#payment ul.payment_methods.methods li.wc_payment_method .payment_box {
	display: none !important;
	width: 100% !important;
	padding: 0 20px 18px !important;
	margin: 0 !important;
	border: none !important;
	background: #fff !important;
	box-sizing: border-box !important;
}
/* Formular/Button einer ausgewaehlten Zahlungsart erst zeigen, wenn die
 * Legal-Checkbox ("legal") bestaetigt ist - Klasse "iz-consent-given" wird
 * per JS auf #payment umgehaengt, sobald die Checkbox angehakt wird (siehe
 * checkout-flow.php). Vorher passiert bei Auswahl einer Kachel bewusst
 * nichts, wie gewuenscht (kein Popup mehr noetig). (2026-07-24,
 * Nutzer-Feedback: Kasse-Umbau) */
#payment.iz-consent-given ul.wc_payment_methods.payment_methods.methods li.wc_payment_method:has(> input.input-radio:checked) .payment_box,
#payment.iz-consent-given ul.payment_methods.methods li.wc_payment_method:has(> input.input-radio:checked) .payment_box {
	display: block !important;
}
/* "Express-Zahlung"-Pseudo-Kachel hat keine eigene .payment_box (kein
 * echtes Gateway) - stattdessen wird der bereits vorhandene, echte
 * Express-Bereich (#iz-express-payment-area, Apple Pay/Google Pay) erst
 * sichtbar, wenn diese Kachel ausgewaehlt UND die Checkbox bestaetigt ist.
 * Bewusst nur Sichtbarkeit umgeschaltet, das Stripe-Element wird dabei nie
 * im DOM verschoben (das zerstoert das iframe, siehe Analysebericht). */
#iz-express-payment-area {
	display: none !important;
}
#payment.iz-consent-given.iz-express-selected #iz-express-payment-area {
	display: block !important;
}
#payment ul.wc_payment_methods.payment_methods.methods li.wc_payment_method .payment_box:before,
#payment ul.payment_methods.methods li.wc_payment_method .payment_box:before {
	display: none !important;
}

/* Echter Stripe Express-Button (Apple Pay/Google Pay): bewusst OHNE
 * einschraenkendes eigenes Kachel-/Grid-Styling, um die Groessenberechnung
 * des Stripe-iframes nicht zu stoeren - Stripes eigenes JS steuert
 * Sichtbarkeit/Layout selbst. */
#wc-stripe-express-checkout-element {
	margin: 0 0 1rem;
}
#wc-stripe-express-checkout-element .wc-stripe-express-checkout-element-title-container,
#wc-stripe-express-checkout-element > div {
	border-radius: 6px;
	overflow: hidden;
}

/* ---- Produkt-/Versandzeile: Bild links, Beschriftung rechts daneben ----
 * statt Bild ueber/neben umbrechendem Text - spart vertikale Hoehe in der
 * Bestellzusammenfassung. Gilt fuer die normale Produktzeile UND die
 * Versandzeile (beide nutzen dieselbe Wrapper-Klasse). Da Produktname,
 * Menge und Preis als lose Textknoten/Inline-Elemente direkt im Wrapper
 * liegen (kein eigener Textblock-Container), werden sie als Flex-Items in
 * der gleichen Zeile neben dem Bild angeordnet statt darunter umzubrechen.
 * (2026-07-24, Nutzer-Feedback: "Bild links, Beschriftung rechts daneben,
 * so sparen wir uns Höhe") */
.wc-gzd-cart-item-name-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
}
.wc-gzd-cart-item-name-wrapper .wc-gzd-cart-item-thumbnail {
	flex-shrink: 0;
}
.wc-gzd-cart-item-name-wrapper .wc-gzd-cart-item-thumbnail img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
}

/* ---- Versandhinweis unter dem jeweiligen Abo im Warenkorb ---- */
.iz-cart-item-shipping {
	margin-top: 4px;
	font-size: 0.85em;
	color: #666;
}

/* ---- "Jetzt kaufen" + "Zurück"-Link nebeneinander ---- */
.form-row.place-order.wc-gzd-place-order {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.form-row.place-order.wc-gzd-place-order #place_order {
	margin: 0;
}
/* Bestell-Button IMMER im gleichen Format/Farbe wie die Zahlungsarten-
 * Kacheln darueber zeigen - PayPal Payments faerbt den Button bei PayPal-
 * Auswahl per eigenem Skript/Style auf Gelb um, was wie ein zweiter,
 * andersartiger Button wirkte. !important noetig, um das dynamische
 * Umfaerben zuverlaessig zu ueberschreiben, unabhaengig davon, ob PPCP
 * per Inline-Style oder eigener Klasse arbeitet. (2026-07-23,
 * Nutzer-Feedback: "sieht nicht gut aus, wenn der Button aufploppt") */
#place_order {
	background: #8b1a1a !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	min-height: 56px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	font-family: "Interstate-LightCond", Arial, sans-serif !important;
	text-transform: none !important;
	box-shadow: none !important;
}
.iz-back-to-address {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	margin: 0;
	background: #fff;
	border: 1px solid #8b1a1a;
	color: #8b1a1a;
	padding: 0 15px;
	font-size: 17px;
	font-family: "Interstate-LightCond", Arial, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

/* ---- "Anrede" neben "E-Mail-Adresse" statt auf voller Breite ----
 * Das Theme-SCSS (_checkout.scss) setzt #billing_title_field bewusst auf
 * beide Grid-Spalten ("grid-column-end:-1"), wodurch es allein in einer
 * Zeile stand und "E-Mail-Adresse" darunter/daneben verwaist wirkte.
 * Auf eine Spalte reduziert - stellt es sich automatisch neben das
 * E-Mail-Feld (zweite Spalte, unveraendert), beide gleich breit.
 * (2026-07-22, Nutzer-Feedback) */
.woocommerce-billing-fields__field-wrapper .form-row#billing_title_field {
	grid-column-start: 1 !important;
	grid-column-end: 2 !important;
}
/* "E-Mail-Adresse" hat von Haus aus einen oberen Aussenabstand (20px,
 * normalerweise Abstand zur vorherigen volle-Breite-Zeile), der es jetzt
 * gegenueber "Anrede" nach unten versetzt, obwohl beide Eingabefelder
 * selbst gleich hoch sind (2026-07-22, Nutzer-Feedback). */
.woocommerce-billing-fields__field-wrapper .form-row#billing_email_field {
	margin-top: 0 !important;
}

/* ---- Adress-/Zahlungsart-Übersicht "Ihre Angaben" (Kasse-Schritt) ---- */
.iz-order-summary-address {
	background: #f7f6f4;
	border: 1px solid #e2ddd6;
	border-radius: 8px;
	padding: 20px 24px;
	margin-bottom: 24px;
}
.iz-order-summary-address h3 {
	margin: 0 0 14px;
	font-size: 17px;
	color: #222;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.iz-order-summary-address .iz-addr-edit {
	font-size: 15px;
	font-weight: 400;
	color: #8b1a1a;
	text-decoration: underline;
}
.iz-order-summary-address .iz-addr-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.iz-order-summary-address .iz-addr-block {
	flex: 1 1 220px;
	min-width: 200px;
}
.iz-order-summary-address .iz-addr-block h4 {
	margin: 0 0 6px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #888;
	font-weight: 600;
}
.iz-order-summary-address .iz-addr-block p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}
/* Leittext ueber der Adressbox: "Bitte ueberpruefen Sie Ihre Angaben"
 * (2026-07-22, Nutzer-Feedback). */
.iz-order-summary-address-intro {
	margin: 0 0 12px;
	font-size: 16px;
	color: #333;
}

/* Das Theme-SCSS setzt fuer .woocommerce-checkout-payment eine feste
 * max-width von 520px (fuer den Fall, dass Adressbox + Zahlungskacheln
 * NEBENEINANDER in einem 2-Spalten-Layout stehen sollten) - dadurch war
 * die Adressbox deutlich schmaler als der Fortschrittsbalken darueber.
 * Auf volle verfuegbare Breite gesetzt (2026-07-22, Nutzer-Feedback). */
.woocommerce-checkout-payment {
	max-width: none !important;
	width: 100% !important;
}

/* Zweite, redundante "Kasse"-Ueberschrift von Germanized Pro's eigenem
 * Order-Submit-Template (haengt am "order"-Schrittwrapper, taucht nach
 * den Zahlungsarten-Kacheln auf) - die Seitenueberschrift oberhalb des
 * Trennstrichs (h1.iz-heading--page) uebernimmt diese Rolle bereits
 * (2026-07-22, Nutzer-Feedback). */
#order_review_heading {
	display: none !important;
}

/* Zweite, bildlose Versandzeile in der Kasse-Bestelltabelle: WooCommerces
 * eigene review-order.php rendert die Versandkosten standardmaessig noch
 * einmal zusaetzlich zu unserer eigenen Zeile mit Produktbild (Snippet
 * #190, checkout-flow.php). Betrifft auch die "wiederkehrende Zahlungen"-
 * Tabelle (dort ebenfalls Klasse "shipping"). (2026-07-22, Nutzer-Feedback) */
.woocommerce-checkout-review-order-table tr.shipping {
	display: none !important;
}

/* ---- Wiederkehrende Buttons (Warenkorb + Checkout einheitlich) ---- */
.iz-btn-outline,
.iz-btn-solid,
table.shop_table.cart td.actions button[name="update_cart"],
table.shop_table.cart td.actions a.iz-continue-shopping,
.woocommerce-checkout .prev-step-button,
.iz-back-to-cart {
	display: inline-block;
	height: 40px;
	line-height: 38px;
	padding: 0 15px;
	font-family: "Interstate-LightCond", Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: normal;
	white-space: nowrap;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none;
	border-radius: 0;
	background: #fff;
	color: #8b1a1a;
	border: 1px solid #8b1a1a;
}
.iz-btn-outline:hover,
table.shop_table.cart td.actions button[name="update_cart"]:hover,
table.shop_table.cart td.actions a.iz-continue-shopping:hover,
.woocommerce-checkout .prev-step-button:hover,
.iz-back-to-cart:hover {
	background: #8b1a1a;
	color: #fff;
}
table.shop_table.cart td.actions button[name="update_cart"] { float: right; margin: 0; }
table.shop_table.cart td.actions a.iz-continue-shopping { float: left; }
.iz-back-to-cart { float: left; }
.step-buttons-address:after { content: ""; display: table; clear: both; }

/* "Weiter zu Persoenliche Daten" (Warenkorb): steht in einer eigenen
 * WooCommerce-Struktur (".cart_totals") getrennt von der umrahmten
 * "Weiter einkaufen"/"Warenkorb aktualisieren"-Box direkt darueber - dadurch
 * wirkte der Button bislang optisch isoliert/losgeloest statt als klarer
 * naechster Schritt. Rein visuelle Angleichung (Abstand + volle Breite,
 * gleiche Button-Optik wie an anderer Stelle im Checkout), keine
 * Struktur-Aenderung. (2026-07-26, Tiefenanalyse) */
.wc-proceed-to-checkout {
	margin-top: 16px;
}
.wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* ---- Bestelluebersicht (Warenkorb-Summe + Checkout-Review) ---- */
.iz-cart-summary-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total:not(.recurring-total) th {
	font-weight: 700;
	font-size: 16px;
}
.iz-cart-summary-table tr.order-total td,
.woocommerce-checkout-review-order-table tr.order-total:not(.recurring-total) td {
	text-align: right;
	font-weight: 700;
	font-size: 16px;
}
.iz-cart-summary-table tr.order-total td small,
.woocommerce-checkout-review-order-table tr.order-total:not(.recurring-total) td small {
	display: block;
	font-weight: 400;
	font-size: 12px;
	color: #666;
}
.woocommerce-checkout-review-order-table img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 6px;
}

/* ---- Express-Checkout: "- ODER -"-Trennlinie zwischen Express-Button und
 * regulaeren Zahlungsarten ausblenden - wirkt zwischen den Kacheln unnoetig. ---- */
#wc-stripe-express-checkout-button-separator {
	display: none;
}

/* ---- DHL-Abholstation-Hinweis (nicht unterstuetzt) ---- */
.pickup-location-notice,
.pickup-location-notice-link,
#billing_pickup_location_notice,
#shipping_pickup_location_notice,
#pickup_location_customer_number_field {
	display: none;
}

/* ---- Lieferadresse-Umschalter optisch hervorheben ---- */
#ship-to-different-address {
	background: #faf6ee;
	border: 1px solid #e8ddc8;
	border-radius: 8px 8px 0 0;
	padding: 16px 20px;
	margin: 20px 0 0 !important;
}
#ship-to-different-address:has(#ship-to-different-address-checkbox:not(:checked)) {
	border-radius: 8px;
	margin-bottom: 20px !important;
}
#ship-to-different-address label.checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin: 0;
}
#ship-to-different-address input#ship-to-different-address-checkbox {
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
}
#ship-to-different-address + .shipping_address {
	background: #faf6ee;
	border: 1px solid #e8ddc8;
	border-top: none;
	border-radius: 0 0 8px 8px;
	padding: 4px 20px 20px;
	margin: 0 0 20px !important;
}

@media (max-width: 600px) {
	ul.step-nav.nav-wizard,
	ul.iz-step-progress {
		flex-direction: column;
	}
}

/* form.checkout ist ein CSS-Grid mit nur einer Spalte (868px) UND festen
 * Zeilenhoehen (grid-template-rows mit vier fest berechneten px-Werten,
 * Relikt aus einem frueheren 2-Spalten-Layout mit #order_review als
 * "grid-row:1/4"-Block daneben). Dadurch gerieten nachfolgende
 * Geschwister-Elemente (Adressbox, "Ihre Bestellung"-Ueberschrift) trotz
 * korrekter Position im HTML entweder optisch HINTER die gesamte
 * Bestelluebersicht oder es blieben leere Zeilen mit der urspruenglichen
 * festen Hoehe uebrig. Da nur noch eine Spalte existiert, wird auf
 * normalen Blockfluss zurueckgeschaltet - das nested Grid innerhalb von
 * #customer_details (Rechnungsfelder) ist davon unberuehrt, da es ein
 * eigenes, separates Grid ist. (2026-07-22, Nutzer-Feedback) */
form.checkout.iz-checkout {
	display: block !important;
}

/* Germanized Pro blendet #order_review (die komplette "Kasse"-Sektion mit
 * allen Zahlungsarten) auf den Schritten "Warenkorb"/"Persoenliche Daten"
 * nur per opacity/visibility aus (siehe checkout-multistep-styles.css),
 * NICHT per display:none - der Bereich bleibt dadurch mit voller Hoehe im
 * Layout stehen und hinterlaesst eine grosse Luecke vor dem Footer. Hier
 * zusaetzlich display:none erzwingen, sobald der Schritt nicht aktiv ist -
 * dieselben Aktiv-Klassen wie im Original-Selektor. (2026-07-23,
 * Nutzer-Feedback) */
.woocommerce-multistep-checkout form.iz-checkout #order_review {
	display: none;
}
.woocommerce-multistep-checkout.woocommerce-multistep-checkout-active-order form.iz-checkout #order_review,
.woocommerce-multistep-checkout.woocommerce-multistep-checkout-active-payment form.iz-checkout #order_review {
	display: block;
}

/* display:none oben entfernt zusammen mit #order_review auch dessen eigenen
 * Bodenabstand, wodurch die Luecke vor dem Footer kleiner wurde als im
 * Warenkorb. Gleicher Wert wie ".wc-proceed-to-checkout" dort
 * (WooCommerce-Kernstil "padding:1em 0"), damit beide Seiten denselben
 * Abstand zum Footer haben. (2026-07-23, Nutzer-Feedback) */
.woocommerce-multistep-checkout form.iz-checkout {
	margin-bottom: 1em;
}

/* HINWEIS (2026-07-24): Die fruehere Regel an dieser Stelle (versteckte
 * ".ppc-button-wrapper"/"[id*=ppc-button]" etc. pauschal innerhalb jeder
 * .payment_box) ist entfernt - ihre urspruengliche Ursache (PayPals SEPA-
 * Umsteiger-Button) ist inzwischen sauber ueber den offiziellen Funding-
 * Source-Filter geloest (siehe checkout-shared.php,
 * "woocommerce_paypal_payments_disabled_funding"). Die alte Regel versteckte
 * inzwischen faelschlich auch PayPals eigenen, jetzt gezielt in die
 * PayPal-Box umgeleiteten echten Smart-Button (siehe Theme-Template
 * woocommerce/checkout/payment-method.php, Hook
 * "iz_checkout_payment_method_box_end"). */


/**
 * PayPal-Smart-Button (rendert an fixer Position via PayPal Payments SDK,
 * "woocommerce_review_order_after_payment") optisch direkt an die
 * Zahlungsarten-Liste anschliessen, statt DOM-Position des Buttons zu
 * veraendern (das brachte das SDK zuverlaessig zum Abstuerzen/Leerbleiben).
 * #order_review wird dafuer zu einer Flexbox-Spalte; der "Zurueck"-Button
 * bekommt einen hoeheren order-Wert und wandert dadurch ans Ende, nach dem
 * PayPal/Apple Pay/Google Pay-Bereich. (2026-07-25, Nutzer-Feedback)
 */
#order-verify {
	display: flex;
	flex-direction: column;
}
#order-verify > .ppc-button-wrapper,
#order-verify > #ppc-button-ppcp-applepay,
#order-verify > #ppc-button-ppcp-googlepay {
	order: 1;
	margin-top: 0.75rem;
}
#order-verify > .wc-gzd-order-submit {
	order: 2;
	margin-top: 1.25rem;
}