/*
 * NhPanel Checkout (Warenkorb, Addons, Domains, Domain-Konfiguration).
 * Eingebunden nur auf storefront.checkout.* (storefront/layouts/meta.twig, Block layouts_head_links).
 * Ergänzt die Theme-Stile aus component/checkout/nexthosting-checkout-style.twig (gleiche --nh-*-Tokens, mit Fallback).
 * Das Theme-CSS steht als <style> im Seiteninhalt, also NACH dieser Datei: Regeln hier brauchen eine höhere
 * Spezifität als die Theme-Regel, die sie ergänzen (deshalb "html body…" bzw. der Theme-Rahmen .nh-checkout-page).
 * Body-Klassen: page-checkout-cart, -cart-addon-selection, -cart-domain-selection, -cart-configuration.
 * Bewusst NICHT angefasst: page-checkout-cart-render-reconfigure-cart-product (Produktseite) und Formularfelder.
 * Mobile first (375 px): kein seitliches Scrollen, Tippflächen >= 44 px.
 */

/* ---- Meldungen (Erfolg/Fehler) lesbar: Symbol und Text als ruhige Zeile ---- */
html body.page-checkout-cart .hw-alerting-wrapper .alert,
html body.page-checkout-cart-addon-selection .hw-alerting-wrapper .alert,
html body.page-checkout-cart-domain-selection .hw-alerting-wrapper .alert,
html body.page-checkout-cart-configuration .hw-alerting-wrapper .alert {
    display: flex; align-items: flex-start; gap: 12px;
    border-radius: var(--nh-radius-sm, 12px); line-height: 1.5;
}
html body.page-checkout-cart .hw-alerting-wrapper .alert > i,
html body.page-checkout-cart-addon-selection .hw-alerting-wrapper .alert > i,
html body.page-checkout-cart-domain-selection .hw-alerting-wrapper .alert > i,
html body.page-checkout-cart-configuration .hw-alerting-wrapper .alert > i { flex: 0 0 auto; margin: 3px 0 0; }
html body.page-checkout-cart .hw-alerting-wrapper .alert > .alert-content,
html body.page-checkout-cart-addon-selection .hw-alerting-wrapper .alert > .alert-content,
html body.page-checkout-cart-domain-selection .hw-alerting-wrapper .alert > .alert-content,
html body.page-checkout-cart-configuration .hw-alerting-wrapper .alert > .alert-content { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }

/* ---- Schrittanzeige ------------------------------------------------------- */
/* Handy: statt seitlich scrollender Leiste zeigt nur der aktive Schritt seinen Namen, die anderen bleiben als Kreise. */
@media (max-width: 575.98px) {
    .nh-checkout-page .hw-stepper-bar { justify-content: space-between; overflow: visible; gap: 4px; padding: 10px 12px; }
    .nh-checkout-page .hw-stepper-bar .hw-stepper-step { gap: 7px; padding: 4px 2px; }
    .nh-checkout-page .hw-stepper-bar .hw-stepper-step:not(.hw-stepper-step--active) .hw-stepper-step-label { display: none; }
    .nh-checkout-page .hw-stepper-bar .hw-stepper-step--active { flex: 0 1 auto; min-width: 0; }
    .nh-checkout-page .hw-stepper-bar .hw-stepper-step--active .hw-stepper-step-label { white-space: normal; line-height: 1.2; }
    .nh-checkout-page .hw-stepper-bar .hw-stepper-connector { flex: 1 1 6px; min-width: 6px; max-width: none; }
}

/* ---- Seitenkopf der Zwischenschritte (Titel, Untertitel, zweiter Weiter-Knopf) ---- */
html body.page-checkout-cart-addon-selection .hw-header-section,
html body.page-checkout-cart-domain-selection .hw-header-section { padding-top: 32px; padding-bottom: 18px; }
html body.page-checkout-cart-addon-selection .hw-page-header,
html body.page-checkout-cart-domain-selection .hw-page-header { max-width: 1160px; margin-inline: auto; flex-wrap: wrap; gap: 12px 16px; }
html body.page-checkout-cart-addon-selection .hw-page-title,
html body.page-checkout-cart-domain-selection .hw-page-title { flex: 1 1 260px; min-width: 0; }
.nh-step-skip {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 9px 16px;
    border-color: var(--nh-primary-160, rgba(81, 67, 217, .16)); border-radius: var(--nh-radius-sm, 12px);
    color: var(--nh-primary-ink, #4133b8); font-weight: 700; white-space: nowrap;
}
.nh-step-skip:hover, .nh-step-skip:focus-visible { border-color: var(--nh-primary, #5143d9); background: var(--nh-primary, #5143d9); color: #fff; }
@media (max-width: 575.98px) {
    html body.page-checkout-cart-addon-selection .hw-page-actions { flex: 1 1 100%; }
    html body.page-checkout-cart-addon-selection .hw-page-actions .nh-step-skip { width: 100%; }
}

/* ---- Leerer Warenkorb ----------------------------------------------------- */
html body.page-checkout-cart .nh-cart-empty { text-align: center; }
html body.page-checkout-cart .nh-cart-empty > .card-body { padding: 36px 20px 32px; text-align: center; }
.nh-cart-empty__icon {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px; margin-bottom: 14px; border-radius: 20px;
    background: var(--nh-primary-080, rgba(81, 67, 217, .08)); color: var(--nh-primary, #5143d9);
    font-size: 1.6rem;
}
.nh-cart-empty__title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--nh-ink, #0f172a); }
.nh-cart-empty__text { max-width: 34rem; margin: 0 auto 18px; color: var(--nh-muted, #64748b); font-size: .95rem; line-height: 1.55; }
.nh-cart-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
html body.page-checkout-cart .nh-cart-empty__actions .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 18px; font-size: .95rem; font-weight: 700;
}
@media (max-width: 575.98px) {
    .nh-cart-empty__actions { flex-direction: column; }
    html body.page-checkout-cart .nh-cart-empty__actions .btn { width: 100%; }
}

/* ---- Warenkorb-Tabelle: Preis je Zeitraum und Gesamtsumme ------------------ */
/* Preisspalte: Betrag + Zeitraum als Hauptaussage der Zeile, Einrichtung/Zusätze darunter ruhiger */
html body.page-checkout-cart .card-table .table tbody tr:not(:last-child) > td:nth-child(2) > div { color: var(--nh-ink, #0f172a); font-weight: 700; }
html body.page-checkout-cart .card-table .table tbody tr:not(:last-child) > td:nth-child(2) small { color: var(--nh-muted, #64748b); font-weight: 500; }
html body.page-checkout-cart .card-table .table tbody tr:not(:last-child) > td:nth-child(2) del { color: var(--nh-faint, #94a3b8); font-weight: 500; }
html body.page-checkout-cart .nh-cart-term__notice { margin-top: 2px; }

html body.page-checkout-cart .card-table .table tbody tr:last-child > td.nh-cart-total { white-space: nowrap; }
html body.page-checkout-cart .card-table .table tbody tr:last-child .nh-cart-total__amount { font-size: 1.2rem; letter-spacing: -.01em; }
html body.page-checkout-cart .card-table .table tbody tr:last-child .nh-cart-total__tax { margin-top: 2px; color: var(--nh-muted, #64748b); }
html body.page-checkout-cart .card-table .table tbody tr:last-child > td:first-child small { color: var(--nh-muted, #64748b); }

/* Länderauswahl in der Steuerzeile (nur wenn Umsatzsteuer ausgewiesen wird): Tippfläche */
html body.page-checkout-cart .card-table .table select[name="country"] { min-height: 40px; }

@media (max-width: 767.98px) {
    /* Die Tabellenzellen erben "nowrap": lange Options-/Beschreibungszeilen liefen seitlich aus der Karte */
    html body.page-checkout-cart .card-table .table td,
    html body.page-checkout-cart .card-table .table li { white-space: normal; overflow-wrap: anywhere; }

    /* Entfernen/Konfigurieren nebeneinander, volle Tippfläche (die Zelle hat im Core eine feste Breite von 200 px) */
    html body.page-checkout-cart .card-table .table tbody tr:not(:last-child) > td:nth-child(3) {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100% !important;
    }
    html body.page-checkout-cart .card-table .table tbody tr:not(:last-child) > td:nth-child(3) .btn {
        display: inline-flex; align-items: center; min-height: 44px; margin: 0 !important;
    }

    /* Gesamtsumme als eine Zeile (Text links, Betrag rechts) statt drei gestapelter Blöcke */
    html body.page-checkout-cart .card-table .table tbody tr:last-child { display: flex; align-items: stretch; }
    html body.page-checkout-cart .card-table .table tbody tr:last-child > td { width: auto; flex: 1 1 auto; min-width: 0; }
    html body.page-checkout-cart .card-table .table tbody tr:last-child > td.nh-cart-total {
        display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; justify-content: center; padding-left: 0;
    }
    html body.page-checkout-cart .card-table .table tbody tr:last-child > td:last-child:not(.nh-cart-total) { display: none; }
}

/* ---- Zahlungsart-Auswahl (angemeldet): gleicher Abstand zwischen allen Einträgen ---- */
/* Das Theme setzt den Abstand nur zwischen direkt benachbarten Einträgen; nach Lastschrift/Kreditkarte liegt aber
   ein (unsichtbarer) Dialog dazwischen, dort klebten die Karten aneinander. */
html body.page-checkout-cart .card-body.payment-method-selection .custom-control.custom-radio { margin: 0 0 10px; }
html body.page-checkout-cart .card-body.payment-method-selection .custom-control.custom-radio:last-child { margin-bottom: 0; }

/* ---- Zeile unter dem Hauptknopf (Resources/views/checkout/assurance.twig) -- */
.nh-checkout-assure {
    max-width: 60rem; margin: 16px auto 0; padding: 0;
    color: var(--nh-ink-soft, #1e293b); font-size: .84rem; font-weight: 600; line-height: 1.5;
}
ul.nh-checkout-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; list-style: none; }
ul.nh-checkout-assure > li { display: inline-flex; align-items: center; gap: 7px; }
ul.nh-checkout-assure > li > i { color: var(--nh-green, #16a34a); font-size: .9em; }
p.nh-checkout-assure { display: flex; justify-content: center; gap: 8px; max-width: 46rem; font-weight: 500; }
p.nh-checkout-assure > i { flex: 0 0 auto; margin-top: 3px; color: var(--nh-primary, #5143d9); }

/* ---- Zahlungsarten für Gäste unter der Tabelle (Resources/views/checkout/pay-methods.twig) ---- */
.nh-checkout-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 2px 18px; }
.nh-checkout-pay__label { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #475569; }
.nh-checkout-pay__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nh-checkout-pay__item {
    display: inline-block; padding: 4px 11px;
    border: 1px solid var(--nh-line, rgba(15, 23, 42, .09)); border-radius: 999px; background: #fff;
    color: var(--nh-ink-soft, #1e293b); font-size: .78rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
/* Bezeichnungen kommen teils klein geschrieben (englisch "credit card"): als Einzelbegriff mit großem Anfang */
.nh-checkout-pay__item::first-letter { text-transform: uppercase; }
@media (max-width: 575.98px) {
    .nh-checkout-pay { gap: 6px 8px; }
    .nh-checkout-pay__list { gap: 5px; }
    .nh-checkout-pay__item { padding: 3px 9px; font-size: .74rem; }
}

/* ---- Addon-Schritt -------------------------------------------------------- */
/* Karten einer Reihe gleich hoch, Knopf jeweils unten; Titel und Preis mit Abstand */
.nh-checkout-page.nh-addons-page .hw-product-detail-addons-wrapper .row > [class*="col-"] { display: flex; }
.nh-checkout-page.nh-addons-page .hw-product-detail-addons-wrapper .row > [class*="col-"] > .card { flex: 1 1 auto; width: 100%; }
.nh-checkout-page.nh-addons-page .hw-product-detail-addons-wrapper .row > [class*="col-"] > .card > .card-header { gap: 10px; }
.nh-checkout-page.nh-addons-page .hw-product-detail-addons-wrapper .row > [class*="col-"] > .card > .card-header small { white-space: nowrap; }
.nh-checkout-page.nh-addons-page .hw-product-detail-addons-wrapper .row > [class*="col-"] > .card > .card-body { display: flex; flex-direction: column; }
.nh-checkout-page.nh-addons-page .hw-product-detail-addons-wrapper .row > [class*="col-"] > .card > .card-body > p { flex: 1 1 auto; }
@media (max-width: 767.98px) {
    .nh-checkout-page.nh-addons-page .hw-product-detail-addons-wrapper .addon-btn { min-height: 44px; }
}

/* ---- Domain-Schritt ------------------------------------------------------- */
/* Die Domain-Tabelle war auf dem Handy breiter als die Seite (seitliches Scrollen der ganzen Seite) */
.nh-checkout-page.nh-domains-page .card.card-table { overflow-x: auto; }
.nh-checkout-page.nh-domains-page .hw-product-detail-domain-wrapper .btn-block { min-height: 44px; }
@media (max-width: 991.98px) {
    /* Eingabefeld und "Verfügbarkeit prüfen" stehen untereinander: Abstand statt Kante an Kante */
    .nh-checkout-page.nh-domains-page .hw-product-detail-domain-wrapper form .row > [class*="col-"] + [class*="col-"] { margin-top: 10px; }
}
@media (max-width: 767.98px) {
    .nh-checkout-page.nh-domains-page .hw-domain-check-table .btn-sm { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}

/* ---- Meldungen der Zwischenschritte auf Inhaltsbreite (wie im Warenkorb) ---- */
html body.page-checkout-cart-addon-selection .hw-alerting-wrapper,
html body.page-checkout-cart-domain-selection .hw-alerting-wrapper,
html body.page-checkout-cart-configuration .hw-alerting-wrapper { max-width: 1160px; margin-inline: auto; }

/* ---- Hinweis bei der SEPA-Lastschrift (Resources/views/checkout/sepa-hint.twig) ---- */
/* Steht unter der Karte "Zahlungsart"; das Skript der Vorlage setzt ihn in die Lastschrift-Zeile (dann --inline). */
.nh-sepa-hint {
    display: block; margin: -8px 0 24px; padding: 10px 14px;
    border: 1px solid rgba(138, 75, 0, .22); border-radius: var(--nh-radius-sm, 12px);
    background: var(--nh-warning-tint, #fff4dc); color: var(--nh-warning-ink, #8a4b00);
    font-size: .875rem; line-height: 1.5; text-align: left; cursor: default;
}
.nh-sepa-hint__title { display: block; margin-bottom: 2px; }
/* Die Zeile der Zahlungsart ist ein einzeiliges Flex-Element: mit Hinweis darf sie umbrechen, der Hinweis nimmt die volle Breite. */
body.page-checkout-cart .payment-method-selection .custom-control:has(> .nh-sepa-hint--inline) { flex-wrap: wrap; }
.nh-sepa-hint--inline { flex: 1 1 100%; width: 100%; margin: 10px 0 2px; }