/*
 * RealLeaf - Cart + Checkout (S1-10, konservative Token-Farbschicht)
 *
 * Zweck: WooCommerce-Blocks-Cart (Seite 27222, .wc-block-cart) und
 * -Checkout (Seite 27223, .wc-block-checkout / German Market) auf die
 * Marken-Optik heben - AUSSCHLIESSLICH Farben, Buttons, Abstaende,
 * Typo, Fokus. Geladen konditional via is_cart()/is_checkout()
 * (functions.php realleaf_register_cart_checkout_styles, Prio 9).
 *
 * WICHTIG - HELLE INSEL IN BEIDEN THEMES (verifiziert live 2026-06-13):
 * Die Cart-/Checkout-Seite hat einen FEST WEISSEN Seitenhintergrund
 * (rgb 255,255,255; kein Token, kippt NICHT mit data-theme="dark").
 * Wuerde der Text ueber die kippenden Tokens (--text -> #faf9f6 im Dark-
 * Theme) gefaerbt, ergaebe das hell-auf-weiss = unlesbar. Daher nutzt
 * diese Datei BEWUSST die NICHT-kippenden Marken-Tokens aus :root
 * (--rl-black, --rl-white, --rl-green-leaf) plus color-mix darauf -
 * Cart/Checkout bleiben in BEIDEN Themes eine helle, lesbare Flaeche
 * (Checkout-Neutralitaet; vermeidet jedes Dark-Mode-Kontrastrisiko an
 * rechtlich relevanten Pflichttexten). Token-pur, KEIN rohes Hex.
 *
 * VERBINDLICHE GRENZEN (AGENTS.md Tabuzonen / uebertragbarkeit.md S1-10):
 * - NICHTS verstecken, das eine German-Market-Pflichtangabe ist: MwSt-
 *   Zeilen (.wc-block-components-totals-footer-item-tax*), Versand-/
 *   Lieferzeit-Hinweise, AGB-/Datenschutz-Terms, Pflicht-Checkboxen,
 *   "Place binding order"-Button - NUR stylen, NIE display:none.
 * - Zahlungsmethoden-Bereich (.wc-block-checkout__payment-method): nur
 *   Farb-/Abstands-Styling. Der Live-Hinweis "keine Zahlungsmethoden
 *   verfuegbar" ist eine Zahlungs-Konfig-Tabuzone (Doku, kein Design).
 * - Keine WC-Block-Markup-/Klassennamen umbenannt; keine !important;
 *   keine eigenen Layout-Umbauten (Blocks sind selbst responsiv).
 *
 * Bestehende Inline-Regeln aus functions.php (Z. 660-671:
 * .wc-block-components-product-metadata + order-summary-price display:none)
 * bleiben UNANGETASTET - bewusste Bestandsentscheidung, kein S1-10-Thema.
 */

/* ============================================================
   0. UEBERSCHRIFTEN + GRUNDTEXT (helle Insel, feste Marken-Ink)
   ============================================================ */
.woocommerce-cart main h1,
.woocommerce-checkout main h1,
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary__title {
    font-family: var(--display);
    color: var(--rl-black);
}

.woocommerce-cart main h1,
.woocommerce-checkout main h1 {
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* ============================================================
   1. PANELS / RAHMEN - Token-Border (color-mix, kippt nicht)
   ============================================================ */
.wc-block-components-totals-item,
.wc-block-cart-items__row,
.wc-block-checkout__main .wc-block-components-checkout-step {
    border-color: color-mix(in srgb, var(--rl-black) 16%, var(--rl-white));
}

/* ============================================================
   2. BUTTONS - Primaeraktionen auf Marken-Gruen, Pill
   "Weiter zur Kasse" (.wc-block-cart__submit-button) +
   "Place binding order" (.wc-block-components-checkout-place-order-button)
   ============================================================ */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained {
    background: var(--rl-green-leaf);
    color: var(--rl-white);
    border: 1.5px solid var(--rl-green-leaf);
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-weight: 700;
    transition: background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover {
    background: color-mix(in srgb, var(--rl-green-leaf) 82%, var(--rl-black));
    border-color: color-mix(in srgb, var(--rl-green-leaf) 82%, var(--rl-black));
    color: var(--rl-white);
    transform: translateY(-1px);
}

.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-components-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl-green-leaf) 45%, transparent);
}

/* Sekundaer-/Textbuttons (Gutschein-Panel, "Wohnung hinzufuegen",
   "Zurueck zum Warenkorb") - dezent, Marken-Ink */
.wc-block-components-button.outlined {
    border: 1.5px solid var(--rl-black);
    color: var(--rl-black);
    border-radius: var(--r-pill);
    background: transparent;
}

.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button,
a.wc-block-cart__shopping-button {
    color: var(--rl-green-leaf);
}

/* ============================================================
   3. FORMULARFELDER (Checkout-Adresse/Kontakt)
   ============================================================ */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select select,
.wc-block-components-combobox .components-form-token-field__input,
.wc-block-components-address-form input {
    border-color: color-mix(in srgb, var(--rl-black) 22%, var(--rl-white));
    border-radius: var(--r-input, 10px);
    color: var(--rl-black);
    background: var(--rl-white);
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-address-form input:focus {
    border-color: var(--rl-green-leaf);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl-green-leaf) 35%, transparent);
    outline: none;
}

.wc-block-components-text-input.is-active label {
    color: color-mix(in srgb, var(--rl-green-leaf) 85%, var(--rl-black));
}

/* ============================================================
   4. SUMMEN / PREISE / PFLICHTANGABEN - NUR Farbe/Typo
   (German-Market-Zeilen bleiben sichtbar - kein display:none!)
   ============================================================ */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-price__value,
.wc-block-components-product-name {
    color: var(--rl-black);
}

.wc-block-components-totals-footer-item {
    font-family: var(--display);
    font-weight: 700;
    color: var(--rl-black);
}

/* MwSt-/Versand-/Lieferzeit-Hinweise: gedaempft aber lesbar,
   NIEMALS versteckt (German-Market-Pflicht) */
.wc-block-components-totals-footer-item-tax,
.wc-block-components-totals-item__description,
.wc-block-components-product-details__lieferzeit,
.wc-cart-shipping-notice,
.wc-block-checkout__terms {
    color: color-mix(in srgb, var(--rl-black) 62%, var(--rl-white));
}

.wc-block-checkout__terms a,
.wc-block-components-order-summary a {
    color: var(--rl-green-leaf);
}

/* ============================================================
   5. MENGEN-STEPPER im Block-Cart (Markup unangetastet)
   ============================================================ */
.wc-block-components-quantity-selector {
    border-color: color-mix(in srgb, var(--rl-black) 22%, var(--rl-white));
    border-radius: var(--r-pill);
}

.wc-block-components-quantity-selector__button {
    color: var(--rl-black);
}

.wc-block-components-quantity-selector__button:hover {
    color: var(--rl-green-leaf);
}

/* ============================================================
   6. ZAHLUNGSBEREICH - nur Farbe (Konfig = Tabuzone, s. Kopf)
   ============================================================ */
.wc-block-checkout__payment-method,
.wc-block-components-payment-method-label {
    color: var(--rl-black);
}

.wc-block-components-notice-banner {
    border-radius: var(--r-input, 10px);
}

/* Fehlermeldungen sichtbar halten (Owner-Auftrag 2026-08-14).
   Der Block-Checkout scrollt seine Fehlermeldung per scrollIntoView an den
   oberen Viewport-Rand - genau dorthin, wo der sticky Header liegt
   (gemessen 2026-08-14 live: 116px mobil, 86px Desktop). Ergebnis vorher:
   Kunde klickt "zahlungspflichtig bestellen", die Seite ruckt, die Meldung
   landet vollstaendig HINTER dem Header - fuer den Kunden passiert nichts.
   Belegt via elementFromPoint in beiden Viewports; betraf u. a. die
   Hausnummer-Pflicht aus inc/checkout-address-validation.php.
   Wert = Header mobil (116px) + 16px Luft. */
.wc-block-components-notices,
.wc-block-components-notice-banner {
    scroll-margin-top: 132px;
}