<div id="zhaket-ai-login-modal" class="zhaket-ai-modal-overlay zhkup" style="display: none;">
	<div class="zhaket-ai-modal-container relative">
		<button type="button" class="close absolute left-3 !w-3 inline-block top-3 cursor-pointer z-50 zhaket-ai-modal-close"
				aria-label="${zhAiGetString('close', 'Close')}">
			<img class="w-5" src="data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%201L21%2021'%20stroke='%23646464'%20stroke-width='2'%20stroke-linecap='round'/%3e%3cpath%20d='M21%201L1%2021'%20stroke='%23646464'%20stroke-width='2'%20stroke-linecap='round'/%3e%3c/svg%3e" alt="">
		</button>
		<div class="flex flex-col overflow-hidden rounded-[12px] shadow-[0px_5px_25px_0px_rgba(126,137,155,0.11)] relative w-[400px] items-center justify-start bg-white p-[2px] md:w-[450px] *:w-full mx-auto">
			<div class="flex items-center justify-center flex-col rounded-lg bg-[linear-gradient(180deg,_#f8b33514_8%,_#ffffff00_43.89%)] py-[26px]">
				<img loading="lazy" width="56" height="56" decoding="async" data-nimg="1" id="zhaket-ai-login-icon" data-image="login-ai.svg" src=""
					style="color: transparent;">
				<p class="transition duration-300 text-[20px] leading-7 font-bold text-[#424244] pt-4">${zhAiGetString('login/register', 'ورود / عضویت')}</p>
				<a class="text-gray-400 text-[14px] hover:text-[#EB8800]" href="https://heroai.ir" target="_blank" rel="noopener noreferrer">
					${zhAiGetString('loginToHeroAiAggrement', 'ورود به HeroAI')}
				</a>
			</div>
			<div class="p-[25px] md:p-[48px] !pt-0" id="zhaket-ai-login-form">
				<div class="text-red text-[14px] pb-2" id="zhaket-ai-login-error"></div>

				<!-- Mobile Input Section -->
				<section class="flex items-center justify-center flex-col p-0 text-red-500" id="zhaket-ai-mobile-section">
					<div class="flex items-center gap-5 rounded-md transition duration-100 h-[60px] relative shadow-[0px_2px_6px_0px_rgba(126,137,155,0.08)] p-4 border border-[#E2E2E2] w-full focus-within:border-[#FFC87B] focus-within:shadow-[0px_2px_6px_0px_rgba(255,150,6,0.19)] bg-[#F7F8F9]">
						<input id="zhaket-ai-mobile-input"
							class="block w-full !bg-[#F7F8F9] p-2.5 outline-hidden transition duration-100 focus:!outline-none focus:!shadow-none focus:ring-0 active:border-0 h-8 group border-0 focus:border-0 pr-3 text-[15px] text-[#76767C] placeholder-[#76767C] placeholder:text-[15px] placeholder:font-medium text-left !border-l-[1px] !border-[#E5E8EB] focus:!border-l-[1px] active:!border-l-[1px] pl-5 hiden-arrow"
							dir="ltr" placeholder="09..." type="text" autocomplete="off">
						<img id="zhaket-ai-flag" data-image="ir-flag.png" src="" alt="" class="">
					</div>
					<div class="p-0 pt-4 w-full">
						<span id="zhaket-ai-login-btn"
							class="cursor-pointer flex items-center justify-center gap-[10px] transition duration-300 focus:outline-hidden focus:outline-0 px-5 py-4 bg-[#FFAE11] h-[60px] w-full rounded-md text-[15px] font-bold text-white hover:bg-[#EB8800] hover:text-[white]">
							<div class="flex items-center justify-center">
								<span id="zhaket-ai-login-btn-text">${zhAiGetString('loginOrRegister', 'ورود یا ثبت نام')}</span>
								<img id="zhaket-ai-login-loading" data-image="spinner/white-loading.svg" src="" alt="" class="h-[25px] p-0 mx-auto" style="display: none;">
							</div>
						</span>
						<div class="flex items-end justify-between pt-5"></div>
					</div>
				</section>

				<!-- Code Verification Section -->
				<section class="flex items-center justify-center flex-col p-0 text-red-500" id="zhaket-ai-code-section" style="display: none;">
					<div class="flex items-center w-full gap-2 justify-center" dir="ltr" id="zhaket-ai-code-inputs-container">
						<!-- Code inputs will be generated by JavaScript -->
					</div>
					<div class="p-0 pt-4 w-full">
						<span id="zhaket-ai-validate-btn"
							class="cursor-pointer flex items-center justify-center gap-[10px] transition duration-300 focus:outline-hidden focus:outline-0 px-5 py-4 bg-[#FFAE11] h-[60px] w-full rounded-md text-[15px] font-bold text-white hover:bg-[#EB8800] hover:text-[white]">
							<div class="flex items-center justify-center">
								<span id="zhaket-ai-validate-btn-text">${zhAiGetString('check', 'بررسی')}</span>
								<img id="zhaket-ai-code-loading" data-image="spinner/white-loading.svg" src="" alt="" class="h-[25px] p-0 mx-auto" style="display: none;">
							</div>
						</span>
						<span id="zhaket-ai-resend-btn"
							class="cursor-pointer flex items-center justify-center gap-[10px] transition duration-300 focus:outline-hidden focus:outline-0 px-5 pt-4 rounded-md text-[15px] font-bold mx-auto">
							<img id="zhaket-ai-resend-icon" data-image="spinner/reload.svg" src="" alt="" class="h-[25px] p-0">
							<div class="flex items-center justify-center text-[#A4A6BA] text-[13px]">
								<span id="zhaket-ai-resend-text">${zhAiGetString('sendAgain', 'ارسال مجدد')}</span>
							</div>
						</span>
					</div>
				</section>
			</div>
		</div>
	</div>
</div>