{"id":55,"date":"2026-05-19T18:32:51","date_gmt":"2026-05-19T18:32:51","guid":{"rendered":"https:\/\/raynails.com\/?page_id=55"},"modified":"2026-05-19T18:33:19","modified_gmt":"2026-05-19T18:33:19","slug":"%d8%a7%d8%ad%d8%ac%d8%b2-%d8%a7%d9%84%d8%a2%d9%86","status":"publish","type":"page","link":"https:\/\/raynails.com\/en\/%d8%a7%d8%ad%d8%ac%d8%b2-%d8%a7%d9%84%d8%a2%d9%86\/","title":{"rendered":"Book now"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"55\" class=\"elementor elementor-55\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5bf9b31 e-flex e-con-boxed e-con e-parent\" data-id=\"5bf9b31\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a4a0e40 elementor-widget elementor-widget-shortcode\" data-id=\"a4a0e40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\r\n    <link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.15.0\/mapbox-gl.css\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.15.0\/mapbox-gl.js\"><\/script>\r\n\r\n    <style>\r\n        .booking-card{\r\n            max-width:1100px;\r\n            margin:45px auto;\r\n            background:linear-gradient(180deg,#fff,#fbf7f0);\r\n            padding:38px;\r\n            border-radius:32px;\r\n            box-shadow:0 30px 90px rgba(0,0,0,.10);\r\n            direction:rtl;\r\n            border:1px solid #eadcc8;\r\n            font-family:inherit;\r\n        }\r\n\r\n        .booking-title{\r\n            font-size:34px;\r\n            font-weight:900;\r\n            margin-bottom:10px;\r\n            color:#111827;\r\n        }\r\n\r\n        .booking-subtitle{\r\n            font-size:16px;\r\n            color:#6b7280;\r\n            margin-bottom:28px;\r\n            font-weight:700;\r\n        }\r\n\r\n        .booking-card label{\r\n            font-weight:900;\r\n            margin-bottom:10px;\r\n            display:block;\r\n            color:#111827;\r\n        }\r\n\r\n        .services-grid{\r\n            display:grid;\r\n            grid-template-columns:repeat(3,1fr);\r\n            gap:18px;\r\n            margin-bottom:22px;\r\n        }\r\n\r\n        .service-option{\r\n            position:relative;\r\n            cursor:pointer;\r\n        }\r\n\r\n        .service-option input{\r\n            display:none;\r\n        }\r\n\r\n        .service-box{\r\n            min-height:180px;\r\n            background:#fff;\r\n            border:2px solid #eee5da;\r\n            border-radius:26px;\r\n            padding:20px;\r\n            display:flex;\r\n            flex-direction:column;\r\n            justify-content:space-between;\r\n            box-shadow:0 18px 45px rgba(0,0,0,.06);\r\n            transition:.25s ease;\r\n            position:relative;\r\n            overflow:hidden;\r\n        }\r\n\r\n        .service-box:before{\r\n            content:\"\";\r\n            position:absolute;\r\n            width:120px;\r\n            height:120px;\r\n            border-radius:50%;\r\n            background:#f6efe4;\r\n            top:-40px;\r\n            left:-40px;\r\n        }\r\n\r\n        .service-icon{\r\n            width:54px;\r\n            height:54px;\r\n            border-radius:18px;\r\n            background:#111827;\r\n            color:#fff;\r\n            display:flex;\r\n            align-items:center;\r\n            justify-content:center;\r\n            font-size:24px;\r\n            position:relative;\r\n            z-index:2;\r\n        }\r\n\r\n        .service-name{\r\n            font-size:20px;\r\n            font-weight:900;\r\n            color:#111827;\r\n            margin-top:18px;\r\n            position:relative;\r\n            z-index:2;\r\n        }\r\n\r\n        .service-price{\r\n            color:#b68b52;\r\n            font-weight:900;\r\n            font-size:16px;\r\n            margin-top:8px;\r\n            position:relative;\r\n            z-index:2;\r\n        }\r\n\r\n        .service-check{\r\n            position:absolute;\r\n            top:16px;\r\n            left:16px;\r\n            width:30px;\r\n            height:30px;\r\n            border-radius:50%;\r\n            background:#f3f4f6;\r\n            color:#fff;\r\n            display:flex;\r\n            align-items:center;\r\n            justify-content:center;\r\n            font-weight:900;\r\n            z-index:3;\r\n        }\r\n\r\n        .service-option input:checked + .service-box{\r\n            border-color:#111827;\r\n            background:linear-gradient(135deg,#111827,#020617);\r\n            transform:translateY(-6px);\r\n            box-shadow:0 28px 70px rgba(0,0,0,.18);\r\n        }\r\n\r\n        .service-option input:checked + .service-box .service-name,\r\n        .service-option input:checked + .service-box .service-price{\r\n            color:#fff;\r\n        }\r\n\r\n        .service-option input:checked + .service-box .service-icon{\r\n            background:#d4b483;\r\n            color:#111827;\r\n        }\r\n\r\n        .service-option input:checked + .service-box .service-check{\r\n            background:#16a34a;\r\n        }\r\n\r\n        .service-option input:checked + .service-box .service-check:after{\r\n            content:\"\u2713\";\r\n        }\r\n\r\n        .booking-card select,\r\n        .booking-card input{\r\n            width:100%;\r\n            height:56px;\r\n            padding:0 16px;\r\n            border:1px solid #d9dce3;\r\n            border-radius:16px;\r\n            background:#fff;\r\n            font-size:15px;\r\n            margin-bottom:18px;\r\n            box-sizing:border-box;\r\n        }\r\n\r\n        .booking-grid{\r\n            display:grid;\r\n            grid-template-columns:1fr 1fr;\r\n            gap:18px;\r\n        }\r\n\r\n        .booking-note{\r\n            background:#eef6ff;\r\n            padding:15px;\r\n            border-radius:18px;\r\n            margin-bottom:18px;\r\n            color:#1f2937;\r\n            font-weight:700;\r\n        }\r\n\r\n        .booking-price-box{\r\n            background:#fff7ed;\r\n            color:#9a3412;\r\n            padding:18px;\r\n            border-radius:18px;\r\n            margin-bottom:22px;\r\n            font-weight:900;\r\n            font-size:17px;\r\n        }\r\n\r\n        .booking-error{\r\n            background:#ffecec;\r\n            color:#b91c1c;\r\n            padding:14px;\r\n            border-radius:14px;\r\n            margin-bottom:18px;\r\n            font-weight:900;\r\n        }\r\n\r\n        #booking_map{\r\n            width:100%;\r\n            height:400px;\r\n            border-radius:24px;\r\n            overflow:hidden;\r\n            margin-bottom:20px;\r\n            border:1px solid #e5e7eb;\r\n        }\r\n\r\n        .location-btn{\r\n            background:linear-gradient(135deg,#d4b483,#b68b52);\r\n            color:#fff;\r\n            border:0;\r\n            padding:14px 22px;\r\n            border-radius:15px;\r\n            font-weight:900;\r\n            cursor:pointer;\r\n            margin-bottom:15px;\r\n        }\r\n\r\n        .submit-booking-btn{\r\n            width:100%;\r\n            background:linear-gradient(135deg,#111827,#000);\r\n            color:#fff;\r\n            border:0;\r\n            padding:19px;\r\n            border-radius:999px;\r\n            font-size:18px;\r\n            font-weight:900;\r\n            cursor:pointer;\r\n            box-shadow:0 18px 40px rgba(0,0,0,.20);\r\n        }\r\n\r\n        @media(max-width:900px){\r\n            .services-grid{grid-template-columns:repeat(2,1fr);}\r\n        }\r\n\r\n        @media(max-width:700px){\r\n            .booking-card{\r\n                padding:22px;\r\n                margin:20px auto;\r\n                border-radius:26px;\r\n            }\r\n\r\n            .services-grid,\r\n            .booking-grid{\r\n                grid-template-columns:1fr;\r\n            }\r\n\r\n            .booking-title{\r\n                font-size:28px;\r\n            }\r\n\r\n            .service-box{\r\n                min-height:150px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <form method=\"post\" class=\"booking-card\">\r\n\r\n        <div class=\"booking-title\">\u0627\u062d\u062c\u0632\u064a \u062e\u062f\u0645\u062a\u0643 \u0627\u0644\u0622\u0646<\/div>\r\n        <div class=\"booking-subtitle\">\u0627\u062e\u062a\u0627\u0631\u064a \u062e\u062f\u0645\u0629 \u0623\u0648 \u0623\u0643\u062b\u0631\u060c \u062d\u062f\u062f\u064a \u0627\u0644\u0648\u0642\u062a \u0648\u0627\u0644\u0645\u0648\u0642\u0639\u060c \u0648\u0627\u062f\u0641\u0639\u064a \u0627\u0644\u0639\u0631\u0628\u0648\u0646 \u0644\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u062c\u0632.<\/div>\r\n\r\n        \r\n        <label>\u0627\u062e\u062a\u0627\u0631\u064a \u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/label>\r\n\r\n        <div class=\"services-grid\">\r\n                            <label class=\"service-option\">\r\n                    <input \r\n                        type=\"checkbox\"\r\n                        name=\"booking_products[]\"\r\n                        value=\"50\"\r\n                        data-price=\"100\"\r\n                    >\r\n\r\n                    <div class=\"service-box\">\r\n                        <span class=\"service-check\"><\/span>\r\n\r\n                        <div>\r\n                            <div class=\"service-icon\">\u2726<\/div>\r\n                            <div class=\"service-name\">\u0628\u0627\u062f\u064a\u0643\u064a\u0631<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-price\">\r\n                            &#x631;.&#x633;&nbsp;100.00                        <\/div>\r\n                    <\/div>\r\n                <\/label>\r\n                    <\/div>\r\n\r\n        <div class=\"booking-note\">\r\n            \u0627\u0644\u0639\u0631\u0628\u0648\u0646 50 \u0631\u064a\u0627\u0644 \u0644\u0623\u0648\u0644 \u062e\u062f\u0645\u0629 + 25 \u0631\u064a\u0627\u0644 \u0644\u0643\u0644 \u062e\u062f\u0645\u0629 \u0625\u0636\u0627\u0641\u064a\u0629.\r\n        <\/div>\r\n\r\n        <div id=\"booking_price_box\" class=\"booking-price-box\">\r\n            \u0627\u0644\u0639\u0631\u0628\u0648\u0646: 0 \u0631\u064a\u0627\u0644 | \u0627\u0644\u0645\u062a\u0628\u0642\u064a: 0 \u0631\u064a\u0627\u0644\r\n        <\/div>\r\n\r\n        <div class=\"booking-grid\">\r\n            <div>\r\n                <label>\u0627\u0644\u062a\u0627\u0631\u064a\u062e<\/label>\r\n                <input type=\"date\" id=\"booking_date\" name=\"booking_date\" min=\"2026-05-21\" required>\r\n            <\/div>\r\n\r\n            <div>\r\n                <label>\u0627\u0644\u0648\u0642\u062a<\/label>\r\n                <select id=\"booking_time\" name=\"booking_time\" required>\r\n                    <option value=\"\">\u0627\u062e\u062a\u0627\u0631\u064a \u0627\u0644\u062a\u0627\u0631\u064a\u062e \u0623\u0648\u0644\u0627\u064b<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <label>\u0645\u0648\u0642\u0639 \u0627\u0644\u0639\u0645\u064a\u0644<\/label>\r\n\r\n        <div class=\"booking-note\">\r\n            \u0627\u0636\u063a\u0637\u064a \u0639\u0644\u0649 \u0627\u0644\u062e\u0631\u064a\u0637\u0629 \u0623\u0648 \u0627\u0633\u062a\u062e\u062f\u0645\u064a \u0632\u0631 \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646. \u0633\u064a\u062a\u0645 \u0625\u0631\u0633\u0627\u0644 \u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639 \u0644\u0644\u0633\u0627\u0626\u0642.\r\n        <\/div>\r\n\r\n        <input type=\"text\" id=\"booking_address\" name=\"booking_address\" readonly required>\r\n        <input type=\"hidden\" id=\"booking_lat\" name=\"booking_lat\" required>\r\n        <input type=\"hidden\" id=\"booking_lng\" name=\"booking_lng\" required>\r\n        <input type=\"hidden\" id=\"booking_map_link\" name=\"booking_map_link\" required>\r\n\r\n        <button type=\"button\" id=\"use_my_location\" class=\"location-btn\">\ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646<\/button>\r\n\r\n        <div id=\"booking_map\"><\/div>\r\n\r\n        <button type=\"submit\" name=\"submit_booking\" id=\"submit_booking_btn\" class=\"submit-booking-btn\">\r\n            \u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u062c\u0632 \u0648\u062f\u0641\u0639 \u0627\u0644\u0639\u0631\u0628\u0648\u0646\r\n        <\/button>\r\n\r\n    <\/form>\r\n\r\n    <script>\r\n        const servicesInputs = document.querySelectorAll('input[name=\"booking_products[]\"]');\r\n        const priceBox = document.getElementById('booking_price_box');\r\n        const submitBtn = document.getElementById('submit_booking_btn');\r\n\r\n        function updateDepositPreview(){\r\n            let selected = Array.from(servicesInputs).filter(input => input.checked);\r\n            let count = selected.length;\r\n            let total = 0;\r\n\r\n            selected.forEach(input => total += parseFloat(input.dataset.price || 0));\r\n\r\n            let deposit = count > 0 ? 50 + Math.max(0, count - 1) * 25 : 0;\r\n            let remaining = Math.max(0, total - deposit);\r\n\r\n            priceBox.innerHTML = '\u0627\u0644\u0639\u0631\u0628\u0648\u0646: ' + deposit + ' \u0631\u064a\u0627\u0644 | \u0627\u0644\u0645\u062a\u0628\u0642\u064a: ' + remaining + ' \u0631\u064a\u0627\u0644';\r\n            submitBtn.innerHTML = count > 0 ? '\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u062c\u0632 \u0648\u062f\u0641\u0639 \u0627\u0644\u0639\u0631\u0628\u0648\u0646 ' + deposit + ' \u0631\u064a\u0627\u0644' : '\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u062c\u0632 \u0648\u062f\u0641\u0639 \u0627\u0644\u0639\u0631\u0628\u0648\u0646';\r\n        }\r\n\r\n        servicesInputs.forEach(input => input.addEventListener('change', updateDepositPreview));\r\n        updateDepositPreview();\r\n\r\n        document.getElementById('booking_date').addEventListener('change', function(){\r\n            let date = this.value;\r\n            let timeSelect = document.getElementById('booking_time');\r\n\r\n            timeSelect.innerHTML = '<option>\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0623\u0648\u0642\u0627\u062a...<\/option>';\r\n\r\n            fetch('https:\/\/raynails.com\/wp-admin\/admin-ajax.php', {\r\n                method:'POST',\r\n                headers:{'Content-Type':'application\/x-www-form-urlencoded'},\r\n                body:'action=get_booking_slots&date=' + encodeURIComponent(date)\r\n            })\r\n            .then(res => res.json())\r\n            .then(data => {\r\n                timeSelect.innerHTML = '';\r\n\r\n                if(data.success && data.data.length > 0){\r\n                    timeSelect.innerHTML = '<option value=\"\">\u0627\u062e\u062a\u0627\u0631\u064a \u0627\u0644\u0648\u0642\u062a<\/option>';\r\n\r\n                    data.data.forEach(function(time){\r\n                        let option = document.createElement('option');\r\n                        option.value = time;\r\n                        option.textContent = time;\r\n                        timeSelect.appendChild(option);\r\n                    });\r\n                } else {\r\n                    timeSelect.innerHTML = '<option value=\"\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0623\u0648\u0642\u0627\u062a \u0645\u062a\u0627\u062d\u0629<\/option>';\r\n                }\r\n            });\r\n        });\r\n\r\n        mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyZXMyNDkiLCJhIjoiY21qcjBzOXJxMW1lYzNjc2U2c2liNHMybiJ9.z84AG3zlC7J3FKvAL-yDHg';\r\n\r\n        let defaultLng = 46.6753;\r\n        let defaultLat = 24.7136;\r\n\r\n        let map = new mapboxgl.Map({\r\n            container:'booking_map',\r\n            style:'mapbox:\/\/styles\/mapbox\/streets-v12',\r\n            center:[defaultLng, defaultLat],\r\n            zoom:10\r\n        });\r\n\r\n        map.addControl(new mapboxgl.NavigationControl());\r\n\r\n        let marker = new mapboxgl.Marker({draggable:true})\r\n            .setLngLat([defaultLng, defaultLat])\r\n            .addTo(map);\r\n\r\n        function saveLocation(lng, lat){\r\n            let link = 'https:\/\/www.google.com\/maps?q=' + lat + ',' + lng;\r\n\r\n            document.getElementById('booking_lat').value = lat;\r\n            document.getElementById('booking_lng').value = lng;\r\n            document.getElementById('booking_map_link').value = link;\r\n            document.getElementById('booking_address').value = 'Lat: ' + lat.toFixed(6) + ' \/ Lng: ' + lng.toFixed(6);\r\n        }\r\n\r\n        marker.on('dragend', function(){\r\n            let pos = marker.getLngLat();\r\n            saveLocation(pos.lng, pos.lat);\r\n        });\r\n\r\n        map.on('click', function(e){\r\n            marker.setLngLat(e.lngLat);\r\n            saveLocation(e.lngLat.lng, e.lngLat.lat);\r\n        });\r\n\r\n        document.getElementById('use_my_location').onclick = function(){\r\n            if(!navigator.geolocation){\r\n                alert('\u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639.');\r\n                return;\r\n            }\r\n\r\n            navigator.geolocation.getCurrentPosition(function(position){\r\n                let lng = position.coords.longitude;\r\n                let lat = position.coords.latitude;\r\n\r\n                map.flyTo({center:[lng, lat], zoom:15});\r\n                marker.setLngLat([lng, lat]);\r\n                saveLocation(lng, lat);\r\n            }, function(){\r\n                alert('\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0633\u0645\u0627\u062d \u0628\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639.');\r\n            });\r\n        };\r\n\r\n        saveLocation(defaultLng, defaultLat);\r\n    <\/script>\r\n\r\n    <\/div>\n\t\t\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","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-55","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/raynails.com\/en\/wp-json\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raynails.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raynails.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raynails.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raynails.com\/en\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":4,"href":"https:\/\/raynails.com\/en\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":59,"href":"https:\/\/raynails.com\/en\/wp-json\/wp\/v2\/pages\/55\/revisions\/59"}],"wp:attachment":[{"href":"https:\/\/raynails.com\/en\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}