/*
 * RhinoBag — WooCommerce brand styling: Cart, Checkout, My Account,
 * Order-received. Bridges WooCommerce's classes (block BEM `.wc-block-*` and
 * classic `.woocommerce-*`) to the --rb-* design tokens. Loaded only on those
 * pages (see functions.php), so global-looking selectors are safe.
 *
 * Specificity note: WooCommerce's own stylesheet uses classes like
 * `.wc-block-components-button.contained` (0,2,0). Match or beat that here.
 * Germanized injects extra fields (.wc-gzd-*) inside the same checkout block;
 * they inherit the generic field/checkbox rules below — do not target their
 * behaviour, only their look.
 *
 * Sections: Cart & Checkout blocks · My Account (classic shortcode) ·
 * Order-received (order-confirmation block).
 */

/* ---- Force the WooCommerce transactional pages to light -------------------
 * WooCommerce's block checkout/cart is engineered around a fixed LIGHT surface:
 * the checkout container hardcodes a white background (so its buttons + the
 * PayPal/Google-Pay payment UIs render correctly), and WC's own "dark mode
 * inputs" toggle is a static editor switch that does NOT follow the OS. Our
 * theme, however, auto-inverts the neutral --rb-* tokens under
 * prefers-color-scheme:dark. On a dark OS that put our light TEXT/placeholder
 * tokens on WC's hardcoded WHITE panels/inputs → unreadable (order-summary
 * cart-items block, every .wc-block-components-text-input, etc.).
 *
 * Rather than chase WC's many hardcoded whites (brittle across WC updates, and
 * unfinished upstream — see woocommerce/woocommerce#52183, #53113), we opt these
 * four pages OUT of dark mode: re-pin the neutral tokens to their light values
 * (mirrors :root in tokens.css — keep in sync) and set color-scheme:light so
 * native controls/placeholders render light too. This file loads ONLY on cart /
 * checkout / account / order-received (see functions.php), so the rest of the
 * site keeps honouring the OS colour scheme. No-op in light mode.
 *
 * IMPORTANT — scope is :root, not body. The Tailwind v4 @theme bridge (see
 * assets/tailwind.css) declares --color-*: var(--rb-*) at :root, so utilities
 * like bg-card / bg-surface / bg-bg (used by the header, footer and cross-sell
 * cards) resolve --rb-* against :ROOT. Re-pinning on body only reached raw
 * var(--rb-*) consumers; the Tailwind-utility surfaces stayed dark. Setting the
 * light values on :root fixes both. Safe because this file is WC-pages-only and
 * loads after tokens.css, so it wins the cascade there. */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: light;

		--rb-bg:        #FFFFFF;
		--rb-surface:   #F5F6FA;
		--rb-surface-2: #ECEEF5;
		--rb-card:      #FFFFFF;
		--rb-ink:       #14181C;
		--rb-text:      #3A4250;
		--rb-muted:     #5C6470;
		--rb-line:      #E1E4EE;

		--rb-navy-band: #131A45;
		--rb-navy-deep: #0E1334;
		--rb-red-soft:  rgba(186, 59, 70, 0.10);

		--rb-shadow:    0 1px 2px rgba(19, 26, 69, .06), 0 10px 30px -12px rgba(19, 26, 69, .18);
		--rb-shadow-lg: 0 24px 60px -24px rgba(19, 26, 69, .35);
	}

	/* The header logos swap via Tailwind's dark: variant (OS-driven), which still
	   fires here even though we've forced the page light — it would show the
	   white logo on our now-light header. Reverse it so the dark (light-surface)
	   logo shows. Covers both the main header and the checkout header. */
	img.dark\:hidden { display: block; }
	img.dark\:block  { display: none; }
}

/* ---- Primary action buttons (Weiter zur Kasse / Jetzt kaufen) ------------ */
.wc-block-components-button.contained,
.wc-block-components-button.wp-element-button.contained {
	background-color: var(--rb-red);
	color: #fff;
	border: 0;
	border-radius: var(--rb-r);
	font-family: var(--rb-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	transition: background-color var(--rb-dur-fast) var(--rb-ease);
}
.wc-block-components-button.contained:hover:not(:disabled):not([aria-disabled="true"]),
.wc-block-components-button.contained:focus:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--rb-red-hover);
	color: #fff;
}
.wc-block-components-button.contained:disabled,
.wc-block-components-button.contained[aria-disabled="true"] {
	background-color: var(--rb-muted);
	opacity: 0.55;
}

/* The big checkout CTA should read as the page's primary action. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	padding-block: 0.95rem;
	font-size: 1.05rem;
}

/* ---- Secondary / text actions -------------------------------------------- */
/* "Zurück zum Warenkorb" reads as a quiet text link, not a button. */
.wc-block-components-checkout-return-to-cart-button {
	color: var(--rb-muted);
	font-family: var(--rb-font-display);
	font-weight: 600;
}
.wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--rb-red);
}

/* Coupon "Anwenden" — navy outline so it doesn't compete with the red CTA. */
.wc-block-components-totals-coupon__button.contained {
	background-color: transparent;
	color: var(--rb-navy);
	border: 1px solid var(--rb-line);
}
.wc-block-components-totals-coupon__button.contained:hover:not(:disabled) {
	background-color: var(--rb-surface);
	color: var(--rb-navy);
}

/* Inline expander / helper links (Gutscheine hinzufügen, + Wohnung …). */
.wc-block-components-panel__button,
.wc-block-components-address-address-wrapper button,
.wc-block-components-totals-coupon-link {
	color: var(--rb-red);
	font-family: var(--rb-font-display);
	font-weight: 600;
}

/* ---- Step / section titles ----------------------------------------------- */
.wc-block-components-title,
.wc-block-components-checkout-step__title {
	font-family: var(--rb-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--rb-ink);
}
.wc-block-components-checkout-step__description {
	color: var(--rb-muted);
}

/* ---- Form fields (inputs, selects) --------------------------------------- */
.wc-block-components-text-input input,
.wc-block-components-text-input .components-text-control__input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox-control input {
	border: 1px solid var(--rb-line);
	border-radius: var(--rb-r-sm);
	background-color: var(--rb-card);
	color: var(--rb-ink);
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input .components-text-control__input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-combobox-control input:focus {
	border-color: var(--rb-navy);
	box-shadow: 0 0 0 1px var(--rb-navy);
	outline: none;
}
/* Floating label colour while resting / focused. */
.wc-block-components-text-input label {
	color: var(--rb-muted);
}

/* ---- Checkboxes & radios (incl. Germanized legal + create-account) ------- */
.wc-block-components-checkbox__input[type="checkbox"]:checked,
.wc-gzd-checkbox input[type="checkbox"]:checked {
	background-color: var(--rb-navy);
	border-color: var(--rb-navy);
}
.wc-block-components-radio-control__input {
	accent-color: var(--rb-navy);
}
/* Selected shipping / payment row gets a navy frame. */
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked),
.wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked) {
	border-color: var(--rb-navy);
}

/* WooCommerce renders several in-content links with no affordance — they read
   as plain body text and get missed or mis-clicked:
     • Germanized consent text (.wc-gzd-checkbox…) — the AGB / Widerruf links
       inherit the body colour and lose their underline.
     • Order-received status — the "Du hast ein Konto bei uns? Melde dich hier
       an" link is an <a class="button"> dropped inline in a sentence; nothing
       styles a.button there, so it falls back to plain body text.
   Restore one consistent brand affordance (red + underline) for links inside
   WooCommerce content. The .woocommerce-order-received body-class prefix gives
   us the specificity to beat WC's resets and the link's own inline `.button`
   class. The consent links already open in a new tab (target="_blank"). */
.wc-gzd-checkbox a,
.wc-gzd-checkboxes a,
.woocommerce-order-received .wc-block-order-confirmation-status-description a {
	color: var(--rb-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wc-gzd-checkbox a:hover,
.wc-gzd-checkboxes a:hover,
.woocommerce-order-received .wc-block-order-confirmation-status-description a:hover {
	color: var(--rb-red-hover);
}

/* ---- Order summary / totals card ----------------------------------------- */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-checkout-order-summary,
.wc-block-components-totals-wrapper {
	border-color: var(--rb-line);
}
/* The final total reads as the emphatic figure. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--rb-font-display);
	font-weight: 700;
	color: var(--rb-ink);
}

/* ---- Cart page title ----------------------------------------------------- */
/* A bare post-title <h1> carries no size utility, so Tailwind preflight resets
   it to the body size and "Warenkorb" renders tiny (GOTCHA 7). Restore the
   page-title scale (font-family/weight already come from theme.json). */
.woocommerce-cart .wp-block-post-title {
	/* Match the constrained page-title scale (Datenschutz / Mein Konto), not the full
	   --rb-h1 hero size which read as oversized for a cart page. */
	font-size: clamp(2.2rem, 5vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* WooCommerce's woocommerce-blocktheme.css caps WC-page post-titles at 1000px — narrower
   than the theme content width — so "Warenkorb" / "Mein Konto" centred themselves right of
   the header and the content below. Restore them to the constrained content width so every
   WC page title left-aligns with the header (and the content). */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-account .wp-block-post-title {
	max-width: var(--wp--style--global--content-size);
}

/* ---- Cross-sells --------------------------------------------------------- */
/* We render cross-sells with the brand product-card in our own full-width rail
   below the cart (rhinobag/cart-cross-sells); hide WooCommerce's native
   in-column cross-sells block so they don't show twice. */
.wp-block-woocommerce-cart-cross-sells-block {
	display: none;
}


/* ========================================================================== *
 * My Account — classic [woocommerce_my_account] shortcode                    *
 * ========================================================================== */

/* page.html is now CONSTRAINED (contentSize + root padding + a page title), so the
   shortcode output needs no re-constraining or re-padding — that only pushed the
   content narrower/further-in than the "Mein Konto" title and added a big top gap.
   Just centre the narrowed login variant (max-width set below). */
.woocommerce-account main .woocommerce {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}
/* Dashboard: nav + content side by side. Uses FLEX, not grid, deliberately —
   WooCommerce's woocommerce-blocktheme.css sets a grid-template (with empty leading/
   trailing rows) on this same element that leaks through a grid layout and pushed the
   whole block ~48px down from the title. Flex sidesteps that entirely. The :has()
   scopes it to the logged-in view so the login page isn't affected. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3rem);
}
/* WooCommerce's clearfix ::before/::after become stray flex items here — the gap
   before/after them offset the nav and added blank space. Remove them. (These were
   also the phantom empty rows in the previous grid version.) */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
	display: none;
}
/* WC ships the nav + content with floats and percentage widths — reset those. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
	float: none;
	flex: 0 0 220px;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
	float: none;
	flex: 1 1 auto;
	min-width: 0;
}
@media (max-width: 860px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		flex-direction: column;
	}
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
		flex-basis: auto;
		width: 100%;
	}
}
/* Login: a tidy narrow column rather than a full-width form. */
.woocommerce-account .woocommerce:has(.woocommerce-form-login):not(:has(.woocommerce-MyAccount-navigation)) {
	max-width: 460px;
}

/* Account navigation */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: var(--rb-r-sm);
	font-family: var(--rb-font-display);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--rb-text);
	text-decoration: none;
	transition: background var(--rb-dur-fast) var(--rb-ease),
		color var(--rb-dur-fast) var(--rb-ease);
}
.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--rb-surface);
	color: var(--rb-ink);
}
.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--rb-navy);
	color: #fff;
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--rb-red);
}
.woocommerce-MyAccount-content {
	min-width: 0;
}

/* Headings (login "Anmelden", form section titles) — preflight strips their
   size, so restore the display face + a sensible scale. */
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account h3 {
	font-family: var(--rb-font-display);
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: var(--rb-h3);
	color: var(--rb-ink);
}

/* Form fields */
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="tel"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce input[type="number"],
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--rb-line);
	border-radius: var(--rb-r-sm);
	background: var(--rb-card);
	color: var(--rb-ink);
	font-family: var(--rb-font-body);
	font-size: 1rem;
}
.woocommerce-account .woocommerce input:focus,
.woocommerce-account .woocommerce select:focus,
.woocommerce-account .woocommerce textarea:focus {
	border-color: var(--rb-navy);
	box-shadow: 0 0 0 1px var(--rb-navy);
	outline: none;
}
.woocommerce-account .woocommerce label {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--rb-ink);
}
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .woocommerce-form-row + p {
	margin-bottom: 1.1rem;
}

/* Buttons (login, save changes, …) */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button[type="submit"],
.woocommerce-account .woocommerce-Button {
	display: inline-block;
	background: var(--rb-red);
	color: #fff;
	border: 0;
	border-radius: var(--rb-r-sm);
	padding: 0.8rem 1.5rem;
	font-family: var(--rb-font-display);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background var(--rb-dur-fast) var(--rb-ease);
}
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover {
	background: var(--rb-red-hover);
	color: #fff;
}

/* Orders / downloads tables */
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--rb-line);
	border-radius: var(--rb-r);
	overflow: hidden;
	font-variant-numeric: tabular-nums;
}
.woocommerce-account table.shop_table th {
	background: var(--rb-surface);
	text-align: left;
	font-family: var(--rb-font-display);
	font-weight: 700;
	color: var(--rb-ink);
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--rb-line);
}
.woocommerce-account table.shop_table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--rb-line);
	color: var(--rb-text);
}
.woocommerce-account table.shop_table tr:last-child td {
	border-bottom: 0;
}
/* Compact action buttons inside table rows ("Anzeigen"). */
.woocommerce-account table.shop_table .button {
	padding: 0.45rem 0.9rem;
	font-size: 0.9rem;
}

/* Address cards on the Addresses tab */
.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-MyAccount-content address {
	border: 1px solid var(--rb-line);
	border-radius: var(--rb-r);
	padding: 1.1rem 1.25rem;
	font-style: normal;
	line-height: 1.6;
	color: var(--rb-text);
}

/* Notices (success / info / error) */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--rb-line);
	border-left-width: 3px;
	border-radius: var(--rb-r-sm);
	background: var(--rb-surface);
	color: var(--rb-ink);
	font-size: 0.97rem;
}
.woocommerce-account .woocommerce-message { border-left-color: var(--rb-navy); }
.woocommerce-account .woocommerce-info { border-left-color: var(--rb-navy); }
.woocommerce-account .woocommerce-error { border-left-color: var(--rb-red); }


/* ========================================================================== *
 * Order received — woocommerce/order-confirmation block                      *
 * ========================================================================== */

/* The order-confirmation template uses core layout with has-global-padding,
   but the theme defines no root padding, so its content rendered edge-to-edge
   AND uncapped (wider than the header/footer .wrap on large screens). Make the
   main an exact .wrap equivalent (same max-width + gutter) so it lines up with
   the header/footer, and let its children fill that width (override core
   layout's content/wide-size caps). */
.woocommerce-order-received main.is-layout-constrained {
	width: 100%;
	max-width: var(--rb-maxw);
	margin-inline: auto;
	padding-inline: var(--rb-gutter);
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem);
}
.woocommerce-order-received main.is-layout-constrained > * {
	max-width: none;
	margin-inline: 0;
}
/* "Bestellung erhalten" — page-title scale (preflight strips bare h1 size). */
.woocommerce-order-received h1,
.woocommerce-order-received .wp-block-post-title {
	font-size: var(--rb-h1);
	line-height: 1.08;
	letter-spacing: -0.02em;
}
.woocommerce-order-received h2,
.woocommerce-order-received h3 {
	font-family: var(--rb-font-display);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--rb-ink);
	margin-bottom: 0.85rem;
}
.wc-block-order-confirmation-status-description {
	color: var(--rb-text);
}
/* Order totals / line items table */
.wc-block-order-confirmation-totals table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--rb-line);
	font-variant-numeric: tabular-nums;
}
.wc-block-order-confirmation-totals th,
.wc-block-order-confirmation-totals td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--rb-line);
	text-align: left;
}
.wc-block-order-confirmation-totals th {
	background: var(--rb-surface);
	font-family: var(--rb-font-display);
	font-weight: 700;
	color: var(--rb-ink);
}
/* Billing / shipping address cards */
.wc-block-order-confirmation-address-wrapper,
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address {
	border-color: var(--rb-line);
	border-radius: var(--rb-r);
}