/* ============================================================
   BioBalkan – Thankyou Page Styles  (v5.5)
   v5.5: - Detail-Zeilen: feste 42/58-Spalte (mobil 46/54), alle Werte
           starten bündig auf einer vertikalen Linie; line-height 1.35.
         - Lange Werte (E-Mail/Links) brechen sauber um statt abgeschnitten.
         - Abstand Detail-Block -> Box-Unterkante 24px -> 12px.
   ============================================================ */

.bb-thankyou-page {
  width: 100% !important;
}

/* Layout 60/40 */
.bb-thankyou-layout {
  display: grid !important;
  grid-template-columns: 60fr 40fr !important;
  gap: 32px !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  .bb-thankyou-layout { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .bb-thankyou-layout { grid-template-columns: 1fr !important; }
  /* Mobile Reihenfolge: zuerst Bestelldetails + Bankverbindung (main),
     danach Warenkorb (sidebar) – natürliche DOM-Reihenfolge beibehalten. */
  .bb-thankyou-main    { order: 0 !important; }
  .bb-thankyou-sidebar { order: 1 !important; }
  /* v5.5: etwas breitere Label-Spalte, damit die meisten Bezeichnungen
     einzeilig bleiben (sonst zu enge Umbrueche auf schmalen Geraeten). */
  .bb-thankyou-label {
    flex-basis: 46% !important;
    width: 46% !important;
  }
  .bb-thankyou-value {
    flex-basis: 54% !important;
    width: 54% !important;
    max-width: 54% !important;
  }
}

/* Box – kein padding-top, Toggle/Titel bringt es mit */
.bb-thankyou-box {
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
  padding: 0 28px 28px 28px !important;
  margin-bottom: 16px !important;
  border: 2px solid transparent !important;
  transition: border-color .2s ease !important;
}
.bb-thankyou-box:hover {
  border-color: var(--color-yellow, #FFF064) !important;
}
/* Aktive (aufgeklappte) Box: gelber Focus-Border – analog zur Mein-Konto-Seite.
   Steht NACH der transparent-Basisregel (die !important nutzt), daher ebenfalls
   mit !important, damit sie gewinnt. */
.bb-thankyou-box:has(.bb-thankyou-toggle[aria-expanded="true"]) {
  border-color: var(--color-yellow, #FFF064) !important;
}
.bb-thankyou-box:last-child { margin-bottom: 0 !important; }

/* Toggle Button */
.bb-thankyou-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 20px 0 16px 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #eee !important;
  cursor: pointer !important;
  margin-bottom: 20px !important;
  gap: 12px !important;
}
.bb-thankyou-toggle[aria-expanded="false"] {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 20px !important;
}

/* Geschlossene Box: kein extra Padding unten */
.bb-thankyou-box:has(.bb-thankyou-toggle[aria-expanded="false"]) {
  padding-bottom: 0 !important;
}

/* Sidebar Box – gleiche Basis */
.bb-thankyou-sidebar .bb-thankyou-box {
  padding: 0 28px 28px 28px !important;
}

/* Sidebar Titel – exakt gleiche Abstände wie Toggle */
.bb-thankyou-sidebar .bb-thankyou-box-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 20px 0 16px 0 !important;
  border-bottom: 1px solid #eee !important;
  margin: 0 0 20px 0 !important;
}

/* Titel-Schrift */
.bb-thankyou-box-title {
  font-size: var(--fs-h4, 1.25rem) !important;
  font-weight: 700 !important;
  color: var(--color-body, #1b1c1c) !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Produktanzahl-Badge auf der Danke-Seite: dunkelgrau mit weißer Zahl */
.bb-thankyou-box-title .bb-order-review__count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-body, #1b1c1c) !important;
  color: #fff !important;
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

/* "Ihr Einkauf"-Titel exakt so gross wie "Bestelldetails" (24px). Hoehere
   Spezifitaet (.bb-thankyou-page-Praefix), damit diese Regel die spaeter
   definierte .bb-thankyou-page .bb-order-review__label-Regel (1rem) ueberstimmt. */
.bb-thankyou-page .bb-thankyou-box-title .bb-order-review__label {
  font-size: 24px !important;
}

.bb-thankyou-arrow {
  flex-shrink: 0 !important;
  transition: transform .28s ease !important;
  opacity: .4 !important;
}
.bb-thankyou-toggle[aria-expanded="false"] .bb-thankyou-arrow {
  transform: rotate(-90deg) !important;
}

/* Body hidden when collapsed */
.bb-thankyou-body {
  overflow: hidden !important;
  display: flow-root !important; /* verhindert margin-collapse -> kein Inhaltssprung beim Schliessen */
}



/* Bestelldetails */
.bb-thankyou-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

/* Feste, gemeinsame Spaltengeometrie fuer ALLE Detail-Zeilen (v5.5):
   Label feste 42%-Spalte, Wert feste 58%-Spalte, beide linksbuendig.
   Kein space-between mehr -> alle Werte starten exakt auf einer
   vertikalen Linie (vorher "schwammen" sie je nach Label-/Inhaltsbreite). */
.bb-thankyou-row {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.bb-thankyou-label {
  color: var(--color-body, #1b1c1c) !important;
  flex: 0 0 42% !important;
  width: 42% !important;
  box-sizing: border-box !important;
  padding-right: 12px !important;
  font-size: var(--fs-p, 1rem) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.bb-thankyou-value {
  font-weight: 400 !important;
  text-align: left !important;
  color: var(--color-body, #1b1c1c) !important;
  font-size: var(--fs-p, 1rem) !important;
  line-height: 1.35 !important;
  flex: 0 0 58% !important;
  width: 58% !important;
  max-width: 58% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  /* lange Werte (E-Mail/Links) sauber umbrechen statt abschneiden */
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.bb-thankyou-value a {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.bb-thankyou-value--total {
  font-size: var(--fs-p, 1rem) !important;
  font-weight: 700 !important;
}

/* Fett-Modifier (z.B. Bestellnummer) – ueberschreibt die 400er-Grundregel. */
.bb-thankyou-value--bold {
  font-weight: 700 !important;
}

/* Abstand zwischen Land und UID-Nummer in der Rechnungsadresse. */
.bb-thankyou-vat-spacer {
  display: block !important;
  height: 8px !important;
}

.bb-thankyou-value a {
  color: var(--color-body, #1b1c1c) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-size: var(--fs-p, 1rem) !important;
}

.bb-thankyou-value small {
  font-size: var(--fs-small, .85rem) !important;
  color: #777 !important;
}

/* Button */
.bb-thankyou-btn {
  display: inline-block !important;
  background: var(--color-body, #1b1c1c) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 60px !important;
  font-size: var(--fs-button, 1rem) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  padding: clamp(12px,3vw,16px) clamp(20px,3vw,28px) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity .2s ease !important;
  margin-top: 8px !important;
}
.bb-thankyou-btn:hover { opacity: .85 !important; }

/* Bankverbindung */
.bb-thankyou-bank {
  font-size: var(--fs-p, 1rem) !important;
  line-height: var(--lh-p, 1.6) !important;
  color: var(--color-body, #1b1c1c) !important;
}

/* QR unterhalb BIC mit Abstand */
.bb-thankyou-qr {
  margin-top: 20px !important;
}

.bb-thankyou-qr-text {
  font-size: var(--fs-p, 1rem) !important;
  color: var(--color-body, #1b1c1c) !important;
  line-height: var(--lh-p, 1.6) !important;
  margin-top: 20px !important;
  margin-bottom: 12px !important;
}

/* Verwendungszweck + Zahlungsbetrag Werte fett */
.bb-thankyou-bank strong {
  font-weight: 700 !important;
}

.bb-thankyou-bank-purpose {
  margin-top: 12px !important;
  font-size: var(--fs-p, 1rem) !important;
  color: var(--color-body, #1b1c1c) !important;
  line-height: var(--lh-p, 1.6) !important;
}

.bb-thankyou-qr img {
  border-radius: 12px !important;
  display: block !important;
  width: 120px !important;
  height: 120px !important;
}

/* Adressen untereinander */
.bb-thankyou-addresses {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

.bb-thankyou-address h4 {
  font-size: var(--fs-p, 1rem) !important;
  font-weight: 700 !important;
  color: var(--color-body, #1b1c1c) !important;
  margin-bottom: 8px !important;
}

.bb-thankyou-address {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-size: var(--fs-p, 1rem) !important;
  line-height: var(--lh-p, 1.6) !important;
  color: var(--color-body, #1b1c1c) !important;
}

/* UID mit Abstand nach oben */
.bb-thankyou-vat {
  margin-top: 8px !important;
  font-size: var(--fs-p, 1rem) !important;
  color: var(--color-body, #1b1c1c) !important;
}

/* Sidebar sticky */
.bb-thankyou-sidebar .bb-thankyou-box {
  position: static !important;
  top: auto !important;
}

/* Produktliste */
.bb-thankyou-page .bb-order-review__products {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #eee !important;
}

.bb-thankyou-page .bb-order-review__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.bb-thankyou-page .bb-order-review__item-image {
  flex-shrink: 0 !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--color-grey, #f1f1f1) !important;
}

.bb-thankyou-page .bb-order-review__item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px !important;
}

.bb-thankyou-page .bb-order-review__item-details {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.bb-thankyou-page .bb-order-review__item-name {
  font-size: var(--fs-p, 1rem) !important;
  font-weight: 700 !important;
  color: var(--color-body, #1b1c1c) !important;
  line-height: 1.3 !important;
}

.bb-thankyou-page .bb-order-review__item-meta {
  font-size: var(--fs-small, .85rem) !important;
  color: #777 !important;
}

.bb-thankyou-page .bb-order-review__item-qty-top {
  font-size: var(--fs-small, .85rem) !important;
  color: #777 !important;
  font-weight: 400 !important;
}

.bb-thankyou-page .bb-order-review__item-price {
  font-size: var(--fs-p, 1rem) !important;
  font-weight: 700 !important;
  color: var(--color-body, #1b1c1c) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.bb-thankyou-page .bb-order-review__item-price .wgm-tax,
.bb-thankyou-page .bb-order-review__item-price .includes_tax {
  display: none !important;
}

.bb-thankyou-page .bb-order-review__totals {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Zeilenhöhe identisch zur Kasse (30px) – ohne dies wirken die Zeilen flacher
   und die Box anders als auf Kasse/Überprüfen. */
.bb-thankyou-page .bb-order-review__totals .bb-order-review__row,
.bb-thankyou-page .bb-order-review__totals .bb-order-review__label,
.bb-thankyou-page .bb-order-review__totals .bb-order-review__value,
.bb-thankyou-page .bb-order-review__shipping-by,
.bb-thankyou-page .bb-order-review__tax-line {
  line-height: 30px !important;
}

/* Aufeinanderfolgende Rabatt-/Guthaben-Zeilen enger gruppieren (~4px statt 14px gap) –
   konsistent zur Kasse/Überprüfen. */
.bb-thankyou-page .bb-order-review__discount + .bb-order-review__discount,
.bb-thankyou-page .bb-order-review__discount + .bb-order-review__giftcard-line,
.bb-thankyou-page .bb-order-review__giftcard-line + .bb-order-review__discount,
.bb-thankyou-page .bb-order-review__giftcard-line + .bb-order-review__giftcard-line {
  margin-top: -10px !important;
}

.bb-thankyou-page .bb-order-review__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-size: var(--fs-p, 1rem) !important;
}

.bb-thankyou-page .bb-order-review__label {
  color: var(--color-body, #1b1c1c) !important;
  font-size: var(--fs-p, 1rem) !important;
}

/* Labels dieser Zeilen fett (identisch zur Kasse) */
.bb-thankyou-page .bb-order-review__subtotal > .bb-order-review__label,
.bb-thankyou-page .bb-order-review__shipping > .bb-order-review__label,
.bb-thankyou-page .bb-order-review__discount > .bb-order-review__label,
.bb-thankyou-page .bb-order-review__giftcard-line > .bb-order-review__label {
  font-weight: 700 !important;
}

.bb-thankyou-page .bb-order-review__value {
  font-weight: 500 !important;
  text-align: right !important;
  color: var(--color-body, #1b1c1c) !important;
  font-size: var(--fs-p, 1rem) !important;
}

.bb-thankyou-page .bb-order-review__value--discount,
.bb-thankyou-page .bb-order-review__value--giftcard {
  color: var(--color-green, #52A15C) !important;
  font-weight: 700 !important;
}

/* via Versandlabel – einzeilig, linksbündig, näher an "Versand" */
.bb-thankyou-page .bb-order-review__shipping-via {
  color: var(--color-body, #1b1c1c) !important;
  font-size: var(--fs-p, 1rem) !important;
  font-weight: 400 !important;
  width: 100% !important;
  text-align: left !important;
}

.bb-thankyou-page .bb-order-review__shipping-label {
  justify-content: flex-start !important;
  margin-top: -14px !important;
}

.bb-thankyou-page .bb-order-review__sep {
  border: 0 !important;
  border-top: 1px solid var(--color-border, #e5e5e5) !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  background: none !important;
  width: 100% !important;
}

.bb-thankyou-page .bb-order-review__total {
  margin-top: 0 !important;
}

.bb-thankyou-page .bb-order-review__total .bb-order-review__label {
  font-size: var(--fs-h4, 1.25rem) !important;
  font-weight: 700 !important;
}

.bb-thankyou-page .bb-order-review__total .bb-order-review__value {
  font-size: var(--fs-h4, 1.25rem) !important;
  font-weight: 700 !important;
}

.bb-thankyou-page .bb-order-review__tax-line {
  font-size: var(--fs-small, .85rem) !important;
  color: #777 !important;
  margin-top: -14px !important;
}