/* Adiciona o estilo para o checkbox de coração */
.heart-checkbox {
    display: none; /* Esconde o checkbox original */
}

.heart-label {
    display: block;
    width: 100%;
    height: 24px;
    position: relative;
    cursor: pointer;
}

.heart-label::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url('../svg/heart.svg') no-repeat center center;
    background-size: cover;
    transform: translate(20%, 80%);
}

.heart-label::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url('../svg/heart.svg') no-repeat center center;
    background-size: cover;
    transform: translate(20%, 80%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.heart-checkbox:checked + .heart-label::before {
    background: url('../svg/heart-filled.svg') no-repeat center center;
    background-size: cover;
}

.heart-checkbox:checked + .heart-label::after {
    background: url('../svg/heart-filled.svg') no-repeat center center;
    background-size: cover;
}