/* BioBalkan – Überprüfen-Seite (German Market Second-Checkout) v1.2
   2-spaltiges Layout wie die Kassenseite. Links Anzeige-Boxen (alle offen),
   rechts Summenbox + finaler Bestell-Button.
   Wird nur auf der Bestellung-absenden-Seite geladen.
   Setzt das Markup voraus, das bb_render_second_checkout() erzeugt.
   v1.2: Bestell-Button "Zahlungspflichtig bestellen" wieder schwarz
         (var(--bb-text)) – Gelb-Variante aus v1.1 zurückgenommen.
   v1.3: Bestellhinweis-Block (.bb-sc-addr-block--note) unten in der 1. Box. */

/* ==========================================================================
   TOKENS – an globale :root-Variablen gebunden (analog .bb-checkout-page)
   ========================================================================== */
.bb-second-checkout {
  --bb-text:     var(--color-body);
  --bb-white:    var(--color-white);
  --bb-field-bg: var(--color-grey);
  --bb-green:    var(--color-green);
  --bb-red:      var(--color-red);
  --bb-badge:    var(--color-body);
  --bb-border:   #eee;
  --bb-muted:    #777;
  --bb-shadow:   0 0 20px -10px rgba(0, 0, 0, .3);
  --bb-fs:        var(--fs-p);
  --bb-fs-h4:     var(--fs-h4);
  --bb-fs-small:  var(--fs-small);
  --bb-fs-button: var(--fs-button);
  --bb-lh:        var(--lh-p);
  --bb-lh-h4:     var(--lh-h4);
  --bb-lh-button: var(--lh-button);
}

/* #content { overflow:hidden } global bricht position:sticky → wie Kasse lösen */
.bb-second-checkout-page #content {
  overflow: visible !important;
  overflow-x: clip !important;
}

/* ==========================================================================
   LAYOUT 70/30
   ========================================================================== */
.bb-second-checkout .bb-checkout-layout {
  display: grid !important;
  grid-template-columns: 70fr 30fr !important;
  gap: 32px !important;
  align-items: start !important;
}

/* #order_review erbt sonst globale Box-Optik (Rahmen/Shadow/Padding) und
   erzeugt eine zweite Box in der Box. Wie auf der Kasse vollständig neutralisieren –
   nur die äußere .bb-checkout-section bleibt die Box. */
.bb-second-checkout #order_review,
.bb-second-checkout .woocommerce-checkout-review-order,
.bb-second-checkout .bb-order-review,
.bb-second-checkout .bb-order-review__products,
.bb-second-checkout .bb-order-review__totals {
  float: none !important;
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
/* Summenzeilen: Abstand identisch zur Kasse (14px, luftig) */
.bb-second-checkout .bb-order-review__totals {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
/* Zeilenhöhe identisch zur Kasse (30px). Ohne diese Angabe sind die Zeilen auf
   der Überprüfen-Seite flacher (line-height ~ Schriftgröße) und wirken gedrängt,
   obwohl gap/margin gleich sind. */
.bb-second-checkout .bb-order-review__totals .bb-order-review__row,
.bb-second-checkout .bb-order-review__totals .bb-order-review__label,
.bb-second-checkout .bb-order-review__totals .bb-order-review__value,
.bb-second-checkout .bb-order-review__shipping-by,
.bb-second-checkout .bb-order-review__tax-line {
  line-height: 30px !important;
}
.bb-second-checkout #order_review,
.bb-second-checkout .woocommerce-checkout-review-order,
.bb-second-checkout .bb-order-review {
  margin: 0 !important;
  padding: 0 !important;
}
/* Trennlinie Produkte/Summen wie auf der Kasse beibehalten */
.bb-second-checkout .bb-order-review__products {
  border-bottom: 1px solid var(--bb-border) !important;
}

.bb-second-checkout .bb-checkout-sidebar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 244px !important;
  align-self: start !important;
}

/* Produktanzahl als gelbe runde Badge neben "Ihr Einkauf" – identisch zur
   Warenkorb-Badge im Header. Überschrift + Badge vertikal zentriert. */
#bb-section-order-review .bb-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bb-order-review__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(255, 240, 100);
  color: rgb(43, 37, 37);
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 1024px) {
  .bb-second-checkout .bb-checkout-layout {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .bb-second-checkout .bb-checkout-sidebar { position: static !important; }
}

@media (max-width: 768px) {
  .bb-second-checkout .bb-checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .bb-second-checkout .bb-checkout-main    { order: 1 !important; }
  .bb-second-checkout .bb-checkout-sidebar { order: 2 !important; }
}

/* ==========================================================================
   SECTION-BOXEN (identisch zur Kasse, aber dauerhaft offen)
   ========================================================================== */
.bb-second-checkout .bb-checkout-section {
  background: var(--bb-white);
  border: 2px solid transparent;
  border-radius: 24px;
  box-shadow: var(--bb-shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.bb-second-checkout .bb-checkout-section:last-child { margin-bottom: 0; }

/* Header (statt klickbarem Toggle – alle Boxen offen) */
.bb-second-checkout .bb-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--bb-border);
}

.bb-second-checkout .bb-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--bb-fs-h4);
  font-weight: normal;
  line-height: var(--bb-lh-h4);
  color: var(--bb-text);
}

.bb-second-checkout .bb-section-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bb-badge);
  color: var(--bb-white);
  font-size: var(--bb-fs-h4);
  font-weight: normal;
  flex-shrink: 0;
}

.bb-second-checkout .bb-section-body {
  padding: 24px;
}

/* ==========================================================================
   ADRESS-ANZEIGE (Rechnungs-/Liefer-Sichtfenster + Kontaktblöcke)
   ========================================================================== */
.bb-sc-address {
  font-size: var(--bb-fs);
  line-height: var(--bb-lh);
  color: var(--bb-text);
}

/* Rechnungs- + Lieferadresse nebeneinander (50/50) */
.bb-sc-addr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
  /* Mehr Abstand (>= 1em) zwischen den Adressboxen und dem Kontaktbereich */
  margin-bottom: calc(18px + 1em);
}
/* Ohne Versand nur Rechnungsadresse -> volle Breite */
.bb-sc-addr-cols--single {
  grid-template-columns: 1fr;
}

.bb-sc-addr-block { margin: 0; }

/* Überschrift sitzt AUSSERHALB über der grauen Box */
.bb-sc-addr__head {
  display: block;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--bb-text);
}

/* Graues "Sichtfenster" (nur Rechnungs- + Lieferadresse) */
.bb-sc-addr__window {
  background: var(--color-grey, #f1f1f1);
  border-radius: 24px;
  padding: 20px 24px;
}

/* Kontaktbereich: enger Abstand Überschrift -> Wert */
.bb-sc-addr-block--contact .bb-sc-addr__head {
  margin-top: 4px;
  margin-bottom: 2px;
}
/* Mehr Luft zwischen Kontaktdetails und UID-Nummer */
.bb-sc-addr-block--contact + .bb-sc-addr-block--contact {
  margin-top: 22px;
}

.bb-sc-addr__line {
  display: block;
  line-height: var(--bb-lh);
  color: var(--bb-text);
}

/* Smartphone: alles 1-spaltig untereinander */
@media (max-width: 767px) {
  .bb-sc-addr-cols {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ==========================================================================
   VERSAND- & ZAHLUNGS-ANZEIGE
   ========================================================================== */
.bb-sc-static {
  font-size: var(--bb-fs);
  line-height: var(--bb-lh);
  color: var(--bb-text);
}
.bb-sc-static strong { font-weight: 700; }
.bb-sc-static .bb-sc-static__sub {
  display: block;
  margin-top: 4px;
  font-size: var(--bb-fs-small);
  color: var(--bb-muted);
}

/* ==========================================================================
   LEGAL & NEWSLETTER BOX
   ========================================================================== */
.bb-sc-legal .form-row {
  margin: 0 !important;
  padding: 0 !important;
}
/* Abstand zwischen AGB- und Newsletter-Zeile – ultra-spezifisch. */
.bb-second-checkout .bb-sc-legal p.german-market-checkbox-p.form-row {
  margin-top: 12px !important;
}
.bb-second-checkout .bb-sc-legal p.form-row.validate-required {
  margin-bottom: 12px !important;
}

.bb-sc-legal label.checkbox,
.bb-sc-legal .woocommerce-form__label-for-checkbox {
  display: block !important;
  position: relative !important;
  padding-left: 28px !important;   /* Platz für die Checkbox */
  cursor: pointer;
  font-size: var(--bb-fs);
  line-height: var(--bb-lh);
  color: var(--bb-text);
}
/* Checkbox: links fixiert, Text fließt rechts daneben (auch mehrzeilig bündig) */
.bb-sc-legal label.checkbox > input[type="checkbox"],
.bb-sc-legal .woocommerce-form__label-for-checkbox > input[type="checkbox"] {
  position: absolute !important;
  left: 0 !important;
  top: 0.2em !important;
  float: none !important;
  margin: 0 !important;
}
/* Text fließt als Inline – Sternchen (abbr) klebt direkt am Satzende */
.bb-sc-legal .woocommerce-terms-and-conditions-checkbox-text,
.bb-sc-legal .german-market-custom-checkbox-text {
  display: inline !important;
  font-size: var(--bb-fs);
  line-height: var(--bb-lh);
  color: var(--bb-text);
}

.bb-sc-legal a {
  color: var(--bb-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bb-sc-legal abbr.required {
  border: none;
  color: var(--bb-red);
  text-decoration: none;
  margin-left: 2px;
}

/* AGB-Volltext-Box (GM gibt sie versteckt aus – ausgeblendet lassen) */
.bb-sc-legal .woocommerce-terms-and-conditions {
  margin-top: 12px;
  border: 1px solid var(--bb-border);
  border-radius: 16px;
  padding: 16px;
}

/* ==========================================================================
   RECHTE SUMMENBOX – nutzt die .bb-order-review__* Styles aus checkout.css.
   Hier nur Ergänzungen, die sonst auf der Kasse vom Sidebar-Kontext kommen.
   ========================================================================== */
.bb-second-checkout .bb-order-review-section .bb-section-header {
  border-bottom: 1px solid var(--bb-border);
}

/* finaler Bestell-Button (GM #place_order) im CTA-Stil der Kasse – schwarz */
.bb-second-checkout .bb-order-review__cta { margin-top: 4px; }

.bb-second-checkout #place_order,
.bb-second-checkout .bb-order-review__cta-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--bb-text);
  color: var(--bb-white);
  border: 1px solid var(--bb-text);
  border-radius: 60px;
  font-size: var(--bb-fs-button);
  line-height: var(--bb-lh-button);
  cursor: pointer;
  text-align: center;
  padding:
    clamp(var(--pad-y-min)*1px, var(--pad-y-fluid), var(--pad-y-max)*1px)
    clamp(var(--pad-x-min)*1px, var(--pad-x-fluid), var(--pad-x-max)*1px);
  transition: opacity .2s ease;
}
.bb-second-checkout #place_order:hover { opacity: .85; }

/* Bestell-Button "Zahlungspflichtig bestellen" exakt so hoch wie der
   Kassen-Button (.bb-order-review__cta-btn): identisches clamp-Padding, kein
   Border-Farbwechsel. white-space:nowrap + height:auto verhindern, dass der
   Text (als flex-Item) zweizeilig umbricht und den Button doppelt hoch macht.
   Greift auf allen Viewports (Desktop wie Smartphone) gleich. */
.bb-second-checkout input.wgm-place-order,
.bb-second-checkout .checkout-button.wgm-place-order {
  background: var(--bb-text) !important;
  color: var(--bb-white) !important;
  border: 1px solid var(--bb-text) !important;
  padding: clamp(14px, 3vw, 18px) clamp(20px, 3vw, 24px) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  height: auto !important;
}
.bb-second-checkout #place_order.please-wait {
  opacity: .65;
  cursor: not-allowed;
}

/* Zurück-Link als dezenter Sekundär-Button unter dem Bestell-Button */
.bb-second-checkout .bb-sc-back {
  display: block;
  margin-top: 12px;
  text-decoration: none;
}
.bb-second-checkout #place_order_back,
.bb-second-checkout .bb-sc-back__btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  color: var(--bb-text);
  border: 1px solid var(--bb-text);
  border-radius: 60px;
  font-size: var(--bb-fs-button);
  line-height: var(--bb-lh-button);
  cursor: pointer;
  text-align: center;
  /* Gleiche Gesamthöhe wie der Kassen-/Bestell-Button: deren Padding ist
     clamp(14px,3vw,18px) ohne Border. Dieser Button hat einen 1px-Outline-Rand
     (gewollt), daher Padding um je 1px reduziert, damit Border+Padding identisch
     hoch sind. */
  padding:
    calc(clamp(14px, 3vw, 18px) - 1px)
    clamp(20px, 3vw, 24px) !important;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.bb-second-checkout #place_order_back:hover,
.bb-second-checkout .bb-sc-back__btn:hover { opacity: .7; }

/* WooCommerce form-row: kein padding/margin (wie gewünscht) */
.bb-second-checkout.woocommerce form .form-row,
.bb-second-checkout .woocommerce form .form-row,
body.woocommerce.bb-second-checkout form .form-row {
  margin: 0 !important;
  padding: 0 !important;
}

/* Mehr Abstand zwischen Produktname / Variation / Stückzahl (nur Überprüfen-Seite) */
.bb-second-checkout .bb-order-review__item-details {
  gap: 0px !important;
}
.bb-second-checkout .bb-order-review__item-meta {
  gap: 0px !important;
}

/* MwSt-Zeile: direkt unter "Gesamt" (0px Abstand) – identisch zur Kasse */
.bb-second-checkout .bb-order-review__tax-line {
  margin-top: -14px !important;
}

/* "via …"-Zeile direkt unter "Versand" (0px Abstand) – identisch zur Kasse */
.bb-second-checkout .bb-order-review__shipping-label--inline {
  margin-top: -14px !important;
}

/* Aufeinanderfolgende Rabatt-/Guthaben-Zeilen enger gruppieren (~4px statt 14px gap) –
   identisch zur Kasse. */
.bb-second-checkout .bb-order-review__discount + .bb-order-review__discount,
.bb-second-checkout .bb-order-review__discount + .bb-order-review__giftcard-line,
.bb-second-checkout .bb-order-review__giftcard-line + .bb-order-review__discount,
.bb-second-checkout .bb-order-review__giftcard-line + .bb-order-review__giftcard-line {
  margin-top: -10px !important;
}

/* Label-Zeilenhöhe in Formularzeilen */
.bb-second-checkout.woocommerce form .form-row label,
.bb-second-checkout .woocommerce form .form-row label {
  line-height: 1;
}

/* AGB-Pflichthinweis (clientseitig, bleibt auf der Seite) */
.bb-second-checkout .bb-terms-error {
  display: block;
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--bb-red);
  font-size: var(--bb-fs-small);
  line-height: var(--bb-lh);
}
.bb-second-checkout .bb-terms-required .woocommerce-terms-and-conditions-checkbox-text {
  color: var(--bb-red);
}

/* Responsive */
@media (max-width: 600px) {
  .bb-second-checkout .bb-section-body { padding: 18px !important; }
  .bb-second-checkout .bb-section-header { padding: 16px 18px !important; }
}
/* ==========================================================================
   BALKANPOST-ABO-CHECKBOX (Box 4, unter der AGB-Checkbox)
   Erbt das Grund-Styling der WooCommerce/German-Market-Checkbox; hier nur
   ein kleiner Abstand zur darüberliegenden AGB-Zeile.
   ========================================================================== */
.bb-balkanpost-row {
  margin-top: 8px;
}
/* Zeilenhöhe identisch zum AGB-Text (relativ, ~1.5). Funktioniert sowohl
   einzeilig (Desktop, vertikal zentriert zur Checkbox) als auch mehrzeilig
   (Smartphone, gleicher Zeilenabstand wie die AGB-Zeile). */
.bb-balkanpost-text {
  line-height: 1.5;
}
/* v1.3 – Bestellhinweis-Block unten in der 1. Box (nur wenn Text vorhanden).
   Optik wie der Kontaktbereich: Headline + Text darunter, mit Luft nach oben. */
.bb-sc-addr-block--note {
  margin-top: 22px;
}
.bb-sc-addr-block--note .bb-sc-addr__head {
  margin-top: 4px;
  margin-bottom: 2px;
}
.bb-sc-note-text {
  white-space: pre-line;
}