{"id":770,"date":"2025-12-18T20:17:26","date_gmt":"2025-12-18T20:17:26","guid":{"rendered":"https:\/\/souqperfuem.com\/%d9%85%d8%b9%d9%85%d9%84-%d8%aa%d8%b1%d9%83%d9%8a%d8%a8-%d8%a7%d9%84%d8%b9%d8%b7%d9%88%d8%b1\/"},"modified":"2025-12-18T20:17:26","modified_gmt":"2025-12-18T20:17:26","slug":"%d9%85%d8%b9%d9%85%d9%84-%d8%aa%d8%b1%d9%83%d9%8a%d8%a8-%d8%a7%d9%84%d8%b9%d8%b7%d9%88%d8%b1","status":"publish","type":"page","link":"https:\/\/souqperfuem.com\/en\/%d9%85%d8%b9%d9%85%d9%84-%d8%aa%d8%b1%d9%83%d9%8a%d8%a8-%d8%a7%d9%84%d8%b9%d8%b7%d9%88%d8%b1\/","title":{"rendered":"\u0645\u0639\u0645\u0644 \u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0639\u0637\u0648\u0631"},"content":{"rendered":"<div id=\"perfume-mixer\">\n        <style>\n            #perfume-mixer { font-family: 'Tajawal', Arial, sans-serif; direction: rtl; }\n            .pm-container { max-width: 1600px; margin: 0 auto; padding: 20px; }\n            .pm-header { text-align: center; margin-bottom: 40px; background: linear-gradient(135deg, #faf5ff, #fce7f3); padding: 40px 20px; border-radius: 20px; }\n            .pm-header h1 { font-size: 2.5em; color: #9333ea; margin: 0 0 15px 0; }\n            .pm-grid { display: grid; grid-template-columns: 1fr 400px; gap: 30px; }\n            \n            \/* \u0627\u0644\u0646\u0648\u062a\u0627\u062a *\/\n            .pm-tabs { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }\n            .pm-tab { flex: 1; min-width: 180px; padding: 15px 20px; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer; background: white; font-weight: 600; transition: all 0.3s; text-align: center; }\n            .pm-tab:hover { border-color: #9333ea; transform: translateY(-2px); }\n            .pm-tab.active { background: linear-gradient(135deg, #9333ea, #ec4899); color: white; }\n            .pm-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; }\n            .pm-note { border: 3px solid #e5e7eb; border-radius: 12px; padding: 18px; cursor: pointer; background: white; transition: all 0.3s; position: relative; }\n            .pm-note:hover { border-color: #9333ea; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(147,51,234,0.15); }\n            .pm-note.selected { border-color: #10b981; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); }\n            .pm-note.selected::after { content: '\u2713'; position: absolute; top: 10px; left: 10px; background: #10b981; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }\n            .pm-color { width: 50px; height: 50px; border-radius: 10px; margin-bottom: 12px; box-shadow: 0 3px 8px rgba(0,0,0,0.15); }\n            .pm-name { font-weight: 700; font-size: 1.05em; margin-bottom: 3px; color: #1f2937; }\n            .pm-name-en { color: #6b7280; font-size: 0.85em; margin-bottom: 8px; }\n            .pm-price { font-weight: 700; color: #9333ea; font-size: 1.1em; }\n            \n            \/* \u0627\u0644\u0632\u062c\u0627\u062c\u0629 *\/\n            .pm-bottle { position: sticky; top: 20px; }\n            .pm-bottle-box { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 20px; }\n            .pm-bottle-canvas { width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f9fafb, #f3f4f6); border-radius: 15px; }\n            .pm-bottle-svg { width: 200px; height: 350px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); }\n            \n            \/* \u0627\u0644\u0627\u0642\u062a\u0631\u0627\u062d\u0627\u062a *\/\n            .pm-suggestions { background: white; border-radius: 16px; padding: 25px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); margin-bottom: 20px; }\n            .pm-suggestions h3 { margin: 0 0 15px 0; color: #9333ea; font-size: 1.3em; }\n            .pm-suggest-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f9fafb; border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s; }\n            .pm-suggest-item:hover { background: #f3e8ff; transform: translateX(-5px); }\n            .pm-suggest-color { width: 40px; height: 40px; border-radius: 8px; }\n            .pm-suggest-name { font-weight: 600; color: #1f2937; }\n            .pm-suggest-reason { font-size: 0.85em; color: #6b7280; }\n            \n            \/* \u0627\u0644\u0646\u062a\u064a\u062c\u0629 *\/\n            .pm-result { background: linear-gradient(135deg, #9333ea, #ec4899); color: white; border-radius: 16px; padding: 25px; box-shadow: 0 10px 25px rgba(147,51,234,0.3); }\n            .pm-result h3 { margin: 0 0 15px 0; font-size: 1.5em; }\n            .pm-result-char { font-size: 1.2em; font-weight: 600; margin-bottom: 10px; padding: 12px; background: rgba(255,255,255,0.15); border-radius: 10px; }\n            .pm-result-price { font-size: 2.5em; font-weight: 700; text-align: center; margin: 20px 0; }\n            .pm-btn { background: white; color: #9333ea; border: none; padding: 15px; border-radius: 10px; font-size: 1.1em; font-weight: 700; cursor: pointer; width: 100%; transition: all 0.3s; }\n            .pm-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,255,255,0.3); }\n            .pm-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n            \n            @media (max-width: 1200px) { .pm-grid { grid-template-columns: 1fr; } .pm-bottle { position: static; } }\n            @media (max-width: 768px) { .pm-notes { grid-template-columns: 1fr; } }\n        <\/style>\n        \n        <div class=\"pm-container\">\n            <div class=\"pm-header\">\n                <h1>\u2728 \u0645\u0639\u0645\u0644 \u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0639\u0637\u0648\u0631 \u2728<\/h1>\n                <p style=\"font-size: 1.1em; color: #6b7280;\">\u0634\u0627\u0647\u062f \u062a\u0631\u0643\u064a\u0628\u062a\u0643 \u062a\u062a\u0634\u0643\u0644 \u0623\u0645\u0627\u0645 \u0639\u064a\u0646\u064a\u0643<\/p>\n            <\/div>\n            \n            <div class=\"pm-grid\">\n                <div>\n                    <div class=\"pm-tabs\">\n                        <button class=\"pm-tab active\" onclick=\"pmApp.filter('top', event)\">\ud83c\udf4b \u0646\u0648\u062a\u0627\u062a \u0639\u0644\u0648\u064a\u0629<\/button>\n                        <button class=\"pm-tab\" onclick=\"pmApp.filter('middle', event)\">\ud83c\udf38 \u0646\u0648\u062a\u0627\u062a \u0642\u0644\u0628\u064a\u0629<\/button>\n                        <button class=\"pm-tab\" onclick=\"pmApp.filter('base', event)\">\ud83c\udf30 \u0646\u0648\u062a\u0627\u062a \u0642\u0627\u0639\u062f\u064a\u0629<\/button>\n                    <\/div>\n                    \n                    <div class=\"pm-notes\">\n                                                <div class=\"pm-note\" data-id=\"14\" data-cat=\"base\" data-note='{&quot;id&quot;:&quot;14&quot;,&quot;name_ar&quot;:&quot;\\u062e\\u0634\\u0628 \\u0627\\u0644\\u0635\\u0646\\u062f\\u0644&quot;,&quot;name_en&quot;:&quot;Sandalwood&quot;,&quot;category&quot;:&quot;base&quot;,&quot;description_ar&quot;:&quot;\\u0643\\u0631\\u064a\\u0645\\u064a \\u0648\\u062e\\u0634\\u0628\\u064a\\u060c \\u064a\\u0636\\u0641\\u064a \\u0646\\u0639\\u0648\\u0645\\u0629&quot;,&quot;color&quot;:&quot;#C19A6B&quot;,&quot;intensity&quot;:&quot;8&quot;,&quot;price&quot;:&quot;55.00&quot;}' onclick=\"pmApp.toggle(14)\">\n                            <div class=\"pm-color\" style=\"background: #C19A6B\"><\/div>\n                            <div class=\"pm-name\">\u062e\u0634\u0628 \u0627\u0644\u0635\u0646\u062f\u0644<\/div>\n                            <div class=\"pm-name-en\">Sandalwood<\/div>\n                            <div class=\"pm-price\">55 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"13\" data-cat=\"base\" data-note='{&quot;id&quot;:&quot;13&quot;,&quot;name_ar&quot;:&quot;\\u0639\\u0646\\u0628\\u0631&quot;,&quot;name_en&quot;:&quot;Amber&quot;,&quot;category&quot;:&quot;base&quot;,&quot;description_ar&quot;:&quot;\\u062f\\u0627\\u0641\\u0626 \\u0648\\u0631\\u0627\\u062a\\u0646\\u062c\\u064a\\u060c \\u064a\\u0645\\u0646\\u062d \\u0639\\u0645\\u0642&quot;,&quot;color&quot;:&quot;#FFBF00&quot;,&quot;intensity&quot;:&quot;9&quot;,&quot;price&quot;:&quot;60.00&quot;}' onclick=\"pmApp.toggle(13)\">\n                            <div class=\"pm-color\" style=\"background: #FFBF00\"><\/div>\n                            <div class=\"pm-name\">\u0639\u0646\u0628\u0631<\/div>\n                            <div class=\"pm-name-en\">Amber<\/div>\n                            <div class=\"pm-price\">60 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"10\" data-cat=\"base\" data-note='{&quot;id&quot;:&quot;10&quot;,&quot;name_ar&quot;:&quot;\\u0639\\u0648\\u062f&quot;,&quot;name_en&quot;:&quot;Oud&quot;,&quot;category&quot;:&quot;base&quot;,&quot;description_ar&quot;:&quot;\\u062e\\u0634\\u0628\\u064a \\u0639\\u0645\\u064a\\u0642\\u060c \\u064a\\u0636\\u0641\\u064a \\u0641\\u062e\\u0627\\u0645\\u0629 \\u0634\\u0631\\u0642\\u064a\\u0629&quot;,&quot;color&quot;:&quot;#8B4513&quot;,&quot;intensity&quot;:&quot;10&quot;,&quot;price&quot;:&quot;80.00&quot;}' onclick=\"pmApp.toggle(10)\">\n                            <div class=\"pm-color\" style=\"background: #8B4513\"><\/div>\n                            <div class=\"pm-name\">\u0639\u0648\u062f<\/div>\n                            <div class=\"pm-name-en\">Oud<\/div>\n                            <div class=\"pm-price\">80 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"12\" data-cat=\"base\" data-note='{&quot;id&quot;:&quot;12&quot;,&quot;name_ar&quot;:&quot;\\u0641\\u0627\\u0646\\u064a\\u0644\\u064a\\u0627&quot;,&quot;name_en&quot;:&quot;Vanilla&quot;,&quot;category&quot;:&quot;base&quot;,&quot;description_ar&quot;:&quot;\\u062d\\u0644\\u0648 \\u0648\\u0645\\u0631\\u064a\\u062d\\u060c \\u064a\\u0636\\u064a\\u0641 \\u0646\\u0639\\u0648\\u0645\\u0629&quot;,&quot;color&quot;:&quot;#FAEBD7&quot;,&quot;intensity&quot;:&quot;9&quot;,&quot;price&quot;:&quot;35.00&quot;}' onclick=\"pmApp.toggle(12)\">\n                            <div class=\"pm-color\" style=\"background: #FAEBD7\"><\/div>\n                            <div class=\"pm-name\">\u0641\u0627\u0646\u064a\u0644\u064a\u0627<\/div>\n                            <div class=\"pm-name-en\">Vanilla<\/div>\n                            <div class=\"pm-price\">35 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"11\" data-cat=\"base\" data-note='{&quot;id&quot;:&quot;11&quot;,&quot;name_ar&quot;:&quot;\\u0645\\u0633\\u0643&quot;,&quot;name_en&quot;:&quot;Musk&quot;,&quot;category&quot;:&quot;base&quot;,&quot;description_ar&quot;:&quot;\\u062f\\u0627\\u0641\\u0626 \\u0648\\u062d\\u0633\\u064a\\u060c \\u064a\\u062b\\u0628\\u062a \\u0627\\u0644\\u0639\\u0637\\u0631&quot;,&quot;color&quot;:&quot;#F5F5DC&quot;,&quot;intensity&quot;:&quot;8&quot;,&quot;price&quot;:&quot;50.00&quot;}' onclick=\"pmApp.toggle(11)\">\n                            <div class=\"pm-color\" style=\"background: #F5F5DC\"><\/div>\n                            <div class=\"pm-name\">\u0645\u0633\u0643<\/div>\n                            <div class=\"pm-name-en\">Musk<\/div>\n                            <div class=\"pm-price\">50 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"9\" data-cat=\"middle\" data-note='{&quot;id&quot;:&quot;9&quot;,&quot;name_ar&quot;:&quot;\\u0625\\u0628\\u0631\\u0629 \\u0627\\u0644\\u0631\\u0627\\u0639\\u064a&quot;,&quot;name_en&quot;:&quot;Geranium&quot;,&quot;category&quot;:&quot;middle&quot;,&quot;description_ar&quot;:&quot;\\u0645\\u062a\\u0648\\u0627\\u0632\\u0646 \\u0648\\u0632\\u0647\\u0631\\u064a\\u060c \\u064a\\u0646\\u0639\\u0634&quot;,&quot;color&quot;:&quot;#FFB6D9&quot;,&quot;intensity&quot;:&quot;7&quot;,&quot;price&quot;:&quot;22.00&quot;}' onclick=\"pmApp.toggle(9)\">\n                            <div class=\"pm-color\" style=\"background: #FFB6D9\"><\/div>\n                            <div class=\"pm-name\">\u0625\u0628\u0631\u0629 \u0627\u0644\u0631\u0627\u0639\u064a<\/div>\n                            <div class=\"pm-name-en\">Geranium<\/div>\n                            <div class=\"pm-price\">22 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"8\" data-cat=\"middle\" data-note='{&quot;id&quot;:&quot;8&quot;,&quot;name_ar&quot;:&quot;\\u0625\\u064a\\u0644\\u0646\\u063a \\u0625\\u064a\\u0644\\u0646\\u063a&quot;,&quot;name_en&quot;:&quot;Ylang Ylang&quot;,&quot;category&quot;:&quot;middle&quot;,&quot;description_ar&quot;:&quot;\\u062d\\u0644\\u0648 \\u0648\\u0645\\u062e\\u0645\\u0644\\u064a\\u060c \\u064a\\u0636\\u064a\\u0641 \\u0625\\u063a\\u0631\\u0627\\u0621&quot;,&quot;color&quot;:&quot;#FFF8DC&quot;,&quot;intensity&quot;:&quot;8&quot;,&quot;price&quot;:&quot;32.00&quot;}' onclick=\"pmApp.toggle(8)\">\n                            <div class=\"pm-color\" style=\"background: #FFF8DC\"><\/div>\n                            <div class=\"pm-name\">\u0625\u064a\u0644\u0646\u063a \u0625\u064a\u0644\u0646\u063a<\/div>\n                            <div class=\"pm-name-en\">Ylang Ylang<\/div>\n                            <div class=\"pm-price\">32 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"7\" data-cat=\"middle\" data-note='{&quot;id&quot;:&quot;7&quot;,&quot;name_ar&quot;:&quot;\\u0648\\u0631\\u062f\\u0629&quot;,&quot;name_en&quot;:&quot;Rose&quot;,&quot;category&quot;:&quot;middle&quot;,&quot;description_ar&quot;:&quot;\\u0643\\u0644\\u0627\\u0633\\u064a\\u0643\\u064a \\u0648\\u0631\\u0648\\u0645\\u0627\\u0646\\u0633\\u064a\\u060c \\u064a\\u0645\\u0646\\u062d \\u0623\\u0646\\u0648\\u062b\\u0629&quot;,&quot;color&quot;:&quot;#FFB6C1&quot;,&quot;intensity&quot;:&quot;10&quot;,&quot;price&quot;:&quot;40.00&quot;}' onclick=\"pmApp.toggle(7)\">\n                            <div class=\"pm-color\" style=\"background: #FFB6C1\"><\/div>\n                            <div class=\"pm-name\">\u0648\u0631\u062f\u0629<\/div>\n                            <div class=\"pm-name-en\">Rose<\/div>\n                            <div class=\"pm-price\">40 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"6\" data-cat=\"middle\" data-note='{&quot;id&quot;:&quot;6&quot;,&quot;name_ar&quot;:&quot;\\u064a\\u0627\\u0633\\u0645\\u064a\\u0646&quot;,&quot;name_en&quot;:&quot;Jasmine&quot;,&quot;category&quot;:&quot;middle&quot;,&quot;description_ar&quot;:&quot;\\u0632\\u0647\\u0631\\u064a \\u063a\\u0646\\u064a\\u060c \\u064a\\u0636\\u0641\\u064a \\u0641\\u062e\\u0627\\u0645\\u0629&quot;,&quot;color&quot;:&quot;#FFFACD&quot;,&quot;intensity&quot;:&quot;9&quot;,&quot;price&quot;:&quot;35.00&quot;}' onclick=\"pmApp.toggle(6)\">\n                            <div class=\"pm-color\" style=\"background: #FFFACD\"><\/div>\n                            <div class=\"pm-name\">\u064a\u0627\u0633\u0645\u064a\u0646<\/div>\n                            <div class=\"pm-name-en\">Jasmine<\/div>\n                            <div class=\"pm-price\">35 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"1\" data-cat=\"top\" data-note='{&quot;id&quot;:&quot;1&quot;,&quot;name_ar&quot;:&quot;\\u0628\\u0631\\u063a\\u0645\\u0648\\u062a&quot;,&quot;name_en&quot;:&quot;Bergamot&quot;,&quot;category&quot;:&quot;top&quot;,&quot;description_ar&quot;:&quot;\\u0645\\u0646\\u0639\\u0634 \\u0648\\u062d\\u0645\\u0636\\u064a\\u060c \\u064a\\u0636\\u064a\\u0641 \\u0644\\u0645\\u0633\\u0629 \\u062d\\u064a\\u0648\\u064a\\u0629&quot;,&quot;color&quot;:&quot;#90EE90&quot;,&quot;intensity&quot;:&quot;8&quot;,&quot;price&quot;:&quot;15.00&quot;}' onclick=\"pmApp.toggle(1)\">\n                            <div class=\"pm-color\" style=\"background: #90EE90\"><\/div>\n                            <div class=\"pm-name\">\u0628\u0631\u063a\u0645\u0648\u062a<\/div>\n                            <div class=\"pm-name-en\">Bergamot<\/div>\n                            <div class=\"pm-price\">15 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"4\" data-cat=\"top\" data-note='{&quot;id&quot;:&quot;4&quot;,&quot;name_ar&quot;:&quot;\\u0644\\u0627\\u0641\\u0646\\u062f\\u0631&quot;,&quot;name_en&quot;:&quot;Lavender&quot;,&quot;category&quot;:&quot;top&quot;,&quot;description_ar&quot;:&quot;\\u0645\\u0647\\u062f\\u0626 \\u0648\\u0639\\u0637\\u0631\\u064a\\u060c \\u064a\\u0628\\u0639\\u062b \\u0627\\u0644\\u0627\\u0633\\u062a\\u0631\\u062e\\u0627\\u0621&quot;,&quot;color&quot;:&quot;#E6E6FA&quot;,&quot;intensity&quot;:&quot;6&quot;,&quot;price&quot;:&quot;18.00&quot;}' onclick=\"pmApp.toggle(4)\">\n                            <div class=\"pm-color\" style=\"background: #E6E6FA\"><\/div>\n                            <div class=\"pm-name\">\u0644\u0627\u0641\u0646\u062f\u0631<\/div>\n                            <div class=\"pm-name-en\">Lavender<\/div>\n                            <div class=\"pm-price\">18 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"2\" data-cat=\"top\" data-note='{&quot;id&quot;:&quot;2&quot;,&quot;name_ar&quot;:&quot;\\u0644\\u064a\\u0645\\u0648\\u0646&quot;,&quot;name_en&quot;:&quot;Lemon&quot;,&quot;category&quot;:&quot;top&quot;,&quot;description_ar&quot;:&quot;\\u0646\\u0642\\u064a \\u0648\\u062d\\u0627\\u062f\\u060c \\u064a\\u0645\\u0646\\u062d \\u0637\\u0627\\u0642\\u0629 \\u0641\\u0648\\u0631\\u064a\\u0629&quot;,&quot;color&quot;:&quot;#FFFF99&quot;,&quot;intensity&quot;:&quot;9&quot;,&quot;price&quot;:&quot;12.00&quot;}' onclick=\"pmApp.toggle(2)\">\n                            <div class=\"pm-color\" style=\"background: #FFFF99\"><\/div>\n                            <div class=\"pm-name\">\u0644\u064a\u0645\u0648\u0646<\/div>\n                            <div class=\"pm-name-en\">Lemon<\/div>\n                            <div class=\"pm-price\">12 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"3\" data-cat=\"top\" data-note='{&quot;id&quot;:&quot;3&quot;,&quot;name_ar&quot;:&quot;\\u0646\\u0639\\u0646\\u0627\\u0639&quot;,&quot;name_en&quot;:&quot;Mint&quot;,&quot;category&quot;:&quot;top&quot;,&quot;description_ar&quot;:&quot;\\u0628\\u0627\\u0631\\u062f \\u0648\\u0645\\u0646\\u0639\\u0634\\u060c \\u064a\\u0648\\u0642\\u0638 \\u0627\\u0644\\u062d\\u0648\\u0627\\u0633&quot;,&quot;color&quot;:&quot;#98FB98&quot;,&quot;intensity&quot;:&quot;7&quot;,&quot;price&quot;:&quot;10.00&quot;}' onclick=\"pmApp.toggle(3)\">\n                            <div class=\"pm-color\" style=\"background: #98FB98\"><\/div>\n                            <div class=\"pm-name\">\u0646\u0639\u0646\u0627\u0639<\/div>\n                            <div class=\"pm-name-en\">Mint<\/div>\n                            <div class=\"pm-price\">10 \u0631.\u0633<\/div>\n                        <\/div>\n                                                <div class=\"pm-note\" data-id=\"5\" data-cat=\"top\" data-note='{&quot;id&quot;:&quot;5&quot;,&quot;name_ar&quot;:&quot;\\u064a\\u0648\\u0633\\u0641\\u064a&quot;,&quot;name_en&quot;:&quot;Mandarin&quot;,&quot;category&quot;:&quot;top&quot;,&quot;description_ar&quot;:&quot;\\u062d\\u0644\\u0648 \\u0648\\u0641\\u0627\\u0643\\u0647\\u064a\\u060c \\u064a\\u0636\\u0641\\u064a \\u0628\\u0647\\u062c\\u0629&quot;,&quot;color&quot;:&quot;#FFA500&quot;,&quot;intensity&quot;:&quot;7&quot;,&quot;price&quot;:&quot;14.00&quot;}' onclick=\"pmApp.toggle(5)\">\n                            <div class=\"pm-color\" style=\"background: #FFA500\"><\/div>\n                            <div class=\"pm-name\">\u064a\u0648\u0633\u0641\u064a<\/div>\n                            <div class=\"pm-name-en\">Mandarin<\/div>\n                            <div class=\"pm-price\">14 \u0631.\u0633<\/div>\n                        <\/div>\n                                            <\/div>\n                <\/div>\n                \n                <div class=\"pm-bottle\">\n                    <div class=\"pm-bottle-box\">\n                        <h3 style=\"text-align: center; color: #9333ea; margin: 0 0 20px 0;\">\u0632\u062c\u0627\u062c\u0629 \u0639\u0637\u0631\u0643<\/h3>\n                        <div class=\"pm-bottle-canvas\">\n                            <svg class=\"pm-bottle-svg\" viewbox=\"0 0 200 350\">\n                                <rect x=\"70\" y=\"10\" width=\"60\" height=\"30\" rx=\"5\" fill=\"#d4d4d8\"\/>\n                                <path d=\"M 80 50 L 75 80 L 125 80 L 120 50 Z\" fill=\"#f3f4f6\"\/>\n                                <rect x=\"40\" y=\"80\" width=\"120\" height=\"250\" rx=\"15\" fill=\"rgba(255,255,255,0.5)\" stroke=\"#9ca3af\" stroke-width=\"3\"\/>\n                                <g id=\"pm-layers\"><\/g>\n                                <ellipse cx=\"60\" cy=\"150\" rx=\"15\" ry=\"60\" fill=\"rgba(255,255,255,0.3)\"\/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"pm-suggestions\" id=\"pm-suggest\" style=\"display: none;\">\n                        <h3>\ud83d\udca1 \u0627\u0642\u062a\u0631\u0627\u062d\u0627\u062a \u0630\u0643\u064a\u0629<\/h3>\n                        <div id=\"pm-suggest-list\"><\/div>\n                    <\/div>\n                    \n                    <div class=\"pm-result\" id=\"pm-result\" style=\"display: none;\">\n                        <h3>\u2728 \u062a\u0631\u0643\u064a\u0628\u062a\u0643 \u062c\u0627\u0647\u0632\u0629<\/h3>\n                        <div id=\"pm-char\" class=\"pm-result-char\"><\/div>\n                        <div id=\"pm-price\" class=\"pm-result-price\"><\/div>\n                        <button class=\"pm-btn\" onclick=\"pmApp.addCart()\">\ud83d\uded2 \u0623\u0636\u0641 \u0644\u0644\u0633\u0644\u0629<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <script>\n        const pmApp = {\n            selected: [],\n            notes: {},\n            \n            init: function() {\n                document.querySelectorAll('.pm-note').forEach(el => {\n                    const n = JSON.parse(el.dataset.note);\n                    this.notes[n.id] = n;\n                });\n            },\n            \n            filter: function(cat, e) {\n                document.querySelectorAll('.pm-tab').forEach(t => t.classList.remove('active'));\n                e.target.classList.add('active');\n                document.querySelectorAll('.pm-note').forEach(el => {\n                    el.style.display = el.dataset.cat === cat ? 'block' : 'none';\n                });\n            },\n            \n            toggle: function(id) {\n                const n = this.notes[id];\n                const idx = this.selected.findIndex(s => s.id == id);\n                const el = document.querySelector(`[data-id=\"${id}\"]`);\n                \n                if (idx > -1) {\n                    this.selected.splice(idx, 1);\n                    el.classList.remove('selected');\n                } else {\n                    if (this.selected.length >= 8) {\n                        alert('\u26a0\ufe0f \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649 8 \u0646\u0648\u062a\u0627\u062a');\n                        return;\n                    }\n                    this.selected.push(n);\n                    el.classList.add('selected');\n                }\n                \n                this.updateBottle();\n                this.updateSuggestions();\n                this.updateResult();\n            },\n            \n            updateBottle: function() {\n                const layers = document.getElementById('pm-layers');\n                layers.innerHTML = '';\n                \n                if (this.selected.length === 0) return;\n                \n                const h = 200 \/ this.selected.length;\n                this.selected.forEach((n, i) => {\n                    const y = 120 + (i * h);\n                    const rect = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\n                    rect.setAttribute('x', '42');\n                    rect.setAttribute('y', y);\n                    rect.setAttribute('width', '116');\n                    rect.setAttribute('height', h + 2);\n                    rect.setAttribute('fill', n.color);\n                    rect.setAttribute('opacity', '0.8');\n                    layers.appendChild(rect);\n                });\n            },\n            \n            updateSuggestions: function() {\n                const panel = document.getElementById('pm-suggest');\n                const list = document.getElementById('pm-suggest-list');\n                \n                if (this.selected.length === 0) {\n                    panel.style.display = 'none';\n                    return;\n                }\n                \n                panel.style.display = 'block';\n                \n                const cats = {top: 0, middle: 0, base: 0};\n                this.selected.forEach(n => cats[n.category]++);\n                \n                const sugg = [];\n                \n                if (cats.base === 0) {\n                    const base = Object.values(this.notes).filter(n => n.category === 'base' && !this.selected.find(s => s.id == n.id));\n                    if (base[0]) sugg.push({...base[0], reason: '\u064a\u062b\u0628\u062a \u0627\u0644\u0639\u0637\u0631 \u0644\u0641\u062a\u0631\u0629 \u0623\u0637\u0648\u0644'});\n                }\n                \n                if (cats.middle === 0) {\n                    const mid = Object.values(this.notes).filter(n => n.category === 'middle' && !this.selected.find(s => s.id == n.id));\n                    if (mid[0]) sugg.push({...mid[0], reason: '\u064a\u0636\u064a\u0641 \u0639\u0645\u0642 \u0644\u0642\u0644\u0628 \u0627\u0644\u0639\u0637\u0631'});\n                }\n                \n                if (cats.top < 2) {\n                    const top = Object.values(this.notes).filter(n => n.category === 'top' && !this.selected.find(s => s.id == n.id));\n                    if (top[0]) sugg.push({...top[0], reason: '\u0627\u0646\u0637\u0628\u0627\u0639 \u0623\u0648\u0644 \u0642\u0648\u064a'});\n                }\n                \n                list.innerHTML = sugg.slice(0, 3).map(s => `\n                    <div class=\"pm-suggest-item\" onclick=\"pmApp.toggle(${s.id})\">\n                        <div class=\"pm-suggest-color\" style=\"background: ${s.color}\"><\/div>\n                        <div>\n                            <div class=\"pm-suggest-name\">${s.name_ar}<\/div>\n                            <div class=\"pm-suggest-reason\">${s.reason}<\/div>\n                        <\/div>\n                    <\/div>\n                `).join('');\n            },\n            \n            updateResult: function() {\n                const panel = document.getElementById('pm-result');\n                \n                if (this.selected.length === 0) {\n                    panel.style.display = 'none';\n                    return;\n                }\n                \n                panel.style.display = 'block';\n                \n                const total = this.selected.reduce((sum, n) => sum + parseFloat(n.price), 0);\n                const cats = {top: 0, middle: 0, base: 0};\n                this.selected.forEach(n => cats[n.category]++);\n                \n                let char = '';\n                if (cats.base >= 2) char = '\u0639\u0637\u0631 \u0634\u0631\u0642\u064a \u0641\u0627\u062e\u0631';\n                else if (cats.middle >= 2) char = '\u0639\u0637\u0631 \u0632\u0647\u0631\u064a \u0631\u0648\u0645\u0627\u0646\u0633\u064a';\n                else if (cats.top >= 3) char = '\u0639\u0637\u0631 \u0645\u0646\u0639\u0634 \u0648\u062d\u064a\u0648\u064a';\n                else char = '\u062a\u0631\u0643\u064a\u0628\u0629 \u0645\u062a\u0648\u0627\u0632\u0646\u0629';\n                \n                document.getElementById('pm-char').textContent = char;\n                document.getElementById('pm-price').textContent = total.toFixed(0) + ' \u0631.\u0633';\n            },\n            \n            addCart: function() {\n                if (this.selected.length < 3) {\n                    alert('\u26a0\ufe0f \u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u062e\u062a\u064a\u0627\u0631 3 \u0646\u0648\u062a\u0627\u062a \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0644');\n                    return;\n                }\n                \n                const total = this.selected.reduce((sum, n) => sum + parseFloat(n.price), 0);\n                const names = this.selected.map(n => n.name_ar).join(', ');\n                \n                alert('\u2705 \u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u062a\u0631\u0643\u064a\u0628\u0629 \u0644\u0644\u0633\u0644\u0629!\\n\\n\u0627\u0644\u0646\u0648\u062a\u0627\u062a: ' + names + '\\n\u0627\u0644\u0633\u0639\u0631: ' + total.toFixed(0) + ' \u0631.\u0633\\n\\n\u0633\u064a\u062a\u0645 \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u0631\u0628\u0637 \u0645\u0639 WooCommerce \u0642\u0631\u064a\u0628\u0627\u064b.');\n            }\n        };\n        \n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', () => pmApp.init());\n        } else {\n            pmApp.init();\n        }\n        <\/script>\n    <\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-770","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/souqperfuem.com\/en\/wp-json\/wp\/v2\/pages\/770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/souqperfuem.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/souqperfuem.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/souqperfuem.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/souqperfuem.com\/en\/wp-json\/wp\/v2\/comments?post=770"}],"version-history":[{"count":0,"href":"https:\/\/souqperfuem.com\/en\/wp-json\/wp\/v2\/pages\/770\/revisions"}],"wp:attachment":[{"href":"https:\/\/souqperfuem.com\/en\/wp-json\/wp\/v2\/media?parent=770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}