<div class="woocommerce"><div class="woocommerce-notices-wrapper"></div><div class="container-otp">
<div class="zbl-drawer otp zbl-drawer--open">
    <div class="zbl-otp-header">
        <h2>ورود و ثبت نام</h2>
    </div>
    <div class="zbl-drawer__inner">

        <div id="otp-phone-wrapper" class="otp-phone-wrapper">
            <h3>
                شماره همراه خود را وارد کنید:            </h3>
            <div>
                <input class="otp-phone-input" id="otp-phone-input" type="tel" name="otp-phone-input">
                <div class="otp-error" id="otp-error"></div>
                <button type="button" class="otp-btn zbl-send-otp" id="zbl-send-otp">
                    <span class="otp-btn-text">ارسال کد تایید</span>
                    <span class="otp-mini-loader">
                        <span class="dot1"></span>
                        <span class="dot2"></span>
                        <span class="dot3"></span>
                    </span>
                </button>
                            </div>
        </div>
        <!-- end of otp phone number input area -->

        <div id="otp-code" class="otp-code-wrapper rh-hide">
            <h3>
                کد تایید با موفقیت به شماره زیر ارسال شد.            </h3>
            <h2>
                <button id="change-number"></button>
                <span id="user-number-text"></span>
            </h2>
            <div class="otp-phone-code-input" id="otp-phone-code-input">
                <div class="otp-form-group">
                    <input type="text" name="letters[]" class="letter inputPassCode" pattern="[0-9]*"
                           inputmode="numeric" maxlength="1">
                    <input type="text" name="letters[]" class="letter inputPassCode" pattern="[0-9]*"
                           inputmode="numeric" maxlength="1">
                    <input type="text" name="letters[]" class="letter inputPassCode" pattern="[0-9]*"
                           inputmode="numeric" maxlength="1">
                    <input type="text" name="letters[]" class="letter inputPassCode" pattern="[0-9]*"
                           inputmode="numeric" maxlength="1">
                </div>
            </div>

            <!-- id otp-verify-section used in js for code letter input  -->
            <div class="otp-verify-section" id="otp-verify-section">
                <input type="hidden" name="otp-verify-phone" class="otp-verify-phone" id="otp-verify-phone">
                <button type="button" class="code-submit otp-btn otp-verify-button" id="otp-verify-button">
                    <span class="otp-btn-text">
                        تایید کنید                    </span>
                    <span class="otp-mini-loader">
                        <span class="dot1"></span>
                        <span class="dot2"></span>
                        <span class="dot3"></span>
                    </span>
                </button>
                <div class="otp-resend-code-container">
                    <div id="otp-resend-code-timer">
                        <span>کد برای شما ارسال نشده است؟ </span>
                        <span class="countdown"></span>
                    </div>
                    <button id="otp-resend-code-btn">ارسال مجدد کد</button>
                </div>
            </div>
        </div>
        <!-- end of otp code & verify area -->

        <!-- error feedback section -->
        <div id="otp-modal-error" class="otp-modal-error"></div>

        <!-- success feedback section -->
        <div id="otp-modal-success" class="otp-modal-success otp-success-feedback">
            <div class="success-check-icon">
                <span class="icon-line line-tip"></span>
                <span class="icon-line line-long"></span>
                <div class="icon-circle"></div>
                <div class="icon-fix"></div>
            </div>
            <h3>
                شما با موفقیت وارد سیستم شدید.            </h3>
        </div>
    </div>
</div>
</div><div class="asc-notice"></div>
    <div class="contact-us-container contact-us-modal-button" style="right:40px">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
            <path fill="#fff"
                  d="M12 2C6.486 2 2 6.486 2 12v4.143C2 17.167 2.897 18 4 18h1a1 1 0 0 0 1-1v-5.143a1 1 0 0 0-1-1h-.908C4.648 6.987 7.978 4 12 4s7.352 2.987 7.908 6.857H19a1 1 0 0 0-1 1V18c0 1.103-.897 2-2 2h-2v-1h-4v3h6c2.206 0 4-1.794 4-4c1.103 0 2-.833 2-1.857V12c0-5.514-4.486-10-10-10z"></path>
        </svg>
        <div class="pulse2" style="background:#62cff4;"></div>
        <div class="pulse2" style="background:#62cff4;"></div>
    </div>

    <div class="zbl-contact-us">
    <span id="close-btn"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                              version="1.0" id="katman_1" x="0px" y="0px" viewBox="0 0 1436 1054" width="36" height="36"
                              style="enable-background:new 0 0 1436 1054;" xml:space="preserve">
																																																									<path d="M718.5,453.8l224-224.3c20.4-20.4,53.3-20.4,73.6,0c20.4,20.4,20.4,53.3,0,73.6l-224,224.6l224,224  c20.4,20.4,20.4,53.3,0,73.6c-20.4,20.4-53.3,20.4-73.6,0l-224-224l-224.6,224c-20.4,20.4-53.3,20.4-73.6,0  c-20.4-20.4-20.4-53.3,0-73.6l224-224L420.4,303.2c-20.5-20.4-20.5-53.3-0.1-73.6s53.3-20.4,73.6,0l224.6,224V453.8z"></path>
																																																								</svg></span>

        <div class="contact-way">
            <p class="title heading2">راه های ارتباطی</p>
                                <a target="_blank" href="https://t.me/moderncom">
                        <div class="ways">
                            <div class="right">
                                <div class="icon-container phone">
                                    <img loading="lazy" src="https://aquabiz.ir/wp-content/plugins/avin-shopping-core/assets/images/telegram_support.png" width="38"
                                         height="38">
                                </div>
                                <span class="medium-text">پشتیبان تلگرام</span>
                            </div>
                        </div>
                    </a>
                                    <a target="_blank" href="https://www.instagram.com/aquabiz.ir">
                        <div class="ways">
                            <div class="right">
                                <div class="icon-container phone">
                                    <img loading="lazy" src="https://aquabiz.ir/wp-content/plugins/avin-shopping-core/assets/images/instagram.png" width="38"
                                         height="38">
                                </div>
                                <span class="medium-text">اینستاگرام</span>
                            </div>
                        </div>
                    </a>
                                    <a target="_blank" href="https://wa.me/+989366878201">
                        <div class="ways">
                            <div class="right">
                                <div class="icon-container phone">
                                    <img loading="lazy" src="https://aquabiz.ir/wp-content/plugins/avin-shopping-core/assets/images/whatsapp.png" width="38"
                                         height="38">
                                </div>
                                <span class="medium-text">واتساپ</span>
                            </div>
                        </div>
                    </a>
                
        </div>
    </div>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function () {
            let container = document.querySelector('.zbl-contact-us');
            let button = document.querySelector('.contact-us-container');
            let closeBtn = document.getElementById('close-btn');
            let contactUsLinks = document.querySelectorAll('.zbl-contact-us a');

            document.addEventListener('click', function (e) {
                if (e.target !== container && e.target !== button && !container.contains(e.target)) {
                    container.classList.remove('show');
                }
            });

            button.addEventListener("click", function (e) {
                e.stopPropagation();
                container.classList.toggle('show');
            });

            closeBtn.addEventListener('click', function () {
                container.classList.remove('show');
            });

            contactUsLinks.forEach(function (link) {
                link.addEventListener('click', function () {
                    container.classList.remove('show');
                });
            });


        });
    </script>
    <style>
        .contact-us-modal-button {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed !important;
            bottom: 40px;
            border-radius: 50%;
            background-image: linear-gradient(#62cff4, #2c67f2);
            z-index: 99;
            cursor: pointer;
        }

        .pulse2 {
            width: 74px;
            height: 74px;
            border-radius: 50px;
            position: absolute;
            left: -9px;
            top: -9px;
            z-index: -1;
            transform: scale(0);
            animation: pulse2 2s infinite;
        }

        @keyframes pulse2 {
            0% {
                transform: scale(0);
                opacity: 0.4
            }
            50% {
                opacity: 0.3
            }
            to {
                transform: scale(1);
                opacity: 0
            }
        }

        .zbl-contact-us {
            position: fixed !important;
            bottom: 106px;
            right: 8px;
            z-index: 999;
            background-color: #fff;
            border-radius: 16px;
            padding: 32px 16px 16px 16px;
            color: #162c5b;
            box-shadow: 0 0 30px #0003;
            opacity: 0;
            visibility: hidden;
            transition-duration: 0.3s;
        }

        .zbl-contact-us.show {
            opacity: 1;
            visibility: visible;
        }

        .zbl-contact-us .contact-way {
            display: flex;
            flex-direction: column;
            position: relative;
            border: 1px solid #e2eaf4;
            border-radius: 12px;
            gap: 8px;
            width: 230px;
            margin-top: 18px;
        }

        .zbl-contact-us .contact-way .title {
            border: 1px solid #e2eaf4;
            border-radius: 5px;
            padding: 6px 48px;
            margin: -20px auto 0;
            background-color: #fff;
        }

        .zbl-contact-us .contact-way div.ways {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 48px;
            margin: 0 16px;
        }

        .zbl-contact-us .contact-way .right {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .zbl-contact-us .contact-way a:not(:last-child) {
            border-bottom: 1px solid #e2eaf4;
        }

        .zbl-contact-us .contact-way div.icon-container {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
            margin-left: 16px;
        }

        #close-btn {
            position: absolute;
            top: 6px;
            right: 4px;
            z-index: 999;
        }
    </style>
    <div id="fb-root"></div>			<script>
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
			<script type="text/template" id="tmpl-elementor-templates-modal__header">
	<div class="elementor-templates-modal__header__logo-area"></div>
	<div class="elementor-templates-modal__header__menu-area"></div>
	<div class="elementor-templates-modal__header__items-area">
		<# if ( closeType ) { #>
			<button type="button" class="elementor-templates-modal__header__close elementor-templates-modal__header__close--{{{ closeType }}} elementor-templates-modal__header__item" aria-label="بستن">
				<# if ( 'skip' === closeType ) { #>
				<span>پرش</span>
				<# } #>
				<i class="eicon-close" aria-hidden="true"></i>
				<span class="elementor-screen-only">{{{ $e.components?.get( 'document/elements' )?.utils?.getTitleForLibraryClose() }}}</span>
			</button>
		<# } #>
		<div id="elementor-template-library-header-tools"></div>
	</div>
</script>

<script type="text/template" id="tmpl-elementor-templates-modal__header__logo">
	<span class="elementor-templates-modal__header__logo__icon-wrapper e-logo-wrapper">
		<i class="eicon-elementor-circle"></i>
	</span>
	<span class="elementor-templates-modal__header__logo__title">{{{ title }}}</span>
</script>
<script type="text/javascript">(function($) {if(($(window).width() > 1199)){var sticky_navigation_offset_top = $(".yt-header-under-2").offset().top;var sticky_navigation = function(){var scroll_top = $(window).scrollTop();if (scroll_top > sticky_navigation_offset_top) {$(".yt-header-under-2").addClass("sticky-menu");$(".yt-header-under-2").css({ "position": "fixed", "top":0, "left":0, "right" : 0, "z-index": 1500 });} else {$(".yt-header-under-2").removeClass("sticky-menu");$(".yt-header-under-2").css({ "position": "static" });}};sticky_navigation();$(window).scroll(function() {sticky_navigation();});}}(jQuery));</script>