/* =========================================================================
 * Vlarom Checkout Flow - checkout.css
 * Single-Page-Checkout im SALEPIX/Shopify-Stil fuer JTL-Shop (NOVAChild, BS5)
 * Referenz: devtech.salepix.com/Bestellvorgang
 * Greift NUR auf body.is-checkout. checkout_custom.css laedt automatisch danach.
 * ========================================================================= */
.vcf-checkout {
    --vcf-bg:            #ffffff;
    --vcf-aside-bg:      #f7f7f7;
    --vcf-border:        #e3e3e3;
    --vcf-border-strong: #cfcfcf;
    --vcf-text:          #333333;
    --vcf-muted:         #767676;
    --vcf-heading:       #222222;
    --vcf-accent:        #1a6fb5;
    --vcf-accent-hover:  #155c96;
    --vcf-field-border:  #bfbfbf;
    --vcf-radius:        4px;
    --vcf-maxwidth:      1180px;
    --vcf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--vcf-text);
    font-family: var(--vcf-font);
}

/* ===== 1. Shop-Chrome ausblenden ===== */
body.is-checkout #jtl-nav-wrapper,
body.is-checkout .breadcrumb,
body.is-checkout footer,
body.is-checkout .footer,
body.is-checkout [role="contentinfo"] { display: none !important; }
body.is-checkout #main-wrapper { margin-top: 0 !important; padding-top: 0 !important; }
body.is-checkout { background: var(--vcf-bg); }

/* ===== 2. Header: Logo zentriert, duenne Linie ===== */
.vcf-minihead { border-bottom: 1px solid var(--vcf-border); background: var(--vcf-bg); width: 100%; }
.vcf-minihead-inner { max-width: var(--vcf-maxwidth); margin: 0 auto; padding: 22px 20px; text-align: center; }
.vcf-minihead-logo { display: inline-block; }
.vcf-minihead-logo img { max-height: 46px; width: auto; }
.vcf-minihead-logo-text { font-size: 1.5rem; font-weight: 700; color: var(--vcf-heading); text-decoration: none; }

/* ===== 3. Grid 58/42 (Formular breiter), schlankes Padding ===== */
.vcf-checkout #checkout { max-width: var(--vcf-maxwidth); margin: 0 auto; padding: 0; }
.vcf-grid { display: grid; grid-template-columns: 58% 42%; align-items: start; position: relative; }
.vcf-main  { padding: 34px 48px 60px 12px; min-width: 0; order: 1; }
.vcf-aside { padding: 34px 12px 60px 40px; background: var(--vcf-aside-bg); border-left: 1px solid var(--vcf-border); min-width: 0; order: 2; align-self: stretch; }
.vcf-aside::before { content: ""; position: absolute; top: 0; bottom: 0; right: -100vw; width: 100vw; background: var(--vcf-aside-bg); border-left: 1px solid var(--vcf-border); z-index: -1; }
.vcf-aside-sticky { position: sticky; top: 30px; }

/* ===== 4. Formularfelder: VOLLE Breite, sauberer Rahmen ===== */
.vcf-main .form-control,
.vcf-main .custom-select,
.vcf-main select.form-control,
.vcf-main input[type="text"],
.vcf-main input[type="email"],
.vcf-main input[type="tel"],
.vcf-main input[type="date"],
.vcf-main input[type="password"] {
    width: 100% !important;
    border: 1px solid var(--vcf-field-border);
    border-radius: var(--vcf-radius);
    padding: 12px 12px; height: auto; font-size: .95rem; color: var(--vcf-text);
    box-shadow: none; background-color: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.vcf-main .form-control:focus,
.vcf-main .custom-select:focus { border-color: var(--vcf-accent); box-shadow: 0 0 0 2px rgba(26,111,181,.18); outline: none; }
.vcf-main label { font-size: .8rem; color: var(--vcf-muted); margin-bottom: 4px; font-weight: 400; }
/* Bootstrap-Grid-Gutter der JTL-Formularzeilen normalisieren, damit Felder nicht zerquetschen */
.vcf-main .form-row, .vcf-main .row { margin-right: -8px; margin-left: -8px; row-gap: 14px; }
.vcf-main .form-row > [class*="col"], .vcf-main .row > [class*="col"] { padding-right: 8px; padding-left: 8px; }
.vcf-main .form-group { margin-bottom: 16px; }

/* Ueberschriften wie Referenz (Grossbuchstaben, dezent) */
.vcf-main h1, .vcf-main h2, .vcf-main h3, .vcf-main legend, .vcf-main .checkout-heading {
    color: var(--vcf-heading); font-weight: 600; font-size: .95rem; letter-spacing: .04em;
    text-transform: uppercase; margin: 26px 0 16px;
}
.vcf-main h1 { font-size: 1.05rem; }

/* ===== 5. Primaerbutton ===== */
.vcf-main .btn-primary,
.vcf-main button[type="submit"].btn-primary {
    background: var(--vcf-accent); border-color: var(--vcf-accent);
    border-radius: var(--vcf-radius); padding: 14px 26px; font-size: 1rem; font-weight: 500; box-shadow: none;
}
.vcf-main .btn-primary:hover { background: var(--vcf-accent-hover); border-color: var(--vcf-accent-hover); }
.vcf-main a, .vcf-main .btn-link { color: var(--vcf-accent); }

/* ===== 6. Order-Summary rechts ===== */
.vcf-aside .checkout-items-header { display: none !important; }
.vcf-aside .checkout-items-item { border-bottom: 1px solid var(--vcf-border); padding: 14px 0; align-items: center; }
.vcf-aside .checkout-items-item-image-wrapper img { border: 1px solid var(--vcf-border-strong); border-radius: var(--vcf-radius); background: #fff; }
.vcf-aside .price.total-sum, .vcf-aside .total-sum { font-size: 1.5rem; font-weight: 700; color: var(--vcf-heading); }
.vcf-aside .row.tax .price, .vcf-aside .text-muted-util { color: var(--vcf-muted); }
.vcf-aside input[name="fake"], .vcf-aside .input.d-none { display: none !important; }
.vcf-aside .btn-primary { background: var(--vcf-accent); border-color: var(--vcf-accent); border-radius: var(--vcf-radius); padding: 14px; font-weight: 500; width: 100%; }

/* ===== 7. Express-Pay-Slot ===== */
.vcf-express { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--vcf-border); }
.vcf-express-title { text-align: center; color: var(--vcf-muted); font-size: .82rem; margin: 16px 0; position: relative; }
.vcf-express-title::before, .vcf-express-title::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--vcf-border); }
.vcf-express-title::before { left: 0; } .vcf-express-title::after { right: 0; }

/* ===== 8. Responsive < 900px: einspaltig, Summary zuerst ===== */
@media (max-width: 900px) {
    .vcf-grid { grid-template-columns: 1fr; }
    .vcf-main  { order: 2; padding: 24px 16px 48px; }
    .vcf-aside { order: 1; padding: 20px 16px; border-left: 0; border-bottom: 1px solid var(--vcf-border); }
    .vcf-aside::before { display: none; }
    .vcf-aside-sticky { position: static; }
}

/* ===== 9. step0 Override: Login-Aufklapp + Label ueber Feld ===== */
.vcf-login { border: 1px solid var(--vcf-border); border-radius: var(--vcf-radius); background: #fbfbfb; padding: 12px 16px; margin: 0 0 24px; }
.vcf-login-line { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; color: var(--vcf-muted); }
.vcf-login-toggle { font-weight: 500; color: var(--vcf-accent); text-decoration: none; }
.vcf-login-toggle:hover { text-decoration: underline; }
.vcf-login-box { margin-top: 14px; }

/* NOVA {formrow} rendert: div.row > [col-md-4 (Sektions-Label 'Name/Rechnungsadresse')]
   + [col-md-8 (Felder)]. Fuer Shopify-Look: beide Spalten volle Breite -> Label ueber Feldern. */
.vcf-main .customer-shipping-address.row > .col-md-4,
.vcf-main .customer-shipping-address.row > .col-md-8,
.vcf-main .register-form-account.row > .col-md-4,
.vcf-main .register-form-account.row > .col-md-8,
.vcf-main form .row > .col.col-md-4,
.vcf-main form .row > .col.col-md-8 {
    flex: 0 0 100% !important; max-width: 100% !important;
}
/* Sektions-Label (das .h3 in der ehemaligen col-md-4) als schlichte Ueberschrift darueber */
.vcf-main .col-md-4 > .h3,
.vcf-main .col-md-4 > .card-title {
    font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--vcf-heading); margin: 8px 0 6px;
}

/* Innerhalb der Feld-Spalte behalten Paare (Vorname|Nachname, PLZ|Ort) ihre 6/6-Teilung,
   aber mit genug Breite (kein Abschneiden mehr, da Gesamtbreite jetzt voll). */
.vcf-main form .row .row > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
.vcf-main form .row .row > .col-md-8 { flex: 0 0 66%; max-width: 66%; }
.vcf-main form .row .row > .col-md-4 { flex: 0 0 34%; max-width: 34%; }

/* Submit-Button volle Breite wie Referenz */
.vcf-main .checkout-button-row .btn { width: 100%; }

/* ===== 10. Sidebar-Produkt kompakt (nur Name, Variante, Menge, Preis) ===== */
/* Ueberfluessige Detailzeilen ausblenden wie Referenz (nur Groesse/Farbe behalten) */
.vcf-aside .checkout-items-item-main ul li.sku,
.vcf-aside .checkout-items-item-main ul li.manufacturer,
.vcf-aside .checkout-items-item-main ul li.characteristic,
.vcf-aside .checkout-items-item-main ul li.shortdescription,
.vcf-aside .checkout-items-item-main ul li.weight,
.vcf-aside .checkout-items-item-main ul li.baseprice,
.vcf-aside .checkout-items-item-main ul li.delivery-status,
.vcf-aside .checkout-items-item-main ul li.best-before { display: none !important; }
.vcf-aside .checkout-items-item-main ul li.variation { font-size: .8rem; color: var(--vcf-muted); }
.vcf-aside .checkout-items-item-main p { font-weight: 500; color: var(--vcf-heading); margin-bottom: 4px; }
/* Produktbild sichtbar + Mengen-Badge-artig, kompakter Thumbnail */
.vcf-aside .checkout-items-item-image-wrapper { max-width: 64px; }
.vcf-aside .checkout-items-item-image-wrapper img { width: 64px; height: 64px; object-fit: contain; }

/* ===== 11. Step 2: Versandart + Zahlungsart als saubere Karten-Zeilen ===== */
/* Ueberschriften */
.vcf-main .checkout-shipping-form .h2,
.vcf-main #checkout-shipping-payment .h2 {
    font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--vcf-heading); margin: 24px 0 14px;
}
.vcf-main .checkout-shipping-form-change {
    font-size: .85rem; color: var(--vcf-muted); margin-bottom: 8px;
}

/* Versandart-Zeilen: {formrow} rendert label.custom-control-label > .form-row.content
   mit col-sm-5 (Titel) / col-sm-3 (Info) / Rest (Preis). Als Karte, nicht quetschen. */
.vcf-main .radio-w-100 { width: 100%; }
.vcf-main .radio-w-100 .custom-control.custom-radio {
    width: 100%; padding: 0; margin-bottom: 10px;
}
.vcf-main .radio-w-100 .custom-control-label {
    display: block; width: 100%; cursor: pointer;
}
.vcf-main .radio-w-100 .custom-control-label::before,
.vcf-main .radio-w-100 .custom-control-label::after {
    top: 50%; transform: translateY(-50%); left: 16px;
}
.vcf-main .form-row.content {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
    margin: 0; padding: 16px 16px 16px 48px;
    border: 1px solid var(--vcf-border); border-radius: var(--vcf-radius);
    background: #fff;
}
.vcf-main .form-row.content > [class*="col"] { padding: 0; }
.vcf-main .form-row.content > .title { flex: 1 1 auto; font-weight: 500; }
.vcf-main .form-row.content > .col-sm-3 { flex: 0 0 auto; text-align: left; color: var(--vcf-muted); }
.vcf-main .custom-control-input:checked ~ .custom-control-label .form-row.content {
    border-color: var(--vcf-accent); box-shadow: 0 0 0 1px var(--vcf-accent);
}

/* Zahlungsart-Zeilen: als Karten untereinander */
.vcf-main .checkout-payment-method {
    border: 1px solid var(--vcf-border); border-radius: var(--vcf-radius);
    padding: 14px 16px; margin-bottom: 10px; background: #fff;
    display: flex; align-items: center; gap: 12px;
}
.vcf-main .checkout-payment-method .title { font-weight: 500; }
.vcf-main .checkout-payment-method img.img-sm { max-height: 28px; width: auto; }
.vcf-main .checkout-payment-method-badge { margin-left: auto; color: var(--vcf-muted); }
.vcf-main .checkout-payment-method-note { display: block; width: 100%; color: var(--vcf-muted); }

/* Kommentar-Feld */
.vcf-main textarea.form-control { width: 100% !important; min-height: 90px; border-radius: var(--vcf-radius); border-color: var(--vcf-field-border); }

/* ===== 12. Step 2: Wrapper volle Breite + Button-Zeile konsistent ===== */
/* step3 nutzt col lg=9 -> auf volle Breite */
.vcf-main #checkout-shipping-payment,
.vcf-main .checkout-shipping-form { width: 100%; }
.vcf-main > form > .row > .col-lg-9,
.vcf-main .row > .col-lg-9 { flex: 0 0 100%; max-width: 100%; }

/* Preis-Spalte der Versandart rechtsbuendig */
.vcf-main .form-row.content > .price-col { margin-left: auto; text-align: right; font-weight: 600; }

/* Button-Zeile: Weiter (primary) volle Breite oben, Zurueck darunter dezent */
.vcf-main .checkout-button-row { display: block; }
.vcf-main .checkout-button-row > [class*="col"] { max-width: 100%; flex: 0 0 100%; padding: 0; }
.vcf-main .checkout-button-row .btn-primary { width: 100%; margin-bottom: 10px; }
.vcf-main .checkout-button-row .btn-primary.d-none { display: block !important; }
.vcf-main .checkout-button-row .btn:not(.btn-primary) {
    width: 100%; background: transparent; border-color: var(--vcf-border-strong); color: var(--vcf-accent);
}

/* ===== 13. Step 3 (Bestaetigung/step5): kompakt + aufgeraeumt ===== */
/* Zusammenfassungs-Karten (Adresse / Versand+Zahlung) */
.vcf-main .checkout-confirmation .card,
.vcf-main [class*='confirmation'] .card { border: 1px solid var(--vcf-border); border-radius: var(--vcf-radius); }

/* Untere Bestaetigungs-Artikeltabelle: Detailzeilen ausblenden (wie Sidebar), kompakt.
   Robust: ALLE Detailzeilen ausser Variation ausblenden (deckt auch Set-/Stuecklisten-
   Komponenten ab, die andere/keine Klassen haben). */
.vcf-main .checkout-items-item-main ul li:not(.variation),
.vcf-aside .checkout-items-item-main ul li:not(.variation) { display: none !important; }
.vcf-main .checkout-items-item-main ul li.variation,
.vcf-aside .checkout-items-item-main ul li.variation { font-size: .82rem; color: var(--vcf-muted); display: list-item !important; }

/* Spaltenkopf "Anzahl" nicht umbrechen */
.vcf-main .checkout-items-header,
.vcf-main .checkout-items [class*="col"] { white-space: nowrap; }
.vcf-main .checkout-items-header .amount,
.vcf-main .checkout-items-header [class*="amount"] { min-width: 3.5rem; }

/* Grosse Leerraeume der 2-Spalten-Zusammenfassung reduzieren */
.vcf-main .checkout-confirmation .row { margin-bottom: 0; }
.vcf-main hr { margin: 18px 0; border-color: var(--vcf-border); }

/* Finaler Bestell-Button prominent (falls nicht in Sidebar) */
.vcf-main .checkout-button-row .btn-primary,
.vcf-main #order-confirmation-button,
.vcf-main button[name="abschluss"] { width: 100%; padding: 16px; font-size: 1.05rem; }

/* AGB-Zeile dezent hervorheben */
.vcf-main .checkbox, .vcf-main .agb-checkbox { font-size: .9rem; color: var(--vcf-text); }

/* ===== 14. Step 3 Feinschliff: Leerraeume straffen ===== */
/* Grosse vertikale Luecken der Confirmation-Rows reduzieren */
.vcf-main #order-confirm .row.row-eq-height,
.vcf-main .checkout-confirmation .row { margin-bottom: 12px !important; }
.vcf-main .checkout-confirmation .card { margin-bottom: 12px; }
/* AGB/Legal-Notice kompakter */
.vcf-main .checkout-confirmation-legal-notice { margin: 8px 0; font-size: .88rem; color: var(--vcf-muted); }
.vcf-main .order-submit .card-gray.card-products { display: none; }
/* Button-Zeile volle Breite (schon in 12/13 gesetzt) - hier Abstand oben */
.vcf-main .order-submit .checkout-button-row { margin-top: 8px; }

/* ===== 15. Mobile-Fixes (<= 900px) ===== */
@media (max-width: 900px) {
    /* Bootstrap .row negative Margins in der Sidebar aufheben -> kein randloses Kleben */
    .vcf-aside .row { margin-left: 0; margin-right: 0; }
    .vcf-aside .checkout-items-total-wrapper,
    .vcf-aside .checkout-summary,
    .vcf-aside [class*="checkout-items"] { padding-left: 0; padding-right: 0; }
    /* Produktbild sauber rahmen (mobil groesser + zentriert) */
    .vcf-aside .checkout-items-item-image-wrapper { max-width: 72px; }
    .vcf-aside .checkout-items-item-image-wrapper img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--vcf-border); border-radius: var(--vcf-radius); background: #fff; }
    /* Header-Logo mobil etwas kleiner */
    .vcf-minihead-inner { padding: 16px; }
    .vcf-minihead-logo img { max-height: 38px; }
    /* Formular-Feldpaare (Vorname|Nachname etc.) auf Mobile untereinander -> mehr Platz */
    .vcf-main form .row .row > .col-md-6,
    .vcf-main form .row .row > .col-md-8,
    .vcf-main form .row .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; }
    /* Step2 Karten mobil: Inhalt umbrechen erlauben */
    .vcf-main .form-row.content { flex-wrap: wrap; }
    .vcf-main .checkout-payment-method { flex-wrap: wrap; }
}

/* ===== 16. Step 3: Zusammenfassung untereinander + Kommentar voll + Buttons ===== */
/* Die zwei Karten (Adresse / Versand+Zahlung) + Kommentar liegen in .row.row-eq-height
   als col-md-6 -> alle auf VOLLE Breite, damit sie UNTEREINANDER statt nebeneinander stehen. */
.vcf-main #order-confirm .row.row-eq-height > [class*="col"],
.vcf-main .checkout-confirmation .row.row-eq-height > [class*="col"],
.vcf-main .checkout-confirmation > .row > [class*="col"] {
    flex: 0 0 100% !important; max-width: 100% !important;
}
.vcf-main .row.row-eq-height { display: block; }
/* leere Spalten (Coupon ohne Inhalt) ausblenden */
.vcf-main .checkout-confirmation .col-md-6:empty { display: none; }

/* Button-Zeile: order-Klassen + ml-auto-util neutralisieren -> Weiter oben, Zurueck darunter,
   beide volle Breite, kein Verrutschen. */
.vcf-main .checkout-button-row { display: flex !important; flex-direction: column; }
.vcf-main .checkout-button-row > [class*="col"] {
    flex: 0 0 100% !important; max-width: 100% !important; padding: 0; margin: 0 !important;
}
.vcf-main .checkout-button-row > .order-md-2 { order: 1 !important; }
.vcf-main .checkout-button-row > .order-md-1 { order: 2 !important; }
.vcf-main .checkout-button-row .btn-primary { width: 100%; margin-bottom: 10px; }
.vcf-main .checkout-button-row .btn:not(.btn-primary) { width: 100%; }