/**
 * KAUFLOND — Cart & Checkout (Phase 7) — PRESENTATION ONLY
 *
 * Both pages use the native WooCommerce Cart / Checkout *blocks* (React), with
 * WoodMart's block styling on top. This file only aligns colours, type,
 * spacing, borders and button shapes with the KAUFLOND tokens. It never hides
 * a control, never reorders fields (no `order`, no absolute positioning) and
 * touches no behaviour. Everything is scoped to the WooCommerce body classes.
 *
 * Block class names are WooCommerce's public `wc-block-components-*` hooks.
 *
 * @package Kauflond
 */

/* =========================================================================
 * 1. STEPS BAR (WoodMart) — Warenkorb → Zur Kasse → Bestellung abgeschlossen
 * ====================================================================== */

body.woocommerce-cart.woocommerce-page .wd-checkout-steps,
body.woocommerce-checkout.woocommerce-page .wd-checkout-steps {
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-bold);
	letter-spacing: .02em;
}

body.woocommerce-cart.woocommerce-page .wd-checkout-steps li.step-active,
body.woocommerce-checkout.woocommerce-page .wd-checkout-steps li.step-active,
body.woocommerce-cart.woocommerce-page .wd-checkout-steps li.step-active a,
body.woocommerce-checkout.woocommerce-page .wd-checkout-steps li.step-active a {
	color: var(--kfl-color-brand-primary);
}

body.woocommerce-cart.woocommerce-page .wd-checkout-steps li.step-inactive,
body.woocommerce-checkout.woocommerce-page .wd-checkout-steps li.step-inactive {
	color: var(--kfl-color-text-muted);
}

/* =========================================================================
 * 2. SHARED — inputs, selects, labels, buttons, notices
 * ====================================================================== */

/* Text inputs and selects: one height, token border, focus in brand red.
 * WooCommerce blocks render selects 50 px and inputs 40 px by default. */
body.woocommerce-cart.woocommerce-page .wc-block-components-text-input input,
body.woocommerce-checkout.woocommerce-page .wc-block-components-text-input input,
body.woocommerce-checkout.woocommerce-page .wc-block-components-select .components-custom-select-control__button,
body.woocommerce-checkout.woocommerce-page .wc-block-components-country-input select,
body.woocommerce-checkout.woocommerce-page .wc-block-components-state-input select,
body.woocommerce-checkout.woocommerce-page .wc-block-components-combobox .components-combobox-control__input,
body.woocommerce-checkout.woocommerce-page .wc-block-components-select .wc-block-components-select__select,
body.woocommerce-checkout.woocommerce-page .wc-block-components-textarea,
body.woocommerce-checkout.woocommerce-page .wc-block-components-address-form > input[type="text"] {
	min-height: 44px;
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-surface);
	color: var(--kfl-color-text-primary);
	font-size: var(--kfl-font-size-md);
	box-shadow: none;
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-select .wc-block-components-select__select,
body.woocommerce-checkout.woocommerce-page .wc-block-components-country-input select,
body.woocommerce-checkout.woocommerce-page .wc-block-components-state-input select {
	height: 44px;
}

body.woocommerce-cart.woocommerce-page.woocommerce-js div.wc-block-cart .wc-block-components-text-input input:focus,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-address-form > input:focus,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-select .wc-block-components-select__select:focus,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-country-input select:focus,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-state-input select:focus,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-textarea:focus {
	/* WoodMart sets box-shadow:none !important on block inputs, so the visible
	 * focus indicator is an outline (same brand ring, no !important needed). */
	border-color: var(--kfl-color-border-focus);
	outline: 2px solid var(--kfl-color-brand-primary);
	outline-offset: 1px;
}

/* Floating labels */
body.woocommerce-cart.woocommerce-page .wc-block-components-text-input label,
body.woocommerce-checkout.woocommerce-page .wc-block-components-text-input label,
body.woocommerce-checkout.woocommerce-page .wc-block-components-select label,
body.woocommerce-checkout.woocommerce-page .wc-block-components-country-input label,
body.woocommerce-checkout.woocommerce-page .wc-block-components-state-input label {
	color: var(--kfl-color-text-muted);
	font-size: var(--kfl-font-size-md);
}

/* Invalid state: token red, no double outline. */
body.woocommerce-checkout.woocommerce-page .wc-block-components-text-input.has-error input,
body.woocommerce-checkout.woocommerce-page .wc-block-components-select.has-error .wc-block-components-select__select,
body.woocommerce-checkout.woocommerce-page .wc-block-components-country-input.has-error select {
	border-color: var(--kfl-color-danger);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-validation-error,
body.woocommerce-checkout.woocommerce-page .wc-block-components-validation-error {
	color: var(--kfl-color-danger);
	font-size: var(--kfl-font-size-sm);
	line-height: var(--kfl-line-height-snug);
	margin-top: 4px;
}

body.woocommerce-cart.woocommerce-page .wc-block-components-validation-error svg,
body.woocommerce-checkout.woocommerce-page .wc-block-components-validation-error svg {
	fill: currentColor;
}

/* Primary actions: same shape as the PDP CTA (48 px, radius, sentence case).
 * WoodMart drives block buttons through its --btn-* custom properties and pins
 * min-height with !important, so the shape is set via those variables plus
 * padding; the extra .woocommerce-js class is only there to outrank
 * WoodMart's (0,4,2) block-button selector. */
body.woocommerce-cart.woocommerce-page.woocommerce-js div.wc-block-cart .wc-block-cart__submit-button,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-checkout-place-order-button {
	--btn-transform: none;
	--btn-accented-transform: none;
	--btn-font-size: var(--kfl-font-size-md);
	--btn-accented-font-size: var(--kfl-font-size-md);
	--btn-brd-radius: var(--kfl-radius-md);
	--btn-accented-brd-radius: var(--kfl-radius-md);
	--btn-height: 48px;
	padding-block: 14px;
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-on-primary);
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-bold);
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}

body.woocommerce-cart.woocommerce-page.woocommerce-js div.wc-block-cart .wc-block-cart__submit-button:hover,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-cart.woocommerce-page.woocommerce-js div.wc-block-cart .wc-block-cart__submit-button:focus-visible,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible {
	background: var(--kfl-color-brand-primary-hover);
	color: var(--kfl-color-brand-on-primary);
}

/* Keyboard focus on block buttons (WoodMart also pins their box-shadow). */
body.woocommerce-cart.woocommerce-page.woocommerce-js div.wc-block-cart .wc-block-components-button:focus-visible,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-button:focus-visible {
	outline: 2px solid var(--kfl-color-brand-primary);
	outline-offset: 2px;
}

/* Secondary actions (coupon apply, return to cart) */
body.woocommerce-cart.woocommerce-page.woocommerce-js div.wc-block-cart .wc-block-components-totals-coupon__button,
body.woocommerce-checkout.woocommerce-page.woocommerce-js div.wc-block-checkout .wc-block-components-totals-coupon__button {
	--btn-transform: none;
	--btn-accented-transform: none;
	--btn-brd-radius: var(--kfl-radius-md);
	--btn-accented-brd-radius: var(--kfl-radius-md);
	min-height: 44px;
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-text-primary);
	color: var(--kfl-color-brand-on-primary);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
}

/* Notices: WoodMart paints block notices white-on-amber (≈2:1). Restate them
 * on tokens so info / error / success are readable. */
body.woocommerce-cart.woocommerce-page .wc-block-components-notice-banner,
body.woocommerce-checkout.woocommerce-page .wc-block-components-notice-banner {
	border-radius: var(--kfl-radius-md);
	border-width: var(--kfl-border-width);
	border-left-width: 4px;
	background: var(--kfl-color-surface-subtle);
	border-color: var(--kfl-color-border);
	color: var(--kfl-color-text-primary);
	font-size: var(--kfl-font-size-sm);
	line-height: var(--kfl-line-height-base);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-notice-banner.is-info,
body.woocommerce-checkout.woocommerce-page .wc-block-components-notice-banner.is-info {
	border-left-color: var(--kfl-color-text-secondary);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-notice-banner.is-error,
body.woocommerce-checkout.woocommerce-page .wc-block-components-notice-banner.is-error {
	border-left-color: var(--kfl-color-danger);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-notice-banner.is-success,
body.woocommerce-checkout.woocommerce-page .wc-block-components-notice-banner.is-success {
	border-left-color: var(--kfl-color-success);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-notice-banner.is-warning,
body.woocommerce-checkout.woocommerce-page .wc-block-components-notice-banner.is-warning {
	border-left-color: var(--kfl-color-accent);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-notice-banner > svg,
body.woocommerce-checkout.woocommerce-page .wc-block-components-notice-banner > svg {
	fill: currentColor;
	background: transparent;
}

body.woocommerce-cart.woocommerce-page .wc-block-components-notice-banner a,
body.woocommerce-checkout.woocommerce-page .wc-block-components-notice-banner a {
	color: var(--kfl-color-brand-primary);
	text-decoration: underline;
}

/* Links inside the flows (terms, privacy, edit cart) */
body.woocommerce-checkout.woocommerce-page .wc-block-checkout__terms a,
body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-policies a,
body.woocommerce-cart.woocommerce-page .wc-block-components-product-name,
body.woocommerce-checkout.woocommerce-page .wc-block-components-order-summary-item .wc-block-components-product-name {
	color: var(--kfl-color-text-primary);
}

body.woocommerce-checkout.woocommerce-page .wc-block-checkout__terms a,
body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-policies a {
	color: var(--kfl-color-brand-primary);
	text-decoration: underline;
}

/* =========================================================================
 * 3. CART BLOCK
 * ====================================================================== */

body.woocommerce-cart.woocommerce-page .wc-block-cart-items__header {
	font-size: var(--kfl-font-size-xs);
	font-weight: var(--kfl-font-weight-bold);
	letter-spacing: .04em;
	color: var(--kfl-color-text-muted);
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
}

body.woocommerce-cart.woocommerce-page .wc-block-cart-items__row {
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
	padding-block: var(--kfl-space-4);
}

body.woocommerce-cart.woocommerce-page .wc-block-cart-item__image img {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-surface);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-product-name {
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-semibold);
	line-height: var(--kfl-line-height-snug);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-product-name:hover {
	color: var(--kfl-color-brand-primary);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-product-details,
body.woocommerce-cart.woocommerce-page .wc-block-components-product-metadata {
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-secondary);
}

body.woocommerce-cart.woocommerce-page .wc-block-cart-item__prices,
body.woocommerce-cart.woocommerce-page .wc-block-cart-item__total .wc-block-components-product-price {
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-text-primary);
}

body.woocommerce-cart.woocommerce-page .wc-block-cart-item__total .wc-block-components-product-price {
	font-size: var(--kfl-font-size-lg);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-product-price__regular {
	color: var(--kfl-color-text-muted);
	font-weight: var(--kfl-font-weight-normal);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-sale-badge,
body.woocommerce-checkout.woocommerce-page .wc-block-components-sale-badge {
	background: transparent;
	border: none;
	padding: 0;
	color: var(--kfl-color-success-text);
	font-size: var(--kfl-font-size-xs);
	font-weight: var(--kfl-font-weight-semibold);
	text-transform: none;
}

/* Quantity selector: token border, 40 px, buttons visible */
body.woocommerce-cart.woocommerce-page .wc-block-components-quantity-selector {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	min-height: 40px;
	box-shadow: none;
}

body.woocommerce-cart.woocommerce-page .wc-block-components-quantity-selector::after {
	border-color: var(--kfl-color-border);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	font-weight: var(--kfl-font-weight-semibold);
	color: var(--kfl-color-text-primary);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--kfl-color-text-secondary);
	min-width: 36px;
}

body.woocommerce-cart.woocommerce-page .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	color: var(--kfl-color-brand-primary);
}

body.woocommerce-cart.woocommerce-page .wc-block-cart-item__remove-link {
	color: var(--kfl-color-text-muted);
	font-size: var(--kfl-font-size-sm);
}

body.woocommerce-cart.woocommerce-page .wc-block-cart-item__remove-link:hover {
	color: var(--kfl-color-danger);
}

/* Totals card */
body.woocommerce-cart.woocommerce-page .wc-block-cart__sidebar .wc-block-components-sidebar,
body.woocommerce-cart.woocommerce-page .wp-block-woocommerce-cart-totals-block {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-lg);
	background: var(--kfl-color-surface-subtle);
	padding: var(--kfl-space-4) var(--kfl-space-5) var(--kfl-space-5);
}

body.woocommerce-cart.woocommerce-page .wc-block-cart__totals-title {
	margin: 0 0 var(--kfl-space-2);
	padding: 0;
	border: none;
	font-size: var(--kfl-font-size-lg);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
	letter-spacing: 0;
	color: var(--kfl-color-text-primary);
	text-align: start;
}

body.woocommerce-cart.woocommerce-page .wc-block-components-totals-item,
body.woocommerce-checkout.woocommerce-page .wc-block-components-totals-item {
	font-size: var(--kfl-font-size-base);
	color: var(--kfl-color-text-secondary);
	padding-inline: 0;
}

body.woocommerce-cart.woocommerce-page .wc-block-components-totals-footer-item,
body.woocommerce-checkout.woocommerce-page .wc-block-components-totals-footer-item {
	border-top: var(--kfl-border-width) solid var(--kfl-color-border);
	padding-block: var(--kfl-space-3);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-text-primary);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--kfl-font-size-xl);
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-brand-primary);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__description,
body.woocommerce-checkout.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	font-size: var(--kfl-font-size-xs);
	color: var(--kfl-color-text-muted);
}

body.woocommerce-cart.woocommerce-page .wc-block-components-totals-coupon .wc-block-components-panel__button,
body.woocommerce-checkout.woocommerce-page .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-semibold);
	color: var(--kfl-color-text-secondary);
}

body.woocommerce-cart.woocommerce-page .wc-block-cart__submit-container {
	padding-inline: 0;
}

/* Empty cart */
body.woocommerce-cart.woocommerce-page .wp-block-woocommerce-empty-cart-block h2,
body.woocommerce-cart.woocommerce-page .wc-block-cart__empty-cart__title {
	font-size: var(--kfl-font-size-xl);
	font-weight: var(--kfl-font-weight-bold);
}

/* =========================================================================
 * 4. CHECKOUT BLOCK
 * ====================================================================== */

body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-step {
	padding-block: var(--kfl-space-6);
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-step:last-of-type {
	border-bottom: none;
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-step__title,
body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-step .wc-block-components-title {
	margin-bottom: var(--kfl-space-2);
	font-size: var(--kfl-font-size-xl);
	font-weight: var(--kfl-font-weight-bold);
	line-height: var(--kfl-line-height-tight);
	color: var(--kfl-color-text-primary);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-step__description {
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-secondary);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-address-form__address_2-toggle,
body.woocommerce-checkout.woocommerce-page .wc-block-components-address-form__address_2-toggle:hover {
	color: var(--kfl-color-brand-primary);
	font-size: var(--kfl-font-size-sm);
}

/* Payment methods (when gateways exist) */
body.woocommerce-checkout.woocommerce-page .wc-block-components-radio-control__option {
	border-color: var(--kfl-color-border);
	font-size: var(--kfl-font-size-md);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 2px var(--kfl-color-brand-primary);
	border-radius: var(--kfl-radius-md);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-radio-control__input:checked {
	border-color: var(--kfl-color-brand-primary);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-radio-control__input:checked::before {
	background: var(--kfl-color-brand-primary);
}

/* Terms / policies + place order area */
body.woocommerce-checkout.woocommerce-page .wc-block-checkout__terms {
	font-size: var(--kfl-font-size-sm);
	line-height: var(--kfl-line-height-base);
	color: var(--kfl-color-text-secondary);
}

body.woocommerce-checkout.woocommerce-page .wc-block-checkout__actions {
	padding-top: var(--kfl-space-4);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-return-to-cart-button {
	color: var(--kfl-color-text-secondary);
	font-size: var(--kfl-font-size-sm);
}

/* Order summary card */
body.woocommerce-checkout.woocommerce-page .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-lg);
	background: var(--kfl-color-surface-subtle);
	padding: var(--kfl-space-2) var(--kfl-space-5) var(--kfl-space-3);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-order-summary__title {
	padding-block: var(--kfl-space-3);
	font-family: inherit;
	font-size: var(--kfl-font-size-lg);
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-text-primary);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-checkout-order-summary__title-text {
	font-weight: var(--kfl-font-weight-bold);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-order-summary-item {
	padding-block: var(--kfl-space-3);
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
	font-size: var(--kfl-font-size-sm);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-order-summary-item__image img {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-surface);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-order-summary-item__quantity {
	background: var(--kfl-color-text-primary);
	border: none;
	box-shadow: none;
	color: var(--kfl-color-brand-on-primary);
	font-weight: var(--kfl-font-weight-bold);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-order-summary-item .wc-block-components-product-name {
	font-weight: var(--kfl-font-weight-semibold);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-order-summary-item__total-price {
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-text-primary);
}

body.woocommerce-checkout.woocommerce-page .wc-block-components-product-metadata {
	color: var(--kfl-color-text-secondary);
}