/*
 * emo2026, WooCommerce Germanized integration styling.
 *
 * Germanized injects legal UI into three surfaces we care about:
 *   1. The contract-withdrawal request form ([eu_owb_order_withdrawal_
 *      request_form] on /vertrag-widerrufen/ + /en/withdraw-from-contract/)
 *   2. Product-page legal microcopy (tax notice, shipping-costs link,
 *      delivery time), .wc-gzd-additional-info et al.
 *   3. Checkout legal checkboxes (.wc-gzd-legal-checkbox).
 *
 * Everything maps onto the token vocabulary so the design variants
 * recolor it like the rest of the theme. Loaded by inc/germanized.php
 * only while the plugin is active.
 */

/* ------------------------------------------------------------
 * 1. Withdrawal request form, align with the forms-* primitives
 *    (rounded fields, uppercase labels, black pill submit).
 * ------------------------------------------------------------ */

.woocommerce-form-order-withdrawal-request {
	max-width: 560px;
	margin: var(--space-8) auto 0;
	padding: var(--space-7);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-card);
}

.woocommerce-form-order-withdrawal-request .form-row {
	display: block;
	margin: 0 0 var(--space-5);
	padding: 0;
}

.woocommerce-form-order-withdrawal-request label {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.woocommerce-form-order-withdrawal-request .woocommerce-input-wrapper {
	display: block;
}

.woocommerce-form-order-withdrawal-request .input-text {
	width: 100%;
	padding: 12px var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
	outline: none;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.woocommerce-form-order-withdrawal-request .input-text:focus-visible {
	border-color: var(--color-accent);
	/* 3px ring, the theme's focus convention (shop.css, account.css);
	   a 1px border shift alone is too weak on a legally required form. */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.woocommerce-form-order-withdrawal-request .input-checkbox {
	width: 18px;
	height: 18px;
	margin-right: var(--space-2);
	accent-color: var(--color-accent);
}

.woocommerce-form-order-withdrawal-request .notice {
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
	background: var(--color-bg-elevated);
	border-radius: var(--radius-md);
}

.woocommerce-form-order-withdrawal-request .form-row-submit {
	margin: var(--space-6) 0 0;
}

.woocommerce-form-order-withdrawal-request .woocommerce-button {
	display: inline-block;
	padding: 12px var(--space-7);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 600;
	color: var(--color-cta-ink);
	background: var(--color-cta);
	border: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.woocommerce-form-order-withdrawal-request .woocommerce-button:hover,
.woocommerce-form-order-withdrawal-request .woocommerce-button:focus-visible {
	background: var(--color-cta-hover);
}

/* Press on pointer-down (DESIGN-SPEC.md section 1); solid CTA darkens,
   the duration sits inside :active so only the press snaps. */
.woocommerce-form-order-withdrawal-request .woocommerce-button:active {
	background: color-mix(in srgb, var(--color-cta) 88%, #000);
	transform: scale(0.98);
	transition-duration: var(--motion-duration-press);
}

/* ------------------------------------------------------------
 * 2. Product-page legal microcopy, quiet single line under the
 *    price, hairline-separated. Germanized renders these as
 *    paragraphs inside .wc-gzd-additional-info (tax, shipping
 *    costs, delivery time, unit price).
 * ------------------------------------------------------------ */

.wc-gzd-additional-info,
p.wc-gzd-additional-info {
	margin: var(--space-1) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
}

.wc-gzd-additional-info a {
	color: var(--color-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wc-gzd-additional-info a:hover,
.wc-gzd-additional-info a:focus-visible {
	color: var(--color-link);
}

/* ------------------------------------------------------------
 * 3. Checkout legal checkboxes (AGB / Widerruf / Datenschutz).
 * ------------------------------------------------------------ */

/* Germanized 4.x renders the span as .woocommerce-gzd-legal-checkbox-text
   (long prefix); the short .wc-gzd-* variant is kept for older markup
   (pay-for-order endpoint, cached fragments). */
.wc-gzd-legal-checkbox-text,
.woocommerce-gzd-legal-checkbox-text,
.woocommerce-form__label-for-checkbox .wc-gzd-legal-checkbox-text,
.woocommerce-form__label-for-checkbox .woocommerce-gzd-legal-checkbox-text {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.wc-gzd-legal-checkbox-text a,
.woocommerce-gzd-legal-checkbox-text a {
	color: var(--color-link);
	text-decoration: none;
}

.wc-gzd-legal-checkbox-text a:hover,
.wc-gzd-legal-checkbox-text a:focus-visible,
.woocommerce-gzd-legal-checkbox-text a:hover,
.woocommerce-gzd-legal-checkbox-text a:focus-visible {
	text-decoration: underline;
}

/* The legal checkboxes render at the UA's ~13px default, cramped as a
 * touch target. Match the 18px consent box the theme's own forms use
 * (forms.css .forms-consent__box). */
.woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox,
.wc-gzd-legal-checkbox .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--color-link);
	cursor: pointer;
}

/* The required asterisk after the checkbox text. */
.checkbox-legal .required {
	color: var(--color-text-muted);
	text-decoration: none;
}

.checkbox-legal .woocommerce-form__input-checkbox,
.wc-gzd-legal-checkbox .woocommerce-form__input-checkbox {
	accent-color: var(--color-accent);
}

/* ------------------------------------------------------------
 * 4. EU withdrawal button. DORMANT: inc/germanized.php filters
 *    eu_owb_woocommerce_enable_embed to 'no', so Germanized never
 *    registers the footer hook and none of this renders today.
 *
 *    Kept because re-enabling is one deleted filter away, and
 *    because unstyled the button floats loose under the copyright
 *    line; this docks it as a quiet footer strip. For the record
 *    it was never on every page, only on the WooCommerce surfaces
 *    (Package::is_shop_request(): shop, cart, checkout, account),
 *    which is exactly where it was spotted.
 * ------------------------------------------------------------ */

.eu-owb-order-withdraw-from-contract-button {
	margin: 0;
	padding: 0 var(--layout-gutter) var(--space-8);
	background: var(--color-bg-elevated);
	text-align: center;
}

.eu-owb-order-withdraw-from-contract-button .button {
	display: inline-block;
	padding: 9px var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-control);
	transition:
		border-color var(--motion-duration-fast) var(--motion-ease-standard),
		color var(--motion-duration-fast) var(--motion-ease-standard),
		background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.eu-owb-order-withdraw-from-contract-button .button:hover,
.eu-owb-order-withdraw-from-contract-button .button:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.eu-owb-order-withdraw-from-contract-button .button:active {
	background: var(--grey-100);
	transform: scale(0.98);
	transition-duration: var(--motion-duration-press);
}

/* ------------------------------------------------------------
 * 5. Reduced motion. Transforms drop; the background press keeps
 *    pointer-down feedback (DESIGN-SPEC.md section 7).
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.woocommerce-form-order-withdrawal-request .input-text,
	.woocommerce-form-order-withdrawal-request .woocommerce-button,
	.eu-owb-order-withdraw-from-contract-button .button {
		transition: none;
	}

	.woocommerce-form-order-withdrawal-request .woocommerce-button:active,
	.eu-owb-order-withdraw-from-contract-button .button:active {
		transform: none;
	}
}