/* Base styles for the bundlex offers container */
.bundlex-offers-wrapper {
    font-family: Arial, sans-serif;
    width: 100%;
}

/* Style for each offer */
.bundlex-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #FFC107;
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative;
    background-color: #FFF2D5;
    background-color: #FFF; /* Default background */
    border-color: #eaeaea; /* Default border color */
}

/* Offer title and price container */
.bundlex-offer-inner {
    display: flex;
    width: 100%;
    align-items: center;
}

/* Offer content styles */
.bundlex-offer-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* Title aligned to the left */
.bundlex-offer-title {
    margin-left: 10px;
    flex: 1;
    text-align: left;
}

/* Pricing and previous price in the middle */
.bundlex-offer-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* Regular and sale price styles */
.bundlex-offer-sale-price {
    color: #198754; /* Green color for the offer price */
    font-weight: bold;
}

.bundlex-offer-regular-price {
    color: #6c757d; /* Grey color for the regular price */
    text-decoration: line-through;
}

/* Free shipping aligned to the right */
.bundlex-free-shipping {
    text-align: right;
    flex: 1;
    background-color: #0d6efd;
    color: white;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 12px;
    display: block;
}

.bundlex-offer.active {
    background-color: rgba(255, 242, 213, 0.75);
    border-color: #FFC107;
}

/* Active and hover styles */
.bundlex-offer:hover {
    background-color: rgba(255, 242, 213, 0.75); 
    border-color: #FFC107;
}

/* Best offer badge styles */
.bundlex-best-offer-badge {
    display: block;
    background-color: #ffc107;
    color: white;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
    position: absolute;
    top: -10px;
    left: -1px;
}

/* Action section styles */
.bundlex-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

/* Stock info styles */
.bundlex-stock-info {
    font-size: 14px;
    color: #ff6a00;
}

/* Container for the checkout form */
.bundlex-checkout-form-container {
    background: #fafafa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #eaeaea;
    margin-top: 20px;
    text-align: left;
}

/* Input fields and select dropdown within the form */
.bundlex-checkout-form-container input[type="text"],
.bundlex-checkout-form-container input[type="email"],
.bundlex-checkout-form-container input[type="tel"],
.bundlex-checkout-form-container select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Centering and enhancing the submit button */
#bundlex-checkout-submit {
    background-color: #FBDE31; /* Button background color */
    align-items: center;
    color: #1C1C1C; /* Button text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    padding: 15px 30px; /* Top and bottom padding and more padding on the sides for wider button */
    font-size: 1.2em; /* Larger font size */
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
    display: block; /* Block display to take the width of its container */
    margin: 20px auto; /* Top and bottom margin for spacing, auto on left and right for centering */
    transition: background-color 0.3s ease; /* Smooth transition effect for background color on hover */
    width: fit-content; /* Width of the button should fit its content */
}

/* Hover effect for the submit button */
#bundlex-checkout-submit:hover {
    background-color: #2DD144;
    color: #1C1C1C;
}

/* Offer description styles */
.multoffer-offer__desc,
.bundlex-offer-desc {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 4px;
}