/* =========================================
   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;
}