.elementor-2193 .elementor-element.elementor-element-4575bc5{--display:flex;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2193 .elementor-element.elementor-element-b2694ec{--display:flex;}/* Start custom CSS *//* Make the wrapper fill the Elementor container */
.academy-input-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
}

/* Hide the actual browser circle/box but keep it functional */
.real-radio, .real-checkbox {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

/* The visual checkmark circle (put this in the top right) */
.custom-checkmark {
    position: absolute;
    top: 15px;
    right: 15px;
    height: 24px;
    width: 24px;
    background-color: #fff;
    border: 2px solid #E0E0E0;
    border-radius: 50%;
    pointer-events: none; /* Let clicks pass through to the input */
}

/* Green background when checked */
.real-radio:checked ~ .custom-checkmark, 
.real-checkbox:checked ~ .custom-checkmark {
    background-color: #00D084;
    border-color: #00D084;
}

/* White inner checkmark icon */
.custom-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 8px; top: 4px; width: 5px; height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.real-radio:checked ~ .custom-checkmark:after,
.real-checkbox:checked ~ .custom-checkmark:after {
    display: block;
}

/* Highlight the whole Elementor Container border (optional but looks like AG1) */
/* This requires a tiny bit of JS to toggle a class on the parent *//* End custom CSS */