.card-wrapper.emcm-card-wrapper {
    display: flex;
    flex-direction: column;
}

.emcm-compare-checkbox,
.emcm-section-checkbox {
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    cursor: pointer;
}

.emcm-compare-checkbox + .emcm-compare-checkbox {
    display: none;
}

.emcm-checkbox {
    --background: #fff;
    --border: #D1D6EE;
    --border-hover: #BBC1E1;
    --border-active: #1E2235;
    --tick: #fff;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.emcm-checkbox input,
.emcm-checkbox svg {
    width: 16px;
    height: 16px;
    display: block;
}

.emcm-checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    outline: none;
    background: var(--background);
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: box-shadow 0.3s;
    box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
}

.emcm-checkbox input:hover {
    --s: 2px;
    --b: var(--border-hover);
}

.emcm-checkbox input:checked {
    --b: var(--border-active);
}

.emcm-checkbox svg {
    pointer-events: none;
    fill: none;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--stroke, var(--border-active));
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    transform: scale(var(--scale, 1)) translateZ(0);
}

.emcm-checkbox.emcm-bounce {
    --stroke: var(--tick);
}

.emcm-checkbox.emcm-bounce input:checked {
    --s: 11px;
}

.emcm-checkbox.emcm-bounce input:checked+svg {
    animation: bounce 0.4s linear forwards 0.2s;
}

.emcm-checkbox.emcm-bounce svg {
    --scale: 0;
}

label.emcm-checkbox span {
    line-height: 14px;
    font-size: var(--emcm-checkbox-label-font-size);
}

@keyframes bounce {
    50% {
        transform: scale(1.2);
    }

    75% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}