input[type='checkbox'] {
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    box-shadow: none;
    border: 2px solid var(--primary);
    outline: none !important;
    cursor: pointer; /* Added for better UX */
    transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transitions */
    position: relative;
}

input[type='checkbox']:not(:checked) {
    background-color: white;
    border-color: var(--primary);
}

    input[type='checkbox']:checked {
        background-color: var(--primary);
        border-color: var(--primary);
        outline: none
    }

        input[type='checkbox']:checked:focus {
            border-color: var(--primary-hover);
            outline: 2px solid var(--primary-hover);
        }

        input[type='checkbox']:checked:after {
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-size: 60% 60%; /* Reduced from 100% to make the tick smaller */
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.checkbox label span {
    display: inline-block;
    margin-left: 1.3rem;
    padding-top: 8px!important;
}