/**
 * PayPal Express (klaas) — Bestaetigungsseite
 *
 * Wird nur auf der Express-Bestaetigungsseite geladen, deshalb darf hier auch
 * die Bestelluebersicht des Shops mitgestaltet werden: sie steht in
 * .j2storeOrderSummary und kommt aus einer Core-Datei, die nicht angefasst wird.
 *
 * Keine festen Farben. Alles laeuft ueber die Bootstrap-Variablen des Templates,
 * damit die Seite den Anstrich des Shops uebernimmt. Die Werte hinter dem Komma
 * sind nur Rueckfall, falls das Template keine Variablen setzt.
 */

.j2storeOrderSummary,
.klaasppexpress-review,
.klaasppexpress-message,
.klaasppexpress-cart {
	--kpp-border: var(--bs-border-color, #e4e4e7);
	--kpp-muted: var(--bs-secondary-color, #71717a);
	--kpp-surface: var(--bs-tertiary-bg, #f6f6f7);
	--kpp-accent: var(--bs-primary, #27272a);
	--kpp-radius: 0.5rem;
}

/* Die Bestaetigungsseite laeuft ueber die volle Breite des Templates. Eine
   Lesebreite haelt Tabelle und Karten zusammen. */
.j2storeOrderSummary,
.klaasppexpress-review,
.klaasppexpress-message {
	max-width: 52rem;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Express-Button im Warenkorb und in der Bestelluebersicht der Kasse

   Die Farben kommen vom Template: der Wrapper traegt zusaetzlich die Klasse
   cart-checkout-button, mit der das Template den Kasse-Button gestaltet. Hier
   steht nur die Geometrie und das Symbol.
   ------------------------------------------------------------------------ */

.klaasppexpress-cart {
	margin-top: 0.5rem;
}

/* Das Klarna-Plugin blendet mit seinem Parameter "checkout_button" den
   Kasse-Button aus, und zwar ueber .cart-checkout-button
   (payment_klarna.php:137). Unser Wrapper traegt diese Klasse fuer die Optik und
   darf davon nicht getroffen werden. Zwei Klassen schlagen die eine von Klarna,
   ein !important ist nicht noetig. */
.klaasppexpress-cart.cart-checkout-button {
	visibility: visible;
}

/* Produktseite: Hinweis und Button unter „Zum Warenkorb hinzufügen“.
   Die Breite setzt das Skript auf die des Warenkorb-Buttons. Die Farben
   kommen von cart-checkout-button im Template. */
.klaasppexpress-product {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: max-content;
	max-width: 100%;
	margin-top: 0.85rem;
}

.klaasppexpress-product-more {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	color: #6b6b6b;
}

.klaasppexpress-product .klaasppexpress-button {
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 480px) {
	.klaasppexpress-product.cart-checkout-button .klaasppexpress-button {
		font-size: 12px;
		padding: 7px 20px;
	}
}

.klaasppexpress-button {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.klaasppexpress-icon {
	width: 1.05em;
	height: 1.28em;
	flex: none;
}

/* Beim Aussehen "shop" folgt die Bildmarke der Schriftfarbe des Buttons, damit
   sie auf dunklem Grund nicht verschwindet. */
.klaasppexpress-look-shop .klaasppexpress-icon path {
	fill: currentColor;
}

/* Aussehen "paypal": die Hausfarbe von PayPal, Bildmarke zweifarbig. */
.klaasppexpress-look-paypal .klaasppexpress-button {
	background: #ffc439 !important;
	border-color: #ffc439 !important;
	color: #111827 !important;
}

.klaasppexpress-look-paypal .klaasppexpress-button:hover,
.klaasppexpress-look-paypal .klaasppexpress-button:focus {
	background: #f0b32c !important;
	border-color: #f0b32c !important;
}

.klaasppexpress-error:not(:empty) {
	margin-top: 0.75rem;
}

.klaasppexpress-note {
	margin-top: 0.5rem;
}

/* Im Warenkorb stehen Kasse- und Express-Button uebereinander. Damit sie gleich
   breit sind, wird die Zeile des Kasse-Buttons zum Block. Wirkt nur dort, wo
   dieses Stylesheet geladen wird, also auf Warenkorb und Kasse. */
.buttons-right .cart-checkout-button {
	display: block;
}

.buttons-right .cart-checkout-button > .btn,
.buttons-right .cart-checkout-button > a.btn {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Bestelluebersicht oberhalb (Core-Layout default_cartsummary)
   ------------------------------------------------------------------------ */

.j2storeOrderSummary h3 {
	margin: 0 0 1rem;
	font-size: 1.375rem;
}

.j2storeOrderSummary .j2store-cart-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--kpp-border);
	border-radius: var(--kpp-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

/* Das Core-Layout setzt table-bordered. Das Gitter aus Vollrahmen wird auf
   ruhige Trennlinien reduziert. */
.j2storeOrderSummary .j2store-cart-table > :not(caption) > * > * {
	padding: 0.875rem 1rem;
	border-width: 0 0 1px 0;
	border-color: var(--kpp-border);
	background: none;
	vertical-align: top;
}

.j2storeOrderSummary .j2store-cart-table thead th {
	background: var(--kpp-surface);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kpp-muted);
	white-space: nowrap;
}

.j2storeOrderSummary .j2store-cart-table thead th:not(:first-child),
.j2storeOrderSummary .j2store-cart-table tbody td:not(:first-child),
.j2storeOrderSummary .j2store-cart-table tfoot td {
	text-align: right;
	white-space: nowrap;
}

.j2storeOrderSummary .cart-thumb-image {
	display: block;
	float: left;
	margin-right: 1rem;
}

.j2storeOrderSummary .cart-thumb-image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 0.375rem;
}

.j2storeOrderSummary .cart-product-name {
	font-weight: 600;
}

.j2storeOrderSummary .cart-item-options small,
.j2storeOrderSummary .cart-product-unit-price,
.j2storeOrderSummary .cart-product-sku {
	font-size: 0.8125rem;
	color: var(--kpp-muted);
}

.j2storeOrderSummary .j2store-cart-table tfoot th {
	text-align: right;
	font-weight: 500;
	white-space: nowrap;
}

.j2storeOrderSummary .j2store-cart-table tfoot tr:last-child > * {
	border-bottom-width: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Eigene Bloecke: Adresse, Versandart, Zahlungsart, Abschluss
   ------------------------------------------------------------------------ */

.klaasppexpress-review {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.kpp-card {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--kpp-border);
	border-radius: var(--kpp-radius);
}

.kpp-card-title {
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kpp-muted);
}

.kpp-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem 2rem;
}

.kpp-col-title {
	margin: 0 0 0.375rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.klaasppexpress-review address {
	margin: 0;
	line-height: 1.6;
}

.klaasppexpress-address-note {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--kpp-muted);
}

.klaasppexpress-payer,
.kpp-payment-line {
	display: block;
}

.kpp-payment-line {
	font-weight: 600;
}

.klaasppexpress-payer {
	font-size: 0.8125rem;
	color: var(--kpp-muted);
}

/* Versandarten */

.klaasppexpress-rate {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--kpp-border);
	border-radius: 0.375rem;
	transition: border-color 0.15s ease-in-out;
}

.klaasppexpress-rate + .klaasppexpress-rate {
	margin-top: 0.5rem;
}

.klaasppexpress-rate:hover {
	border-color: var(--kpp-accent);
}

.klaasppexpress-rate:has(input:checked) {
	border-color: var(--kpp-accent);
	box-shadow: inset 0 0 0 1px var(--kpp-accent);
}

.klaasppexpress-rate input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	flex: none;
	accent-color: var(--kpp-accent);
}

.klaasppexpress-rate label {
	display: flex;
	flex: 1;
	gap: 1rem;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	cursor: pointer;
}

.klaasppexpress-rate-price {
	font-weight: 600;
	white-space: nowrap;
}

.klaasppexpress-shipping-apply {
	margin-top: 0.875rem;
}

.kpp-rate-single {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
}

/* Abschluss */

.kpp-card-confirm {
	background: var(--kpp-surface);
}

.klaasppexpress-terms {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	line-height: 1.5;
}

.klaasppexpress-terms input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.125rem 0 0;
	flex: none;
	accent-color: var(--kpp-accent);
}

.klaasppexpress-terms label {
	margin: 0;
	cursor: pointer;
}

.klaasppexpress-total {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	align-items: baseline;
	margin: 1rem 0 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--kpp-border);
	font-size: 1.125rem;
}

.klaasppexpress-total-value {
	font-weight: 700;
	white-space: nowrap;
}

.klaasppexpress-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
}

#klaasppexpress-confirm-button {
	padding-inline: 1.5rem;
	font-weight: 600;
}

.klaasppexpress-cancel {
	color: var(--kpp-muted);
}

.klaasppexpress-hint {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--kpp-muted);
}

/* Meldungen und Abbruch */

.klaasppexpress-message {
	margin-top: 1.5rem;
}

.klaasppexpress-message-action {
	margin-top: 0.75rem;
}

@media (max-width: 575.98px) {
	.kpp-card {
		padding: 1rem;
	}

	.j2storeOrderSummary .j2store-cart-table > :not(caption) > * > * {
		padding: 0.75rem 0.625rem;
	}

	.j2storeOrderSummary .cart-thumb-image img {
		width: 48px;
		height: 48px;
	}

	#klaasppexpress-confirm-button {
		width: 100%;
	}

	.klaasppexpress-actions {
		justify-content: center;
	}
}