/* Hide the default radio buttons for the specific name */
input[type="radio"][name*="posicionamento-maxila"],
input[type="radio"][name*="posicionamento-mandibula"] {
    position: absolute; /* Position the radio buttons off-screen */
    opacity: 0; /* Make radio buttons invisible */
    width: 175px; /* Set the width */
    height: 100px; /* Set the height */
}

/* Style for the list items specific to sobredentadura-posicionamento-maxila */
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item,
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item {
    display: inline-block;
    width: 175px; /* Set the width */
    height: 100px; /* Set the height */
    margin: 10px; /* Space between options */
    cursor: pointer; /* Change cursor to pointer */
    position: relative; /* Position relative for background */
    background-repeat: no-repeat;
    background-size: contain;
}

/* Set background images based on radio button values for maxila using :has() */
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"][value="1"]) {
    background-image: url('/wp-content/uploads/2024/10/42.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"][value="2"]) {
    background-image: url('/wp-content/uploads/2024/10/44.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"][value="3"]) {
    background-image: url('/wp-content/uploads/2024/10/46.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"][value="4"]) {
    background-image: url('/wp-content/uploads/2024/10/48.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"][value="5"]) {
    background-image: url('/wp-content/uploads/2024/10/50.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"][value="6"]) {
    background-image: url('/wp-content/uploads/2024/10/52.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"][value="7"]) {
    background-image: url('/wp-content/uploads/2024/10/54.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"][value="8"]) {
    background-image: url('/wp-content/uploads/2024/10/56.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:last-child {
    background-image: url('/wp-content/uploads/2024/10/58.svg');
}

/* Set background images based on radio button values for mandibula using :has() */
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"][value="1"]) {
    background-image: url('/wp-content/uploads/2024/10/43.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"][value="2"]) {
    background-image: url('/wp-content/uploads/2024/10/45.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"][value="3"]) {
    background-image: url('/wp-content/uploads/2024/10/47.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"][value="4"]) {
    background-image: url('/wp-content/uploads/2024/10/49.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"][value="5"]) {
    background-image: url('/wp-content/uploads/2024/10/51.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"][value="6"]) {
    background-image: url('/wp-content/uploads/2024/10/53.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"][value="7"]) {
    background-image: url('/wp-content/uploads/2024/10/55.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"][value="8"]) {
    background-image: url('/wp-content/uploads/2024/10/57.svg');
}
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:last-child {
    background-image: url('/wp-content/uploads/2024/10/59.svg');
}

/* Hide the label for the "outro" option by setting opacity to 0 */
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:last-child .wpcf7-list-item-label,
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:last-child .wpcf7-list-item-label {
    opacity: 0; /* Hide the label when the value is "outro" */
}

/* Optional: Add styles for checked state */
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item:has(input[type="radio"]:checked),
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item:has(input[type="radio"]:checked) {
    border: 2px solid #0073aa; /* Highlight the selected option */
}

/* Add padding and background to the list item labels */
.wpcf7-form-control-wrap[data-name*="posicionamento-maxila"] .wpcf7-list-item-label,
.wpcf7-form-control-wrap[data-name*="posicionamento-mandibula"] .wpcf7-list-item-label {
    padding-inline: 10px;
    display: block;
    background: var(--theme-palette-color-1);
    width: fit-content;
    color: white; /* Set text color */
}