{"id":29663,"date":"2025-01-18T01:00:17","date_gmt":"2025-01-18T01:00:17","guid":{"rendered":"https:\/\/stily.com.sa\/?page_id=29663"},"modified":"2025-09-04T08:28:30","modified_gmt":"2025-09-04T08:28:30","slug":"booking","status":"publish","type":"page","link":"https:\/\/stily.perpetualbuild.com\/ar\/booking\/","title":{"rendered":"\u0627\u062d\u062c\u0632 \u0627\u0644\u0627\u0646"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"29663\" class=\"elementor elementor-29663\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f85d436 e-flex e-con-boxed e-con e-parent\" data-id=\"f85d436\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c4a5024 elementor-widget elementor-widget-shortcode\" data-id=\"c4a5024\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <section class=\"ltb-section ltb-step-01 ltb-section-bg-black ltb-bg-cover\" id=\"ltb-step-01\">\r\n        <div class=\"container custom-container\">\r\n            <div id=\"hd-container\" style=\"width:100%\">\r\n                <div class=\"header-title\">\r\n                    <h6 class=\"ftc-subtitle-1 elementor-goyto-sub ftc-font-700 text-uppercase has-color-pr wow animated\" data-splitting=\"\" style=\"visibility: visible;\">\r\n                        <span class=\"line\" style=\"translate: none; rotate: none; scale: none; transform-origin: 17.5px 1px; transform: translate(0px, 0px); background: none 0% 0% \/ auto repeat scroll padding-box border-box rgb(84, 194, 238);\"><\/span><span>\u062d\u062c\u0632 \u0633\u0631\u064a\u0639 \u0644\u0623\u0641\u0636\u0644 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0633\u064a\u0627\u0631\u0629 <\/span>\r\n                    <\/h6>\r\n                    <h1 style=\"font-size: 40px; font-weight: bold; color: #000;\"> \u0627\u062d\u062c\u0632 \u0645\u0648\u0639\u062f\u0643 \u0627\u0644\u0622\u0646<\/h1>\r\n                <\/div>\r\n                <!--Indicator -->\r\n                <div class=\"step-indicator\">\r\n                      <div class=\"step active\">\r\n                        <i class=\"fas fa-car step-icon\"><\/i>\r\n                        <div class=\"step-title\">\u0645\u0642\u0627\u0633 \u0627\u0644\u0633\u064a\u0627\u0631\u0629<\/div>\r\n                      <\/div>\r\n                      <div class=\"step\">\r\n                        <i class=\"fas fa-tools step-icon\"><\/i>\r\n                        <div class=\"step-title\"> \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/div>\r\n                      <\/div>\r\n                      <div class=\"step\">\r\n                        <i class=\"fas fa-map-marker-alt step-icon\"><\/i>\r\n                       <div class=\"step-title\">  \u0627\u0644\u0648\u0642\u062a \u0648\u0627\u0644\u0641\u0631\u0639<\/div>\r\n                      <\/div>\r\n                      <div class=\"step\">\r\n                        <i class=\"fas fa-clipboard-check step-icon\"><\/i>\r\n                        <div class=\"step-title\">\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062d\u062c\u0632<\/div>\r\n                      <\/div>\r\n                <\/div>\r\n                 <form id=\"multiStepForm\" action=\"\">\r\n                    <div class=\"step-content active\" data-step=\"1\">\r\n                        <div style=\"display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; margin: 20px 0;\">\r\n                            <hr id=\"hd-hr-left\" style=\"flex: 1; border: 1px solid #4dc1ec; margin: 0;\">\r\n                            <div id=\"hd-text-container\">\r\n                    <div id=\"hd-main-text\" style=\"font-size: 24px; font-weight: bold; color: #000;\">\u0645\u0642\u0627\u0633 \u0627\u0644\u0633\u064a\u0627\u0631\u0629<\/div>\r\n                    <div id=\"hd-sub-text\" style=\"font-size: 14px; color: #4dc1ec;\">\u0645\u0646 \u0641\u0636\u0644\u0643 \u0642\u0645 \u0628\u0627\u062e\u062a\u064a\u0627\u0631 \u062d\u062c\u0645 \u0633\u064a\u0627\u0631\u062a\u0643<\/div>\r\n                <\/div>\r\n                            <hr id=\"hd-hr-right\" style=\"flex: 1; border: 1px solid #4dc1ec; margin: 0;\">\r\n                        <\/div>\r\n                        <div id=\"ltb-car-size-input\" class=\"car-size-container\">\r\n                            <input type=\"hidden\" id=\"selected_car_size\" name=\"selected_car_size\" value=\"\">\r\n                            <button type=\"button\" class=\"ltb-car-size-input-option\" data-car-size=\"\u0633\u064a\u0627\u0631\u0629 \u0635\u063a\u064a\u0631\u0629\" onclick=\"selectCarSize(this)\">\r\n                                <img decoding=\"async\" class=\"ltb-car-size-input-media\"  src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/01\/\u0635\u063a\u064a\u0631.png\">\r\n                                <span class=\"car-size-label\"><strong>\u0635\u063a\u064a\u0631<\/strong><\/span>\r\n                            <\/button>\r\n                            <button type=\"button\" class=\"ltb-car-size-input-option\" data-car-size=\"\u0633\u064a\u0627\u0631\u0629 \u0648\u0633\u0637\" onclick=\"selectCarSize(this)\">\r\n                                <img decoding=\"async\" class=\"ltb-car-size-input-media\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/01\/\u0648\u0633\u0637.png\">\r\n                                <span class=\"car-size-label\"><strong>\u0648\u0633\u0637<\/strong><\/span>\r\n                            <\/button>\r\n                            <button type=\"button\" class=\"ltb-car-size-input-option\" data-car-size=\"\u0633\u064a\u0627\u0631\u0629 \u0643\u0628\u064a\u0631\u0629\" onclick=\"selectCarSize(this)\">\r\n                                <img decoding=\"async\" class=\"ltb-car-size-input-media\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/08\/\u0643\u0628\u064a\u0631.png\">\r\n                                <span class=\"car-size-label\"><strong>\u0643\u0628\u064a\u0631<\/strong><\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                        <!-- \u0625\u062f\u0631\u0627\u062c \u0627\u0644\u0634\u0648\u0631\u062a \u0643\u0648\u062f \u0627\u0644\u062e\u0627\u0635 \u0628\u0640 Elementor -->\r\n                        <div class=\"car-models-info\">\r\n                            \t\t<div data-elementor-type=\"container\" data-elementor-id=\"31985\" class=\"elementor elementor-31985\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb5fb2b e-flex e-con-boxed e-con e-parent\" data-id=\"eb5fb2b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3baccd3 elementor-widget elementor-widget-html\" data-id=\"3baccd3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Button trigger modal -->\r\n    <button type=\"button\" class=\"btn btn-sizes\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\">\u0643\u064a\u0641 \u0623\u062e\u062a\u0627\u0631 \u0633\u064a\u0627\u0631\u062a\u064a \u061f <\/button>\r\n    <!-- Modal -->\r\n    <div class=\"modal modal-sizes fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog modal-dialog-centered\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"exampleModalLabel\">\u062f\u0644\u064a\u0644 \u0627\u062d\u062c\u0627\u0645 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a<\/h4>\r\n            <\/div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-md-4\">\r\n                        <h5>\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629<\/h5>\r\n                        <div class=\"car_img\">\r\n                            <img decoding=\"async\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/02\/small-copy.png\" \/>\r\n                        <\/div>\r\n                        <p>\u062a\u0634\u0645\u0644 \u0633\u064a\u0627\u0631\u0627\u062a \u0647\u0627\u062a\u0634\u0628\u0627\u0643 \u0635\u063a\u064a\u0631\u0629\u060c \u0633\u064a\u0627\u0631\u0627\u062a \u0633\u064a\u062f\u0627\u0646 \u0635\u063a\u064a\u0631\u0629\u060c \u0633\u064a\u0627\u0631\u0627\u062a \u0631\u064a\u0627\u0636\u064a\u0629 \u0635\u063a\u064a\u0631\u0629 \u0630\u0627\u062a \u0627\u0644\u0628\u0627\u0628\u064a\u0646.<\/p>\r\n                        <div class=\"collapse\" id=\"collapseExample\">\r\n                                <ul dir=\"ltr\" style=\"text-align: left;margin-bottom: 0;\">\r\n                                    <li>Toyota Corolla<\/li>\r\n                                    <li>Kia Picanto<\/li>\r\n                                    <li>Kia Rio<\/li>\r\n                                    <li>MERCEDES: A - C  CLASS<\/li>\r\n                                    <li>Hyundai Accent<\/li>\r\n                                <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col-md-4\">\r\n                        <h5>\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629<\/h5>\r\n                        <div class=\"car_img\">\r\n                            <img decoding=\"async\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/02\/m-copy.png\" class=\"car_img\" \/>\r\n                        <\/div>\r\n                        <p>\u062a\u0634\u0645\u0644 \u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0633\u064a\u062f\u0627\u0646 \u0643\u0628\u064a\u0631\u0629 \u0627\u0644\u062d\u062c\u0645\u060c \u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0643\u0648\u0628\u064a\u0647\u060c \u0623\u0648\u0641\u0631 \u2013 \u0633\u064a\u0627\u0631\u0627\u062a \u0631\u064a\u0627\u0636\u064a\u0629 \u0630\u0627\u062a \u0627\u0644\u0623\u0631\u0628\u0639 \u0623\u0628\u0648\u0627\u0628\u060c \u0633\u064a\u0627\u0631\u0627\u062a \u0628\u064a\u0643 \u0623\u0628 \u0630\u0627\u062a \u0627\u0644\u0628\u0627\u0628 \u0627\u0644\u0648\u0627\u062d\u062f.<\/p>\r\n                        <div class=\"collapse\" id=\"collapseExample\">\r\n                                <ul dir=\"ltr\" style=\"text-align: left;margin-bottom: 0;\">\r\n                                    <li>Toyota Camry<\/li>\r\n                                    <li>MERCEDES: SL - CLA - GT<\/li>\r\n                                    <li>Nissan Xterra<\/li>\r\n                                    <li>Nissan Maxima<\/li>\r\n                                    <li>Hyundai Altima<\/li>\r\n                                    <li>Hyundai Creta<\/li>\r\n                                    <li>Hyundai Azera<\/li>\r\n                                    <li>Hyundai Sonata<\/li>\r\n                                    <li>Kia Cerato<\/li>\r\n                                    <li>Toyota Avalon<\/li>\r\n                                    <li>Toyota Crown<\/li>\r\n                                <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col-md-4\">\r\n                        <h5>\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629<\/h5>\r\n                        <div class=\"car_img\">\r\n                            <img decoding=\"async\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/02\/l-copy.png\" class=\"car_img\" \/>\r\n                        <\/div>\r\n                        <p>\u062a\u0634\u0645\u0644 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629\u060c \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a (SUV) \u0643\u0628\u064a\u0631\u0629 \u0627\u0644\u062d\u062c\u0645\u060c \u0648 \u0633\u064a\u0627\u0631\u0627\u062a \u0635\u0627\u0644\u0648\u0646 \u0628\u0623\u0631\u0628\u0639\u0629 \u0623\u0628\u0648\u0627\u0628\u060c \u0633\u064a\u0627\u0631\u0627\u062a \u0628\u064a\u0643 \u0623\u0628 \u0630\u0627\u062a \u0627\u0644\u0623\u0631\u0628\u0639 \u0623\u0628\u0648\u0627\u0628.<\/p>\r\n                        <div class=\"collapse\" id=\"collapseExample\">\r\n                                <ul dir=\"ltr\" style=\"text-align: left;margin-bottom: 0;\">\r\n                                    <li>LAND ROVER: DEFENDER - RANGE ROVER SPORT - SV<\/li>\r\n                                    <li>BMW: X7 - X6 - XM<\/li>\r\n                                    <li>MERCEDES: GLS - G CLASS - GLC<\/li>\r\n                                    <li>Toyota Land Cruiser<\/li>\r\n                                    <li>Toyota Sequoia<\/li>\r\n                                    <li>Hyundai Palisade<\/li>\r\n                                    <li>NISSAN: PATROL PICKUP CARS WITH 4 DOORS<\/li>\r\n                                <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseExample\" aria-expanded=\"false\" aria-controls=\"collapseExample\" class=\"btn btn-sizes\">\u0627\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a<\/button>\r\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">\u0627\u063a\u0644\u0627\u0642<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        <\/div>\r\n    <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t                        <\/div>\r\n                    <\/div>\r\n                    <p class=\"car-size-note\">\r\n                        \u0625\u0630\u0627 \u0627\u062e\u062a\u0631\u062a \u062d\u062c\u0645 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0628\u0634\u0643\u0644 \u063a\u064a\u0631 \u0635\u062d\u064a\u062d\u060c \u0633\u0646\u0642\u0648\u0645 \u0628\u0645\u0631\u0627\u062c\u0639\u0629 \u0637\u0644\u0628\u0643 \u0648\u0625\u0628\u0644\u0627\u063a\u0643 \u0628\u0630\u0644\u0643\u060c \u062b\u0645 \u062a\u0639\u062f\u064a\u0644\u0647 \u0644\u0644\u062d\u062c\u0645 \u0627\u0644\u0635\u062d\u064a\u062d.\r\n                    <\/p>\r\n                     <!--\u062e\u062a\u0627\u0631 \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629-->\r\n                    <div class=\"step-content\" data-step=\"2\">\r\n                        <div id=\"category-selection\" class=\"category-container\">\r\n                            <div id=\"hd-container\" style=\"width:100%\">\r\n                                <div style=\"display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; margin: 20px 0;\">\r\n                                    <hr id=\"hd-hr-left\" style=\"flex: 1; border: 1px solid #4dc1ec; margin: 0;\">\r\n                                    <div id=\"hd-text-container\">\r\n                                        <div id=\"hd-main-text\" style=\"font-size: 24px; font-weight: bold; color: #000;\">\u0627\u062e\u062a\u0627\u0631 \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/div>\r\n                                        <div id=\"hd-sub-text\" style=\"font-size: 14px; color: #4dc1ec;\">\u0645\u0646 \u0641\u0636\u0644\u0643 \u0642\u0645 \u0628\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u062e\u062f\u0645\u0629<\/div>\r\n                                    <\/div>\r\n                                    <hr id=\"hd-hr-right\" style=\"flex: 1; border: 1px solid #4dc1ec; margin: 0;\">\r\n                                <\/div>                   \r\n                            <div class=\"categories-wrapper\">\r\n                                  <!-- \u062d\u0645\u0627\u064a\u0629 -->\r\n                                <button class=\"category-btn\" data-category=\"\u062d\u0645\u0627\u064a\u0629\" onclick=\"selectCategory(this)\" type=\"button\">\r\n                                    <img decoding=\"async\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/04\/car_protection_icon_colored.webp\" alt=\"\u062d\u0645\u0627\u064a\u0629\">\r\n                                    <span>\u062d\u0645\u0627\u064a\u0629<\/span>\r\n                                <\/button>\r\n                                \r\n                                <!-- \u0639\u0627\u0632\u0644 \u062d\u0631\u0627\u0631\u064a \u0646\u0627\u0646\u0648\u0633\u064a\u0631\u0627\u0645\u064a\u0643 -->\r\n                                <button class=\"category-btn\" data-category=\"\u0639\u0627\u0632\u0644 \u062d\u0631\u0627\u0631\u064a \u0646\u0627\u0646\u0648\u0633\u064a\u0631\u0627\u0645\u064a\u0643\" onclick=\"selectCategory(this)\" type=\"button\">\r\n                                    <img decoding=\"async\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/04\/car_nano_ceramic_thermal_insulation_icon-colored_1.webp\" alt=\"\u0639\u0627\u0632\u0644 \u062d\u0631\u0627\u0631\u064a \u0646\u0627\u0646\u0648\u0633\u064a\u0631\u0627\u0645\u064a\u0643\">\r\n                                    <span>\u0639\u0627\u0632\u0644 \u062d\u0631\u0627\u0631\u064a \u0646\u0627\u0646\u0648\u0633\u064a\u0631\u0627\u0645\u064a\u0643<\/span>\r\n                                <\/button>\r\n                                \r\n                                <!-- \u0646\u0627\u0646\u0648 \u0633\u064a\u0631\u0627\u0645\u064a\u0643 -->\r\n                                <button class=\"category-btn\" data-category=\"\u0646\u0627\u0646\u0648 \u0633\u064a\u0631\u0627\u0645\u064a\u0643\" onclick=\"selectCategory(this)\" type=\"button\">\r\n                                    <img decoding=\"async\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/04\/car_nano_ceramic_thermal_insulation_icon-colored_trimmed.webp\" alt=\"\u0646\u0627\u0646\u0648 \u0633\u064a\u0631\u0627\u0645\u064a\u0643\">\r\n                                    <span>\u0646\u0627\u0646\u0648 \u0633\u064a\u0631\u0627\u0645\u064a\u0643<\/span>\r\n                                <\/button>\r\n                                \r\n                                <!-- \u062a\u0644\u0645\u064a\u0639 -->\r\n                                <button class=\"category-btn\" data-category=\"\u062a\u0644\u0645\u064a\u0639\" onclick=\"selectCategory(this)\" type=\"button\">\r\n                                    <img decoding=\"async\" src=\"https:\/\/stily.perpetualbuild.com\/wp-content\/uploads\/2025\/04\/car_polishing_icon.webp\" alt=\"\u062a\u0644\u0645\u064a\u0639\">\r\n                                    <span>\u062a\u0644\u0645\u064a\u0639<\/span>\r\n                                <\/button>\r\n\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div id=\"filtered-products\" class=\"filtered-products\" style=\"margin-top: 30px;\">                \r\n                            <div id=\"products-container\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <\/div>\r\n                    <!-- \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0648\u0627\u0644\u0641\u0631\u0639 -->\r\n                    <div class=\"step-content\" data-step=\"3\">\r\n                        <div style=\"display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; margin: 20px 0;\">\r\n                            <hr id=\"hd-hr-left\" style=\"flex: 1; border: 1px solid #4dc1ec; margin: 0;\">\r\n                            <div id=\"hd-text-container\">\r\n                                <div id=\"hd-main-text\" style=\"font-size: 24px; font-weight: bold; color: #000;\">\u0642\u0645 \u0628\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0648\u0642\u062a \u0648\u0627\u0644\u0641\u0631\u0639<\/div>\r\n                                <div id=\"hd-sub-text\" style=\"font-size: 14px; color: #4dc1ec;\">\u0645\u0646 \u0641\u0636\u0644\u0643 \u0642\u0645 \u0628\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0641\u0631\u0639<\/div>\r\n                            <\/div>\r\n                            <hr id=\"hd-hr-right\" style=\"flex: 1; border: 1px solid #4dc1ec; margin: 0;\">\r\n                        <\/div>\r\n                        <div class=\"branch-time-container\">\r\n                            <div class=\"region-branch-container\">\r\n                            <div  class=\"region-container-sub\">\r\n                                <label for=\"region-select\" style=\"color: black;\">\u0642\u0645 \u0628\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u0646\u0637\u0642\u0629<\/label>\r\n                                <select id=\"region-select\" onchange=\"updateBranches()\" >\r\n                                    <option value=\"\" disabled selected>\u0623\u062e\u062a\u0627\u0631 \u0627\u0644\u0645\u0646\u0637\u0642\u0629<\/option>\r\n                                    <option value=\"\u0627\u0644\u0631\u064a\u0627\u0636\">\u0627\u0644\u0631\u064a\u0627\u0636<\/option>\r\n                                    <option value=\"\u0627\u0644\u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0645\u0646\u0648\u0631\u0629\">\u0627\u0644\u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0645\u0646\u0648\u0631\u0629<\/option>\r\n                                    <option value=\"\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0634\u0631\u0642\u064a\u0629\">\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0634\u0631\u0642\u064a\u0629<\/option>\r\n                                    <option value=\"\u0627\u0644\u0642\u0635\u064a\u0645\">\u0627\u0644\u0642\u0635\u064a\u0645<\/option>\r\n                                 \r\n                                <\/select>\r\n                        <\/div>\r\n                            <div class=\"region-container-sub\">\r\n                                <label for=\"branch-select\" >\u0642\u0645 \u0628\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0641\u0631\u0639<\/label>\r\n                                <select id=\"branch-select\" disabled>\r\n                                    <option value=\"\" disabled selected>\u0623\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639<\/option>\r\n                                <\/select>\r\n                            <\/div>            \r\n                        <\/div>\r\n                            <div id=\"calendar-time-container\">\r\n                                <div class=\"calendar-time-container-inner\">\r\n                                    <!-- \u0627\u0644\u062a\u0642\u0648\u064a\u0645 -->\r\n                                    <div id=\"calendar-container\" >\r\n                                        <h4 >\u0627\u0644\u062a\u0627\u0631\u064a\u062e<\/h4>\r\n                                        <div id=\"datepicker\"><\/div>\r\n                                    <\/div>\r\n                                    <div id=\"time-container\" >\r\n                                        <h4 >\u0627\u0644\u0648\u0642\u062a<\/h4>\r\n                                        <div id=\"am-time-buttons\" style=\"display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 15px;\">\r\n                                            <button class=\"time-btn\" data-time=\"9:00 AM\" type=\"button\">AM 9:00<\/button>\r\n                                            <button class=\"time-btn\" data-time=\"10:00 AM\" type=\"button\">AM 10:00<\/button>\r\n                                            <button class=\"time-btn\" data-time=\"11:00 AM\" type=\"button\">AM 11:00<\/button>\r\n                                        <\/div>\r\n                                        <div id=\"pm-time-buttons\" style=\"display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;\">\r\n                                                <button class=\"time-btn\" data-time=\"4:00 PM\" type=\"button\">PM 4:00<\/button>\r\n                                                <button class=\"time-btn\" data-time=\"5:00 PM\" type=\"button\">PM 5:00<\/button>\r\n                                                <button class=\"time-btn\" data-time=\"6:00 PM\" type=\"button\">PM 6:00<\/button>\r\n                                                <button class=\"time-btn\" data-time=\"7:00 PM\" type=\"button\">PM 7:00<\/button>\r\n                                                <button class=\"time-btn\" data-time=\"8:00 PM\" type=\"button\">PM 8:00<\/button>\r\n                                        <\/div>\r\n        \r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"initial-booking-message\">\r\n                                    \u0647\u0630\u0647  \u0645\u0631\u062d\u0644\u0629 \u062d\u062c\u0632 \u0645\u0628\u062f\u0626\u064a\u060c \u0648\u0633\u064a\u0642\u0648\u0645 \u0623\u062d\u062f \u0623\u0641\u0631\u0627\u062f \u0627\u0644\u0641\u0631\u064a\u0642 \u0628\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0644\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0645\u0648\u0639\u062f \u0648\u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0644\u0627\u062d\u0642\u064b\u0627.\r\n                                <\/div>\r\n\r\n                            <\/div>                            \r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"step-content\" data-step=\"4\">\r\n                        <div style=\"display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; margin: 20px 0;\">\r\n                                <hr id=\"hd-hr-left\" style=\"flex: 1; border: 1px solid #4dc1ec; margin: 0;\">\r\n                                <div id=\"hd-text-container\">\r\n                                    <div id=\"hd-main-text\" style=\"font-size: 24px; font-weight: bold; color: #000;\">\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062d\u062c\u0632<\/div>\r\n                                    <div id=\"hd-sub-text\" style=\"font-size: 14px; color: #4dc1ec;\">\u0645\u0646 \u0641\u0636\u0644\u0643 \u0642\u0645 \u0628\u062a\u0639\u0628\u0626\u0629 \u0645\u0639\u0644\u0648\u0645\u0627\u062a\u0643 \u0644\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u062c\u0632<\/div>\r\n                                <\/div>\r\n                                <hr id=\"hd-hr-right\" style=\"flex: 1; border: 1px solid #4dc1ec; margin: 0;\">\r\n                        <\/div>\r\n                        <div class=\"woocommerce\"><\/div>                    <\/div> \r\n                    <div class=\"btn-group\">\r\n                            <button type=\"button\" class=\"custom-btn\" id=\"prevBtn\">\r\n                            <i class=\"fa-solid fa-chevron-right ml-2\"><\/i> \u0627\u0644\u0633\u0627\u0628\u0642\r\n                            <\/button>\r\n                            <button type=\"button\" class=\"custom-btn\" id=\"nextBtn\">\r\n                            \u0627\u0644\u062a\u0627\u0644\u064a <i class=\"fa-solid fa-chevron-left mr-2\"><\/i>\r\n                            <\/button>\r\n                    <\/div>\r\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"ar\"\/><\/form>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n    <style>\r\n       .time-btn {\r\n        background-color: transparent;\r\n        border: 2px solid #4DC1EC;\r\n        color: #4DC1EC;\r\n        padding: 10px 15px;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        font-size: 14px;\r\n        text-transform: uppercase;\r\n    }\r\n    .time-btn:hover {\r\n        background-color: #4DC1EC;\r\n        color: white;\r\n    }\r\n    .time-btn.selected-time {\r\n        background-color: #4DC1EC;\r\n        color: white;\r\n        border-color: #00ff00;\r\n    }\r\n    #hd-container {\r\n        text-align: center;\r\n        position: relative;\r\n    }\r\n    #hd-hr-left, #hd-hr-right {\r\n        border: 1px solid #4dc1ec;  \r\n        width: 20%;\r\n        display: inline-block;\r\n        margin: 0 10px;\r\n        vertical-align: middle;\r\n    }\r\n    #hd-container h1 {\r\n    font-size: 24px;\r\n    font-weight: bold;\r\n    color: #000; \/* \u0627\u0633\u062a\u0628\u062f\u0627\u0644 \u0627\u0644\u0623\u0628\u064a\u0636 \u0628\u0627\u0644\u0623\u0633\u0648\u062f *\/\r\n    margin: 0;\r\n}\r\n    #hd-container p {\r\n    font-size: 14px;\r\n    color: #4dc1ec; \/* \u0627\u0633\u062a\u0628\u062f\u0627\u0644 \u0627\u0644\u0623\u062d\u0645\u0631 \u0628\u0627\u0644\u0644\u0628\u0646\u064a \u0644\u0644\u0646\u0635 \u0627\u0644\u0641\u0631\u0639\u064a *\/\r\n    margin-top: 5px;\r\n    }\r\n    #hd-text-container {\r\n        display: inline-block;\r\n        text-align: center;\r\n        margin-top:10px ;\r\n    }\r\n    #hd-main-text {\r\n        font-size: 24px;\r\n        font-weight: bold;\r\n        color: #000;\r\n    }\r\n    #hd-sub-text {\r\n        font-size: 14px;\r\n        color: #bbb;\r\n    }\r\n    \r\n    \/* \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0645\u0642\u0627\u0633\u0627\u062a \u0627\u0644\u0633\u064a\u0627\u0631\u0629 *\/\r\n    .car-size-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 20px;\r\n        margin-top: 20px;\r\n    }\r\n    \r\n    .ltb-car-size-input-option {\r\n        width: 150px;\r\n        border: 2px solid transparent;\r\n        border-radius: 10px;\r\n        background-color: #222;\r\n        text-align: center;\r\n        padding: 10px;\r\n        cursor: pointer;\r\n        transition: border-color 0.3s ease, transform 0.3s ease;\r\n    }\r\n    \r\n    .ltb-car-size-input-option:hover {\r\n        border-color: #00ff00;\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .ltb-car-size-input-media {\r\n        width: 100%;\r\n        border-radius: 10px !important;\r\n        margin-bottom: 10px;\r\n    }\r\n    \r\n    .car-size-label {\r\n        font-size: 16px;\r\n        font-weight: bold;\r\n        color: #fff;\r\n    }\r\n    .branch-time-container{\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-content: center;\r\n        gap: 45px;\r\n    }\r\n    \r\n    #time-container{\r\n        align-content: center;\r\n        \r\n    }\r\n    \r\n    #calendar-time-container {\r\n    display: none; \/* \u0645\u062e\u0641\u064a \u0628\u0634\u0643\u0644 \u0627\u0641\u062a\u0631\u0627\u0636\u064a *\/\r\n    }\r\n  #time-container h4 , #calendar-container h4{\r\n        color: #232323;\r\n    }\r\n    #calendar-time-container.show{\r\n            display: flex;\r\n            gap: 40px;\r\n            width: 100%;\r\n            justify-content: space-around;\r\n            flex-direction: column;\r\n    }\r\n    .calendar-time-container-inner {\r\n    display: flex;\r\n    gap: 40px;\r\n    width: 100%;\r\n    justify-content: space-around;\r\n}\r\n    \/* \u062c\u0639\u0644 \u0627\u0644\u0623\u0639\u0645\u062f\u0629 Full Width *\/\r\n    #customer_details {\r\n        display: block; \/* \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0623\u0639\u0645\u062f\u0629 *\/\r\n        width: 100%;\r\n    }\r\n    \r\n    #customer_details .col-1, \r\n    #customer_details .col-2 {\r\n        width: 100%; \/* \u0627\u062c\u0639\u0644 \u0643\u0644 \u0642\u0633\u0645 \u064a\u0623\u062e\u0630 \u0627\u0644\u0639\u0631\u0636 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\r\n        margin: 0 auto;\r\n    }\r\n    .woocommerce-billing-fields > h3{\r\n        color: white !important;\r\n        \/*display: none;*\/\r\n        \r\n    }\r\n    \r\n    .woocommerce-billing-fields {\r\n        max-width: 100%; \/* \u0636\u0628\u0637 \u0639\u0631\u0636 \u0627\u0644\u0642\u0633\u0645 *\/\r\n        margin: 0 auto; \/* \u062a\u0648\u0633\u064a\u0637 \u0627\u0644\u0642\u0633\u0645 *\/\r\n        padding: 20px;\r\n        background-color: #4DC1EC; \/* \u0644\u0648\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n        border-radius: 10px; \/* \u062c\u0639\u0644 \u0627\u0644\u062d\u0648\u0627\u0641 \u0645\u0633\u062a\u062f\u064a\u0631\u0629 *\/\r\n    }\r\n    \r\n    .woocommerce-billing-fields__field-wrapper p {\r\n        display: block; \/* \u062c\u0639\u0644 \u0627\u0644\u062d\u0642\u0648\u0644 \u0641\u064a \u0633\u0637\u0631 \u0648\u0627\u062d\u062f *\/\r\n        width: 100%;\r\n        margin-bottom: 15px;\r\n    }\r\n    \r\n    .woocommerce-billing-fields label {\r\n        color: white; \/* \u062a\u063a\u064a\u064a\u0631 \u0644\u0648\u0646 \u0627\u0644\u0646\u0635 *\/\r\n    }\r\n       .step-content .woocommerce .form-row input::placeholder,\r\n    .step-content .woocommerce .form-row textarea::placeholder {\r\n        color: #a2a2a2a2;\r\n        font-size: 15px;\r\n    }\r\n    \r\n    .woocommerce-billing-fields input {\r\n        width: 100%; \/* \u062c\u0639\u0644 \u0627\u0644\u062d\u0642\u0648\u0644 \u062a\u0645\u062a\u062f \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\r\n        padding: 5px 10px;\r\n        border: 1px solid #ccc;\r\n        border-radius: 5px;\r\n        background-color: #fff;\r\n    }\r\n    \/* \u0625\u0632\u0627\u0644\u0629 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0623\u0639\u0645\u062f\u0629 *\/\r\n    .woocommerce #customer_details .col-1,\r\n    .woocommerce #customer_details .col-2 {\r\n        float: none;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n    \r\n    #region-select, #branch-select {\r\n        background-color: #232323;\r\n        color: white;\r\n        border: 1px solid #444;\r\n        border-radius: 12px;\r\n        font-size: 14px;\r\n        width: 100%;\r\n        padding: 15px; \r\n    }\r\n    \r\n    #datepicker {\r\n        background-color: #4DC1EC;\r\n        border-radius: 5px;\r\n        padding: 10px;\r\n        color: white;\r\n    }\r\n    \r\n #checkout-section {\r\n    display: block !important;\r\n    visibility: visible !important;\r\n    opacity: 1 !important;\r\n}\r\n\r\n    .container.custom-container {\r\n        width: 100%;\r\n        margin: 0; \r\n        padding: 0 15px;  \r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        flex-direction: column;\r\n    }\r\n    .category-container {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        width: 100%;\r\n    }\r\n    .categories-wrapper {\r\n        display: grid;\r\n        grid-template-columns: repeat(4, 1fr);\r\n        gap: 20px; \r\n        width: 100%; \r\n    }\r\n    .category-btn {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        background: #4DC1EC;\r\n        width: 100%; \r\n        padding: 15px;\r\n        color: white; \r\n        border: none;\r\n        border-radius: 5px;\r\n        margin-bottom: 10px;\r\n        transition: background-color 0.3s ease, transform 0.2s ease; *\/\r\n        font-size: 16px; \r\n        font-weight: 600; \r\n        text-align: center; \r\n        cursor: pointer;\r\n    }\r\n    .category-btn:hover {\r\n        transform: scale(1.05);\r\n    }\r\n    .category-btn img {\r\n        width: 60px;\r\n        height: auto;\r\n        margin-bottom: 10px;\r\n    }\r\n    .category-btn span {\r\n        font-size: 17px;\r\n        color: #fff;\r\n        text-align: center;\r\n        font-weight: bold;\r\n    }\r\n    .ltb-section {\r\n \r\n        color: #000;\r\n        padding: 20px 0;\r\n        text-align: center;\r\n        width: 100%;\r\n        font-weight: bold;\r\n    }\r\n    .car-size-container, { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }\r\n    .ltb-car-size-input-option {\r\n            width: 100%; \/* \u0627\u0644\u0639\u0631\u0636 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\r\n            padding: 10px;\r\n            background-color: #232323;\r\n            color: white;\r\n            text-align: center;\r\n            border-radius: 10px;\r\n            border: 2px solid transparent;\r\n            transition: all 0.3s ease;\r\n    }        \r\n    .ltb-car-size-input-option:hover {\r\n        background-color: #444;\r\n            \r\n    }\r\n    .ltb-car-size-input-option.selected {\r\n        border: 2px solid #4DC1EC;\r\n        background-color: #333;\r\n    }\r\n    .category-btn.selected {\r\n        background-color: #232323;\r\n        color: white;\r\n        transform: scale(1.05);\r\n    }\r\n    #filtered-products {\r\n        margin-top: 0;\r\n        box-sizing: border-box; \r\n    }\r\n    #products-container {\r\n        display: flex;   \r\n        flex-wrap: wrap;  \r\n        gap: 20px;\r\n        justify-content: Center;\r\n        box-sizing: border-box;*\/\r\n    }\r\n    .product-card {\r\n        width: calc(33% - 20px);\r\n        background: #fff;\r\n        border: 1px solid #ddd;\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n        padding: 10px 17px;\r\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n    .product-card:hover {\r\n        transform: scale(1.03); \/* \u062a\u0623\u062b\u064a\u0631 \u062a\u0643\u0628\u064a\u0631 \u0637\u0641\u064a\u0641 \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\r\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n    }\r\n    .product-container:has(.product-card:nth-child(2):last-child) .product-card {\r\n        flex: 1 1 calc(33.333% - 20px); \u0631 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0623\u0646 \u062a\u0628\u0642\u0649 33.33% \u062d\u062a\u0649 \u0644\u0648 \u0643\u0627\u0646 \u0639\u062f\u062f\u0647\u0627 \u0627\u062b\u0646\u064a\u0646 *\/\r\n    }\r\n    .product-card .product-details{\r\n        text-align: justify;\r\n    }\r\n    \r\n    .product-image img {\r\n        width: 100%;\r\n        height: auto;\r\n        border-bottom: 1px solid #eee;\r\n        margin-bottom: 10px; \/* \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0628\u064a\u0646 \u0627\u0644\u0635\u0648\u0631\u0629 \u0648\u0627\u0644\u0645\u062d\u062a\u0648\u0649 *\/\r\n        border-radius: 12px; \/* \u062d\u0648\u0627\u0641 \u0646\u0627\u0639\u0645\u0629 \u0644\u0644\u0635\u0648\u0631\u0629 *\/\r\n    }\r\n    \r\n    .product-info {\r\n        padding: 10px 0; \/* \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u0634\u0648 \u0627\u0644\u0639\u0645\u0648\u062f\u064a *\/\r\n    }\r\n    \r\n    .product-title {\r\n       font-size: 15px;\r\n    font-weight: 700;\r\n    margin-bottom: 5px; \r\n    color: #000;  \r\n     min-height: 48px;\r\n    text-align: center;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    }\r\n    \r\n    .product-price-container {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background-color: #000; \/* \u062e\u0644\u0641\u064a\u0629 \u0633\u0648\u062f\u0627\u0621 *\/\r\n        color: #fff; \/* \u0646\u0635 \u0623\u0628\u064a\u0636 *\/\r\n        font-weight: bold; \/* \u0627\u0644\u0646\u0635 \u0628\u062e\u0637 \u0639\u0631\u064a\u0636 *\/\r\n        font-size: 16px; \/* \u062d\u062c\u0645 \u0627\u0644\u0646\u0635 *\/\r\n        padding: 10px 20px; \/* \u0645\u0633\u0627\u0641\u0627\u062a \u062f\u0627\u062e\u0644\u064a\u0629 *\/\r\n        border-radius: 10px; \/* \u062d\u0648\u0627\u0641 \u0645\u0633\u062a\u062f\u064a\u0631\u0629 *\/\r\n        width: fit-content; \/* \u064a\u062c\u0639\u0644 \u0627\u0644\u0639\u0631\u0636 \u064a\u0646\u0627\u0633\u0628 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 *\/\r\n    }\r\n    \r\n    .product-price {\r\n        font-size: 24px; \/* \u062d\u062c\u0645 \u0627\u0644\u0646\u0635 \u0644\u0644\u0633\u0639\u0631 *\/\r\n        margin-right: 5px; \/* \u0645\u0633\u0627\u0641\u0629 \u0628\u064a\u0646 \u0627\u0644\u0631\u0642\u0645 \u0648\u0627\u0644\u0639\u0645\u0644\u0629 *\/\r\n    }\r\n    \r\n    .currency {\r\n        font-size: 16px; \/* \u062d\u062c\u0645 \u0627\u0644\u0646\u0635 \u0644\u0644\u0639\u0645\u0644\u0629 *\/\r\n        margin-right: 5px;\r\n    }\r\n    \r\n    \r\n    .increment {\r\n        font-size: 20px; \/* \u062d\u062c\u0645 \u0627\u0644\u0646\u0635 \u0644\u0644\u0631\u0645\u0632 + *\/\r\n        margin-left: 5px; \/* \u0645\u0633\u0627\u0641\u0629 \u0628\u064a\u0646 \u0627\u0644\u0631\u0645\u0632 \u0648\u0627\u0644\u0628\u0627\u0642\u064a *\/\r\n    }\r\n    \r\n    \r\n    .in-cart {\r\n        border: 2px solid #00ff00;\r\n        background-color: #e3f4fc;\r\n    }\r\n    \r\n    .installment {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: start;\r\n        font-size: 12px;\r\n        margin-bottom: 10px;\r\n        display: flex;\r\n       \r\n        justify-content: space-between;\r\n        color: #000; \/* \u0627\u0644\u0646\u0635 \u0627\u0644\u0623\u0633\u0648\u062f *\/\r\n        flex-direction: column;\r\n    align-items: end;\r\n    }\r\n    .price{\r\n         display: flex;\r\n        gap: 4px;\r\n        align-items: center;\r\n    }\r\n    .price i{\r\n        font-size: 12px;\r\n       \r\n    }\r\n    .price .value{\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n    }\r\n \r\n     .warranty , .price{\r\n         color:  #232323;\r\n     }\r\n    .warranty i{\r\n        font-size: 12px;\r\n    }\r\n    .installment-img {\r\n        display: flex;\r\n        width: 15%;\r\n        align-content: center;\r\n        justify-content: flex-end;\r\n    }\r\n    \r\n    .installment .installment-img img {\r\n        width: 100% !important;\r\n        border-radius: 10px;\r\n        margin-left: 5px;\r\n    }\r\n    \r\n    .more-details {\r\n        display: block;\r\n        background-color: #4dc1ec;\r\n        color: white;\r\n        text-align: center;\r\n        padding: 10px;\r\n        border-radius: 12px;\r\n        text-decoration: none;\r\n        font-weight: 600;\r\n        transition: background-color 0.3s ease;\r\n    }\r\n    \r\n    .more-details:hover {\r\n        color: #fff;\r\n        background-color: #232323;\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u0634\u0627\u0634\u0627\u062a *\/\r\n    @media (max-width: 1024px) {\r\n        #products-container {\r\n            grid-template-columns: repeat(2, 1fr); \r\n            gap: 20px;\r\n        }\r\n        .product-card {\r\n        flex: 1 1 calc(50% - 20px); \r\n        max-width: calc(50% - 20px);\r\n    }\r\n    }\r\n\r\n\r\n    @media (max-width: 768px) {\r\n        .ltb-section{\r\n            padding: 15px;\r\n        }\r\n         .step-content .woocommerce .form-row input,{\r\n            font-size: 13px;\r\n        }\r\n        .step-content .woocommerce .form-row .input-text{\r\n                padding: 5px 10px;\r\n        }\r\n        .woocommerce-billing-fields{\r\n            padding: 15px 10px;\r\n        }\r\n        .container.custom-container{\r\n            padding: 0;\r\n        }\r\n        #region-select ,#branch-select, {\r\n            padding: 20px !important;\r\n        }\r\n        #calendar-time-container , .calendar-time-container-inner{\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-content: center;\r\n        }\r\n        .ui-datepicker-inline {\r\n            width: 100%;;\r\n        }\r\n        #calendar-container{\r\n            order: 2;\r\n        }\r\n        .categories-wrapper{\r\n            grid-template-columns: repeat(2, 3fr);\r\n        }\r\n        .category-btn{\r\n            justify-content: center;\r\n              font-weight: 500;\r\n        }\r\n        .product-card {\r\n        flex: 1 1 calc(100% - 20px); \r\n        max-width: calc(100% - 20px);\r\n        padding: 10px; \r\n        }\r\n     \r\n        .category-btn span {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n        }\r\n        .category-btn.selected{\r\n            font-weight: 700;\r\n        }\r\n        .car-size-container{\r\n            flex-wrap: wrap;\r\n            \r\n        }\r\n        .ltb-car-size-input-option {\r\n             width: 100%;\r\n            \r\n        }\r\n        #products-container {\r\n            grid-template-columns: repeat(1, 1fr); \/* \u0645\u0646\u062a\u062c \u0648\u0627\u062d\u062f \u0641\u064a \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 *\/\r\n        }\r\n    }\r\n    .del-price{\r\n        font-size: 13px;\r\n        color: #5f5353;\r\n        font-weight: 100;\r\n    }\r\n\r\n\r\n    <\/style>\r\n    <script>\r\n    const disabledDates = [\r\n         '5-6-2025',\r\n         '6-6-2025',\r\n          '7-6-2025',\r\n        '8-6-2025',\r\n         '9-6-2025'\r\n   ];\r\n\r\n        function scrollToElementIfMobile(selector) {\r\n        if (window.innerWidth <= 768) {\r\n            const el = document.querySelector(selector);\r\n            if (el) {\r\n                el.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n            }\r\n        }\r\n    }\r\n        document.querySelectorAll('.step-indicator .step').forEach(function(stepElement, index) {\r\n                stepElement.addEventListener('click', function () {\r\n            const targetStep = index + 1; \/\/ \u0644\u0623\u0646 index \u0628\u064a\u0628\u062f\u0623 \u0645\u0646 0\r\n    \r\n            if (targetStep && targetStep !== currentStep) {\r\n                currentStep = targetStep;\r\n                showStep(currentStep);\r\n            }\r\n        });\r\n            });\r\n        document.addEventListener(\"DOMContentLoaded\", function () {\r\n                \/\/ \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0648\u062c\u0648\u062f \u0627\u0644\u0641\u0648\u0631\u0645 \u0627\u0644\u062e\u0627\u0635 \u0628\u0640 WooCommerce Checkout\r\n                let checkoutForm = document.querySelector('form.checkout');\r\n                if (checkoutForm) {\r\n                    \/\/ \u0627\u0633\u062a\u0631\u062c\u0627\u0639 \u0627\u0644\u0642\u064a\u0645 \u0645\u0646 LocalStorage\r\n                    let userSelection = JSON.parse(localStorage.getItem('userSelection')) || {};\r\n                    let selectedRegion = localStorage.getItem('selectedRegion') || '';\r\n                    let selectedBranch = localStorage.getItem('selectedBranch') || '';\r\n                    let selectedDate = localStorage.getItem('selectedDate') || '';\r\n                    let selectedTime = localStorage.getItem('selectedTime') || '';\r\n            \r\n                    \/\/ \u0625\u0646\u0634\u0627\u0621 \u062d\u0642\u0648\u0644 \u0645\u062e\u0641\u064a\u0629 \u0644\u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0642\u064a\u0645 \u0645\u0639 \u0627\u0644\u0637\u0644\u0628\r\n                    function addHiddenInput(name, value) {\r\n                        let input = document.createElement(\"input\");\r\n                        input.type = \"hidden\";\r\n                        input.name = name;\r\n                        input.value = value;\r\n                        checkoutForm.appendChild(input);\r\n                    }\r\n            \r\n                    addHiddenInput(\"selected_car_size\", userSelection.carSize || '');\r\n                    addHiddenInput(\"selected_category\", userSelection.category || '');\r\n                    addHiddenInput(\"selectedRegion\", selectedRegion);\r\n                    addHiddenInput(\"selectedBranch\", selectedBranch);\r\n                    addHiddenInput(\"selectedDate\", selectedDate);\r\n                    addHiddenInput(\"selectedTime\", selectedTime);\r\n                }\r\n        });\r\n        \/\/ Function to handle time button selection\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            const timeButtons = document.querySelectorAll('.time-btn');\r\n        \r\n            if (timeButtons.length > 0) {\r\n                timeButtons.forEach(button => {\r\n                    button.addEventListener('click', function () {\r\n                        \/\/ \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0641\u0626\u0629 \"selected-time\" \u0645\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n                        timeButtons.forEach(btn => btn.classList.remove('selected-time'));\r\n        \r\n                        \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0641\u0626\u0629 \"selected-time\" \u0625\u0644\u0649 \u0627\u0644\u0632\u0631 \u0627\u0644\u0645\u062d\u062f\u062f\r\n                        this.classList.add('selected-time');\r\n        \r\n                        \/\/ \u062d\u0641\u0638 \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0645\u062d\u062f\u062f \u0641\u064a localStorage\r\n                        const selectedTime = this.getAttribute('data-time');\r\n                        localStorage.setItem('selectedTime', selectedTime);\r\n        \r\n                        \/\/ \u0639\u0631\u0636 \u0631\u0633\u0627\u0644\u0629 \u062a\u0623\u0643\u064a\u062f\r\n                        Swal.fire({\r\n                            icon: 'success',\r\n                            title: '\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0648\u0642\u062a',\r\n                            text: `\u0627\u0644\u0648\u0642\u062a: ${selectedTime}`\r\n                        });\r\n        \r\n                        console.log('\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0648\u0642\u062a:', selectedTime); \/\/ \u062a\u062d\u0642\u0642 \u0645\u0646 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0643\u0648\u062f\r\n                    });\r\n                });\r\n        \r\n                \/\/ \u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0645\u062d\u062f\u062f \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n                const savedTime = localStorage.getItem('selectedTime');\r\n                if (savedTime) {\r\n                    const selectedButton = document.querySelector(`.time-btn[data-time=\"${savedTime}\"]`);\r\n                    if (selectedButton) {\r\n                        selectedButton.classList.add('selected-time');\r\n                        console.log('\u062a\u0645 \u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0648\u0642\u062a:', savedTime);\r\n                    }\r\n                }\r\n            } else {\r\n                console.warn('\u0644\u0627 \u062a\u0648\u062c\u062f \u0623\u0632\u0631\u0627\u0631 \u0645\u062a\u0648\u0641\u0631\u0629 \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0648\u0642\u062a.');\r\n            }\r\n        });\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n        \/\/ Ensure checkout is always visible\r\n        document.getElementById('checkout-section').style.display = 'block';\r\n    \r\n        \/\/ Force WooCommerce checkout refresh\r\n        function refreshWooCommerceCheckout() {\r\n            console.log('Refreshing WooCommerce checkout...');\r\n            jQuery(document.body).trigger('update_checkout'); \/\/ Trigger WooCommerce checkout update\r\n        }\r\n    \r\n        \/\/ Ensure WooCommerce fragments load correctly\r\n        function refreshWooCommerceFragments() {\r\n            console.log('Refreshing WooCommerce fragments...');\r\n            jQuery.ajax({\r\n                url: '\/?wc-ajax=get_refreshed_fragments',\r\n                method: 'POST',\r\n                success: function (response) {\r\n                    if (response && response.fragments) {\r\n                        jQuery.each(response.fragments, function (key, value) {\r\n                            jQuery(key).replaceWith(value);\r\n                        });\r\n                        refreshWooCommerceCheckout();\r\n                    }\r\n                },\r\n                error: function () {\r\n                    console.error('Error refreshing WooCommerce fragments.');\r\n                }\r\n            });\r\n        }\r\n    \r\n        \/\/ Run the refresh function when the page loads\r\n        setTimeout(() => {\r\n            refreshWooCommerceFragments();\r\n            refreshWooCommerceCheckout();\r\n        }, 500);\r\n    });\r\n        document.addEventListener(\"DOMContentLoaded\", function () {\r\n        function checkStep4() {\r\n            \/\/ \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0648\u062c\u0648\u062f \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0630\u064a \u064a\u0645\u062b\u0644 \u0627\u0644\u062e\u0637\u0648\u0629 4\r\n            let step4Element = document.querySelector('.step-content[data-step=\"4\"]');\r\n    \r\n            if (step4Element && step4Element.classList.contains('active')) {\r\n                console.log(\"\ud83d\ude80 Step 4 is now active!\");\r\n    \r\n                \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0645\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0647\u0630\u0647 \u0623\u0648\u0644 \u0645\u0631\u0629 \u064a\u062a\u0645 \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u062e\u0637\u0648\u0629 4 \u0641\u064a \u0627\u0644\u062c\u0644\u0633\u0629\r\n                if (!sessionStorage.getItem(\"step4Reloaded\")) {\r\n                    console.log(\"\ud83d\udd04 Reloading page for Step 4...\");\r\n                    sessionStorage.setItem(\"step4Reloaded\", \"true\"); \/\/ \u0645\u0646\u0639 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u062a\u0643\u0631\u0631\r\n                    window.location.reload(); \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n                }\r\n            }\r\n        }\r\n    \r\n        \/\/ \u0627\u0633\u062a\u062f\u0639\u0627\u0621 \u0627\u0644\u062a\u062d\u0642\u0642 \u0641\u0648\u0631 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n        checkStep4();\r\n    \r\n        \/\/ \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0639 \u0644\u0623\u064a \u062a\u063a\u064a\u064a\u0631 \u0641\u064a \u0627\u0644\u062a\u0646\u0642\u0644 \u0628\u064a\u0646 \u0627\u0644\u062e\u0637\u0648\u0627\u062a\r\n        document.addEventListener(\"click\", function () {\r\n            setTimeout(checkStep4, 300); \/\/ \u062a\u0623\u062e\u064a\u0631 \u0628\u0633\u064a\u0637 \u0644\u0644\u062a\u062d\u0642\u0642 \u0628\u0639\u062f \u0627\u0644\u0646\u0642\u0631\u0627\u062a\r\n        });\r\n    });\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n        const regionSelect = document.getElementById('region-select');\r\n        const branchSelect = document.getElementById('branch-select');\r\n        regionSelect.addEventListener('change', function () {\r\n            const selectedRegion = this.value;\r\n    \r\n            const regionField = document.querySelector('input[name=\"billing_region\"]');\r\n            if (regionField) {\r\n                regionField.value = selectedRegion; \/\/ \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0642\u064a\u0645\u0629\r\n            }\r\n    \r\n            console.log('\u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0641\u064a Checkout:', selectedRegion);\r\n        });\r\n    \r\n        branchSelect.addEventListener('change', function () {\r\n            const selectedBranch = this.value;\r\n    \r\n            \/\/ \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u062d\u0642\u0644 Checkout \u0627\u0644\u062e\u0627\u0635 \u0628\u0627\u0644\u0641\u0631\u0639 \u0648\u062a\u062d\u062f\u064a\u062b\u0647\r\n            const branchField = document.querySelector('input[name=\"billing_branch\"]');\r\n            if (branchField) {\r\n                branchField.value = selectedBranch; \/\/ \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0642\u064a\u0645\u0629\r\n            }\r\n    \r\n            console.log('\u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0641\u0631\u0639 \u0641\u064a Checkout:', selectedBranch);\r\n        });\r\n    });\r\n        function showGuide() {\r\n            document.getElementById('car-size-guide-modal').style.display = 'flex';\r\n            document.getElementById('modal-view-1').style.display = 'block';\r\n            document.getElementById('modal-view-2').style.display = 'none';\r\n        }\r\n        function showExamples() {\r\n        document.getElementById('modal-view-1').style.display = 'none';\r\n        document.getElementById('modal-view-2').style.display = 'block';\r\n    }\r\n        function closeModal() {\r\n            document.getElementById('car-size-guide-modal').style.display = 'none';\r\n        }\r\n        function toggleCart(productId, card) {\r\n        let userSelection = JSON.parse(localStorage.getItem('userSelection')) || {};\r\n        let cartItems = userSelection.cartItems || [];\r\n        productId = productId.toString();\r\n    \r\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0648\u0627\u062c\u0647\u0629 \u0645\u0628\u0627\u0634\u0631\u0629 \u0628\u062f\u0648\u0646 \u0627\u0646\u062a\u0638\u0627\u0631 \u0627\u0644\u0631\u062f \u0645\u0646 \u0627\u0644\u0633\u064a\u0631\u0641\u0631\r\n        let isAdding = !cartItems.includes(productId);\r\n        if (isAdding) {\r\n            cartItems.push(productId);\r\n            card.classList.add('selected', 'in-cart');\r\n        } else {\r\n            cartItems = cartItems.filter(id => id !== productId);\r\n            card.classList.remove('selected', 'in-cart');\r\n        }\r\n        \r\n        userSelection.cartItems = cartItems;\r\n        localStorage.setItem('userSelection', JSON.stringify(userSelection));\r\n    \r\n        \/\/ \u0625\u0631\u0633\u0627\u0644 \u0637\u0644\u0628 AJAX \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u062f\u0648\u0646 \u0627\u0646\u062a\u0638\u0627\u0631 \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u0642\u0628\u0644 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0648\u0627\u062c\u0647\u0629\r\n        jQuery.ajax({\r\n            url: 'https:\/\/stily.perpetualbuild.com\/wp-admin\/admin-ajax.php',\r\n            method: 'POST',\r\n            data: {\r\n                action: 'toggle_cart_item',\r\n                product_id: productId\r\n            },\r\n            success: function (response) {\r\n                if (!response.success) {\r\n                    console.error('\u274c \u062e\u0637\u0623 \u0641\u064a WooCommerce:', response);\r\n                    Swal.fire({ icon: 'error', title: '\u062e\u0637\u0623', text: '\u0644\u0645 \u064a\u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0633\u0644\u0629\u060c \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.' });\r\n                }\r\n            },\r\n            error: function () {\r\n                console.error('\u274c \u0641\u0634\u0644 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0633\u064a\u0631\u0641\u0631.');\r\n                Swal.fire({ icon: 'error', title: '\u062e\u0637\u0623', text: '\u062a\u0639\u0630\u0631 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0633\u064a\u0631\u0641\u0631.' });\r\n            }\r\n        });\r\n    }\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n        restoreUserSelection(); \/\/ \u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u062c\u0645\u064a\u0639 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629 \u0641\u064a localStorage\r\n    \r\n        const savedRegion = localStorage.getItem('selectedRegion');\r\n        const savedBranch = localStorage.getItem('selectedBranch');\r\n        const savedDate = localStorage.getItem('selectedDate');\r\n    \r\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0648\u0639 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0647\u0646\u0627\u0643 \u0645\u0646\u0637\u0642\u0629 \u0645\u062d\u0641\u0648\u0638\u0629\r\n        if (savedRegion) {\r\n            document.getElementById('region-select').value = savedRegion;\r\n            updateBranches(); \/\/ \u062a\u062d\u062f\u064a\u062b \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0648\u0639 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u0645\u0646\u0637\u0642\u0629\r\n        }\r\n    \r\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0641\u0631\u0639 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0645\u062d\u0641\u0648\u0638\u064b\u0627\r\n        if (savedBranch) {\r\n            setTimeout(() => {\r\n                document.getElementById('branch-select').value = savedBranch;\r\n                document.getElementById('calendar-time-container').classList.add('show');\r\n                \/\/ document.getElementById('calendar-time-container').style.display = 'flex'; \/\/ \u0639\u0631\u0636 \u0627\u0644\u062a\u0642\u0648\u064a\u0645\r\n            }, 500); \/\/ \u062a\u0623\u062e\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0644\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u0627\u0626\u0645\u0629\r\n        }\r\n    \r\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u062a\u0627\u0631\u064a\u062e \u0625\u0630\u0627 \u0643\u0627\u0646 \u0645\u062d\u0641\u0648\u0638\u064b\u0627\r\n        if (savedDate) {\r\n            setTimeout(() => {\r\n                jQuery('#datepicker').datepicker('setDate', savedDate);\r\n            }, 500);\r\n        }\r\n    });\r\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u064a\u0645 \u0639\u0646\u062f \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0648\u0627\u0644\u0641\u0631\u0639\r\n        document.getElementById('region-select').addEventListener('change', function () {\r\n            let selectedRegion = this.value;\r\n            localStorage.setItem('selectedRegion', selectedRegion);\r\n            updateBranches();\r\n        });\r\n        document.getElementById('branch-select').addEventListener('change', function () {\r\n            let selectedBranch = this.value;\r\n            localStorage.setItem('selectedBranch', selectedBranch);\r\n            document.getElementById('calendar-time-container').classList.add('show');\r\n            \/\/ document.getElementById('calendar-time-container').style.display = 'flex'; \/\/ \u0639\u0631\u0636 \u0627\u0644\u062a\u0642\u0648\u064a\u0645 \u0628\u0639\u062f \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0641\u0631\u0639\r\n        });\r\n        \/\/ \u062d\u0641\u0638 \u0627\u0644\u062a\u0627\u0631\u064a\u062e \u0639\u0646\u062f \u0627\u062e\u062a\u064a\u0627\u0631\u0647\r\n        jQuery(document).ready(function () {\r\n            jQuery('#datepicker').datepicker({\r\n                minDate: 3,\r\n                maxDate: \"+1M\",\r\n                beforeShowDay: function (date) {\r\n                    let day = date.getDay(); \/\/ 5 = Friday\r\n                    let formatted = jQuery.datepicker.formatDate('d-m-yy', date);\r\n        \r\n                    \/\/ Disable Friday and specific dates\r\n                    if (day === 5 || disabledDates.includes(formatted)) {\r\n                        return [false, \"\", \"\u063a\u064a\u0631 \u0645\u062a\u0627\u062d\"];\r\n                    }\r\n        \r\n                    return [true, \"\", \"\"];\r\n                },\r\n                onSelect: function (dateText) {\r\n                    localStorage.setItem('selectedDate', dateText); \/\/ \u062d\u0641\u0638 \u0627\u0644\u062a\u0627\u0631\u064a\u062e\r\n                    Swal.fire({\r\n                        toast: true,\r\n                        position: 'top-end',\r\n                        icon: 'success',\r\n                        text: `\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u062a\u0627\u0631\u064a\u062e: ${dateText}`,\r\n                        timer: 5000,\r\n                        showConfirmButton: false,\r\n                    });\r\n                }\r\n            });\r\n        });\r\n    \r\n    \r\n        \/\/ \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u062a\u0642\u0648\u064a\u0645\r\n        function initializeDatepicker() {\r\n        jQuery('#datepicker').datepicker({\r\n         minDate: 3,\r\n            maxDate: \"+1M\",\r\n            beforeShowDay: function (date) {\r\n                let day = date.getDay(); \/\/ 5 = Friday\r\n                let formatted = jQuery.datepicker.formatDate('d-m-yy', date);\r\n    \r\n                \/\/ Disable Friday and specific dates\r\n                if (day === 5 || disabledDates.includes(formatted)) {\r\n                    return [false, \"\", \"\u063a\u064a\u0631 \u0645\u062a\u0627\u062d\"];\r\n                }\r\n    \r\n                return [true, \"\", \"\"];\r\n            },\r\n            onSelect: function (dateText) {\r\n                localStorage.setItem('selectedDate', dateText); \/\/ \u062d\u0641\u0638 \u0627\u0644\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0645\u062d\u062f\u062f\r\n                Swal.fire({\r\n                    toast: true,\r\n                    position: 'top-end',\r\n                    icon: 'success',\r\n                    text: `\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u062a\u0627\u0631\u064a\u062e: ${dateText}`,\r\n                    timer: 5000,\r\n                    showConfirmButton: false,\r\n                });\r\n            }\r\n        });\r\n    }\r\n        function saveUserSelection(key, value) {\r\n        let userSelection = JSON.parse(localStorage.getItem('userSelection')) || {};\r\n        userSelection[key] = value;\r\n        localStorage.setItem('userSelection', JSON.stringify(userSelection));\r\n    }\r\n        function restoreUserSelection() {\r\n        const savedSelection = JSON.parse(localStorage.getItem('userSelection'));\r\n        if (savedSelection) {\r\n             if (savedSelection && savedSelection.cartItems) {\r\n            document.querySelectorAll('.product-card').forEach(card => {\r\n                const productId = card.getAttribute('data-product-id'); \r\n                \r\n                if (savedSelection.cartItems.includes(productId)) {\r\n                    card.classList.add('selected');\r\n                    card.classList.add('in-cart');\r\n                }\r\n            });\r\n        }\r\n    \r\n            if (savedSelection.carSize) {\r\n                selectedCarSize = savedSelection.carSize;\r\n                document.querySelectorAll('.ltb-car-size-input-option').forEach(option => {\r\n                    if (option.getAttribute('data-car-size') === selectedCarSize) {\r\n                        option.classList.add('selected');\r\n                    }\r\n                });\r\n            }\r\n    \r\n            if (savedSelection.category) {\r\n                selectedCategory = savedSelection.category;\r\n                document.querySelectorAll('.category-btn').forEach(btn => {\r\n                    if (btn.getAttribute('data-category') === selectedCategory) {\r\n                        btn.classList.add('selected');\r\n                    }\r\n                });\r\n            }\r\n            if (savedSelection.region) {\r\n                let regionSelect = document.getElementById('region-select');\r\n                regionSelect.value = savedSelection.region;\r\n                updateBranches();  \r\n    \r\n                if (savedSelection.branch) {\r\n                    let branchSelect = document.getElementById('branch-select');\r\n                    branchSelect.value = savedSelection.branch;\r\n                }\r\n            }\r\n            \r\n        }\r\n       \r\n        fetchFilteredProducts();\r\n    }\r\n        function selectCarSize(element) {\r\n        document.querySelectorAll('.ltb-car-size-input-option').forEach(option => option.classList.remove('selected'));\r\n        element.classList.add('selected');\r\n        const selectedCarSize = element.getAttribute('data-car-size');\r\n        saveUserSelection('carSize', selectedCarSize);\r\n        \r\n        fetchFilteredProducts();\r\n        scrollToElementIfMobile('#category-selection');\r\n    \r\n    }\r\n        function selectCategory(element) {\r\n        document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('selected'));\r\n        element.classList.add('selected');\r\n        const selectedCategory = element.getAttribute('data-category');\r\n        saveUserSelection('category', selectedCategory);\r\n        fetchFilteredProducts();\r\n        scrollToElementIfMobile('#filtered-products');\r\n    \r\n    }\r\n    \r\n        document.addEventListener('DOMContentLoaded', function () {\r\n        restoreUserSelection();\r\n    });\r\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0644\u0629 \u0639\u0646\u062f \u0625\u0636\u0627\u0641\u0629 \u0623\u0648 \u0625\u0632\u0627\u0644\u0629 \u0645\u0646\u062a\u062c\u0627\u062a\r\n        document.addEventListener('click', function (event) {\r\n            if (event.target.matches('.product-card')) {\r\n                setTimeout(function () {\r\n                    updateCheckoutSection();\r\n                }, 500); \/\/ \u062a\u0623\u062e\u064a\u0631 \u0628\u0633\u064a\u0637 \u0644\u0636\u0645\u0627\u0646 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0637\u0644\u0628\r\n            }\r\n        });\r\n    \r\n        function updateCheckoutVisibility() {\r\n        jQuery.ajax({\r\n            url: 'https:\/\/stily.perpetualbuild.com\/wp-admin\/admin-ajax.php',\r\n            method: 'POST',\r\n            data: { action: 'check_cart_status' },\r\n            success: function (response) {\r\n                const checkoutSection = document.getElementById('checkout-section');\r\n                console.log('\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0644\u0629:', response); \/\/ \u0644\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629\r\n    \r\n            },\r\n            error: function () {\r\n                console.error('\u062e\u0637\u0623 \u0641\u064a \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0644\u0629.');\r\n            }\r\n        });\r\n    \r\n    }\r\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0644\u0629\r\n        function updateCheckoutSection() {\r\n        jQuery.ajax({\r\n            url: 'https:\/\/stily.perpetualbuild.com\/wp-admin\/admin-ajax.php',\r\n            method: 'POST',\r\n            data: {\r\n                action: 'check_cart_status'\r\n            },\r\n            success: function (response) {\r\n                if (response.success) {\r\n                    if (response.data.has_items) {\r\n                        \/\/ \u0639\u0631\u0636 \u0642\u0633\u0645 Checkout\r\n                        document.getElementById('checkout-section').style.display = 'block';\r\n                    } else {\r\n                        document.getElementById('checkout-section').style.display = 'block';\r\n                    }\r\n                }\r\n            },\r\n            error: function () {\r\n                console.error('\u062e\u0637\u0623 \u0641\u064a \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0644\u0629.');\r\n            }\r\n        });\r\n    }\r\n    \r\n        \/\/ \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n        updateCheckoutVisibility(); \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0644\u0629 \u0639\u0646\u062f \u0627\u0644\u062a\u062d\u0645\u064a\u0644\r\n    });\r\n    \r\n        document.querySelectorAll('.time-btn').forEach(button => {\r\n        button.addEventListener('click', function () {\r\n            document.querySelectorAll('.time-btn').forEach(btn => btn.classList.remove('selected-time'));\r\n            this.classList.add('selected-time');\r\n    \r\n            \/\/ \u0625\u0638\u0647\u0627\u0631 \u0631\u0633\u0627\u0644\u0629 \u062a\u0623\u0643\u064a\u062f\r\n            Swal.fire({\r\n                \r\n                icon: 'success',\r\n                title: '\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0648\u0642\u062a',\r\n                text: `\u0627\u0644\u0648\u0642\u062a: ${this.dataset.time}`\r\n            });\r\n        });\r\n    });\r\n     \r\n        let branchesByRegion = {\r\n        \"\u0627\u0644\u0631\u064a\u0627\u0636\": [\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u0646\u0647\u0636\u0629 - \u0637\u0631\u064a\u0642 \u062e\u0631\u064a\u0635\",\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u062e\u0627\u0644\u062f\u064a\u0647 - \u0634\u0627\u0631\u0639 \u0632\u064a\u062f \u0628\u0646 \u062d\u0627\u0631\u062b\u0629 \\\"\u0642\u0633\u0645 \u0627\u0644\u062a\u0644\u0645\u064a\u0639\\\"\",\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u062e\u0627\u0644\u062f\u064a\u0629 - \u0634\u0627\u0631\u0639 \u0632\u064a\u062f \u0628\u0646 \u062d\u0627\u0631\u062b\u0629 \\\"\u0642\u0633\u0645 \u0627\u0644\u0639\u0627\u0632\u0644 \u0648\u0627\u0644\u062d\u0645\u0627\u064a\u0629\\\"\",\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u0635\u062d\u0627\u0641\u0647 - \u0634\u0627\u0631\u0639 \u0623\u0646\u0633 \u0628\u0646 \u0645\u0627\u0644\u0643\",\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u0642\u064a\u0631\u0648\u0627\u0646 - \u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0641\u0647\u062f\",\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0638\u0647\u0631\u0629 \u0646\u0645\u0627\u0631 - \u0645\u062e\u0631\u062c 27\",\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u0646\u0641\u0644 - \u0637\u0631\u064a\u0642 \u0627\u0628\u0648 \u0628\u0643\u0631\",\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u0645\u0631\u0648\u062c - \u0637\u0631\u064a\u0642 \u0627\u0644\u0627\u0645\u0627\u0645 \u0633\u0639\u0648\u062f\"\r\n        ],\r\n        \"\u0627\u0644\u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0645\u0646\u0648\u0631\u0629\": [\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u0633\u0644\u0627\u0645 - \u0637\u0631\u064a\u0642 \u0627\u0644\u0627\u0645\u0627\u0645 \u0645\u0633\u0644\u0645\"\r\n        ],\r\n        \"\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0634\u0631\u0642\u064a\u0629\": [\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u0642\u0634\u0644\u0647 - \u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0641\u0647\u062f\"\r\n        ],\r\n        \"\u0627\u0644\u0642\u0635\u064a\u0645\": [\r\n            \"\u0641\u0631\u0639 \u062d\u064a \u0627\u0644\u0631\u062d\u0627\u0628 - \u0637\u0631\u064a\u0642 \u0639\u0645\u0631 \u0628\u0646 \u0627\u0644\u062e\u0637\u0627\u0628\"\r\n        ],\r\n\r\n    };\r\n        function updateBranches() {\r\n        let regionSelect = document.getElementById('region-select');\r\n        let branchSelect = document.getElementById('branch-select');\r\n        let region = regionSelect.value;\r\n        branchSelect.innerHTML = '<option value=\"\" disabled selected>\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639<\/option>';\r\n    \r\n        if (region && branchesByRegion[region]) {\r\n            branchesByRegion[region].forEach(branch => {\r\n                let option = document.createElement('option');\r\n                option.value = branch;\r\n                option.textContent = branch;\r\n                branchSelect.appendChild(option);\r\n            });\r\n            branchSelect.disabled = false;\r\n        } else {\r\n            branchSelect.disabled = true;\r\n        }\r\n    \r\n    \r\n        let userSelection = JSON.parse(localStorage.getItem('userSelection')) || {};\r\n        const previousRegion = userSelection.region;\r\n    \r\n        \r\n        if (region && previousRegion && region !== previousRegion) {\r\n            delete userSelection.branch;  \r\n            localStorage.setItem('userSelection', JSON.stringify(userSelection)); \r\n        }\r\n    \r\n      \r\n        saveUserSelection('region', region);\r\n    \r\n        \r\n        regionSelect.addEventListener('change', function() {\r\n            let selectedRegion = this.value;\r\n            saveUserSelection('region', selectedRegion);\r\n            updateBranches(); \r\n        });\r\n    \r\n    \r\n        branchSelect.addEventListener('change', function() {\r\n            let selectedBranch = branchSelect.value;\r\n            if (selectedBranch) {\r\n                saveUserSelection('branch', selectedBranch); \r\n            }\r\n        });\r\n    }\r\n        document.getElementById('branch-select').addEventListener('change', function() {\r\n        if (this.value) {\r\n            \/\/ document.getElementById('calendar-time-container').style.display = 'flex';\r\n            document.getElementById('calendar-time-container').classList.add('show');\r\n            document.getElementById('calendar-container').style.display = 'block';\r\n            document.getElementById('time-container').style.display = 'block';\r\n    \r\n            \r\n    \r\n            jQuery('#datepicker').datepicker({\r\n                minDate: 3,\r\n                maxDate: \"+1M\",\r\n                beforeShowDay: function (date) {\r\n                    let day = date.getDay(); \/\/ 5 = Friday\r\n                    let formatted = jQuery.datepicker.formatDate('d-m-yy', date);\r\n        \r\n                    \/\/ Disable Friday and specific dates\r\n                    if (day === 5 || disabledDates.includes(formatted)) {\r\n                        return [false, \"\", \"\u063a\u064a\u0631 \u0645\u062a\u0627\u062d\"];\r\n                    }\r\n        \r\n                    return [true, \"\", \"\"];\r\n                },\r\n                onSelect: function(dateText) {\r\n                    saveUserSelection('selectedDate', dateText);\r\n    \r\n                    Swal.fire({\r\n                        toast: true,\r\n                        position: 'top-end',\r\n                        icon: 'success',\r\n                        \/\/ title: '\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u062a\u0627\u0631\u064a\u062e',\r\n                        text: `\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u062a\u0627\u0631\u064a\u062e: ${dateText}`  ,\r\n                        timer: 5000,\r\n                        showConfirmButton: false,\r\n    \r\n                    \r\n                        \r\n                    });\r\n                }\r\n            });\r\n        }\r\n    });\r\n    \r\n        let selectedCarSize = '';\r\n        let selectedCategory = '';\r\n        function selectCarSize(element) {\r\n        document.querySelectorAll('.ltb-car-size-input-option').forEach(option => option.classList.remove('selected'));\r\n        element.classList.add('selected');\r\n        \r\n        let selectedCarSize = element.getAttribute('data-car-size');\r\n    \r\n        \/\/ \u062d\u0641\u0638 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u062c\u062f\u064a\u062f \u0641\u064a localStorage\r\n        let userSelection = JSON.parse(localStorage.getItem('userSelection')) || {};\r\n        userSelection.carSize = selectedCarSize;\r\n        localStorage.setItem('userSelection', JSON.stringify(userSelection));\r\n    \r\n        \/\/ \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0642\u062f\u064a\u0645\u0629 \u0645\u0646 WooCommerce Cart\r\n        jQuery.ajax({\r\n            url: wc_add_to_cart_params.ajax_url,\r\n            method: 'POST',\r\n            data: { action: 'clear_cart_on_car_size_change' },\r\n            success: function(response) {\r\n                console.log('\u062a\u0645 \u062a\u0641\u0631\u064a\u063a \u0627\u0644\u0639\u0631\u0628\u0629 \u0628\u0646\u062c\u0627\u062d \u0628\u0639\u062f \u062a\u063a\u064a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0633\u064a\u0627\u0631\u0629.');\r\n                fetchFilteredProducts(); \/\/ \u062c\u0644\u0628 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0644\u062d\u062c\u0645 \u0627\u0644\u062c\u062f\u064a\u062f\r\n            },\r\n            error: function() {\r\n                console.error('\u062e\u0637\u0623 \u0641\u064a \u062a\u0641\u0631\u064a\u063a \u0627\u0644\u0639\u0631\u0628\u0629.');\r\n            }\r\n        });\r\n    \r\n        Swal.fire({\r\n            toast: true,\r\n            position: 'top-end',\r\n            icon: 'success',\r\n            text: `\u062a\u0645 \u062a\u063a\u064a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0625\u0644\u0649: ${selectedCarSize}. \u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a.`,\r\n            showConfirmButton: false,\r\n            timer: 5000\r\n        });\r\n    \r\n        fetchFilteredProducts(); \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u062c\u062f\u064a\u062f\r\n    }\r\n        function selectCategory(element) {\r\n                document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('selected'));\r\n                element.classList.add('selected');\r\n                selectedCategory = element.getAttribute('data-category');\r\n                console.log(selectedCategory);\r\n                saveUserSelection('category', selectedCategory);\r\n    \r\n                \/\/ SweetAlert2 Message\r\n                Swal.fire({\r\n                    toast: true,\r\n                    position: 'top-end',\r\n                    icon: 'success',\r\n                    \/\/ title: '\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0641\u0626\u0629',\r\n                    text: `\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0641\u0626\u0629 : ${selectedCategory}`, \r\n                    showConfirmButton: false,\r\n                    timer: 5000\r\n                });\r\n    \r\n                fetchFilteredProducts();\r\n            }\r\n        function fetchFilteredProducts() {\r\n        let userSelection = JSON.parse(localStorage.getItem('userSelection')) || {};\r\n        let selectedCarSize = userSelection.carSize || '';\r\n        let selectedCategory = userSelection.category || '';\r\n    \r\n        if (selectedCarSize && selectedCategory) {\r\n            \/\/ \u062a\u062d\u0642\u0642 \u0645\u0645\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0644\u062f\u064a\u0646\u0627 \u0646\u0633\u062e\u0629 \u0645\u062e\u0632\u0646\u0629 \u0645\u0624\u0642\u062a\u064b\u0627 \u0644\u062a\u0633\u0631\u064a\u0639 \u0627\u0644\u062a\u062d\u0645\u064a\u0644\r\n            let cacheKey = `products_${selectedCarSize}_${selectedCategory}`;\r\n            let cachedProducts = localStorage.getItem(cacheKey);\r\n    \r\n            if (cachedProducts) {\r\n                document.getElementById('products-container').innerHTML = cachedProducts;\r\n                addProductCardClickEvents();\r\n                return;\r\n            }\r\n    \r\n            \/\/ \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0647\u0646\u0627\u0643 \u0646\u0633\u062e\u0629 \u0645\u062e\u0632\u0646\u0629\u060c \u0642\u0645 \u0628\u062c\u0644\u0628 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0639\u0628\u0631 AJAX\r\n            jQuery.ajax({\r\n                url: 'https:\/\/stily.perpetualbuild.com\/wp-admin\/admin-ajax.php',\r\n                method: 'POST',\r\n                data: {\r\n                    action: 'get_filtered_products',\r\n                    car_size: selectedCarSize,\r\n                    category: selectedCategory\r\n                },\r\n                success: function (response) {\r\n                    document.getElementById('products-container').innerHTML = response;\r\n                    localStorage.setItem(cacheKey, response); \/\/ \u062d\u0641\u0638 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0641\u064a \u0627\u0644\u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0645\u0624\u0642\u062a\r\n                    addProductCardClickEvents();\r\n                },\r\n                error: function (xhr, status, error) {\r\n                    console.error('\u274c \u062e\u0637\u0623 \u0641\u064a \u062c\u0644\u0628 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a:', error);\r\n                }\r\n            });\r\n        } else {\r\n            console.warn('\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u062d\u062c\u0645 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0648\u0627\u0644\u0641\u0626\u0629');\r\n        }\r\n    }\r\n        function refreshWooCommerceFragments() {\r\n        jQuery.ajax({\r\n            url: '\/?wc-ajax=get_refreshed_fragments',\r\n            method: 'POST',\r\n            success: function (response) {\r\n                if (response && response.fragments) {\r\n                    jQuery.each(response.fragments, function (key, value) {\r\n                        jQuery(key).replaceWith(value);\r\n                    });\r\n    \r\n                    console.log('\u062a\u0645 \u062a\u062d\u062f\u064a\u062b WooCommerce Fragments.');\r\n                    \r\n                    \/\/ updateWooCommerceCheckout();\r\n                }\r\n            },\r\n            error: function () {\r\n                console.error('\u062e\u0637\u0623 \u0641\u064a \u062a\u062d\u062f\u064a\u062b WooCommerce Fragments.');\r\n            }\r\n        });\r\n    }\r\n        function updateWooCommerceCheckout() {\r\n        const checkoutWrapper = jQuery('.woocommerce-checkout');\r\n        if (checkoutWrapper.length > 0) {\r\n            checkoutWrapper.load(window.location.href + ' .woocommerce-checkout > *', function () {\r\n                console.log('\u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0642\u0633\u0645 WooCommerce Checkout.');\r\n            });\r\n        } else {\r\n            \/\/ \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0645\u0648\u062c\u0648\u062f\u064b\u0627\u060c \u062a\u0623\u0643\u062f \u0645\u0646 \u0625\u0636\u0627\u0641\u062a\u0647\r\n            const checkoutSection = document.getElementById('checkout-section');\r\n            if (checkoutSection) {\r\n                checkoutSection.style.display = 'block'; \/\/ \u0639\u0631\u0636 \u0627\u0644\u0642\u0633\u0645\r\n                jQuery('#checkout-section').load(window.location.href + ' #checkout-section > *');\r\n            }\r\n        }\r\n    }\r\n        function addProductCardClickEvents() {\r\n                document.querySelectorAll('.product-card').forEach(card => {\r\n                    card.addEventListener('click', function() {\r\n                        toggleCart(card.getAttribute('data-product-id'), card);\r\n                    });\r\n                });\r\n            }\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n            const productsContainer = document.getElementById('products-container');\r\n            const filteredProducts = document.getElementById('filtered-products');\r\n            const categoryButtons = document.querySelectorAll('.category-btn');\r\n            const btnGroup = document.querySelector('.btn-group');\r\n            \r\n            if (!productsContainer || !filteredProducts) return;\r\n            let hasScrolledForCurrentLoad = false;\r\n            const observer = new MutationObserver(() => {\r\n                const hasProducts = productsContainer.innerHTML.trim().length > 0;\r\n        \r\n                if (hasProducts && !hasScrolledForCurrentLoad) {\r\n                    filteredProducts.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n                    hasScrolledForCurrentLoad = true;\r\n                } else if (!hasProducts) {\r\n                    hasScrolledForCurrentLoad = false;\r\n                }\r\n            });\r\n            observer.observe(productsContainer, { childList: true, subtree: false });\r\n            categoryButtons.forEach(button => {\r\n                button.addEventListener('click', () => {\r\n                    setTimeout(() => {\r\n                        const hasProducts = productsContainer.innerHTML.trim().length > 0;\r\n                        if (hasProducts) {\r\n                            filteredProducts.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n                        }\r\n                    }, 200); \r\n                });\r\n            });\r\n            \r\n            const carSizeButtons = document.querySelectorAll('.ltb-car-size-input-option');\r\n            carSizeButtons.forEach(button => {\r\n                button.addEventListener('click', () => {\r\n                    if (button.classList.contains('selected')) {\r\n                        btnGroup.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n                    }\r\n                });\r\n            });\r\n\r\n        });\r\n    <\/script>\r\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-29663","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/stily.perpetualbuild.com\/ar\/wp-json\/wp\/v2\/pages\/29663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stily.perpetualbuild.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stily.perpetualbuild.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stily.perpetualbuild.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stily.perpetualbuild.com\/ar\/wp-json\/wp\/v2\/comments?post=29663"}],"version-history":[{"count":20,"href":"https:\/\/stily.perpetualbuild.com\/ar\/wp-json\/wp\/v2\/pages\/29663\/revisions"}],"predecessor-version":[{"id":36277,"href":"https:\/\/stily.perpetualbuild.com\/ar\/wp-json\/wp\/v2\/pages\/29663\/revisions\/36277"}],"wp:attachment":[{"href":"https:\/\/stily.perpetualbuild.com\/ar\/wp-json\/wp\/v2\/media?parent=29663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}