{"id":1684,"date":"2026-02-14T09:08:33","date_gmt":"2026-02-14T09:08:33","guid":{"rendered":"https:\/\/intadesignsa.com\/?page_id=1684"},"modified":"2026-02-14T09:09:22","modified_gmt":"2026-02-14T09:09:22","slug":"%d8%ad%d8%a7%d8%b3%d8%a8%d8%a9-%d8%aa%d9%83%d9%84%d9%81%d8%a9-%d8%a7%d9%84%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a7%d9%84%d8%af%d8%a7%d8%ae%d9%84%d9%8a","status":"publish","type":"page","link":"https:\/\/intadesign.sa\/en\/%d8%ad%d8%a7%d8%b3%d8%a8%d8%a9-%d8%aa%d9%83%d9%84%d9%81%d8%a9-%d8%a7%d9%84%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a7%d9%84%d8%af%d8%a7%d8%ae%d9%84%d9%8a\/","title":{"rendered":"\u062d\u0627\u0633\u0628\u0629 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062f\u0627\u062e\u0644\u064a"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1684\" class=\"elementor elementor-1684\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70d3a2e e-flex e-con-boxed e-con e-parent\" data-id=\"70d3a2e\" 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-61b8402 elementor-widget elementor-widget-shortcode\" data-id=\"61b8402\" 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\">\n<!-- Interior Design Cost Calculator Wrapper -->\n<div class=\"idcc-calculator-wrapper font-sans text-right\" dir=\"rtl\">\n  <div id=\"idccSuccessBox\" class=\"hidden mb-6 rounded-2xl border border-green-200 bg-green-50 p-4 text-green-800\">\n    <div class=\"font-bold mb-1\">\u062a\u0645 \u0627\u0633\u062a\u0644\u0627\u0645 \u0637\u0644\u0628\u0643 \u0628\u0646\u062c\u0627\u062d<\/div>\n    <div class=\"text-sm\">\n      <a id=\"idccPdfLink\" href=\"#\" target=\"_blank\" rel=\"noopener\" class=\"underline font-bold\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u062a\u0642\u0631\u064a\u0631 PDF<\/a>\n    <\/div>\n  <\/div>\n\n  <!-- Custom Tailwind Config for this scope -->\n  <script>\n    window.tailwind = window.tailwind || {};\n    window.tailwind.config = window.tailwind.config || {};\n    window.tailwind.config.important = '.idcc-calculator-wrapper';\n    window.tailwind.config.corePlugins = Object.assign({}, window.tailwind.config.corePlugins || {}, { preflight: false });\n    window.tailwind.config.theme = window.tailwind.config.theme || {};\n    window.tailwind.config.theme.extend = window.tailwind.config.theme.extend || {};\n    window.tailwind.config.theme.extend.colors = Object.assign({}, window.tailwind.config.theme.extend.colors || {}, {\n      brand: {\"50\":\"#f8f5f3\",\"100\":\"#f1eae6\",\"200\":\"#e6dad4\",\"300\":\"#dac8be\",\"400\":\"#c8aea0\",\"500\":\"#a67c65\",\"600\":\"#926d59\",\"700\":\"#7d5d4c\",\"800\":\"#674d3f\",\"900\":\"#503c30\"}    });\n    window.tailwind.config.theme.extend.fontFamily = Object.assign({}, window.tailwind.config.theme.extend.fontFamily || {}, {\n      sans: [\"Cairo\", \"sans-serif\"]\n    });\n    window.tailwind.config.theme.extend.animation = Object.assign({}, window.tailwind.config.theme.extend.animation || {}, {\n      'fade-in': 'idccFadeIn 0.5s ease-out',\n      'slide-up': 'idccSlideUp 0.5s ease-out'\n    });\n    window.tailwind.config.theme.extend.keyframes = Object.assign({}, window.tailwind.config.theme.extend.keyframes || {}, {\n      idccFadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },\n      idccSlideUp: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } }\n    });\n  <\/script>\n\n  <style>\n    .idcc-calculator-wrapper {\n      --idcc-primary: #a67c65;\n      --idcc-primary-rgb: 166,124,101;\n    }\n\n    .idcc-calculator-wrapper .step-content {\n      display: none;\n    }\n\n    .idcc-calculator-wrapper .step-content.active {\n      display: block;\n      animation: idccSlideUp 0.5s ease-out;\n    }\n\n    @keyframes idccSlideUp {\n      from { opacity: 0; transform: translateY(20px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* Glassmorphism Cards *\/\n    .idcc-calculator-wrapper .glass-card {\n      background: rgba(255, 255, 255, 0.95);\n      backdrop-filter: blur(10px);\n      border: 1px solid rgba(255, 255, 255, 0.2);\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);\n    }\n\n    \/* Enhanced Form Elements *\/\n    .idcc-calculator-wrapper .input-field {\n      transition: all 0.3s ease;\n    }\n\n    .idcc-calculator-wrapper .input-field:focus {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(var(--idcc-primary-rgb), 0.15);\n    }\n\n    \/* Selection Cards *\/\n    .idcc-calculator-wrapper .service-card, .idcc-calculator-wrapper .level-card {\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .idcc-calculator-wrapper .service-card:hover, .idcc-calculator-wrapper .level-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 12px 24px rgba(166, 124, 101, 0.1);\n    }\n\n    .idcc-calculator-wrapper .service-card.active, .idcc-calculator-wrapper .level-card.active {\n      border-color: var(--idcc-primary);\n      background-color: #fcfaf9;\n      box-shadow: 0 0 0 2px var(--idcc-primary);\n    }\n    \n    .idcc-calculator-wrapper .level-card.active::before {\n        content: '\\f00c';\n        font-family: 'Font Awesome 5 Free';\n        font-weight: 900;\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        color: var(--idcc-primary);\n    }\n    \n    \/* Highlight Premium *\/\n    .idcc-calculator-wrapper .level-card[data-level=\"premium\"] {\n        border: 2px solid #eab308; \/* Yellow\/Gold *\/\n        background: #fffbeb;\n    }\n    .idcc-calculator-wrapper .level-card[data-level=\"premium\"].active {\n        background: #fef3c7;\n        box-shadow: 0 0 0 2px #eab308;\n    }\n  <\/style>\n\n  <!-- Progress Stepper -->\n  <div class=\"mb-12 max-w-4xl mx-auto\">\n    <div class=\"relative\">\n      <div class=\"overflow-hidden h-2 mb-4 text-xs flex rounded-full bg-gray-200\">\n        <div id=\"progressBar\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gradient-to-r from-brand-400 to-brand-600 transition-all duration-700 ease-out\" style=\"width: 33%\"><\/div>\n      <\/div>\n      <div class=\"flex justify-between text-sm font-medium\">\n        <div id=\"stepLabel1\" class=\"text-brand-600 flex flex-col items-center transition-colors duration-300\">\n          <span class=\"w-8 h-8 rounded-full bg-brand-100 text-brand-600 flex items-center justify-center mb-2 border-2 border-brand-200\">1<\/span>\n          \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0646\u0648\u0639 \u0627\u0644\u062e\u062f\u0645\u0629\n        <\/div>\n        <div id=\"stepLabel2\" class=\"text-gray-400 flex flex-col items-center transition-colors duration-300\">\n          <span class=\"w-8 h-8 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center mb-2 border-2 border-gray-200\">2<\/span>\n          \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\n        <\/div>\n        <div id=\"stepLabel3\" class=\"text-gray-400 flex flex-col items-center transition-colors duration-300\">\n          <span class=\"w-8 h-8 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center mb-2 border-2 border-gray-200\">3<\/span>\n          \u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"flex flex-col lg:flex-row gap-8 items-start\">\n\n    <!-- Main Form Area -->\n    <div class=\"flex-1 lg:w-2\/3 w-full\">\n\n      <!-- Step 1: Client & Service -->\n      <div id=\"step1\" class=\"step-content active space-y-6\">\n\n        <!-- Customer Info Card -->\n        <section class=\"glass-card rounded-2xl p-8 border border-white\/50\">\n          <div class=\"flex items-center gap-3 mb-6 pb-4 border-b border-gray-100\">\n            <div class=\"w-10 h-10 rounded-full bg-brand-50 text-brand-600 flex items-center justify-center\">\n              <i class=\"far fa-user text-lg\"><\/i>\n            <\/div>\n            <h2 class=\"text-xl font-bold text-gray-800\">\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u064a\u0644<\/h2>\n          <\/div>\n\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n            <div class=\"space-y-2\">\n              <label class=\"text-sm font-medium text-gray-700\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 <span class=\"text-red-500\">*<\/span><\/label>\n              <input type=\"text\" id=\"custName\" class=\"input-field w-full rounded-xl border-gray-200 border bg-white\/50 p-3 focus:ring-2 focus:ring-brand-500\/20 focus:border-brand-500 outline-none\" placeholder=\"\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u062b\u0644\u0627\u062b\u064a\" required \/>\n            <\/div>\n            <div class=\"space-y-2\">\n              <label class=\"text-sm font-medium text-gray-700\">\u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644 <span class=\"text-red-500\">*<\/span><\/label>\n              <input type=\"tel\" id=\"custPhone\" class=\"input-field w-full rounded-xl border-gray-200 border bg-white\/50 p-3 focus:ring-2 focus:ring-brand-500\/20 focus:border-brand-500 outline-none\" dir=\"ltr\" style=\"text-align: right\" placeholder=\"05xxxxxxxx\" required \/>\n            <\/div>\n            <div class=\"space-y-2\">\n              <label class=\"text-sm font-medium text-gray-700\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a <span class=\"text-red-500\">*<\/span><\/label>\n              <input type=\"email\" id=\"custEmail\" class=\"input-field w-full rounded-xl border-gray-200 border bg-white\/50 p-3 focus:ring-2 focus:ring-brand-500\/20 focus:border-brand-500 outline-none\" dir=\"ltr\" style=\"text-align: right\" placeholder=\"example@mail.com\" required \/>\n            <\/div>\n            <div class=\"space-y-2\">\n              <label class=\"text-sm font-medium text-gray-700\">\u0627\u0644\u0645\u062f\u064a\u0646\u0629 <\/label>\n              <div class=\"relative\">\n                <select id=\"custCity\" class=\"input-field w-full rounded-xl border-gray-200 border bg-white\/50 p-3 focus:ring-2 focus:ring-brand-500\/20 focus:border-brand-500 outline-none appearance-none cursor-pointer\" >\n                  <option value=\"riyadh\">\u0627\u0644\u0631\u064a\u0627\u0636<\/option>\n                  <option value=\"jeddah\">\u062c\u062f\u0629<\/option>\n                  <option value=\"dammam\">\u0627\u0644\u062f\u0645\u0627\u0645<\/option>\n                  <option value=\"other\">\u0645\u062f\u064a\u0646\u0629 \u0623\u062e\u0631\u0649<\/option>\n                <\/select>\n                <i class=\"fas fa-chevron-down absolute left-4 top-4 text-gray-400 pointer-events-none\"><\/i>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <!-- Service Type Card -->\n        <section class=\"glass-card rounded-2xl p-8 border border-white\/50\">\n          <div class=\"flex items-center gap-3 mb-6 pb-4 border-b border-gray-100\">\n            <div class=\"w-10 h-10 rounded-full bg-brand-50 text-brand-600 flex items-center justify-center\">\n              <i class=\"fas fa-layer-group text-lg\"><\/i>\n            <\/div>\n            <h2 class=\"text-xl font-bold text-gray-800\">\u0646\u0648\u0639 \u0627\u0644\u062e\u062f\u0645\u0629<\/h2>\n          <\/div>\n\n          <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-8\">\n            <!-- Service Cards -->\n            <div class=\"service-card active cursor-pointer border-2 border-transparent bg-white rounded-2xl p-5 relative group\" data-service=\"design_only\">\n              <input type=\"radio\" name=\"serviceType\" value=\"design_only\" class=\"absolute top-4 left-4 w-5 h-5 accent-brand-600\" checked \/>\n              <div class=\"w-12 h-12 rounded-full bg-brand-50 text-brand-600 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform\">\n                <i class=\"fas fa-drafting-compass text-xl\"><\/i>\n              <\/div>\n              <h3 class=\"font-bold text-gray-800 mb-1\">\u062a\u0635\u0645\u064a\u0645 \u062f\u0627\u062e\u0644\u064a<\/h3>\n              <p class=\"text-xs text-gray-500 leading-relaxed\">\u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u0643\u0627\u0645\u0644 \u0644\u0644\u0645\u0633\u0627\u062d\u0627\u062a (\u0633\u0643\u0646\u064a\/\u062a\u062c\u0627\u0631\u064a)<\/p>\n            <\/div>\n\n            <div class=\"service-card cursor-pointer border-2 border-transparent bg-white rounded-2xl p-5 relative group\" data-service=\"design_build\">\n              <input type=\"radio\" name=\"serviceType\" value=\"design_build\" class=\"absolute top-4 left-4 w-5 h-5 accent-brand-600\" \/>\n              <div class=\"w-12 h-12 rounded-full bg-orange-50 text-orange-600 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform\">\n                <i class=\"fas fa-hard-hat text-xl\"><\/i>\n              <\/div>\n              <h3 class=\"font-bold text-gray-800 mb-1\">\u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0646\u0641\u064a\u0630<\/h3>\n              <p class=\"text-xs text-gray-500 leading-relaxed\">\u062d\u0644 \u0634\u0627\u0645\u0644 \u0645\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u062d\u062a\u0649 \u0627\u0644\u062a\u0633\u0644\u064a\u0645<\/p>\n            <\/div>\n\n            <div class=\"service-card cursor-pointer border-2 border-transparent bg-white rounded-2xl p-5 relative group\" data-service=\"consultation\">\n              <input type=\"radio\" name=\"serviceType\" value=\"consultation\" class=\"absolute top-4 left-4 w-5 h-5 accent-brand-600\" \/>\n              <div class=\"w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform\">\n                <i class=\"far fa-comments text-xl\"><\/i>\n              <\/div>\n              <h3 class=\"font-bold text-gray-800 mb-1\">\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u062a\u0641\u0635\u064a\u0644\u064a\u0629<\/h3>\n              <p class=\"text-xs text-gray-500 leading-relaxed\">\u062c\u0644\u0633\u0629 \u0627\u0633\u062a\u0634\u0627\u0631\u064a\u0629 \u062a\u062e\u0635\u0645 \u0645\u0646 \u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Category Selector (Hidden for Consultation) -->\n          <div id=\"categorySelector\">\n            <label class=\"block text-sm font-medium text-gray-700 mb-3\">\u0641\u0626\u0629 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/label>\n            <div class=\"flex flex-wrap gap-3\">\n              <label class=\"cursor-pointer group relative\">\n                <input type=\"radio\" name=\"projectCategory\" value=\"residential\" class=\"peer sr-only\" checked \/>\n                <span class=\"flex items-center gap-2 px-5 py-2.5 rounded-xl border border-gray-200 bg-white text-gray-600 peer-checked:bg-brand-600 peer-checked:text-white peer-checked:border-brand-600 peer-checked:shadow-lg peer-checked:shadow-brand-500\/30 transition-all\">\n                  <i class=\"fas fa-home\"><\/i> \u0633\u0643\u0646\u064a\n                <\/span>\n              <\/label>\n              <label class=\"cursor-pointer group relative\">\n                <input type=\"radio\" name=\"projectCategory\" value=\"commercial\" class=\"peer sr-only\" \/>\n                <span class=\"flex items-center gap-2 px-5 py-2.5 rounded-xl border border-gray-200 bg-white text-gray-600 peer-checked:bg-brand-600 peer-checked:text-white peer-checked:border-brand-600 peer-checked:shadow-lg peer-checked:shadow-brand-500\/30 transition-all\">\n                  <i class=\"fas fa-store\"><\/i> \u062a\u062c\u0627\u0631\u064a\n                <\/span>\n              <\/label>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <div class=\"flex justify-end pt-4\">\n          <button id=\"btnStep1Next\" class=\"bg-gradient-to-l from-brand-600 to-brand-500 text-white px-8 py-3.5 rounded-xl font-bold shadow-lg shadow-brand-500\/30 hover:shadow-brand-500\/50 hover:-translate-y-1 transition-all flex items-center gap-3\">\n            \u0627\u0644\u062a\u0627\u0644\u064a: \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 <i class=\"fas fa-arrow-left\"><\/i>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Step 2: Project Details -->\n      <div id=\"step2\" class=\"step-content space-y-6\">\n        <section class=\"glass-card rounded-2xl p-8 border border-white\/50\">\n          <div class=\"flex items-center gap-3 mb-6 pb-4 border-b border-gray-100\">\n            <div class=\"w-10 h-10 rounded-full bg-brand-50 text-brand-600 flex items-center justify-center\">\n              <i class=\"fas fa-ruler-combined text-lg\"><\/i>\n            <\/div>\n            <h2 class=\"text-xl font-bold text-gray-800\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0645\u0633\u062a\u0648\u064a\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629<\/h2>\n          <\/div>\n\n          <!-- Consultation Msg -->\n          <div id=\"consultationFields\" class=\"hidden space-y-4 bg-brand-50\/50 p-6 rounded-xl border border-brand-100\">\n             <div class=\"flex items-center gap-3\">\n                 <i class=\"fas fa-info-circle text-brand-600 text-xl\"><\/i>\n                 <div>\n                     <h3 class=\"font-bold text-brand-800\">\u0633\u0639\u0631 \u062b\u0627\u0628\u062a \u0644\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0629<\/h3>\n                     <p class=\"text-sm text-brand-600\">\u0642\u064a\u0645\u0629 \u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0629 750 \u0631\u064a\u0627\u0644\u060c \u064a\u062a\u0645 \u062e\u0635\u0645\u0647\u0627 \u0645\u0646 \u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0641\u064a \u062d\u0627\u0644 \u0627\u0644\u062a\u0639\u0627\u0642\u062f.<\/p>\n                 <\/div>\n             <\/div>\n          <\/div>\n\n          <div id=\"areaFields\" class=\"space-y-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n              <div class=\"space-y-2\">\n                <label class=\"text-sm font-medium text-gray-700\">\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0629 (\u0645\u00b2) <span class=\"text-red-500\">*<\/span><\/label>\n                <input type=\"number\" id=\"projectArea\" class=\"input-field w-full rounded-xl border-gray-200 border bg-white\/50 p-3 focus:ring-2 focus:ring-brand-500\/20 outline-none font-bold text-lg\" placeholder=\"0\" required \/>\n              <\/div>\n              <div class=\"space-y-2\">\n                <label class=\"text-sm font-medium text-gray-700\">\u0639\u062f\u062f \u0627\u0644\u0641\u0631\u0627\u063a\u0627\u062a <\/label>\n                <div class=\"relative\">\n                  <input type=\"number\" id=\"roomCount\" class=\"input-field w-full rounded-xl border-gray-200 border bg-white\/50 p-3 focus:ring-2 focus:ring-brand-500\/20 outline-none\" value=\"1\" min=\"1\"  \/>\n                  <div class=\"absolute left-3 top-3 text-gray-400 text-xs pointer-events-none\">\u063a\u0631\u0641\u0629<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Design Levels -->\n            <div class=\"space-y-3\">\n                <label class=\"block text-sm font-medium text-gray-700\">\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 (Design Level)<\/label>\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n                    <!-- Smart -->\n                    <label class=\"level-card cursor-pointer border border-gray-200 bg-white rounded-xl p-4 relative\" data-level=\"smart\">\n                        <input type=\"radio\" name=\"designLevel\" value=\"smart\" class=\"sr-only\" \/>\n                        <div class=\"font-bold text-gray-800 text-lg mb-1\">Smart<\/div>\n                        <div class=\"text-xs text-gray-500 mb-2\">\u0645\u0639\u064a\u0627\u0631 \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0645\u062a\u0648\u0633\u0637<\/div>\n                        <ul class=\"text-[10px] text-gray-500 space-y-1 list-disc list-inside opacity-80\">\n                            <li>\u0645\u062e\u0637\u0637 \u0623\u062b\u0627\u062b<\/li>\n                            <li>\u0645\u062e\u0637\u0637\u0627\u062a \u0643\u0647\u0631\u0628\u0627\u0621<\/li>\n                            <li>2-3 \u0644\u0642\u0637\u0627\u062a 3D<\/li>\n                        <\/ul>\n                    <\/label>\n\n                    <!-- Premium (Default) -->\n                    <label class=\"level-card active cursor-pointer border border-gray-200 bg-white rounded-xl p-4 relative transform scale-105 z-10\" data-level=\"premium\">\n                        <div class=\"absolute -top-3 left-1\/2 -translate-x-1\/2 bg-yellow-500 text-white text-[10px] font-bold px-3 py-1 rounded-full shadow-sm\">\u0627\u0644\u0623\u0643\u062b\u0631 \u0637\u0644\u0628\u0627\u064b<\/div>\n                        <input type=\"radio\" name=\"designLevel\" value=\"premium\" class=\"sr-only\" checked \/>\n                        <div class=\"font-bold text-gray-800 text-lg mb-1\">Premium<\/div>\n                        <div class=\"text-xs text-gray-500 mb-2\">\u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0641\u0627\u062e\u0631\u0629<\/div>\n                        <ul class=\"text-[10px] text-gray-600 space-y-1 list-disc list-inside font-medium\">\n                            <li>Concept \u0645\u062a\u0643\u0627\u0645\u0644<\/li>\n                            <li>Moodboard \u0627\u062d\u062a\u0631\u0627\u0641\u064a<\/li>\n                            <li>4-6 \u0644\u0642\u0637\u0627\u062a 3D<\/li>\n                            <li>\u062c\u062f\u0627\u0648\u0644 \u0643\u0645\u064a\u0627\u062a<\/li>\n                        <\/ul>\n                    <\/label>\n\n                    <!-- Signature -->\n                    <label class=\"level-card cursor-pointer border border-gray-200 bg-white rounded-xl p-4 relative\" data-level=\"signature\">\n                        <input type=\"radio\" name=\"designLevel\" value=\"signature\" class=\"sr-only\" \/>\n                        <div class=\"font-bold text-gray-800 text-lg mb-1\">Signature<\/div>\n                        <div class=\"text-xs text-gray-500 mb-2\">\u0627\u0644\u0646\u062e\u0628\u0629<\/div>\n                        <ul class=\"text-[10px] text-gray-500 space-y-1 list-disc list-inside opacity-80\">\n                            <li>\u062a\u0635\u0645\u064a\u0645 \u0647\u0648\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629<\/li>\n                            <li>\u0625\u062f\u0627\u0631\u0629 \u062a\u0646\u0641\u064a\u0630 \u0643\u0627\u0645\u0644\u0629<\/li>\n                            <li>\u062a\u0646\u0633\u064a\u0642 \u0623\u062b\u0627\u062b \u0648\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a<\/li>\n                        <\/ul>\n                    <\/label>\n                <\/div>\n            <\/div>\n\n            <!-- Execution Levels (Hidden by default) -->\n            <div id=\"executionLevelSection\" class=\"space-y-3 hidden\">\n                <label class=\"block text-sm font-medium text-gray-700\">\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0646\u0641\u064a\u0630 (Execution Level)<\/label>\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n                    <label class=\"level-card cursor-pointer border border-gray-200 bg-white rounded-xl p-4 relative\">\n                        <input type=\"radio\" name=\"executionLevel\" value=\"medium\" class=\"sr-only\" \/>\n                        <div class=\"font-bold text-gray-800 text-lg mb-1\">Medium<\/div>\n                        <div class=\"text-xs text-gray-500\">\u062a\u0634\u0637\u064a\u0628 \u0639\u0627\u0644\u064a \u0642\u064a\u0627\u0633\u064a<\/div>\n                    <\/label>\n\n                    <label class=\"level-card cursor-pointer border border-gray-200 bg-white rounded-xl p-4 relative\">\n                        <input type=\"radio\" name=\"executionLevel\" value=\"luxury\" class=\"sr-only\" checked \/>\n                        <div class=\"font-bold text-gray-800 text-lg mb-1\">Luxury<\/div>\n                        <div class=\"text-xs text-gray-500\">\u062a\u0634\u0637\u064a\u0628 \u0641\u0627\u062e\u0631<\/div>\n                    <\/label>\n\n                    <label class=\"level-card cursor-pointer border border-gray-200 bg-white rounded-xl p-4 relative\">\n                        <input type=\"radio\" name=\"executionLevel\" value=\"ultra\" class=\"sr-only\" \/>\n                        <div class=\"font-bold text-gray-800 text-lg mb-1\">Ultra<\/div>\n                        <div class=\"text-xs text-gray-500\">\u0641\u0627\u0626\u0642 \u0627\u0644\u0641\u062e\u0627\u0645\u0629<\/div>\n                    <\/label>\n                <\/div>\n            <\/div>\n\n            <div class=\"space-y-2\">\n              <label class=\"text-sm font-medium text-gray-700\">\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0628\u062f\u0621<\/label>\n              <input type=\"date\" id=\"startDate\" class=\"input-field w-full rounded-xl border-gray-200 border bg-white\/50 p-3 focus:ring-2 focus:ring-brand-500\/20 outline-none\" \/>\n            <\/div>\n            \n            <div class=\"space-y-2\">\n                <label class=\"text-sm font-medium text-gray-700\">\u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0627\u0644\u062a\u0642\u062f\u064a\u0631\u064a\u0629<\/label>\n                <div class=\"flex items-center gap-3 bg-white\/50 p-2 rounded-xl border border-gray-200\">\n                    <input type=\"range\" id=\"budgetRange\" min=\"50000\" max=\"1000000\" step=\"10000\" value=\"100000\" class=\"w-full accent-brand-600 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer\" \/>\n                    <span id=\"budgetDisplay\" class=\"text-brand-600 font-bold w-24 text-center text-xs\">100,000+<\/span>\n                <\/div>\n                <div class=\"flex items-center gap-2 mt-1\">\n                    <input type=\"checkbox\" id=\"budgetNotSure\" class=\"w-4 h-4 text-brand-600 rounded border-gray-300\" \/>\n                    <label for=\"budgetNotSure\" class=\"text-xs text-gray-500 cursor-pointer select-none\">\u063a\u064a\u0631 \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629<\/label>\n                <\/div>\n            <\/div>\n\n          <\/div>\n        <\/section>\n\n        <div class=\"flex justify-between pt-4\">\n          <button id=\"btnStep2Prev\" class=\"bg-white text-gray-600 px-6 py-3.5 rounded-xl font-bold border border-gray-200 hover:bg-gray-50 transition\">\n            \u0627\u0644\u0633\u0627\u0628\u0642\n          <\/button>\n          <button id=\"btnStep2Next\" class=\"bg-gradient-to-l from-brand-600 to-brand-500 text-white px-8 py-3.5 rounded-xl font-bold shadow-lg shadow-brand-500\/30 hover:shadow-brand-500\/50 hover:-translate-y-1 transition-all flex items-center gap-3\">\n            \u0627\u0644\u062a\u0627\u0644\u064a: \u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629 <i class=\"fas fa-arrow-left\"><\/i>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Step 3: Review -->\n      <div id=\"step3\" class=\"step-content space-y-6\">\n        \n        <div class=\"bg-gradient-to-br from-green-50 to-emerald-50 p-8 rounded-2xl border border-green-100 text-center shadow-sm\">\n          <div class=\"w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl shadow-inner\">\n            <i class=\"fas fa-check\"><\/i>\n          <\/div>\n          <h3 class=\"text-xl font-bold text-green-800 mb-2\">\u062c\u0627\u0647\u0632 \u0644\u0637\u0644\u0628 \u0627\u0644\u0639\u0631\u0636<\/h3>\n          <p class=\"text-green-700 max-w-md mx-auto\">\u064a\u0631\u062c\u0649 \u0645\u0631\u0627\u062c\u0639\u0629 \u0645\u0644\u062e\u0635 \u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0639\u0644\u0649 \u0627\u0644\u064a\u0633\u0627\u0631. \u0647\u0630\u0627 \u0627\u0644\u0633\u0639\u0631 \u062a\u0642\u062f\u064a\u0631\u064a \u0623\u0648\u0644\u064a.<\/p>\n        <\/div>\n\n        <div class=\"flex justify-between pt-4\">\n          <button id=\"btnStep3Prev\" class=\"bg-white text-gray-600 px-6 py-3.5 rounded-xl font-bold border border-gray-200 hover:bg-gray-50 transition\">\n            \u0627\u0644\u0633\u0627\u0628\u0642\n          <\/button>\n          <button id=\"btnSubmitOrder\" class=\"bg-brand-800 text-white px-8 py-3.5 rounded-xl font-bold shadow-lg shadow-brand-900\/20 hover:bg-brand-900 hover:-translate-y-1 transition-all flex items-center gap-3\">\n            <span class=\"btn-text\">\u062a\u0623\u0643\u064a\u062f \u0648\u0637\u0644\u0628 \u0627\u0644\u0639\u0631\u0636<\/span> <i class=\"fas fa-paper-plane\"><\/i>\n          <\/button>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- Sticky Summary (Floating Card) -->\n    <div class=\"lg:w-1\/3 w-full\">\n      <div class=\"sticky top-24\">\n        <div class=\"bg-brand-900 text-white rounded-3xl p-8 shadow-2xl relative overflow-hidden ring-4 ring-white\/50 backdrop-blur-xl\">\n          <!-- Decorative Elements -->\n          <div class=\"absolute -top-20 -right-20 w-60 h-60 bg-brand-800 rounded-full opacity-50 blur-3xl\"><\/div>\n          <div class=\"absolute -bottom-20 -left-20 w-60 h-60 bg-brand-700 rounded-full opacity-50 blur-3xl\"><\/div>\n\n          <div class=\"relative z-10\">\n            <h3 class=\"text-brand-200 text-sm font-bold uppercase tracking-widest mb-2\">\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u062a\u0642\u062f\u064a\u0631\u064a<\/h3>\n            <div class=\"flex items-baseline gap-2 mb-8\">\n              <span id=\"totalCost\" class=\"text-5xl font-bold tracking-tight\">0<\/span>\n              <span class=\"text-xl text-brand-300\">\u0631.\u0633<\/span>\n            <\/div>\n\n            <div class=\"space-y-4 text-sm border-t border-brand-800\/50 pt-6\">\n              <div id=\"designRow\" class=\"flex justify-between text-brand-100\">\n                <span>\u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/span>\n                <span id=\"designCostDisplay\" class=\"font-mono\">0<\/span>\n              <\/div>\n              <div id=\"executionRow\" class=\"hidden flex justify-between text-brand-100\">\n                <span>\u0627\u0644\u062a\u0646\u0641\u064a\u0630<\/span>\n                <span id=\"executionCostDisplay\" class=\"font-mono\">0<\/span>\n              <\/div>\n            <\/div>\n\n            <div id=\"logicBreakdown\" class=\"mt-6 pt-4 border-t border-brand-800\/50 hidden\">\n                <div class=\"text-xs text-brand-300 mb-1\" id=\"designRateDisplay\"><\/div>\n                <div class=\"text-xs text-brand-300 mb-1\" id=\"execRateDisplay\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"mt-6 bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center\">\n          <p class=\"text-xs text-gray-500 leading-relaxed\">\n            * \u0647\u0630\u0627 \u0627\u0644\u0633\u0639\u0631 \u062a\u0642\u062f\u064a\u0631\u064a \u0623\u0648\u0644\u064a \u00b110% \u062d\u0633\u0628 \u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629 \u0648\u0644\u0627 \u064a\u0639\u062a\u0628\u0631 \u0646\u0647\u0627\u0626\u064a\u0627\u064b.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\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":"elementor_header_footer","meta":{"_acf_changed":false,"_joinchat":[],"footnotes":""},"class_list":["post-1684","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/intadesign.sa\/en\/wp-json\/wp\/v2\/pages\/1684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/intadesign.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/intadesign.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/intadesign.sa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/intadesign.sa\/en\/wp-json\/wp\/v2\/comments?post=1684"}],"version-history":[{"count":4,"href":"https:\/\/intadesign.sa\/en\/wp-json\/wp\/v2\/pages\/1684\/revisions"}],"predecessor-version":[{"id":1688,"href":"https:\/\/intadesign.sa\/en\/wp-json\/wp\/v2\/pages\/1684\/revisions\/1688"}],"wp:attachment":[{"href":"https:\/\/intadesign.sa\/en\/wp-json\/wp\/v2\/media?parent=1684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}