/* ============================================
   LaunchBro Checkout – Modern Two-Column Layout
   Alle Farben kommen aus BrandingManager via --lbro-color-*
   ============================================ */

[x-cloak] { display: none !important; }

/* === WRAPPER === */
.lbro-co-outer {
  font-family: var(--lbro-font-family);
  color: var(--lbro-color-dark);
  line-height: 1.5;
}

/* === TWO-COLUMN GRID === */
.lbro-co-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
  max-width: var(--lbro-page-width, 1080px);
  margin: 0 auto;
  padding: 48px 32px 80px;
}

@media (max-width: 960px) {
  .lbro-co-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 20px 60px;
  }
  .lbro-co-right {
    order: -1;
  }
}

/* === FORM SECTIONS (left) === */
.lbro-co-section {
  background: var(--lbro-co-section-bg, var(--lbro-color-surface, #fff));
  border: 1.5px solid var(--lbro-co-section-border, var(--lbro-color-border));
  border-radius: var(--lbro-radius-xl, 16px);
  padding: 32px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.lbro-co-section:last-of-type {
  margin-bottom: 0;
}

.lbro-co-section__title {
  margin: 0 0 24px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--lbro-co-title-color, var(--lbro-color-dark));
  letter-spacing: -.01em;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--lbro-color-border);
}

/* === NAME ROW === */
.lbro-co-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 540px) {
  .lbro-co-name-row {
    grid-template-columns: 1fr;
  }
}

/* === FORM FIELDS === */
.lbro-field {
  margin-bottom: 20px;
}
.lbro-field:last-child {
  margin-bottom: 0;
}

.lbro-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lbro-color-text);
  margin-bottom: 6px;
}

.lbro-field input,
.lbro-field select,
.lbro-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--lbro-color-border);
  border-radius: var(--lbro-radius-md, 10px);
  font-size: 0.95rem;
  font-family: var(--lbro-font-family);
  color: var(--lbro-color-dark);
  background: var(--lbro-color-surface, #fff);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  appearance: auto;
}

.lbro-field input:focus,
.lbro-field select:focus,
.lbro-field textarea:focus {
  outline: none;
  border-color: var(--lbro-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lbro-color-primary) 15%, transparent);
}

.lbro-field input.lbro-error,
.lbro-field select.lbro-error {
  border-color: var(--lbro-color-danger);
}

.lbro-error-msg {
  display: block;
  color: var(--lbro-color-danger);
  font-size: 0.8rem;
  margin-top: 5px;
  font-weight: 500;
}

/* === GATEWAY SELECTION === */
.lbro-gateway-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbro-gateway {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--lbro-color-border);
  border-radius: var(--lbro-radius-lg, 12px);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--lbro-color-surface, #fff);
}

.lbro-gateway:hover {
  border-color: var(--lbro-color-primary);
  background: color-mix(in srgb, var(--lbro-color-primary) 5%, white);
}

.lbro-gateway--active {
  border-color: var(--lbro-color-primary);
  background: color-mix(in srgb, var(--lbro-color-primary) 6%, white);
}

.lbro-gateway input[type="radio"] {
  margin: 0;
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--lbro-color-primary);
  flex-shrink: 0;
}

.lbro-gateway__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lbro-gateway__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lbro-color-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lbro-gateway__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: var(--lbro-radius-xl, 999px);
  background: #fef3c7;
  color: #92400e;
}

.lbro-gateway__sub {
  font-size: 0.8rem;
  color: var(--lbro-color-text-light);
}

/* === SUBMIT BUTTON === */
.lbro-btn.lbro-co-submit,
.lbro-co-submit {
  width: 100%;
  padding: 16px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--lbro-co-submit-bg, var(--lbro-color-button, var(--lbro-color-primary)));
  color: var(--lbro-co-submit-color, var(--lbro-button-text-color, #fff));
  border: none;
  border-radius: var(--lbro-button-radius, 12px);
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  margin-top: 24px;
  letter-spacing: -.01em;
  font-family: var(--lbro-font-family);
}

.lbro-btn.lbro-co-submit:hover:not(:disabled),
.lbro-co-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lbro-color-button, var(--lbro-color-primary)) 80%, black);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--lbro-color-button, var(--lbro-color-primary)) 35%, transparent);
  transform: translateY(-1px);
}

.lbro-co-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.lbro-co-legal {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--lbro-color-text-light);
  text-align: center;
  line-height: 1.6;
}

.lbro-co-legal a {
  color: var(--lbro-color-text-light);
  text-decoration: underline;
}

/* === ORDER SUMMARY (right) === */
.lbro-order-summary {
  background: var(--lbro-color-light);
  border: 1.5px solid var(--lbro-color-border);
  border-radius: var(--lbro-radius-xl, 16px);
  padding: 28px;
  position: sticky;
  top: 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.lbro-os-title {
  margin: 0 0 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lbro-color-text-light);
}

.lbro-os-product {
  margin: 0 0 20px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lbro-color-dark);
  line-height: 1.35;
}
.lbro-os-product-link {
  color: inherit;
  text-decoration: none;
}
.lbro-os-product-link:hover {
  color: var(--lbro-color-primary);
  text-decoration: underline;
}

/* === CART ITEMS === */
.lbro-os-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 4px;
}
.lbro-os-item {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lbro-color-border);
}
.lbro-os-item:last-child {
  border-bottom: none;
}
.lbro-os-item__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.lbro-os-item__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lbro-os-item__price {
  font-size: .9rem;
  font-weight: 700;
  color: var(--lbro-color-dark);
  white-space: nowrap;
}
.lbro-os-item__remove {
  color: var(--lbro-text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  opacity: .6;
  transition: opacity .15s;
}
.lbro-os-item__remove:hover { opacity: 1; color: var(--lbro-color-danger, #dc2626); }

.lbro-os-subtotal-list {
  margin: 8px 0 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--lbro-color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lbro-os-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--lbro-text-secondary);
}

/* === FEATURES === */
.lbro-os-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lbro-os-features li {
  font-size: .875rem;
  color: var(--lbro-text-secondary);
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.lbro-os-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--lbro-color-success);
  font-weight: 700;
}

/* === ABO-INFO === */
.lbro-os-sub-info {
  margin: 0 0 20px;
  background: var(--lbro-color-primary-light);
  border: 1px solid rgba(57,99,158,.18);
  border-radius: var(--lbro-radius-md, 8px);
  padding: 12px 14px;
}
.lbro-os-sub-badge {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lbro-color-primary);
  margin-bottom: 10px;
}
.lbro-os-sub-details {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lbro-os-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.lbro-os-sub-row dt {
  font-size: .825rem;
  color: var(--lbro-text-secondary);
  font-weight: 400;
}
.lbro-os-sub-row dd {
  font-size: .9rem;
  font-weight: 600;
  color: var(--lbro-color-dark);
  margin: 0;
}
.lbro-os-sub-row--min {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(57,99,158,.12);
}
.lbro-os-sub-row--min dt,
.lbro-os-sub-row--min dd {
  font-size: .78rem;
  color: var(--lbro-text-secondary);
  font-weight: 400;
}

/* === PRICE BLOCK === */
.lbro-os-price-block {
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--lbro-color-border);
  margin-bottom: 20px;
}

.lbro-os-compare {
  display: block;
  font-size: 0.9rem;
  color: var(--lbro-color-text-light);
  text-decoration: line-through;
  margin-bottom: 4px;
}

.lbro-os-main-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--lbro-color-dark);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.lbro-os-coupon-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--lbro-color-success);
  font-weight: 500;
}

.lbro-os-coupon-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lbro-color-text-light);
  font-size: 18px;
  padding: 0;
  line-height: 1;
  margin-left: auto;
}

/* === TAX BREAKDOWN === */
.lbro-os-tax-breakdown {
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--lbro-color-border);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lbro-os-tax-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.875rem;
  color: var(--lbro-color-text-light);
}

.lbro-os-tax-row span:last-child {
  font-variant-numeric: tabular-nums;
}

.lbro-os-tax-row--note span:last-child {
  text-align: right;
  max-width: 60%;
  font-size: 0.8rem;
}

/* === TOTAL === */
.lbro-os-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lbro-color-dark);
  margin-bottom: 20px;
  letter-spacing: -.01em;
}

.lbro-os-tax-note {
  margin: -12px 0 16px;
  font-size: 0.75rem;
  color: var(--lbro-color-text-light);
  line-height: 1.4;
}

/* === COUPON (in order summary) === */
.lbro-os-coupon-section {
  border-top: 1.5px solid var(--lbro-color-border);
  padding-top: 20px;
}

.lbro-os-coupon-label-head {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lbro-color-text-light);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.lbro-os-coupon-row {
  display: flex;
  gap: 8px;
}

.lbro-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--lbro-color-border);
  border-radius: var(--lbro-radius-md, 8px);
  font-size: 0.9rem;
  font-family: var(--lbro-font-family);
  box-sizing: border-box;
  color: var(--lbro-color-dark);
  transition: border-color .15s;
}
.lbro-input:focus {
  outline: none;
  border-color: var(--lbro-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lbro-color-primary) 12%, transparent);
}

.lbro-os-coupon-input {
  flex: 1;
  min-width: 0;
}

.lbro-os-coupon-btn {
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--lbro-color-dark);
  color: var(--lbro-button-text-color, #fff);
  border: none;
  border-radius: var(--lbro-radius-md, 8px);
  cursor: pointer;
  transition: background .15s;
  font-family: var(--lbro-font-family);
}
.lbro-os-coupon-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lbro-color-dark) 80%, black);
}
.lbro-os-coupon-btn:disabled {
  opacity: .5;
}

/* === PROCESSING === */
.lbro-processing {
  text-align: center;
  padding: 80px 24px;
  color: var(--lbro-color-text-light);
}

.lbro-processing-spinner {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 3px solid var(--lbro-color-border);
  border-top-color: var(--lbro-color-primary);
  border-radius: 50%;
  animation: lbro-spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes lbro-spin {
  to { transform: rotate(360deg); }
}

/* === ERROR === */
.lbro-fatal-error {
  background: color-mix(in srgb, var(--lbro-color-danger) 10%, white);
  border: 1.5px solid color-mix(in srgb, var(--lbro-color-danger) 30%, white);
  border-radius: var(--lbro-radius-lg, 12px);
  padding: 16px 20px;
  color: color-mix(in srgb, var(--lbro-color-danger) 70%, black);
  margin-bottom: 24px;
  font-size: 0.9rem;
}

/* === NEWSLETTER OPT-IN === */
.lbro-newsletter-optin {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1.5px solid var(--lbro-color-border);
}

.lbro-optin-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--lbro-color-text);
  line-height: 1.5;
}

.lbro-optin-checkbox {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--lbro-color-primary);
  cursor: pointer;
}

/* === LEGAL CHECKS === */
.lbro-co-legal-checks {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1.5px solid var(--lbro-color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lbro-legal-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.lbro-legal-check--error .lbro-legal-check__text {
  color: var(--lbro-color-danger, #dc2626);
}
.lbro-legal-check__input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--lbro-color-primary);
  cursor: pointer;
}
.lbro-legal-check__text {
  font-size: .825rem;
  color: var(--lbro-color-text);
  line-height: 1.5;
}
.lbro-legal-check__text a {
  color: var(--lbro-color-primary);
  text-decoration: underline;
}

/* === STRIPE ELEMENT PLACEHOLDER === */
#lbro-stripe-element {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--lbro-color-light);
  border: 1.5px dashed var(--lbro-color-border);
  border-radius: var(--lbro-radius-md, 10px);
  font-size: 0.85rem;
  color: var(--lbro-color-text-light);
}

/* === GATEWAY EMPTY STATE === */
.lbro-gateway-list .lbro-notice--warning {
  margin: 0;
  padding: 14px 16px;
  background: #fef3c7;
  border-radius: var(--lbro-radius-md, 10px);
  font-size: 0.875rem;
  color: #92400e;
  line-height: 1.5;
}

/* === INVOICE INFO === */
.lbro-invoice-info {
  margin-top: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--lbro-color-info) 10%, white);
  border-radius: var(--lbro-radius-md, 10px);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--lbro-color-info) 80%, black);
  line-height: 1.5;
}

/* === CHECKOUT TAX HINT === */
.lbro-checkout-tax-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--lbro-color-success);
  font-weight: 500;
}

/* === BUTTONS (general) === */
.lbro-btn {
  display: inline-block;
  padding: 12px 20px;
  background: var(--lbro-color-button, var(--lbro-color-primary));
  color: var(--lbro-button-text-color, #fff);
  border: none;
  border-radius: var(--lbro-button-radius, 10px);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .15s, box-shadow .15s;
  font-family: var(--lbro-font-family);
}
.lbro-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lbro-color-button, var(--lbro-color-primary)) 80%, black);
}
.lbro-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* === THANK YOU === */
.lbro-thank-you {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 80px;
  font-family: var(--lbro-font-family);
}

.lbro-thank-you-section {
  margin-bottom: 48px;
  padding: 32px;
  background: var(--lbro-gray-100, #f8fafc);
  border-radius: var(--lbro-radius-lg, 12px);
  text-align: left;
}

.lbro-thank-you-section:first-child {
  text-align: center;
  background: none;
  padding: 0 0 32px;
}

.lbro-thank-you-section h3 {
  margin: 0 0 16px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--lbro-color-dark);
}

.lbro-thank-you-section p {
  margin: 0 0 12px;
  color: var(--lbro-color-text-secondary);
  line-height: 1.6;
}

.lbro-thank-you-section p:last-child {
  margin-bottom: 0;
}

.lbro-order-card {
  background: var(--lbro-color-surface, #fff);
  border: 1px solid var(--lbro-color-border);
  border-radius: var(--lbro-radius-md, 8px);
  padding: 20px;
  margin-top: 12px;
}

.lbro-order-card p {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.lbro-order-card p:last-child {
  margin-bottom: 0;
}

.lbro-order-card strong {
  font-weight: 600;
  color: var(--lbro-color-dark);
}

.lbro-order-card a {
  color: var(--lbro-color-primary);
  text-decoration: none;
  font-weight: 500;
}

.lbro-order-card a:hover {
  text-decoration: underline;
}

.lbro-thank-you-upsell .lbro-upsell {
  margin-top: 20px;
}

/* ── Zugangs-Knöpfe auf der Danke-Seite ─────────────────────────────── */
.lbro-thank-you-access__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.lbro-thank-you-access__btn {
  /* .lbro-btn setzt kein text-decoration – auf einem <a> bliebe sonst der
     Unterstrich des Themes stehen. */
  text-decoration: none;
  /* Bei mehreren Produkten steht der Produktname im Knopf – der darf
     umbrechen statt aus der Karte zu laufen. */
  white-space: normal;
  text-align: center;
}

.lbro-thank-you-access__btn:hover {
  text-decoration: none;
}

/* ── Inline-Upsell im Checkout ──────────────────────────────────────── */
.lbro-inline-upsell {
  border: 2px solid var(--lbro-color-primary-light, rgba(57,99,158,.15));
  border-radius: var(--lbro-radius-md, 10px);
  padding: 16px;
  margin: 16px 0;
  background: rgba(57,99,158,.04);
}

.lbro-inline-upsell__headline {
  font-weight: 700;
  font-size: 15px;
  color: var(--lbro-color-dark);
  margin: 0 0 6px;
}

.lbro-inline-upsell__text {
  font-size: 13px;
  color: var(--lbro-color-text-muted, #64748b);
  margin: 0 0 12px;
  line-height: 1.55;
}

.lbro-inline-upsell__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--lbro-radius-md, 8px);
  background: var(--lbro-color-surface, #fff);
  transition: border-color .15s, box-shadow .15s;
}

.lbro-inline-upsell__label.is-checked {
  border-color: var(--lbro-color-primary);
  box-shadow: 0 0 0 3px rgba(57,99,158,.1);
}

.lbro-inline-upsell__cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.lbro-inline-upsell__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: var(--lbro-radius-sm, 5px);
  margin-top: 1px;
  transition: border-color .15s, background .15s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--lbro-color-text-muted, #94a3b8);
}

.lbro-inline-upsell__label:hover .lbro-inline-upsell__box {
  border-color: var(--lbro-color-primary);
  color: var(--lbro-color-primary);
}

.lbro-inline-upsell__label.is-checked .lbro-inline-upsell__box {
  border-color: var(--lbro-color-primary);
  background: var(--lbro-color-primary);
}

.lbro-inline-upsell__label.is-checked .lbro-inline-upsell__box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 7px;
  height: 11px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.lbro-inline-upsell__text-wrap {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lbro-inline-upsell__btn-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--lbro-color-dark);
}

.lbro-inline-upsell__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--lbro-color-primary);
  white-space: nowrap;
}

/* ── Preis-Anzeige ([lbro_product_price]) ───────────────────────────── */
.lbro-price-display {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.lbro-price-display__compare {
  font-size: 14px;
  color: var(--lbro-text-secondary, #64748b);
  text-decoration: line-through;
}

.lbro-price-display__current {
  font-size: 20px;
  font-weight: 700;
  color: var(--lbro-color-dark);
}

/* ── Upsell-Item (Thank-you + Funnel-Seite) ─────────────────────────── */
.lbro-upsell-item__headline {
  font-size: 18px;
  font-weight: 700;
  color: var(--lbro-color-dark);
  margin: 0 0 10px;
}

.lbro-upsell-item__text {
  font-size: 14px;
  color: var(--lbro-color-text-muted, #64748b);
  margin: 0 0 10px;
  line-height: 1.6;
}

/* ── Kündigungsseite (§ 312k BGB, [lbro_cancellation]) ─────────────────── */
.lbro-cancellation {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--lbro-spacing-xl, 32px) 16px;
}

.lbro-cancellation__title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
}

.lbro-cancellation__intro {
  color: var(--lbro-gray-600, #475569);
  margin: 0 0 24px;
  line-height: 1.6;
}

.lbro-cancellation__section {
  border: 1px solid var(--lbro-gray-200, #e2e8f0);
  border-radius: var(--lbro-radius-lg, 12px);
  padding: 20px;
  margin: 0 0 20px;
}

.lbro-cancellation__section legend {
  font-weight: 600;
  padding: 0 8px;
}

.lbro-cancellation__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}

.lbro-cancellation__submit {
  width: 100%;
  font-size: 16px;
  padding: 14px 20px;
}

.lbro-cancellation__success {
  text-align: center;
  border: 1px solid var(--lbro-gray-200, #e2e8f0);
  border-radius: var(--lbro-radius-lg, 12px);
  padding: 40px 24px;
}

.lbro-cancellation__success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--lbro-color-primary, #39639e);
  color: var(--lbro-button-text-color, #fff);
  font-size: 28px;
  line-height: 56px;
}

/* ── Gewählte Variante in der Bestellübersicht ─────────────────────────
   Nur Anzeige. Die Auswahl steht links im Formular, ein zweiter Satz
   Optionen daneben war doppelt. */
.lbro-os-variant-chosen {
  margin: 6px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lbro-gray-600, #475569);
}

/* ── Passwortfeld mit Auge-Toggle (optionales Konto-Passwort) ──────────── */
.lbro-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lbro-pw-wrap input {
  width: 100%;
  padding-right: 42px;
}

.lbro-pw-toggle {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--lbro-gray-500, #64748b);
  cursor: pointer;
  padding: 0;
}

.lbro-pw-toggle:hover {
  color: var(--lbro-gray-700, #334155);
}

.lbro-field-hint {
  display: block;
  font-size: 12px;
  color: var(--lbro-gray-500, #64748b);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Coaching-Termin Slot-Picker ─────────────────────────────────────── */
.lbro-co-hint {
  font-size: 13px;
  color: var(--lbro-gray-500, #64748b);
  margin: 0 0 10px;
}

.lbro-coaching-days {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}

.lbro-coaching-day__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lbro-text, #0f172a);
  margin-bottom: 6px;
  text-transform: capitalize;
}

.lbro-coaching-day__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lbro-coaching-slot-btn {
  border: 1px solid var(--lbro-color-primary, #39639e);
  background: var(--lbro-color-surface, #fff);
  color: var(--lbro-color-primary, #39639e);
  border-radius: var(--lbro-radius-sm, 6px);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.lbro-coaching-slot-btn:hover {
  background: var(--lbro-color-primary-light, rgba(57,99,158,.08));
}

.lbro-coaching-slot-btn.is-selected {
  background: var(--lbro-color-primary, #39639e);
  color: var(--lbro-button-text-color, #fff);
}

.lbro-btn-link {
  background: none;
  border: none;
  color: var(--lbro-color-primary, #39639e);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 10px;
}

.lbro-coaching-selected {
  font-size: 13px;
  color: var(--lbro-text, #0f172a);
  background: var(--lbro-color-primary-light, rgba(57,99,158,.08));
  border-radius: var(--lbro-radius-sm, 6px);
  padding: 8px 12px;
  margin: 4px 0 0;
}

/* Produktvarianten. Baut bewusst auf demselben Muster auf wie die
   Zahlungsauswahl darunter: dieselbe Karte, dasselbe Radio, damit im
   Checkout nicht zwei verschiedene Auswahl-Optiken nebeneinander stehen.
   Einziger Unterschied ist der Preis, der rechts ausgerichtet mitlaeuft. */
.lbro-variant-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbro-variant {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--lbro-color-border);
  border-radius: var(--lbro-radius-lg, 12px);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--lbro-color-surface, #fff);
}

.lbro-variant:hover {
  border-color: var(--lbro-color-primary);
  background: color-mix(in srgb, var(--lbro-color-primary) 5%, white);
}

.lbro-variant--active {
  border-color: var(--lbro-color-primary);
  background: color-mix(in srgb, var(--lbro-color-primary) 6%, white);
}

.lbro-variant input[type="radio"] {
  margin: 0;
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--lbro-color-primary);
  flex-shrink: 0;
}

.lbro-variant__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.lbro-variant__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lbro-color-dark);
}

.lbro-variant__sub {
  font-size: 0.85rem;
  color: var(--lbro-color-text-secondary, #6b7280);
}

.lbro-variant__price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lbro-color-dark);
  white-space: nowrap;
}