/**
 * STM Smart Checkout Pro — checkout styles.
 *
 * Loaded AFTER the Lite stylesheet, so equal-specificity rules here win
 * without a single !important. Everything in this file belongs to a Pro
 * feature: the mobile sticky order bar and the ultra-compact layout.
 * Tokens come from Lite — this file never redefines the palette, only
 * the type scale steps the dense layout needs.
 */

/* ---------- 13f. Mobile sticky order bar ---------- */

body.stmc-checkout .stmc-sticky-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--stmc-card);
	border-top: 1px solid var(--stmc-line);
	box-shadow: 0 -8px 24px -12px rgba(10, 18, 45, 0.35);
}

body.stmc-checkout .stmc-sticky-bar[hidden] {
	display: none;
}

/* Desktop never shows the bar (the order column is sticky there). */
@media (min-width: 993px) {
	body.stmc-checkout .stmc-sticky-bar {
		display: none;
	}
}

body.stmc-checkout .stmc-sticky-bar__total {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

body.stmc-checkout .stmc-sticky-bar__label {
	font-size: var(--stmc-fs-xs);
	color: var(--stmc-muted);
}

body.stmc-checkout .stmc-sticky-bar__amount {
	font-size: var(--stmc-fs-l);
	font-weight: 700;
	color: var(--stmc-ink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

body.stmc-checkout .stmc-sticky-bar__btn {
	flex: 0 1 auto;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--stmc-radius-s);
	background: var(--stmc-accent);
	color: #fff;
	font-size: var(--stmc-fs-m);
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

body.stmc-checkout .stmc-sticky-bar__btn:active {
	background: var(--stmc-accent-hover);
}

/* Room so the bar never covers the page end while visible. */
html.stmc-has-sticky-bar body.stmc-checkout {
	padding-bottom: 84px;
}

/* ---------- 16. Ultra-compact layout (Magento edition parity) ----------
   The three-column choreography plus a density modifier: the body carries
   BOTH stmc-layout-three-column and stmc-layout-ultra-compact, so every
   three-column rule above keeps working and this block only tightens the
   scale. Modeled on the Magento edition's ultra-compact layout: one type
   step down across the board, tighter card padding, compact fields and
   method rows, a slimmer buy button — the whole checkout at a glance.
   Token redefinition does most of the work; components read only tokens. */

body.stmc-checkout.stmc-layout-ultra-compact {
	--stmc-fs-xs: calc(var(--stmc-font-base) * 0.7333);  /* 11px */
	--stmc-fs-s: calc(var(--stmc-font-base) * 0.8);      /* 12px */
	--stmc-fs-base: calc(var(--stmc-font-base) * 0.8667); /* 13px */
	--stmc-fs-m: calc(var(--stmc-font-base) * 0.9333);   /* 14px */
	--stmc-fs-l: var(--stmc-font-base);                  /* 15px */
	--stmc-fs-xl: calc(var(--stmc-font-base) * 1.0667);  /* 16px */
	--stmc-radius: 10px;
}

/* Cards: 14/16 instead of 22/24 (Magento: 14px section padding). */
body.stmc-checkout.stmc-layout-ultra-compact .woocommerce-billing-fields,
body.stmc-checkout.stmc-layout-ultra-compact .woocommerce-shipping-fields,
body.stmc-checkout.stmc-layout-ultra-compact .woocommerce-additional-fields,
body.stmc-checkout.stmc-layout-ultra-compact form.checkout #order_review,
body.stmc-checkout.stmc-layout-ultra-compact form.checkout .wc-order-review,
body.stmc-checkout.stmc-layout-ultra-compact form.woocommerce-form-login {
	margin-bottom: 14px;
	padding: 14px 16px;
}

/* Order notes inside the payment column stay a chrome-free sub-block. */
body.stmc-checkout.stmc-layout-ultra-compact .stmc-payment-col .woocommerce-additional-fields {
	margin: 12px 0 0;
	padding: 10px 0 0;
}

/* Header band and progress tighten up; the band logo steps down a notch. */
body.stmc-checkout.stmc-layout-ultra-compact .stmc-band {
	padding: 8px 16px;
}

body.stmc-checkout.stmc-layout-ultra-compact .stmc-band img {
	max-height: 36px;
}

body.stmc-checkout.stmc-layout-ultra-compact .stmc-steps {
	margin: 14px auto 12px;
}

/* Section heads: smaller, closer to their content. */
body.stmc-checkout.stmc-layout-ultra-compact .stmc-section-title {
	margin: 0 0 12px;
	padding: 0 0 9px;
	gap: 8px;
}

body.stmc-checkout.stmc-layout-ultra-compact .stmc-section-title::before,
body.stmc-checkout.stmc-layout-ultra-compact form.checkout .wc-order-review .stmc-section-title::before,
body.stmc-checkout.stmc-layout-ultra-compact form.checkout #order_review .stmc-section-title::before {
	width: 22px;
	height: 22px;
	font-size: 11px;
}

body.stmc-checkout.stmc-layout-ultra-compact .stmc-col-title {
	margin: 0 0 12px;
	padding: 0 0 9px;
}

/* Fields: 38px controls, tight rows (Magento: 8/10 padding, 13px text). */
body.stmc-checkout.stmc-layout-ultra-compact .woocommerce form .form-row {
	margin-bottom: 8px;
}

body.stmc-checkout.stmc-layout-ultra-compact .woocommerce form .form-row input.input-text,
body.stmc-checkout.stmc-layout-ultra-compact .woocommerce form .form-row select,
body.stmc-checkout.stmc-layout-ultra-compact .select2-container .select2-selection--single {
	height: 38px;
	padding: 0 10px;
}

body.stmc-checkout.stmc-layout-ultra-compact .woocommerce form .form-row .select2-container .select2-selection__rendered,
body.stmc-checkout.stmc-layout-ultra-compact .select2-container .select2-selection__rendered {
	line-height: 36px;
}

body.stmc-checkout.stmc-layout-ultra-compact .woocommerce form .form-row label {
	margin-bottom: 3px;
}

/* Method rows: compact cards, single tight rhythm. */
body.stmc-checkout.stmc-layout-ultra-compact #payment ul.payment_methods li {
	margin: 0 0 6px;
	padding: 8px 10px;
}

body.stmc-checkout.stmc-layout-ultra-compact #payment ul.payment_methods li img {
	max-height: 16px;
}

/* Consent cards and the reassurance note shrink with the scale. */
body.stmc-checkout.stmc-layout-ultra-compact .wc-gzd-checkbox-placeholder:has(input, .wc-gzd-legal-checkbox-text),
body.stmc-checkout.stmc-layout-ultra-compact .woocommerce-terms-and-conditions-wrapper .form-row:has(input) {
	margin: 0 0 8px;
	padding: 10px 12px;
}

body.stmc-checkout.stmc-layout-ultra-compact .stmc-guarantee {
	margin: 0 0 8px;
	padding: 9px 11px;
}

/* Totals rows: 6/10 instead of 10/14. */
body.stmc-checkout.stmc-layout-ultra-compact #order_review table.shop_table tr {
	padding: 6px 10px;
}

body.stmc-checkout.stmc-layout-ultra-compact #order_review table.shop_table td.product-name img {
	width: 36px;
	height: 36px;
}

/* Buy button: slimmer but still a WCAG-sized target. */
body.stmc-checkout.stmc-layout-ultra-compact #place_order {
	min-height: 46px;
}

body.stmc-checkout.stmc-layout-ultra-compact .stmc-trust-row {
	margin-top: 10px;
	padding-top: 10px;
}

/* Express area joins the compact rhythm. */
body.stmc-checkout.stmc-layout-ultra-compact .wc-ppcp-express-checkout legend,
body.stmc-checkout.stmc-layout-ultra-compact .wc-ppcp-express-checkout .express-title {
	margin: 0 0 8px;
}

/* The wide three-column stage: tighter split line, tighter column air. */
@media (min-width: 1160px) {
	body.stmc-checkout.stmc-layout-ultra-compact form.checkout {
		gap: 0 16px;
	}

	body.stmc-checkout.stmc-layout-ultra-compact .stmc-payment-col {
		padding: 0 24px 0 0;
	}

	body.stmc-checkout.stmc-layout-ultra-compact .stmc-order-part--top,
	body.stmc-checkout.stmc-layout-ultra-compact .stmc-order-part--bottom {
		padding: 0 0 0 24px;
	}
}

/* On touch screens density gives way to reachability: full-height fields. */
@media (max-width: 767px) {
	body.stmc-checkout.stmc-layout-ultra-compact .woocommerce form .form-row input.input-text,
	body.stmc-checkout.stmc-layout-ultra-compact .woocommerce form .form-row select,
	body.stmc-checkout.stmc-layout-ultra-compact .select2-container .select2-selection--single {
		height: 44px;
	}

	body.stmc-checkout.stmc-layout-ultra-compact #place_order {
		min-height: 52px;
	}
}

/* ----------------------------------------------------------------
   METHODEN-CUSTOMIZER
   Der Zusatztext steht UNTER dem Namen, nicht daneben: die Zeile des
   Anbieters folgt darauf und braucht ihren eigenen Absatz. Beide Regeln
   lesen nur Tokens, damit die Farbwahl aus dem Backend auch hier gilt.
   ---------------------------------------------------------------- */
body.stmc-checkout .stmcp-method-subtext {
	display: block;
	margin: 2px 0 0;
	color: var(--stmc-muted);
	font-size: calc(var(--stmc-font-base) * 0.85);
	line-height: 1.45;
}

body.stmc-checkout .stmcp-method-icon {
	height: 23px;
	width: auto;
	margin-left: 6px;
	vertical-align: middle;
	/* Kein border-radius: die Symbole bringen ihre eigenen Ecken mit. */
}

/* ----------------------------------------------------------------
   EXPRESS-ZONE
   Ein Band ganz oben, in das die Anbieter ihre EIGENEN Knöpfe
   rendern. Hier wird nichts verschoben: was per Placement-Filter
   gelenkt wurde, entsteht bereits im Slot; alles andere bleibt, wo
   der Anbieter es gedruckt hat, und Lites Regeln (order -3/-2/-1)
   reihen es direkt darunter ein. Ein Umhängen im DOM würde das
   Cross-Origin-iframe des Anbieters neu laden und die ausgehandelte
   Wallet-Sitzung wegwerfen.

   Die Zone steht auf order -4 und damit über diesen drei.
   ---------------------------------------------------------------- */
/* KEIN Kind-Kombinator. Der Hook, an dem die Zone haengt, liegt im Formular —
   aber nicht jedes Theme laesst ihn dort als direktes Kind stehen: Basel
   wickelt seine Ausgabe in ein <div class="col-sm-6">, und `form.checkout >
   .stmcp-express` traf auf hairdoshop deshalb nichts (auf woo-shop mit
   Twenty Twenty-Five traf es, dort ist die Zone ein direktes Kind — der
   Unterschied faellt nur auf, wenn man beide misst).

   Lite setzt solche Theme-Huellen auf `display: contents`, die Zone ist also
   trotzdem ein Rasterelement des Formulars und `grid-column`/`order` wirken.
   Wo ein Theme das nicht zulaesst, sind beide Eigenschaften wirkungslos und
   die Zone steht schlicht dort, wo der Hook sie hingesetzt hat — oben. */
body.stmc-checkout form.checkout .stmcp-express {
	grid-column: 1 / -1;
	justify-self: center;
	order: -4;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

/* Der Abstand nach unten erst, wenn das Band etwas zeigt — sonst schiebt eine
   leere Zone die Kasse grundlos nach unten. */
body.stmc-checkout form.checkout .stmcp-express--filled {
	margin-bottom: 10px;
}

/* KEIN gap. Ein gap zaehlt auch zwischen leeren Kindern, und PPCP legt zwei
   leere Platzhalter (#ppc-button-ppcp-applepay, -googlepay) in den Slot, ob
   die Wallets verfuegbar sind oder nicht — auf dem Pruefstand gemessen, mit
   nicht einmal eingerichtetem PayPal. Mit gap haette der leere Slot Hoehe
   gehabt und die Ueberschrift ueber einem leeren Band freigeschaltet.
   Stattdessen traegt jedes Kind seinen eigenen Abstand, und pro-express.js
   nimmt ihn den leeren wieder weg. */
body.stmc-checkout .stmcp-express__slot {
	display: flex;
	flex-direction: column;
}

body.stmc-checkout .stmcp-express__slot > * {
	margin-top: 10px;
}

body.stmc-checkout .stmcp-express__slot > *:first-child,
body.stmc-checkout .stmcp-express__slot > .stmcp-express__item--empty {
	margin-top: 0;
}

/* Die Überschrift ist erst da, wenn wirklich ein Knopf da ist. Sie
   startet ausgeblendet, und pro-express.js schaltet sie frei, nachdem
   es HÖHE im Slot gemessen hat — nicht Anwesenheit. Anbieter drucken
   ihren Behälter auch dann, wenn sie nichts hineinlegen. */
body.stmc-checkout .stmcp-express__head {
	display: none;
	margin: 0 0 14px;
	text-align: center;
	font-size: var(--stmc-fs-xl);
	font-weight: 700;
	color: var(--stmc-title);
}

body.stmc-checkout .stmcp-express--filled .stmcp-express__head {
	display: block;
}

/* Der „ODER"-Trenner unter dem ganzen Band.

   Lite zeichnet ihn bereits — aber nur, wenn es selbst einen der drei
   bekannten Behälter als direktes Formularkind gemessen hat. Ein
   gelenkter Knopf sitzt in UNSEREM Slot und ist für Lites Messung
   unsichtbar. Diese Regel sagt dasselbe für den Fall, den Lite nicht
   sehen kann.

   Beide malen dasselbe ::before mit denselben Deklarationen: sind
   ausnahmsweise beide Klassen gesetzt, gibt es nichts zu kollidieren.
   Deshalb steht hier auch kein :not() — es wäre eine Bedingung ohne
   Wirkung. Der Wortlaut kommt aus demselben Token wie bei Lite, damit
   die Übersetzung an einer Stelle gepflegt bleibt. */
body.stmc-checkout form.checkout.stmcp-has-express::before {
	content: var(--stmc-divider-label, "");
	grid-column: 1 / -1;
	order: 0;
	display: block;
	margin: 10px 0 18px;
	color: var(--stmc-muted);
	font-size: var(--stmc-fs-s);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-align: center;
	background:
		linear-gradient(var(--stmc-line), var(--stmc-line)) left center / calc(50% - 40px) 1px no-repeat,
		linear-gradient(var(--stmc-line), var(--stmc-line)) right center / calc(50% - 40px) 1px no-repeat;
}