{"id":4309,"date":"2025-07-02T17:58:50","date_gmt":"2025-07-02T17:58:50","guid":{"rendered":"https:\/\/mirramorcare.com\/?page_id=4309"},"modified":"2025-12-19T16:30:36","modified_gmt":"2025-12-19T16:30:36","slug":"skin-type-quiz","status":"publish","type":"page","link":"https:\/\/mirramorcare.com\/ar\/skin-type-quiz\/","title":{"rendered":"skin-type-quiz"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4309\" class=\"elementor elementor-4309\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8d1bcf1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8d1bcf1\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9336fd3\" data-id=\"9336fd3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3aa0690 elementor-widget elementor-widget-html\" data-id=\"3aa0690\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>\u0627\u062e\u062a\u0628\u0627\u0631 \u0628\u0634\u0631\u0629 Mirramor Care Premium<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  :root {\r\n    --primary-color: #e91e63; \/* \u0644\u0648\u0646 \u0627\u0644\u0628\u0631\u0627\u0646\u062f *\/\r\n    --primary-soft: rgba(233, 30, 99, 0.08);\r\n    --secondary-text: #636e72;\r\n    --dark-text: #2d3436;\r\n    --bg-gradient: linear-gradient(135deg, #fff5f7 0%, #ffe3ed 100%);\r\n    --card-shadow: 0 20px 40px rgba(233, 30, 99, 0.1);\r\n    --hover-shadow: 0 15px 30px rgba(233, 30, 99, 0.15);\r\n    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n  }\r\n\r\n  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\r\n  body {\r\n    font-family: 'Tajawal', sans-serif;\r\n    background: var(--bg-gradient);\r\n    margin: 0;\r\n    min-height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px;\r\n    color: var(--dark-text);\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u062c\u0645\u0627\u0644\u064a\u0629 *\/\r\n  .bg-decor {\r\n    position: fixed;\r\n    top: -10%; right: -10%;\r\n    width: 50%; height: 50%;\r\n    background: radial-gradient(circle, rgba(233,30,99,0.05) 0%, transparent 60%);\r\n    z-index: -1; pointer-events: none;\r\n  }\r\n\r\n  \/* \u0627\u0644\u0643\u0648\u0646\u062a\u064a\u0646\u0631 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\r\n  .quiz-card {\r\n    background: #ffffff;\r\n    width: 100%;\r\n    max-width: 520px;\r\n    border-radius: 24px;\r\n    box-shadow: var(--card-shadow);\r\n    padding: 40px 30px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: height 0.4s ease;\r\n  }\r\n\r\n  \/* \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0642\u062f\u0645 \u0627\u0644\u0639\u0644\u0648\u064a *\/\r\n  .top-progress-bar {\r\n    position: absolute;\r\n    top: 0; left: 0;\r\n    width: 100%;\r\n    height: 6px;\r\n    background: #f0f0f0;\r\n  }\r\n  .top-progress-fill {\r\n    height: 100%;\r\n    width: 25%;\r\n    background: linear-gradient(90deg, var(--primary-color), #ff80ab);\r\n    transition: width 0.5s ease;\r\n    box-shadow: 0 2px 10px rgba(233, 30, 99, 0.3);\r\n  }\r\n\r\n  \/* \u0627\u0644\u0647\u064a\u062f\u0631 *\/\r\n  .step-counter {\r\n    font-size: 13px;\r\n    color: var(--primary-color);\r\n    font-weight: 700;\r\n    letter-spacing: 1px;\r\n    margin-bottom: 10px;\r\n    display: block;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  h2.question-title {\r\n    font-size: 22px;\r\n    line-height: 1.4;\r\n    margin: 0 0 30px 0;\r\n    font-weight: 800;\r\n  }\r\n\r\n  \/* \u0643\u0631\u0648\u062a \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a *\/\r\n  .options-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n  }\r\n\r\n  .option-item {\r\n    background: #fff;\r\n    border: 2px solid #f5f5f5;\r\n    padding: 18px 22px;\r\n    border-radius: 18px;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    transition: var(--transition-smooth);\r\n    position: relative;\r\n  }\r\n\r\n  .option-item:hover {\r\n    border-color: var(--primary-color);\r\n    background: var(--primary-soft);\r\n    transform: translateY(-3px);\r\n    box-shadow: var(--hover-shadow);\r\n  }\r\n\r\n  .option-item.selected {\r\n    border-color: var(--primary-color);\r\n    background: #fff; \/* Keep white background but strong border *\/\r\n    box-shadow: 0 0 0 2px var(--primary-color) inset; \/* Inner border effect *\/\r\n  }\r\n\r\n  .opt-content {\r\n    display: flex;\r\n    align-items: center;\r\n    font-weight: 500;\r\n    font-size: 16px;\r\n  }\r\n  .opt-icon {\r\n    font-size: 24px;\r\n    margin-left: 15px;\r\n    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\r\n  }\r\n\r\n  \/* \u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u062a\u0637\u0648\u0631\u0629 *\/\r\n  .select-box {\r\n    width: 24px; height: 24px;\r\n    border: 2px solid #ddd;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: var(--transition-smooth);\r\n    color: transparent;\r\n  }\r\n  \r\n  .option-item:hover .select-box { border-color: var(--primary-color); }\r\n\r\n  .option-item.selected .select-box {\r\n    border-color: var(--primary-color);\r\n    background: var(--primary-color);\r\n    color: white;\r\n    animation: checkmarkPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n  }\r\n  @keyframes checkmarkPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }\r\n\r\n  \/* \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u062a\u0646\u0642\u0644 *\/\r\n  .nav-actions { margin-top: 30px; display: flex; }\r\n  .back-link {\r\n    background: none; border: none;\r\n    color: #999;\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    padding: 10px 0;\r\n    display: flex; align-items: center; gap: 8px;\r\n    transition: color 0.3s;\r\n  }\r\n  .back-link:hover { color: var(--dark-text); }\r\n\r\n  \/* \u0627\u0644\u062d\u0631\u0643\u0627\u062a (Animations) *\/\r\n  .step-view { display: none; }\r\n  .step-view.active {\r\n    display: block;\r\n    animation: fadeInUp 0.5s ease forwards;\r\n  }\r\n\r\n  \/* \u062d\u0631\u0643\u0629 \u0638\u0647\u0648\u0631 \u0645\u062a\u062a\u0627\u0644\u064a\u0629 \u0644\u0644\u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a *\/\r\n  .option-item { opacity: 0; animation: fadeInUp 0.5s ease forwards; }\r\n  .option-item:nth-child(1) { animation-delay: 0.1s; }\r\n  .option-item:nth-child(2) { animation-delay: 0.2s; }\r\n  .option-item:nth-child(3) { animation-delay: 0.3s; }\r\n  .option-item:nth-child(4) { animation-delay: 0.4s; }\r\n\r\n  @keyframes fadeInUp {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  \/* \u0634\u0627\u0634\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 *\/\r\n  #analyzing-view { display: none; text-align: center; padding: 40px 0; }\r\n  .pulse-icon {\r\n    font-size: 50px; margin-bottom: 20px; display: inline-block;\r\n    animation: pulse 1.5s infinite; color: var(--primary-color);\r\n  }\r\n  @keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.7; } }\r\n\r\n  \/* \u0634\u0627\u0634\u0629 \u0627\u0644\u0646\u062a\u064a\u062c\u0629 *\/\r\n  #result-view { display: none; text-align: center; padding: 20px 0; animation: fadeInUp 0.6s ease; }\r\n  .result-emoji { font-size: 64px; margin-bottom: 15px; display: block; animation: float 3s ease-in-out infinite; }\r\n  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\r\n\r\n  .main-cta-btn {\r\n    background: var(--primary-color); color: white;\r\n    width: 100%; padding: 18px; border: none;\r\n    border-radius: 16px; font-family: inherit;\r\n    font-size: 18px; font-weight: 700; cursor: pointer;\r\n    margin-top: 30px;\r\n    box-shadow: 0 10px 30px rgba(233, 30, 99, 0.3);\r\n    transition: all 0.3s;\r\n  }\r\n  .main-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(233, 30, 99, 0.4); }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"bg-decor\"><\/div>\r\n\r\n<div class=\"quiz-card\">\r\n  <div class=\"top-progress-bar\">\r\n    <div class=\"top-progress-fill\" id=\"progressBar\"><\/div>\r\n  <\/div>\r\n\r\n  <div id=\"quiz-content\">\r\n    \r\n    <div class=\"step-view active\" id=\"step1\">\r\n      <span class=\"step-counter\">\u0627\u0644\u062e\u0637\u0648\u0629 1 \u0645\u0646 4<\/span>\r\n      <h2 class=\"question-title\">\u0628\u0639\u062f \u0645\u0627 \u062a\u063a\u0633\u0644\u064a \u0648\u0634\u0643 \u0628\u0627\u0644\u0645\u064a\u0627\u0647 \u0628\u0633.. \u0628\u062a\u062d\u0633\u064a \u0628\u0634\u0631\u062a\u0643 \u0639\u0627\u0645\u0644\u0629 \u0625\u0632\u0627\u064a\u061f \ud83d\udebf<\/h2>\r\n      <div class=\"options-list\">\r\n        <label class=\"option-item\" onclick=\"handleSelection(1, 'dry', this)\">\r\n          <div class=\"opt-content\"><span class=\"opt-icon\">\ud83c\udf35<\/span> \u0645\u0634\u062f\u0648\u062f\u0629 \u0648\u0646\u0627\u0634\u0641\u0629 \u062c\u062f\u0627\u064b<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q1\" value=\"dry\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"handleSelection(1, 'oily', this)\">\r\n          <div class=\"opt-content\"><span class=\"opt-icon\">\u2728<\/span> \u0628\u062a\u0644\u0645\u0639 \u0648\u0645\u062f\u0647\u0646\u0646\u0629<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q1\" value=\"oily\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"handleSelection(1, 'normal', this)\">\r\n          <div class=\"opt-content\"><span class=\"opt-icon\">\ud83c\udf38<\/span> \u0637\u0628\u064a\u0639\u064a\u0629 \u0648\u0645\u0631\u062a\u0627\u062d\u0629<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q1\" value=\"normal\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"handleSelection(1, 'combo', this)\">\r\n          <div class=\"opt-content\"><span class=\"opt-icon\">\ud83c\udf17<\/span> \u062d\u062a\u0629 \u0646\u0627\u0634\u0641\u0629 \u0648\u062d\u062a\u0629 \u0628\u062a\u0644\u0645\u0639<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q1\" value=\"combo\" hidden>\r\n        <\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"step-view\" id=\"step2\">\r\n      <span class=\"step-counter\">\u0627\u0644\u062e\u0637\u0648\u0629 2 \u0645\u0646 4<\/span>\r\n      <h2 class=\"question-title\">\u0628\u062a\u0644\u0627\u062d\u0638\u064a \u0644\u0645\u0639\u0627\u0646 \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u062c\u0628\u0647\u0629 \u0648\u0627\u0644\u0623\u0646\u0641 (T-Zone)\u061f \ud83d\udc43<\/h2>\r\n      <div class=\"options-list\">\r\n        <label class=\"option-item\" onclick=\"handleSelection(2, 'rarely', this)\">\r\n          <div class=\"opt-content\">\u0646\u0627\u062f\u0631\u064b\u0627 \u0645\u0627 \u0628\u064a\u062d\u0635\u0644<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q2\" value=\"rarely\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"handleSelection(2, 'often', this)\">\r\n          <div class=\"opt-content\">\u0633\u0627\u0639\u0627\u062a \u0623\u0647 \u0648\u0633\u0627\u0639\u0627\u062a \u0644\u0623<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q2\" value=\"often\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"handleSelection(2, 'always', this)\">\r\n          <div class=\"opt-content\">\u062f\u0627\u064a\u0645\u064b\u0627 \u0628\u062a\u0644\u0645\u0639 \u0648\u0628\u0634\u0643\u0644 \u0648\u0627\u0636\u062d<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q2\" value=\"always\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"handleSelection(2, 'never', this)\">\r\n          <div class=\"opt-content\">\u0639\u0645\u0631\u0647\u0627 \u0645\u0627 \u0644\u0645\u0639\u062a (\u0645\u0637\u0641\u064a\u0629)<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q2\" value=\"never\" hidden>\r\n        <\/label>\r\n      <\/div>\r\n      <div class=\"nav-actions\">\r\n        <button class=\"back-link\" onclick=\"navigateStep(-1)\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"\/><\/svg>\r\n          \u0631\u062c\u0648\u0639\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"step-view\" id=\"step3\">\r\n       <span class=\"step-counter\">\u0627\u0644\u062e\u0637\u0648\u0629 3 \u0645\u0646 4<\/span>\r\n      <h2 class=\"question-title\">\u0647\u0644 \u0628\u064a\u0638\u0647\u0631 \u0642\u0634\u0648\u0631 \u0628\u064a\u0636\u0627\u0621 \u0623\u0648 \u062c\u0641\u0627\u0641 \u0641\u064a \u062e\u062f\u0648\u062f\u0643\u061f \u2744\ufe0f<\/h2>\r\n      <div class=\"options-list\">\r\n        <label class=\"option-item\" onclick=\"handleSelection(3, 'yes', this)\">\r\n          <div class=\"opt-content\">\u0623\u064a\u0648\u0647\u060c \u0643\u062a\u064a\u0631<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q3\" value=\"yes\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"handleSelection(3, 'sometimes', this)\">\r\n          <div class=\"opt-content\">\u0623\u062d\u064a\u0627\u0646\u064b\u0627 \u0641\u064a \u0627\u0644\u0634\u062a\u0627 \u0628\u0633<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q3\" value=\"sometimes\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"handleSelection(3, 'no', this)\">\r\n          <div class=\"opt-content\">\u0644\u0623\u060c \u0645\u0641\u064a\u0634 \u0642\u0634\u0648\u0631 \u062e\u0627\u0644\u0635<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q3\" value=\"no\" hidden>\r\n        <\/label>\r\n      <\/div>\r\n      <div class=\"nav-actions\">\r\n         <button class=\"back-link\" onclick=\"navigateStep(-1)\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"\/><\/svg>\r\n          \u0631\u062c\u0648\u0639\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"step-view\" id=\"step4\">\r\n      <span class=\"step-counter\">\u0627\u0644\u062e\u0637\u0648\u0629 4 \u0645\u0646 4<\/span>\r\n      <h2 class=\"question-title\">\u0627\u0644\u0645\u0633\u0627\u0645 \u0641\u064a \u0648\u0634\u0643 \u0634\u0643\u0644\u0647\u0627 \u0625\u064a\u0647\u061f \ud83d\udd0d<\/h2>\r\n      <div class=\"options-list\">\r\n        <label class=\"option-item\" onclick=\"finalizeQuiz('yes', this)\">\r\n          <div class=\"opt-content\">\u0648\u0627\u0633\u0639\u0629 \u0648\u0648\u0627\u0636\u062d\u0629 \u062c\u062f\u0627\u064b<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q4\" value=\"yes\" hidden>\r\n        <\/label>\r\n        <label class=\"option-item\" onclick=\"finalizeQuiz('no', this)\">\r\n          <div class=\"opt-content\">\u0636\u064a\u0642\u0629 \u0648\u0645\u0634 \u0628\u0627\u064a\u0646\u0629<\/div>\r\n          <div class=\"select-box\"><i class=\"check-icon\">\u2713<\/i><\/div>\r\n          <input type=\"radio\" name=\"q4\" value=\"no\" hidden>\r\n        <\/label>\r\n      <\/div>\r\n      <div class=\"nav-actions\">\r\n         <button class=\"back-link\" onclick=\"navigateStep(-1)\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"\/><\/svg>\r\n          \u0631\u062c\u0648\u0639\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div> <div id=\"analyzing-view\">\r\n    <div class=\"pulse-icon\">\ud83e\udde0<\/div>\r\n    <h2 style=\"margin-bottom: 10px;\">\u062c\u0627\u0631\u064a \u062a\u062d\u0644\u064a\u0644 \u0646\u0648\u0639 \u0628\u0634\u0631\u062a\u0643...<\/h2>\r\n    <p style=\"color: var(--secondary-text);\">\u0630\u0643\u0627\u0621 Mirramor \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0628\u064a\u062e\u062a\u0627\u0631 \u0627\u0644\u0631\u0648\u062a\u064a\u0646 \u0627\u0644\u0623\u0645\u062b\u0644 \u0644\u064a\u0643\u064a<\/p>\r\n  <\/div>\r\n\r\n  <div id=\"result-view\">\r\n    <span class=\"result-emoji\" id=\"resIcon\">\u2728<\/span>\r\n    <h3 style=\"color:var(--secondary-text); margin:0; font-weight:600; font-size: 18px;\">\u0646\u062a\u064a\u062c\u0629 \u062a\u062d\u0644\u064a\u0644\u0643:<\/h3>\r\n    <h1 id=\"resType\" style=\"color:var(--primary-color); font-size:38px; margin:15px 0; font-weight: 800;\"><\/h1>\r\n    <p style=\"color:var(--secondary-text); line-height:1.7; font-size: 17px; max-width: 90%; margin: 0 auto;\">\r\n      \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0625\u062c\u0627\u0628\u0627\u062a\u0643\u060c \u0625\u062d\u0646\u0627 \u0639\u0631\u0641\u0646\u0627 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0628\u0634\u0631\u062a\u0643 \u0628\u0627\u0644\u0638\u0628\u0637 \u0648\u062c\u0647\u0632\u0646\u0627\u0644\u0643 \u0627\u0644\u0631\u0648\u062a\u064a\u0646 \u0627\u0644\u0644\u064a \u0647\u064a\u0641\u0631\u0642 \u0645\u0639\u0627\u0643\u064a \u062c\u062f\u0627\u064b.\r\n    <\/p>\r\n    \r\n    <button id=\"ctaBtn\" class=\"main-cta-btn\">\u0634\u0648\u0641\u064a \u0627\u0644\u0631\u0648\u062a\u064a\u0646 \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0644\u064a\u0643\u064a<\/button>\r\n    \r\n    <div style=\"margin-top:25px;\">\r\n      <a href=\"javascript:location.reload()\" style=\"color:#999; text-decoration:none; font-size:14px; border-bottom: 1px dotted #999;\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  let currentStep = 1;\r\n  const totalSteps = 4;\r\n  const progressBar = document.getElementById('progressBar');\r\n\r\n  function updateProgress() {\r\n    progressBar.style.width = (currentStep \/ totalSteps) * 100 + '%';\r\n  }\r\n\r\n  function navigateStep(direction) {\r\n    document.getElementById('step' + currentStep).classList.remove('active');\r\n    currentStep += direction;\r\n    document.getElementById('step' + currentStep).classList.add('active');\r\n    updateProgress();\r\n  }\r\n\r\n  \/\/ Handle normal step selection\r\n  function handleSelection(step, value, element) {\r\n    highlightSelected(element);\r\n    \/\/ Delay movement for ux\r\n    setTimeout(() => {\r\n      navigateStep(1);\r\n    }, 500); \r\n  }\r\n\r\n  \/\/ Handle last step selection\r\n  function finalizeQuiz(val, element) {\r\n    highlightSelected(element);\r\n    \r\n    setTimeout(() => {\r\n      document.getElementById('quiz-content').style.display = 'none';\r\n      document.getElementById('analyzing-view').style.display = 'block';\r\n      \r\n      \/\/ Simulate calculation time\r\n      setTimeout(showFinalResult, 2500);\r\n    }, 500);\r\n  }\r\n\r\n  \/\/ Helper for visual selection\r\n  function highlightSelected(element) {\r\n    const parent = element.parentElement;\r\n    parent.querySelectorAll('.option-item').forEach(el => el.classList.remove('selected'));\r\n    element.classList.add('selected');\r\n    element.querySelector('input').checked = true;\r\n  }\r\n\r\n  function showFinalResult() {\r\n    document.getElementById('analyzing-view').style.display = 'none';\r\n    document.getElementById('result-view').style.display = 'block';\r\n\r\n    const q1 = document.querySelector('input[name=\"q1\"]:checked')?.value;\r\n    const q2 = document.querySelector('input[name=\"q2\"]:checked')?.value;\r\n    const q3 = document.querySelector('input[name=\"q3\"]:checked')?.value;\r\n    const q4 = document.querySelector('input[name=\"q4\"]:checked')?.value;\r\n\r\n    let type = \"\u0628\u0634\u0631\u0629 \u0639\u0627\u062f\u064a\u0629\";\r\n    let icon = \"\ud83c\udf38\";\r\n    let url = \"https:\/\/mirramorcare.com\";\r\n\r\n    \/\/ Logic\r\n    if (q1 === \"oily\" || q2 === \"always\" || (q4 === \"yes\" && q3 === \"no\")) {\r\n      type = \"\u0628\u0634\u0631\u0629 \u062f\u0647\u0646\u064a\u0629\";\r\n      icon = \"\u2728\";\r\n      url = \"https:\/\/mirramorcare.com\/%d8%a8%d8%b4%d8%b1%d8%a9-%d8%af%d9%87%d9%86%d9%8a%d8%a9\/\";\r\n    } else if (q1 === \"dry\" || q3 === \"yes\") {\r\n      type = \"\u0628\u0634\u0631\u0629 \u062c\u0627\u0641\u0629\";\r\n      icon = \"\ud83c\udf35\";\r\n      url = \"https:\/\/mirramorcare.com\/%d8%a8%d8%b4%d8%b1%d8%a9-%d8%ac%d8%a7%d9%81%d8%a9\/\";\r\n    } else if (q1 === \"combo\") {\r\n      type = \"\u0628\u0634\u0631\u0629 \u0645\u062e\u062a\u0644\u0637\u0629\";\r\n      icon = \"\ud83c\udf17\";\r\n      url = \"https:\/\/mirramorcare.com\/%d8%a8%d8%b4%d8%b1%d8%a9-%d9%85%d8%ae%d8%aa%d9%84%d8%b7%d8%a9\/\";\r\n    }\r\n\r\n    document.getElementById('resType').innerText = type;\r\n    document.getElementById('resIcon').innerText = icon;\r\n    document.getElementById('ctaBtn').onclick = () => window.location.href = url;\r\n  }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u062e\u062a\u0628\u0627\u0631 \u0628\u0634\u0631\u0629 Mirramor Care Premium \u0627\u0644\u062e\u0637\u0648\u0629 1 \u0645\u0646 4 \u0628\u0639\u062f \u0645\u0627 \u062a\u063a\u0633\u0644\u064a \u0648\u0634\u0643 \u0628\u0627\u0644\u0645\u064a\u0627\u0647 \u0628\u0633.. \u0628\u062a\u062d\u0633\u064a \u0628\u0634\u0631\u062a\u0643 \u0639\u0627\u0645\u0644\u0629 \u0625\u0632\u0627\u064a\u061f \ud83d\udebf \ud83c\udf35 \u0645\u0634\u062f\u0648\u062f\u0629 \u0648\u0646\u0627\u0634\u0641\u0629 \u062c\u062f\u0627\u064b \u2713 \u2728 \u0628\u062a\u0644\u0645\u0639 \u0648\u0645\u062f\u0647\u0646\u0646\u0629 \u2713 \ud83c\udf38 \u0637\u0628\u064a\u0639\u064a\u0629 \u0648\u0645\u0631\u062a\u0627\u062d\u0629 \u2713 \ud83c\udf17 \u062d\u062a\u0629 \u0646\u0627\u0634\u0641\u0629 \u0648\u062d\u062a\u0629 \u0628\u062a\u0644\u0645\u0639 \u2713 \u0627\u0644\u062e\u0637\u0648\u0629 2 \u0645\u0646 4 \u0628\u062a\u0644\u0627\u062d\u0638\u064a \u0644\u0645\u0639\u0627\u0646 \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u062c\u0628\u0647\u0629 \u0648\u0627\u0644\u0623\u0646\u0641 (T-Zone)\u061f \ud83d\udc43 \u0646\u0627\u062f\u0631\u064b\u0627 \u0645\u0627 \u0628\u064a\u062d\u0635\u0644 \u2713 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4309","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>skin-type-quiz - mirramorcare<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mirramorcare.com\/ar\/skin-type-quiz\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"skin-type-quiz - mirramorcare\" \/>\n<meta property=\"og:description\" content=\"\u0627\u062e\u062a\u0628\u0627\u0631 \u0628\u0634\u0631\u0629 Mirramor Care Premium \u0627\u0644\u062e\u0637\u0648\u0629 1 \u0645\u0646 4 \u0628\u0639\u062f \u0645\u0627 \u062a\u063a\u0633\u0644\u064a \u0648\u0634\u0643 \u0628\u0627\u0644\u0645\u064a\u0627\u0647 \u0628\u0633.. \u0628\u062a\u062d\u0633\u064a \u0628\u0634\u0631\u062a\u0643 \u0639\u0627\u0645\u0644\u0629 \u0625\u0632\u0627\u064a\u061f \ud83d\udebf \ud83c\udf35 \u0645\u0634\u062f\u0648\u062f\u0629 \u0648\u0646\u0627\u0634\u0641\u0629 \u062c\u062f\u0627\u064b \u2713 \u2728 \u0628\u062a\u0644\u0645\u0639 \u0648\u0645\u062f\u0647\u0646\u0646\u0629 \u2713 \ud83c\udf38 \u0637\u0628\u064a\u0639\u064a\u0629 \u0648\u0645\u0631\u062a\u0627\u062d\u0629 \u2713 \ud83c\udf17 \u062d\u062a\u0629 \u0646\u0627\u0634\u0641\u0629 \u0648\u062d\u062a\u0629 \u0628\u062a\u0644\u0645\u0639 \u2713 \u0627\u0644\u062e\u0637\u0648\u0629 2 \u0645\u0646 4 \u0628\u062a\u0644\u0627\u062d\u0638\u064a \u0644\u0645\u0639\u0627\u0646 \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u062c\u0628\u0647\u0629 \u0648\u0627\u0644\u0623\u0646\u0641 (T-Zone)\u061f \ud83d\udc43 \u0646\u0627\u062f\u0631\u064b\u0627 \u0645\u0627 \u0628\u064a\u062d\u0635\u0644 \u2713 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mirramorcare.com\/ar\/skin-type-quiz\/\" \/>\n<meta property=\"og:site_name\" content=\"mirramorcare\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mirramorcare.eg\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-19T16:30:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mirramorcare.com\/wp-content\/uploads\/2023\/09\/Layer-fdfdfcopy-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"320\" \/>\n\t<meta property=\"og:image:height\" content=\"320\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@mirramorcare\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/skin-type-quiz\\\/\",\"url\":\"https:\\\/\\\/mirramorcare.com\\\/skin-type-quiz\\\/\",\"name\":\"skin-type-quiz - mirramorcare\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/#website\"},\"datePublished\":\"2025-07-02T17:58:50+00:00\",\"dateModified\":\"2025-12-19T16:30:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/skin-type-quiz\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mirramorcare.com\\\/skin-type-quiz\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/skin-type-quiz\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mirramorcare.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"skin-type-quiz\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/#website\",\"url\":\"https:\\\/\\\/mirramorcare.com\\\/\",\"name\":\"mirramorcare\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/#organization\"},\"alternateName\":\"repair pharma\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mirramorcare.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/#organization\",\"name\":\"repair pharma\",\"url\":\"https:\\\/\\\/mirramorcare.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mirramorcare.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/iuouoiu.png\",\"contentUrl\":\"https:\\\/\\\/mirramorcare.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/iuouoiu.png\",\"width\":730,\"height\":617,\"caption\":\"repair pharma\"},\"image\":{\"@id\":\"https:\\\/\\\/mirramorcare.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/mirramorcare.eg\",\"https:\\\/\\\/x.com\\\/mirramorcare\",\"https:\\\/\\\/www.instagram.com\\\/mirramorcare\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"skin-type-quiz - mirramorcare","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mirramorcare.com\/ar\/skin-type-quiz\/","og_locale":"ar_AR","og_type":"article","og_title":"skin-type-quiz - mirramorcare","og_description":"\u0627\u062e\u062a\u0628\u0627\u0631 \u0628\u0634\u0631\u0629 Mirramor Care Premium \u0627\u0644\u062e\u0637\u0648\u0629 1 \u0645\u0646 4 \u0628\u0639\u062f \u0645\u0627 \u062a\u063a\u0633\u0644\u064a \u0648\u0634\u0643 \u0628\u0627\u0644\u0645\u064a\u0627\u0647 \u0628\u0633.. \u0628\u062a\u062d\u0633\u064a \u0628\u0634\u0631\u062a\u0643 \u0639\u0627\u0645\u0644\u0629 \u0625\u0632\u0627\u064a\u061f \ud83d\udebf \ud83c\udf35 \u0645\u0634\u062f\u0648\u062f\u0629 \u0648\u0646\u0627\u0634\u0641\u0629 \u062c\u062f\u0627\u064b \u2713 \u2728 \u0628\u062a\u0644\u0645\u0639 \u0648\u0645\u062f\u0647\u0646\u0646\u0629 \u2713 \ud83c\udf38 \u0637\u0628\u064a\u0639\u064a\u0629 \u0648\u0645\u0631\u062a\u0627\u062d\u0629 \u2713 \ud83c\udf17 \u062d\u062a\u0629 \u0646\u0627\u0634\u0641\u0629 \u0648\u062d\u062a\u0629 \u0628\u062a\u0644\u0645\u0639 \u2713 \u0627\u0644\u062e\u0637\u0648\u0629 2 \u0645\u0646 4 \u0628\u062a\u0644\u0627\u062d\u0638\u064a \u0644\u0645\u0639\u0627\u0646 \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u062c\u0628\u0647\u0629 \u0648\u0627\u0644\u0623\u0646\u0641 (T-Zone)\u061f \ud83d\udc43 \u0646\u0627\u062f\u0631\u064b\u0627 \u0645\u0627 \u0628\u064a\u062d\u0635\u0644 \u2713 [&hellip;]","og_url":"https:\/\/mirramorcare.com\/ar\/skin-type-quiz\/","og_site_name":"mirramorcare","article_publisher":"https:\/\/www.facebook.com\/mirramorcare.eg","article_modified_time":"2025-12-19T16:30:36+00:00","og_image":[{"width":320,"height":320,"url":"https:\/\/mirramorcare.com\/wp-content\/uploads\/2023\/09\/Layer-fdfdfcopy-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@mirramorcare","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mirramorcare.com\/skin-type-quiz\/","url":"https:\/\/mirramorcare.com\/skin-type-quiz\/","name":"skin-type-quiz - mirramorcare","isPartOf":{"@id":"https:\/\/mirramorcare.com\/#website"},"datePublished":"2025-07-02T17:58:50+00:00","dateModified":"2025-12-19T16:30:36+00:00","breadcrumb":{"@id":"https:\/\/mirramorcare.com\/skin-type-quiz\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mirramorcare.com\/skin-type-quiz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mirramorcare.com\/skin-type-quiz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mirramorcare.com\/"},{"@type":"ListItem","position":2,"name":"skin-type-quiz"}]},{"@type":"WebSite","@id":"https:\/\/mirramorcare.com\/#website","url":"https:\/\/mirramorcare.com\/","name":"\u0645\u064a\u0631\u0627\u0645\u0648\u0631\u0643\u064a\u0631","description":"","publisher":{"@id":"https:\/\/mirramorcare.com\/#organization"},"alternateName":"repair pharma","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mirramorcare.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/mirramorcare.com\/#organization","name":"repair pharma","url":"https:\/\/mirramorcare.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/mirramorcare.com\/#\/schema\/logo\/image\/","url":"https:\/\/mirramorcare.com\/wp-content\/uploads\/2023\/08\/iuouoiu.png","contentUrl":"https:\/\/mirramorcare.com\/wp-content\/uploads\/2023\/08\/iuouoiu.png","width":730,"height":617,"caption":"repair pharma"},"image":{"@id":"https:\/\/mirramorcare.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/mirramorcare.eg","https:\/\/x.com\/mirramorcare","https:\/\/www.instagram.com\/mirramorcare\/"]}]}},"_links":{"self":[{"href":"https:\/\/mirramorcare.com\/ar\/wp-json\/wp\/v2\/pages\/4309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mirramorcare.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mirramorcare.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mirramorcare.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mirramorcare.com\/ar\/wp-json\/wp\/v2\/comments?post=4309"}],"version-history":[{"count":31,"href":"https:\/\/mirramorcare.com\/ar\/wp-json\/wp\/v2\/pages\/4309\/revisions"}],"predecessor-version":[{"id":4796,"href":"https:\/\/mirramorcare.com\/ar\/wp-json\/wp\/v2\/pages\/4309\/revisions\/4796"}],"wp:attachment":[{"href":"https:\/\/mirramorcare.com\/ar\/wp-json\/wp\/v2\/media?parent=4309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}