/* =========================================
   1. GENERAL LOOP LAYOUT ADJUSTMENTS
   ========================================= */

.loop-selected-bundle {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  height: auto;
  flex: 0 0 auto;
}

.loop-skeleton-container {
  display: none !important;
}

.label-container .label {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -10%);
}

/* =========================================
   2. TYPOGRAPHY AND COLORS
   ========================================= */

.loop-bundle-description, 
.loop-bundle-new-description, 
.loop-bundle-widget-selling-plan-description,
.loop-text-p3, 
.loop-text-p4 {
  font-family: 'Roboto Condensed', sans-serif !important;
}

/* Street Soup Green for prices and info texts */
.loop-bottom-sheet-body-info-text,
.loop-text-p3, 
.loop-text-p4 {
  color: #3A8735 !important;
}

/* =========================================
   3. SUBSCRIPTION SELECTION & BADGE REPAIR
   ========================================= */

.loop-bundle-widget-selling-plan-container .loop-bundle-widget-selling-plan-info,
.loop-bundle-widget-selling-plan-container.selected .loop-bundle-widget-selling-plan-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important; 
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: auto !important;          
}

.loop-bundle-widget-selling-plan-text {
  white-space: normal !important; 
  word-wrap: break-word !important;
  flex: 1 1 auto !important;
}

/* FIX: Discount Badge Color (Orange) */
.loop-bundle-widget-selling-plan-container .loop-bundle-widget-discount-badge-container,
.loop-bundle-widget-selling-plan-container.selected .loop-bundle-widget-discount-badge-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  background-color: #F58232 !important; /* Street Soup Orange */
  color: #ffffff !important;            /* Weisser Text */
  
  font-size: 12px !important;      
  font-weight: bold !important;
  line-height: 1.2 !important;
  padding: 4px 10px !important;    
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

.loop-bundle-widget-discount-badge-container::before,
.loop-bundle-widget-discount-badge-container::after {
  display: none !important;
}

/* =========================================
   4. TEXT CONTRAST & CART BUTTON
   ========================================= */

.loop-bundle-widget-selling-plan-description p {
  color: #111 !important; 
}

.loop-bottom-sheet-footer-container {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.loop-bundle-view-cart-btn {
  display: flex !important;
  justify-content: center !important;
  width: 75% !important;
  max-width: 75% !important;
  margin: 0 auto !important;
}

.loop-bundle-view-cart-btn button {
  width: 100% !important; 
  min-height: 50px !important; 
  background-color: #F58232 !important; /* Force Orange for the Button */
}

.loop-bundle-cart-btn-text-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
}

.loop-display-saved-total-view-cart {
  display: flex !important;
  gap: 6px !important;
}

.loop-bundle-view-cart-btn .loop-text-p2,
.loop-bundle-view-cart-btn .loop-text-p3,
.loop-bundle-view-cart-btn .loop-bundle-sheet-total-text {
  font-size: 16px !important; 
  color: #ffffff !important;
}

/* =========================================
   5. RADIO BUTTON & ALIGNMENT FIX
   ========================================= */

.loop-bundle-widget-selling-plan {
  align-items: flex-start !important; 
}

.loop-bundle-widget-radio-btn-container {
  margin-top: 4px !important; 
}

.loop-bundle-widget-selling-plan-subscription {
  align-items: flex-start !important;
}

/* =========================================
   6. FORCE GREEN FOR SELECTED PLAN & RADIO
   ========================================= */

/* Border and Background for Selected Plan */
.loop-bundle-widget-selling-plan-container.selected {
  background-color: #f0f7ef !important; 
  border: 2px solid #44833D !important;
  border-radius: 8px !important;
}

/* Radio Button Circle */
.loop-bundle-widget-selling-plan-container.selected .loop-bundle-widget-radio-btn {
  border-color: #44833D !important;
  background-color: #ffffff !important;
}

/* Radio Button Inner Dot */
.loop-bundle-widget-selling-plan-container.selected .loop-bundle-widget-radio-btn::after {
  background-color: #44833D !important;
}

/* Ensure text stays readable */
.loop-bundle-widget-selling-plan-container.selected .loop-bundle-widget-selling-plan-text {
  color: #111111 !important;
}

/* =========================================
   7. ABO-SEITE REDESIGN (21.10.2026)
   ========================================= */

/* Altes Kopfbild ausblenden, Kopfbereich kommt aus der Beschreibung */
.loop-bundle-image-container-wrapper > div.loop-bundle-image-container {
  display: none !important;
}

.loop-bundle-title-wrapper-new,
.loop-bundle-new-description {
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.loop-bundle-title {
  font-size: clamp(26px, 4vw, 38px) !important;
  line-height: 1.15 !important;
  margin: 8px 0 6px !important;
  text-align: left !important;
}

.ss-abo { color: #262626; text-align: left; }
.ss-abo * { box-sizing: border-box; }
.ss-abo p { margin: 0; }

.ss-abo-sub {
  font-size: 16px;
  line-height: 1.5;
  color: #444;
  margin: 0 0 16px !important;
}

.ss-abo-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B6B6B;
  margin: 0 0 6px !important;
}

.ss-abo-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 560px;
  margin: 0 0 18px;
}

.ss-abo-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 8px 6px;
  border: 2px solid #E5E5E5;
  border-radius: 12px;
  background: #fff;
  color: #262626 !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  transition: border-color .15s ease;
}

.ss-abo-tabs a span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #F58232;
}

.ss-abo-tabs a:hover { border-color: #3A8735; }

.ss-abo-tabs a.is-active {
  border-color: #3A8735;
  background: #f0f7ef;
  cursor: default;
}

.ss-abo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: center;
  background: #FFF7F0;
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 12px;
}

.ss-abo-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.ss-abo-usp {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ss-abo-usp li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.45;
  list-style: none;
}

.ss-abo-usp li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3A8735;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-abo-trust {
  font-size: 14px;
  color: #444;
  margin: 6px 0 0 !important;
}

/* Produktkarten */
.loop-bundle-product-card {
  background: #fff !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
  overflow: hidden;
  height: 100%;
}

.loop-bundle-product-card-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.loop-bundle-product-card-description {
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #3A8735 !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

.loop-btn-add-product {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Footer-Leiste weiß statt grau */
.loop-bottom-sheet-wrapper,
.loop-bottom-sheet-footer-container {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}

/* FAQ unter dem Baukasten */
.ss-abo-faq {
  max-width: 760px;
  margin: 32px auto 8px;
  text-align: left;
  color: #262626;
}

.ss-abo-faq h2 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 12px;
}

.ss-abo-faq details {
  border-top: 1px solid #E5E5E5;
  padding: 14px 0;
}

.ss-abo-faq details:last-of-type { border-bottom: 1px solid #E5E5E5; }

.ss-abo-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
}

.ss-abo-faq summary::-webkit-details-marker { display: none; }

.ss-abo-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: #F58232;
  font-size: 22px;
  line-height: 1;
}

.ss-abo-faq details[open] summary::after { content: "\2212"; }

.ss-abo-faq details p {
  margin: 8px 0 0 !important;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

@media (max-width: 749px) {
  .ss-abo-hero { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  .ss-abo-hero img { aspect-ratio: 16 / 9; }
  .ss-abo-tabs a { font-size: 14px; min-height: 54px; }
  .ss-abo-usp li { font-size: 14px; }
  .loop-bundle-product-card-title { font-size: 13px !important; }
  .loop-bundle-product-card-description { font-size: 12px !important; }
}


/* =========================================
   8. MOBIL-FEINSCHLIFF (21.10.2026)
   ========================================= */

/* FAQ unter dem Baukasten über die volle Breite statt schmaler Spalte */
.loop-bundle-footer-description {
  width: 100% !important;
  max-width: 808px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1140px) {
  /* Kopfbereich mit Abstand zum Bildschirmrand, bündig mit den Produktkarten */
  .loop-bundle-header-wrapper {
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 749px) {
  .loop-bundle-footer-description {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Bild mobil ganz zeigen statt Kopf und Becher abzuschneiden */
  .ss-abo-hero img {
    aspect-ratio: 1 / 1 !important;
    object-position: center !important;
  }

  .ss-abo-tabs { gap: 6px; }
  .ss-abo-tabs a { padding: 8px 4px; }
}