/*
 * GCOM360 – Optik von Warenkorb, Kasse und Danke-Seite
 * Siehe Kopf von gcom360-checkout-optik.php. Markenorange: #ff7500
 */

/* ------------------------------------------------------------------ *
 * 1. Seitentitel „Kasse" in Weiss (wie auf der Warenkorbseite)
 * ------------------------------------------------------------------ */
body.woocommerce-checkout h1.entry-title,
body.woocommerce-cart h1.entry-title {
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 2. Eingabefelder: ruhig im Grundzustand, orange bei Mouseover,
 *    weiss nur solange das Feld wirklich aktiv ist.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout input[type="number"],
.wp-block-woocommerce-checkout input[type="search"],
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-cart input[type="text"],
.wp-block-woocommerce-cart input[type="email"],
.wp-block-woocommerce-cart select,
.woocommerce-cart .coupon input#coupon_code,
.woocommerce-cart form.checkout_coupon input#coupon_code {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none;
	transition: box-shadow .18s ease;
}

.wp-block-woocommerce-checkout input[type="text"]:hover,
.wp-block-woocommerce-checkout input[type="email"]:hover,
.wp-block-woocommerce-checkout input[type="tel"]:hover,
.wp-block-woocommerce-checkout input[type="number"]:hover,
.wp-block-woocommerce-checkout select:hover,
.wp-block-woocommerce-checkout textarea:hover,
.wp-block-woocommerce-cart input[type="text"]:hover,
.wp-block-woocommerce-cart input[type="email"]:hover,
.woocommerce-cart .coupon input#coupon_code:hover,
.woocommerce-cart form.checkout_coupon input#coupon_code:hover {
	box-shadow: 0 0 0 1px #ff7500, 0 0 10px rgba( 255, 117, 0, .35 );
}

.wp-block-woocommerce-checkout input[type="text"]:focus,
.wp-block-woocommerce-checkout input[type="email"]:focus,
.wp-block-woocommerce-checkout input[type="tel"]:focus,
.wp-block-woocommerce-checkout input[type="number"]:focus,
.wp-block-woocommerce-checkout select:focus,
.wp-block-woocommerce-checkout textarea:focus,
.wp-block-woocommerce-cart input[type="text"]:focus,
.wp-block-woocommerce-cart input[type="email"]:focus,
.woocommerce-cart .coupon input#coupon_code:focus,
.woocommerce-cart form.checkout_coupon input#coupon_code:focus {
	box-shadow: 0 0 0 1px #fff;
}

/* Der Rahmen, den WooCommerce Blocks um das ganze Feld legt, faellt ebenfalls weg. */
.wp-block-woocommerce-checkout .wc-block-components-text-input,
.wp-block-woocommerce-checkout .wc-block-components-combobox {
	border: 0;
}

/* ------------------------------------------------------------------ *
 * 3. Inhalt der Felder senkrecht mittig, links etwas Luft
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="number"] {
	padding: 14px 16px !important;
	line-height: 22px;
}

/* Die schwebende Beschriftung sitzt sonst auf dem Wert. Sie erscheint nur, solange
   das Feld leer ist — dann darf sie mittig stehen, sonst rutscht sie nach oben. */
.wp-block-woocommerce-checkout .wc-block-components-text-input label {
	left: 16px;
	top: 14px;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label {
	top: 4px;
	transform: translateY( 0 ) scale( .75 );
	transform-origin: left top;
}

/* Auswahlfelder (Land, Bundesland) tragen ihre Beschriftung dauerhaft im Feld. */
.wp-block-woocommerce-checkout .wc-block-components-combobox .components-form-token-field__input-container,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-combobox-control input {
	padding-left: 16px;
}

/* ------------------------------------------------------------------ *
 * 4. Adresskarte: Abstand über dem Namen und zwischen den Zeilen halbiert,
 *    damit sie zum Feld „Kontaktinformationen" darüber passt.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-address-card {
	padding: 9px 16px;
}

.wp-block-woocommerce-checkout .wc-block-components-address-card address > span {
	line-height: 1.35;
}

/* ------------------------------------------------------------------ *
 * 5. „Bearbeiten" – ein Textknopf, kein rosa Kasten.
 *    Ursache war eine themeweite Regel button:hover{background:#c36}.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit,
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit:hover,
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit:focus,
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit:active,
.wp-block-woocommerce-checkout .wc-block-components-panel__button:hover,
.wp-block-woocommerce-checkout .wc-block-components-panel__button:focus,
.wp-block-woocommerce-checkout .wc-block-components-panel__button:active {
	background: transparent !important;
	background-color: transparent !important;
	color: #ff7500 !important;
	box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-address-card__edit:hover,
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit:focus {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * 6. Die beiden Auswahlkästchen: 20 Prozent grösser und um 16 px eingerückt,
 *    damit sie mit den Radioknöpfen darüber und darunter auf einer Linie stehen.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-checkout__use-address-for-billing,
.wp-block-woocommerce-checkout .wc-block-checkout__add-note > .wc-block-components-checkbox {
	transform: scale( 1.2 );
	transform-origin: left center;
	margin-left: 16px;
	margin-bottom: 12px;
}

/* ------------------------------------------------------------------ *
 * 7. Zahlungsarten: Erklärtext lesbar, Logo links daneben.
 *    Beide Logos sitzen in derselben Box (30 × 20 px) und sind weiss,
 *    damit die Zeile ruhig bleibt.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__description,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content p {
	color: #c9c9c9;
}

.wp-block-woocommerce-checkout label[for$="-ppcp-gateway"] .wc-block-components-radio-control__label::before,
.wp-block-woocommerce-checkout label[for$="-amazon_payments_advanced"] .wc-block-components-radio-control__label::before,
.wp-block-woocommerce-checkout label[for$="-mollie_wc_gateway_creditcard"] .wc-block-components-radio-control__label::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 20px;
	margin-right: 10px;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.wp-block-woocommerce-checkout label[for$="-ppcp-gateway"] .wc-block-components-radio-control__label::before {
	background-image: url( "paypal.svg" );
}

.wp-block-woocommerce-checkout label[for$="-amazon_payments_advanced"] .wc-block-components-radio-control__label::before {
	background-image: url( "amazonpay.svg" );
}

.wp-block-woocommerce-checkout label[for$="-mollie_wc_gateway_creditcard"] .wc-block-components-radio-control__label::before {
	background-image: url( "creditcard.svg" );
}

/* Mollies mitgebrachtes farbiges Kartenlogo (img von mollie.com) weicht dem
   weissen Symbol links — wie bei PayPal und Amazon Pay. */
.wp-block-woocommerce-checkout label[for$="-mollie_wc_gateway_creditcard"] img.mollie-gateway-icon {
	display: none;
}

/* PayPal führte als einzige Zahlungsart eine Erklärzeile („Pay via PayPal.").
   Sie faellt weg — Amazon Pay hat auch keine. Nur diese eine Zeile, damit die
   Anzeige der gewaehlten Amazon-Zahlungsart erhalten bleibt. */
#radio-control-wc-payment-method-options-ppcp-gateway__content {
	display: none;
}

/* Die gewaehlte Zahlungsart bekommt einen dünnen hellgrauen Rahmen. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:has( input:checked ),
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked {
	border: 1px solid #b3b3b3 !important;
	border-radius: 4px;
	box-shadow: none !important;
}

/* Der Name der Zahlungsart soll neben dem Logo auf der Mittellinie sitzen. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label {
	display: flex;
	align-items: center;
}

/* ------------------------------------------------------------------ *
 * 8. Auswahllisten (Land/Region, Bundesland) im GCOM360-Ton
 *
 * Das geschlossene Feld bekommt einen dunklen radialen Verlauf, die
 * aufgeklappte Liste einen einheitlich dunklen Grund mit orangen Eintraegen;
 * der gewaehlte Eintrag steht weiss und fett.
 *
 * Grenze der Technik: Die Balkenfarbe, mit der der Browser den Eintrag unter
 * dem Mauszeiger markiert, zeichnet das Betriebssystem. Sie laesst sich nicht
 * per CSS setzen — Schriftfarbe und -schnitt dagegen schon. Auf iOS und macOS
 * blendet das System eine eigene Auswahl ein, die diese Regeln ignoriert.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-cart select,
.woocommerce-cart .woocommerce select,
.wc-blocks-components-select__select {
	/* Der Grundton faerbt in Chrome auch die aufgeklappte Liste, deshalb deckend. */
	background-color: #2f2f2f !important;
	background-image: radial-gradient( 130% 170% at 18% 0%, rgba( 255, 255, 255, .10 ) 0%, rgba( 255, 255, 255, .02 ) 55%, rgba( 0, 0, 0, .30 ) 100% ) !important;
	color: #ff7500;
}

.wp-block-woocommerce-checkout select option,
.wp-block-woocommerce-cart select option,
.woocommerce-cart .woocommerce select option,
.wc-blocks-components-select__select option {
	background-color: #2f2f2f;
	color: #ff7500;
	font-weight: 400;
}

.wp-block-woocommerce-checkout select option:checked,
.wp-block-woocommerce-cart select option:checked,
.woocommerce-cart .woocommerce select option:checked,
.wc-blocks-components-select__select option:checked,
.wc-blocks-components-select__select option[selected] {
	background-color: #3f3f3f;
	color: #fff;
	font-weight: 700;
}

/* Der Rahmen des Auswahlfeldes folgt derselben Regel wie die Eingabefelder. */
.wp-block-woocommerce-checkout .wc-blocks-components-select__container {
	border: 0;
	background: transparent;
}

/* ------------------------------------------------------------------ *
 * 9. Express-Kasse: Überschrift 20 Prozent grösser, und der Amazon-Knopf
 *    so breit, dass er genauso hoch wird wie der PayPal-Knopf daneben.
 *
 *    Hintergrund: Amazon zeichnet seinen Knopf in einen abgeschotteten
 *    Bereich (Shadow DOM), an den CSS nicht herankommt. Die Höhe ergibt
 *    sich dort fest aus der Breite — also wird die Breite vorgegeben,
 *    bevor Amazon zeichnet.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title,
.wp-block-woocommerce-checkout .wc-block-components-express-payment__title {
	font-size: 15.6px !important;
}

@media ( min-width: 782px ) {
	/* Amazons Skript zeichnet seinen Knopf in einen abgeschotteten Bereich
	   (Shadow DOM) mit fester Höhe. Deshalb wird er schmaler gezeichnet und
	   anschliessend so vergrössert, dass er auf die Höhe des PayPal-Knopfes kommt
	   und dabei wieder dessen Breite einnimmt. */
	.wp-block-woocommerce-checkout li#express-payment-method-amazon_payments_advanced_express {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 63px;
	}

	.wp-block-woocommerce-checkout #pay_with_amazon_express {
		width: 200px !important;
		transform: scale( 1.41 );
		transform-origin: center center;
	}
}

/* Beide Knöpfe stehen nebeneinander gleich breit — die Höhe des Amazon-Knopfes
   gibt Amazons eigenes Skript fest vor (auch bei 400 px Breite bleibt er 34 px hoch),
   deshalb ist stattdessen der PayPal-Knopf auf dieselbe Höhe gestellt
   (Einstellung button_checkout-block-express_height = 35). */

/* ------------------------------------------------------------------ *
 * 10. Versandauswahl: „KOSTENLOS" wieder sichtbar machen.
 *
 *    WooCommerce blendet den Preishinweis in der Auswahlliste selbst aus
 *    (.wc-block-checkout__shipping-option--free { display: none !important }).
 *    In der Bestellübersicht rechts steht „KOSTENLOS" — in der Auswahl stand
 *    nur „Versand", also ausgerechnet ohne die wichtigste Aussage.
 *    Farbe wie in der Übersicht.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-checkout__shipping-option--free,
.wp-block-woocommerce-cart .wc-block-checkout__shipping-option .wc-block-checkout__shipping-option--free {
	display: inline !important;
	color: #00cf00;
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 11. Danke-Seite: die Zeile unter „Vielen Dank!" in Weiss
 * ------------------------------------------------------------------ */
.elementor-element-fb33984 p,
body.woocommerce-order-received .elementor-element-fb33984 p {
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 12. Absende-Knopf der Kasse („Weiter zu PayPal/Amazon …") im
 *     GCOM360-Buttonstil. Referenz: SENDEN-Knopf des Footer-Newsletters
 *     (Vorlage 26544). Farbe, Grund, Radius und Schatten stimmen dort
 *     bereits überein — angeglichen werden nur Schrift und Innenabstand.
 *     Bewusst NICHT auf .wc-block-components-button pauschal, daran
 *     hängen Gutschein-Knopf und andere Kleinelemente.
 *     Das !important ist nötig, weil der SiteOrigin-CSS-Editor
 *     (uploads/so-css/so-css-hello-elementor.css) auf ALLE
 *     .wc-block-components-button pauschal „padding: 5px, font-size: 14px,
 *     text-align: right" jeweils mit !important legt.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	font-family: "Manrope", sans-serif;
	font-size: 18px !important;
	font-weight: 800;
	line-height: 1em;
	text-align: center !important;
	border-style: none;
	border-width: 0;
	padding: 20px 30px !important;
}

/* ------------------------------------------------------------------
 * 9.  Adresszusatz-Aufklapper „+ Wohnung, Suite usw. hinzufügen"
 *     (zwischen Straße und Postleitzahl, DE wie EN) in Markenorange
 *     statt vererbtem Grau (Daniel, 28.08.2026). WooCommerce setzt
 *     color:inherit auf .wc-block-components-address-form__address_2-toggle;
 *     der Checkout-Scope gewinnt per Spezifität ohne !important.
 *     Hover behält den Unterstrich aus dem Blocks-CSS.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
	color: #ff7500;
}