{{-- ZATCA Onboarding Step-by-Step Progress Overlay --}}
<div x-cloak
     x-show="isSubmittingOtp"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 dark:bg-black/75 backdrop-blur-[3px]"
     role="dialog"
     aria-modal="true">

    <div x-show="isSubmittingOtp"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4 scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 scale-100"
         class="relative flex w-full max-w-[540px] flex-col overflow-hidden rounded-[24px] border border-slate-200 dark:border-slate-800 bg-white dark:bg-navy-900 p-6 sm:p-8 text-slate-800 dark:text-slate-100 shadow-2xl">

        {{-- Top Title & Description (Matching User Mockup) --}}
        <div class="text-center mb-6">
            <h2 class="text-xl sm:text-2xl font-black text-slate-900 dark:text-white">
                {{ trans('dashboard.overlay_otp_title') }}
            </h2>
            <p class="mt-2 text-xs sm:text-[13px] leading-relaxed text-slate-500 dark:text-slate-400 max-w-md mx-auto">
                {{ trans('dashboard.overlay_otp_desc') }}
            </p>
        </div>

        {{-- 4 Steps Card with Green Border (Matches Screenshot) --}}
        <div class="rounded-2xl border border-emerald-500/30 bg-emerald-50/25 dark:bg-emerald-500/5 p-5 space-y-3.5 mb-5 shadow-xs">
            {{-- Step 1: CSR generation --}}
            <div class="flex items-center justify-between gap-3 text-xs sm:text-[13px] font-semibold">
                <span :class="progressStep >= 1 ? 'text-slate-900 dark:text-white font-bold' : 'text-slate-400 dark:text-slate-500'">
                    {{ trans('dashboard.overlay_step_csr') }}
                </span>

                <template x-if="progressStep > 1">
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white text-[10px] shadow-xs">
                        <i class="fa-solid fa-check"></i>
                    </span>
                </template>
                <template x-if="progressStep === 1">
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center text-emerald-600 dark:text-emerald-400">
                        <i class="fa-solid fa-circle-notch fa-spin text-sm"></i>
                    </span>
                </template>
                <template x-if="progressStep < 1">
                    <span class="h-4 w-4 shrink-0 rounded-full border-2 border-slate-300 dark:border-slate-700"></span>
                </template>
            </div>

            {{-- Step 2: CCSID issuance --}}
            <div class="flex items-center justify-between gap-3 text-xs sm:text-[13px] font-semibold">
                <span :class="progressStep >= 2 ? 'text-slate-900 dark:text-white font-bold' : 'text-slate-400 dark:text-slate-500'">
                    {{ trans('dashboard.overlay_step_ccsid') }}
                </span>

                <template x-if="progressStep > 2">
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white text-[10px] shadow-xs">
                        <i class="fa-solid fa-check"></i>
                    </span>
                </template>
                <template x-if="progressStep === 2">
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center text-emerald-600 dark:text-emerald-400">
                        <i class="fa-solid fa-circle-notch fa-spin text-sm"></i>
                    </span>
                </template>
                <template x-if="progressStep < 2">
                    <span class="h-4 w-4 shrink-0 rounded-full border-2 border-slate-300 dark:border-slate-700"></span>
                </template>
            </div>

            {{-- Step 3: Compliance invoices test --}}
            <div class="flex items-center justify-between gap-3 text-xs sm:text-[13px] font-semibold">
                <span :class="progressStep >= 3 ? 'text-slate-900 dark:text-white font-bold' : 'text-slate-400 dark:text-slate-500'">
                    {{ trans('dashboard.overlay_step_compliance') }}
                </span>

                <template x-if="progressStep > 3">
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white text-[10px] shadow-xs">
                        <i class="fa-solid fa-check"></i>
                    </span>
                </template>
                <template x-if="progressStep === 3">
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center text-emerald-600 dark:text-emerald-400">
                        <i class="fa-solid fa-circle-notch fa-spin text-sm"></i>
                    </span>
                </template>
                <template x-if="progressStep < 3">
                    <span class="h-4 w-4 shrink-0 rounded-full border-2 border-slate-300 dark:border-slate-700"></span>
                </template>
            </div>

            {{-- Step 4: Production CSID (PCSID) --}}
            <div class="flex items-center justify-between gap-3 text-xs sm:text-[13px] font-semibold">
                <span :class="progressStep >= 4 ? 'text-slate-900 dark:text-white font-bold' : 'text-slate-400 dark:text-slate-500'">
                    {{ trans('dashboard.overlay_step_pcsid') }}
                </span>

                <template x-if="progressStep > 4">
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white text-[10px] shadow-xs">
                        <i class="fa-solid fa-check"></i>
                    </span>
                </template>
                <template x-if="progressStep === 4">
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center text-emerald-600 dark:text-emerald-400">
                        <i class="fa-solid fa-circle-notch fa-spin text-sm"></i>
                    </span>
                </template>
                <template x-if="progressStep < 4">
                    <span class="h-4 w-4 shrink-0 rounded-full border-2 border-slate-300 dark:border-slate-700"></span>
                </template>
            </div>
        </div>

        {{-- Progress Bar (Moving smoothly) --}}
        <div class="w-full bg-slate-100 dark:bg-slate-800 h-2 rounded-full overflow-hidden shadow-inner">
            <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 h-full rounded-full transition-all duration-500"
                 :style="'width: ' + progressPercent + '%'">
            </div>
        </div>

        {{-- Footer Note: Usually less than 2 minutes --}}
        <div class="flex items-center justify-between mt-3 text-xs text-slate-400 dark:text-slate-500">
            <span class="flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400 font-medium text-[11.5px]">
                <i class="fa-solid fa-shield-halved text-[10px]"></i>
                <span>{{ trans('dashboard.overlay_encrypted_connection') }}</span>
            </span>
            <span class="text-[11.5px] font-medium">
                {{ trans('dashboard.overlay_duration_note') }}
            </span>
        </div>
    </div>
</div>