/* Estilos principales */
.social-icon {
    width: 24px;
    height: 24px;
}

.platform-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Iconos de plataformas */
.platform-icon.youtube { background-image: url('../img/youtube.svg'); }
.platform-icon.twitter { background-image: url('../img/twitter.svg'); }
.platform-icon.instagram { background-image: url('../img/instagram.svg'); }
.platform-icon.facebook { background-image: url('../img/facebook.svg'); }
.platform-icon.tiktok { background-image: url('../img/tiktok.svg'); }
.platform-icon.twitch { background-image: url('../img/twitch.svg'); }
.platform-icon.whatsapp { background-image: url('../img/whatsapp.svg'); }
.platform-icon.telegram { background-image: url('../img/telegram.svg'); }
.platform-icon.kick { background-image: url('../img/kick.svg'); }
.platform-icon.website { background-image: url('../img/website.svg'); }

/* Estilos responsivos */
@media (max-width: 640px) {
    .platform-icon {
        width: 20px;
        height: 20px;
    }
    
    .requirement-item {
        margin-bottom: 1rem;
    }
}

/* Animaciones */
@keyframes checkmark {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.requirement-item.completed .check-icon {
    animation: checkmark 0.3s ease-in-out forwards;
}

/* Mejoras de hover */
.requirement-item {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.requirement-item:hover {
    transform: translateY(-2px);
}

/* Estilos del botón de verificación */
#verify-button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}