.subscription-options-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.subscription-options-list li {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}

.subscription-options-list li label input[type="radio"] {
    margin-right: 15px;
}
.subscription-options-list{
    width: fit-content;
}
/* Container styling for product options */
.product-options-toggle {
    margin-bottom: 30px; /* Space between the title and product type options */
}

.product-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px; /* Space between the title and the radio buttons */
}

/* Styling for the radio button groups */
.radio-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Space between each product type option */
}

.radio-group input[type="radio"] {
    margin-right: 10px; /* Space between the radio button and the label */
}

.radio-group label {
    font-size: 16px;
}

/* Alignment and spacing for subscription plans */
.subscription-options-list {
    list-style: none;
    padding-left: 0;
}

.subscription-field {
    margin-bottom: 10px; /* Space between subscription plans */
}

.subscription-field label {
    display: flex;
    align-items: center;
}

.subscription-field input[type="radio"] {
    margin-right: 10px; /* Space between radio button and subscription plan text */
}

.subscription-fields-wrapper {
    margin-top: 20px; /* Space between the section title and the subscription plans */
}

ul.subscription-options-list li {
    margin-bottom: 10px; /* Space between subscription items */
}



/* Ensure the modal and its elements are styled correctly */
/* Ensure the modal and its elements are styled correctly */
.ui-dialog {
    z-index: 10000 !important;  /* Ensure modal is on top of other elements */
}

.ui-datepicker {
    z-index: 10001 !important;  /* Ensure the datepicker is above the modal */
}

.ui-dialog-titlebar-close {
    display: block !important;  /* Ensure the close button is visible */
}

.ui-dialog-buttonpane {
    display: block !important;  /* Ensure the button pane is visible */
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0.5em;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
    background-color: #005177;
}

.ui-dialog-titlebar-close {
    position: absolute;
    right: 10px;
    top: 5px;
}

#subscription-modal {
    display: none;  /* Hide the modal by default */
    border-radius: 10px;
}

button.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    color: white;
    background-color: #0073aa;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button.button:hover {
    background-color: #005177;
}

.subscription-plans {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin: 0px;
    flex-wrap: wrap; /* Added to handle overflowing content */
}

.subscription-plan {
    border: 2px solid #ccc;
    padding: 8px;
    width: 90px;
    text-align: center;
    border-radius: 8px;
    background-color: #fff;
    transition: border-color 0.3s ease, background-color 0.3s ease; /* Ensure both border and background transition smoothly */
    list-style-type: none;
    cursor: pointer; /* Added pointer cursor to indicate the card is clickable */
}

.subscription-plan.highlight {
    border-color: #ccc;
    background-color: #dbdbdbab;
    list-style-type: none;
    transform: scale(1.05); /* Slightly enlarge the highlighted card for visual emphasis */
}

.subscription-plan .price {
    font-size: 14px;
    font-weight: bold;
}

.subscription-plan .discount {
    font-size: 14px;
    text-decoration: line-through;
    color: #888;
}

.subscription-plan .final-price {
    font-size: 14px;
    color: #000;
    font-weight: 700;
    margin-bottom: 10px;
}

.subscription-plan .description {
    font-size: 14px;
    margin-top: 10px;
    color: #555;
}

.subscription-plan h3 {
    font-size: 14px;
    margin-bottom: 10px;
    background: #929b94;
    border-radius: 5px;
    font-weight: 600;
    color: #fff;
    padding: 5px; /* Added padding to the header for a cleaner look */
}

/* Hide the radio buttons */
.subscription-plan input[type="radio"] {
    display: none;
}
.discount-label {
    color: #767676;
    font-weight: bold;
    line-height: 20px;
    font-size: 14px;
}

/* Added media query for better responsiveness */
@media (max-width: 768px) {
    .subscription-plan {
        width: 80px; /* Reduce the width for smaller screens */
        padding: 6px;
    }

    .subscription-plan h3 {
        font-size: 16px; /* Adjust header size for smaller screens */
    }

    .subscription-plan .price,
    .subscription-plan .discount,
    .subscription-plan .final-price {
        font-size: 12px; /* Reduce text sizes for smaller screens */
    }
}
/* Default Horizontal List View */
.subscription-plan-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.subscription-plan-list .subscription-plan {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}

/* Card View */
.subscription-plan-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
}

.subscription-plan-card .subscription-plan {
    width: 48%;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Advanced List View with radio buttons */
.subscription-plan-list input[type="radio"] {
    margin-right: 10px;
}

.settings-section-subscription {
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
}
.settings-section-subscription h2, .settings-section-subscription h3 {
    color: #333;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.description {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}
.save-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.success-message {
    padding: 10px;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    margin-bottom: 20px;
    border-radius: 4px;
}
select#select_plan_view {
    padding: 6px;
}
.preview-box .subscription-plans {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin: 0px;
    flex-wrap: wrap; /* Added to handle overflowing content */
}

.preview-box .subscription-plan {
    border: 2px solid #ccc;
    padding: 8px;
    width: 90px;
    text-align: center;
    border-radius: 8px;
    background-color: #fff;
    transition: border-color 0.3s ease, background-color 0.3s ease; /* Ensure both border and background transition smoothly */
    list-style-type: none;
    cursor: pointer; /* Added pointer cursor to indicate the card is clickable */
}
.preview-box .subscription-plan .price {
    font-size: 14px;
    font-weight: bold;
}

.preview-box .subscription-plan .discount {
    font-size: 14px;
    text-decoration: line-through;
    color: #888;
}

.preview-box .subscription-plan .final-price {
    font-size: 14px;
    color: #000;
    font-weight: 700;
    margin-bottom: 10px;
}

.preview-box .subscription-plan .description {
    font-size: 14px;
    margin-top: 10px;
    color: #555;
}

.preview-box .subscription-plan h3 {
    font-size: 14px;
    margin-bottom: 10px;
    background: #929b94;
    border-radius: 5px;
    font-weight: 600;
    color: #fff;
    padding: 5px; /* Added padding to the header for a cleaner look */
    margin-top: 0; /* Removed top margin to make the card look more compact */
}

/* Hide the radio buttons */
.preview-box .subscription-plan input[type="radio"] {
    display: none;
}
.preview-box .discount-label {
    color: #767676;
    font-weight: bold;
    line-height: 20px;
    font-size: 14px;
}

.two_in_one_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.preview-box-2 .subscription-plan {
    width: 48%; /* Adjusts to fit two cards per row */
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px; /* Smaller font size */
    text-align: center; /* Center content inside cards */
}

.preview-box-2 .subscription-plan h3 {
    font-size: 14px;
    margin-top: 0;
}

.preview-box-2 .subscription-plan .final-price {
    font-size: 16px; /* Smaller final price font size */
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

.preview-box-2 .subscription-plan .discount-label {
    color: #303030;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    text-align: center;
}

.preview-box-2 .subscription-plan input[type="radio"] {
    display: none;
}

.preview-box-2 .subscription-plan label {
    display: block;
    cursor: pointer;
}

.preview-box-2 .subscription-plan input[type="radio"]:checked + label {
    border: 2px solid #0073aa;
    background-color: #f0f0f0;
}
.preview-box-3 .subscription-plans{
    border: 1px solid #00000036;
    border-radius: 15px;
    padding: 0px 10px;
}
.preview-box-3 .subscription-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    margin-bottom: 0px;
}
.preview-box-3  .subscription-plan input[type="radio"] {
    display: block;
}
.preview-box-3 .subscription-plan.highlight {
    border-color: none;
    background-color: none;
    list-style-type: none;
    transform: none;
}
.preview-box-3 label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}
.preview-box-3 .select-plan{
    width: 85%;
    margin: auto;
    margin-left: 45px;
}
.preview-box-3 select#plans {
    border-radius: 10px;
    margin-bottom: 10px;
}
/* Main container for the plan options */
.preview-box-4 {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #fff;
}

/* Style for the list of plans */
.preview-box-4 .subscription-plans {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style for each plan option */
.preview-box-4 .subscription-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.preview-box-4 .subscription-plan:hover {
    background-color: #f0f0f0;
}

/* Hide the delivery frequency initially */
.preview-box-4 .delivery-frequency {
    padding-left: 50px;
    padding-top: 0px;
    display: none;
    font-size: 14px;
    color: #666;
}

.preview-box-4 .plan-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.preview-box-4 .plan-price {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* Style the radio buttons inside the plans */
.preview-box-4 .subscription-plan input[type="radio"] {
    margin-right: 10px;
}

/* When subscription plan is selected, show the delivery frequency options */
.preview-box-4 input#subscribe-save:checked ~ .delivery-frequency {
    display: block;
}

.preview-box-4 .delivery-title {
    font-weight: bold;
    margin-bottom: 10px;
    margin-top:5px;
}

.preview-box-4 .frequency-option {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.preview-box-4 .frequency-option input[type="radio"] {
    margin-right: 10px;
}

/* Ensure all frequency options are aligned properly */
.preview-box-4 .frequency-option label {
    margin-left: 10px;
}
.preview-box-4 label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}
.privew-title-class {
    margin-top: 0px;
}

/* CSS for display views */
.preview-box .subscription-plans {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin: 0px;
    flex-wrap: wrap; /* Added to handle overflowing content */
}

.preview-box .subscription-plan {
    border: 2px solid #ccc;
    padding: 8px;
    width: 90px;
    text-align: center;
    border-radius: 8px;
    background-color: #fff;
    transition: border-color 0.3s ease, background-color 0.3s ease; /* Ensure both border and background transition smoothly */
    list-style-type: none;
    cursor: pointer; /* Added pointer cursor to indicate the card is clickable */
}
.preview-box .subscription-plan .price {
    font-size: 14px;
    font-weight: bold;
}

.preview-box .subscription-plan .discount {
    font-size: 14px;
    text-decoration: line-through;
    color: #888;
}

.preview-box .subscription-plan .final-price {
    font-size: 14px;
    color: #000;
    font-weight: 700;
    margin-bottom: 5px;
}

.preview-box .subscription-plan .description {
    font-size: 14px;
    margin-top: 10px;
    color: #555;
}

.preview-box .subscription-plan h3 {
    font-size: 14px;
    margin-bottom: 10px;
    background: #929b94;
    border-radius: 5px;
    font-weight: 600;
    color: #fff;
    padding: 5px; /* Added padding to the header for a cleaner look */
    margin-top: 0; /* Removed top margin to make the card look more compact */
}

/* Hide the radio buttons */
.preview-box .subscription-plan input[type="radio"] {
    display: none;
}
.preview-box .discount-label {
    color: #767676;
    font-weight: bold;
    line-height: 20px;
    font-size: 14px;
}

.two_in_one_row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 20px;
}

.preview-box-2 .subscription-plan {
    width: 46%; /* Adjusts to fit two cards per row */
    background-color: #f9f9f9;
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px; /* Smaller font size */
    text-align: center; /* Center content inside cards */
}

.preview-box-2 .subscription-plans {
    width: 65%;
}

.preview-box-2 .subscription-plan h3 {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 3px;
}

.preview-box-2 .subscription-plan .discount {
    text-decoration: line-through;
    color: #6e6e6e;
    font-size: 14px; /* Smaller discount font size */
    display: block;
}

.preview-box-2 .subscription-plan .final-price {
    font-size: 16px; /* Smaller final price font size */
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

.preview-box-2 .subscription-plan li {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preview-box-2 .subscription-plan input[type="radio"] {
    display: none;
}

.preview-box-2 .subscription-plan label {
    display: block;
    cursor: pointer;
}

.preview-box-2 .subscription-plan input[type="radio"]:checked + label {
    border: 2px solid #0073aa;
    background-color: #f0f0f0;
}
.preview-box-3 .subscription-plans{
    border: 1px solid #00000036;
    border-radius: 15px;
    padding: 10px 10px;
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.preview-box-3 .subscription-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    margin-bottom: 0px;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
}
.preview-box-3 .subscription-plan .final-price{
    margin-bottom: 0px;
}
.preview-box-3 label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}
.preview-box-3 .subscription-plan h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 10px 0px;
    background: none;
}
.preview-box-3 .select-plan{
    width: 85%;
    margin: auto;
    margin-left: 45px;
}
.preview-box-3 select#plans {
    border-radius: 10px;
    margin-bottom: 10px;
}
/* Main container for the plan options */
.preview-box-4 {
    width: 65%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #fff;
}
.preview-box-4 .subscription-plan input[type="radio"] {
    display: block;
}
.preview-box-4 .subscription-plan.highlight {
    border-color: none;
    background-color: none;
    list-style-type: none;
    transform: none;
}
/* Style for the list of plans */
.preview-box-4 .subscription-plans {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

/* Style for each plan option */
.preview-box-4 .subscription-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.preview-box-4 .subscription-plan:hover {
    background-color: #f0f0f0;
}

/* Hide the delivery frequency initially */
.preview-box-4 .delivery-frequency {
    padding-left: 50px;
    padding-top: 0px;
    display: none;
    font-size: 14px;
    color: #666;
}

.preview-box-4 .plan-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.preview-box-4 .plan-price {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* Style the radio buttons inside the plans */
.preview-box-4 .subscription-plan input[type="radio"] {
    margin-right: 10px;
}

/* When subscription plan is selected, show the delivery frequency options */
.preview-box-4 input#subscribe-save:checked ~ .delivery-frequency {
    display: block;
}

.preview-box-4 .delivery-title {
    font-weight: bold;
    margin-bottom: 10px;
    margin-top:5px;
}

.preview-box-4 .frequency-option {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.preview-box-4 .frequency-option input[type="radio"] {
    margin-right: 10px;
}

/* Ensure all frequency options are aligned properly */
.preview-box-4 .frequency-option label {
    margin-left: 10px;
    gap: 10px;
}
.preview-box-4 label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}
.privew-title-class {
    margin-top: 0px;
}
.subscription-plan-card h3{
    width: 100%;
}
.subscription-plan-card .discount {
    display: flex;
    align-items: center;
}
.subscription-plan-card .discount-label {
    width: 100%;
    text-align: left;
}

.variable_subscription_wrapper {
    display: flex;
    width: 100%;
    gap: 20px;
}
.variable_subscription_plans {
    height: 100%;
}

form.cart .quantity,
form.cart .single_add_to_cart_button:not(#add-to-cart-button) {
    
}

.variable_subscription_wrapper .discount-label{
    text-align: center;
}

.variable_subscription_wrapper  .subscription-plan-card .discount {
    display: flex;
    align-items: center;
    justify-content: center;
}

.variable_subscription_wrapper  .subscription-plan.selected {
    background-color: #dbdbdbab;
    list-style-type: none;
    transform: scale(1.05); /* Slightly enlarge the highlighted card for visual emphasis */
}

.variable_subscription_wrapper .preview-box.preview-box-2{
    width: 100%;
}

.variable_subscription_wrapper .subscription-plans {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0px;
    flex-wrap: wrap; /* Added to handle overflowing content */
}