.checkbox-wrapper {
    opacity: 1;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.checkbox-wrapper.hidden {
    opacity: 0.2;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-wrapper .terms-label {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.checkbox-wrapper .terms-label .label-text {
    margin-left: 7px;
    font-size: 90%;
}

.checkbox-wrapper .checkbox-svg {
    width: 15px;
    height: 15px;
    margin-left: 3px;
}

.checkbox-wrapper .checkbox-box {
    fill: rgb(255, 255, 255);
    stroke: #423e3f;
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper .checkbox-tick {
    stroke: #423e3f;
    stroke-dasharray: 172;
    stroke-dashoffset: 172;
    transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-box,
.checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-tick {
    stroke-dashoffset: 0;
}

.checkbox-wrapper .terms-label:hover .checkbox-box,
.checkbox-wrapper .terms-label:hover .checkbox-tick {
    stroke: rgba(66, 62, 63, 0.77); /* Change the color to a lighter grey on hover */
}

.checkbox-wrapper .terms-label:hover .checkbox-svg {
    transform: scale(1.1); /* Slightly increase the size */
    transition: transform 0.2s ease-in-out; /* Smooth transition for the transform */
}