/* 1. LAYOUT & RÆKKEFØLGE */
.loop-bundle-radio-widget-container {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 15px !important;
}

/* Fjern prikker og badges */
.loop-bundle-widget-radio-btn-container, 
.loop-bundle-selling-plan-discount-badge,
.loop-bundle-widget-discount-badge-container {
    display: none !important;
}

/* 2. ENGANGSKØB (Den nederste boks) */
.loop-bundle-widget-selling-plan-container:first-child .loop-bundle-widget-selling-plan-text {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

/* Tvinger Engangskøb-titlen frem */
.loop-bundle-widget-selling-plan-container:first-child .loop-bundle-widget-selling-plan-text::before {
    content: "Engangskøb" !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    visibility: visible !important;
    line-height: 1.2 !important;
}

/* --- RETTELSE HER: Fjerner brødtekst specifikt fra Engangskøb --- */
.loop-bundle-widget-selling-plan-container:first-child .loop-bundle-widget-selling-plan-text::after {
    display: none !important;
    content: "" !important;
}

.loop-bundle-widget-selling-plan-container:first-child .loop-bundle-widget-selling-plan-description {
    display: none !important;
}

/* 3. MEDLEMSKAB (Den øverste boks) */
.loop-bundle-widget-selling-plan-container:last-child .loop-bundle-widget-selling-plan-text {
    font-size: 0 !important;
}

.loop-bundle-widget-selling-plan-container:last-child .loop-bundle-widget-selling-plan-text::before {
    content: "Medlemskab: Spar 10%" !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #000 !important;
    margin-bottom: 4px;
}

.loop-bundle-widget-selling-plan-container:last-child .loop-bundle-widget-selling-plan-description {
    display: block !important;
    font-size: 14px !important;
    color: #000 !important;
    line-height: 1.4 !important;
}

.loop-bundle-widget-frequency-dropdown, 
.loop-bundle-widget-frequency-dropdown-options,
button.loop-bundle-widget-frequency-interval-items {
    background-color: #ffffff !important;
    color: #000 !important;
    // border: none !important;
}


/* 6. GENEREL BESKRIVELSE - RAMMER DEN AKTIVE CONTAINER DIREKTE */
.loop-bundle-widget-selling-plan-container.selected .loop-bundle-widget-selling-plan-text::after {
    content: "Som abonnent får du fast lav pris på hele din kurv - helt uden binding" !important;
    display: block !important;
    font-size: 14px !important; /* Lidt mindre for at spare plads */
    font-weight: 400 !important;
    color: #606060 !important;
    margin-top: 4px !important; /* Mindre luft her */
    line-height: 1.3 !important;
    visibility: visible !important;
}

/* FJERNER EKSTRA LUFT I SELVE BOKSEN */
.loop-bundle-widget-selling-plan-container.selected {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* SØRGER FOR AT OVERSKRIFTEN IKKE FYLDER FOR MEGET */
.loop-bundle-widget-selling-plan-container.selected .loop-bundle-widget-selling-plan-text {
    margin-bottom: 0 !important;
}



/* 7. I ALT-BAR: TEKSTSTYLING */
/* Tvinger al tekst i bunden til hvid og 16px */
.loop-bundle-widget-add-to-cart-container,
.loop-bundle-widget-add-to-cart-container *,
.loop-bundle-add-to-cart-container * {
    color: #ffffff !important;
    font-size: 16px !important; /* Din standard p-størrelse */
    text-decoration: none !important; /* Fjerner understregning */
    font-weight: 400 !important; /* Din standard vægt */
    font-style: normal !important;
}

/* Specifik fjernelse af understregning på "Du sparer"-delen */
.loop-bundle-add-to-cart-container span,
.loop-bundle-add-to-cart-container div {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Sørger for at knappen "Tilføj til kurv" også holder stilen */
. {
    color: #ffffff !important;
    text-decoration: none !important;
}
/* 1. KANT PÅ AKTIV BOKS - FORCE VERSION */
/* Vi bruger her en kombination af kraftig border og en indre skygge */
.loop-bundle-widget-selling-plan-container[data-selected="true"],
.loop-bundle-widget-selling-plan-container.selected {
    border: 3px solid #7e9f8b !important; /* Tykkere ramme */
    border-radius: 5px !important;
    background-color: #f9faf9 !important;
    box-shadow: 0 0 0 1px #7e9f8b, 0 4px 15px rgba(0,0,0,0.1) !important;
    position: relative;
    z-index: 2;
}

/* 2. GØR DEN INAKTIVE BOKS TYDELIGT "SLUKKET" */
.loop-bundle-widget-selling-plan-container:not(.selected):not([data-selected="true"]) {
    border: 1px solid #d1d1d1 !important;
    background-color: #ffffff !important;
    opacity: 0.6; /* Gør den meget mere dæmpet */
    filter: grayscale(0.5); /* Fjerner lidt af farven så den ser inaktiv ud */
}

.loop-bundle-new-description{
  margin 0 20px !important; 
}




/* 2. FIX TIL BUND-BAR (Hvid tekst & 16px) */
.loop-bundle-widget-add-to-cart-container,
.loop-bundle-widget-add-to-cart-container *,
.loop-bundle-add-to-cart-container * {
    color: #ffffff !important;
    font-size: 16px !important; /* Din standard p-størrelse */
    text-decoration: none !important;
    font-weight: 400 !important; /* Din standard */
}


/* 1. HEADER FIX (Gennemse din ordre) */
/* Låst til boksens naturlige 16px indrykning, 0px margin */
.loop-selected-bundle h2.loop-selected-bundle-title {
    font-size: 18px !important; 
    font-weight: 500 !important; 
    color: #000 !important;
    margin: 0px !important; 
    padding: 0px !important;
    display: block !important;
}

/* 2. PROGRESS BAR FIX - ABSOLUT NUL PADDING */
.loop-selected-bundle-info {
    padding: 0 !important; /* TVUNGET NUL - så de 16px fra rammen gælder */
    margin-bottom: 2px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.loop-selected-bundle .loop-bundle-progress-bar-new-container {
    width: 100% !important;
    margin: 0 0 15px 0px !important;
    padding-right: 10px !important; /* Din rettelse for at fjerne padding-drillerier */
    box-sizing: border-box !important;
}

/* Sikrer at 5-tallet/cirklen ikke bliver afskåret i kanten */
.loop-selected-bundle .dot-container,
.loop-selected-bundle .new-milestones-milestone {
    right: 0 !important;
}

/* 3. PRODUKT-CARDS: TÆT SAMLING OG RAMME-SIKRING */
.loop-selected-bundle-items-count {
    margin-bottom: 2px !important; 
    padding: 0 !important;
}

div.loop-selected-variant-container,
.loop-selected-bundle .loop-selected-variant-container {
    width: 100% !important;
    margin-bottom: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 10px !important; /* SIKRER AT KNAPPERNE LIGGER INDEN FOR RAMMEN */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: unset !important; /* Tuttelu-standard */
}

/* 4. GENOPRET PERFEKTE KNAPPER (Tuttelu-standard) */
/* Her sikrer vi at de bliver 32x32 og kvadratiske igen */
.loop-selected-bundle button.loop-btn-input-decrease-small,
.loop-selected-bundle button.loop-btn-input-increase-small {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: unset !important; /* Tuttelu-standard */
    line-height: 1 !important;    /* Tuttelu-standard */
}

.loop-selected-bundle input.loop-form-input-small {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    text-align: center !important;
    border: 1px solid #7c7c7c !important;
    min-height: unset !important; /* Tuttelu-standard */
    line-height: 1 !important;    /* Tuttelu-standard */
    font-size: 16px !important;
}

.loop-selected-variant-title {
  width: 95% !important;
}






/* 1. PRODUKTKORT - BRUG MARGIN TIL LUFT */
.loop-card.loop-bundle-product-card {
    padding: 0 !important;
    border-radius: 0 !important; /* Beholder skarpe hjørner */
    // margin: 5px 15px 25px 15px !important; /* SKABER LUFT HELE VEJEN RUNDT OM KORTET */
    margin: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    background: transparent !important;
    overflow: hidden !important;
}

.loop-bundle-product-card {
    justify-content: center !important;

  
}

/* 2. TVUNGET SKARPE BILLEDE-HJØRNER */
.loop-bundle-product-card-image-wrapper,
.loop-bundle-product-card-image-wrapper img,
.loop-card.loop-bundle-product-card img,
[class*="product-card-image"] {
    border-radius: 0 !important; /* Ingen bue på billeder */
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 3. TEKST-ALIGNMENT */
.loop-bundle-product-card-info-container {
    padding: 10px 0 !important;
    text-align: left !important;
}

.loop-bundle-product-card-title {
    font-size: 16px !important; /* Din standard p-størrelse */
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}

/* 4. CONTAINER FIX - SIKRER AT DER ER PLADS TIL MARGIN */
.loop-bundle-category-products-container,
.loop-products-available-container {
    display: flex !important;
    justify-content: center !important; /* Centrerer rækken af cards */
    padding: 0 !important;
    width: 100% !important;
}

/* Målretter den specifikke tekst-boks for at fjerne centrering og side-padding */
.loop-card-body.padding-10.white-space.text-center {
    padding: 10px 0 !important; /* Fjerner 10px i siderne, beholder 10px top/bund */
    text-align: left !important; /* Tvinger teksten til venstre */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Sikrer at alle elementer indeni rykker helt til venstre */
    width: 100% !important;
    margin: 0 !important;
}


.loop-category-list-new-container {
  padding: 0 !important;
  margin: 0 !important;
}










/* Styling the outer container */
.loop-bundle-product-quantity-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;  /* Add space between buttons and input */
}

/* Styling the buttons */
.loop-btn-input-decrease, .loop-btn-input-increase {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;  /* Size of the button */
    height: 35px;  /* Size of the button */
    font-size: 20px; /* Increase font size */
    background-color: #7e9f8b; /* Light background */
    border: 1px solid #ddd; /* Border similar to the second example */
    border-radius: 10% !important;  /* Rounded button */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition */
}

.loop-btn-input-decrease:disabled, .loop-btn-input-increase:disabled {
    background-color: #CBD8D0; /* Disabled state */
    cursor: not-allowed;
}

/* Hover effect for buttons */
.loop-btn-input-decrease:hover, .loop-btn-input-increase:hover {
    background-color: #6f8e7c; /* Slightly darker on hover */
}

/* Styling the input field */
.loop-form-input {
    width: 50px;  /* Set a fixed width for the input */
    height: 35px;  /* Match button height */
    text-align: center;
    font-size: 18px;  /* Adjust font size */
    border: 1px solid #ddd;  /* Border like the button */
    border-radius: 5px !important; /* Slight rounding */
    background-color: #fff; /* White background */
    padding: 5px;
}

/* Styling the outer container */
.loop-selected-variant-actions-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;  /* Add space between buttons and input */
}

/* Styling the buttons */
.loop-btn-input-decrease-small, .loop-btn-input-increase-small {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px !important;  /* Size of the button */
    height: 25px !important;  /* Size of the button */
    font-size: 14px; /* Increase font size */
    background-color: #7e9f8b; /* Light background */
    border: 1px solid #ddd; /* Border similar to the second example */
    border-radius: 5px !important;  /* Rounded button */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition */
}

/* Disabled state for buttons */
.loop-btn-input-decrease-small:disabled, .loop-btn-input-increase-small:disabled {
    background-color: #CBD8D0; /* Faded color when disabled */
    cursor: not-allowed;
}

/* Hover effect for buttons */
.loop-btn-input-decrease-small:hover, .loop-btn-input-increase-small:hover {
    background-color: #6f8e7c; /* Slightly darker on hover */
}

/* Styling the input field */
.loop-selected-variant-actions-input {
    width: 30px;  /* Set a fixed width for the input */
    height: 25px;  /* Match button height */
    text-align: center;
    font-size: 12px;  /* Adjust font size */
    border: 1px solid #ddd;  /* Border like the button */
    border-radius: 2px !important; /* Slight rounding */
    background-color: #fff; /* White background */
    padding: 5px;
}

.loop-bundle-image-container img{
   object-fit: fill;
    max-height: 20em;
}

.loop-btn-add-product {
    border-radius: 5px !important;
}

.loop-category-list {
    display: none !important;
}

.loop-bundle-select-product-title-new {
    display: none !important;
}

/* Skjul Loop bundle-billede */
.loop-bundle-image-container {
  display: none !important;
}

.loop-selected-variant-container{
   justify-content: space-evenly !important;
}
.loop-bundle-widget-frequency-dropdown,
.loop-bundle-widget-discount-badge-container{
  background: #ffffff !important;
  border-color: #000!important;
}
.loop-bundle-widget-frequency-dropdown p,
.loop-bundle-widget-discount-badge-container{
  color: #000 !important;
}
.loop-products-align-new{
  gap: 25px !important;
}
.loop-selected-bundle {
     min-height: 0px !important;
     max-height: 20em !important;
 }
.loop-bundle-loop-bundle-view-cart-text{
  color: #fff !important;
}
.loop-bundle-widget-frequency-dropdown-label{
   display: none !important;
}

@media (max-width: 767px) {
  .loop-bundle-product-card{
    justify-content: space-between !important;
  }

  .loop-card.loop-bundle-product-card img{
    height: inherit !important;
  }
}

@media (max-width: 767px) {
  /* Make sure the Loop page background spans the full viewport */
  #loop-background.loop-background {
    width: 100vw !important;
    min-height: 100vh !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove any container max-width that keeps it centered */
  #loop-background .loop-container.loop-bs-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Prevent any accidental horizontal overflow that reveals page bg */
  html, body {
    overflow-x: hidden !important;
  }
}
@media (max-width: 767px) {
  div.loop-selected-variant-container{
    padding-right: 25px !important;
  }
  .loop-bundle-widget-frequency-dropdown {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
  // .loop-product-card-description-body{
  //   gap: 10px !important;
  // }
}

.loop-bundle-widget-frequency-interval-items{
   justify-content: left !important;
}

.loop-bottom-sheet-header-container{
  padding-inline: 0px !important;
    padding-left: 10px !important;
}

/* Flytter priserne hhv. helt til venstre og helt til højre */
.loop-display-product-price {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; /* Sørger for de flugter vandret */
    width: 100% !important;
}

/* Sørger for at den overstregede pris (før-prisen) står til højre */
.loop-display-product-price span:last-child {
    text-align: right !important;
}



 /* 1. SØRG FOR AT INDHOLDET I KORTET KAN STRÆKKE SIG */
.loop-bundle-product-ct-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 400px !important; /* Juster denne så de får en god ensartet base-højde */
}

/* 2. TVING BILLEDERNE TIL AT FYLDE DET SAMME */
.loop-bundle-product-card-image-wrapper {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    overflow: hidden !important;
}

.loop-bundle-product-card-image-wrapper img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
}

/* 3. JUSTERET: MINDRE LUFT MELLEM TEKST OG KNAP */
.loop-bundle-product-title {
    /* Vi fjerner flex-grow og bruger en fast højde i stedet */
    flex-grow: 0 !important; 
    min-height: 3.5rem !important; /* Reserverer plads til 2-3 linjer, så de flugter */
    display: block !important;
    margin-bottom: 5px !important;
}

/* 4. PRIS OG KNAP - STYRER AFSTANDEN HERFRA */
.loop-display-product-price {
    display: flex !important;
    justify-content: space-between !important;
    /* margin-top: auto sørger stadig for de rammer bunden af 400px containeren */
    margin-top: auto !important; 
    padding: 5px 0 !important; /* Mindre padding her gør det mere kompakt */
}

.loop-btn-add-to-cart {
    width: 100% !important;
    margin-top: 5px !important;
}

.loop-bundle-product-card{
  justify-content: space-between !important;
}


/* ============================================================
   TOTAL RESET & RENSKRIVNING AF "GÅ TIL BETALING" KNAP
   ============================================================ */

/* 1. Nulstil selve knap-containeren */
.loop-btn-add-to-cart, 
button[aria-label*="Select subscription"],
.loop-bundle-add-to-cart-container button {
    font-size: 0 !important;          /* Skjuler alt original tekst */
    line-height: 0 !important;        /* Fjerner linjehøjde fra skjult tekst */
    color: transparent !important;    /* Gør original tekst usynlig */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;      /* Tuttelu-standard højde */
    background-color: #7e9f8b !important; /* Din grønne farve */
    border: none !important;
    border-radius: 5px !important;
    padding: 12px 20px !important;    /* Tuttelu padding-standard */
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
}

/* 2. Indsæt den rene tekst "Gå til betaling" */
.loop-btn-add-to-cart::before,
button[aria-label*="Select subscription"]::before,
.loop-bundle-add-to-cart-container button::before {
    content: "Bekræft valg" !important;
    font-size: 16px !important;       /* Tuttelu p-størrelse */
    font-weight: 400 !important;      /* Tuttelu-standard */
    color: #ffffff !important;
    visibility: visible !important;
    display: block !important;
    line-height: 1 !important;        /* Forhindrer den i at hoppe vertikalt */
}

/* 3. Aggressiv fjernelse af alle spans, divs og priser inde i knappen */
.loop-btn-add-to-cart *, 
button[aria-label*="Select subscription"] *,
.loop-bundle-add-to-cart-container button * {
    display: none !important;         /* Fjerner (Du sparer), (Gå til kurv) osv. */
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Fjern eventuel hover-effekt der ændrer teksten tilbage */
.loop-btn-add-to-cart:hover::before {
    color: #ffffff !important;
}

/* TVINGER "MEDLEMSPRIS" IND UNDER DEN VENSTRE PRIS */
.loop-display-product-price span:first-of-type {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    vertical-align: top !important;
}

.loop-display-product-price span:first-of-type::after {
    content: "Medlemspris" !important;
    display: block !important;
    font-size: 11px !important;
    color: #7e9f8b !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    visibility: visible !important;
}

/* SØRGER FOR AT CONTAINEREN HAR PLADS TIL DEN EKSTRA LINJE */
.loop-display-product-price {
    align-items: flex-start !important; /* Holder begge priser i toppen */
    min-height: 35px !important; /* Giver plads til teksten under prisen */
}


.loop-h2, .loop-h3{
  font-size: 18px !important;
  font-weight: 500 !important;
}

h1{
  font-size: 40px !important;
}

.loop-new-progress-range-line, .loop-progress-range-line{
  height: 10px !important;
}

@media (max-width: 1022px) {
  
.loop-h2, .loop-h3{
  font-size: 16px !important;
}

p{
  font-size: 14px !important;
}

h1{
  font-size: 22px !important;
}
  
/* 1. OVERSKRIFT: 16px, medium weight, ingen boks */
h2.loop-h2.loop-selected-bundle-title {
    font-size: 16px !important;
    font-weight: 500 !important; /* Medium weight */
    color: #000 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. PILEN: Sort, ingen boks, ingen baggrund */
.loop-bottom-sheet-header-icon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.loop-bottom-sheet-header-icon svg {
    fill: #000 !important; /* Sort pil */
}

/* Fjern den grønne kasse-styling fra headeren helt */
.loop-bottom-sheet-header-container {
    background: transparent !important;
    border: none !important;
    padding: 16px 16px 0px !important;
}

/* 3. PRISER: Sort aktuel pris til venstre for udstregede */
.loop-selected-bundle-item-price-container {
    display: flex !important;
    flex-direction: row-reverse !important; /* Vender rækkefølgen */
    justify-content: flex-end !important;
    gap: 8px !important;
    align-items: center !important;
}

.loop-selected-bundle-item-discounted-price {
    color: #000 !important; /* Aktuel pris #000 */
    font-weight: 500 !important;
}

.loop-selected-bundle-item-original-price {
    color: #999 !important;
    text-decoration: line-through !important;
    font-size: 0.9em !important;
}

/* 4. KNAPPER: Kvadratiske +/- knapper */
.loop-selected-bundle-item-quantity-button {
    width: 35px !important; /* Fast bredde og højde gør dem kvadratiske */
    height: 35px !important;
    min-width: 35px !important;
    padding: 0 !important;
    border-radius: 4px !important;
}

/* Tilpas input-feltet så det flugter med knapperne */
.loop-selected-bundle-item-quantity-input {
    height: 35px !important;
    width: 35px !important;
    border: 1px solid #e0e0e0 !important;
}

.loop-bottom-sheet-body-container{
  padding: 16px 27px 0px 16px !important;
}

.loop-bottom-sheet-body-info-text{
  text-align: left;
}

.loop-bottom-sheet-purchase-options-container{
  padding: 0px 16px !important; 
}

  .loop-selected-variant-actions-input{
    font-size: 14px;
  }

.loop-selected-variant-price-discount{
  color: #000 !important; 
}


  .loop-btn-input-decrease-small, .loop-btn-input-increase-small {
  height: 25px !important;
    width: 15px !important;
    }

.loop-bundle-new-description{
      padding-right: 16px !important;
}    

.loop-bundle-category-section-container{
  gap: 0px !important;
}

.loop-card-body.padding-10.white-space.text-center{
  padding: 0px !important;
}

.loop-display-product-price{
  padding: 0px !important;
}

.loop-card.loop-bundle-product-card{
  margin: 0px !important;
}

.loop-bottom-sheet.expanded{
  height: 700px !important;
}

}