/* Base styling for hiding the original form inputs */

.gloo-switcher-checkbox .elementor-field-option input[type=checkbox],
.gloo-switcher-radio .elementor-field-option input[type=radio] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Shared label styling for custom toggle switches */
.gloo-switcher-checkbox .elementor-field-option input[type=checkbox] + label,
.gloo-switcher-radio .elementor-field-option input[type=radio] + label {
    position: relative;
    /* Space for toggle switch */
    cursor: pointer;
    line-height: 24px; /* Adjust line height */
    display: inline-block;
    margin-right: 20px; /* Space between toggle switches */
}
 
/* Creates the toggle background */
.gloo-switcher-checkbox .elementor-field-option input[type=checkbox] + label:before,
.gloo-switcher-radio .elementor-field-option input[type=radio] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; /* Toggle switch background width */
    height: 20px; /* Toggle switch background height */
    transition: background-color 0.3s ease;
}

/* Creates the toggle handle */
.gloo-switcher-checkbox .elementor-field-option input[type=checkbox] + label:after,
.gloo-switcher-radio .elementor-field-option input[type=radio] + label:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px; /* Starting position of the handle */
    width: 16px; /* Toggle handle width */
    height: 16px; /* Toggle handle height */
    transition: transform 0.3s ease;
}

.gloo-switcher-checkbox .elementor-field-option input[type=checkbox]:checked + label:after,
.gloo-switcher-radio .elementor-field-option input[type=radio]:checked + label:after {
    transform: translateY(-50%) translateX(20px); /* Moves handle to the right */
}

.elementor-field-type-checkbox.gloo-switcher-checkbox.gloo-switcher-flip .elementor-field-option input[type=checkbox] + label:after,
.elementor-field-type-radio.gloo-switcher-radio.gloo-switcher-flip .elementor-field-option input[type=radio] + label:after {
    left: 22px !important; 
    right: unset !important;
}
.elementor-field-type-checkbox.gloo-switcher-checkbox.gloo-switcher-flip .elementor-field-option input[type=checkbox]:checked + label:after,
.elementor-field-type-radio.gloo-switcher-radio.gloo-switcher-flip .elementor-field-option input[type=radio]:checked + label:after {
    transform: translateY(-50%) translateX(-20px);
}

.elementor-field-type-checkbox.gloo-switcher-checkbox.gloo-switcher-flip .elementor-field-option input[type=checkbox] + label:after, 
.elementor-field-type-radio.gloo-switcher-radio.gloo-switcher-flip .elementor-field-option input[type=radio] + label:after {
    right: 2px !important;
    left: unset;
}

.elementor-field-type-checkbox.gloo-switcher-flip-after.gloo-switcher-checkbox.gloo-switcher-flip .elementor-field-option input[type=checkbox] + label:after,
.elementor-field-type-radio.gloo-switcher-flip-after.gloo-switcher-radio.gloo-switcher-flip .elementor-field-option input[type=radio] + label:after {
    right: 2px !important;
    left: unset !important;
}

html[dir="rtl"] .elementor-field-type-checkbox.gloo-switcher-checkbox.gloo-switcher-flip .elementor-field-option input[type=checkbox] + label:after, 
html[dir="rtl"] .elementor-field-type-radio.gloo-switcher-radio.gloo-switcher-flip .elementor-field-option input[type=radio] + label:after {
    right: unset !important;
}

html[dir="rtl"] .elementor-field-type-checkbox.gloo-switcher-checkbox.gloo-switcher-flip.gloo-switcher-flip-after .elementor-field-option input[type=checkbox] + label:after, 
html[dir="rtl"] .elementor-field-type-radio.gloo-switcher-radio.gloo-switcher-flip.gloo-switcher-flip-after .elementor-field-option input[type=radio] + label:after {
    right: 2px !important;
}