#quantity-offers .preview-offer {
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #d1d1d1; /* Default non-selected border */
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: 'Cairo', sans-serif;
    min-height: 100px;
    flex-direction: row;
  }

  #quantity-offers .preview-offer.selected {
    background: #fff0ea; /* Light shade of your ACF color */
    border-color: var(--lp-color); /* Using a CSS variable for ACF color */
  }

  #quantity-offers .preview-offer img {
    margin-right: 5px;
     margin-left: 5px;
    object-fit: contain; /* Ensures the image is not stretched */
    flex-shrink: 0; /* Prevents the image from shrinking */
  }

  #quantity-offers .offer-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
  }

  #quantity-offers .offer-title {
    font-weight: bold;
    padding-bottom: 5px;
     font-size: 16px; /* Increase font size */
    line-height: 1.5; /* Add more line height */
  }

  #quantity-offers .offer-badge {
    background: var(--lp-color); /* Using a CSS variable for ACF color */
    color: #fff;
    padding: 8px 8px; /* 5px top and bottom, 10px left and right */
    border-radius: 5px;
    display: inline-block; /* This will make the badge only as wide as its content plus padding */
    white-space: nowrap; /* Prevents the badge text from wrapping */
    max-width: fit-content; /* Ensures the badge is only as wide as its content */

    flex-shrink: 0; /* Prevents the badge from shrinking */
    font-size: 13px;
    font-weight: bold;
  }

#quantity-offers .pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns prices to the right */
    justify-content: center; /* Centers prices vertically */
}

#quantity-offers .pricing div {
      min-width: 70px;
    text-align: right; /* Align text to the right */
    white-space: nowrap;
}


  #quantity-offers .compare-price {
    text-decoration: line-through;
    margin: 0; /* Reset margins for consistent alignment */
     color: gray;
     font-size: 16px;
  }

  #quantity-offers .sale-price {
  font-weight: bold;
    margin: 0; /* Reset margins for consistent alignment */
       font-size: 16px;
  }