/* ============================================
   VERIFICATION PAGE – CUSTOM STYLES
   ============================================ */

/* Step container visibility */
.step-container {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

    .step-container.active {
        display: block;
    }

/* Progress indicator - sticky */
.progress-indicator-wrapper {
    position: sticky;
    top: 70px;
    background: white;
    z-index: 10;
    padding: 12px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .progress-indicator-wrapper {
        top: 60px;
        padding: 8px 0;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .progress-step .step-circle {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .progress-step span:not(.step-circle) {
        font-size: 0.6rem;
    }
}

/* Fade-in animation for step transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigation buttons */
.step-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    gap: 12px;
}

    .step-nav .btn {
        min-width: 100px;
    }

@media (max-width: 576px) {
    .step-nav .btn {
        min-width: 80px;
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}