/* Hide the original select dropdowns */
.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 */
fieldset.varb-radio-variation {
    background-color: transparent; /* Make the background transparent */
    display: flex; /* Use flexbox layout to display radio buttons in a row */
    padding: 0; /* Remove padding around the fieldset */
    margin: 10px 0; /* Add vertical spacing between fieldsets */
}

/* Style for each radio button label */
fieldset.varb-radio-variation label {
    border-radius: 5px; /* Round the corners of the radio button labels */
    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 */
}

/* Add a hover effect on the radio button labels */
fieldset.varb-radio-variation label: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) */
fieldset.varb-radio-variation label:not(:last-of-type) {
    margin-right: 10px; /* Add 10px of space to the right of all radio buttons except the last one */
}

/* Style for disabled 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) */
}

/* Add cross lines to the disabled radio buttons (using pseudo-element) */
/*.varb-radio-label.varb-disabled::before,*/
.varb-radio-label.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 */
    left: 0; /* Align the cross line to the left of the label */
    top: 50%; /* Vertically center the cross line */
    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) */
.varb-radio-label.varb-disabled::after {
    transform: translateY(-50%) rotate(-45deg); /* Rotate the cross line at -45 degrees */
}

/* Remove outline on focus for 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 */
.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 */
}