/* Hide the original select dropdowns */
.variations-as-radio-buttons .variations select {
    display: none !important; /* Hide the select elements (dropdowns) on the product page, important ensures this is applied */
}

/* Style the fieldset containing the radio buttons */
.variations-as-radio-buttons fieldset.varb-radio-variation {
    background-color: transparent; /* Make the background transparent */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Use flexbox layout to display radio buttons in a row */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0; /* Remove padding around the fieldset */
    margin: 10px 0; /* Add vertical spacing between fieldsets */
    border: 0;
}

/* Style for each radio button label */
.variations-as-radio-buttons fieldset.varb-radio-variation label {
    border-radius: 5px; /* Round the corners of the radio button labels */
    -webkit-box-shadow: 0 0 0 2px rgba(106, 106, 106, 0.25);
            box-shadow: 0 0 0 2px rgba(106, 106, 106, 0.25); /* Add a subtle focus glow around the label when focused */
    padding: 5px 7px; /* Add padding inside the label for spacing */
    position: relative; /* Allow absolute positioning of pseudo-elements inside the label */
    cursor: pointer; /* Change the cursor to a pointer to indicate it's clickable */
    margin-right: 2px; /* This value should be the same as the box-shadow property of label  */
    margin-bottom: 10px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

/* Add a hover effect on the radio button labels */
.variations-as-radio-buttons fieldset.varb-radio-variation label:not(.varb-disabled):hover {
    outline: 2px solid #b2b2b2; /* Show a light gray outline when the user hovers over a label */
}

/* Add space between radio buttons (except for the last one) */
.variations-as-radio-buttons fieldset.varb-radio-variation label:not(:last-of-type) {
    margin-left: 10px; /* Add 10px of space to the right of all radio buttons except the last one */
}

/* Style for disabled radio buttons */
.variations-as-radio-buttons .varb-radio-label.varb-disabled {
    opacity: 0.5; /* Make the disabled label semi-transparent to indicate it's disabled */
    cursor: not-allowed; /* Change the cursor to 'not-allowed' to indicate the option can't be selected */
    position: relative; /* Needed for positioning pseudo-elements like the disabled "cross" */
    overflow: hidden; /* Hide anything that overflows the label's boundary (like the cross lines) */
}

.variations-as-radio-buttons .varb-radio-label.varb-disabled.varb-out-of-stock {
    cursor: pointer;
}

/* Add cross lines to the disabled radio buttons (using pseudo-element) */
/*.varb-radio-label.varb-disabled::before,*/
.variations-as-radio-buttons .varb-radio-label.blur_and_cross.varb-disabled::after {
    content: ''; /* Define a pseudo-element with no content, but just for its styles */
    position: absolute; /* Position the pseudo-element absolutely within the label */
    background-color: #f00; /* Red color for the cross lines */
    height: 2px; /* Set the thickness of the cross lines */
    width: 100%; /* Make the cross line span the full width of the label */
    right: 0; /* Align the cross line to the left of the label */
    top: 50%; /* Vertically center the cross line */
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); /* Adjust positioning for perfect vertical centering */
    z-index: -1; /* Ensure the cross lines stay behind the label's text */
}

/* Second cross line, rotated at -45 degrees (X mark effect) */
.variations-as-radio-buttons .varb-radio-label.blur_and_cross.varb-disabled::after {
    -webkit-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg); /* Rotate the cross line at -45 degrees */
}

.variations-as-radio-buttons .varb-radio-label.hide.varb-disabled {
    display: none;
}

/* Remove outline on focus for radio buttons */
.variations-as-radio-buttons input.varb-radio-variation-input[type="radio"]:focus {
    outline: none; /* Remove the default outline when the radio button is focused */
}

/* Add an outline when a radio button is checked */
.variations-as-radio-buttons .varb-radio-label:has(input.varb-radio-variation-input[type="radio"]:checked) {
    outline: 2px solid #b2b2b2; /* Add a light gray outline when the radio button is selected */
}

/*
 * ======================================================================
 * Theme specific CSS
 * ======================================================================
 */

/* Twenty Twenty Two Theme */
.woocommerce.variations-as-radio-buttons-twentytwenty-two div.product form.cart table.variations td, 
.woocommerce.variations-as-radio-buttons-twentytwenty-two div.product form.cart table.variations th {
    display: block;
}
.woocommerce.variations-as-radio-buttons-twentytwenty-two table.variations tr td, 
.woocommerce.variations-as-radio-buttons-twentytwenty-two table.variations tr th {
    padding-bottom: 0
}

/* Twenty Twenty Three Theme */
.woocommerce.variations-as-radio-buttons-twentytwenty-three div.product form.cart table.variations td, 
.woocommerce.variations-as-radio-buttons-twentytwenty-three div.product form.cart table.variations th {
    display: block;
}
.woocommerce.variations-as-radio-buttons-twentytwenty-three table.variations tr td, 
.woocommerce.variations-as-radio-buttons-twentytwenty-three table.variations tr th {
    padding-bottom: 0
}

/* Twenty Twenty Four Theme */
.woocommerce.variations-as-radio-buttons-twentytwenty-four div.product form.cart table.variations td, 
.woocommerce.variations-as-radio-buttons-twentytwenty-four div.product form.cart table.variations th {
    display: block;
}
.woocommerce.variations-as-radio-buttons-twentytwenty-four table.variations tr td, 
.woocommerce.variations-as-radio-buttons-twentytwenty-four table.variations tr th {
    padding-bottom: 0
}

/* Twenty Twenty Five Theme */
.woocommerce.variations-as-radio-buttons-twentytwenty-five div.product form.cart table.variations td, 
.woocommerce.variations-as-radio-buttons-twentytwenty-five div.product form.cart table.variations th {
    display: block;
}
.woocommerce.variations-as-radio-buttons-twentytwenty-five table.variations tr td, 
.woocommerce.variations-as-radio-buttons-twentytwenty-five table.variations tr th {
    padding-bottom: 0
}

/* Hello Elementor Theme */

.woocommerce.variations-as-radio-buttons-helloelementor div.product form.cart .variations td, 
.woocommerce.variations-as-radio-buttons-helloelementor div.product form.cart .variations th {
    display: block;
    text-align: right;
    padding: 0;
}

.variations-as-radio-buttons-helloelementor table tbody>tr:nth-child(odd)>td, 
.variations-as-radio-buttons-helloelementor table tbody>tr:nth-child(odd)>th,
.variations-as-radio-buttons-helloelementor table tbody tr:hover>td, 
.variations-as-radio-buttons-helloelementor table tbody tr:hover>th {
    background-color: transparent;
}