/*
 * Custom Variation Fields Frontend Styles
 */

/* The main container for a group of selectable boxes */
.scv-radio-box-group {
    padding-top: 8px;
}

/* Flex container for the boxes */
.radio-box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; 
    padding-top: 8px;
}

/* Hide the actual radio button circle completely */
.radio-box-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* This is our visible, clickable box */
.radio-box-label {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border: 1px solid #dadce0; 
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    color: #5f6368; 
}

/* Style for the box on hover */
.radio-box-label:hover {
    border-color: #5f6368;
    background-color: #f8f9fa;
}

/*
 * This is the magic part!
 * When the hidden radio input is checked, we style the label that comes right after it.
 */
.radio-box-input:checked + .radio-box-label {
    background-color: #1a73e8; 
    border-color: #1a73e8;
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    transform: translateY(-2px);
}

/* Focus style for accessibility */
.radio-box-input:focus-visible + .radio-box-label {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a73e8;
}