/**
 * Kasse aufraeumen (includes/checkout-ux.php).
 * Alles haengt an body.berkei-checkout-ux - nur Kasse, nicht Danke-Seite.
 */

/* ── Rahmen: Header nur Logo, Footer nur Vertrauen/Zahlung/Recht ───────── */

.berkei-checkout-ux header .berkei-cart-trigger,
.berkei-checkout-ux header .wp-block-navigation,
.berkei-checkout-ux header .berkei-account-link,
.berkei-checkout-ux header a[href*="my-account"],
.berkei-checkout-ux header a[href*="mein-konto"] {
    display: none !important;
}

.berkei-checkout-ux .berkei-footer__newsletter-bar,
.berkei-checkout-ux .berkei-footer__top,
.berkei-checkout-ux .berkei-footer__accordion {
    display: none !important;
}

.berkei-checkout-ux .berkei-footer__inner {
    padding-top: 24px;
}

/* ── Express-Kasse nach oben ──────────────────────────────────────────────
 * Der Block steht im Seiteninhalt unter dem Bestellbutton. Per CSS-order
 * nach oben - React bleibt unberuehrt, die Reihenfolge im Editor auch.
 */

.berkei-checkout-ux .wc-block-checkout__form:has(.wc-block-components-express-payment--checkout) {
    display: flex;
    flex-direction: column;
}

.berkei-checkout-ux .wc-block-checkout__form > :has(> .wc-block-components-express-payment--checkout) {
    order: -1;
    margin-bottom: 8px;
}

/* ── Express erst nach Bestaetigung ───────────────────────────────────────
 * Gesperrt, bis body.berkei-express-ok gesetzt ist (JS, nach Haken bei
 * AGB/Widerruf). Faellt das Skript aus, bleibt es gesperrt.
 */

.berkei-checkout-ux:not(.berkei-express-ok) .wc-block-components-express-payment__content {
    position: relative;
}

.berkei-checkout-ux:not(.berkei-express-ok) .wc-block-components-express-payment__event-buttons {
    pointer-events: none;
    opacity: 0.35;
    filter: grayscale(1);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.berkei-checkout-ux .berkei-express-gate {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.45;
}

.berkei-checkout-ux .berkei-express-gate label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
}

.berkei-checkout-ux .berkei-express-gate input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: #1e1e1e;
}

.berkei-checkout-ux .berkei-express-gate__privacy {
    margin: 6px 0 0 30px;
    font-size: 12.5px;
    color: #5e5e5e;
}

.berkei-checkout-ux .berkei-express-gate a {
    text-decoration: underline;
}

.berkei-checkout-ux .berkei-express-gate.is-attention {
    border-color: #b32d2e;
    background: #fdf2f2;
    animation: berkei-express-shake 0.35s ease;
}

.berkei-checkout-ux.berkei-express-ok .berkei-express-gate {
    border-color: #cfe3d2;
    background: #f3faf4;
}

@keyframes berkei-express-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .berkei-checkout-ux .berkei-express-gate.is-attention { animation: none; }
}

/* Klicks fallen durch die gesperrten Buttons auf diese Flaeche (JS zeigt den Hinweis). */
.berkei-checkout-ux:not(.berkei-express-ok) .wc-block-components-express-payment__event-buttons {
    cursor: not-allowed;
}

/* ── Weniger Rauschen ─────────────────────────────────────────────────── */

/* Produkt-Kurzbeschreibung in der Uebersicht (Lieferzeit bleibt). */
.berkei-checkout-ux .wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
    display: none;
}

/* Versand-Schritt erst, wenn es etwas zu waehlen gibt (Nummerierung zaehlt mit). */
.berkei-checkout-ux .wc-block-checkout__shipping-option:has(.wc-block-components-shipping-rates-control__no-shipping-address-message) {
    display: none;
}

/* Handy: Schritt-Titel und "Anmelden" ueberlappten. */
.berkei-checkout-ux .wc-block-components-checkout-step__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.berkei-checkout-ux .wc-block-components-checkout-step__title {
    flex: 0 1 auto;
    min-width: 0;
}

.berkei-checkout-ux .wc-block-checkout__login-prompt {
    float: none;
    margin-left: auto;
    white-space: nowrap;
}

/* Handy: Versandkosten ragten rechts aus dem Kasten. WooCommerce gibt dem Preis feste 50 %
   der Zeile, "Versandkostenpauschale" laesst sich nicht kuerzer umbrechen (min-width:auto) -
   bei 390px zusammen 320px in 278px. Preis nur so breit wie noetig, Name darf umbrechen. */
.berkei-checkout-ux .wc-block-components-radio-control__label-group {
    gap: 12px;
}

.berkei-checkout-ux .wc-block-components-radio-control__label-group .wc-block-components-radio-control__label {
    min-width: 0;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.berkei-checkout-ux .wc-block-components-radio-control__label-group .wc-block-components-radio-control__secondary-label {
    flex: 0 0 auto;
}

/* Vertrauen direkt am Bestellbutton - wie der PayPal-Hinweis darueber (12px, #222,
   Systemschrift wie im PayPal-iframe, linksbuendig), damit beide als eine Hinweisgruppe
   wirken. Die Zeile mit dem Button ist eine Spalte in umgekehrter Reihenfolge mit
   align-items:center (WooCommerce/Germanized): ::after steht deshalb ueber dem Button und
   war auf Textbreite geschrumpft und zentriert - align-self:stretch gibt ihm die volle Breite. */
.berkei-checkout-ux .wc-block-checkout__actions_row::after {
    content: "\1F512\00A0 Sichere Zahlung · 14 Tage Widerrufsrecht";
    display: block;
    align-self: stretch;
    margin: 0;
    font: 12px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222;
    text-align: left;
}

.berkei-checkout-ux .wc-block-checkout__actions_row {
    flex-wrap: wrap;
}

/* ── Handy: Summe oben ────────────────────────────────────────────────── */

.berkei-co-summary-bar {
    display: none;
}

@media (max-width: 781px) {
    .berkei-co-summary-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        margin: 0 0 16px;
        padding: 12px 14px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #f6f6f6;
        color: inherit;
        font: inherit;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
    }

    .berkei-co-summary-bar strong {
        font-size: 16px;
        white-space: nowrap;
    }

    .berkei-co-summary-bar__label::after {
        content: " ›";
    }
}

/* ── Kaufablauf: Schrittleiste Warenkorb › Kasse › Bestätigung ───────── */

.berkei-flow-steps {
    margin: 8px auto 28px;
}

.berkei-flow-steps ol {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.berkei-flow-steps__step {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    color: #8c8f94;
    font-size: 15px;
}

/* Verbindungslinie zum naechsten Schritt */
.berkei-flow-steps__step:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    margin: 0 14px;
    background: #dcdcde;
    border-radius: 1px;
}

.berkei-flow-steps__step.is-done:not(:last-child)::after {
    background: #1e1e1e;
}

.berkei-flow-steps__step:last-child {
    flex: 0 0 auto;
}

.berkei-flow-steps__step > a,
.berkei-flow-steps__step > span,
.berkei-flow-steps__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

.berkei-flow-steps__step > a:hover .berkei-flow-steps__label {
    text-decoration: underline;
}

.berkei-flow-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.berkei-flow-steps__step.is-done {
    color: #1e1e1e;
}

.berkei-flow-steps__step.is-done .berkei-flow-steps__num {
    background: #1e1e1e;
    border-color: #1e1e1e;
    color: #fff;
}

.berkei-flow-steps__step.is-current {
    color: #1e1e1e;
    font-weight: 700;
}

.berkei-flow-steps__step.is-current .berkei-flow-steps__num {
    background: var(--berkei-cta-bg, #c35517);
    border-color: var(--berkei-cta-bg, #c35517);
    color: #fff;
}

@media (max-width: 600px) {
    .berkei-flow-steps { margin-bottom: 20px; }
    .berkei-flow-steps__step { font-size: 13px; }
    .berkei-flow-steps__step:not(:last-child)::after { margin: 0 8px; min-width: 12px; }
    .berkei-flow-steps__num { width: 24px; height: 24px; font-size: 12px; }
    /* Auf schmalen Bildschirmen nur die Nummer bei kommenden Schritten */
    .berkei-flow-steps__step.is-next .berkei-flow-steps__label { display: none; }
}

/* Bestätigung: Das Theme blendet auf allen Kassen-Seiten das Menü aus -
   nach der Bestellung soll man aber weiter stöbern können. */
body.berkei-flow.woocommerce-order-received header.wp-block-template-part nav.wp-block-navigation {
    visibility: visible;
}

/* Warenkorb: Ratenzahlungs-Hinweise zusammen - Klarna (WooPayments, am Ende der Summe)
   und PayPal "Spaeter bezahlen" (eigener Block hinter dem Button) direkt untereinander,
   danach Trennlinie und "Weiter zur Kasse". Nur Reihenfolge per CSS: beide Bloecke
   rendert WooCommerce (React), Verschieben im DOM wuerde bei Warenkorb-Aenderungen brechen. */
.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block {
    display: flex;
    flex-direction: column;
}
.wc-block-cart__sidebar > .ppcp-messages {
    order: 1;
    margin: 6px 0 16px;
}
.wc-block-cart__sidebar:has(> .ppcp-messages) > .wp-block-woocommerce-cart-order-summary-block {
    margin-bottom: 0;
}

/* Warenkorb: Kleingedrucktes unter der Summe einheitlich - Kleinunternehmer-Hinweis,
   Klarna und PayPal in 12px, gleicher Farbe und Schrift, buendig und mit gleichen
   Abstaenden. Klarna (Stripe) und PayPal zeichnen in eigenen iframes: PayPal nimmt die
   Einstellungen des Plugins (12px, schwarz), Klarna bekommt Groesse/Farbe/Schrift ueber
   das WooPayments-Ereignis "wcpay_elements_appearance" (checkout-ux.php). Heebo liegt auf
   dem eigenen Server und ist in den iframes nicht verfuegbar - daher fuer alle drei die
   Systemschrift wie bei PayPal. WooPayments rueckt Klarna um 17px ein und WooCommerce gibt
   jedem Eintrag 16px oben/unten - beides hier ausgeglichen. */
.wc-block-cart__sidebar .wc-gzd-additional-info.small-business-info {
    margin: 0;
    font: 12px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222;
}
.wc-block-cart__sidebar .wc-block-components-totals-wrapper.slot-wrapper .wc-gzd-small-business-info {
    padding: 16px 0 0;
}
.wc-block-cart__sidebar .wc-block-components-totals-wrapper.slot-wrapper .wc-block-components-bnpl-wrapper {
    padding: 6px 0 0;
}
.wc-block-cart__sidebar > .wc-block-cart__submit {
    order: 2;
    border-top: 1px solid hsla(0, 0%, 7%, 0.11);
    padding-top: 16px;
}
.wc-block-cart__sidebar > .wc-block-cart__payment-options {
    order: 3;
}
.wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block {
    border-bottom: 0;
}

/* Kasse (Seitenleiste): Gesamtsumme direkt unter Zwischensumme und Lieferung - ein Kasten
   statt zwei. Germanized setzt die Summe als zweiten Bestelluebersichts-Block an den Button
   (Button-Loesung, Paragraf 312j BGB: Gesamtpreis unmittelbar vor dem Bestellen); der bleibt
   dort, stoesst aber ohne Luecke an die Uebersicht. Darunter PayPal-Hinweis und
   Vertrauenszeile, dann der Button. Nur Reihenfolge/Raender per CSS - die Bloecke rendert
   WooCommerce (React). */
.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block {
    display: flex;
    flex-direction: column;
}
.wc-block-checkout__sidebar > .wc-gzd-checkout-submit {
    display: contents;
}
.wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
    order: 1;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.wc-block-checkout__sidebar > .wc-gzd-checkout-submit > .wp-block-woocommerce-checkout-order-summary-block {
    order: 2;
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.wc-block-checkout__sidebar > .ppcp-messages {
    order: 3;
    margin: 14px 0 0;
}
.wc-block-checkout__sidebar > .wc-gzd-checkout-submit > .wc-block-checkout__actions {
    order: 4;
}
/* Germanized gibt dem Aktionsblock 36px Innenabstand oben - die Vertrauenszeile stand
   dadurch weit unter dem PayPal-Hinweis. Selektor staerker als der von Germanized
   (.wc-gzd-checkout .is-large .wc-gzd-checkout-submit .wc-block-checkout__actions). */
.berkei-checkout-ux .wc-block-checkout__sidebar > .wc-gzd-checkout-submit > .wc-block-checkout__actions.wp-block-woocommerce-checkout-actions-block {
    padding-top: 6px;
}