.nafaz-client-badge {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        color: #00B384;
        padding: 8px 16px;
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-radius: 20px;
        margin-top: 12px;
    }

    .nafaz-identity-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: #e8f5f3;
        border-radius: 30px;
        color: #00997A;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .nafaz-instruction {
        font-size: 15px;
        color: #00997A;
        margin-bottom: 30px;
        font-weight: 500;
    }

    .nafaz-response {
        font-size: 18px;
        font-weight: 600;
        margin: 16px 0;
        padding: 12px 20px;
        border-radius: 10px;
        display: none;
    }

    .nafaz-response:not(:empty) {
        display: block;
    }

    .nafaz-response.text-darkgreen {
        color: #059669;
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    }

    .nafaz-response.text-darkred {
        color: #dc2626;
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    }

    /* Hide loading when error/success is shown */
    .nafaz-response.text-darkred ~ .nafaz-otp-wrapper ~ .nafaz-loading,
    .nafaz-response.text-darkgreen ~ .nafaz-otp-wrapper ~ .nafaz-loading {
        display: none !important;
    }

    .nafaz-otp-wrapper {
        display: inline-block;
        margin: 20px 0;
    }

    .nafaz-otp-display {
        display: inline-block;
        font-size: 72px;
        font-weight: 700;
        color: #00B384;
        letter-spacing: 8px;
        padding: 30px;
        background: linear-gradient(135deg, #e8f5f3 0%, #d1ebe6 100%);
        border-radius: 20px;
        border: 3px dashed #00B384;
    }

    .nafaz-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        color: #6b7280;
        font-size: 13px;
    }

    .nafaz-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid #e5e7eb;
        border-top-color: #00B384;
        border-radius: 50%;
        animation: nafaz-spin 1s linear infinite;
    }

    @keyframes nafaz-spin {
        to { transform: rotate(360deg); }
    }

    .nafaz-download-section {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #e5e7eb;
    }

    .nafaz-progress-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }

    .nafaz-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .nafaz-step-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .nafaz-step.active .nafaz-step-circle,
    .nafaz-step.completed .nafaz-step-circle {
        background: #00B384;
        color: white;
    }

    .nafaz-step-number {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
    }

    .nafaz-step.active .nafaz-step-number,
    .nafaz-step.completed .nafaz-step-number {
        color: white;
    }

    .nafaz-step.completed .nafaz-step-number {
        display: none;
    }

    .nafaz-step-check {
        display: none;
        font-size: 16px;
    }

    .nafaz-step.completed .nafaz-step-check {
        display: block;
        color: white;
    }

    .nafaz-step-label {
        font-size: 12px;
        color: #6b7280;
        max-width: 80px;
        text-align: center;
    }

    .nafaz-step.active .nafaz-step-label {
        color: #00B384;
        font-weight: 600;
    }

    .nafaz-step-line {
        width: 60px;
        height: 2px;
        background: #e5e7eb;
        margin: 0 8px 24px;
    }

    .nafaz-step-line.active {
        background: #00B384;
    }

    .nafaz-verified-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        background: #ecfdf5;
        border: 2px solid #00B384;
        border-radius: 12px;
        color: #00B384;
        font-size: 14px;
        font-weight: 500;
    }

    .nafaz-verified-badge i {
        font-size: 20px;
    }

    .d-none {
        display: none !important;
    }

    @media (max-width: 580px) {
        .nafaz-otp-display {
            font-size: 48px;
            padding: 20px;
        }

        .nafaz-progress-steps {
            flex-wrap: wrap;
        }

        .nafaz-step-line {
            width: 30px;
        }
    }