.mvt-toggle {
    --mvt-w: 52px;
    --mvt-h: 28px;
    --mvt-pad: 3px;
    --mvt-track-left: #c3c4c7;
    --mvt-track-right: #2271b1;
    --mvt-knob: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mvt-toggle .mvt-label {
    cursor: pointer;
    user-select: none;
    opacity: .65;
    transition: opacity .2s, color .2s;
}

.mvt-toggle .mvt-label.is-active {
    opacity: 1;
}

/* Reset theme/Elementor button styles */
.mvt-toggle .mvt-switch,
.mvt-toggle .mvt-switch:hover,
.mvt-toggle .mvt-switch:focus {
    position: relative;
    flex: 0 0 auto;
    width: var(--mvt-w);
    height: var(--mvt-h);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--mvt-track-left);
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s;
}

.mvt-toggle[data-state="right"] .mvt-switch {
    background: var(--mvt-track-right);
}

.mvt-toggle .mvt-switch:focus-visible {
    outline: 2px solid var(--mvt-track-right);
    outline-offset: 2px;
}

.mvt-toggle .mvt-knob {
    position: absolute;
    top: var(--mvt-pad);
    left: var(--mvt-pad);
    width: calc(var(--mvt-h) - var(--mvt-pad) * 2);
    height: calc(var(--mvt-h) - var(--mvt-pad) * 2);
    border-radius: 50%;
    background: var(--mvt-knob);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s;
}

.mvt-toggle[data-state="right"] .mvt-knob {
    transform: translateX(calc(var(--mvt-w) - var(--mvt-h)));
}

@media (prefers-reduced-motion: reduce) {
    .mvt-toggle .mvt-switch,
    .mvt-toggle .mvt-knob,
    .mvt-toggle .mvt-label {
        transition: none;
    }
}

.mvt-notice {
    margin: 8px 0 0;
    font-size: 12px;
    text-align: center;
    color: #b32d2e;
}