/* 1. Force Vertical Layout */
.webform-type-radios .form-radios {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* 2. Style the Item Wrapper as the Button */
/* This makes the whole row look like a button regardless of HTML depth */
.webform-type-radios .form-item {
    position: relative !important;
    padding: 10px !important;
    background-color: #f8f9fa !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s ease-in-out !important;
}

/* 3. Hover Effect on the Wrapper */
.webform-type-radios .form-item:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* 4. Selected State - Target the Wrapper only */
.webform-type-radios .form-item:has(input:checked) {
    background-color: #d05163 !important;
    border-color: #d05163 !important;
}

/* Force the text inside to be white, but keep background transparent */
.webform-type-radios .form-item:has(input:checked) label {
    color: #ffffff !important;
    background-color: transparent !important;
    background: none !important;
}

/* 5. THE CLICK FIX - Ensure this is at the VERY top */
.webform-type-radios input[type="radio"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 100 !important; /* Extremely high to stay on top */
    cursor: pointer !important;
    margin: 0 !important;
}
/* 1. Force the container to recognize the height of the buttons */
.webform-type-radios .form-radios {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 30px !important; /* This should work now */
    height: auto !important;
    overflow: visible !important;
}

/* 2. Add margin to the very last button in the list */
.webform-type-radios .form-item:last-child {
    margin-bottom: 40px !important;
}

/* 3. The "Safety" fix: Add padding to the outer wrapper */
.webform-type-radios {
    padding-bottom: 30px !important;
    display: block !important;
}

/* 1. Use padding instead of margin to force the gap at the top */
.webform-type-radios {
    padding-top: 30px !important; 
    display: block !important;
    clear: both !important;
}

/* 2. Target the Title/Label specifically if it's still too close */
.webform-type-radios label.webform-element-help-container--title,
.webform-type-radios .form-item--title {
    display: block !important;
    margin-top: 20px !important;
    padding-top: 10px !important;
}
.progress-step.is-active .progress-marker::before {
background-color: #d05163;
}