/* ==========================================================================
   Nautigo Benefits-Karte v2 + Willkommensbox-Zeile — NUR Admin-Preview.
   Geladen ausschließlich mit ?nc_preview=1 (manage_options), siehe
   Nautigo_Checkout_AB::enqueue_preview_assets(). Bei Freigabe wird diese
   Datei in nautigo-cart.css überführt und der Preview-Gate entfernt.
   ========================================================================== */

/* Karte: erbt .nc-card--gradient (Verlaufs-Border Blau→Gelb) aus nautigo-cart.css.
   Zusätzlich ein leiser Blau→Gelb-Farbwash auf der Fläche (Flächenfarbe, kein Muster). */
.nc-bcard {
    background:
        linear-gradient(135deg, rgba(1, 187, 254, 0.07) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 240, 0, 0.06) 100%),
        var(--color-white);
}

.nc-bcard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

@media (min-width: 641px) {
    .nc-bcard__top { align-items: center; }
}

.nc-bcard__intro { min-width: 0; }

.nc-bcard__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-nautigo-yellow, #fff000);
    color: #111827;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 9999px;
    margin-bottom: 0.7rem;
    white-space: nowrap;
}

.nc-bcard__title {
    margin: 0 0 0.3rem;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: #111827;
    text-wrap: balance;
}

.nc-bcard__title span { color: var(--color-nautigo-blue, #01bbfe); }

.nc-bcard__sub {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

/* SBF-Muster-Schein: leicht gedreht, liegt wie eine echte Karte auf der Fläche */
.nc-bcard__license {
    flex: 0 0 auto;
    width: 210px;
    height: auto;
    border-radius: 10px;
    transform: rotate(-3deg);
    box-shadow: 0 12px 28px rgba(2, 119, 179, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
    margin: 6px 8px 0 0;
}

.nc-bcard__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem 1.25rem;
    margin: 1.15rem 0 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid #f3f4f6;
}

.nc-bcard__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

/* Desktop-Reihe: Icons oben ausrichten, damit umbrechende Titel nicht flattern */
@media (min-width: 641px) {
    .nc-bcard__item { align-items: flex-start; }
}

.nc-bcard__ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: rgba(1, 187, 254, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-nautigo-blue, #01bbfe);
}

.nc-bcard__t {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.25;
}

.nc-bcard__s {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.35;
}

/* Kasse: dichter, damit das Formular schnell erreichbar bleibt */
.woocommerce-checkout .nc-bcard { padding: 1.1rem 1.4rem 1.25rem; }
.woocommerce-checkout .nc-bcard__sub { display: none; }
.woocommerce-checkout .nc-bcard__title { font-size: 1.125rem; }
.woocommerce-checkout .nc-bcard__license { width: 148px; margin-top: 2px; }
.woocommerce-checkout .nc-bcard__list { margin-top: 0.9rem; padding-top: 0.9rem; }

/* Mobile */
@media (max-width: 640px) {
    .nc-bcard__top { gap: 0.75rem; }
    .nc-bcard__title { font-size: 1.15rem; }
    .nc-bcard__license,
    .woocommerce-checkout .nc-bcard__license { width: 116px; margin: 2px 0 0; }
    .nc-bcard__list { grid-template-columns: 1fr; gap: 0.65rem; margin-top: 0.9rem; padding-top: 0.9rem; }
    .nc-bcard__ico { width: 34px; height: 34px; }
    .nc-bcard__ico svg { width: 17px; height: 17px; }
    .nc-bcard__badge { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Willkommensbox-Zeile (Warenkorb-Zusammenfassung, div-basiert)
   -------------------------------------------------------------------------- */
.nc-giftline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.nc-giftline__label {
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.nc-giftline__badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 240, 0, 0.35);
    color: #713f12;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 9999px;
}

.nc-giftline__val { font-weight: 600; color: #15803d; }

/* Willkommensbox-Zeile in der Kassen-Bestellübersicht (Tabelle) */
tr.nc-giftrow td { font-size: 0.875rem; }
tr.nc-giftrow .nc-giftline__val { white-space: nowrap; }

/* Kombi-Vorteil-Zeile in der Zusammenfassung (nur Premiumpaket See+Binnen,
   live berechnete Preise; Herleitung als kleine Transparenz-Zeile darunter) */
.nc-saveline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.nc-saveline .nc-giftline__label svg {
    vertical-align: -2px;
    margin-left: 2px;
    color: #a16207;
}

.nc-saveline__calc {
    display: block;
    margin-top: 1px;
    font-size: 0.6875rem;
    color: #6b7280;
    line-height: 1.4;
}

tr.nc-saverow .nc-saveline__calc { font-size: 0.6875rem; }

/* Bewertungs-Zeile am Kartenfuß (Werte aus dem UWG-Registry) */
.nc-bcard__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.45rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: #374151;
}

.nc-bcard__stars { display: inline-flex; gap: 1px; }
.nc-bcard__rating strong { font-weight: 700; color: #111827; }

.nc-bcard__rating-meta {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.6875rem;
    color: #6b7280;
}

@media (min-width: 641px) {
    .nc-bcard__rating { justify-content: flex-start; }
    .nc-bcard__rating-meta { flex-basis: auto; text-align: left; margin-left: 0.25rem; }
}

/* Sticky-CTA im Markenblau statt nc-compact-Schwarz (Preview-Entscheid #3).
   nc-compact remappt --color-primary auf Tiefblau #0277b3 (4,8:1 mit Weiß),
   Schatten daher im selben Tiefblau statt Cyan. */
body.nc-preview.nc-compact .nc-sticky-cta__btn {
    background: var(--color-primary, #01bbfe) !important;
    box-shadow: 0 2px 12px rgba(2, 119, 179, 0.3);
}

body.nc-preview.nc-compact .nc-sticky-cta__btn:hover {
    background: var(--color-primary-dark, #0298d6) !important;
}

/* --------------------------------------------------------------------------
   Unterer Kassen-/Warenkorb-Bereich (Trust-Footer) — Mobile-Polish.
   Nur body.nc-preview: Trustindex-Slider raus (Riesenkarte für Ein-Wort-
   Reviews), Summary + Gründer als ruhige Karten im Benefits-Karten-Look.
   Desktop bleibt unverändert (Slider hat dort Platz).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    body.nc-preview .nc-trust-footer__widget { display: none; }

    body.nc-preview .nc-trust-footer { padding-top: 0.75rem; }

    body.nc-preview .nc-trust-footer__inner {
        background:
            linear-gradient(135deg, rgba(1, 187, 254, 0.06) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 240, 0, 0.05) 100%),
            #fff;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        align-items: center;
        text-align: center;
        gap: 0.6rem;
        padding: 1.15rem 1.25rem 1.2rem;
    }

    body.nc-preview .nc-trust-footer__brands { justify-content: center; }
    body.nc-preview .nc-trust-footer__rating { justify-content: center; }

    body.nc-preview .nc-founder {
        margin-top: 0.85rem;
        padding: 0.9rem 1.1rem;
        border-top: none;
        background: #fff;
        border-radius: var(--radius-xl, 0.75rem);
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }
}

/* ==========================================================================
   HARMONIE-PASS (21.07., Fullscreen-Mobile-Screenshots Kasse + Warenkorb)
   ========================================================================== */

/* 1) EIN Primärweg in Markenblau: Warenkorb-CTA und Kasse-CTA folgen dem
      Sticky-Button. Schwarz bleibt exklusiv den Wallet-Buttons (Apple/Google
      Brand-Vorgabe) — dadurch klare Hierarchie: Blau = Nautigo-Weg. */
body.nc-preview.nc-compact .nc-cta-glow,
body.nc-preview.nc-compact .nc-checkout #place_order {
    background: var(--color-primary, #0277b3) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 12px rgba(2, 119, 179, 0.3) !important;
}

body.nc-preview.nc-compact .nc-cta-glow:hover,
body.nc-preview.nc-compact .nc-checkout #place_order:hover {
    background: var(--color-primary-dark, #015a87) !important;
    box-shadow: 0 4px 16px rgba(2, 119, 179, 0.35) !important;
}

/* 2) Verlaufs-Bookends: Der Marken-Verlaufsrahmen (Blau→Gelb), den nc-compact
      global deaktiviert, kommt gezielt zurück — NUR auf die beiden Rahmen-
      Karten der Seite: Benefits-Karte oben, Bewertungs-Footer unten.
      Die Arbeits-Karten dazwischen bleiben bewusst ruhig grau. */
body.nc-preview.nc-compact .nc-bcard::before {
    display: block !important;
    border-radius: inherit;
}

body.nc-preview.nc-compact .nc-trust-footer__inner::before {
    display: block !important;
    border-radius: inherit;
}

body.nc-preview.nc-compact .nc-trust-footer__inner {
    border: 1px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(1, 187, 254, 0.06) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 240, 0, 0.05) 100%),
        var(--color-white, #fff) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
}

/* 3) Gründer-Dublette im Warenkorb: Die Karte erschien doppelt (in der
      Zusammenfassung UND im Abschlussblock). Die Zusammenfassung wird
      entlastet; der Abschluss „Bewertungen + Gründer" bleibt auf
      Warenkorb und Kasse identisch. */
body.nc-preview .nc-card--gradient .nc-founder {
    display: none;
}

/* 4) PayPal-Ratenzahlungs-Hinweis (.ppcp-messages, „Bezahlen Sie in bis
      zu 24 monatlichen Raten"): sichtbar und designkonform — verschachtelte
      Fläche wie die Gutschein-Box (Radius 12, gray-50). Versteckt NUR,
      solange PayPal-JS den Container noch nicht befüllt hat (kein leerer
      Umrandungs-Kasten vor dem iframe-Load). [Rev. 21.07. Abend: früherer
      Komplett-Hide war Fehldiagnose eines Load-Timing-Artefakts] */
body.nc-preview .ppcp-messages:empty {
    display: none;
}

body.nc-preview .ppcp-messages:not(:empty) {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-gray-100, #f3f4f6);
    border-radius: 12px;
}

/* 5) Gelber Geschenk-Faden: Chip der Geschenk-Option im selben Gelb wie
      das GESCHENK-Badge der Zusammenfassung (statt nc-compact-Grau) —
      ein Farbcode für „Geschenk" durch den ganzen Warenkorb. */
body.nc-preview.nc-compact .na-ups .na-badge {
    background: rgba(255, 240, 0, 0.35) !important;
    color: #713f12 !important;
}

/* Disabled-Zustand neutral grau statt ausgewaschenem Blau (las sich wie
   ein kaputter Primär-Button); aktiv bleibt er im Markenblau. */
body.nc-preview .na-ups .na-btn:disabled {
    opacity: 1 !important;
    background: var(--color-gray-100, #f3f4f6) !important;
    color: var(--color-gray-400, #9ca3af) !important;
}

/* 6) Gutschein-Zeile der Kasse einzeilig wie im Warenkorb (Feld + Button
      nebeneinander statt gestapelt) — gleiches Muster, weniger Höhe. */
@media (max-width: 480px) {
    body.nc-preview .nc-checkout .nc-coupon__form {
        flex-direction: row;
    }

    body.nc-preview .nc-checkout .nc-checkout__order-review button.nc-coupon__btn {
        width: auto;
    }
}

/* ==========================================================================
   POLISH-PASS Runde 1 (Computed-Style-Audit 21.07.)
   Ziel-System: Karten-Radius 14px · verschachtelte Flächen 12px · Buttons
   10px · 12px Kartenrhythmus · 32px Zonenwechsel vor dem Trust-Block.
   ========================================================================== */

/* Radius-Scale: Trust-Footer + Gründer-Karte waren 16px, alle Karten 14px */
body.nc-preview .nc-trust-footer__inner { border-radius: 14px; }

body.nc-preview .nc-founder {
    border-radius: 14px !important;
    padding: 1rem 1.25rem !important;
    margin-top: 0.75rem !important;
}

/* Zonenwechsel: das Grid-Bottom-Padding (32px) trägt den Abstand allein —
   das zusätzliche Trust-Footer-Padding erzeugte ein 44px-Loch im 12px-Raster */
body.nc-preview .nc-trust-footer { padding-top: 0 !important; }

/* Kasse: Express-Karte hatte mobil 16px Fläche, alle anderen Kassen-Karten
   12px; Desktop einheitlich 24px wie alle Karten */
body.nc-preview .nc-checkout .wcpay-express-checkout-wrapper { padding: 12px !important; }

@media (min-width: 641px) {
    body.nc-preview .nc-checkout .wcpay-express-checkout-wrapper { padding: 24px !important; }
}

/* Trust-Karte auf die 4px-Skala: mobil 16/20 (war 18.4/20/19.2),
   Desktop 24px wie alle Karten (war 20/24) */
body.nc-preview .nc-trust-footer__inner { padding: 1rem 1.25rem !important; }

@media (min-width: 641px) {
    body.nc-preview .nc-trust-footer__inner { padding: 1.5rem !important; }
}

/* Telefon-Felder: Label enthält „(optional)" bereits im Text, WooCommerce
   hängt zusätzlich den .optional-Span an → „(optional) (optional)".
   Kosmetik hier; der eigentliche Label-Fix ist ein Public-PHP-Thema. */
body.nc-preview #billing_phone_field label .optional,
body.nc-preview #shipping_phone_field label .optional { display: none; }

/* Buttons einheitlich 10px (Geschenk-„Hinzufügen" war 12px) */
body.nc-preview .na-ups .na-btn,
body.nc-preview #nc-coupon-apply { border-radius: 10px !important; }

/* Express-Empty-State: Solange keine Wallet-Buttons geladen sind (kein
   iframe/button im Element), keine leere Karte mit Reservefläche zeigen.
   Der „ODER"-Separator liegt im Wrapper und verschwindet mit. */
body.nc-preview .wcpay-express-checkout-wrapper:not(:has(iframe, button, apple-pay-button, [class*="gpay"])) {
    display: none;
}

body.nc-preview #payment-method-message:not(:has(iframe, span, div)) { display: none; }

/* ==========================================================================
   POLISH-PASS Runde 3 (Kontrast + Touch-Targets)
   ========================================================================== */

/* Zeitraum/Quelle unter den Bewertungen ist die UWG-Substantiierung —
   war gray-400/11px (~2,5:1), jetzt gray-500/12px (4,7:1) */
body.nc-preview .nc-trust-footer__meta {
    color: #6b7280;
    font-size: 0.75rem;
}

/* Produkt-Entfernen-X: Tap-Target von 28/32px auf 40px, optische Position
   bleibt über die Margin-Kompensation unverändert */
body.nc-preview .nc-item__remove {
    width: 40px !important;
    height: 40px !important;
    margin: -4px -4px 0 0 !important;
}

@media (max-width: 640px) {
    body.nc-preview .nc-item__remove { margin: -6px -6px 0 0 !important; }
}