/* Hide the default select dropdowns */
.variations select {
    display: none !important;
}

/* Create a container for our buttons */
.button-variations {
    display: flex;
    flex-wrap: nowrap;
    /* Keep buttons in a single line */
    gap: 10px;
    margin-bottom: 15px;
    /* overflow-x: auto; */
    /* Allow horizontal scrolling if needed */
    padding-bottom: 5px;
    /* Space for scrollbar */
}

/* Style for individual variation buttons */
.variation-button {
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    background-color: #fff;
    transition: all 0.3s ease;
    min-width: 80px;
    /* Fixed width */
    text-align: center;
    flex: 0 0 auto;
    /* Prevent buttons from growing/shrinking */
}

/* Hover state */
.variation-button:hover {
    border-color: #000;
}

/* Selected state */
.variation-button.selected {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

/* Out of stock state */
.variation-button.out-of-stock {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Clear variations button */
.clear-variations {
    display: inline-block;
    padding: 8px 15px;
    background-color: #f2f2f2;
    color: #333;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
}

.clear-variations:hover {
    background-color: #e6e6e6;
    border-color: #ccc;
}

/* Hide the default reset variations link */
.reset_variations {
    display: none !important;
}

/* Variation selection wrapper */
.variations-buttons-wrapper {
    margin-bottom: 20px;
}

/* style frequency */
.bos4w-display-plan-text {
    font-weight: 700;
    color: #2b2b2b;
    text-transform: uppercase;
}

.bos4w-display-wrap {
    width: 100%;
}


.bos4w-display-options ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bos4w-display-options li {
    margin: 0;
}

.bos4w-display-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bos4w-display-options label {
    display: inline-block;
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    transition: all 0.3s ease;
    user-select: none;
    min-width: 80px;
    text-align: center;
    flex: 0 0 auto;
}

.bos4w-display-options label:hover {
    border-color: #000;
}

.bos4w-display-options input[type="radio"]:checked+span,
.bos4w-display-options input[type="radio"]:checked+* {
    background-color: #000;
    color: white;
    border-color: #000;
}

.bos4w-display-options label.selected {
    background-color: #000;
    color: white;
    border-color: #000;
}


.variations_button.woocommerce-variation-add-to-cart-enabled button.single_add_to_cart_button.button.alt {
    margin-top: 20px !important;
    margin-left: 0px !important;
}

.bos4w-display-dropdown {
    margin-top: 20px;
    background: #f1f1f1;
    border-radius: 5px;
    padding: 20px 20px;
}

.bos4w-display-dropdown label {
    display: flex;
    margin-bottom: 10px;
}

select#bos4w-dropdown-plan {
    background: #fff;
    padding: 10px 20px;
    width: 100%;
}

#wc-stripe-express-checkout-element {
    justify-content: flex-start !important;
}

.single-product .content-top {
    background-color: transparent !important;
}
.bos4w-display-options {
    margin-bottom: 20px;
}
.variations_button.woocommerce-variation-add-to-cart-enabled button.single_add_to_cart_button.button.alt {
    margin-top: 0px !important;
    margin-left: 20px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .button-variations {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .variation-button {
        padding: 6px 12px;
        font-size: 14px;
        min-width: 70px;
    }

    #wc-stripe-express-checkout-element {
        justify-content: flex-start !important;
        flex-direction: column;
    }
}