/*
  CSS für Danke-Seite
  Autor: AD / Stefan Biba

  Version: 5.91
  Zuletzt aktualisiert: 02.07.2026
*/

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

.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; }

  .bb-thankyou-main    { order: 0 !important; }
  .bb-thankyou-sidebar { order: 1 !important; }

  .bb-thankyou-label {
    flex-basis: 46% !important;
    width: 46% !important;
  }
  .bb-thankyou-value {
    flex-basis: 54% !important;
    width: 54% !important;
    max-width: 54% !important;
  }
}

.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;
}

.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; }

.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;
}

.bb-thankyou-box:has(.bb-thankyou-toggle[aria-expanded="false"]) {
  padding-bottom: 0 !important;
}

.bb-thankyou-sidebar .bb-thankyou-box {
  padding: 0 28px 28px 28px !important;
}

.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;
}

.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;
}

/* Toggle-Box-Titel (Bestelldetails, Bankverbindung) mit Icon links */
.bb-thankyou-toggle .bb-thankyou-box-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.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;
}

.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;
}

.bb-thankyou-body {
  overflow: hidden !important;
  display: flow-root !important;
}

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

.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;

  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;
}

.bb-thankyou-value--bold {
  font-weight: 700 !important;
}

.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;
}

.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; }

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

.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;
}

.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;
}

.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;
}

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

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

.bb-thankyou-page .bb-order-review__products {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.bb-thankyou-page .bb-order-review__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-height: 72px !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: 0 !important;
  margin-top: 6px !important;
}

.bb-thankyou-page .bb-order-review__item-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-body, #1b1c1c) !important;
  line-height: 1.3 !important;
  display: block !important;
  margin-bottom: 0.2em !important;
}

.bb-thankyou-page .bb-order-review__item-meta {
  font-size: calc(var(--fs-small, .85rem) * 1.2) !important;
  color: #777 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.64em !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

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

.bb-thankyou-page .bb-order-review__item-price {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-body, #1b1c1c) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-align: right !important;
  line-height: 1.3 !important;
  margin-top: 6px !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: 0 !important;
}

.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;
}

.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,
.bb-thankyou-page .bb-order-review__bulk-savings + .bb-order-review__discount {
  margin-top: 4px !important;
}

.bb-thankyou-page .bb-order-review__totals .bb-order-review__discount,
.bb-thankyou-page .bb-order-review__totals .bb-order-review__giftcard-line {
  align-items: center !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;
}

/* Zwischensumme + Versand: feste 20px (auch auf Mobile, wie Kasse) */
.bb-thankyou-page .bb-order-review__subtotal > .bb-order-review__label,
.bb-thankyou-page .bb-order-review__subtotal > .bb-order-review__value,
.bb-thankyou-page .bb-order-review__shipping > .bb-order-review__label,
.bb-thankyou-page .bb-order-review__shipping > .bb-order-review__value {
  font-size: 20px !important;
}

/* Mengen-Badge auf dem Produktbild (wie Kasse/Side Cart) */
.bb-thankyou-page .bb-order-review__item-image {
  overflow: visible !important;
}
.bb-thankyou-page .bb-qty-badge {
  position: absolute !important;
  right: -8px !important;
  bottom: -8px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 7px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: var(--color-body, #282828) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
  line-height: 1 !important;
}

/* "Gratis" grün (nur das Wort) */
.bb-thankyou-page .bb-order-review__value .bb-free-shipping,
.bb-thankyou-page .bb-free-shipping {
  color: var(--color-green, #52A15C) !important;
  font-weight: 700 !important;
}

/* Box-Header-Icons (Bestelldetails, Bankverbindung, Ihr Einkauf) */
.bb-thankyou-box-title .bb-cart-icon,
.bb-thankyou-box-title .bb-box-icon {
  margin-right: 0 !important;
}
.bb-thankyou-box-title .bb-cart-icon svg {
  width: 34px !important;
  height: 34px !important;
}
.bb-thankyou-box-title .bb-box-icon svg {
  width: 28px !important;
  height: 28px !important;
}

/* "Ihr Einkauf"-Box: dauerhaft gelber Border (nicht nur bei hover) */
.bb-thankyou-page .bb-thankyou-sidebar .bb-thankyou-box {
  border-color: var(--color-yellow, #FFF064) !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;
}

.bb-thankyou-page .bb-order-review__totals .bb-order-review__shipping-via {
  color: var(--color-body, #1b1c1c) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  width: 100% !important;
  text-align: left !important;
  padding-left: 32px !important;
}

.bb-thankyou-page .bb-order-review__shipping-label {
  justify-content: flex-start !important;
  margin-top: 0 !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;
}

/* Einheitlich 12px sichtbarer Abstand ober- und unterhalb jeder Trennlinie. */
.bb-thankyou-page .bb-order-review__sep:has(+ .bb-order-review__shipping) {
  margin-top: 9px !important;
  margin-bottom: 10.2px !important;
}
.bb-thankyou-page .bb-order-review__sep:has(+ .bb-order-review__bulk-savings) {
  margin-top: 13px !important;
  margin-bottom: 9px !important;
}
.bb-thankyou-page .bb-order-review__sep:has(+ .bb-order-review__discount) {
  margin-top: 13px !important;
  margin-bottom: 9px !important;
}
.bb-thankyou-page .bb-order-review__sep:has(+ .bb-order-review__giftcard-line) {
  margin-top: 13px !important;
  margin-bottom: 9px !important;
}
.bb-thankyou-page .bb-order-review__sep:has(+ .bb-order-review__total) {
  margin-top: 9px !important;
  margin-bottom: 12px !important;
}

/* Gewellte Artikelzahl-Trennlinie zwischen Produkten und Summen */
.bb-thankyou-page .bb-order-review__count-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 19px 0 11px !important;
  font-size: .95rem !important;
  color: rgba(0, 0, 0, .45) !important;
  line-height: 1 !important;
}
.bb-thankyou-page .bb-order-review__count-divider::before,
.bb-thankyou-page .bb-order-review__count-divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 8px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 4 Q 4 0 8 4 T 16 4' fill='none' stroke='rgba(0,0,0,0.28)' stroke-width='1.2'/%3E%3C/svg%3E") !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
}
.bb-thankyou-page .bb-order-review__count-divider span {
  white-space: nowrap !important;
}

/* Totals-Icons (Versand, Rabattcode, Mengenrabatte, Guthaben) */
.bb-thankyou-page .bb-order-review__row .bb-order-review__label:has(.bb-totals-icon) {
  display: inline-flex !important;
  align-items: center !important;
}
.bb-thankyou-page .bb-totals-icon {
  margin-right: 7px;
}
.bb-thankyou-page .bb-totals-icon svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
}
.bb-thankyou-page .bb-order-review__giftcard-line .bb-totals-icon svg {
  width: 26px !important;
  height: 26px !important;
}
.bb-thankyou-page .bb-order-review__bulk-savings .bb-bulk-inline-val {
  color: var(--color-green, #52A15C) !important;
  font-weight: 400 !important;
  font-size: .8em !important;
  margin-left: 4px;
}

/* Item-Mengenrabatt: einzeilig, nur Icon + Text */
.bb-thankyou-page .bb-order-review__item-bulk {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  color: var(--color-green, #52A15C) !important;
  font-weight: 400 !important;
  font-size: var(--fs-small, .85rem) !important;
}
.bb-thankyou-page .bb-order-review__item-bulk .bb-bulk-icon {
  margin-right: 4px;
}
.bb-thankyou-page .bb-order-review__item-bulk .bb-bulk-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !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: 0 !important;
}

/* ===========================================
   Konfetti-Canvas (bb-confetti.js)
   Aus Elementor Custom Code übernommen.
   =========================================== */
#confetti-top-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999999 !important; /* über allem */
}