{"id":4235,"date":"2026-08-27T06:09:40","date_gmt":"2026-08-27T03:09:40","guid":{"rendered":"https:\/\/www.myhappytummies.org\/?page_id=4235"},"modified":"2026-08-27T11:01:33","modified_gmt":"2026-08-27T08:01:33","slug":"plan","status":"publish","type":"page","link":"https:\/\/www.myhappytummies.org\/ar\/plan\/","title":{"rendered":"plans"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4235\" class=\"elementor elementor-4235\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6039c16 e-con-full e-flex e-con e-parent\" data-id=\"6039c16\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bcc5157 elementor-widget elementor-widget-shortcode\" data-id=\"bcc5157\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div id=\"ht-wizard-app\" dir=\"rtl\" class=\"ht-rtl\">\n        \n        <!-- Header Progress -->\n        <div class=\"ht-wizard-header\">\n            <div class=\"ht-header-info\">\n                <span class=\"ht-step-badge\">\u0627\u0644\u062e\u0637\u0648\u0629 <span id=\"ht-current-step-num\">1<\/span> \u0645\u0646 4<\/span>\n                <h2 id=\"ht-step-title\">1. \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u063a\u0630\u0627\u0626\u064a\u0629<\/h2>\n            <\/div>\n            <div class=\"ht-progress-track\">\n                <div class=\"ht-track-fill\" id=\"ht-progress-fill\" style=\"width: 25%;\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- ==============================================\n             STEP 1: SELECT PLAN\n             ============================================== -->\n        <div class=\"ht-step active\" id=\"ht-step-1\">\n            <div class=\"ht-step-intro\">\n                <h3>\u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0637\u0641\u0644\u0643<\/h3>\n                <p>\u062e\u0637\u0637 \u0645\u0631\u0646\u0629 \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u062a\u0644\u0628\u064a\u0629 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0623\u0628\u0637\u0627\u0644\u0646\u0627 \u0641\u064a \u0627\u0644\u0645\u062f\u0627\u0631\u0633.<\/p>\n            <\/div>\n            \n            <div class=\"ht-plans-grid\">\n                                <div class=\"ht-plan-card\" \n                     data-plan=\"Full\" \n                     data-product-id=\"4254\" \n                     data-plan-title=\"\u062a\u0627\u064a\u0646\u064a \u062a\u0645\u064a\u0632 \u063a\u062f\u0627\u0621\" \n                     data-plan-price=\"218.18\"\n                     data-billing-interval=\"week\"\n                     data-total-weeks=\"1\">\n                    \n                    <div class=\"ht-plan-badge\">\u0627\u0634\u062a\u0631\u0627\u0643 \u0623\u0633\u0628\u0648\u0639\u064a<\/div>\n                    <div class=\"ht-plan-img-wrap\">\n                        <img decoding=\"async\" src=\"https:\/\/www.myhappytummies.org\/mhapptmms\/wp-content\/uploads\/2026\/08\/image-1.png\" alt=\"\u062a\u0627\u064a\u0646\u064a \u062a\u0645\u064a\u0632 \u063a\u062f\u0627\u0621\" class=\"ht-plan-img\" loading=\"lazy\" \/>\n                    <\/div>\n                    <div class=\"ht-plan-body\">\n                        <h4 class=\"ht-plan-name\">\u062a\u0627\u064a\u0646\u064a \u062a\u0645\u064a\u0632 \u063a\u062f\u0627\u0621<\/h4>\n                        <div class=\"ht-plan-price-tag\">\n                            <span class=\"ht-price-num\">218.18<\/span>\n                            <span class=\"ht-price-cur\">\u0631.\u0633 \/ \u0623\u0633\u0628\u0648\u0639<\/span>\n                        <\/div>\n                                                <p class=\"ht-plan-desc\">\u0648\u062c\u0628\u0629 \u063a\u062f\u0627\u0621 \u064a\u0648\u0645\u064a\u0627\u064b<\/p>\n                                            <\/div>\n                    <div class=\"ht-plan-select-btn\">\u0627\u062e\u062a\u064a\u0627\u0631 \u0647\u0630\u0647 \u0627\u0644\u0628\u0627\u0642\u0629 \u2713<\/div>\n                <\/div>\n                            <\/div>\n\n            <div class=\"ht-actions\" style=\"justify-content: flex-end;\">\n                <button type=\"button\" class=\"ht-btn ht-btn-primary ht-next-btn\">\u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0637\u0641\u0644 \u2794<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- ==============================================\n             STEP 2: CHILD INFO & ALLERGIES\n             ============================================== -->\n        <div class=\"ht-step\" id=\"ht-step-2\">\n            <div class=\"ht-step-intro\">\n                <h3>\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0637\u0641\u0644 \u0648\u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u062d\u064a<\/h3>\n                <p>\u062a\u0633\u0627\u0639\u062f\u0646\u0627 \u0647\u0630\u0647 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0641\u064a \u062a\u062c\u0647\u064a\u0632 \u0648\u062c\u0628\u0627\u062a \u0622\u0645\u0646\u0629 \u0648\u062a\u0648\u0635\u064a\u0644\u0647\u0627 \u0644\u0645\u062f\u0631\u0633\u0629 \u0637\u0641\u0644\u0643.<\/p>\n            <\/div>\n\n            <div class=\"ht-form-grid\">\n                <div class=\"ht-field-group\">\n                    <label for=\"ht_child_name\">\u0627\u0633\u0645 \u0627\u0644\u0637\u0641\u0644 \u062b\u0644\u0627\u062b\u064a *<\/label>\n                    <input type=\"text\" id=\"ht_child_name\" placeholder=\"\u0645\u062b\u0627\u0644: \u0641\u064a\u0635\u0644 \u0641\u0647\u062f \u0627\u0644\u0642\u062d\u0637\u0627\u0646\u064a\" required \/>\n                <\/div>\n                <div class=\"ht-field-group\">\n                    <label for=\"ht_school_name\">\u0627\u0644\u0645\u062f\u0631\u0633\u0629 \u0648\u0627\u0644\u0635\u0641 \u0627\u0644\u062f\u0631\u0627\u0633\u064a *<\/label>\n                    <input type=\"text\" id=\"ht_school_name\" placeholder=\"\u0645\u062b\u0627\u0644: \u0645\u062f\u0627\u0631\u0633 \u0627\u0644\u062a\u0631\u0628\u064a\u0629 \u0627\u0644\u0646\u0645\u0648\u0630\u062c\u064a\u0629 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0644\u062b\" required \/>\n                <\/div>\n            <\/div>\n\n            <div class=\"ht-allergy-box\">\n                <div class=\"ht-allergy-header\">\n                    <h4>\u0647\u0644 \u064a\u0639\u0627\u0646\u064a \u0627\u0644\u0637\u0641\u0644 \u0645\u0646 \u0623\u064a \u062d\u0633\u0627\u0633\u064a\u0629 \u063a\u0630\u0627\u0626\u064a\u0629\u061f<\/h4>\n                    <p>\u062d\u062f\u062f \u0627\u0644\u062d\u0633\u0627\u0633\u064a\u0629 \u0644\u064a\u062a\u0645 \u0642\u0641\u0644 \u0648\u0627\u0633\u062a\u0628\u0639\u0627\u062f \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0648\u0628\u0623\u0645\u0627\u0646 \u062a\u0627\u0645.<\/p>\n                <\/div>\n                <div class=\"ht-allergy-items\">\n                                        <button type=\"button\" class=\"ht-allergy-chip\" data-allergy=\"Milk\">\n                        \ud83e\udd5b \u062d\u0644\u064a\u0628 \u0648\u0623\u0644\u0628\u0627\u0646                    <\/button>\n                                        <button type=\"button\" class=\"ht-allergy-chip\" data-allergy=\"Gluten\">\n                        \ud83c\udf3e \u062c\u0644\u0648\u062a\u064a\u0646 \/ \u0642\u0645\u062d                    <\/button>\n                                        <button type=\"button\" class=\"ht-allergy-chip\" data-allergy=\"Eggs\">\n                        \ud83e\udd5a \u0628\u064a\u0636                    <\/button>\n                                        <button type=\"button\" class=\"ht-allergy-chip\" data-allergy=\"Nuts\">\n                        \ud83e\udd5c \u0645\u0643\u0633\u0631\u0627\u062a \u0648\u0641\u0648\u0644 \u0633\u0648\u062f\u0627\u0646\u064a                    <\/button>\n                                        <button type=\"button\" class=\"ht-allergy-chip\" data-allergy=\"Fish\">\n                        \ud83d\udc1f \u0623\u0633\u0645\u0627\u0643                    <\/button>\n                                        <button type=\"button\" class=\"ht-allergy-chip\" data-allergy=\"Shellfish\">\n                        \ud83e\udd90 \u0645\u0623\u0643\u0648\u0644\u0627\u062a \u0628\u062d\u0631\u064a\u0629 \/ \u0631\u0648\u0628\u064a\u0627\u0646                    <\/button>\n                                        <button type=\"button\" class=\"ht-allergy-chip\" data-allergy=\"Soy\">\n                        \ud83e\uded8 \u0635\u0648\u064a\u0627                    <\/button>\n                                        <button type=\"button\" class=\"ht-allergy-chip\" data-allergy=\"Sesame\">\n                        \u26aa \u0633\u0645\u0633\u0645                    <\/button>\n                                    <\/div>\n            <\/div>\n\n            <div class=\"ht-actions\">\n                <button type=\"button\" class=\"ht-btn ht-btn-outline ht-prev-btn\">\u2b05\ufe0f \u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n                <button type=\"button\" class=\"ht-btn ht-btn-primary ht-next-btn\">\u0628\u062f\u0621 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u2794<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- ==============================================\n             STEP 3: SEQUENTIAL GUIDED MENU (WEEK 1 -> 4)\n             ============================================== -->\n        <div class=\"ht-step\" id=\"ht-step-3\">\n            \n            <div class=\"ht-menu-nav-bar\">\n                <div class=\"ht-week-indicator\" id=\"ht-week-indicators-holder\">\n                    <!-- Dynamic Week Pills rendered based on plan duration -->\n                <\/div>\n                <div class=\"ht-week-counter-tag\">\n                    <span id=\"ht-current-week-display\">\u0627\u0644\u0623\u0633\u0628\u0648\u0639 \u0627\u0644\u0623\u0648\u0644<\/span>\n                <\/div>\n            <\/div>\n\n            <div id=\"ht-menu-loader\">\n                <div class=\"ht-spinner\"><\/div>\n                <p>\u062c\u0627\u0631\u064a \u0627\u0633\u062a\u062f\u0639\u0627\u0621 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0645\u062e\u0635\u0635\u0629 \u0644\u0637\u0641\u0644\u0643...<\/p>\n            <\/div>\n\n            <div id=\"ht-weeks-wrapper\" style=\"display:none;\">\n                <!-- Weeks rendered via JavaScript -->\n            <\/div>\n\n            <div class=\"ht-actions\">\n                <button type=\"button\" class=\"ht-btn ht-btn-outline\" id=\"ht-week-prev-btn\">\u2b05\ufe0f \u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n                <button type=\"button\" class=\"ht-btn ht-btn-primary\" id=\"ht-week-next-btn\">\u0627\u0644\u0623\u0633\u0628\u0648\u0639 \u0627\u0644\u062a\u0627\u0644\u064a \u2794<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- ==============================================\n             STEP 4: SUMMARY & COUPON & CONFIRMATION\n             ============================================== -->\n        <div class=\"ht-step\" id=\"ht-step-4\">\n            <div class=\"ht-step-intro\">\n                <h3>\u0645\u0631\u0627\u062c\u0639\u0629 \u0648\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0627\u0634\u062a\u0631\u0627\u0643<\/h3>\n                <p>\u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629 \u0648\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0637\u0641\u0644 \u0642\u0628\u0644 \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0644\u0644\u062f\u0641\u0639.<\/p>\n            <\/div>\n\n            <div class=\"ht-summary-box\">\n                <div class=\"ht-summary-header\">\n                    <div>\n                        <strong id=\"summary-child-name\" style=\"font-size: 17px; color: #1e293b;\"><\/strong>\n                        <div id=\"summary-school-name\" style=\"color: #64748b; font-size: 13.5px; margin-top: 4px;\"><\/div>\n                    <\/div>\n                    <div class=\"ht-summary-plan-badge\" id=\"summary-plan-title\"><\/div>\n                <\/div>\n\n                <!-- Meal Review List -->\n                <div class=\"ht-summary-section\">\n                    <h4 style=\"margin: 0 0 12px 0; font-size: 15px; color: #0f766e;\">\u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0645\u0639\u062a\u0645\u062f\u0629 \u0644\u0644\u0627\u0634\u062a\u0631\u0627\u0643:<\/h4>\n                    <div id=\"ht-summary-meals-list\" class=\"ht-summary-grid\"><\/div>\n                <\/div>\n\n                <!-- Coupon Section -->\n                <div class=\"ht-coupon-container\">\n                    <div class=\"ht-coupon-input-wrap\">\n                        <input type=\"text\" id=\"ht-coupon-code-input\" placeholder=\"\u0644\u062f\u064a\u0643 \u0643\u0648\u062f \u062e\u0635\u0645\u061f \u0623\u062f\u062e\u0644\u0647 \u0647\u0646\u0627\" \/>\n                        <button type=\"button\" id=\"ht-apply-coupon-btn\" class=\"ht-btn ht-btn-coupon\">\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062e\u0635\u0645<\/button>\n                    <\/div>\n                    <div id=\"ht-coupon-response-msg\"><\/div>\n                <\/div>\n\n                <!-- Pricing Breakdown -->\n                <div class=\"ht-price-breakdown\">\n                    <div class=\"ht-price-row\">\n                        <span>\u0642\u064a\u0645\u0629 \u0627\u0644\u0627\u0634\u062a\u0631\u0627\u0643:<\/span>\n                        <strong id=\"ht-base-price-display\">0 \u0631.\u0633<\/strong>\n                    <\/div>\n                    <div class=\"ht-price-row ht-discount-row\" style=\"display:none; color: #10b981;\">\n                        <span>\u0642\u064a\u0645\u0629 \u0627\u0644\u062e\u0635\u0645:<\/span>\n                        <strong id=\"ht-discount-price-display\">-0 \u0631.\u0633<\/strong>\n                    <\/div>\n                    <div class=\"ht-price-row ht-total-row\">\n                        <span>\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0637\u0644\u0648\u0628 \u0644\u0644\u062f\u0641\u0639:<\/span>\n                        <strong id=\"ht-final-total-display\">0 \u0631.\u0633<\/strong>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"ht-actions\">\n                <button type=\"button\" class=\"ht-btn ht-btn-outline ht-prev-btn\">\u2b05\ufe0f \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0648\u062c\u0628\u0627\u062a<\/button>\n                <button type=\"button\" class=\"ht-btn ht-btn-success\" id=\"ht-final-checkout-btn\">\n                    <span>\u062a\u0623\u0643\u064a\u062f \u0648\u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0644\u0644\u062f\u0641\u0639 \ud83d\udcb3<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- ==============================================\n         CSS STYLING (MOBILE-OPTIMIZED & RESPONSIVE)\n         ============================================== -->\n    <style>\n        #ht-wizard-app {\n            max-width: 1050px;\n            margin: 25px auto;\n            background: #ffffff;\n            border-radius: 20px;\n            box-shadow: 0 12px 40px rgba(0,0,0,0.06);\n            overflow: hidden;\n            font-family: inherit;\n            box-sizing: border-box;\n        }\n        #ht-wizard-app * {\n            box-sizing: border-box;\n        }\n        .ht-wizard-header {\n            background: linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%);\n            padding: 24px 30px;\n            border-bottom: 2px solid #ccfbf1;\n        }\n        .ht-header-info {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 12px;\n            gap: 12px;\n        }\n        .ht-step-badge {\n            background: #0d9488;\n            color: #fff;\n            padding: 4px 14px;\n            border-radius: 20px;\n            font-size: 13px;\n            font-weight: 700;\n            white-space: nowrap;\n        }\n        #ht-step-title {\n            margin: 0;\n            font-size: 20px;\n            font-weight: 800;\n            color: #0f766e;\n        }\n        .ht-progress-track {\n            height: 7px;\n            background: #e2e8f0;\n            border-radius: 10px;\n            overflow: hidden;\n        }\n        .ht-track-fill {\n            height: 100%;\n            background: linear-gradient(90deg, #14b8a6, #0d9488);\n            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .ht-step { display: none; padding: 32px 30px; }\n        .ht-step.active { display: block; animation: htFade 0.3s ease-out; }\n        @keyframes htFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }\n\n        .ht-step-intro { text-align: center; margin-bottom: 28px; }\n        .ht-step-intro h3 { font-size: 22px; font-weight: 800; color: #1e293b; margin: 0 0 6px 0; }\n        .ht-step-intro p { color: #64748b; font-size: 14.5px; margin: 0; }\n\n        \/* Plans Grid *\/\n        .ht-plans-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 20px;\n            margin-bottom: 25px;\n        }\n        .ht-plan-card {\n            border: 2px solid #e2e8f0;\n            border-radius: 16px;\n            cursor: pointer;\n            position: relative;\n            background: #fff;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            transition: all 0.25s ease;\n        }\n        .ht-plan-card:hover {\n            transform: translateY(-3px);\n            border-color: #0d9488;\n            box-shadow: 0 10px 25px rgba(13, 148, 136, 0.12);\n        }\n        .ht-plan-card.selected {\n            border-color: #0d9488;\n            border-width: 2.5px;\n            background: #f0fdfa;\n            box-shadow: 0 10px 25px rgba(13, 148, 136, 0.16);\n        }\n        .ht-plan-badge {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            background: rgba(15, 118, 110, 0.92);\n            backdrop-filter: blur(4px);\n            color: #fff;\n            font-size: 11px;\n            font-weight: 700;\n            padding: 3px 10px;\n            border-radius: 16px;\n            z-index: 2;\n        }\n        .ht-rtl .ht-plan-badge { right: 10px; left: auto; }\n        .ht-ltr .ht-plan-badge { left: 10px; right: auto; }\n\n        .ht-plan-img-wrap {\n            width: 100%;\n            height: 160px;\n            background: #f8fafc;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .ht-plan-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }\n        .ht-plan-card:hover .ht-plan-img { transform: scale(1.03); }\n        .ht-plan-body { padding: 18px; flex-grow: 1; display: flex; flex-direction: column; }\n        .ht-plan-name { font-size: 17px; font-weight: 800; color: #1e293b; margin: 0 0 8px 0; }\n        .ht-plan-price-tag { margin-bottom: 10px; }\n        .ht-price-num { font-size: 24px; font-weight: 900; color: #0d9488; }\n        .ht-price-cur { font-size: 12.5px; color: #64748b; margin-right: 4px; }\n        .ht-plan-desc { font-size: 12.5px; color: #64748b; line-height: 1.5; margin: 0; }\n        .ht-plan-select-btn {\n            background: #f1f5f9;\n            padding: 10px 14px;\n            text-align: center;\n            font-weight: 700;\n            font-size: 13.5px;\n            color: #475569;\n            border-top: 1px solid #e2e8f0;\n            transition: 0.2s;\n        }\n        .ht-plan-card.selected .ht-plan-select-btn {\n            background: #0d9488;\n            color: #fff;\n        }\n\n        \/* Form *\/\n        .ht-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }\n        .ht-field-group label { display: block; font-weight: 700; color: #334155; margin-bottom: 6px; font-size: 13.5px; }\n        .ht-field-group input {\n            width: 100%;\n            padding: 12px 14px;\n            border: 2px solid #e2e8f0;\n            border-radius: 12px;\n            font-size: 14.5px;\n            transition: 0.2s;\n            box-sizing: border-box;\n            background: #fff;\n        }\n        .ht-field-group input:focus { border-color: #0d9488; outline: none; box-shadow: 0 0 0 3px rgba(13,148,136,0.12); }\n\n        .ht-allergy-box {\n            background: #fff7ed;\n            border: 2px dashed #fed7aa;\n            border-radius: 14px;\n            padding: 20px;\n            margin-top: 8px;\n        }\n        .ht-allergy-header h4 { margin: 0 0 4px 0; color: #ea580c; font-size: 15px; font-weight: 800; }\n        .ht-allergy-header p { margin: 0 0 12px 0; color: #64748b; font-size: 12.5px; }\n        .ht-allergy-items { display: flex; flex-wrap: wrap; gap: 8px; }\n        .ht-allergy-chip {\n            background: #fff;\n            border: 1.5px solid #fed7aa;\n            padding: 7px 14px;\n            border-radius: 24px;\n            font-weight: 700;\n            font-size: 12.5px;\n            color: #475569;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n        .ht-allergy-chip:hover { border-color: #f97316; color: #ea580c; }\n        .ht-allergy-chip.selected {\n            background: #ea580c;\n            border-color: #ea580c;\n            color: #fff;\n            box-shadow: 0 3px 10px rgba(234,88,12,0.22);\n        }\n\n        \/* Week Navigation Bar *\/\n        .ht-menu-nav-bar {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 22px;\n            background: #f8fafc;\n            padding: 12px 20px;\n            border-radius: 12px;\n            border: 1px solid #e2e8f0;\n            gap: 10px;\n        }\n        .ht-week-indicator { display: flex; align-items: center; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n        .ht-indicator-pill {\n            font-size: 12.5px;\n            font-weight: 800;\n            padding: 5px 12px;\n            border-radius: 18px;\n            background: #e2e8f0;\n            color: #64748b;\n            white-space: nowrap;\n        }\n        .ht-indicator-pill.active { background: #0d9488; color: #fff; }\n        .ht-indicator-pill.completed { background: #10b981; color: #fff; }\n        .ht-indicator-line { width: 12px; height: 2px; background: #cbd5e1; flex-shrink: 0; }\n        .ht-week-counter-tag { font-size: 13.5px; font-weight: 800; color: #0d9488; white-space: nowrap; }\n\n        \/* Day Block & Responsive Meals Grid *\/\n        .ht-day-block {\n            background: #ffffff;\n            border: 1px solid #e2e8f0;\n            border-radius: 14px;\n            padding: 18px;\n            margin-bottom: 20px;\n        }\n        .ht-day-heading {\n            font-size: 16.5px;\n            font-weight: 800;\n            color: #0f766e;\n            margin-bottom: 12px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            border-bottom: 1.5px solid #f1f5f9;\n            padding-bottom: 8px;\n        }\n        .ht-day-dot { width: 8px; height: 8px; background: #f59e0b; border-radius: 50%; display: inline-block; }\n        \n        .ht-meal-slot-label {\n            font-size: 14px;\n            font-weight: 800;\n            margin: 12px 0 8px 0;\n            color: #334155;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n        .ht-meal-slot-label.breakfast-label { color: #d97706; }\n        .ht-meal-slot-label.lunch-label { color: #0284c7; }\n\n        .ht-day-meals-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 14px;\n            margin-bottom: 10px;\n        }\n        .ht-meal-option-card {\n            background: #fff;\n            border: 1.5px solid #e2e8f0;\n            border-radius: 12px;\n            cursor: pointer;\n            position: relative;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            transition: all 0.2s ease;\n        }\n        .ht-meal-option-card:hover { border-color: #0d9488; transform: translateY(-2px); }\n        .ht-meal-option-card.selected {\n            border-color: #10b981;\n            background: #f0fdf4;\n            box-shadow: 0 4px 14px rgba(16,185,129,0.15);\n        }\n        .ht-meal-option-card.selected::before {\n            content: '\u2713 \u062a\u0645 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631';\n            position: absolute;\n            top: 6px;\n            left: 6px;\n            background: #10b981;\n            color: #fff;\n            font-size: 10px;\n            font-weight: 800;\n            padding: 2px 7px;\n            border-radius: 10px;\n            z-index: 3;\n        }\n        .ht-ltr .ht-meal-option-card.selected::before {\n            content: '\u2713 Selected';\n            left: auto;\n            right: 6px;\n        }\n        .ht-meal-option-card.disabled {\n            opacity: 0.45;\n            pointer-events: none;\n            filter: grayscale(100%);\n            border-style: dashed;\n        }\n        .ht-allergy-alert-badge {\n            position: absolute;\n            top: 6px;\n            right: 6px;\n            background: #ef4444;\n            color: #fff;\n            font-size: 9.5px;\n            font-weight: 800;\n            padding: 2px 6px;\n            border-radius: 10px;\n            display: none;\n            z-index: 3;\n        }\n        .ht-meal-option-card.disabled .ht-allergy-alert-badge { display: block; }\n        \n        \/* Meal Image Aspect Ratio & Size Controls *\/\n        .ht-meal-thumb-wrap {\n            width: 100%;\n            height: 125px;\n            background: #f8fafc;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-bottom: 1px solid #f1f5f9;\n        }\n        .ht-meal-thumb-wrap img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.25s ease;\n        }\n        .ht-meal-option-card:hover .ht-meal-thumb-wrap img {\n            transform: scale(1.04);\n        }\n        .ht-meal-meta-box { padding: 10px 12px; flex-grow: 1; display: flex; flex-direction: column; }\n        .ht-meal-title-text { \n            font-size: 13px; \n            font-weight: 800; \n            color: #1e293b; \n            margin-bottom: 4px; \n            line-height: 1.35;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            min-height: 35px;\n        }\n        .ht-meal-cal-tag { font-size: 11px; font-weight: 800; color: #e11d48; margin-bottom: 4px; }\n        .ht-meal-sides-text { \n            font-size: 10.5px; \n            color: #64748b; \n            line-height: 1.3;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        \/* Summary & Checkout *\/\n        .ht-summary-box { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 20px; }\n        .ht-summary-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid #e2e8f0; padding-bottom: 14px; margin-bottom: 16px; gap: 10px; }\n        .ht-summary-plan-badge { background: #0d9488; color: #fff; font-weight: 800; font-size: 13px; padding: 5px 14px; border-radius: 18px; }\n        .ht-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }\n        .ht-summary-item { background: #fff; border: 1px solid #cbd5e1; padding: 10px 12px; border-radius: 8px; font-size: 11.5px; }\n        .ht-summary-item strong { display: block; color: #0f766e; margin-bottom: 2px; }\n        \n        \/* Coupon Card *\/\n        .ht-coupon-container {\n            margin-top: 20px;\n            padding: 16px;\n            background: #fff;\n            border: 1.5px dashed #0d9488;\n            border-radius: 12px;\n        }\n        .ht-coupon-input-wrap { display: flex; gap: 10px; }\n        .ht-coupon-input-wrap input {\n            flex-grow: 1;\n            padding: 10px 14px;\n            border: 1.5px solid #e2e8f0;\n            border-radius: 8px;\n            font-size: 13.5px;\n            font-weight: 700;\n        }\n        .ht-coupon-input-wrap input:focus { border-color: #0d9488; outline: none; }\n        .ht-btn-coupon { background: #0d9488; color: #fff; padding: 10px 20px; font-size: 13.5px; }\n        .ht-btn-coupon:hover { background: #0f766e; }\n        #ht-coupon-response-msg { margin-top: 8px; font-size: 12.5px; font-weight: 700; }\n\n        \/* Pricing Breakdown *\/\n        .ht-price-breakdown {\n            margin-top: 16px;\n            background: #fff;\n            border: 1px solid #e2e8f0;\n            border-radius: 12px;\n            padding: 16px 18px;\n        }\n        .ht-price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13.5px; color: #475569; }\n        .ht-total-row { border-top: 1.5px solid #f1f5f9; padding-top: 10px; margin-top: 10px; font-size: 16px; color: #0f766e; font-weight: 900; }\n        .ht-total-row strong { font-size: 20px; color: #0d9488; }\n\n        \/* Loader *\/\n        #ht-menu-loader { text-align: center; padding: 50px 20px; }\n        .ht-spinner {\n            width: 40px;\n            height: 40px;\n            border: 3.5px solid #e2e8f0;\n            border-top-color: #0d9488;\n            border-radius: 50%;\n            animation: htSpin 0.8s linear infinite;\n            margin: 0 auto 12px auto;\n        }\n        @keyframes htSpin { to { transform: rotate(360deg); } }\n\n        \/* Actions & Buttons *\/\n        .ht-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1.5px solid #f1f5f9; gap: 12px; }\n        .ht-btn {\n            border: none;\n            padding: 12px 24px;\n            border-radius: 10px;\n            font-size: 14px;\n            font-weight: 800;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            text-align: center;\n        }\n        .ht-btn-primary { background: #0d9488; color: #fff; box-shadow: 0 3px 12px rgba(13,148,136,0.22); }\n        .ht-btn-primary:hover { background: #0f766e; transform: translateY(-1px); }\n        .ht-btn-success { background: #10b981; color: #fff; box-shadow: 0 3px 12px rgba(16,185,129,0.25); }\n        .ht-btn-success:hover { background: #059669; transform: translateY(-1px); }\n        .ht-btn-outline { background: #f8fafc; border: 1.5px solid #cbd5e1; color: #475569; }\n        .ht-btn-outline:hover { background: #e2e8f0; }\n        .ht-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }\n\n        \/* ==============================================\n           MOBILE RESPONSIVENESS & TOUCH CONTROLS\n           ============================================== *\/\n        @media (max-width: 768px) {\n            #ht-wizard-app {\n                margin: 10px auto;\n                border-radius: 14px;\n            }\n            .ht-wizard-header {\n                padding: 16px 18px;\n            }\n            #ht-step-title {\n                font-size: 16.5px;\n            }\n            .ht-step-badge {\n                font-size: 11.5px;\n                padding: 3px 10px;\n            }\n            .ht-step {\n                padding: 20px 14px;\n            }\n            .ht-step-intro {\n                margin-bottom: 18px;\n            }\n            .ht-step-intro h3 {\n                font-size: 18px;\n            }\n            .ht-step-intro p {\n                font-size: 13px;\n            }\n\n            \/* Plans on Mobile *\/\n            .ht-plans-grid {\n                grid-template-columns: 1fr;\n                gap: 14px;\n            }\n            .ht-plan-img-wrap {\n                height: 135px;\n            }\n            .ht-plan-body {\n                padding: 14px;\n            }\n            .ht-plan-name {\n                font-size: 16px;\n            }\n\n            \/* Form on Mobile *\/\n            .ht-form-grid {\n                grid-template-columns: 1fr;\n                gap: 12px;\n            }\n            .ht-field-group input {\n                padding: 11px 12px;\n                font-size: 13.5px;\n            }\n            .ht-allergy-box {\n                padding: 14px;\n            }\n            .ht-allergy-chip {\n                padding: 6px 12px;\n                font-size: 11.5px;\n            }\n\n            \/* Week Nav on Mobile *\/\n            .ht-menu-nav-bar {\n                flex-direction: column;\n                align-items: flex-start;\n                padding: 10px 14px;\n                gap: 8px;\n            }\n            .ht-week-indicator {\n                width: 100%;\n                justify-content: flex-start;\n            }\n            .ht-indicator-pill {\n                font-size: 11.5px;\n                padding: 4px 10px;\n            }\n\n            \/* Meals 2-Column Compact Grid on Mobile *\/\n            .ht-day-block {\n                padding: 12px;\n                margin-bottom: 14px;\n                border-radius: 12px;\n            }\n            .ht-day-heading {\n                font-size: 15px;\n                margin-bottom: 8px;\n                padding-bottom: 6px;\n            }\n            .ht-meal-slot-label {\n                font-size: 12.5px;\n                margin: 8px 0 6px 0;\n            }\n            .ht-day-meals-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 8px;\n            }\n            .ht-meal-thumb-wrap {\n                height: 100px;\n            }\n            .ht-meal-meta-box {\n                padding: 8px;\n            }\n            .ht-meal-title-text {\n                font-size: 11.5px;\n                min-height: 30px;\n                line-height: 1.3;\n                margin-bottom: 2px;\n            }\n            .ht-meal-cal-tag {\n                font-size: 10px;\n                margin-bottom: 2px;\n            }\n            .ht-meal-sides-text {\n                font-size: 9.5px;\n                line-height: 1.25;\n            }\n\n            \/* Summary & Coupon on Mobile *\/\n            .ht-summary-box {\n                padding: 14px;\n            }\n            .ht-summary-header {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 8px;\n            }\n            .ht-summary-grid {\n                grid-template-columns: 1fr;\n            }\n            .ht-coupon-input-wrap {\n                flex-direction: column;\n            }\n            .ht-btn-coupon {\n                width: 100%;\n            }\n\n            \/* Actions on Mobile *\/\n            .ht-actions {\n                flex-direction: row;\n                gap: 8px;\n                margin-top: 20px;\n                padding-top: 14px;\n            }\n            .ht-btn {\n                padding: 10px 14px;\n                font-size: 13px;\n                flex: 1;\n            }\n        }\n    <\/style>\n\n    <!-- ==============================================\n         JAVASCRIPT ENGINE\n         ============================================== -->\n    <script>\n    jQuery(document).ready(function($) {\n        const isArabic = \"yes\" === 'yes';\n        const langCode = \"ar\";\n\n        let currentWizardStep = 1;\n        let currentWeek = 1;\n        let selectedPlanKey = '';\n        let selectedPlanId = 0;\n        let selectedPlanTitle = '';\n        let selectedPlanPrice = 0;\n        let selectedPlanInterval = 'month';\n        let selectedPlanTotalWeeks = 4;\n\n        let appliedCouponCode = '';\n        let discountAmount = 0;\n        let childAllergies = [];\n        let fetchedMeals = [];\n        \n        const daysMap = [\n            { key: 'Sunday', ar: '\u064a\u0648\u0645 \u0627\u0644\u0623\u062d\u062f', en: 'Sunday' },\n            { key: 'Monday', ar: '\u064a\u0648\u0645 \u0627\u0644\u0627\u062b\u0646\u064a\u0646', en: 'Monday' },\n            { key: 'Tuesday', ar: '\u064a\u0648\u0645 \u0627\u0644\u062b\u0644\u0627\u062b\u0627\u0621', en: 'Tuesday' },\n            { key: 'Wednesday', ar: '\u064a\u0648\u0645 \u0627\u0644\u0623\u0631\u0628\u0639\u0627\u0621', en: 'Wednesday' },\n            { key: 'Thursday', ar: '\u064a\u0648\u0645 \u0627\u0644\u062e\u0645\u064a\u0633', en: 'Thursday' }\n        ];\n\n        \/\/ --- Step 1 Plan Selection ---\n        $('.ht-plan-card').on('click', function() {\n            $('.ht-plan-card').removeClass('selected');\n            $(this).addClass('selected');\n            selectedPlanKey        = $(this).data('plan');\n            selectedPlanId         = $(this).data('product-id');\n            selectedPlanTitle      = $(this).find('.ht-plan-name').text().trim() || $(this).data('plan-title');\n            selectedPlanPrice      = parseFloat($(this).data('plan-price')) || 0;\n            selectedPlanInterval   = $(this).data('billing-interval') || 'month';\n            selectedPlanTotalWeeks = parseInt($(this).data('total-weeks')) || 4;\n        });\n\n        \/\/ --- Step 2 Allergies Selection ---\n        $('.ht-allergy-chip').on('click', function() {\n            $(this).toggleClass('selected');\n            let allergy = $(this).data('allergy');\n            if($(this).hasClass('selected')) {\n                if(!childAllergies.includes(allergy)) childAllergies.push(allergy);\n            } else {\n                childAllergies = childAllergies.filter(a => a !== allergy);\n            }\n        });\n\n        \/\/ --- Wizard Flow Navigation ---\n        $('.ht-next-btn').on('click', function() {\n            if(currentWizardStep === 1) {\n                if(!selectedPlanId) {\n                    alert(isArabic ? '\u064a\u0631\u062c\u0649 \u062a\u062d\u062f\u064a\u062f \u0625\u062d\u062f\u0649 \u0627\u0644\u0628\u0627\u0642\u0627\u062a \u0644\u0644\u0645\u062a\u0627\u0628\u0639\u0629.' : 'Please select a plan to continue.');\n                    return;\n                }\n                goToStep(2);\n            } else if(currentWizardStep === 2) {\n                let name = $('#ht_child_name').val().trim();\n                let school = $('#ht_school_name').val().trim();\n                if(!name || !school) {\n                    alert(isArabic ? '\u064a\u0631\u062c\u0649 \u0643\u062a\u0627\u0628\u0629 \u0627\u0633\u0645 \u0627\u0644\u0637\u0641\u0644 \u0648\u0627\u0633\u0645 \u0627\u0644\u0645\u062f\u0631\u0633\u0629 \u0648\u0627\u0644\u0635\u0641.' : 'Please fill in child name and school\/grade.');\n                    return;\n                }\n                loadMealsData();\n                goToStep(3);\n            }\n        });\n\n        $('.ht-prev-btn').on('click', function() {\n            if(currentWizardStep === 4) {\n                currentWeek = selectedPlanTotalWeeks;\n                updateWeekView();\n                goToStep(3);\n            } else {\n                goToStep(currentWizardStep - 1);\n            }\n        });\n\n        function goToStep(step) {\n            currentWizardStep = step;\n            $('.ht-step').removeClass('active');\n            $('#ht-step-' + step).addClass('active');\n\n            let fillPercent = (step \/ 4) * 100;\n            $('#ht-progress-fill').css('width', fillPercent + '%');\n            $('#ht-current-step-num').text(step);\n\n            let stepTitlesAr = [\n                '1. \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u063a\u0630\u0627\u0626\u064a\u0629',\n                '2. \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0637\u0641\u0644 \u0648\u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u062d\u064a',\n                (selectedPlanTotalWeeks === 1) ? '3. \u062a\u062e\u0635\u064a\u0635 \u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0623\u0633\u0628\u0648\u0639' : '3. \u062a\u062e\u0635\u064a\u0635 \u0648\u062c\u0628\u0627\u062a \u0627\u0644\u0634\u0647\u0631 (\u0623\u0633\u0628\u0648\u0639 \u0628\u0623\u0633\u0628\u0648\u0639)',\n                '4. \u0645\u0631\u0627\u062c\u0639\u0629 \u0648\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0627\u0634\u062a\u0631\u0627\u0643'\n            ];\n            let stepTitlesEn = [\n                '1. Select Subscription Plan',\n                '2. Child Details & Health Profile',\n                (selectedPlanTotalWeeks === 1) ? '3. Customize Weekly Meals' : '3. Customize Monthly Meals (Week by Week)',\n                '4. Review & Confirm Subscription'\n            ];\n            $('#ht-step-title').text(isArabic ? stepTitlesAr[step-1] : stepTitlesEn[step-1]);\n            \n            $('html, body').animate({ scrollTop: $('#ht-wizard-app').offset().top - 30 }, 300);\n        }\n\n        \/\/ --- AJAX Fetch Meals ---\n        function loadMealsData() {\n            $('#ht-weeks-wrapper').hide();\n            $('#ht-menu-loader').show();\n\n            $.ajax({\n                url: \"https:\/\/www.myhappytummies.org\/mhapptmms\/wp-admin\/admin-ajax.php\",\n                type: 'POST',\n                data: {\n                    action: 'ht_fetch_meals',\n                    nonce: \"bb379bebcb\",\n                    plan_type: selectedPlanKey,\n                    lang: langCode\n                },\n                success: function(res) {\n                    $('#ht-menu-loader').hide();\n                    $('#ht-weeks-wrapper').show();\n                    if(res.success && res.data) {\n                        fetchedMeals = res.data;\n                        currentWeek = 1;\n                        buildWeekIndicators();\n                        buildAllWeeksDOM();\n                        updateWeekView();\n                    }\n                }\n            });\n        }\n\n        \/\/ --- Build Dynamic Week Indicators ---\n        function buildWeekIndicators() {\n            let pillsHtml = '';\n            for(let i = 1; i <= selectedPlanTotalWeeks; i++) {\n                let pillText = isArabic ? `\u0627\u0644\u0623\u0633\u0628\u0648\u0639 ${i}` : `Week ${i}`;\n                let activeClass = (i === 1) ? 'active' : '';\n                pillsHtml += `<span class=\"ht-indicator-pill ${activeClass}\" data-week=\"${i}\">${pillText}<\/span>`;\n                if(i < selectedPlanTotalWeeks) {\n                    pillsHtml += `<span class=\"ht-indicator-line\"><\/span>`;\n                }\n            }\n            $('#ht-week-indicators-holder').html(pillsHtml);\n        }\n\n        \/\/ --- Render Weeks DOM (Full Combo or Single) ---\n        function buildAllWeeksDOM() {\n            let html = '';\n            let isFullPlan = (selectedPlanKey === 'Full');\n\n            for(let wIdx = 0; wIdx < selectedPlanTotalWeeks; wIdx++) {\n                let weekNum = wIdx + 1;\n                let wName = `Week ${weekNum}`;\n                html += `<div class=\"ht-week-group\" id=\"ht-week-group-${weekNum}\" style=\"display:none;\">`;\n\n                daysMap.forEach(dayObj => {\n                    let dayNameText = isArabic ? dayObj.ar : dayObj.en;\n                    \n                    html += `\n                    <div class=\"ht-day-block\">\n                        <div class=\"ht-day-heading\">\n                            <span class=\"ht-day-dot\"><\/span> ${dayNameText}\n                        <\/div>`;\n\n                    if (isFullPlan) {\n                        \/\/ SECTION 1: BREAKFAST\n                        html += `\n                        <div class=\"ht-meal-slot-label breakfast-label\">\ud83c\udf73 ${isArabic ? '\u0648\u062c\u0628\u0629 \u0627\u0644\u0625\u0641\u0637\u0627\u0631 (\u0627\u062e\u062a\u0631 \u0648\u062c\u0628\u0629)' : 'Breakfast (Pick 1)'}<\/div>\n                        <div class=\"ht-day-meals-grid\" data-week=\"${weekNum}\" data-day=\"${dayObj.key}\" data-meal-type=\"Breakfast\">\n                            ${renderMealCards(wName, dayObj.key, 'Breakfast', weekNum)}\n                        <\/div>`;\n\n                        \/\/ SECTION 2: LUNCH\n                        html += `\n                        <div class=\"ht-meal-slot-label lunch-label\">\ud83c\udf71 ${isArabic ? '\u0648\u062c\u0628\u0629 \u0627\u0644\u063a\u062f\u0627\u0621 (\u0627\u062e\u062a\u0631 \u0648\u062c\u0628\u0629)' : 'Lunch (Pick 1)'}<\/div>\n                        <div class=\"ht-day-meals-grid\" data-week=\"${weekNum}\" data-day=\"${dayObj.key}\" data-meal-type=\"Lunch\">\n                            ${renderMealCards(wName, dayObj.key, 'Lunch', weekNum)}\n                        <\/div>`;\n                    } else {\n                        \/\/ SINGLE PLAN GRID\n                        let slotIcon = (selectedPlanKey === 'Breakfast') ? '\ud83c\udf73' : '\ud83c\udf71';\n                        let slotTitle = (selectedPlanKey === 'Breakfast') ? (isArabic ? '\u0648\u062c\u0628\u0629 \u0627\u0644\u0625\u0641\u0637\u0627\u0631' : 'Breakfast') : (isArabic ? '\u0648\u062c\u0628\u0629 \u0627\u0644\u063a\u062f\u0627\u0621' : 'Lunch');\n                        html += `\n                        <div class=\"ht-meal-slot-label ${selectedPlanKey === 'Breakfast' ? 'breakfast-label' : 'lunch-label'}\">${slotIcon} ${slotTitle}<\/div>\n                        <div class=\"ht-day-meals-grid\" data-week=\"${weekNum}\" data-day=\"${dayObj.key}\" data-meal-type=\"${selectedPlanKey}\">\n                            ${renderMealCards(wName, dayObj.key, selectedPlanKey, weekNum)}\n                        <\/div>`;\n                    }\n\n                    html += `<\/div>`; \/\/ End Day Block\n                });\n\n                html += `<\/div>`; \/\/ End Week Group\n            }\n\n            $('#ht-weeks-wrapper').html(html);\n\n            \/\/ Bind Card Selection (Select within its specific grid)\n            $('.ht-meal-option-card').on('click', function() {\n                if($(this).hasClass('disabled')) return;\n                $(this).closest('.ht-day-meals-grid').find('.ht-meal-option-card').removeClass('selected');\n                $(this).addClass('selected');\n            });\n        }\n\n        \/\/ Helper: Render individual cards\n        function renderMealCards(wName, dayKey, mealType, weekNum) {\n            let matchedMeals = fetchedMeals.filter(m => {\n                let matchesWeek = m.weeks && (m.weeks.includes(wName) || m.weeks.includes('All Weeks'));\n                let matchesDay = m.days && m.days.includes(dayKey);\n                let matchesType = m.meal_type === mealType;\n                return matchesWeek && matchesDay && matchesType;\n            });\n\n            let out = '';\n            let hasSelectedSafe = false;\n\n            matchedMeals.forEach((meal) => {\n                let hasAllergy = false;\n                if(childAllergies.length > 0 && meal.allergies) {\n                    hasAllergy = childAllergies.some(a => meal.allergies.includes(a));\n                }\n\n                let isSelectedClass = '';\n                if(!hasAllergy && !hasSelectedSafe) {\n                    isSelectedClass = 'selected';\n                    hasSelectedSafe = true;\n                }\n\n                let sidesText = meal.sides ? `<div class=\"ht-meal-sides-text\"><strong>${isArabic ? '\u0627\u0644\u062c\u0627\u0646\u0628\u064a:' : 'Side:'}<\/strong> ${meal.sides}<\/div>` : '';\n                let calText = meal.calories ? `<div class=\"ht-meal-cal-tag\">\ud83d\udd25 ${meal.calories} ${isArabic ? '\u0633\u0639\u0631\u0629' : 'kcal'}<\/div>` : '';\n\n                out += `\n                <div class=\"ht-meal-option-card ${isSelectedClass} ${hasAllergy ? 'disabled' : ''}\" \n                     data-meal-id=\"${meal.id}\" \n                     data-meal-name=\"${meal.name}\" \n                     data-meal-type=\"${meal.meal_type}\"\n                     data-week=\"${weekNum}\" \n                     data-day=\"${dayKey}\">\n                    <div class=\"ht-allergy-alert-badge\">\u26a0\ufe0f ${isArabic ? '\u0645\u0633\u0628\u0628 \u062d\u0633\u0627\u0633\u064a\u0629' : 'Allergen'}<\/div>\n                    <div class=\"ht-meal-thumb-wrap\">\n                        <img decoding=\"async\" src=\"${meal.image}\" alt=\"${meal.name}\" loading=\"lazy\" \/>\n                    <\/div>\n                    <div class=\"ht-meal-meta-box\">\n                        <div class=\"ht-meal-title-text\">${meal.name}<\/div>\n                        ${calText}\n                        ${sidesText}\n                    <\/div>\n                <\/div>`;\n            });\n\n            return out;\n        }\n\n        \/\/ --- Sequential Week View Updating ---\n        function updateWeekView() {\n            $('.ht-week-group').hide();\n            $('#ht-week-group-' + currentWeek).fadeIn(200);\n\n            $('.ht-indicator-pill').removeClass('active completed');\n            for(let i = 1; i <= selectedPlanTotalWeeks; i++) {\n                let pill = $('.ht-indicator-pill[data-week=\"'+i+'\"]');\n                if(i < currentWeek) pill.addClass('completed');\n                else if(i === currentWeek) pill.addClass('active');\n            }\n\n            let weekLabelAr = ['\u0627\u0644\u0623\u0648\u0644', '\u0627\u0644\u062b\u0627\u0646\u064a', '\u0627\u0644\u062b\u0627\u0644\u062b', '\u0627\u0644\u0631\u0627\u0628\u0639'];\n            let weekLabelEn = ['Week 1', 'Week 2', 'Week 3', 'Week 4'];\n            let badgeText = (selectedPlanKey === 'Full') ? (isArabic ? '(10 \u0648\u062c\u0628\u0627\u062a)' : '(10 Meals)') : (isArabic ? '(5 \u0648\u062c\u0628\u0627\u062a)' : '(5 Meals)');\n            \n            let labelText = isArabic ? `\u0627\u0644\u0623\u0633\u0628\u0648\u0639 ${weekLabelAr[currentWeek-1] || currentWeek} ${badgeText}` : `${weekLabelEn[currentWeek-1] || 'Week ' + currentWeek} ${badgeText}`;\n            $('#ht-current-week-display').text(labelText);\n\n            if(currentWeek === 1) {\n                $('#ht-week-prev-btn').text(isArabic ? '\u2b05\ufe0f \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0637\u0641\u0644' : '\u2b05\ufe0f Child Info');\n            } else {\n                $('#ht-week-prev-btn').text(isArabic ? '\u2b05\ufe0f \u0627\u0644\u0623\u0633\u0628\u0648\u0639 \u0627\u0644\u0633\u0627\u0628\u0642' : '\u2b05\ufe0f Previous Week');\n            }\n\n            if(currentWeek === selectedPlanTotalWeeks) {\n                $('#ht-week-next-btn').text(isArabic ? '\u0645\u0631\u0627\u062c\u0639\u0629 \u0648\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u2794' : 'Review & Confirm \u2794');\n            } else {\n                $('#ht-week-next-btn').text(isArabic ? '\u0627\u0644\u0623\u0633\u0628\u0648\u0639 \u0627\u0644\u062a\u0627\u0644\u064a \u2794' : 'Next Week \u2794');\n            }\n\n            $('html, body').animate({ scrollTop: $('#ht-wizard-app').offset().top - 30 }, 250);\n        }\n\n        $('#ht-week-next-btn').on('click', function() {\n            \/\/ Validation: Ensure every grid in the active week has 1 selection\n            let currentGrids = $(`#ht-week-group-${currentWeek} .ht-day-meals-grid`);\n            let missingGrids = 0;\n\n            currentGrids.each(function() {\n                if($(this).find('.ht-meal-option-card.selected').length === 0) {\n                    missingGrids++;\n                }\n            });\n\n            if(missingGrids > 0) {\n                let msg = (selectedPlanKey === 'Full') \n                    ? (isArabic ? '\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u0648\u062c\u0628\u0629 \u0625\u0641\u0637\u0627\u0631 \u0648\u0648\u062c\u0628\u0629 \u063a\u062f\u0627\u0621 \u0644\u0643\u0644 \u064a\u0648\u0645 \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0623\u0633\u0628\u0648\u0639.' : 'Please select both breakfast & lunch for each day this week.')\n                    : (isArabic ? '\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u0648\u062c\u0628\u0629 \u0644\u0643\u0644 \u064a\u0648\u0645 \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0623\u0633\u0628\u0648\u0639.' : 'Please select a meal for each day this week.');\n                alert(msg);\n                return;\n            }\n\n            if(currentWeek < selectedPlanTotalWeeks) {\n                currentWeek++;\n                updateWeekView();\n            } else {\n                buildSummaryScreen();\n                goToStep(4);\n            }\n        });\n\n        $('#ht-week-prev-btn').on('click', function() {\n            if(currentWeek > 1) {\n                currentWeek--;\n                updateWeekView();\n            } else {\n                goToStep(2);\n            }\n        });\n\n        \/\/ --- Step 4 Build Summary & Price Breakdown ---\n        function buildSummaryScreen() {\n            $('#summary-child-name').text($('#ht_child_name').val());\n            $('#summary-school-name').text($('#ht_school_name').val());\n            let periodSuffix = (selectedPlanInterval === 'week') ? (isArabic ? '\u0631.\u0633 \/ \u0623\u0633\u0628\u0648\u0639' : 'SAR \/ week') : (isArabic ? '\u0631.\u0633 \/ \u0634\u0647\u0631' : 'SAR \/ month');\n            $('#summary-plan-title').text(`${selectedPlanTitle} - ${selectedPlanPrice} ${periodSuffix}`);\n\n            let summaryHtml = '';\n            for(let w = 1; w <= selectedPlanTotalWeeks; w++) {\n                daysMap.forEach(d => {\n                    let grids = $(`#ht-week-group-${w} .ht-day-meals-grid[data-day=\"${d.key}\"]`);\n                    grids.each(function() {\n                        let selectedCard = $(this).find('.ht-meal-option-card.selected');\n                        if(selectedCard.length) {\n                            let mealName = selectedCard.data('meal-name');\n                            let mType = selectedCard.data('meal-type');\n                            let typeBadge = (mType === 'Breakfast') ? (isArabic ? '\ud83c\udf73 \u0625\u0641\u0637\u0627\u0631' : '\ud83c\udf73 Breakfast') : (isArabic ? '\ud83c\udf71 \u063a\u062f\u0627\u0621' : '\ud83c\udf71 Lunch');\n                            let dayTitle = isArabic ? d.ar : d.en;\n                            let weekPrefix = (selectedPlanTotalWeeks > 1) ? `${isArabic ? '\u0627\u0644\u0623\u0633\u0628\u0648\u0639' : 'Week'} ${w} - ` : '';\n                            \n                            summaryHtml += `\n                            <div class=\"ht-summary-item\">\n                                <strong>${weekPrefix}${dayTitle} [${typeBadge}]<\/strong>\n                                <span>${mealName}<\/span>\n                            <\/div>`;\n                        }\n                    });\n                });\n            }\n            $('#ht-summary-meals-list').html(summaryHtml);\n\n            \/\/ Update Price Breakdown\n            updatePricingUI();\n        }\n\n        function updatePricingUI() {\n            let currency = isArabic ? '\u0631.\u0633' : 'SAR';\n            $('#ht-base-price-display').text(`${selectedPlanPrice} ${currency}`);\n            \n            if(discountAmount > 0) {\n                $('.ht-discount-row').show();\n                $('#ht-discount-price-display').text(`-${discountAmount} ${currency}`);\n            } else {\n                $('.ht-discount-row').hide();\n            }\n\n            let finalPrice = Math.max(0, selectedPlanPrice - discountAmount);\n            $('#ht-final-total-display').text(`${finalPrice} ${currency}`);\n        }\n\n        \/\/ --- Apply Coupon Code Handler ---\n        $('#ht-apply-coupon-btn').on('click', function() {\n            let code = $('#ht-coupon-code-input').val().trim();\n            if(!code) {\n                $('#ht-coupon-response-msg').html(`<span style=\"color:#ef4444;\">${isArabic ? '\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0643\u0648\u062f \u0627\u0644\u062e\u0635\u0645.' : 'Please enter coupon code.'}<\/span>`);\n                return;\n            }\n\n            let btn = $(this);\n            btn.prop('disabled', true).text(isArabic ? '\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0642\u0642...' : 'Checking...');\n\n            $.ajax({\n                url: \"https:\/\/www.myhappytummies.org\/mhapptmms\/wp-admin\/admin-ajax.php\",\n                type: 'POST',\n                data: {\n                    action: 'ht_apply_coupon',\n                    nonce: \"bb379bebcb\",\n                    coupon_code: code,\n                    plan_id: selectedPlanId,\n                    lang: langCode\n                },\n                success: function(res) {\n                    btn.prop('disabled', false).text(isArabic ? '\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062e\u0635\u0645' : 'Apply');\n                    if(res.success) {\n                        appliedCouponCode = res.data.coupon_code;\n                        discountAmount = parseFloat(res.data.discount_amount);\n                        $('#ht-coupon-response-msg').html(`<span style=\"color:#10b981;\">\u2713 ${res.data.message} (${discountAmount} ${isArabic ? '\u0631.\u0633 \u062e\u0635\u0645' : 'SAR OFF'})<\/span>`);\n                        updatePricingUI();\n                    } else {\n                        appliedCouponCode = '';\n                        discountAmount = 0;\n                        $('#ht-coupon-response-msg').html(`<span style=\"color:#ef4444;\">\u2717 ${res.data.message}<\/span>`);\n                        updatePricingUI();\n                    }\n                },\n                error: function() {\n                    btn.prop('disabled', false).text(isArabic ? '\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062e\u0635\u0645' : 'Apply');\n                    $('#ht-coupon-response-msg').html(`<span style=\"color:#ef4444;\">${isArabic ? '\u062e\u0637\u0623 \u0641\u064a \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u062e\u0627\u062f\u0645.' : 'Server error.'}<\/span>`);\n                }\n            });\n        });\n\n        \/\/ --- Final Checkout Process ---\n        $('#ht-final-checkout-btn').on('click', function() {\n            let selectedMealIds = [];\n            $('.ht-meal-option-card.selected').each(function() {\n                selectedMealIds.push($(this).data('meal-id'));\n            });\n\n            let mealsPerDay = (selectedPlanKey === 'Full') ? 2 : 1;\n            let minMealsRequired = selectedPlanTotalWeeks * 5 * mealsPerDay;\n\n            if(selectedMealIds.length < minMealsRequired) {\n                alert(isArabic ? '\u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0627\u062e\u062a\u064a\u0627\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0648\u062c\u0628\u0627\u062a \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u064a\u0627\u0645.' : 'Please make sure all meals are selected.');\n                return;\n            }\n\n            let btn = $(this);\n            btn.prop('disabled', true).find('span').text(isArabic ? '\u062c\u0627\u0631\u064a \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0637\u0644\u0628 \u0648\u0627\u0644\u0633\u0644\u0629... \u23f3' : 'Adding to Cart & Redirecting... \u23f3');\n\n            $.ajax({\n                url: \"https:\/\/www.myhappytummies.org\/mhapptmms\/wp-admin\/admin-ajax.php\",\n                type: 'POST',\n                data: {\n                    action: 'ht_process_checkout',\n                    nonce: \"bb379bebcb\",\n                    plan_id: selectedPlanId,\n                    child_name: $('#ht_child_name').val(),\n                    school: $('#ht_school_name').val(),\n                    allergies: childAllergies.join(', '),\n                    selected_meals: selectedMealIds,\n                    coupon_code: appliedCouponCode,\n                    lang: langCode\n                },\n                success: function(res) {\n                    if(res.success && res.data.checkout_url) {\n                        window.location.href = res.data.checkout_url;\n                    } else {\n                        alert(res.data && res.data.message ? res.data.message : '\u062d\u062f\u062b \u062e\u0637\u0623 \u0641\u064a \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0637\u0644\u0628.');\n                        btn.prop('disabled', false).find('span').text(isArabic ? '\u062a\u0623\u0643\u064a\u062f \u0648\u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0644\u0644\u062f\u0641\u0639 \ud83d\udcb3' : 'Confirm & Proceed to Checkout \ud83d\udcb3');\n                    }\n                },\n                error: function() {\n                    alert(isArabic ? '\u0641\u0634\u0644 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u062e\u0627\u062f\u0645. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u062c\u062f\u062f\u0627\u064b.' : 'Server error. Please try again.');\n                    btn.prop('disabled', false).find('span').text(isArabic ? '\u062a\u0623\u0643\u064a\u062f \u0648\u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0644\u0644\u062f\u0641\u0639 \ud83d\udcb3' : 'Confirm & Proceed to Checkout \ud83d\udcb3');\n                }\n            });\n        });\n\n    });\n    <\/script>\n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"\u0628\u0627\u0642\u0629 \u0645\u0645\u064a\u0632\u0629 \u0644\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0645\u062f\u0631\u0633\u0629","protected":false},"author":56,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-4235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.myhappytummies.org\/ar\/wp-json\/wp\/v2\/pages\/4235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.myhappytummies.org\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.myhappytummies.org\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.myhappytummies.org\/ar\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/www.myhappytummies.org\/ar\/wp-json\/wp\/v2\/comments?post=4235"}],"version-history":[{"count":5,"href":"https:\/\/www.myhappytummies.org\/ar\/wp-json\/wp\/v2\/pages\/4235\/revisions"}],"predecessor-version":[{"id":4252,"href":"https:\/\/www.myhappytummies.org\/ar\/wp-json\/wp\/v2\/pages\/4235\/revisions\/4252"}],"wp:attachment":[{"href":"https:\/\/www.myhappytummies.org\/ar\/wp-json\/wp\/v2\/media?parent=4235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}