\u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648 | \u0627\u06cc\u0631\u0627\u0646 \u062e\u0648\u062f\u0631\u0648<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Vazirmatn', sans-serif;\n }\n \n body {\n background-color: #f8fafc;\n color: #334155;\n line-height: 1.6;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);\n color: white;\n padding: 25px 0;\n border-radius: 0 0 15px 15px;\n box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);\n margin-bottom: 30px;\n }\n \n .header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 20px;\n }\n \n .logo {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .logo i {\n font-size: 32px;\n color: #60a5fa;\n }\n \n .logo h1 {\n font-size: 24px;\n font-weight: 700;\n }\n \n .logo span {\n color: #93c5fd;\n font-weight: 400;\n font-size: 16px;\n }\n \n .step-indicator {\n display: flex;\n justify-content: center;\n margin: 30px 0 20px;\n }\n \n .step {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n width: 120px;\n }\n \n .step-number {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: #dbeafe;\n color: #1e40af;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n margin-bottom: 8px;\n border: 3px solid #bfdbfe;\n z-index: 2;\n }\n \n .step.active .step-number {\n background-color: #3b82f6;\n color: white;\n border-color: #1d4ed8;\n }\n \n .step.completed .step-number {\n background-color: #10b981;\n color: white;\n border-color: #059669;\n }\n \n .step-title {\n font-size: 14px;\n color: #64748b;\n font-weight: 500;\n }\n \n .step.active .step-title {\n color: #1e40af;\n font-weight: 600;\n }\n \n .step::after {\n content: '';\n position: absolute;\n top: 20px;\n right: -60px;\n width: 120px;\n height: 3px;\n background-color: #dbeafe;\n z-index: 1;\n }\n \n .step:last-child::after {\n display: none;\n }\n \n .step.completed::after {\n background-color: #10b981;\n }\n \n .form-container {\n background-color: white;\n border-radius: 15px;\n box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\n padding: 30px;\n margin-bottom: 30px;\n }\n \n .form-section {\n margin-bottom: 35px;\n padding-bottom: 25px;\n border-bottom: 1px solid #e2e8f0;\n }\n \n .form-section:last-child {\n border-bottom: none;\n }\n \n .section-title {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 25px;\n color: #1e3a8a;\n font-size: 20px;\n }\n \n .section-title i {\n color: #3b82f6;\n font-size: 22px;\n }\n \n .form-row {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin-bottom: 20px;\n }\n \n .form-group {\n flex: 1 1 300px;\n margin-bottom: 10px;\n }\n \n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: #475569;\n font-size: 15px;\n }\n \n .form-control {\n width: 100%;\n padding: 12px 15px;\n border: 2px solid #dbeafe;\n border-radius: 8px;\n font-size: 16px;\n transition: all 0.3s;\n background-color: white;\n color: #334155;\n }\n \n .form-control:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n }\n \n select.form-control {\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n background-repeat: no-repeat;\n background-position: left 15px center;\n background-size: 16px;\n padding-left: 40px;\n }\n \n .car-brands {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 25px;\n }\n \n .brand-option {\n flex: 1;\n min-width: 200px;\n }\n \n .brand-card {\n border: 2px solid #e2e8f0;\n border-radius: 10px;\n padding: 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s;\n height: 100%;\n }\n \n .brand-card:hover {\n border-color: #93c5fd;\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n }\n \n .brand-card.selected {\n border-color: #3b82f6;\n background-color: #eff6ff;\n }\n \n .brand-logo {\n font-size: 40px;\n color: #3b82f6;\n margin-bottom: 15px;\n }\n \n .brand-name {\n font-weight: 700;\n font-size: 18px;\n color: #1e3a8a;\n margin-bottom: 5px;\n }\n \n .model-container {\n display: none;\n }\n \n .model-container.active {\n display: block;\n }\n \n .model-select {\n width: 100%;\n padding: 12px 15px;\n border: 2px solid #dbeafe;\n border-radius: 8px;\n font-size: 16px;\n color: #334155;\n background-color: white;\n cursor: pointer;\n }\n \n .model-select:focus {\n outline: none;\n border-color: #3b82f6;\n }\n \n .form-footer {\n display: flex;\n justify-content: space-between;\n margin-top: 30px;\n padding-top: 25px;\n border-top: 1px solid #e2e8f0;\n }\n \n .btn {\n padding: 14px 32px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n border: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n \n .btn-primary {\n background-color: #3b82f6;\n color: white;\n }\n \n .btn-primary:hover {\n background-color: #2563eb;\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\n }\n \n .btn-secondary {\n background-color: #e2e8f0;\n color: #475569;\n }\n \n .btn-secondary:hover {\n background-color: #cbd5e1;\n }\n \n .required::after {\n content: \" *\";\n color: #ef4444;\n }\n \n .form-note {\n background-color: #f0f9ff;\n border-right: 4px solid #0ea5e9;\n padding: 15px;\n border-radius: 0 8px 8px 0;\n margin-top: 30px;\n font-size: 14px;\n color: #0369a1;\n }\n \n .form-note i {\n margin-left: 8px;\n }\n \n footer {\n text-align: center;\n padding: 20px;\n color: #64748b;\n font-size: 14px;\n border-top: 1px solid #e2e8f0;\n margin-top: 20px;\n }\n \n @media (max-width: 768px) {\n .header-content {\n flex-direction: column;\n gap: 15px;\n text-align: center;\n }\n \n .step::after {\n display: none;\n }\n \n .step-indicator {\n flex-wrap: wrap;\n gap: 20px;\n }\n \n .form-row {\n flex-direction: column;\n gap: 15px;\n }\n \n .form-group {\n flex: 1 1 100%;\n }\n \n .brand-option {\n min-width: 100%;\n }\n \n .form-footer {\n flex-direction: column;\n gap: 15px;\n }\n \n .btn {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"container\">\n <div class=\"header-content\">\n <div class=\"logo\">\n <i class=\"fas fa-car\"><\/i>\n <div>\n <h1>\u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648<\/h1>\n <span>\u062e\u0631\u06cc\u062f \u0622\u0633\u0627\u0646 \u0648 \u0645\u0637\u0645\u0626\u0646 \u062e\u0648\u062f\u0631\u0648\u06cc \u0646\u0648<\/span>\n <\/div>\n <\/div>\n <div class=\"contact-info\">\n <p><i class=\"fas fa-phone\"><\/i> \u062a\u0644\u0641\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc: \u06f0\u06f2\u06f1-\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"container\">\n <div class=\"step-indicator\">\n <div class=\"step completed\">\n <div class=\"step-number\">\u06f1<\/div>\n <div class=\"step-title\">\u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u062f\u0631\u0648<\/div>\n <\/div>\n <div class=\"step active\">\n <div class=\"step-number\">\u06f2<\/div>\n <div class=\"step-title\">\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0647\u0648\u06cc\u062a\u06cc<\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">\u06f3<\/div>\n <div class=\"step-title\">\u062a\u0623\u06cc\u06cc\u062f \u0646\u0647\u0627\u06cc\u06cc<\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-container\">\n <form id=\"customerForm\">\n <div class=\"form-section\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-car\"><\/i>\n \u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u062f\u0631\u0648\n <\/h2>\n \n <div class=\"form-group\">\n <label class=\"required\">\u0628\u0631\u0646\u062f \u062e\u0648\u062f\u0631\u0648<\/label>\n <div class=\"car-brands\">\n <div class=\"brand-option\">\n <div class=\"brand-card\" data-brand=\"hyundai\">\n <div class=\"brand-logo\">\n <i class=\"fas fa-car-side\"><\/i>\n <\/div>\n <div class=\"brand-name\">\u0647\u06cc\u0648\u0646\u062f\u0627<\/div>\n <div class=\"brand-desc\">\u06a9\u06cc\u0641\u06cc\u062a \u0648 \u0637\u0631\u0627\u062d\u06cc \u0645\u062f\u0631\u0646<\/div>\n <\/div>\n <\/div>\n <div class=\"brand-option\">\n <div class=\"brand-card\" data-brand=\"kia\">\n <div class=\"brand-logo\">\n <i class=\"fas fa-truck-pickup\"><\/i>\n <\/div>\n <div class=\"brand-name\">\u06a9\u06cc\u0627<\/div>\n <div class=\"brand-desc\">\u0627\u0645\u0646\u06cc\u062a \u0648 \u0641\u0646\u0627\u0648\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/div>\n <\/div>\n <\/div>\n <div class=\"brand-option\">\n <div class=\"brand-card\" data-brand=\"lexus\">\n <div class=\"brand-logo\">\n <i class=\"fas fa-car\"><\/i>\n <\/div>\n <div class=\"brand-name\">\u0644\u06a9\u0633\u0648\u0633<\/div>\n <div class=\"brand-desc\">\u0644\u0648\u06a9\u0633 \u0648 \u067e\u0631\u0627\u0645\u06a9\u0627\u0646\u0627\u062a<\/div>\n <\/div>\n <\/div>\n <div class=\"brand-option\">\n <div class=\"brand-card\" data-brand=\"toyota\">\n <div class=\"brand-logo\">\n <i class=\"fas fa-shield-alt\"><\/i>\n <\/div>\n <div class=\"brand-name\">\u062a\u0648\u06cc\u0648\u062a\u0627<\/div>\n <div class=\"brand-desc\">\u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0628\u0627\u0644\u0627<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label class=\"required\">\u0645\u062f\u0644 \u062e\u0648\u062f\u0631\u0648<\/label>\n <div class=\"model-container\" id=\"hyundai-models\">\n <select class=\"model-select\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"accent\">\u0627\u06a9\u0633\u0646\u062a<\/option>\n <option value=\"elantra\">\u0627\u0644\u0627\u0646\u062a\u0631\u0627<\/option>\n <option value=\"santa-fe\">\u0633\u0627\u0646\u062a\u0627\u0641\u0647<\/option>\n <option value=\"tucson\">\u062a\u0648\u0633\u0627\u0646<\/option>\n <option value=\"creta\">\u06a9\u0631\u062a\u0627<\/option>\n <\/select>\n <\/div>\n <div class=\"model-container\" id=\"kia-models\">\n <select class=\"model-select\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"cerato\">\u0633\u0631\u0627\u062a\u0648<\/option>\n <option value=\"optima\">\u0627\u067e\u062a\u06cc\u0645\u0627<\/option>\n <option value=\"sorento\">\u0633\u0648\u0631\u0646\u062a\u0648<\/option>\n <option value=\"sportage\">\u0627\u0633\u067e\u0648\u0631\u062a\u06cc\u062c<\/option>\n <option value=\"picanto\">\u067e\u06cc\u06a9\u0627\u0646\u062a\u0648<\/option>\n <\/select>\n <\/div>\n <div class=\"model-container\" id=\"lexus-models\">\n <select class=\"model-select\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"es\">\u0627\u06cc \u0627\u0633<\/option>\n <option value=\"ls\">\u0627\u0644 \u0627\u0633<\/option>\n <option value=\"rx\">\u0622\u0631 \u0627\u06cc\u06a9\u0633<\/option>\n <option value=\"nx\">\u0627\u0646 \u0627\u06cc\u06a9\u0633<\/option>\n <option value=\"ux\">\u06cc\u0648 \u0627\u06cc\u06a9\u0633<\/option>\n <\/select>\n <\/div>\n <div class=\"model-container\" id=\"toyota-models\">\n <select class=\"model-select\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"corolla\">\u06a9\u0631\u0648\u0644\u0627<\/option>\n <option value=\"camry\">\u06a9\u0645\u0631\u06cc<\/option>\n <option value=\"rav4\">\u0631\u0627\u06a4\u06f4<\/option>\n <option value=\"land-cruiser\">\u0644\u0646\u062f\u06a9\u0631\u0648\u0632\u0631<\/option>\n <option value=\"hilux\">\u0647\u0627\u06cc\u0644\u0648\u06a9\u0633<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-section\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-user\"><\/i>\n \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0647\u0648\u06cc\u062a\u06cc\n <\/h2>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"firstName\" class=\"required\">\u0646\u0627\u0645<\/label>\n <input type=\"text\" id=\"firstName\" class=\"form-control\" placeholder=\"\u0646\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"lastName\" class=\"required\">\u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc<\/label>\n <input type=\"text\" id=\"lastName\" class=\"form-control\" placeholder=\"\u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"nationalId\" class=\"required\">\u06a9\u062f\u0645\u0644\u06cc<\/label>\n <input type=\"text\" id=\"nationalId\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f0\u06f0\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\" required pattern=\"\\d{10}\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthDate\" class=\"required\">\u062a\u0627\u0631\u06cc\u062e \u062a\u0648\u0644\u062f<\/label>\n <input type=\"text\" id=\"birthDate\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f1\u06f3\u06f7\u06f0\/\u06f0\u06f5\/\u06f1\u06f5\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"fatherName\" class=\"required\">\u0646\u0627\u0645 \u067e\u062f\u0631<\/label>\n <input type=\"text\" id=\"fatherName\" class=\"form-control\" placeholder=\"\u0646\u0627\u0645 \u067e\u062f\u0631 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthPlace\" class=\"required\">\u0645\u062d\u0644 \u062a\u0648\u0644\u062f<\/label>\n <input type=\"text\" id=\"birthPlace\" class=\"form-control\" placeholder=\"\u0634\u0647\u0631 \u0645\u062d\u0644 \u062a\u0648\u0644\u062f\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"idSerial\" class=\"required\">\u0633\u0631\u06cc\u0627\u0644 \u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647<\/label>\n <input type=\"text\" id=\"idSerial\" class=\"form-control\" placeholder=\"\u0634\u0645\u0627\u0631\u0647 \u0633\u0631\u06cc\u0627\u0644 \u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"idNumber\" class=\"required\">\u0634\u0645\u0627\u0631\u0647 \u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647<\/label>\n <input type=\"text\" id=\"idNumber\" class=\"form-control\" placeholder=\"\u0634\u0645\u0627\u0631\u0647 \u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647\" required>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-section\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-home\"><\/i>\n \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0633\u06a9\u0648\u0646\u062a\u06cc \u0648 \u062a\u0645\u0627\u0633\n <\/h2>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"province\" class=\"required\">\u0627\u0633\u062a\u0627\u0646<\/label>\n <select id=\"province\" class=\"form-control\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0627\u0633\u062a\u0627\u0646 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"tehran\">\u062a\u0647\u0631\u0627\u0646<\/option>\n <option value=\"alborz\">\u0627\u0644\u0628\u0631\u0632<\/option>\n <option value=\"esfahan\">\u0627\u0635\u0641\u0647\u0627\u0646<\/option>\n <option value=\"khorasan-razavi\">\u062e\u0631\u0627\u0633\u0627\u0646 \u0631\u0636\u0648\u06cc<\/option>\n <option value=\"fars\">\u0641\u0627\u0631\u0633<\/option>\n <option value=\"azarbaijan-sharghi\">\u0622\u0630\u0631\u0628\u0627\u06cc\u062c\u0627\u0646 \u0634\u0631\u0642\u06cc<\/option>\n <option value=\"mazandaran\">\u0645\u0627\u0632\u0646\u062f\u0631\u0627\u0646<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"city\" class=\"required\">\u0634\u0647\u0631<\/label>\n <input type=\"text\" id=\"city\" class=\"form-control\" placeholder=\"\u0634\u0647\u0631 \u0645\u062d\u0644 \u0633\u06a9\u0648\u0646\u062a\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"address\" class=\"required\">\u0622\u062f\u0631\u0633 \u06a9\u0627\u0645\u0644<\/label>\n <textarea id=\"address\" class=\"form-control\" rows=\"3\" placeholder=\"\u062e\u06cc\u0627\u0628\u0627\u0646\u060c \u06a9\u0648\u0686\u0647\u060c \u067e\u0644\u0627\u06a9\u060c \u0648\u0627\u062d\u062f\" required><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"postalCode\" class=\"required\">\u06a9\u062f\u067e\u0633\u062a\u06cc<\/label>\n <input type=\"text\" id=\"postalCode\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\u06f0\" required pattern=\"\\d{10}\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"phone\" class=\"required\">\u062a\u0644\u0641\u0646 \u062b\u0627\u0628\u062a<\/label>\n <input type=\"tel\" id=\"phone\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f0\u06f2\u06f1\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"mobile\" class=\"required\">\u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647<\/label>\n <input type=\"tel\" id=\"mobile\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f0\u06f9\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\" required pattern=\"09\\d{9}\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\" class=\"required\">\u067e\u0633\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc<\/label>\n <input type=\"email\" id=\"email\" class=\"form-control\" placeholder=\"example@domain.com\" required>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-note\">\n <i class=\"fas fa-info-circle\"><\/i>\n \u062a\u0648\u062c\u0647: \u06a9\u0644\u06cc\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0645\u06cc\u200c\u0628\u0627\u06cc\u0633\u062a \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0645\u062f\u0627\u0631\u06a9 \u0647\u0648\u06cc\u062a\u06cc (\u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647 \u0648 \u06a9\u0627\u0631\u062a \u0645\u0644\u06cc) \u0628\u0627\u0634\u062f. \u067e\u0633 \u0627\u0632 \u062a\u0623\u06cc\u06cc\u062f \u0646\u0647\u0627\u06cc\u06cc\u060c \u0627\u0645\u06a9\u0627\u0646 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f.\n <\/div>\n \n <div class=\"form-footer\">\n <button type=\"button\" class=\"btn btn-secondary\">\n <i class=\"fas fa-arrow-right\"><\/i>\n \u0645\u0631\u062d\u0644\u0647 \u0642\u0628\u0644\n <\/button>\n <button type=\"submit\" class=\"btn btn-primary\">\n \u062b\u0628\u062a \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0648 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\n <i class=\"fas fa-arrow-left\"><\/i>\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n \n <footer class=\"container\">\n <p>\u00a9 \u06f1\u06f4\u06f0\u06f3 \u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648. \u06a9\u0644\u06cc\u0647 \u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a.<\/p>\n <p>\u0627\u06cc\u0646 \u0633\u0627\u0645\u0627\u0646\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0633\u0645\u06cc \u062a\u0648\u0633\u0637 \u0633\u0627\u0632\u0645\u0627\u0646 \u0635\u0646\u0639\u062a\u060c \u0645\u0639\u062f\u0646 \u0648 \u062a\u062c\u0627\u0631\u062a \u0627\u06cc\u0631\u0627\u0646 \u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n <\/footer>\n\n <script>\n \/\/ \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0631\u0646\u062f \u062e\u0648\u062f\u0631\u0648\n document.querySelectorAll('.brand-card').forEach(card => {\n card.addEventListener('click', function() {\n \/\/ \u062d\u0630\u0641 \u06a9\u0644\u0627\u0633 selected \u0627\u0632 \u0647\u0645\u0647 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\n document.querySelectorAll('.brand-card').forEach(c => {\n c.classList.remove('selected');\n });\n \n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633 selected \u0628\u0647 \u06a9\u0627\u0631\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647\n this.classList.add('selected');\n \n \/\/ \u0645\u062e\u0641\u06cc \u06a9\u0631\u062f\u0646 \u0647\u0645\u0647 \u0644\u06cc\u0633\u062a\u200c\u0647\u0627\u06cc \u0645\u062f\u0644\n document.querySelectorAll('.model-container').forEach(container => {\n container.classList.remove('active');\n });\n \n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a \u0645\u062f\u0644 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0628\u0631\u0646\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647\n const brand = this.getAttribute('data-brand');\n document.getElementById(`${brand}-models`).classList.add('active');\n \n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u0645\u0642\u0627\u062f\u06cc\u0631 select\u200c\u0647\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a \u0627\u0648\u0644\n document.querySelectorAll('.model-select').forEach(select => {\n select.selectedIndex = 0;\n });\n });\n });\n \n \/\/ \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0648\u0644\u06cc\u0646 \u0628\u0631\u0646\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\n document.querySelector('.brand-card').click();\n \n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0641\u0631\u0645\n document.getElementById('customerForm').addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0631\u0646\u062f\n const selectedBrand = document.querySelector('.brand-card.selected');\n if (!selectedBrand) {\n alert('\u0644\u0637\u0641\u0627\u064b \u06cc\u06a9 \u0628\u0631\u0646\u062f \u062e\u0648\u062f\u0631\u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.');\n return;\n }\n \n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u062f\u0644\n const activeModelContainer = document.querySelector('.model-container.active');\n const modelSelect = activeModelContainer.querySelector('.model-select');\n if (!modelSelect.value) {\n alert('\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u062e\u0648\u062f\u0631\u0648 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.');\n modelSelect.focus();\n return;\n }\n \n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0628\u0642\u06cc\u0647 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0627\u062c\u0628\u0627\u0631\u06cc\n const requiredFields = document.querySelectorAll('[required]');\n let isValid = true;\n let firstInvalidField = null;\n \n requiredFields.forEach(field => {\n if (!field.value.trim()) {\n isValid = false;\n if (!firstInvalidField) {\n firstInvalidField = field;\n }\n field.style.borderColor = '#ef4444';\n } else {\n field.style.borderColor = '#dbeafe';\n }\n });\n \n if (!isValid) {\n alert('\u0644\u0637\u0641\u0627\u064b \u06a9\u0644\u06cc\u0647 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0627\u062c\u0628\u0627\u0631\u06cc \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u0646\u0645\u0627\u06cc\u06cc\u062f.');\n if (firstInvalidField) {\n firstInvalidField.focus();\n }\n return;\n }\n \n \/\/ \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645\n alert('\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062b\u0628\u062a \u0634\u062f. \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u067e\u0631\u062f\u0627\u062e\u062a \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.');\n \n \/\/ \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\n \/\/ window.location.href = 'next-step.html';\n });\n \n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u062f\u0631 \u0644\u062d\u0638\u0647 \u0628\u0631\u0627\u06cc \u06a9\u062f \u0645\u0644\u06cc\n document.getElementById('nationalId').addEventListener('blur', function() {\n const value = this.value.trim();\n if (value.length !== 10 || !\/^\\d+$\/.test(value)) {\n this.style.borderColor = '#ef4444';\n alert('\u06a9\u062f \u0645\u0644\u06cc \u0628\u0627\u06cc\u062f \u062f\u0642\u06cc\u0642\u0627\u064b \u06f1\u06f0 \u0631\u0642\u0645 \u0628\u0627\u0634\u062f.');\n } else {\n this.style.borderColor = '#dbeafe';\n }\n });\n \n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u062f\u0631 \u0644\u062d\u0638\u0647 \u0628\u0631\u0627\u06cc \u06a9\u062f\u067e\u0633\u062a\u06cc\n document.getElementById('postalCode').addEventListener('blur', function() {\n const value = this.value.trim();\n if (value.length !== 10 || !\/^\\d+$\/.test(value)) {\n this.style.borderColor = '#ef4444';\n alert('\u06a9\u062f\u067e\u0633\u062a\u06cc \u0628\u0627\u06cc\u062f \u062f\u0642\u06cc\u0642\u0627\u064b \u06f1\u06f0 \u0631\u0642\u0645 \u0628\u0627\u0634\u062f.');\n } else {\n this.style.borderColor = '#dbeafe';\n }\n });\n \n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u062f\u0631 \u0644\u062d\u0638\u0647 \u0628\u0631\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647\n document.getElementById('mobile').addEventListener('blur', function() {\n const value = this.value.trim();\n const pattern = \/^09\\d{9}$\/;\n if (!pattern.test(value)) {\n this.style.borderColor = '#ef4444';\n alert('\u0634\u0645\u0627\u0631\u0647 \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u06cc\u062f \u0628\u0627 \u06f0\u06f9 \u0634\u0631\u0648\u0639 \u0634\u062f\u0647 \u0648 \u06f1\u06f1 \u0631\u0642\u0645 \u0628\u0627\u0634\u062f.');\n } else {\n this.style.borderColor = '#dbeafe';\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648 | \u0627\u06cc\u0631\u0627\u0646 \u062e\u0648\u062f\u0631\u0648 \u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648 \u062e\u0631\u06cc\u062f \u0622\u0633\u0627\u0646 \u0648 \u0645\u0637\u0645\u0626\u0646 \u062e\u0648\u062f\u0631\u0648\u06cc \u0646\u0648 \u062a\u0644\u0641\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc: \u06f0\u06f2\u06f1-\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8 \u06f1 \u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u062f\u0631\u0648 \u06f2 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0647\u0648\u06cc\u062a\u06cc \u06f3 \u062a\u0623\u06cc\u06cc\u062f \u0646\u0647\u0627\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u062f\u0631\u0648 \u0628\u0631\u0646\u062f \u062e\u0648\u062f\u0631\u0648 \u0647\u06cc\u0648\u0646\u062f\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0648 \u0637\u0631\u0627\u062d\u06cc \u0645\u062f\u0631\u0646 \u06a9\u06cc\u0627 \u0627\u0645\u0646\u06cc\u062a \u0648 \u0641\u0646\u0627\u0648\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0644\u06a9\u0633\u0648\u0633 \u0644\u0648\u06a9\u0633 \u0648 \u067e\u0631\u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u062a\u0648\u06cc\u0648\u062a\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0628\u0627\u0644\u0627 \u0645\u062f\u0644 \u062e\u0648\u062f\u0631\u0648 \u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-871","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/pages\/871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=871"}],"version-history":[{"count":2,"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/pages\/871\/revisions"}],"predecessor-version":[{"id":873,"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/pages\/871\/revisions\/873"}],"wp:attachment":[{"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":871,"date":"2026-01-27T12:02:51","date_gmt":"2026-01-27T08:32:51","guid":{"rendered":"https:\/\/car.pishroelectronic.com\/?page_id=871"},"modified":"2026-01-27T12:03:47","modified_gmt":"2026-01-27T08:33:47","slug":"frontbuy","status":"publish","type":"page","link":"https:\/\/car.pishroelectronic.com\/?page_id=871","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n \u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648 | \u0627\u06cc\u0631\u0627\u0646 \u062e\u0648\u062f\u0631\u0648<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Vazirmatn', sans-serif;\n }\n \n body {\n background-color: #f8fafc;\n color: #334155;\n line-height: 1.6;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);\n color: white;\n padding: 25px 0;\n border-radius: 0 0 15px 15px;\n box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);\n margin-bottom: 30px;\n }\n \n .header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 20px;\n }\n \n .logo {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .logo i {\n font-size: 32px;\n color: #60a5fa;\n }\n \n .logo h1 {\n font-size: 24px;\n font-weight: 700;\n }\n \n .logo span {\n color: #93c5fd;\n font-weight: 400;\n font-size: 16px;\n }\n \n .step-indicator {\n display: flex;\n justify-content: center;\n margin: 30px 0 20px;\n }\n \n .step {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n width: 120px;\n }\n \n .step-number {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: #dbeafe;\n color: #1e40af;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n margin-bottom: 8px;\n border: 3px solid #bfdbfe;\n z-index: 2;\n }\n \n .step.active .step-number {\n background-color: #3b82f6;\n color: white;\n border-color: #1d4ed8;\n }\n \n .step.completed .step-number {\n background-color: #10b981;\n color: white;\n border-color: #059669;\n }\n \n .step-title {\n font-size: 14px;\n color: #64748b;\n font-weight: 500;\n }\n \n .step.active .step-title {\n color: #1e40af;\n font-weight: 600;\n }\n \n .step::after {\n content: '';\n position: absolute;\n top: 20px;\n right: -60px;\n width: 120px;\n height: 3px;\n background-color: #dbeafe;\n z-index: 1;\n }\n \n .step:last-child::after {\n display: none;\n }\n \n .step.completed::after {\n background-color: #10b981;\n }\n \n .form-container {\n background-color: white;\n border-radius: 15px;\n box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\n padding: 30px;\n margin-bottom: 30px;\n }\n \n .form-section {\n margin-bottom: 35px;\n padding-bottom: 25px;\n border-bottom: 1px solid #e2e8f0;\n }\n \n .form-section:last-child {\n border-bottom: none;\n }\n \n .section-title {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 25px;\n color: #1e3a8a;\n font-size: 20px;\n }\n \n .section-title i {\n color: #3b82f6;\n font-size: 22px;\n }\n \n .form-row {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin-bottom: 20px;\n }\n \n .form-group {\n flex: 1 1 300px;\n margin-bottom: 10px;\n }\n \n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: #475569;\n font-size: 15px;\n }\n \n .form-control {\n width: 100%;\n padding: 12px 15px;\n border: 2px solid #dbeafe;\n border-radius: 8px;\n font-size: 16px;\n transition: all 0.3s;\n background-color: white;\n color: #334155;\n }\n \n .form-control:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n }\n \n select.form-control {\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n background-repeat: no-repeat;\n background-position: left 15px center;\n background-size: 16px;\n padding-left: 40px;\n }\n \n .car-brands {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 25px;\n }\n \n .brand-option {\n flex: 1;\n min-width: 200px;\n }\n \n .brand-card {\n border: 2px solid #e2e8f0;\n border-radius: 10px;\n padding: 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s;\n height: 100%;\n }\n \n .brand-card:hover {\n border-color: #93c5fd;\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n }\n \n .brand-card.selected {\n border-color: #3b82f6;\n background-color: #eff6ff;\n }\n \n .brand-logo {\n font-size: 40px;\n color: #3b82f6;\n margin-bottom: 15px;\n }\n \n .brand-name {\n font-weight: 700;\n font-size: 18px;\n color: #1e3a8a;\n margin-bottom: 5px;\n }\n \n .model-container {\n display: none;\n }\n \n .model-container.active {\n display: block;\n }\n \n .model-select {\n width: 100%;\n padding: 12px 15px;\n border: 2px solid #dbeafe;\n border-radius: 8px;\n font-size: 16px;\n color: #334155;\n background-color: white;\n cursor: pointer;\n }\n \n .model-select:focus {\n outline: none;\n border-color: #3b82f6;\n }\n \n .form-footer {\n display: flex;\n justify-content: space-between;\n margin-top: 30px;\n padding-top: 25px;\n border-top: 1px solid #e2e8f0;\n }\n \n .btn {\n padding: 14px 32px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n border: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n \n .btn-primary {\n background-color: #3b82f6;\n color: white;\n }\n \n .btn-primary:hover {\n background-color: #2563eb;\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\n }\n \n .btn-secondary {\n background-color: #e2e8f0;\n color: #475569;\n }\n \n .btn-secondary:hover {\n background-color: #cbd5e1;\n }\n \n .required::after {\n content: \" *\";\n color: #ef4444;\n }\n \n .form-note {\n background-color: #f0f9ff;\n border-right: 4px solid #0ea5e9;\n padding: 15px;\n border-radius: 0 8px 8px 0;\n margin-top: 30px;\n font-size: 14px;\n color: #0369a1;\n }\n \n .form-note i {\n margin-left: 8px;\n }\n \n footer {\n text-align: center;\n padding: 20px;\n color: #64748b;\n font-size: 14px;\n border-top: 1px solid #e2e8f0;\n margin-top: 20px;\n }\n \n @media (max-width: 768px) {\n .header-content {\n flex-direction: column;\n gap: 15px;\n text-align: center;\n }\n \n .step::after {\n display: none;\n }\n \n .step-indicator {\n flex-wrap: wrap;\n gap: 20px;\n }\n \n .form-row {\n flex-direction: column;\n gap: 15px;\n }\n \n .form-group {\n flex: 1 1 100%;\n }\n \n .brand-option {\n min-width: 100%;\n }\n \n .form-footer {\n flex-direction: column;\n gap: 15px;\n }\n \n .btn {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"container\">\n <div class=\"header-content\">\n <div class=\"logo\">\n <i class=\"fas fa-car\"><\/i>\n <div>\n <h1>\u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648<\/h1>\n <span>\u062e\u0631\u06cc\u062f \u0622\u0633\u0627\u0646 \u0648 \u0645\u0637\u0645\u0626\u0646 \u062e\u0648\u062f\u0631\u0648\u06cc \u0646\u0648<\/span>\n <\/div>\n <\/div>\n <div class=\"contact-info\">\n <p><i class=\"fas fa-phone\"><\/i> \u062a\u0644\u0641\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc: \u06f0\u06f2\u06f1-\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"container\">\n <div class=\"step-indicator\">\n <div class=\"step completed\">\n <div class=\"step-number\">\u06f1<\/div>\n <div class=\"step-title\">\u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u062f\u0631\u0648<\/div>\n <\/div>\n <div class=\"step active\">\n <div class=\"step-number\">\u06f2<\/div>\n <div class=\"step-title\">\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0647\u0648\u06cc\u062a\u06cc<\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">\u06f3<\/div>\n <div class=\"step-title\">\u062a\u0623\u06cc\u06cc\u062f \u0646\u0647\u0627\u06cc\u06cc<\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-container\">\n <form id=\"customerForm\">\n <div class=\"form-section\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-car\"><\/i>\n \u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u062f\u0631\u0648\n <\/h2>\n \n <div class=\"form-group\">\n <label class=\"required\">\u0628\u0631\u0646\u062f \u062e\u0648\u062f\u0631\u0648<\/label>\n <div class=\"car-brands\">\n <div class=\"brand-option\">\n <div class=\"brand-card\" data-brand=\"hyundai\">\n <div class=\"brand-logo\">\n <i class=\"fas fa-car-side\"><\/i>\n <\/div>\n <div class=\"brand-name\">\u0647\u06cc\u0648\u0646\u062f\u0627<\/div>\n <div class=\"brand-desc\">\u06a9\u06cc\u0641\u06cc\u062a \u0648 \u0637\u0631\u0627\u062d\u06cc \u0645\u062f\u0631\u0646<\/div>\n <\/div>\n <\/div>\n <div class=\"brand-option\">\n <div class=\"brand-card\" data-brand=\"kia\">\n <div class=\"brand-logo\">\n <i class=\"fas fa-truck-pickup\"><\/i>\n <\/div>\n <div class=\"brand-name\">\u06a9\u06cc\u0627<\/div>\n <div class=\"brand-desc\">\u0627\u0645\u0646\u06cc\u062a \u0648 \u0641\u0646\u0627\u0648\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/div>\n <\/div>\n <\/div>\n <div class=\"brand-option\">\n <div class=\"brand-card\" data-brand=\"lexus\">\n <div class=\"brand-logo\">\n <i class=\"fas fa-car\"><\/i>\n <\/div>\n <div class=\"brand-name\">\u0644\u06a9\u0633\u0648\u0633<\/div>\n <div class=\"brand-desc\">\u0644\u0648\u06a9\u0633 \u0648 \u067e\u0631\u0627\u0645\u06a9\u0627\u0646\u0627\u062a<\/div>\n <\/div>\n <\/div>\n <div class=\"brand-option\">\n <div class=\"brand-card\" data-brand=\"toyota\">\n <div class=\"brand-logo\">\n <i class=\"fas fa-shield-alt\"><\/i>\n <\/div>\n <div class=\"brand-name\">\u062a\u0648\u06cc\u0648\u062a\u0627<\/div>\n <div class=\"brand-desc\">\u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0628\u0627\u0644\u0627<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label class=\"required\">\u0645\u062f\u0644 \u062e\u0648\u062f\u0631\u0648<\/label>\n <div class=\"model-container\" id=\"hyundai-models\">\n <select class=\"model-select\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"accent\">\u0627\u06a9\u0633\u0646\u062a<\/option>\n <option value=\"elantra\">\u0627\u0644\u0627\u0646\u062a\u0631\u0627<\/option>\n <option value=\"santa-fe\">\u0633\u0627\u0646\u062a\u0627\u0641\u0647<\/option>\n <option value=\"tucson\">\u062a\u0648\u0633\u0627\u0646<\/option>\n <option value=\"creta\">\u06a9\u0631\u062a\u0627<\/option>\n <\/select>\n <\/div>\n <div class=\"model-container\" id=\"kia-models\">\n <select class=\"model-select\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"cerato\">\u0633\u0631\u0627\u062a\u0648<\/option>\n <option value=\"optima\">\u0627\u067e\u062a\u06cc\u0645\u0627<\/option>\n <option value=\"sorento\">\u0633\u0648\u0631\u0646\u062a\u0648<\/option>\n <option value=\"sportage\">\u0627\u0633\u067e\u0648\u0631\u062a\u06cc\u062c<\/option>\n <option value=\"picanto\">\u067e\u06cc\u06a9\u0627\u0646\u062a\u0648<\/option>\n <\/select>\n <\/div>\n <div class=\"model-container\" id=\"lexus-models\">\n <select class=\"model-select\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"es\">\u0627\u06cc \u0627\u0633<\/option>\n <option value=\"ls\">\u0627\u0644 \u0627\u0633<\/option>\n <option value=\"rx\">\u0622\u0631 \u0627\u06cc\u06a9\u0633<\/option>\n <option value=\"nx\">\u0627\u0646 \u0627\u06cc\u06a9\u0633<\/option>\n <option value=\"ux\">\u06cc\u0648 \u0627\u06cc\u06a9\u0633<\/option>\n <\/select>\n <\/div>\n <div class=\"model-container\" id=\"toyota-models\">\n <select class=\"model-select\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"corolla\">\u06a9\u0631\u0648\u0644\u0627<\/option>\n <option value=\"camry\">\u06a9\u0645\u0631\u06cc<\/option>\n <option value=\"rav4\">\u0631\u0627\u06a4\u06f4<\/option>\n <option value=\"land-cruiser\">\u0644\u0646\u062f\u06a9\u0631\u0648\u0632\u0631<\/option>\n <option value=\"hilux\">\u0647\u0627\u06cc\u0644\u0648\u06a9\u0633<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-section\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-user\"><\/i>\n \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0647\u0648\u06cc\u062a\u06cc\n <\/h2>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"firstName\" class=\"required\">\u0646\u0627\u0645<\/label>\n <input type=\"text\" id=\"firstName\" class=\"form-control\" placeholder=\"\u0646\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"lastName\" class=\"required\">\u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc<\/label>\n <input type=\"text\" id=\"lastName\" class=\"form-control\" placeholder=\"\u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"nationalId\" class=\"required\">\u06a9\u062f\u0645\u0644\u06cc<\/label>\n <input type=\"text\" id=\"nationalId\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f0\u06f0\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\" required pattern=\"\\d{10}\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthDate\" class=\"required\">\u062a\u0627\u0631\u06cc\u062e \u062a\u0648\u0644\u062f<\/label>\n <input type=\"text\" id=\"birthDate\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f1\u06f3\u06f7\u06f0\/\u06f0\u06f5\/\u06f1\u06f5\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"fatherName\" class=\"required\">\u0646\u0627\u0645 \u067e\u062f\u0631<\/label>\n <input type=\"text\" id=\"fatherName\" class=\"form-control\" placeholder=\"\u0646\u0627\u0645 \u067e\u062f\u0631 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthPlace\" class=\"required\">\u0645\u062d\u0644 \u062a\u0648\u0644\u062f<\/label>\n <input type=\"text\" id=\"birthPlace\" class=\"form-control\" placeholder=\"\u0634\u0647\u0631 \u0645\u062d\u0644 \u062a\u0648\u0644\u062f\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"idSerial\" class=\"required\">\u0633\u0631\u06cc\u0627\u0644 \u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647<\/label>\n <input type=\"text\" id=\"idSerial\" class=\"form-control\" placeholder=\"\u0634\u0645\u0627\u0631\u0647 \u0633\u0631\u06cc\u0627\u0644 \u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"idNumber\" class=\"required\">\u0634\u0645\u0627\u0631\u0647 \u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647<\/label>\n <input type=\"text\" id=\"idNumber\" class=\"form-control\" placeholder=\"\u0634\u0645\u0627\u0631\u0647 \u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647\" required>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-section\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-home\"><\/i>\n \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0633\u06a9\u0648\u0646\u062a\u06cc \u0648 \u062a\u0645\u0627\u0633\n <\/h2>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"province\" class=\"required\">\u0627\u0633\u062a\u0627\u0646<\/label>\n <select id=\"province\" class=\"form-control\" required>\n <option value=\"\">\u0644\u0637\u0641\u0627\u064b \u0627\u0633\u062a\u0627\u0646 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n <option value=\"tehran\">\u062a\u0647\u0631\u0627\u0646<\/option>\n <option value=\"alborz\">\u0627\u0644\u0628\u0631\u0632<\/option>\n <option value=\"esfahan\">\u0627\u0635\u0641\u0647\u0627\u0646<\/option>\n <option value=\"khorasan-razavi\">\u062e\u0631\u0627\u0633\u0627\u0646 \u0631\u0636\u0648\u06cc<\/option>\n <option value=\"fars\">\u0641\u0627\u0631\u0633<\/option>\n <option value=\"azarbaijan-sharghi\">\u0622\u0630\u0631\u0628\u0627\u06cc\u062c\u0627\u0646 \u0634\u0631\u0642\u06cc<\/option>\n <option value=\"mazandaran\">\u0645\u0627\u0632\u0646\u062f\u0631\u0627\u0646<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"city\" class=\"required\">\u0634\u0647\u0631<\/label>\n <input type=\"text\" id=\"city\" class=\"form-control\" placeholder=\"\u0634\u0647\u0631 \u0645\u062d\u0644 \u0633\u06a9\u0648\u0646\u062a\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"address\" class=\"required\">\u0622\u062f\u0631\u0633 \u06a9\u0627\u0645\u0644<\/label>\n <textarea id=\"address\" class=\"form-control\" rows=\"3\" placeholder=\"\u062e\u06cc\u0627\u0628\u0627\u0646\u060c \u06a9\u0648\u0686\u0647\u060c \u067e\u0644\u0627\u06a9\u060c \u0648\u0627\u062d\u062f\" required><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"postalCode\" class=\"required\">\u06a9\u062f\u067e\u0633\u062a\u06cc<\/label>\n <input type=\"text\" id=\"postalCode\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\u06f0\" required pattern=\"\\d{10}\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"phone\" class=\"required\">\u062a\u0644\u0641\u0646 \u062b\u0627\u0628\u062a<\/label>\n <input type=\"tel\" id=\"phone\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f0\u06f2\u06f1\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"mobile\" class=\"required\">\u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647<\/label>\n <input type=\"tel\" id=\"mobile\" class=\"form-control\" placeholder=\"\u0645\u062b\u0627\u0644: \u06f0\u06f9\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\" required pattern=\"09\\d{9}\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\" class=\"required\">\u067e\u0633\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc<\/label>\n <input type=\"email\" id=\"email\" class=\"form-control\" placeholder=\"example@domain.com\" required>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-note\">\n <i class=\"fas fa-info-circle\"><\/i>\n \u062a\u0648\u062c\u0647: \u06a9\u0644\u06cc\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0645\u06cc\u200c\u0628\u0627\u06cc\u0633\u062a \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0645\u062f\u0627\u0631\u06a9 \u0647\u0648\u06cc\u062a\u06cc (\u0634\u0646\u0627\u0633\u0646\u0627\u0645\u0647 \u0648 \u06a9\u0627\u0631\u062a \u0645\u0644\u06cc) \u0628\u0627\u0634\u062f. \u067e\u0633 \u0627\u0632 \u062a\u0623\u06cc\u06cc\u062f \u0646\u0647\u0627\u06cc\u06cc\u060c \u0627\u0645\u06a9\u0627\u0646 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f.\n <\/div>\n \n <div class=\"form-footer\">\n <button type=\"button\" class=\"btn btn-secondary\">\n <i class=\"fas fa-arrow-right\"><\/i>\n \u0645\u0631\u062d\u0644\u0647 \u0642\u0628\u0644\n <\/button>\n <button type=\"submit\" class=\"btn btn-primary\">\n \u062b\u0628\u062a \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0648 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\n <i class=\"fas fa-arrow-left\"><\/i>\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n \n <footer class=\"container\">\n <p>\u00a9 \u06f1\u06f4\u06f0\u06f3 \u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648. \u06a9\u0644\u06cc\u0647 \u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a.<\/p>\n <p>\u0627\u06cc\u0646 \u0633\u0627\u0645\u0627\u0646\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0633\u0645\u06cc \u062a\u0648\u0633\u0637 \u0633\u0627\u0632\u0645\u0627\u0646 \u0635\u0646\u0639\u062a\u060c \u0645\u0639\u062f\u0646 \u0648 \u062a\u062c\u0627\u0631\u062a \u0627\u06cc\u0631\u0627\u0646 \u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n <\/footer>\n\n <script>\n \/\/ \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0631\u0646\u062f \u062e\u0648\u062f\u0631\u0648\n document.querySelectorAll('.brand-card').forEach(card => {\n card.addEventListener('click', function() {\n \/\/ \u062d\u0630\u0641 \u06a9\u0644\u0627\u0633 selected \u0627\u0632 \u0647\u0645\u0647 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\n document.querySelectorAll('.brand-card').forEach(c => {\n c.classList.remove('selected');\n });\n \n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633 selected \u0628\u0647 \u06a9\u0627\u0631\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647\n this.classList.add('selected');\n \n \/\/ \u0645\u062e\u0641\u06cc \u06a9\u0631\u062f\u0646 \u0647\u0645\u0647 \u0644\u06cc\u0633\u062a\u200c\u0647\u0627\u06cc \u0645\u062f\u0644\n document.querySelectorAll('.model-container').forEach(container => {\n container.classList.remove('active');\n });\n \n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a \u0645\u062f\u0644 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0628\u0631\u0646\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647\n const brand = this.getAttribute('data-brand');\n document.getElementById(`${brand}-models`).classList.add('active');\n \n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u0645\u0642\u0627\u062f\u06cc\u0631 select\u200c\u0647\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a \u0627\u0648\u0644\n document.querySelectorAll('.model-select').forEach(select => {\n select.selectedIndex = 0;\n });\n });\n });\n \n \/\/ \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0648\u0644\u06cc\u0646 \u0628\u0631\u0646\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\n document.querySelector('.brand-card').click();\n \n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0641\u0631\u0645\n document.getElementById('customerForm').addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0631\u0646\u062f\n const selectedBrand = document.querySelector('.brand-card.selected');\n if (!selectedBrand) {\n alert('\u0644\u0637\u0641\u0627\u064b \u06cc\u06a9 \u0628\u0631\u0646\u062f \u062e\u0648\u062f\u0631\u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.');\n return;\n }\n \n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u062f\u0644\n const activeModelContainer = document.querySelector('.model-container.active');\n const modelSelect = activeModelContainer.querySelector('.model-select');\n if (!modelSelect.value) {\n alert('\u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 \u062e\u0648\u062f\u0631\u0648 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.');\n modelSelect.focus();\n return;\n }\n \n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0628\u0642\u06cc\u0647 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0627\u062c\u0628\u0627\u0631\u06cc\n const requiredFields = document.querySelectorAll('[required]');\n let isValid = true;\n let firstInvalidField = null;\n \n requiredFields.forEach(field => {\n if (!field.value.trim()) {\n isValid = false;\n if (!firstInvalidField) {\n firstInvalidField = field;\n }\n field.style.borderColor = '#ef4444';\n } else {\n field.style.borderColor = '#dbeafe';\n }\n });\n \n if (!isValid) {\n alert('\u0644\u0637\u0641\u0627\u064b \u06a9\u0644\u06cc\u0647 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0627\u062c\u0628\u0627\u0631\u06cc \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u0646\u0645\u0627\u06cc\u06cc\u062f.');\n if (firstInvalidField) {\n firstInvalidField.focus();\n }\n return;\n }\n \n \/\/ \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645\n alert('\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062b\u0628\u062a \u0634\u062f. \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u067e\u0631\u062f\u0627\u062e\u062a \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.');\n \n \/\/ \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\n \/\/ window.location.href = 'next-step.html';\n });\n \n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u062f\u0631 \u0644\u062d\u0638\u0647 \u0628\u0631\u0627\u06cc \u06a9\u062f \u0645\u0644\u06cc\n document.getElementById('nationalId').addEventListener('blur', function() {\n const value = this.value.trim();\n if (value.length !== 10 || !\/^\\d+$\/.test(value)) {\n this.style.borderColor = '#ef4444';\n alert('\u06a9\u062f \u0645\u0644\u06cc \u0628\u0627\u06cc\u062f \u062f\u0642\u06cc\u0642\u0627\u064b \u06f1\u06f0 \u0631\u0642\u0645 \u0628\u0627\u0634\u062f.');\n } else {\n this.style.borderColor = '#dbeafe';\n }\n });\n \n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u062f\u0631 \u0644\u062d\u0638\u0647 \u0628\u0631\u0627\u06cc \u06a9\u062f\u067e\u0633\u062a\u06cc\n document.getElementById('postalCode').addEventListener('blur', function() {\n const value = this.value.trim();\n if (value.length !== 10 || !\/^\\d+$\/.test(value)) {\n this.style.borderColor = '#ef4444';\n alert('\u06a9\u062f\u067e\u0633\u062a\u06cc \u0628\u0627\u06cc\u062f \u062f\u0642\u06cc\u0642\u0627\u064b \u06f1\u06f0 \u0631\u0642\u0645 \u0628\u0627\u0634\u062f.');\n } else {\n this.style.borderColor = '#dbeafe';\n }\n });\n \n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u062f\u0631 \u0644\u062d\u0638\u0647 \u0628\u0631\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647\n document.getElementById('mobile').addEventListener('blur', function() {\n const value = this.value.trim();\n const pattern = \/^09\\d{9}$\/;\n if (!pattern.test(value)) {\n this.style.borderColor = '#ef4444';\n alert('\u0634\u0645\u0627\u0631\u0647 \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u06cc\u062f \u0628\u0627 \u06f0\u06f9 \u0634\u0631\u0648\u0639 \u0634\u062f\u0647 \u0648 \u06f1\u06f1 \u0631\u0642\u0645 \u0628\u0627\u0634\u062f.');\n } else {\n this.style.borderColor = '#dbeafe';\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648 | \u0627\u06cc\u0631\u0627\u0646 \u062e\u0648\u062f\u0631\u0648 \u0633\u0627\u0645\u0627\u0646\u0647 \u062b\u0628\u062a \u062e\u0631\u06cc\u062f \u062e\u0648\u062f\u0631\u0648 \u062e\u0631\u06cc\u062f \u0622\u0633\u0627\u0646 \u0648 \u0645\u0637\u0645\u0626\u0646 \u062e\u0648\u062f\u0631\u0648\u06cc \u0646\u0648 \u062a\u0644\u0641\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc: \u06f0\u06f2\u06f1-\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8 \u06f1 \u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u062f\u0631\u0648 \u06f2 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0647\u0648\u06cc\u062a\u06cc \u06f3 \u062a\u0623\u06cc\u06cc\u062f \u0646\u0647\u0627\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u062e\u0648\u062f\u0631\u0648 \u0628\u0631\u0646\u062f \u062e\u0648\u062f\u0631\u0648 \u0647\u06cc\u0648\u0646\u062f\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0648 \u0637\u0631\u0627\u062d\u06cc \u0645\u062f\u0631\u0646 \u06a9\u06cc\u0627 \u0627\u0645\u0646\u06cc\u062a \u0648 \u0641\u0646\u0627\u0648\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0644\u06a9\u0633\u0648\u0633 \u0644\u0648\u06a9\u0633 \u0648 \u067e\u0631\u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u062a\u0648\u06cc\u0648\u062a\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0628\u0627\u0644\u0627 \u0645\u062f\u0644 \u062e\u0648\u062f\u0631\u0648 \u0644\u0637\u0641\u0627\u064b \u0645\u062f\u0644 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-871","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/pages\/871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=871"}],"version-history":[{"count":2,"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/pages\/871\/revisions"}],"predecessor-version":[{"id":873,"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=\/wp\/v2\/pages\/871\/revisions\/873"}],"wp:attachment":[{"href":"https:\/\/car.pishroelectronic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}