/* Animations for the stepper and node registration */

/* Success animation for submit button */
.animate-success {
    overflow: hidden;
    transition: all 0.3s ease;
}

    .animate-success span {
        position: absolute;
        display: block;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        animation: confetti 0.8s ease-in-out infinite;
    }

        .animate-success span:nth-child(1) {
            left: 10%;
            animation-delay: 0s;
        }

        .animate-success span:nth-child(2) {
            left: 30%;
            animation-delay: 0.1s;
        }

        .animate-success span:nth-child(3) {
            left: 50%;
            animation-delay: 0.2s;
        }

        .animate-success span:nth-child(4) {
            left: 70%;
            animation-delay: 0.3s;
        }

        .animate-success span:nth-child(5) {
            left: 90%;
            animation-delay: 0.4s;
        }

        .animate-success span:nth-child(6) {
            left: 20%;
            animation-delay: 0.5s;
        }

@keyframes confetti {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

/* Step transition animations */
.stepper-item {
    transition: all 0.3s ease;
}

    .stepper-item::before {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background: var(--kt-primary);
        position: absolute;
        left: 0;
        bottom: 0;
        transition: width 0.3s ease;
    }

    .stepper-item.current::before {
        width: 100%;
    }

/* Card selection animation */
.card.border {
    transition: all 0.3s ease;
    border: 1px solid #e4e6ef !important;
}

    .card.border:hover {
        border-color: var(--kt-primary) !important;
    }

.form-check-input:checked ~ .form-check-label {
    color: var(--kt-primary);
    font-weight: 600;
}

.form-check-input:checked + .card {
    border-color: var(--kt-primary) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .card.border {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

    [data-bs-theme="dark"] .card.border:hover {
        border-color: var(--kt-primary) !important;
    }