{"id":335,"date":"2025-11-13T12:28:26","date_gmt":"2025-11-13T12:28:26","guid":{"rendered":"https:\/\/loopakw.com\/ar-e\/?page_id=335"},"modified":"2025-11-13T12:28:26","modified_gmt":"2025-11-13T12:28:26","slug":"what-suites-my-kid","status":"publish","type":"page","link":"https:\/\/loopakw.com\/ar\/what-suites-my-kid\/","title":{"rendered":""},"content":{"rendered":"<div class=\"vce-row-container\"><div class=\"vce-row vce-row--col-gap-30 side-space what-suites-section b-space vce-row-equal-height vce-row-content--top\" data-vce-full-width=\"true\" data-vce-stretch-content=\"true\" id=\"el-226c1a5e\" data-vce-do-apply=\"all el-226c1a5e\"><div class=\"vce-content-background-container\"><\/div><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-bafe23ca\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-bafe23ca\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-bafe23ca\"><div class=\"vce-shortcode\"><div class=\"vce-shortcode-wrapper vce\" id=\"el-e024464c\" data-vce-do-apply=\"all el-e024464c\"><style>\r\n    .what-suites-section {\r\n        padding-top: 30px;\r\n    }\r\n\r\n    .retake-quiz-btn button::before {\r\n        filter: invert(0) !important;\r\n    }\r\n\r\n    .add-to-cart-btn button::before {\r\n        filter: invert(1) !important;\r\n    }\r\n\r\n    .quiz-section p {\r\n        font-weight: 500 !important;\r\n    }\r\n\r\n    .quiz-section .web-btn button:hover,\r\n    .quiz-section .web-btn button {\r\n        color: #fff !important;\r\n    }\r\n\r\n    .quiz-section .web-btn button::before {\r\n        filter: invert(0) !important;\r\n    }\r\n\r\n    .quiz-section .web-btn button:hover {\r\n        background-color: #c8e7fb !important;\r\n        background: #c8e7fb !important;\r\n        color: #000 !important;\r\n    }\r\n\r\n    .quiz-section .web-btn button:hover:before {\r\n        filter: invert(1) !important;\r\n    }\r\n\r\n    @media(max-width:768px) {\r\n        .what-suites-section .web-btn button:before {\r\n            right: 25px !important;\r\n        }\r\n\r\n        h3.quiz-section-ttl.text-center.mb-4 {\r\n            margin-bottom: 15px !important;\r\n        }\r\n    }\r\n\r\n    .quiz-section {\r\n        background-color: #C8E7FB;\r\n        padding: 30px 40px;\r\n        border-radius: 20px;\r\n        position: relative;\r\n    }\r\n\r\n    \/*.web-btn button {*\/\r\n    \/*    background: #DEAAF4 !important;*\/\r\n    \/*    border: 1px solid var(--coral-red) !important;*\/\r\n    \/*    padding: 15px 70px 15px 35px !important;*\/\r\n    \/*    font-family: Fredoka !important;*\/\r\n    \/*    font-size: 16px;*\/\r\n    \/*    line-height: 20px;*\/\r\n    \/*    letter-spacing: -0.04%;*\/\r\n    \/*    text-transform: capitalize !important;*\/\r\n    \/*    color: #1A1A1A !important;*\/\r\n    \/*    font-weight: 600 !important;*\/\r\n    \/*background-color:var(--coral-red) !important;*\/\r\n    \/*\tbackground:var(--coral-red) !important;*\/\r\n    \/*border:none !important;*\/\r\n    \/*}*\/\r\n    \/*.web-btn button:hover{*\/\r\n    \/*     border: 1px solid var(--bg-blue)!important*\/\r\n    \/*}*\/\r\n    \/*.web-btn button:before {*\/\r\n    \/*    right: 40px !important;*\/\r\n    \/*}*\/\r\n    .quiz-section .web-btn button:hover {\r\n        background: #fff !important;\r\n        color: var(--bg-black) !important;\r\n    }\r\n\r\n    .quiz-section::before,\r\n    .quiz-section::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        background-size: cover;\r\n        background-position: center;\r\n        z-index: 0;\r\n        filter: brightness(0) saturate(100%) invert(35%) sepia(27%) saturate(6655%) hue-rotate(335deg) brightness(85%) contrast(92%);\r\n    }\r\n\r\n    .quiz-section::before {\r\n        bottom: 30px;\r\n        left: 0;\r\n        width: 28px;\r\n        height: 100px;\r\n        background-image: url(\"\/wp-content\/uploads\/2025\/11\/quiz-section-before.svg\");\r\n        filter: brightness(0) saturate(100%) invert(77%) sepia(29%) saturate(322%) hue-rotate(119deg) brightness(89%) contrast(96%);\r\n    }\r\n\r\n    .quiz-section::after {\r\n        top: 30px;\r\n        right: 0;\r\n        width: 35px;\r\n        height: 100px;\r\n        background-image: url(\"\/wp-content\/uploads\/2025\/11\/quiz-section-after.svg\");\r\n    }\r\n\r\n    .quiz-section-js {\r\n        display: none;\r\n    }\r\n\r\n    .quiz-section-js.active {\r\n        display: block;\r\n    }\r\n\r\n    .my-kid-main-img {\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .my-kid-main-img img {\r\n        border-radius: 20px;\r\n        width: 100%;\r\n        height: 518px;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .quiz-section-ttl {\r\n        font-family: Borel !important;\r\n        font-size: 32px !important;\r\n        line-height: 100% !important;\r\n    }\r\n\r\n    .quiz-section-sub-ttl {\r\n        font-weight: 600 !important;\r\n        margin-bottom: 15px !important;\r\n    }\r\n\r\n    .progress-container {\r\n        padding: 15px 0;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        align-items: center;\r\n        gap: 10px;\r\n\r\n    }\r\n\r\n    #section6.active~.progress-container {\r\n        display: none !important;\r\n    }\r\n\r\n\r\n    .completion-text {\r\n        text-align: start;\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        color: #6c757d;\r\n        margin-top: 10px;\r\n        margin-bottom: 0;\r\n        width: 100%;\r\n    }\r\n\r\n    .progress {\r\n        height: 15px;\r\n        border-radius: 15px;\r\n        background-color: #F5CCC6 !important;\r\n        width: calc(100% - 95px);\r\n    }\r\n\r\n    .progress-bar {\r\n        background-color: #D13742;\r\n        border-radius: 15px;\r\n    }\r\n\r\n    .stepBtn button {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border-radius: 50%;\r\n        height: 40px !important;\r\n        width: 40px !important;\r\n        padding: 0 !important;\r\n        background: transparent;\r\n        border: 1px solid var(--bg-black) !important;\r\n        color: var(--bg-black) !important;\r\n        transition: all 0.3s ease-in-out;\r\n    }\r\n\r\n    .step-btn:disabled {\r\n        background: #cccccc !important;\r\n        border-color: #cccccc !important;\r\n        cursor: not-allowed;\r\n        opacity: 0.6;\r\n    }\r\n\r\n    .step-btn:disabled:hover {\r\n        background: #cccccc !important;\r\n        border-color: #cccccc !important;\r\n    }\r\n\r\n    .step-btn i {\r\n        color: var(--bg-black);\r\n        font-size: 16px;\r\n    }\r\n\r\n    .step-btn:hover i,\r\n    .step-btn:focus i {\r\n        color: white;\r\n    }\r\n\r\n    .step-btn:disabled i {\r\n        color: #666666;\r\n    }\r\n\r\n    .stepBtn button:hover,\r\n    .stepBtn button:focus {\r\n        background: var(--bg-black) !important;\r\n        border-color: var(--bg-black) !important;\r\n        color: #fff !important;\r\n    }\r\n\r\n    .stepBtn {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 5px;\r\n        width: 85px;\r\n    }\r\n\r\n    .option-card {\r\n        transition: all 0.2s;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .option-card label {\r\n        cursor: pointer;\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    \/* Hide default radio *\/\r\n    .option-card input[type=\"radio\"] {\r\n        appearance: none;\r\n        -webkit-appearance: none;\r\n        width: 20px;\r\n        height: 20px;\r\n        border: 2px solid var(--coral-red);\r\n        border-radius: 50%;\r\n        display: inline-block;\r\n        position: relative;\r\n        cursor: pointer;\r\n        margin: 0;\r\n        vertical-align: middle;\r\n        background: var(--white-color);\r\n        transition: 0.3s ease;\r\n        padding: 3px;\r\n    }\r\n\r\n    \/* When checked *\/\r\n    .option-card input[type=\"radio\"]:checked {\r\n        border-color: var(--coral-red);\r\n    }\r\n\r\n    \/* Inner filled circle *\/\r\n    .option-card input[type=\"radio\"]:checked::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        width: 10px;\r\n        \/* inner fill size *\/\r\n        height: 10px;\r\n        background: var(--coral-red);\r\n        border-radius: 50%;\r\n        transform: translate(-50%, -50%);\r\n    }\r\n\r\n    .where-wearing-card {\r\n        position: relative;\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .where-wearing-ctnt p {\r\n        margin-bottom: 0 !important;\r\n    }\r\n\r\n    .where-wearing-ctnt {\r\n        position: absolute;\r\n        bottom: 0;\r\n        z-index: 1;\r\n        left: 0;\r\n        right: 0;\r\n        margin-inline: auto;\r\n        text-align: center;\r\n        padding: 15px;\r\n    }\r\n\r\n    .where-wearing-card::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 70px;\r\n        background: linear-gradient(179.87deg, rgba(222, 170, 244, 0) 3.37%, rgba(222, 170, 244, 0.73993) 51.55%, var(--bg-purple) 96.63%);\r\n        bottom: 0;\r\n        background-repeat: no-repeat;\r\n        background-size: cover;\r\n        left: 0px;\r\n        right: 0;\r\n        border-bottom-left-radius: 8px;\r\n        border-bottom-right-radius: 8px;\r\n        margin-inline: auto;\r\n        z-index: 0;\r\n    }\r\n\r\n    .where-wearing-card img {\r\n        width: 100%;\r\n        height: 130px;\r\n        object-fit: cover;\r\n        border-radius: 10px;\r\n    }\r\n\r\n    .colors-box {\r\n        width: 30px;\r\n        height: 30px;\r\n        border-radius: 100%;\r\n    }\r\n\r\n    .colors-box-outer {\r\n        border: 1px solid #A0A0A059;\r\n        border-radius: 100%;\r\n        padding: 5px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .colors-box-outer.active {\r\n        border: 1px solid var(--coral-red);\r\n    }\r\n\r\n    .final-product-card {\r\n        background-color: var(--white-color);\r\n        box-shadow: 2px 4px 8px 0px var(--text-color) 29;\r\n        border-radius: 15px;\r\n        padding: 15px;\r\n        height: 100%;\r\n    }\r\n\r\n    .final-prod-img {\r\n        height: 234px\r\n    }\r\n\r\n    .final-prod-img img {\r\n        border-radius: 10px;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n    .final-prod-price {\r\n        color: var(--text-color);\r\n        margin: 0 !important;\r\n    }\r\n\r\n    .final-prod-name {\r\n        margin: 0 !important;\r\n    }\r\n\r\n    .final-prod-ctnt {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n        align-items: center;\r\n        margin-top: 15px;\r\n    }\r\n\r\n    .cart-btn {\r\n        background: var(--bg-black) !important;\r\n        padding: 14px 57px 14px 25px !important;\r\n        border-radius: 6px;\r\n        color: var(--white-color);\r\n        border: 1px solid var(--bg-black) !important;\r\n        position: relative;\r\n        font-weight: 400;\r\n    }\r\n\r\n    .cart-btn:hover {\r\n        background: var(--bg-blue) !important;\r\n        border: 1px solid var(--bg-blue) !important;\r\n        color: var(--text-color) !important;\r\n    }\r\n\r\n    .cart-btn:hover:before {\r\n        filter: brightness(0) saturate(100%) invert(7%) sepia(11%) saturate(28%) hue-rotate(314deg) brightness(102%) contrast(93%);\r\n    }\r\n\r\n    .cart-btn:before {\r\n        background-image: url(\/wp-content\/uploads\/2025\/11\/fi-rs-shopping-cart.svg);\r\n        background-repeat: no-repeat;\r\n        background-size: contain;\r\n        content: \"\";\r\n        height: 24px;\r\n        position: absolute;\r\n        right: 25px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 24px;\r\n    }\r\n\r\n    .retake-quiz-btn button {\r\n        padding: 14px 25px 14px 25px !important;\r\n        color: #fff !important;\r\n        text-align: center;\r\n    }\r\n\r\n    .retake-quiz-btn img {\r\n        height: 20px;\r\n        width: 20px;\r\n        margin-right: 10px;\r\n        object-fit: contain;\r\n    }\r\n\r\n    .retake-quiz-btn button:before,\r\n    .add-to-cart-btn button:before {\r\n        display: none;\r\n    }\r\n\r\n    .retake-quiz-btn button img {\r\n        filter: invert(1) brightness(5);\r\n    }\r\n\r\n    .retake-quiz-btn button:hover img {\r\n        filter: none !important;\r\n    }\r\n\r\n    \/*.retake-quiz-btn button::before {*\/\r\n    \/*    background-image: url(\/wp-content\/uploads\/2025\/11\/round-arrow.svg);*\/\r\n    \/*    right: unset;*\/\r\n    \/*    left: 25px;*\/\r\n    \/*}*\/\r\n\r\n    .add-to-cart-btn button {\r\n        color: #fff !important;\r\n        padding: 14px 25px 14px 25px !important;\r\n        text-align: center;\r\n    }\r\n\r\n    .add-to-cart-btn button:hover {\r\n        color: var(--text-color) !important;\r\n    }\r\n\r\n    .action-btn .add-to-cart-btn button img {\r\n        filter: invert(1) brightness(5) !important;\r\n    }\r\n\r\n    .add-to-cart-btn button:hover img {\r\n        filter: none !important;\r\n    }\r\n\r\n    .action-btn .add-to-cart-btn img {\r\n        height: 20px !important;\r\n        width: 20px !important;\r\n        margin-left: 5px !important;\r\n        object-fit: contain;\r\n        filter: none !important;\r\n    }\r\n\r\n    \/*.add-to-cart-btn button::before {*\/\r\n    \/*    background-image: url(\/wp-content\/uploads\/2025\/11\/fi-rs-shopping-cart.svg);*\/\r\n    \/*    filter: brightness(0) saturate(100%) invert(7%) sepia(11%) saturate(28%) hue-rotate(314deg) brightness(102%) contrast(93%);*\/\r\n    \/*}*\/\r\n\r\n    .where-wearing-checkbox,\r\n    .eye-style-checkbox {\r\n        position: absolute;\r\n        left: 15px;\r\n        top: 15px;\r\n        width: 30px;\r\n        height: 30px;\r\n        appearance: none;\r\n        -webkit-appearance: none;\r\n        background-color: var(--white-color);\r\n        border: 2px solid var(--bg-purple);\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.2s ease;\r\n        z-index: 2;\r\n    }\r\n\r\n    .where-wearing-checkbox:checked,\r\n    .eye-style-checkbox:checked {\r\n        background-color: var(--bg-purple);\r\n        border-color: var(--bg-purple);\r\n    }\r\n\r\n    .where-wearing-checkbox:checked::before,\r\n    .eye-style-checkbox:checked::before {\r\n        content: \"\";\r\n        color: white;\r\n        font-size: 18px;\r\n        font-weight: bold;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n    }\r\n\r\n    p.price.text-center {\r\n        color: #416CC1 !important;\r\n        font-family: Fredoka;\r\n        font-weight: 400 !important;\r\n        font-size: 16px;\r\n        line-height: 100%;\r\n        letter-spacing: 0%;\r\n        text-align: center;\r\n        text-transform: capitalize !important;\r\n        margin-bottom: 10px !important;\r\n    }\r\n\r\n    .where-wearing-checkbox:hover,\r\n    .eye-style-checkbox:hover {\r\n        border-color: var(--bg-purple);\r\n        box-shadow: 0 0 5px rgba(255, 151, 78, 0.5);\r\n    }\r\n\r\n    .checkbox-card.selected .where-wearing-checkbox,\r\n    .checkbox-card.selected .eye-style-checkbox {\r\n        background-color: var(--bg-purple);\r\n        border-color: var(--bg-purple);\r\n    }\r\n\r\n    .checkbox-card.selected .where-wearing-checkbox::before,\r\n    .checkbox-card.selected .eye-style-checkbox::before {\r\n        content: \"\\2713\";\r\n        color: white;\r\n        font-size: 18px;\r\n        font-weight: bold;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n    }\r\n\r\n\r\n    \/* Full Screen Loader *\/\r\n    .fullscreen-loader {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(255, 255, 255, 0.95);\r\n        display: none;\r\n        justify-content: center;\r\n        align-items: center;\r\n        z-index: 9999;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .fullscreen-loader.active {\r\n        display: flex;\r\n    }\r\n\r\n    .loader-spinner {\r\n        width: 50px;\r\n        height: 50px;\r\n        border: 5px solid #f3f3f3;\r\n        border-top: 5px solid var(--coral-red);\r\n        border-radius: 50%;\r\n        animation: spin 1s linear infinite;\r\n    }\r\n\r\n    .loader-text {\r\n        margin-top: 20px;\r\n        font-family: 'Fredoka', sans-serif;\r\n        color: var(--text-color);\r\n        font-size: 18px;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .web-btn.add-to-cart-btn {\r\n        width: fit-content;\r\n    }\r\n\r\n    @keyframes spin {\r\n        0% {\r\n            transform: rotate(0deg);\r\n        }\r\n\r\n        100% {\r\n            transform: rotate(360deg);\r\n        }\r\n    }\r\n\r\n    @media screen and (max-width:991px) {\r\n        .quiz-section {\r\n            padding: 30px 15px;\r\n        }\r\n\r\n        .progress {\r\n            height: 7px;\r\n        }\r\n    }\r\n\r\n    @media screen and (max-width:767px) {\r\n        .my-kid-main-img img {\r\n            height: 250px;\r\n        }\r\n\r\n        .where-wearing-checkbox,\r\n        .eye-style-checkbox {\r\n            width: 20px;\r\n            height: 20px;\r\n        }\r\n\r\n        h3.quiz-section-ttl.text-center.mb-4 {\r\n            margin-bottom: 40px !important;\r\n        }\r\n\r\n        .action-btn {\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n        }\r\n\r\n        .action-btn .web-btn,\r\n        .action-btn .web-btn button {\r\n            width: 100% !important;\r\n        }\r\n\r\n        .web-btn button:before {\r\n            height: 20px;\r\n            width: 20px;\r\n        }\r\n\r\n        .web-btn button {\r\n            padding: 7px 51px 7px 20px !important;\r\n        }\r\n\r\n        .colors-box {\r\n            width: 17px;\r\n            height: 17px;\r\n        }\r\n\r\n        .quiz-section-sub-ttl {\r\n            margin-bottom: 10px !important;\r\n        }\r\n\r\n        .quiz-section::before {\r\n            bottom: unset;\r\n            top: 225px;\r\n        }\r\n\r\n        .retake-quiz-btn button {\r\n            padding: 7px 20px 7px 55px !important;\r\n        }\r\n\r\n        .quiz-section-ttl {\r\n            margin-top: 35px !important;\r\n        }\r\n\r\n        .progress {\r\n            width: 100% !important;\r\n        }\r\n\r\n        .stepBtn {\r\n            width: 100% !important;\r\n            margin-top: 15px !important;\r\n        }\r\n\r\n        #resultsContainer .col-md-3.col-sm-6 {\r\n            \/* padding: 0; *\/\r\n            margin-bottom: 15px;\r\n        }\r\n    }\r\n\r\n    @media screen and (min-width:768px) and (max-width:991px) {\r\n        #resultsContainer .col-md-3.col-sm-6 {\r\n            width: 33% !important;\r\n            margin-bottom: 15px !important;\r\n        }\r\n    }\r\n\r\n    \/* arabic css *\/\r\n    .rtl .quiz-section-ar {\r\n        text-align: start !important;\r\n    }\r\n\r\n    .rtl .step-btn i {\r\n        transform: scale(-1) !important;\r\n    }\r\n\r\n    .product-card .product-item .price{\r\n        color: var(--bg-black) !important;\r\n        font-family: Manrope !important;\r\n        font-size: 16px!important;\r\n        font-weight: 400 !important;\r\n        line-height: 25px !important;\r\n        text-align: center !important;\r\n        text-transform: capitalize;\r\n    }\r\n<\/style>\r\n<section class=\"my-kid-section\">\r\n    <!-- Section 1: Welcome -->\r\n    <div class=\"quiz-section quiz-section-js active\" id=\"section1\">\r\n        <div class=\"row align-items-center\">\r\n            <div class=\"col-md-6 mb-md-0 mb-4\">\r\n                <div class=\"my-kid-main-img\">\r\n                    <img src=\"\/wp-content\/uploads\/2026\/06\/quiz-image-1.webp\" alt=\"\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"col-md-6\">\r\n                <h3 class=\"quiz-section-ttl text-center mb-4\">\r\n                    \u062f\u0639\u0648\u0646\u0627 \u0646\u062c\u062f \u0627\u0644\u062a\u0637\u0627\u0628\u0642 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0644\u0647\u0645!                <\/h3>\r\n\r\n                <p class=\"text-center mb-4\">\r\n                    \u0628\u0636\u0639 \u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a \u0633\u0631\u064a\u0639\u0629 \u062a\u0633\u0627\u0639\u062f\u0646\u0627 \u0639\u0644\u0649 \u0627\u0642\u062a\u0631\u0627\u062d \u0642\u0637\u0639 \u0633\u064a\u062d\u0628 \u0637\u0641\u0644\u0643 \u0627\u0631\u062a\u062f\u0627\u0621\u0647\u0627.                <\/p>\r\n\r\n                <div class=\"text-center web-btn\">\r\n                    <button onclick=\"nextSection(1)\">\r\n                        \u0627\u0628\u062f\u0623 \u0627\u0644\u062a\u0646\u0633\u064a\u0642                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Section 2: Tell Us about You kid -->\r\n    <div class=\"quiz-section quiz-section-js\" id=\"section2\">\r\n        <div class=\"row align-items-center g-xl-5 g-lg-4\">\r\n            <div class=\"col-md-6 mb-md-0 mb-4\">\r\n                <div class=\"my-kid-main-img\">\r\n                    <img src=\"\/wp-content\/uploads\/2026\/06\/quiz-image-2.webp\" alt=\"\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\">\r\n                <h3 class=\"quiz-section-ttl quiz-section-ar text-start mb-md-4 mb-3\">\r\n                    \u0623\u062e\u0628\u0631\u0646\u0627 \u0639\u0646 \u0637\u0641\u0644\u0643 \u0627\u0644\u0635\u063a\u064a\u0631                <\/h3>\r\n                <div class=\"row\">\r\n                    <div class=\"col-12\">\r\n                        <h5 class=\"quiz-section-sub-ttl\">\r\n                            \u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0639\u0645\u0631\u064a\u0629                        <\/h5>\r\n                    <\/div>\r\n                    <div class=\"col-12\">\r\n                        <div class=\"d-flex flex-wrap  gap-3\">\r\n                                                                <div class=\"option-card\" data-id=\"460\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age1\">\r\n                                        <label for=\"age1\">0-3 months<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"461\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age2\">\r\n                                        <label for=\"age2\">3-6 months<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"465\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age3\">\r\n                                        <label for=\"age3\">6-9 months<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"467\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age4\">\r\n                                        <label for=\"age4\">9-12 months<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"457\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age5\">\r\n                                        <label for=\"age5\">1-2 Years<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"458\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age6\">\r\n                                        <label for=\"age6\">2-3 Years<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"459\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age7\">\r\n                                        <label for=\"age7\">3-4 Years<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"462\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age8\">\r\n                                        <label for=\"age8\">4-5 Years<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"463\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age9\">\r\n                                        <label for=\"age9\">5-6 Years<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"464\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age10\">\r\n                                        <label for=\"age10\">6-7 Years<\/label>\r\n                                    <\/div>\r\n\r\n                                                                        <div class=\"option-card\" data-id=\"466\"\r\n                                        onclick=\"selectOption(this, 'age')\">\r\n                                        <input type=\"radio\" name=\"age\" id=\"age11\">\r\n                                        <label for=\"age11\">7-8 Years<\/label>\r\n                                    <\/div>\r\n\r\n                                    \r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row my-md-4 my-3\">\r\n                    <div class=\"col-12\">\r\n                        <h5 class=\"quiz-section-sub-ttl\">\r\n                            \u0627\u0644\u062c\u0646\u0633                        <\/h5>\r\n                    <\/div>\r\n                    <div class=\"col-12\">\r\n                        <div class=\"d-flex flex-wrap  gap-3\">\r\n                                                                <div class=\"option-card\" data-id=\"482\"\r\n                                        onclick=\"selectOption(this, 'gender')\">\r\n\r\n                                        <input type=\"radio\" name=\"gender\" id=\"gender1\">\r\n                                        <label for=\"gender1\">\r\n                                            Boys                                        <\/label>\r\n                                    <\/div>\r\n                                                                        <div class=\"option-card\" data-id=\"483\"\r\n                                        onclick=\"selectOption(this, 'gender')\">\r\n\r\n                                        <input type=\"radio\" name=\"gender\" id=\"gender2\">\r\n                                        <label for=\"gender2\">\r\n                                            Girls                                        <\/label>\r\n                                    <\/div>\r\n                                    \r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"web-btn\">\r\n\r\n                    <button onclick=\"validateAndNext(2)\">Next<\/button>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Section 3: Where will they be wearing it? -->\r\n    <div class=\"quiz-section quiz-section-js\" id=\"section3\">\r\n        <div class=\"row align-items-center g-xl-5 g-lg-4\">\r\n            <div class=\"col-md-6 mb-md-0 mb-4\">\r\n                <div class=\"my-kid-main-img\">\r\n                    <img src=\"\/wp-content\/uploads\/2026\/06\/where-to-wear-image.webp\" alt=\"\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\">\r\n                <h3 class=\"quiz-section-ttl quiz-section-ar text-start mb-md-4 mb-3\">\r\n                    \u0623\u064a\u0646 \u0633\u064a\u0631\u062a\u062f\u0648\u0646\u0647\u061f                <\/h3>\r\n\r\n                <p class=\"mb-4\">\r\n                    \u0627\u062e\u062a\u0631 \u062e\u064a\u0627\u0631\u064b\u0627 \u0623\u0648 \u062e\u064a\u0627\u0631\u064a\u0646 \u064a\u062a\u0646\u0627\u0633\u0628\u0627\u0646 \u0645\u0639 \u062e\u0637\u0637 \u0637\u0641\u0644\u0643 \u0627\u0644\u0642\u0627\u062f\u0645\u0629.                <\/p>\r\n                <div class=\"row g-md-4 g-2\">\r\n                                                <div class=\"col-6\">\r\n                                <div class=\"where-wearing-card option-card checkbox-card\"\r\n                                    data-id=\"470\" onclick=\"toggleOption(this)\">\r\n\r\n\r\n                                    <input type=\"checkbox\" class=\"where-wearing-checkbox\">\r\n\r\n                                                                            <img src=\"\/wp-content\/uploads\/2025\/11\/vacation-img.webp\" alt=\"Birthday\/Party\">\r\n                                    \r\n                                    <div class=\"where-wearing-ctnt\">\r\n                                        <p>Birthday\/Party<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                                                        <div class=\"col-6\">\r\n                                <div class=\"where-wearing-card option-card checkbox-card\"\r\n                                    data-id=\"468\" onclick=\"toggleOption(this)\">\r\n\r\n\r\n                                    <input type=\"checkbox\" class=\"where-wearing-checkbox\">\r\n\r\n                                                                            <img src=\"\/wp-content\/uploads\/2025\/11\/vacation-img.webp\" alt=\"Everyday \/ Casual\">\r\n                                    \r\n                                    <div class=\"where-wearing-ctnt\">\r\n                                        <p>Everyday \/ Casual<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                                                        <div class=\"col-6\">\r\n                                <div class=\"where-wearing-card option-card checkbox-card\"\r\n                                    data-id=\"469\" onclick=\"toggleOption(this)\">\r\n\r\n\r\n                                    <input type=\"checkbox\" class=\"where-wearing-checkbox\">\r\n\r\n                                                                            <img src=\"\/wp-content\/uploads\/2025\/11\/vacation-img.webp\" alt=\"Vacation \/ Beach\">\r\n                                    \r\n                                    <div class=\"where-wearing-ctnt\">\r\n                                        <p>Vacation \/ Beach<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                                                        <div class=\"col-6\">\r\n                                <div class=\"where-wearing-card option-card checkbox-card\"\r\n                                    data-id=\"471\" onclick=\"toggleOption(this)\">\r\n\r\n\r\n                                    <input type=\"checkbox\" class=\"where-wearing-checkbox\">\r\n\r\n                                                                            <img src=\"\/wp-content\/uploads\/2025\/11\/vacation-img.webp\" alt=\"Winter \/ Cozy\">\r\n                                    \r\n                                    <div class=\"where-wearing-ctnt\">\r\n                                        <p>Winter \/ Cozy<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            \r\n                <\/div>\r\n                <div class=\"web-btn mt-md-4 mt-3\">\r\n\r\n                    <button onclick=\"validateAndNext(3)\">Next<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Section 4: What colors or fabrics do you prefer? -->\r\n    <div class=\"quiz-section quiz-section-js\" id=\"section4\">\r\n        <div class=\"row align-items-center g-xl-5 g-lg-4\">\r\n            <div class=\"col-md-6 mb-md-0 mb-4\">\r\n                <div class=\"my-kid-main-img\">\r\n                    <img src=\"\/wp-content\/uploads\/2026\/06\/what-colors-image.webp\" alt=\"\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-6\">\r\n                <h3 class=\"quiz-section-ttl quiz-section-ar text-start mb-md-4 mb-3\">\r\n                    \u0645\u0627 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u062a\u064a \u064a\u0641\u0636\u0644\u0647\u0627 \u0637\u0641\u0644\u0643\u061f                <\/h3>\r\n                <div class=\"row my-md-4 my-3\">\r\n                    <div class=\"col-12\">\r\n                        <h5 class=\"quiz-section-sub-ttl\">\r\n                            \u0627\u0644\u0623\u0644\u0648\u0627\u0646                        <\/h5>\r\n                    <\/div>\r\n                    <div class=\"d-flex flex-wrap gap-2 align-items-center\">\r\n                                                        <div class=\"colors-box-outer\" data-id=\"543\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #2196f3;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"544\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #4caf50;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"545\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #f8f5f0;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"546\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #ff9800;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"547\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #98ff98;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"548\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #9c27b0;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"549\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #f44336;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"550\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #fa8072;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"551\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #ffffff;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                                                <div class=\"colors-box-outer\" data-id=\"552\"\r\n                                    onclick=\"selectColor(this)\">\r\n\r\n\r\n                                    <div class=\"colors-box\" style=\"background-color: #ffeb3b;\">\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n                                \r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"web-btn mt-md-4 mt-3\">\r\n                    <button onclick=\"validateAndNext(4)\">\r\n                        \u0627\u0644\u062a\u0627\u0644\u064a                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- Section 5: What Catches Their Eye -->\r\n    <div class=\"quiz-section quiz-section-js\" id=\"section5\">\r\n        <div class=\"row align-items-center g-xl-5 g-lg-4\">\r\n            <div class=\"col-md-6 mb-md-0 mb-4\">\r\n                <div class=\"my-kid-main-img\">\r\n                    <img src=\"\/wp-content\/uploads\/2026\/06\/Loopa-what-suits.webp\" alt=\"\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"col-md-6\">\r\n                <h3 class=\"quiz-section-ttl quiz-section-ar text-start mb-md-4 mb-3\">\r\n                    \u0645\u0627 \u0627\u0644\u0630\u064a \u064a\u062c\u0630\u0628 \u0627\u0646\u062a\u0628\u0627\u0647\u0647\u0645\u061f                <\/h3>\r\n\r\n                <p class=\"mb-4\">\r\n                    \u0628\u0639\u0636 \u0627\u0644\u0623\u0637\u0641\u0627\u0644 \u064a\u062d\u0628\u0648\u0646 \u0627\u0644\u0623\u0634\u0643\u0627\u0644 \u0627\u0644\u0628\u0633\u064a\u0637\u0629\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0646\u062c\u0630\u0628 \u0622\u062e\u0631\u0648\u0646 \u0625\u0644\u0649 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0631\u062d\u0629.                <\/p>\r\n\r\n                <div class=\"row g-md-4 g-2\">\r\n                                                <div class=\"col-6\">\r\n                                <div class=\"where-wearing-card option-card checkbox-card\"\r\n                                    data-id=\"487\"\r\n                                    data-slug=\"bright-pops-of-color\" onclick=\"toggleEyeOption(this)\">\r\n\r\n                                    <input type=\"checkbox\" class=\"eye-style-checkbox\">\r\n\r\n                                    <img src=\"\/wp-content\/uploads\/2026\/01\/bright.webp\" alt=\"Bright pops of color\">\r\n\r\n                                    <div class=\"where-wearing-ctnt\">\r\n                                        <p>Bright pops of color<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                                                    <div class=\"col-6\">\r\n                                <div class=\"where-wearing-card option-card checkbox-card\"\r\n                                    data-id=\"488\"\r\n                                    data-slug=\"fun-patterns-playful-details\" onclick=\"toggleEyeOption(this)\">\r\n\r\n                                    <input type=\"checkbox\" class=\"eye-style-checkbox\">\r\n\r\n                                    <img src=\"\/wp-content\/uploads\/2026\/01\/bright.webp\" alt=\"Fun Patterns &amp; Playful Details\">\r\n\r\n                                    <div class=\"where-wearing-ctnt\">\r\n                                        <p>Fun Patterns &amp; Playful Details<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                                                    <div class=\"col-6\">\r\n                                <div class=\"where-wearing-card option-card checkbox-card\"\r\n                                    data-id=\"489\"\r\n                                    data-slug=\"minimal-neutral\" onclick=\"toggleEyeOption(this)\">\r\n\r\n                                    <input type=\"checkbox\" class=\"eye-style-checkbox\">\r\n\r\n                                    <img src=\"\/wp-content\/uploads\/2026\/01\/bright.webp\" alt=\"Minimal &amp; neutral\">\r\n\r\n                                    <div class=\"where-wearing-ctnt\">\r\n                                        <p>Minimal &amp; neutral<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                                                    <div class=\"col-6\">\r\n                                <div class=\"where-wearing-card option-card checkbox-card\"\r\n                                    data-id=\"490\"\r\n                                    data-slug=\"soft-shapes-clean-lines\" onclick=\"toggleEyeOption(this)\">\r\n\r\n                                    <input type=\"checkbox\" class=\"eye-style-checkbox\">\r\n\r\n                                    <img src=\"\/wp-content\/uploads\/2026\/01\/bright.webp\" alt=\"Soft shapes &amp; clean lines\">\r\n\r\n                                    <div class=\"where-wearing-ctnt\">\r\n                                        <p>Soft shapes &amp; clean lines<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                                        <\/div>\r\n\r\n                <div class=\"web-btn mt-md-4 mt-3\">\r\n                    <button onclick=\"validateAndNext(5)\">\r\n                        \u0634\u0627\u0647\u062f \u0623\u0633\u0644\u0648\u0628 \u0637\u0641\u0644\u064a                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/section>\r\n<section class=\"final-prod-section quiz-section-js\" id=\"section6\">\r\n    <h3 class=\"quiz-section-ttl text-center mb-4\">\r\n        \u0647\u0630\u0627 \u0645\u0627 \u064a\u0646\u0627\u0633\u0628 \u0637\u0641\u0644\u0643 \u0623\u0643\u062b\u0631!    <\/h3>\r\n    <div class=\"row g-md-3 g-3\" id=\"resultsContainer\">\r\n        <!-- Results will be dynamically populated here -->\r\n    <\/div>\r\n    <div class=\"d-flex justify-content-between gap-3 mt-md-5 mt-3 action-btn\">\r\n        <div class=\"web-btn retake-quiz-btn\">\r\n            <button onclick=\"restartQuiz()\">\r\n                <img src=\"\/wp-content\/uploads\/2025\/12\/fi_3031285-1.svg\" alt=\"icon\" \/>\r\n                \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631            <\/button>\r\n        <\/div>\r\n        <div class=\"web-btn add-to-cart-btn\">\r\n            <button onclick=\"addAllToCart()\">\r\n                \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0643\u0644 \u0625\u0644\u0649 \u0627\u0644\u0633\u0644\u0629                (<span id=\"cartCount\">0<\/span>)\r\n                <img src=\"\/wp-content\/uploads\/2025\/12\/Vector-2.svg\" alt=\"icon\" \/>\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n<!-- Progress Bar -->\r\n<div class=\"progress-container\">\r\n    <div class=\"completion-text\">\r\n        \u066a0 \u0645\u0643\u062a\u0645\u0644    <\/div>\r\n    <div class=\"progress\">\r\n        <div class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"><\/div>\r\n    <\/div>\r\n    <div class=\"stepBtn\">\r\n        <button id=\"prevBtn\" class=\"step-btn prev-btn\" onclick=\"prevSection()\" disabled>\r\n            <i class=\"fa-solid fa-chevron-left\"><\/i>\r\n        <\/button>\r\n        <button id=\"nextBtn\" class=\"step-btn next-btn\" onclick=\"nextBtnClick()\">\r\n            <i class=\"fa-solid fa-chevron-right\"><\/i>\r\n        <\/button>\r\n    <\/div>\r\n<\/div>\r\n<!-- Full Screen Loader -->\r\n<div class=\"fullscreen-loader\" id=\"fullscreenLoader\">\r\n    <div class=\"loader-spinner\"><\/div>\r\n    <div class=\"loader-text\" id=\"loaderText\">\r\n        \u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644...    <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n    var lang = window.location.pathname.includes('\/ar\/') ? 'ar' : 'en';\r\n    let selections = {\r\n        age: null,\r\n        gender: null,\r\n        occasions: [],\r\n        color: null,\r\n        eye_styles: []\r\n    };\r\n\r\n    function showLoader(text = 'Loading...') {\r\n        document.getElementById('fullscreenLoader').classList.add('active');\r\n        document.getElementById('loaderText').textContent = text;\r\n    }\r\n\r\n    function hideLoader() {\r\n        document.getElementById('fullscreenLoader').classList.remove('active');\r\n    }\r\n\r\n    function prevSection() {\r\n        if (currentSection <= 1) return;\r\n\r\n        document.getElementById(`section${currentSection}`).classList.remove('active');\r\n        currentSection--;\r\n        document.getElementById(`section${currentSection}`).classList.add('active');\r\n\r\n        updateProgress();\r\n        scrollToTop();\r\n    }\r\n\r\n    let currentSection = 1;\r\n    const totalSections = 6;\r\n    let selectedColors = [];\r\n    let selectedProducts = [];\r\n    let cartItems = [];\r\n\r\n    \/\/ Initialize progress bar\r\n    updateProgress();\r\n\r\n    \/\/ Auto-scroll to top function\r\n    function scrollToTop() {\r\n        window.scrollTo({\r\n            top: 30,\r\n            behavior: 'smooth'\r\n        });\r\n    }\r\n\r\n    \/\/ Modified nextSection function\r\n    function nextSection(current) {\r\n        \/\/ Hide current section\r\n        document.getElementById(`section${current}`).classList.remove('active');\r\n\r\n        \/\/ Show next section\r\n        currentSection = current + 1;\r\n        document.getElementById(`section${currentSection}`).classList.add('active');\r\n\r\n        scrollToTop();\r\n\r\n        \/\/ Generate results if we reached section 5\r\n        if (currentSection === 6) {\r\n            generateResults();\r\n        }\r\n\r\n        updateProgress();\r\n    }\r\n    \/\/ Initialize button states on page load\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n        updateButtonStates();\r\n    });\r\n\r\n    function restartQuiz() {\r\n        \/\/ Reset all radio button selections\r\n        document.querySelectorAll('input[type=\"radio\"]').forEach(radio => {\r\n            radio.checked = false;\r\n        });\r\n\r\n        \/\/ Reset all checkbox selections\r\n        document.querySelectorAll('input[type=\"checkbox\"]').forEach(checkbox => {\r\n            checkbox.checked = false;\r\n        });\r\n\r\n        \/\/ Remove selected class from all option cards\r\n        document.querySelectorAll('.option-card.selected').forEach(el => {\r\n            el.classList.remove('selected');\r\n        });\r\n\r\n        \/\/ Remove selected class from all checkbox cards\r\n        document.querySelectorAll('.checkbox-card.selected').forEach(el => {\r\n            el.classList.remove('selected');\r\n        });\r\n\r\n        \/\/ Reset color selections\r\n        document.querySelectorAll('.colors-box-outer.active').forEach(el => {\r\n            el.classList.remove('active');\r\n        });\r\n        selections = {\r\n            age: null,\r\n            gender: null,\r\n            fabric: null,\r\n            occasions: [],\r\n            color: null,\r\n            eye_styles: []\r\n        };\r\n\r\n        \/\/ Reset all data arrays\r\n        selectedColors = [];\r\n        selectedProducts = [];\r\n        cartItems = [];\r\n        document.getElementById('cartCount').textContent = '0';\r\n\r\n        \/\/ Clear results container\r\n        document.getElementById('resultsContainer').innerHTML = '';\r\n\r\n        \/\/ Go back to first section\r\n        document.querySelectorAll('.quiz-section-js').forEach(section => {\r\n            section.classList.remove('active');\r\n        });\r\n\r\n        currentSection = 1;\r\n        document.getElementById('section1').classList.add('active');\r\n\r\n        \/\/ Scroll to top when restarting quiz\r\n        scrollToTop();\r\n\r\n        updateProgress();\r\n    }\r\n\r\n    function selectOption(element, type) {\r\n        const id = element.getAttribute('data-id');\r\n\r\n        const parent = element.parentElement;\r\n        parent.querySelectorAll('.option-card').forEach(el => {\r\n            el.classList.remove('selected');\r\n        });\r\n\r\n        element.classList.add('selected');\r\n        element.querySelector('input[type=\"radio\"]').checked = true;\r\n\r\n        selections[type] = id;\r\n    }\r\n\r\n    function toggleEyeOption(card) {\r\n\r\n        const id = card.getAttribute('data-id');\r\n        const slug = card.getAttribute('data-slug');\r\n        const checkbox = card.querySelector('input[type=\"checkbox\"]');\r\n        if (slug === 'im-not-sure-surprise-me') {\r\n\r\n            \/\/ Unselect all other eye cards\r\n            document.querySelectorAll('.eye-style-checkbox').forEach(cb => {\r\n                cb.checked = false;\r\n                cb.closest('.checkbox-card').classList.remove('selected');\r\n            });\r\n\r\n            \/\/ Toggle only surprise me\r\n            card.classList.add('selected');\r\n            checkbox.checked = true;\r\n\r\n            \/\/ IMPORTANT: keep eye_styles EMPTY\r\n            selections.eye_styles = [];\r\n\r\n            return;\r\n        }\r\n\r\n        const surpriseCard = document.querySelector(\r\n            '[data-slug=\"im-not-sure-surprise-me\"]'\r\n        );\r\n\r\n        if (surpriseCard) {\r\n            surpriseCard.classList.remove('selected');\r\n            surpriseCard.querySelector('input').checked = false;\r\n        }\r\n\r\n        \/\/ Toggle current card\r\n        card.classList.toggle('selected');\r\n        checkbox.checked = !checkbox.checked;\r\n\r\n        if (card.classList.contains('selected')) {\r\n            if (!selections.eye_styles.includes(id)) {\r\n                selections.eye_styles.push(id);\r\n            }\r\n        } else {\r\n            selections.eye_styles = selections.eye_styles.filter(v => v !== id);\r\n        }\r\n    }\r\n\r\n    function toggleOption(card) {\r\n        const id = card.getAttribute('data-id');\r\n        const checkbox = card.querySelector('input[type=\"checkbox\"]');\r\n\r\n        card.classList.toggle('selected');\r\n        checkbox.checked = !checkbox.checked;\r\n\r\n        if (card.classList.contains('selected')) {\r\n            selections.occasions.push(id);\r\n        } else {\r\n            selections.occasions = selections.occasions.filter(v => v !== id);\r\n        }\r\n    }\r\n\r\n\r\n    function selectColor(el) {\r\n        const id = el.getAttribute('data-id');\r\n\r\n        if (el.classList.contains('active')) {\r\n            el.classList.remove('active');\r\n            selectedColors = selectedColors.filter(c => c !== id);\r\n        } else {\r\n            el.classList.add('active');\r\n            selectedColors.push(id);\r\n        }\r\n\r\n        selections.color = selectedColors;\r\n    }\r\n\r\n\r\n    function updateProgress() {\r\n        const progressPercentage = ((currentSection - 1) \/ (totalSections - 1)) * 100;\r\n        document.querySelector('.progress-bar').style.width = `${progressPercentage}%`;\r\n        document.querySelector('.completion-text').textContent = `${Math.round(progressPercentage)}% Completed`;\r\n        updateButtonStates();\r\n    }\r\n    \/\/ Update button enabled\/disabled states\r\n    function updateButtonStates() {\r\n        const prevBtn = document.getElementById('prevBtn');\r\n        const nextBtn = document.getElementById('nextBtn');\r\n\r\n        \/\/ Previous button\r\n        if (currentSection === 1) {\r\n            prevBtn.disabled = true;\r\n            prevBtn.classList.add('disabled');\r\n        } else {\r\n            prevBtn.disabled = false;\r\n            prevBtn.classList.remove('disabled');\r\n        }\r\n\r\n        \/\/ Next button\r\n        if (currentSection === totalSections) {\r\n            nextBtn.disabled = true;\r\n            nextBtn.classList.add('disabled');\r\n            nextBtn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n        } else {\r\n            nextBtn.disabled = false;\r\n            nextBtn.classList.remove('disabled');\r\n            nextBtn.innerHTML = '<i class=\"fa-solid fa-chevron-right\"><\/i>';\r\n        }\r\n    }\r\n    \/\/ Next button click handler\r\n    function nextBtnClick() {\r\n        if (!validateCurrentSection()) return;\r\n\r\n        if (currentSection === totalSections) return;\r\n\r\n        nextSection(currentSection);\r\n    }\r\n\r\n    function validateAndNext(current) {\r\n        if (!validateCurrentSection()) {\r\n            return;\r\n        }\r\n        nextSection(current);\r\n    }\r\n    \/\/ Validate current section before moving forward\r\n    function validateCurrentSection() {\r\n        \/\/ SECTION 2 \u2192 Age + Gender\r\n        if (currentSection === 2) {\r\n            if (!selections.age || !selections.gender) {\r\n                alert(\r\n                    lang === 'ar'\r\n                        ? '\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u0643\u0644 \u0645\u0646 \u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0639\u0645\u0631\u064a\u0629 \u0648\u0627\u0644\u062c\u0646\u0633'\r\n                        : 'Please select both age group and gender'\r\n                );\r\n                return false;\r\n            }\r\n        }\r\n\r\n        \/\/ SECTION 3 \u2192 Occasion (MULTI)\r\n        else if (currentSection === 3) {\r\n            if (!selections.occasions || selections.occasions.length === 0) {\r\n                alert(lang === 'ar' ? '\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u0645\u0646\u0627\u0633\u0628\u0629 \u0648\u0627\u062d\u062f\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0644' : 'Please select at least one occasion');\r\n                return false;\r\n            }\r\n        }\r\n\r\n        \/\/ SECTION 4 \u2192 Fabric\r\n        else if (currentSection === 4) {\r\n            if (selectedColors.length < 3) {\r\n                alert(lang === 'ar'\r\n                    ? '\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 3 \u0623\u0644\u0648\u0627\u0646 \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0644'\r\n                    : 'Please select at least 3 colors');\r\n                return false;\r\n            }\r\n        } else if (currentSection === 5) {\r\n            const surpriseSelected = document.querySelector(\r\n                '[data-slug=\"im-not-sure-surprise-me\"].selected'\r\n            );\r\n\r\n            if (!surpriseSelected && selections.eye_styles.length === 0) {\r\n                alert(lang === 'ar' ? '\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u062a\u0641\u0636\u064a\u0644 \u0627\u0644\u0642\u0645\u0627\u0634' : 'Please select a fabric preference');\r\n                return false;\r\n            }\r\n        }\r\n\r\n\r\n        return true;\r\n    }\r\n\r\n    function generateResults(page = 1) {\r\n        showLoader(lang === 'ar' ? '\u062c\u0627\u0631\u064d \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629 \u0644\u0637\u0641\u0644\u0643...' : 'Finding perfect products for your kid...');\r\n        jQuery.ajax({\r\n            url: 'https:\/\/loopakw.com\/ar\/wp-admin\/admin-ajax.php',\r\n            type: 'POST',\r\n            data: {\r\n                action: 'fetch_quiz_products',\r\n                age: selections.age,\r\n                gender: selections.gender,\r\n                color: selections.color,\r\n                occasions: selections.occasions,\r\n                eye_styles: selections.eye_styles,\r\n                paged: page\r\n            },\r\n            success: function (res) {\r\n                hideLoader();\r\n                if (!res.success) {\r\n                    alert(lang === 'ar' ? '\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0645\u0646\u062a\u062c\u0627\u062a' : 'No products found');\r\n                    return;\r\n                }\r\n                selectedProducts = [];\r\n\r\n                jQuery(res.data.html).find('.product-card').each(function () {\r\n                    let pid = jQuery(this).data('product-id');\r\n                    if (pid) selectedProducts.push(pid);\r\n                });\r\n                document.getElementById('resultsContainer').innerHTML = res.data.html;\r\n                document.getElementById('cartCount').innerText = res.data.total_count;\r\n                \/\/ Pagination click\r\n                jQuery('.pagination .page-link').on('click', function () {\r\n                    let page = jQuery(this).data('page');\r\n                    if (page) {\r\n                        generateResults(page);\r\n                    }\r\n                });\r\n            },\r\n            error: function () {\r\n                hideLoader();\r\n                alert(\r\n                    lang === 'ar'\r\n                        ? '\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u062c\u0644\u0628 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.'\r\n                        : 'An error occurred while fetching products. Please try again.'\r\n                );\r\n            }\r\n        });\r\n    }\r\n\r\n\r\n\r\n\r\n    function addToCart(productId) {\r\n        const product = selectedProducts.find(p => p.id === productId);\r\n        if (product && !cartItems.some(item => item.id === productId)) {\r\n            cartItems.push(product);\r\n            document.getElementById('cartCount').textContent = cartItems.length;\r\n            alert(`${product.name} added to cart!`);\r\n        } else if (cartItems.some(item => item.id === productId)) {\r\n            alert(\r\n                lang === 'ar'\r\n                    ? `${product.name} \u0645\u0648\u062c\u0648\u062f \u0628\u0627\u0644\u0641\u0639\u0644 \u0641\u064a \u0633\u0644\u0629 \u0627\u0644\u062a\u0633\u0648\u0642!`\r\n                    : `${product.name} is already in your cart!`\r\n            );\r\n        }\r\n    }\r\n\r\n    function addAllToCart() {\r\n        showLoader(\r\n            lang === 'ar' ? '\u062c\u0627\u0631\u064d \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0625\u0644\u0649 \u0633\u0644\u062a\u0643...' : 'Adding products to your cart...'\r\n        );\r\n        jQuery.ajax({\r\n            url: 'https:\/\/loopakw.com\/ar\/wp-admin\/admin-ajax.php',\r\n            type: 'POST',\r\n            data: {\r\n                action: 'add_all_quiz_to_cart',\r\n                age: selections.age,\r\n                gender: selections.gender,\r\n                color: selections.color,\r\n                occasions: selections.occasions,\r\n                eye_styles: selections.eye_styles\r\n\r\n            },\r\n            success: function (res) {\r\n                hideLoader();\r\n                if (!res.success) {\r\n                    alert(lang === 'ar' ? '\u0644\u0645 \u062a\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0623\u064a \u0645\u0646\u062a\u062c\u0627\u062a' : 'No products added');\r\n                    return;\r\n                }\r\n                jQuery(document.body).trigger('wc_fragment_refresh');\r\n                jQuery('.widget_shopping_cart_content').html(res.data.mini_cart);\r\n                document.getElementById('cart-count').innerText = res.data.count;\r\n                alert(res.data.message);\r\n            },\r\n            error: function () {\r\n                hideLoader();\r\n                alert(\r\n                    lang === 'ar'\r\n                        ? '\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0625\u0644\u0649 \u0627\u0644\u0633\u0644\u0629. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.'\r\n                        : 'An error occurred while adding products to cart. Please try again.'\r\n                );\r\n            }\r\n        });\r\n    }\r\n<\/script>\r\n\r\n<script>\r\n    jQuery(function ($) {\r\n\r\n        $(document).on('click', '.add_to_cart_button', function (e) {\r\n            e.preventDefault();\r\n            e.stopImmediatePropagation(); \/\/ STOP WooCommerce default\r\n\r\n            var $btn = $(this);\r\n            if ($btn.hasClass('loading')) return;\r\n\r\n            $btn.addClass('loading');\r\n\r\n            var data = {\r\n                action: 'custom_ajax_add_to_cart',\r\n                product_id: $btn.data('product_id'),\r\n                variation_id: $btn.data('variation_id') || 0,\r\n                quantity: $btn.data('quantity') || 1,\r\n            };\r\n\r\n            \/\/ Collect variation attributes\r\n            $.each(this.dataset, function (key, value) {\r\n                if (key.indexOf('attribute') === 0) {\r\n                    data[key] = value;\r\n                }\r\n            });\r\n\r\n            $.ajax({\r\n                type: 'POST',\r\n                url: wc_add_to_cart_params.ajax_url,\r\n                data: data,\r\n                success: function (response) {\r\n                    if (response.success) {\r\n                        \/\/ Update mini cart\r\n                        $('.widget_shopping_cart_content').html(response.data.mini_cart);\r\n                        $(document.body).trigger('wc_fragment_refresh');\r\n\r\n                        \/\/ Update cart count\r\n                        $('.mini-cart-btn .count').text(response.data.cart_count);\r\n\r\n                        \/\/ Change button\r\n                        $btn.text('Added').removeClass('loading').addClass('added');\r\n\r\n                        \/\/ Show View Cart\r\n                        if (!$btn.next('.added_to_cart').length) {\r\n                            $btn.after('<a href=\"' + wc_add_to_cart_params.cart_url + '\" class=\"added_to_cart wc-forward\">View Cart<\/a>');\r\n                        }\r\n                    } else {\r\n                        alert(response.data.message);\r\n                        $btn.removeClass('loading');\r\n                    }\r\n                },\r\n                error: function () {\r\n                    alert(lang === 'ar' ? '\u062d\u062f\u062b \u062e\u0637\u0623 \u0645\u0627.' : 'Something went wrong.');\r\n                    $btn.removeClass('loading');\r\n                }\r\n            });\r\n        });\r\n\r\n    });\r\n<\/script><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-335","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What Suites My Kid - Loopa - Arabic<\/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:\/\/loopakw.com\/ar\/what-suites-my-kid\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Suites My Kid - Loopa - Arabic\" \/>\n<meta property=\"og:url\" content=\"https:\/\/loopakw.com\/ar\/what-suites-my-kid\/\" \/>\n<meta property=\"og:site_name\" content=\"Loopa - Arabic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/loopakw.com\\\/ar\\\/what-suites-my-kid\\\/\",\"url\":\"https:\\\/\\\/loopakw.com\\\/ar\\\/what-suites-my-kid\\\/\",\"name\":\"What Suites My Kid - Loopa - Arabic\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/loopakw.com\\\/ar\\\/#website\"},\"datePublished\":\"2025-11-13T12:28:26+00:00\",\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/loopakw.com\\\/ar\\\/what-suites-my-kid\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/loopakw.com\\\/ar\\\/#website\",\"url\":\"https:\\\/\\\/loopakw.com\\\/ar\\\/\",\"name\":\"Loopa - Arabic\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/loopakw.com\\\/ar\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What Suites My Kid - Loopa - Arabic","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:\/\/loopakw.com\/ar\/what-suites-my-kid\/","og_locale":"ar_AR","og_type":"article","og_title":"What Suites My Kid - Loopa - Arabic","og_url":"https:\/\/loopakw.com\/ar\/what-suites-my-kid\/","og_site_name":"Loopa - Arabic","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/loopakw.com\/ar\/what-suites-my-kid\/","url":"https:\/\/loopakw.com\/ar\/what-suites-my-kid\/","name":"What Suites My Kid - Loopa - Arabic","isPartOf":{"@id":"https:\/\/loopakw.com\/ar\/#website"},"datePublished":"2025-11-13T12:28:26+00:00","inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/loopakw.com\/ar\/what-suites-my-kid\/"]}]},{"@type":"WebSite","@id":"https:\/\/loopakw.com\/ar\/#website","url":"https:\/\/loopakw.com\/ar\/","name":"Loopa - Arabic","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/loopakw.com\/ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"}]}},"_links":{"self":[{"href":"https:\/\/loopakw.com\/ar\/wp-json\/wp\/v2\/pages\/335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loopakw.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loopakw.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loopakw.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loopakw.com\/ar\/wp-json\/wp\/v2\/comments?post=335"}],"version-history":[{"count":0,"href":"https:\/\/loopakw.com\/ar\/wp-json\/wp\/v2\/pages\/335\/revisions"}],"wp:attachment":[{"href":"https:\/\/loopakw.com\/ar\/wp-json\/wp\/v2\/media?parent=335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}