{"id":3201,"date":"2025-07-02T09:07:18","date_gmt":"2025-07-02T09:07:18","guid":{"rendered":"https:\/\/noamdesigns.com\/he\/?page_id=3201"},"modified":"2026-01-10T09:02:34","modified_gmt":"2026-01-10T09:02:34","slug":"package-form","status":"publish","type":"page","link":"https:\/\/noamdesigns.com\/he\/package-form\/","title":{"rendered":"\u05e9\u05d0\u05dc\u05d5\u05df \u05d7\u05d1\u05d9\u05dc\u05d5\u05ea"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tNOAM DESIGN<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\u05de\u05d9\u05ea\u05d5\u05d2 \u05d5\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d0\u05d9\u05e8\u05d5\u05e2\u05d9\u05dd | \u05d4\u05e4\u05e7\u05ea \u05d3\u05e4\u05d5\u05e1 | \u05d9\u05e6\u05d9\u05e8\u05ea \u05ea\u05d5\u05db\u05df<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u05d8\u05d5\u05e4\u05e1 \u05d4\u05d6\u05de\u05e0\u05d4 - \u05e0\u05e2\u05dd \u05d3\u05d9\u05d6\u05d9\u05d9\u05df<\/title>\r\n <!-- \u05e4\u05d5\u05e0\u05d8\u05d9\u05dd -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Heebo:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n <!-- \u05d0\u05d9\u05d9\u05e7\u05d5\u05e0\u05d9\u05dd -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <style>\r\n \/* Scoped CSS to prevent conflicts with site theme *\/\r\n #noam-form-scope {\r\n --primary-color: #b1917d;\r\n --primary-dark: #8c7363;\r\n --primary-light: #fdf8f4;\r\n --white: #ffffff;\r\n --text-dark: #2d3436;\r\n --text-gray: #636e72;\r\n --border-color: #e0e0e0;\r\n --error-color: #b1917d; \/* Matches Brand Color per request *\/\r\n --success-color: #588157; \/* Green for discount *\/\r\n --shadow-sm: 0 4px 6px rgba(0,0,0,0.02);\r\n --shadow-active: 0 8px 16px rgba(177, 145, 125, 0.15);\r\n --radius: 16px;\r\n \r\n font-family: 'FbShiri', 'Heebo', sans-serif !important;\r\n direction: rtl !important;\r\n text-align: right !important;\r\n background: linear-gradient(135deg, #fbf9f7 0%, #f0eae4 100%) !important;\r\n color: var(--text-dark) !important;\r\n line-height: 1.6 !important;\r\n width: 100%;\r\n display: block;\r\n }\r\n\r\n @font-face {\r\n font-family: 'FbShiri';\r\n src: url('\/wp-content\/uploads\/sites\/3\/Font\/FbShiri.ttf') format('truetype');\r\n font-display: swap;\r\n }\r\n\r\n \/* --- \u05d4\u05d2\u05d3\u05e8\u05ea \u05e4\u05d5\u05e0\u05d8 \u05de\u05d5\u05ea\u05d0\u05dd \u05d0\u05d9\u05e9\u05d9\u05ea (\u05d2\u05d1\u05e8\u05ea \u05dc\u05d5\u05d9\u05df) --- *\/\r\n @font-face {\r\n font-family: 'Gveret Levin';\r\n src: url('https:\/\/noamdesigns.com\/he\/wp-content\/uploads\/sites\/3\/2025\/12\/GveretLevinAlefAlefAlef-Regular.woff') format('woff');\r\n font-weight: normal;\r\n font-style: normal;\r\n }\r\n\r\n \/* Aggressive Reset inside the scope *\/\r\n #noam-form-scope * {\r\n box-sizing: border-box !important;\r\n outline: none !important;\r\n font-family: inherit !important;\r\n }\r\n\r\n \/* Utility class to hide elements forcibly *\/\r\n #noam-form-scope .d-none-important {\r\n display: none !important;\r\n }\r\n\r\n \/* FIX: Ensure FontAwesome icons use the correct font family *\/\r\n #noam-form-scope i, \r\n #noam-form-scope i[class*=\"fa-\"] {\r\n font-family: \"Font Awesome 6 Free\" !important;\r\n \/* Ensure correct weight for solid icons *\/\r\n font-weight: 900 !important; \r\n }\r\n #noam-form-scope i.fa-regular {\r\n font-weight: 400 !important;\r\n }\r\n\r\n #noam-form-scope .container {\r\n max-width: 700px !important;\r\n margin: 0 auto !important;\r\n padding: 20px 20px 60px !important;\r\n }\r\n\r\n #noam-form-scope .form-card {\r\n background: var(--white) !important;\r\n border-radius: var(--radius) !important;\r\n padding: 40px !important;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;\r\n border: 1px solid rgba(177, 145, 125, 0.1) !important;\r\n position: relative !important;\r\n margin-top: 20px !important;\r\n }\r\n\r\n \/* Progress Bar *\/\r\n #noam-form-scope .progress-container {\r\n margin-bottom: 40px !important;\r\n }\r\n\r\n #noam-form-scope .progress-header {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n align-items: center !important;\r\n margin-bottom: 12px !important;\r\n font-size: 0.9rem !important;\r\n font-weight: 600 !important;\r\n color: var(--primary-dark) !important;\r\n }\r\n\r\n #noam-form-scope .progress-bar-wrapper {\r\n position: relative !important;\r\n width: 100% !important;\r\n height: 8px !important;\r\n background-color: #eee !important;\r\n border-radius: 10px !important;\r\n overflow: visible !important;\r\n }\r\n\r\n #noam-form-scope .progress-fill {\r\n height: 100% !important;\r\n background: linear-gradient(to left, var(--primary-color), var(--primary-dark)) !important;\r\n border-radius: 10px !important;\r\n width: 13%;\r\n transition: width 0.5s ease !important;\r\n position: relative !important;\r\n }\r\n\r\n #noam-form-scope .progress-ring {\r\n position: absolute !important;\r\n left: 0 !important;\r\n top: 50% !important;\r\n transform: translate(-50%, -50%) !important;\r\n width: 36px !important;\r\n height: 36px !important;\r\n background: white !important;\r\n border: 2px solid var(--primary-color) !important;\r\n border-radius: 50% !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n color: var(--primary-color) !important;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;\r\n transition: left 0.5s ease !important;\r\n z-index: 2 !important;\r\n }\r\n\r\n \/* Custom Two Rings Icon CSS *\/\r\n #noam-form-scope .rings-icon-wrapper {\r\n position: relative !important;\r\n width: 24px !important;\r\n height: 18px !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n }\r\n #noam-form-scope .rings-icon-wrapper i {\r\n font-size: 14px !important;\r\n position: absolute !important;\r\n color: var(--primary-color) !important;\r\n }\r\n #noam-form-scope .rings-icon-wrapper i:first-child {\r\n left: 0 !important;\r\n top: 2px !important;\r\n }\r\n #noam-form-scope .rings-icon-wrapper i:last-child {\r\n right: 0 !important;\r\n top: -2px !important;\r\n }\r\n\r\n #noam-form-scope .card-rings-wrapper {\r\n position: relative !important;\r\n width: 40px !important;\r\n height: 30px !important;\r\n margin: 0 auto 12px !important;\r\n color: var(--primary-color) !important;\r\n transition: transform 0.3s ease !important;\r\n }\r\n #noam-form-scope .card-rings-wrapper i {\r\n font-size: 24px !important;\r\n position: absolute !important;\r\n color: var(--primary-color) !important;\r\n }\r\n #noam-form-scope .card-rings-wrapper i:first-child {\r\n left: 0 !important;\r\n top: 4px !important;\r\n }\r\n #noam-form-scope .card-rings-wrapper i:last-child {\r\n right: 0 !important;\r\n top: -4px !important;\r\n }\r\n #noam-form-scope .selection-card.selected .card-rings-wrapper {\r\n transform: scale(1.1) !important;\r\n }\r\n\r\n #noam-form-scope .step-title {\r\n text-align: center !important;\r\n font-size: 0.9rem !important;\r\n color: var(--text-gray) !important;\r\n margin-top: 15px !important;\r\n font-weight: 500 !important;\r\n }\r\n\r\n \/* Steps *\/\r\n #noam-form-scope .step {\r\n display: none;\r\n animation: fadeIn 0.5s ease;\r\n }\r\n\r\n #noam-form-scope .step.active { display: block !important; }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n #noam-form-scope .step-header {\r\n text-align: center !important;\r\n margin-bottom: 30px !important;\r\n }\r\n\r\n #noam-form-scope .step-header h2 {\r\n font-size: 1.6rem !important;\r\n color: var(--text-dark) !important;\r\n margin-bottom: 8px !important;\r\n line-height: 1.3 !important;\r\n }\r\n\r\n #noam-form-scope .step-header p {\r\n color: var(--text-gray) !important;\r\n font-size: 1rem !important;\r\n }\r\n \r\n #noam-form-scope .intro-text {\r\n font-size: 1.05rem !important;\r\n line-height: 1.7 !important;\r\n color: var(--text-dark) !important;\r\n margin-bottom: 25px !important;\r\n white-space: pre-line !important;\r\n text-align: right !important;\r\n }\r\n \r\n #noam-form-scope .form-start-title {\r\n font-family: 'Gveret Levin', cursive !important;\r\n font-size: 1.8rem !important; \r\n font-weight: normal !important; \r\n margin-bottom: 15px !important; \r\n color: var(--primary-dark) !important;\r\n text-align: center !important;\r\n border-top: 1px solid #eee !important;\r\n padding-top: 20px !important;\r\n }\r\n\r\n \/* Utility class to force Gveret Levin Font *\/\r\n #noam-form-scope .font-gveret-levin {\r\n font-family: 'Gveret Levin', cursive !important;\r\n }\r\n\r\n \/* Inputs *\/\r\n #noam-form-scope .form-group { margin-bottom: 25px !important; text-align: right !important; }\r\n\r\n #noam-form-scope .form-label {\r\n display: block !important;\r\n margin-bottom: 8px !important;\r\n font-weight: 500 !important;\r\n color: var(--text-dark) !important;\r\n text-align: right !important;\r\n }\r\n\r\n #noam-form-scope .form-input, \r\n #noam-form-scope .textarea {\r\n width: 100% !important;\r\n padding: 14px !important;\r\n border: 1px solid var(--border-color) !important;\r\n border-radius: 10px !important;\r\n font-size: 1rem !important;\r\n transition: all 0.3s ease !important;\r\n background: #fafafa !important;\r\n color: var(--text-dark) !important;\r\n font-family: inherit !important;\r\n text-align: right !important;\r\n }\r\n\r\n #noam-form-scope .form-input:focus, \r\n #noam-form-scope .textarea:focus {\r\n border-color: var(--primary-color) !important;\r\n background: white !important;\r\n box-shadow: 0 0 0 3px rgba(177, 145, 125, 0.15) !important;\r\n }\r\n \r\n \/* Consent Container Style *\/\r\n #noam-form-scope .consent-container {\r\n margin-top: 20px !important;\r\n color: var(--text-dark) !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n }\r\n \r\n #noam-form-scope .consent-container label {\r\n display: flex !important;\r\n align-items: center !important;\r\n cursor: pointer !important;\r\n width: 100% !important;\r\n }\r\n \r\n #noam-form-scope .consent-container span, \r\n #noam-form-scope .consent-container a {\r\n font-size: 15px !important; \r\n line-height: 1.4 !important;\r\n }\r\n\r\n #noam-form-scope .consent-container input {\r\n width: 18px !important;\r\n height: 18px !important;\r\n margin-left: 10px !important; \r\n accent-color: var(--primary-color) !important;\r\n flex-shrink: 0 !important; \r\n margin-top: 0 !important;\r\n }\r\n\r\n \/* Cards Selection *\/\r\n #noam-form-scope .card-grid {\r\n display: grid !important;\r\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;\r\n gap: 15px !important;\r\n margin-bottom: 25px !important;\r\n }\r\n\r\n \/* NEW: Centered Flex Grid for Step 3 - solves centering issue *\/\r\n #noam-form-scope .centered-flex-row {\r\n display: flex !important;\r\n justify-content: center !important;\r\n gap: 15px !important;\r\n width: 100% !important;\r\n }\r\n\r\n #noam-form-scope .selection-card {\r\n position: relative !important;\r\n background: #fff !important;\r\n border: 2px solid transparent !important;\r\n border-color: #f0f0f0 !important;\r\n border-radius: 14px !important;\r\n padding: 20px 15px !important;\r\n text-align: center !important;\r\n cursor: pointer !important;\r\n transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n height: 100% !important;\r\n box-shadow: none !important; \r\n }\r\n\r\n #noam-form-scope .selection-card:hover {\r\n border-color: #dcdcdc !important;\r\n transform: translateY(-2px) !important;\r\n }\r\n\r\n #noam-form-scope .selection-card.selected {\r\n border-color: var(--primary-color) !important;\r\n background-color: var(--primary-light) !important;\r\n box-shadow: var(--shadow-active) !important;\r\n }\r\n \r\n #noam-form-scope .selection-card::after {\r\n content: '\\f00c' !important;\r\n font-family: \"Font Awesome 6 Free\" !important;\r\n font-weight: 900 !important;\r\n position: absolute !important;\r\n top: 10px !important;\r\n left: 10px !important;\r\n font-size: 14px !important;\r\n color: white !important;\r\n background: var(--primary-color) !important;\r\n width: 24px !important;\r\n height: 24px !important;\r\n border-radius: 50% !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n opacity: 0 !important;\r\n transform: scale(0) !important;\r\n transition: all 0.3s ease !important;\r\n }\r\n\r\n #noam-form-scope .selection-card.selected::after {\r\n opacity: 1 !important;\r\n transform: scale(1) !important;\r\n }\r\n\r\n #noam-form-scope .selection-card .card-icon {\r\n font-size: 26px !important;\r\n margin-bottom: 12px !important;\r\n color: var(--primary-color) !important;\r\n transition: transform 0.3s ease !important;\r\n display: block !important;\r\n }\r\n\r\n #noam-form-scope .selection-card.selected .card-icon {\r\n transform: scale(1.1) !important;\r\n }\r\n\r\n #noam-form-scope .selection-card .card-title {\r\n font-weight: 600 !important;\r\n font-size: 1rem !important;\r\n color: var(--text-dark) !important;\r\n margin-bottom: 5px !important;\r\n line-height: 1.3 !important;\r\n display: block !important;\r\n }\r\n\r\n #noam-form-scope .selection-card .card-note {\r\n font-size: 0.8rem !important;\r\n color: #999 !important;\r\n margin-top: 4px !important;\r\n line-height: 1.3 !important;\r\n display: block !important;\r\n }\r\n\r\n #noam-form-scope .selection-card .card-price {\r\n background: #f3f3f3 !important;\r\n color: #666 !important;\r\n padding: 3px 8px !important;\r\n border-radius: 20px !important;\r\n font-size: 0.8rem !important;\r\n margin-top: 8px !important;\r\n font-weight: 500 !important;\r\n display: inline-block !important;\r\n }\r\n \r\n #noam-form-scope .selection-card.selected .card-price {\r\n background: white !important;\r\n color: var(--primary-dark) !important;\r\n border: 1px solid rgba(177, 145, 125, 0.2) !important;\r\n }\r\n\r\n #noam-form-scope .selection-card input {\r\n position: absolute !important;\r\n opacity: 0 !important;\r\n width: 0 !important;\r\n height: 0 !important;\r\n }\r\n\r\n \/* Dynamic Inputs *\/\r\n #noam-form-scope .other-input-group { display: none; margin-top: 15px !important; }\r\n #noam-form-scope .other-input-group.show { display: block !important; animation: fadeIn 0.3s !important; }\r\n\r\n \/* Price Summary Step 6 *\/\r\n #noam-form-scope .price-summary-card {\r\n background: var(--primary-light) !important;\r\n border: 2px dashed var(--primary-color) !important;\r\n border-radius: 16px !important;\r\n padding: 30px !important;\r\n text-align: center !important;\r\n margin-bottom: 30px !important;\r\n }\r\n\r\n #noam-form-scope .price-summary-card h3 {\r\n font-size: 1.1rem !important;\r\n color: var(--primary-dark) !important;\r\n margin-bottom: 10px !important;\r\n font-weight: 600 !important;\r\n }\r\n\r\n #noam-form-scope .price-amount {\r\n font-size: 2.2rem !important;\r\n font-weight: 700 !important;\r\n color: var(--text-dark) !important;\r\n direction: ltr !important; \/* Keep numbers correct *\/\r\n unicode-bidi: embed !important;\r\n }\r\n \r\n #noam-form-scope .old-price {\r\n text-decoration: line-through !important;\r\n font-size: 1.4rem !important;\r\n color: #999 !important;\r\n margin-left: 10px !important;\r\n }\r\n \r\n #noam-form-scope .discount-badge {\r\n color: var(--success-color) !important; \/* Greenish *\/\r\n font-weight: bold !important;\r\n font-size: 0.9rem !important;\r\n margin-top: 5px !important;\r\n display: block !important;\r\n }\r\n \r\n #noam-form-scope .shipping-note {\r\n margin-top: 15px !important;\r\n padding-top: 15px !important;\r\n border-top: 1px dashed rgba(177,145,125,0.3) !important;\r\n font-weight: 600 !important;\r\n color: var(--text-dark) !important;\r\n font-size: 0.95rem !important;\r\n }\r\n\r\n \/* Products List in Summary *\/\r\n #noam-form-scope .selected-products-list {\r\n list-style: none !important;\r\n text-align: right !important;\r\n background: white !important;\r\n border-radius: 12px !important;\r\n padding: 15px 20px !important;\r\n margin: 20px auto !important;\r\n max-width: 400px !important;\r\n border: 1px solid #eee !important;\r\n }\r\n #noam-form-scope .selected-products-list li {\r\n padding: 8px 0 !important;\r\n border-bottom: 1px solid #f5f5f5 !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n gap: 10px !important;\r\n font-size: 0.95rem !important;\r\n color: var(--text-dark) !important;\r\n }\r\n #noam-form-scope .selected-products-list li:last-child { border-bottom: none !important; }\r\n #noam-form-scope .selected-products-list i { color: var(--primary-color) !important; font-size: 0.9rem !important; }\r\n\r\n \/* Flow Arrow *\/\r\n #noam-form-scope .flow-arrow {\r\n text-align: center !important;\r\n margin: 10px 0 25px !important;\r\n color: var(--primary-color) !important;\r\n font-size: 1.5rem !important;\r\n animation: bounce 2s infinite;\r\n }\r\n @keyframes bounce {\r\n 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}\r\n 40% {transform: translateY(-10px);}\r\n 60% {transform: translateY(-5px);}\r\n }\r\n\r\n \/* Dates & Times *\/\r\n #noam-form-scope .date-options {\r\n display: flex !important;\r\n gap: 10px !important;\r\n margin-bottom: 20px !important;\r\n }\r\n \r\n #noam-form-scope .date-option {\r\n flex: 1 !important;\r\n border: 1px solid var(--border-color) !important;\r\n border-radius: 10px !important;\r\n padding: 15px !important;\r\n text-align: center !important;\r\n cursor: pointer !important;\r\n background: white !important;\r\n color: var(--text-dark) !important;\r\n }\r\n \r\n #noam-form-scope .date-option.selected {\r\n background: var(--primary-color) !important;\r\n border-color: var(--primary-color) !important;\r\n color: white !important;\r\n }\r\n \r\n #noam-form-scope .date-option.selected .day-date { color: rgba(255,255,255,0.9) !important; }\r\n\r\n #noam-form-scope .time-slots-grid {\r\n display: flex !important;\r\n flex-wrap: nowrap !important; \/* Forces single line desktop *\/\r\n gap: 6px !important;\r\n justify-content: space-between !important;\r\n direction: ltr !important; \r\n overflow-x: auto !important; \r\n padding-bottom: 5px !important; \r\n -webkit-overflow-scrolling: touch !important;\r\n }\r\n\r\n #noam-form-scope .time-slot {\r\n background: #f9f9f9 !important;\r\n border: 1px solid #eee !important;\r\n border-radius: 30px !important;\r\n padding: 8px 10px !important; \r\n font-size: 0.85rem !important; \r\n cursor: pointer !important;\r\n transition: all 0.2s !important;\r\n direction: ltr !important; \r\n unicode-bidi: embed !important;\r\n white-space: nowrap !important; \r\n flex: 1 0 auto !important; \r\n text-align: center !important;\r\n color: var(--text-dark) !important;\r\n }\r\n \r\n #noam-form-scope .time-slot.selected {\r\n background: var(--primary-color) !important;\r\n color: white !important;\r\n border-color: var(--primary-color) !important;\r\n }\r\n\r\n \/* Single Product Redirect *\/\r\n #noam-form-scope .single-product-section { text-align: center !important; padding: 20px 0 !important; }\r\n \r\n #noam-form-scope .product-icon-large {\r\n width: 80px !important;\r\n height: 80px !important;\r\n background: var(--primary-light) !important;\r\n border-radius: 50% !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n margin: 0 auto 20px !important;\r\n font-size: 35px !important;\r\n color: var(--primary-color) !important;\r\n }\r\n \r\n #noam-form-scope .btn-product {\r\n background: var(--primary-color) !important;\r\n color: white !important;\r\n padding: 15px 35px !important;\r\n border-radius: 50px !important;\r\n margin-top: 25px !important;\r\n border: none !important;\r\n cursor: pointer !important;\r\n font-size: 1rem !important;\r\n transition: background 0.2s !important;\r\n text-decoration: none !important;\r\n display: inline-block !important;\r\n }\r\n #noam-form-scope .btn-product:hover { background: var(--primary-dark) !important; }\r\n\r\n \/* Custom Info Note Styling *\/\r\n #noam-form-scope .info-note {\r\n background-color: var(--primary-light) !important; \r\n border: 1px solid rgba(177, 145, 125, 0.3) !important; \r\n border-radius: 8px !important;\r\n padding: 12px 16px !important;\r\n margin-top: 25px !important;\r\n display: flex !important;\r\n gap: 12px !important;\r\n text-align: right !important;\r\n align-items: flex-start !important;\r\n }\r\n #noam-form-scope .info-note i {\r\n color: var(--primary-color) !important; \r\n font-size: 16px !important;\r\n margin-top: 2px !important;\r\n flex-shrink: 0 !important;\r\n }\r\n #noam-form-scope .info-note-content {\r\n font-size: 12px !important; \r\n color: var(--primary-dark) !important; \r\n line-height: 1.6 !important;\r\n }\r\n #noam-form-scope .manual-thickness {\r\n text-shadow: 0.5px 0 0 currentColor !important;\r\n color: var(--text-dark) !important;\r\n }\r\n #noam-form-scope .info-note a {\r\n color: var(--primary-dark) !important;\r\n text-decoration: underline !important;\r\n font-weight: 500 !important;\r\n font-size: inherit !important; \r\n }\r\n\r\n \/* Buttons *\/\r\n #noam-form-scope .button-container {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n margin-top: 40px !important;\r\n flex-direction: row-reverse !important;\r\n }\r\n\r\n #noam-form-scope .btn {\r\n padding: 14px 30px !important;\r\n border-radius: 10px !important;\r\n font-weight: 600 !important;\r\n font-size: 1rem !important;\r\n cursor: pointer !important;\r\n border: none !important;\r\n transition: all 0.2s !important;\r\n text-decoration: none !important;\r\n }\r\n\r\n #noam-form-scope .btn-primary {\r\n background: var(--primary-color) !important;\r\n color: white !important;\r\n }\r\n #noam-form-scope .btn-primary:hover { background: var(--primary-dark) !important; transform: translateY(-2px) !important; }\r\n\r\n #noam-form-scope .btn-secondary {\r\n background: transparent !important;\r\n border: 1px solid var(--primary-color) !important;\r\n color: var(--primary-color) !important;\r\n }\r\n #noam-form-scope .btn-secondary:hover { background: var(--primary-light) !important; }\r\n\r\n \/* Toasts - Centered *\/\r\n #noam-form-scope .toast {\r\n position: fixed !important;\r\n top: 50% !important;\r\n left: 50% !important;\r\n transform: translate(-50%, -50%) scale(0.9) !important;\r\n padding: 20px 30px !important;\r\n border-radius: 16px !important;\r\n opacity: 0;\r\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; \r\n z-index: 10000 !important;\r\n text-align: center !important;\r\n font-size: 1rem !important;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;\r\n pointer-events: none !important; \r\n max-width: 90% !important;\r\n width: auto !important;\r\n }\r\n #noam-form-scope .toast.show { \r\n transform: translate(-50%, -50%) scale(1) !important; \r\n opacity: 1 !important; \r\n pointer-events: auto !important;\r\n }\r\n \r\n #noam-form-scope .error-toast { background: var(--error-color) !important; color: white !important; }\r\n \r\n #noam-form-scope .upsell-toast { \r\n background: white !important; \r\n color: var(--text-dark) !important; \r\n border: 2px solid var(--primary-color) !important;\r\n border-top: 6px solid var(--primary-color) !important;\r\n }\r\n\r\n \/* --- MOBILE ADJUSTMENTS --- *\/\r\n @media (max-width: 600px) {\r\n #noam-form-scope .form-card { padding: 20px 15px !important; }\r\n #noam-form-scope .card-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }\r\n #noam-form-scope .selection-card { padding: 10px 4px !important; }\r\n \r\n \/* Step 3 center flex on mobile *\/\r\n #noam-form-scope .centered-flex-row { gap: 10px !important; }\r\n\r\n #noam-form-scope .date-options { flex-direction: row !important; gap: 5px !important; }\r\n #noam-form-scope .date-option { padding: 10px 5px !important; font-size: 0.85rem !important; }\r\n \r\n #noam-form-scope .button-container { flex-direction: column !important; gap: 10px !important; margin-top: 25px !important; }\r\n \r\n #noam-form-scope .btn { width: 100% !important; padding: 12px !important; font-size: 0.95rem !important; }\r\n\r\n \/* Text reductions *\/\r\n #noam-form-scope .step[data-step=\"1\"] .step-header h2 { font-size: 1.4rem !important; line-height: 1.2 !important; }\r\n #noam-form-scope .step-header h2 { font-size: 1.35rem !important; margin-bottom: 5px !important; }\r\n #noam-form-scope .step-header p { font-size: 0.9rem !important; }\r\n #noam-form-scope .intro-text { font-size: 0.9rem !important; line-height: 1.5 !important; margin-bottom: 15px !important; }\r\n #noam-form-scope .form-start-title { font-size: 1.4rem !important; margin-bottom: 10px !important; padding-top: 15px !important; }\r\n \r\n #noam-form-scope .selection-card .card-title { font-size: 0.75rem !important; line-height: 1.1 !important; margin-bottom: 3px !important; }\r\n #noam-form-scope .selection-card .card-icon { font-size: 18px !important; margin-bottom: 6px !important; }\r\n #noam-form-scope .selection-card .card-note { font-size: 0.65rem !important; margin-top: 2px !important; line-height: 1 !important;}\r\n #noam-form-scope .selection-card .card-price { font-size: 0.65rem !important; padding: 1px 4px !important; margin-top: 4px !important; }\r\n \r\n #noam-form-scope .form-label { font-size: 0.9rem !important; margin-bottom: 4px !important; }\r\n #noam-form-scope .form-group { margin-bottom: 15px !important; }\r\n #noam-form-scope .form-input, #noam-form-scope .textarea { padding: 10px !important; font-size: 0.9rem !important; }\r\n \r\n #noam-form-scope .consent-container { font-size: 0.7rem !important; margin-top: 15px !important; line-height: 1.2 !important; }\r\n #noam-form-scope .consent-container label { align-items: flex-start !important; }\r\n #noam-form-scope .consent-container input { width: 14px !important; height: 14px !important; margin-left: 6px !important; margin-top: 1px !important; }\r\n\r\n #noam-form-scope .price-amount { font-size: 1.8rem !important; }\r\n #noam-form-scope .price-summary-card h3 { font-size: 1rem !important; }\r\n #noam-form-scope .selected-products-list li { font-size: 0.85rem !important; padding: 6px 0 !important; }\r\n \r\n \/* UPDATED: Time slots mobile styling - Wrap to avoid scroll *\/\r\n #noam-form-scope .time-slots-grid {\r\n flex-wrap: wrap !important; \/* Allow wrapping *\/\r\n justify-content: center !important; \/* Center items *\/\r\n overflow-x: visible !important; \/* No scroll needed *\/\r\n gap: 8px !important;\r\n padding-bottom: 0 !important;\r\n }\r\n \r\n #noam-form-scope .time-slot {\r\n flex: 0 0 auto !important;\r\n min-width: auto !important;\r\n padding: 8px 12px !important; \/* Restore padding *\/\r\n font-size: 0.85rem !important;\r\n white-space: nowrap !important;\r\n margin-bottom: 5px !important; \/* Add vertical spacing *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"noam-form-scope\">\r\n <div class=\"container\">\r\n <div class=\"form-card\">\r\n \r\n <!-- Progress Bar -->\r\n <div class=\"progress-container\">\r\n <div class=\"progress-header\">\r\n <span id=\"progress-step-text\">\u05e9\u05dc\u05d1 1 \u05de\u05ea\u05d5\u05da 8<\/span>\r\n <span id=\"progress-percentage\">13%<\/span>\r\n <\/div>\r\n <div class=\"progress-bar-wrapper\">\r\n <div class=\"progress-fill\" id=\"progress-fill\">\r\n <div class=\"progress-ring\">\r\n <div class=\"rings-icon-wrapper\">\r\n <i class=\"fa-solid fa-ring\"><\/i>\r\n <i class=\"fa-solid fa-ring\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"step-title\" id=\"progress-title\">\u05e4\u05e8\u05d8\u05d9\u05dd \u05d0\u05d9\u05e9\u05d9\u05d9\u05dd<\/p>\r\n <\/div>\r\n\r\n <!-- Toasts -->\r\n <div class=\"toast error-toast\" id=\"error-toast\"><\/div>\r\n <div class=\"toast upsell-toast\" id=\"upsell-toast\">\r\n <i class=\"fa-solid fa-gift\" style=\"font-size:2rem; color:var(--primary-color); margin-bottom:10px; display:block;\"><\/i>\r\n <strong>\u05d4\u05d5\u05e1\u05d9\u05e4\u05d5 \u05e2\u05d5\u05d3 \u05de\u05d5\u05e6\u05e8 \u05d0\u05d7\u05d3 \u05dc\u05e4\u05d7\u05d5\u05ea<\/strong><br>\r\n \u05db\u05d3\u05d9 \u05dc\u05e7\u05d1\u05dc 10% \u05d4\u05e0\u05d7\u05d4 \u05d1\u05e7\u05e0\u05d9\u05d9\u05ea 3 \u05de\u05d5\u05e6\u05e8\u05d9\u05dd \u05d5\u05de\u05e2\u05dc\u05d4!\r\n <\/div>\r\n\r\n <form id=\"noam-form\">\r\n \r\n <!-- Step 1: Personal Details -->\r\n <div class=\"step active\" data-step=\"1\">\r\n <div class=\"step-header\">\r\n <h2 class=\"font-gveret-levin\">\u05d1\u05e8\u05d5\u05db\u05d9\u05dd \u05d4\u05d1\u05d0\u05d9\u05dd \u05dc\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e9\u05dc \u05e0\u05e2\u05dd \u05d3\u05d9\u05d6\u05d9\u05d9\u05df<\/h2>\r\n <\/div>\r\n <div class=\"intro-text\">\r\n \u05d4\u05d2\u05e2\u05ea\u05dd \u05dc\u05de\u05e7\u05d5\u05dd \u05e9\u05d1\u05d5 \u05d2\u05e8\u05e4\u05d9\u05e7\u05d4, \u05d4\u05e4\u05e7\u05ea \u05d3\u05e4\u05d5\u05e1 \u05d5\u05d9\u05e6\u05d9\u05e8\u05ea \u05ea\u05d5\u05db\u05df \u05de\u05e9\u05ea\u05dc\u05d1\u05d9\u05dd \u05dc\u05d7\u05d5\u05d5\u05d9\u05d4 \u05d0\u05d7\u05ea.\r\n \u05d0\u05e0\u05d9 \u05de\u05e2\u05e0\u05d9\u05e7\u05d4 \u05d7\u05d5\u05d5\u05d9\u05d9\u05ea \u05de\u05d9\u05ea\u05d5\u05d2 \u05de\u05dc\u05d0\u05d4 \u05dc\u05d0\u05d9\u05e8\u05d5\u05e2\u05d9\u05dd \u05d1\u05d0\u05e8\u05e5 \u05d5\u05d1\u05e2\u05d5\u05dc\u05dd \u2013 \u05d6\u05d4 \u05de\u05ea\u05d7\u05d9\u05dc \u05d1-Save The Date, \u05de\u05de\u05e9\u05d9\u05da \u05dc\u05dc\u05d5\u05d2\u05d5 \u05d9\u05d9\u05d7\u05d5\u05d3\u05d9 \u05e9\u05de\u05dc\u05d5\u05d5\u05d4 \u05d0\u05ea \u05d4\u05d0\u05d9\u05e8\u05d5\u05e2, \u05d4\u05d6\u05de\u05e0\u05d5\u05ea \u05de\u05e8\u05e9\u05d9\u05de\u05d5\u05ea, \u05ea\u05e4\u05e8\u05d9\u05d8\u05d9\u05dd \u05de\u05e2\u05d5\u05e6\u05d1\u05d9\u05dd \u05d5\u05db\u05dc \u05e4\u05e8\u05d8 \u05e7\u05d8\u05df \u05e9\u05d9\u05d5\u05e6\u05e8 \u05d0\u05ea \u05d4\u05e9\u05e4\u05d4 \u05d4\u05e2\u05d9\u05e6\u05d5\u05d1\u05d9\u05ea \u05e9\u05dc\u05db\u05dd.\r\n \r\n \u05e8\u05d5\u05d1 \u05d4\u05d6\u05d5\u05d2\u05d5\u05ea \u05e9\u05de\u05d2\u05d9\u05e2\u05d9\u05dd \u05d0\u05dc\u05d9 \u05de\u05d7\u05e4\u05e9\u05d9\u05dd \u05e4\u05ea\u05e8\u05d5\u05df \u05d0\u05d7\u05d3 \u05e9\u05de\u05e8\u05db\u05d6 \u05d4\u05db\u05dc. \u05d0\u05e6\u05dc\u05d9 \u05ea\u05e7\u05d1\u05dc\u05d5 \u05de\u05e2\u05d8\u05e4\u05ea \u05e9\u05dc\u05de\u05d4 \u05d4\u05db\u05dc \u05ea\u05d7\u05ea \u05e7\u05d5\u05e8\u05ea \u05d2\u05d2 \u05d0\u05d7\u05ea, \u05e2\u05dd \u05d7\u05d5\u05de\u05e8\u05d9\u05dd \u05d5\u05d2\u05d9\u05de\u05d5\u05e8\u05d9\u05dd \u05e9\u05dc\u05d0 \u05e0\u05d9\u05ea\u05df \u05dc\u05de\u05e6\u05d5\u05d0 \u05d1\u05e9\u05d5\u05dd \u05d1\u05d9\u05ea \u05d3\u05e4\u05d5\u05e1 \u05d0\u05d7\u05e8.\r\n \r\n \u05d0\u05e0\u05d7\u05e0\u05d5 \u05d4\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05d4\u05de\u05d5\u05d1\u05d9\u05dc \u05d1\u05d0\u05e8\u05e5 \u2013 \u05db\u05dc \u05d7\u05dc\u05d5\u05dd \u05e9\u05d9\u05e9 \u05dc\u05db\u05dd, \u05d0\u05e0\u05d7\u05e0\u05d5 \u05db\u05d0\u05df \u05db\u05d3\u05d9 \u05dc\u05d4\u05d2\u05e9\u05d9\u05dd \u05d0\u05d5\u05ea\u05d5.\r\n <\/div>\r\n \r\n <div class=\"form-start-title font-gveret-levin\">\u05d1\u05d5\u05d0\u05d5 \u05e0\u05ea\u05d7\u05d9\u05dc!<\/div>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">\u05e9\u05dd \u05de\u05dc\u05d0<\/label>\r\n <input type=\"text\" id=\"fullName\" class=\"form-input\" placeholder=\"\u05d4\u05e9\u05dd \u05e9\u05dc\u05db\u05dd\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">\u05db\u05ea\u05d5\u05d1\u05ea \u05de\u05d9\u05d9\u05dc<\/label>\r\n <input type=\"email\" id=\"email\" class=\"form-input\" dir=\"ltr\" placeholder=\"example@email.com\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">\u05de\u05e1\u05e4\u05e8 \u05d8\u05dc\u05e4\u05d5\u05df<\/label>\r\n <input type=\"tel\" id=\"phone\" class=\"form-input\" dir=\"ltr\" placeholder=\"050-0000000\">\r\n <\/div>\r\n <div class=\"consent-container\">\r\n <label>\r\n <input type=\"checkbox\" id=\"consent-checkbox\">\r\n <span>\u05d0\u05e0\u05d9 \u05de\u05e1\u05db\u05d9\u05dd\/\u05d4 \u05dc\u05de\u05e1\u05d5\u05e8 \u05d0\u05ea \u05e4\u05e8\u05d8\u05d9\u05d9 \u05d1\u05d4\u05ea\u05d0\u05dd \u05dc<a href=\"https:\/\/noamdesigns.com\/he\/privacy-policy\/\" target=\"_blank\" style=\"color:var(--primary-dark); text-decoration: underline;\">\u05de\u05d3\u05d9\u05e0\u05d9\u05d5\u05ea \u05d4\u05e4\u05e8\u05d8\u05d9\u05d5\u05ea<\/a><\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Step 2: Event Type -->\r\n <div class=\"step\" data-step=\"2\">\r\n <div class=\"step-header\">\r\n <h2>\u05de\u05d4 \u05d7\u05d5\u05d2\u05d2\u05d9\u05dd?<\/h2>\r\n <p>\u05d1\u05d7\u05e8\u05d5 \u05d0\u05ea \u05e1\u05d5\u05d2 \u05d4\u05d0\u05d9\u05e8\u05d5\u05e2 (\u05e0\u05d9\u05ea\u05df \u05dc\u05d1\u05d7\u05d5\u05e8 \u05d9\u05d5\u05ea\u05e8 \u05de\u05d0\u05d7\u05d3)<\/p>\r\n <\/div>\r\n <div class=\"card-grid\">\r\n <div class=\"selection-card\" onclick=\"toggleEventCard(this, '\u05d7\u05ea\u05d5\u05e0\u05d4')\">\r\n <input type=\"checkbox\" name=\"eventType\" value=\"\u05d7\u05ea\u05d5\u05e0\u05d4\">\r\n <div class=\"card-rings-wrapper\">\r\n <i class=\"fa-solid fa-ring\"><\/i>\r\n <i class=\"fa-solid fa-ring\"><\/i>\r\n <\/div>\r\n <span class=\"card-title\">\u05d7\u05ea\u05d5\u05e0\u05d4<\/span>\r\n <\/div>\r\n <div class=\"selection-card\" onclick=\"toggleEventCard(this, '\u05d7\u05d9\u05e0\u05d4')\">\r\n <input type=\"checkbox\" name=\"eventType\" value=\"\u05d7\u05d9\u05e0\u05d4\">\r\n <i class=\"fa-solid fa-hand card-icon\"><\/i>\r\n <span class=\"card-title\">\u05d7\u05d9\u05e0\u05d4<\/span>\r\n <\/div>\r\n <div class=\"selection-card\" onclick=\"toggleEventCard(this, '\u05d1\u05e8\/\u05d1\u05ea \u05de\u05e6\u05d5\u05d5\u05d4')\">\r\n <input type=\"checkbox\" name=\"eventType\" value=\"\u05d1\u05e8\/\u05d1\u05ea \u05de\u05e6\u05d5\u05d5\u05d4\">\r\n <i class=\"fa-solid fa-scroll card-icon\"><\/i>\r\n <span class=\"card-title\">\u05d1\u05e8\/\u05d1\u05ea \u05de\u05e6\u05d5\u05d5\u05d4<\/span>\r\n <\/div>\r\n <div class=\"selection-card\" onclick=\"toggleEventCard(this, '\u05de\u05e7\u05d5\u05d5\u05d4\/\u05d4\u05e4\u05e8\u05e9\u05ea \u05d7\u05dc\u05d4')\">\r\n <input type=\"checkbox\" name=\"eventType\" value=\"\u05de\u05e7\u05d5\u05d5\u05d4\/\u05d4\u05e4\u05e8\u05e9\u05ea \u05d7\u05dc\u05d4\">\r\n <i class=\"fa-solid fa-droplet card-icon\"><\/i>\r\n <span class=\"card-title\">\u05de\u05e7\u05d5\u05d5\u05d4 \/ \u05d4\u05e4\u05e8\u05e9\u05ea \u05d7\u05dc\u05d4<\/span>\r\n <\/div>\r\n <div class=\"selection-card\" onclick=\"toggleEventCard(this, '\u05de\u05e1\u05d9\u05d1\u05ea \u05e8\u05d5\u05d5\u05e7\u05d5\u05ea')\">\r\n <input type=\"checkbox\" name=\"eventType\" value=\"\u05de\u05e1\u05d9\u05d1\u05ea \u05e8\u05d5\u05d5\u05e7\u05d5\u05ea\">\r\n <i class=\"fa-solid fa-champagne-glasses card-icon\"><\/i>\r\n <span class=\"card-title\">\u05de\u05e1\u05d9\u05d1\u05ea \u05e8\u05d5\u05d5\u05e7\u05d5\u05ea<\/span>\r\n <\/div>\r\n <div class=\"selection-card\" onclick=\"toggleEventCard(this, '\u05d0\u05d7\u05e8')\">\r\n <input type=\"checkbox\" name=\"eventType\" value=\"\u05d0\u05d7\u05e8\">\r\n <i class=\"fa-solid fa-wand-magic-sparkles card-icon\"><\/i>\r\n <span class=\"card-title\">\u05d0\u05d7\u05e8<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"other-input-group\" id=\"other-event-group\">\r\n <label class=\"form-label\">\u05e4\u05e8\u05d8\u05d5 \u05d0\u05ea \u05e1\u05d5\u05d2 \u05d4\u05d0\u05d9\u05e8\u05d5\u05e2<\/label>\r\n <input type=\"text\" id=\"otherEventType\" class=\"form-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Step 3: Date -->\r\n <div class=\"step\" data-step=\"3\">\r\n <div class=\"step-header\">\r\n <h2>\u05de\u05ea\u05d9 \u05d4\u05d0\u05d9\u05e8\u05d5\u05e2?<\/h2>\r\n <\/div>\r\n <!-- CHANGED: Replaced 'card-grid' with 'centered-flex-row' to allow proper centering -->\r\n <div class=\"centered-flex-row\">\r\n <div class=\"selection-card\" style=\"flex:1; max-width:200px;\" onclick=\"selectDateOption(this, 'yes')\">\r\n <input type=\"radio\" name=\"hasDate\" value=\"yes\">\r\n <i class=\"fa-regular fa-calendar-check card-icon\"><\/i>\r\n <span class=\"card-title\">\u05d9\u05e9 \u05db\u05d1\u05e8 \u05ea\u05d0\u05e8\u05d9\u05da!<\/span>\r\n <\/div>\r\n <div class=\"selection-card\" style=\"flex:1; max-width:200px;\" onclick=\"selectDateOption(this, 'no')\">\r\n <input type=\"radio\" name=\"hasDate\" value=\"no\">\r\n <i class=\"fa-regular fa-calendar-xmark card-icon\"><\/i>\r\n <span class=\"card-title\">\u05e2\u05d3\u05d9\u05d9\u05df \u05dc\u05d0 \u05e1\u05d2\u05e8\u05e0\u05d5<\/span>\r\n <\/div>\r\n <\/div>\r\n <div id=\"date-fields-container\" style=\"display: none; margin-top:20px;\"><\/div>\r\n <\/div>\r\n\r\n <!-- Step 4: Guests -->\r\n <div class=\"step\" data-step=\"4\">\r\n <div class=\"step-header\">\r\n <h2>\u05db\u05de\u05d4 \u05d0\u05d5\u05e8\u05d7\u05d9\u05dd?<\/h2>\r\n <p>\u05db\u05de\u05d5\u05ea \u05d0\u05d5\u05e8\u05d7\u05d9\u05dd \u05e6\u05e4\u05d5\u05d9\u05d9\u05dd \u05dc\u05d4\u05d2\u05d9\u05e2 \u05e4\u05d9\u05d6\u05d9\u05ea \u05dc\u05d0\u05d9\u05e8\u05d5\u05e2<\/p>\r\n <\/div>\r\n <div id=\"guest-count-fields\"><\/div>\r\n <\/div>\r\n\r\n <!-- Step 5: Products -->\r\n <div class=\"step\" data-step=\"5\">\r\n <div class=\"step-header\">\r\n <h2>\u05d4\u05d1\u05d7\u05d9\u05e8\u05d5\u05ea \u05e9\u05dc\u05db\u05dd<\/h2>\r\n <p>\u05d1\u05d7\u05e8\u05d5 \u05de\u05d5\u05e6\u05e8\u05d9\u05dd \u05dc\u05d1\u05e0\u05d9\u05d9\u05ea \u05d7\u05d1\u05d9\u05dc\u05d4 \u05de\u05d5\u05ea\u05d0\u05de\u05ea \u05d0\u05d9\u05e9\u05d9\u05ea<\/p>\r\n <\/div>\r\n <div class=\"card-grid\">\r\n <!-- Digital Invite -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-digital')\">\r\n <input type=\"checkbox\" id=\"product-digital\" name=\"products\" value=\"\u05d4\u05d6\u05de\u05e0\u05d5\u05ea \u05d3\u05d9\u05d2\u05d9\u05d8\u05dc\u05d9\u05d5\u05ea\" data-price=\"450\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/digital-invitations\/\">\r\n <i class=\"fa-solid fa-mobile-screen-button card-icon\"><\/i>\r\n <span class=\"card-title\">\u05d4\u05d6\u05de\u05e0\u05d5\u05ea \u05d3\u05d9\u05d2\u05d9\u05d8\u05dc\u05d9\u05d5\u05ea<\/span>\r\n <span class=\"card-note\">\u05dc\u05dc\u05d0 \u05d4\u05d3\u05e4\u05e1\u05d4<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-450 \u20aa<\/span>\r\n <\/div>\r\n <!-- Printed Invite -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-printed')\">\r\n <input type=\"checkbox\" id=\"product-printed\" name=\"products\" value=\"\u05d4\u05d6\u05de\u05e0\u05d5\u05ea \u05de\u05d5\u05d3\u05e4\u05e1\u05d5\u05ea\" data-price=\"1000\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/printed-invitations\/\">\r\n <i class=\"fa-solid fa-envelope-open-text card-icon\"><\/i>\r\n <span class=\"card-title\">\u05d4\u05d6\u05de\u05e0\u05d5\u05ea \u05de\u05d5\u05d3\u05e4\u05e1\u05d5\u05ea<\/span>\r\n <span class=\"card-note\">\u05db\u05d5\u05dc\u05dc \u05ea\u05de\u05d5\u05e0\u05d4 \u05d3\u05d9\u05d2\u05d9\u05d8\u05dc\u05d9\u05ea<br>(\u05de\u05d9\u05e0\u05d9\u05de\u05d5\u05dd 20 \u05d9\u05d7\u05d9\u05d3\u05d5\u05ea)<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-1,000 \u20aa<\/span>\r\n <\/div>\r\n <!-- Menus (Moved to 3rd place) -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-menus')\">\r\n <input type=\"checkbox\" id=\"product-menus\" name=\"products\" value=\"\u05ea\u05e4\u05e8\u05d9\u05d8\u05d9\u05dd\" data-price=\"950\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/menus\/\" data-dynamic=\"true\">\r\n <i class=\"fa-solid fa-utensils card-icon\"><\/i>\r\n <span class=\"card-title\">\u05ea\u05e4\u05e8\u05d9\u05d8\u05d9\u05dd<\/span>\r\n <span class=\"card-note\" id=\"menus-note\">\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d0\u05d9\u05e9\u05d9 \u05d5\u05d4\u05d3\u05e4\u05e1\u05d4 \u05dc-X \u05d9\u05d7\u05d9\u05d3\u05d5\u05ea<\/span>\r\n <span class=\"card-price\" id=\"menus-price\">\u05d4\u05d7\u05dc \u05de-950 \u20aa<\/span>\r\n <\/div>\r\n <!-- STD Image -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-std-image')\">\r\n <input type=\"checkbox\" id=\"product-std-image\" name=\"products\" value=\"Save The Date - \u05ea\u05de\u05d5\u05e0\u05d4 \u05d3\u05d9\u05d2\u05d9\u05d8\u05dc\u05d9\u05ea\" data-price=\"400\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/save-the-date\/\">\r\n <i class=\"fa-regular fa-image card-icon\"><\/i>\r\n <span class=\"card-title\">Save The Date<br>\u05ea\u05de\u05d5\u05e0\u05d4 \u05d3\u05d9\u05d2\u05d9\u05d8\u05dc\u05d9\u05ea<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-400 \u20aa<\/span>\r\n <\/div>\r\n <!-- STD Video -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-std-video')\">\r\n <input type=\"checkbox\" id=\"product-std-video\" name=\"products\" value=\"Save The Date - \u05e1\u05e8\u05d8\u05d5\u05df \u05de\u05e7\u05e6\u05d5\u05e2\u05d9\" data-price=\"950\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/save-the-date-video\/\">\r\n <i class=\"fa-solid fa-film card-icon\"><\/i>\r\n <span class=\"card-title\">Save The Date<br>\u05e1\u05e8\u05d8\u05d5\u05df \u05de\u05e7\u05e6\u05d5\u05e2\u05d9<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-950 \u20aa<\/span>\r\n <\/div>\r\n <!-- Logo for Screens -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-logo')\">\r\n <input type=\"checkbox\" id=\"product-logo\" name=\"products\" value=\"\u05dc\u05d5\u05d2\u05d5 \u05dc\u05de\u05e1\u05db\u05d9\u05dd\" data-price=\"350\" data-link=\"\">\r\n <i class=\"fa-solid fa-vector-square card-icon\"><\/i>\r\n <span class=\"card-title\">\u05dc\u05d5\u05d2\u05d5 \u05dc\u05de\u05e1\u05db\u05d9\u05dd<\/span>\r\n <span class=\"card-note\">\u05e1\u05d8\u05d8\u05d9 \u05d0\u05d5 \u05de\u05d5\u05e0\u05e4\u05e9<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-350 \u20aa<\/span>\r\n <\/div>\r\n <!-- Blessings -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-blessings')\">\r\n <input type=\"checkbox\" id=\"product-blessings\" name=\"products\" value=\"\u05d1\u05e8\u05db\u05d5\u05e0\u05d9\u05dd\" data-price=\"600\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/blessings\/\">\r\n <i class=\"fa-solid fa-book-open-reader card-icon\"><\/i>\r\n <span class=\"card-title\">\u05d1\u05e8\u05db\u05d5\u05e0\u05d9\u05dd<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-600 \u20aa<\/span>\r\n <\/div>\r\n <!-- Stickers -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-stickers')\">\r\n <input type=\"checkbox\" id=\"product-stickers\" name=\"products\" value=\"\u05de\u05d3\u05d1\u05e7\u05d5\u05ea \u05de\u05de\u05d5\u05ea\u05d2\u05d5\u05ea\" data-price=\"400\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/stickers\/\">\r\n <i class=\"fa-solid fa-note-sticky card-icon\"><\/i>\r\n <span class=\"card-title\">\u05de\u05d3\u05d1\u05e7\u05d5\u05ea<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-400 \u20aa<\/span>\r\n <\/div>\r\n <!-- Ring Holder -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-ring-holder')\">\r\n <input type=\"checkbox\" id=\"product-ring-holder\" name=\"products\" value=\"\u05de\u05ea\u05e7\u05df \u05dc\u05d8\u05d1\u05e2\u05d5\u05ea\" data-price=\"300\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/ring-holder\/\">\r\n <i class=\"fa-solid fa-ring card-icon\"><\/i>\r\n <span class=\"card-title\">\u05de\u05ea\u05e7\u05df \u05dc\u05d8\u05d1\u05e2\u05d5\u05ea<\/span>\r\n <span class=\"card-note\">\u05d1\u05d7\u05e8\u05d9\u05d8\u05ea \u05dc\u05d9\u05d9\u05d6\u05e8<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-300 \u20aa<\/span>\r\n <\/div>\r\n <!-- Kippot -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-kipot')\">\r\n <input type=\"checkbox\" id=\"product-kipot\" name=\"products\" value=\"\u05db\u05d9\u05e4\u05d5\u05ea \u05e4\u05e9\u05ea\u05df \u05e2\u05dd \u05e8\u05e7\u05de\u05d4\" data-price=\"2500\" data-link=\"https:\/\/noamdesigns.com\/he\/product-category\/kipot\/\">\r\n <i class=\"fa-solid fa-star-of-david card-icon\"><\/i>\r\n <span class=\"card-title\">\u05db\u05d9\u05e4\u05d5\u05ea \u05e2\u05dd \u05e8\u05e7\u05de\u05d4<\/span>\r\n <span class=\"card-note\">\u05e4\u05e9\u05ea\u05df \u05d1\u05ea\u05e4\u05d9\u05e8\u05d4 \u05d0\u05d9\u05e9\u05d9\u05ea<br>(\u05de\u05d9\u05e0\u05d9\u05de\u05d5\u05dd 100 \u05d9\u05d7\u05d9\u05d3\u05d5\u05ea)<\/span>\r\n <span class=\"card-price\">\u05d4\u05d7\u05dc \u05de-2,500 \u20aa<\/span>\r\n <\/div>\r\n <!-- Other -->\r\n <div class=\"selection-card\" onclick=\"toggleProductCard(this, 'product-other')\">\r\n <input type=\"checkbox\" id=\"product-other\" name=\"products\" value=\"\u05d0\u05d7\u05e8\" data-price=\"0\" data-link=\"\">\r\n <i class=\"fa-solid fa-circle-question card-icon\"><\/i>\r\n <span class=\"card-title\">\u05d0\u05d7\u05e8<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"other-input-group\" id=\"other-product-group\">\r\n <label class=\"form-label\">\u05e1\u05e4\u05e8\u05d5 \u05dc\u05d9 \u05de\u05d4 \u05d0\u05ea\u05dd \u05de\u05d7\u05e4\u05e9\u05d9\u05dd<\/label>\r\n <input type=\"text\" id=\"otherProduct\" class=\"form-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Step 6: Summary \/ Schedule -->\r\n <div class=\"step\" data-step=\"6\">\r\n <!-- Title container to be updated dynamically -->\r\n <div class=\"step-header\" id=\"step6-header\">\r\n <h2 id=\"step6-title\">\u05e1\u05d9\u05db\u05d5\u05dd \u05d5\u05ea\u05d9\u05d0\u05d5\u05dd \u05e9\u05d9\u05d7\u05d4<\/h2>\r\n <\/div>\r\n <div id=\"step6-content\"><\/div>\r\n <\/div>\r\n\r\n <!-- Step 7: Notes -->\r\n <div class=\"step\" data-step=\"7\">\r\n <div class=\"step-header\">\r\n <h2>\u05d9\u05e9 \u05de\u05e9\u05d4\u05d5 \u05e0\u05d5\u05e1\u05e3?<\/h2>\r\n <p>\u05d4\u05e2\u05e8\u05d5\u05ea, \u05d1\u05e7\u05e9\u05d5\u05ea \u05de\u05d9\u05d5\u05d7\u05d3\u05d5\u05ea \u05d0\u05d5 \u05e9\u05d0\u05dc\u05d5\u05ea \u05e9\u05d7\u05e9\u05d5\u05d1 \u05dc\u05d3\u05e2\u05ea<\/p>\r\n <\/div>\r\n <textarea id=\"additionalNotes\" class=\"textarea\" rows=\"5\" placeholder=\"\u05db\u05ea\u05d1\u05d5 \u05db\u05d0\u05df...\"><\/textarea>\r\n <\/div>\r\n\r\n <!-- Step 8: Thank You -->\r\n <div class=\"step\" data-step=\"8\">\r\n <div style=\"text-align: center; padding: 20px 0;\">\r\n <!-- 1. Icon -->\r\n <i class=\"fa-solid fa-circle-check\" style=\"font-size: 4rem; color: var(--primary-color); margin-bottom: 20px;\"><\/i>\r\n \r\n <!-- 2 & 3. Schedule & Shop (The box) -->\r\n <div style=\"margin-top: 20px; margin-bottom: 40px; background: var(--primary-light); padding: 30px; border-radius: 16px;\">\r\n <div style=\"background:white; padding:15px; border-radius:10px; margin-bottom:20px; display:inline-block; min-width:200px;\">\r\n <div style=\"font-size:0.9rem; color:#888;\">\u05d9\u05d5\u05dd \u05dc\u05e9\u05d9\u05d7\u05d4<\/div>\r\n <div id=\"confirm-date\" style=\"font-weight:600; font-size:1.1rem;\"><\/div>\r\n <div id=\"confirm-times\" style=\"font-size:0.95rem; color:var(--primary-dark); margin-top:5px; direction:ltr;\"><\/div>\r\n <\/div>\r\n \r\n <p style=\"margin-bottom: 20px;\">\u05db\u05d3\u05d9 \u05e9\u05e0\u05d2\u05d9\u05e2 \u05dc\u05e9\u05d9\u05d7\u05d4 \u05de\u05d5\u05db\u05e0\u05d9\u05dd, \u05d0\u05e0\u05d9 \u05de\u05d6\u05de\u05d9\u05e0\u05d4 \u05d0\u05ea\u05db\u05dd \u05dc\u05d4\u05e6\u05d9\u05e5 \u05d1\u05d7\u05e0\u05d5\u05ea \u05d5\u05dc\u05e7\u05d1\u05dc \u05d4\u05e9\u05e8\u05d0\u05d4. \u05d1\u05e9\u05d9\u05d7\u05d4 \u05e0\u05e2\u05d1\u05d5\u05e8 \u05e2\u05dc \u05d4\u05db\u05dc \u05d9\u05d7\u05d3, \u05d0\u05d1\u05dc \u05e9\u05d5\u05d5\u05d4 \u05dc\u05e8\u05d0\u05d5\u05ea \u05db\u05d1\u05e8 \u05e2\u05db\u05e9\u05d9\u05d5 \u05dc\u05de\u05d4 \u05d0\u05ea\u05dd \u05de\u05ea\u05d7\u05d1\u05e8\u05d9\u05dd!<\/p>\r\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"window.open('https:\/\/noamdesigns.com\/he\/shop\/', '_blank')\">\r\n \u05de\u05e2\u05d1\u05e8 \u05dc\u05d7\u05e0\u05d5\u05ea <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- 4 & 5. Text at bottom -->\r\n <h2 class=\"font-gveret-levin\" style=\"font-size: 2rem; margin-bottom: 15px;\">\u05ea\u05d5\u05d3\u05d4 \u05e8\u05d1\u05d4!<\/h2>\r\n <p style=\"font-size: 1.1rem; color: #555;\">\u05d4\u05e4\u05e8\u05d8\u05d9\u05dd \u05d4\u05ea\u05e7\u05d1\u05dc\u05d5 \u05d1\u05d4\u05e6\u05dc\u05d7\u05d4.<br>\u05e0\u05d9\u05e6\u05d5\u05e8 \u05d0\u05d9\u05ea\u05db\u05dd \u05e7\u05e9\u05e8 \u05d1\u05de\u05d5\u05e2\u05d3 \u05e9\u05d1\u05d9\u05e7\u05e9\u05ea\u05dd.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Navigation -->\r\n <div class=\"button-container\" id=\"navigation-buttons\">\r\n <button type=\"button\" id=\"next-btn\" class=\"btn btn-primary\">\u05d4\u05de\u05e9\u05da<\/button>\r\n <button type=\"button\" id=\"prev-btn\" class=\"btn btn-secondary\" style=\"display: none;\">\u05d7\u05d6\u05e8\u05d4<\/button>\r\n <\/div>\r\n\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div> <!-- Close Scope ID -->\r\n\r\n <script>\r\n \/\/ State\r\n let currentStep = 1;\r\n let totalSteps = 8;\r\n let isSingleProduct = false;\r\n let selectedEvents = [];\r\n let selectedProducts = [];\r\n let selectedCallDate = null;\r\n let selectedTimeSlots = [];\r\n\r\n const stepTitles = {\r\n 1: '\u05e4\u05e8\u05d8\u05d9\u05dd \u05d0\u05d9\u05e9\u05d9\u05d9\u05dd',\r\n 2: '\u05e1\u05d5\u05d2 \u05d0\u05d9\u05e8\u05d5\u05e2',\r\n 3: '\u05ea\u05d0\u05e8\u05d9\u05db\u05d9\u05dd',\r\n 4: '\u05db\u05de\u05d5\u05ea \u05d0\u05d5\u05e8\u05d7\u05d9\u05dd',\r\n 5: '\u05d1\u05d7\u05d9\u05e8\u05ea \u05de\u05d5\u05e6\u05e8\u05d9\u05dd',\r\n 6: '\u05e1\u05d9\u05db\u05d5\u05dd \u05d5\u05ea\u05d9\u05d0\u05d5\u05dd \u05e9\u05d9\u05d7\u05d4',\r\n 7: '\u05d4\u05e2\u05e8\u05d5\u05ea \u05e0\u05d5\u05e1\u05e4\u05d5\u05ea',\r\n 8: '\u05e1\u05d9\u05d5\u05dd'\r\n };\r\n\r\n \/\/ Menu pricing logic\r\n const menuPricing = [\r\n { max: 250, price: 950 },\r\n { max: 300, price: 1050 },\r\n { max: 350, price: 1150 },\r\n { max: 400, price: 1250 },\r\n { max: 450, price: 1350 },\r\n { max: 500, price: 1400 },\r\n { max: 550, price: 1450 },\r\n { max: 600, price: 1500 },\r\n { max: 650, price: 1550 },\r\n { max: 700, price: 1600 },\r\n { max: 750, price: 1650 },\r\n { max: 800, price: 1700 },\r\n { max: Infinity, price: 1700 }\r\n ];\r\n\r\n \/\/ Init\r\n document.addEventListener('DOMContentLoaded', () => {\r\n updateProgress();\r\n document.getElementById('next-btn').addEventListener('click', nextStep);\r\n document.getElementById('prev-btn').addEventListener('click', prevStep);\r\n \r\n \/\/ Allow enter key (except textarea)\r\n document.getElementById('noam-form').addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter' && e.target.nodeName !== 'TEXTAREA') {\r\n e.preventDefault();\r\n nextStep();\r\n }\r\n });\r\n });\r\n\r\n function showError(msg) {\r\n const toast = document.getElementById('error-toast');\r\n toast.innerHTML = `<i class=\"fa-solid fa-circle-exclamation\"><\/i> ${msg}`;\r\n toast.classList.add('show');\r\n setTimeout(() => toast.classList.remove('show'), 3000);\r\n }\r\n\r\n function showUpsellToast() {\r\n const toast = document.getElementById('upsell-toast');\r\n toast.classList.add('show');\r\n setTimeout(() => toast.classList.remove('show'), 5000);\r\n }\r\n\r\n function updateProgress() {\r\n const percent = Math.round((currentStep \/ totalSteps) * 100);\r\n const fillPercent = ((currentStep - 1) \/ (totalSteps - 1)) * 100;\r\n \r\n document.getElementById('progress-step-text').textContent = `\u05e9\u05dc\u05d1 ${currentStep} \u05de\u05ea\u05d5\u05da ${totalSteps}`;\r\n document.getElementById('progress-percentage').textContent = percent + '%';\r\n \r\n \/\/ Explicitly set the step title here after logic update\r\n document.getElementById('progress-title').textContent = stepTitles[currentStep];\r\n \r\n const fill = document.getElementById('progress-fill');\r\n fill.style.width = Math.max(fillPercent, 8) + '%';\r\n }\r\n\r\n \/* --- Event Cards Logic --- *\/\r\n function toggleEventCard(card, value) {\r\n card.classList.toggle('selected');\r\n const checkbox = card.querySelector('input');\r\n checkbox.checked = !checkbox.checked;\r\n \r\n if (checkbox.checked) {\r\n if (!selectedEvents.includes(value)) selectedEvents.push(value);\r\n } else {\r\n selectedEvents = selectedEvents.filter(e => e !== value);\r\n }\r\n \r\n document.getElementById('other-event-group').classList.toggle('show', selectedEvents.includes('\u05d0\u05d7\u05e8'));\r\n }\r\n\r\n \/* --- Date Logic --- *\/\r\n function selectDateOption(card, value) {\r\n \/\/ Deselect others\r\n document.querySelectorAll('.step[data-step=\"3\"] .selection-card').forEach(c => {\r\n c.classList.remove('selected');\r\n c.querySelector('input').checked = false;\r\n });\r\n \/\/ Select clicked\r\n card.classList.add('selected');\r\n card.querySelector('input').checked = true;\r\n \r\n const container = document.getElementById('date-fields-container');\r\n if (value === 'yes') {\r\n container.style.display = 'block';\r\n generateDateInputs();\r\n } else {\r\n container.style.display = 'none';\r\n }\r\n }\r\n\r\n function generateDateInputs() {\r\n const container = document.getElementById('date-fields-container');\r\n let events = selectedEvents.filter(e => e !== '\u05d0\u05d7\u05e8');\r\n if (selectedEvents.includes('\u05d0\u05d7\u05e8') && document.getElementById('otherEventType').value) {\r\n events.push(document.getElementById('otherEventType').value);\r\n }\r\n \/\/ Fallback\r\n if(events.length === 0) events = ['\u05d4\u05d0\u05d9\u05e8\u05d5\u05e2'];\r\n \r\n container.innerHTML = events.map(event => `\r\n <div class=\"form-group\" style=\"margin-bottom:15px;\">\r\n <label class=\"form-label\">\u05ea\u05d0\u05e8\u05d9\u05da ${event}<\/label>\r\n <input type=\"date\" class=\"form-input event-date-input\" data-event=\"${event}\">\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/* --- Guest Count Logic --- *\/\r\n function generateGuestCountFields() {\r\n const container = document.getElementById('guest-count-fields');\r\n let events = selectedEvents.filter(e => e !== '\u05d0\u05d7\u05e8');\r\n if (selectedEvents.includes('\u05d0\u05d7\u05e8') && document.getElementById('otherEventType').value) {\r\n events.push(document.getElementById('otherEventType').value);\r\n }\r\n if(events.length === 0) events = ['\u05d4\u05d0\u05d9\u05e8\u05d5\u05e2'];\r\n \r\n container.innerHTML = events.map(event => `\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">\u05db\u05de\u05d5\u05ea \u05d0\u05d5\u05e8\u05d7\u05d9\u05dd \u05e6\u05e4\u05d5\u05d9\u05d9\u05dd \u05d1${event}<\/label>\r\n <!-- \u05d4\u05d5\u05e1\u05e4\u05ea \u05e7\u05e4\u05d9\u05e6\u05d5\u05ea \u05e9\u05dc 50 -->\r\n <input type=\"number\" min=\"0\" step=\"50\" class=\"form-input guest-input\" data-event=\"${event}\" placeholder=\"\u05dc\u05de\u05e9\u05dc: 350\">\r\n <\/div>\r\n `).join('');\r\n \r\n \/\/ Listen to updates for menu price calculation\r\n container.querySelectorAll('.guest-input').forEach(input => {\r\n input.addEventListener('input', updateMenuPricing);\r\n });\r\n }\r\n\r\n function getGuestCountForMenus() {\r\n \/\/ Prefer Wedding, then max count\r\n const weddingInput = document.querySelector('.guest-input[data-event=\"\u05d7\u05ea\u05d5\u05e0\u05d4\"]');\r\n if (weddingInput && weddingInput.value) return parseInt(weddingInput.value) || 0;\r\n \r\n let max = 0;\r\n document.querySelectorAll('.guest-input').forEach(input => {\r\n const val = parseInt(input.value) || 0;\r\n if (val > max) max = val;\r\n });\r\n return max;\r\n }\r\n\r\n function updateMenuPricing() {\r\n const count = getGuestCountForMenus();\r\n let price = 1700; \/\/ default max\r\n for (const tier of menuPricing) {\r\n if (count <= tier.max) { price = tier.price; break; }\r\n }\r\n \r\n document.getElementById('menus-price').textContent = `\u05d4\u05d7\u05dc \u05de-${price.toLocaleString()} \u20aa`;\r\n \r\n \/\/ Logic for text under Menus card\r\n let noteText = '';\r\n if (count > 0 && count < 250) {\r\n noteText = '\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d0\u05d9\u05e9\u05d9 \u05d5\u05d4\u05d3\u05e4\u05e1\u05d4 \u05dc-\u05e2\u05d3 250 \u05d9\u05d7\u05d9\u05d3\u05d5\u05ea';\r\n } else if (count >= 250) {\r\n noteText = '\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d0\u05d9\u05e9\u05d9 \u05d5\u05d4\u05d3\u05e4\u05e1\u05d4 \u05dc-' + count + ' \u05d9\u05d7\u05d9\u05d3\u05d5\u05ea';\r\n } else {\r\n noteText = '\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d0\u05d9\u05e9\u05d9 \u05d5\u05d4\u05d3\u05e4\u05e1\u05d4 \u05dc-\u05e2\u05d3 250 \u05d9\u05d7\u05d9\u05d3\u05d5\u05ea'; \/\/ Default\r\n }\r\n \r\n document.getElementById('menus-note').textContent = noteText;\r\n document.getElementById('product-menus').dataset.currentPrice = price;\r\n }\r\n\r\n \/* --- Product Logic --- *\/\r\n function toggleProductCard(card, id) {\r\n card.classList.toggle('selected');\r\n const checkbox = card.querySelector('input');\r\n checkbox.checked = !checkbox.checked;\r\n \r\n if (checkbox.checked) {\r\n selectedProducts.push(id);\r\n \/\/ Trigger Upsell Toast if count becomes 2\r\n if (selectedProducts.length === 2) {\r\n showUpsellToast();\r\n }\r\n } else {\r\n selectedProducts = selectedProducts.filter(p => p !== id);\r\n }\r\n \r\n document.getElementById('other-product-group').classList.toggle('show', selectedProducts.includes('product-other'));\r\n }\r\n\r\n function getSelectedProductElements() {\r\n return Array.from(document.querySelectorAll('input[name=\"products\"]:checked'))\r\n .filter(el => el.value !== '\u05d0\u05d7\u05e8');\r\n }\r\n\r\n function calculateTotal() {\r\n let total = 0;\r\n getSelectedProductElements().forEach(el => {\r\n if (el.id === 'product-menus') {\r\n total += parseInt(el.dataset.currentPrice) || parseInt(el.dataset.price);\r\n } else {\r\n total += parseInt(el.dataset.price) || 0;\r\n }\r\n });\r\n return total;\r\n }\r\n\r\n \/\/ New Helper Function to determine links\r\n function getProductLink(productId) {\r\n const events = selectedEvents;\r\n const isSingleEvent = events.length === 1;\r\n const eventType = isSingleEvent ? events[0] : null;\r\n\r\n switch (productId) {\r\n case 'product-digital':\r\n if (!isSingleEvent) return 'https:\/\/noamdesigns.com\/he\/product-category\/invitations\/';\r\n if (eventType === '\u05d7\u05ea\u05d5\u05e0\u05d4') return 'https:\/\/noamdesigns.com\/he\/product-category\/wedding-invitation\/digital-wedding-invitation\/';\r\n if (eventType === '\u05d7\u05d9\u05e0\u05d4') return 'https:\/\/noamdesigns.com\/he\/product-category\/henna-invitations\/digital-henna-invitation\/';\r\n if (eventType === '\u05de\u05e7\u05d5\u05d5\u05d4\/\u05d4\u05e4\u05e8\u05e9\u05ea \u05d7\u05dc\u05d4') return 'https:\/\/noamdesigns.com\/he\/product-category\/mikve-invitations\/';\r\n if (eventType === '\u05d1\u05e8\/\u05d1\u05ea \u05de\u05e6\u05d5\u05d5\u05d4') return 'https:\/\/noamdesigns.com\/he\/product-category\/bar-mitzva-invitations\/';\r\n if (eventType === '\u05de\u05e1\u05d9\u05d1\u05ea \u05e8\u05d5\u05d5\u05e7\u05d5\u05ea') return 'https:\/\/noamdesigns.com\/he\/product-category\/mesibat-ravakot\/';\r\n return 'https:\/\/noamdesigns.com\/he\/product-category\/invitations\/'; \/\/ Default for 'Other' or unexpected\r\n\r\n case 'product-printed':\r\n if (!isSingleEvent) return 'https:\/\/noamdesigns.com\/he\/product-category\/invitations\/';\r\n if (eventType === '\u05d7\u05ea\u05d5\u05e0\u05d4') return 'https:\/\/noamdesigns.com\/he\/product-category\/wedding-invitation\/printed-wedding-invitation\/';\r\n if (eventType === '\u05d7\u05d9\u05e0\u05d4') return 'https:\/\/noamdesigns.com\/he\/product-category\/henna-invitations\/printed-henna-invitation\/';\r\n if (eventType === '\u05de\u05e1\u05d9\u05d1\u05ea \u05e8\u05d5\u05d5\u05e7\u05d5\u05ea') return 'https:\/\/noamdesigns.com\/he\/product-category\/mesibat-ravakot\/';\r\n return 'https:\/\/noamdesigns.com\/he\/product-category\/invitations\/';\r\n\r\n case 'product-menus':\r\n return 'https:\/\/noamdesigns.com\/he\/product-category\/menu\/';\r\n\r\n case 'product-std-image':\r\n return 'https:\/\/noamdesigns.com\/he\/product-category\/save-the-date\/save-the-date-photo\/';\r\n\r\n case 'product-std-video':\r\n return 'https:\/\/noamdesigns.com\/he\/product-category\/save-the-date\/save-the-date-video\/';\r\n\r\n case 'product-logo':\r\n case 'product-stickers':\r\n case 'product-ring-holder':\r\n case 'product-kipot':\r\n return 'https:\/\/noamdesigns.com\/he\/product-category\/accessory-items\/';\r\n\r\n case 'product-blessings':\r\n return 'https:\/\/noamdesigns.com\/he\/product-category\/blessings\/';\r\n\r\n default:\r\n return 'https:\/\/noamdesigns.com\/he\/shop\/';\r\n }\r\n }\r\n\r\n \/* --- Step 6: Summary --- *\/\r\n function generateStep6() {\r\n const products = getSelectedProductElements();\r\n const container = document.getElementById('step6-content');\r\n const titleEl = document.getElementById('step6-title');\r\n const progressTitle = document.getElementById('progress-title');\r\n \r\n selectedCallDate = null;\r\n selectedTimeSlots = [];\r\n \r\n if (products.length === 1) {\r\n \/\/ SINGLE PRODUCT FLOW\r\n isSingleProduct = true;\r\n totalSteps = 6;\r\n \r\n \/\/ Update Step Title logic\r\n stepTitles[6] = \"\u05de\u05e2\u05d1\u05e8 \u05dc\u05e8\u05db\u05d9\u05e9\u05d4\";\r\n \r\n \/\/ Update H2 Header inside step-header to use Gveret Levin\r\n titleEl.classList.add('font-gveret-levin'); \/\/ Add special class\r\n titleEl.textContent = \"\u05d1\u05d7\u05e8\u05ea\u05dd \u05de\u05d5\u05e6\u05e8 \u05d1\u05d5\u05d3\u05d3 - \u05ea\u05d5\u05db\u05dc\u05d5 \u05dc\u05e8\u05db\u05d5\u05e9 \u05e2\u05e6\u05de\u05d0\u05d9\u05ea \u05d1\u05d0\u05ea\u05e8\";\r\n \r\n const product = products[0];\r\n const link = getProductLink(product.id);\r\n \r\n \/\/ Icon mapping for single product view\r\n let iconClass = 'fa-bag-shopping';\r\n if(product.value.includes('\u05d3\u05d9\u05d2\u05d9\u05d8\u05dc\u05d9')) iconClass = 'fa-mobile-screen';\r\n if(product.value.includes('\u05de\u05d5\u05d3\u05e4\u05e1')) iconClass = 'fa-envelope';\r\n if(product.value.includes('\u05e1\u05e8\u05d8\u05d5\u05df')) iconClass = 'fa-film';\r\n if(product.value.includes('\u05d1\u05e8\u05db\u05d5\u05e0\u05d9\u05dd')) iconClass = 'fa-book-open';\r\n if(product.value.includes('\u05dc\u05d5\u05d2\u05d5')) iconClass = 'fa-vector-square';\r\n \r\n \/\/ \u05de\u05d7\u05d9\u05e8 \u05d5\u05db\u05de\u05d5\u05ea \u05e2\u05d1\u05d5\u05e8 \u05de\u05d5\u05e6\u05e8 \u05d9\u05d7\u05d9\u05d3\r\n const priceStart = product.dataset.currentPrice || product.dataset.price;\r\n const minQty = product.parentElement.querySelector('.card-note')?.innerText || '';\r\n\r\n \/\/ NEW: Updated HTML with Blue Info Note\r\n container.innerHTML = `\r\n <div class=\"single-product-section\">\r\n <div class=\"product-icon-large\"><i class=\"fa-solid ${iconClass}\"><\/i><\/div>\r\n \r\n <!-- Product Name -->\r\n <h2 style=\"font-size:1.6rem; margin-bottom:5px; color:var(--text-dark);\">\r\n ${product.value}\r\n <\/h2>\r\n \r\n <div style=\"font-size:1.1rem; color:var(--primary-dark); font-weight:600; margin-bottom:15px;\">\r\n \u05d4\u05d7\u05dc \u05de-${parseInt(priceStart).toLocaleString()} \u20aa\r\n <span style=\"font-size:0.9rem; font-weight:400; color:#777; display:block;\">${minQty}<\/span>\r\n <\/div>\r\n\r\n <p style=\"font-size:1rem; color:#666; max-width:500px; margin:0 auto 20px;\">\r\n \u05d1\u05de\u05e2\u05d1\u05e8 \u05dc\u05d0\u05ea\u05e8 \u05ea\u05d5\u05db\u05dc\u05d5 \u05dc\u05d1\u05d7\u05d5\u05e8 \u05d3\u05d2\u05dd \u05e1\u05e4\u05e6\u05d9\u05e4\u05d9, \u05dc\u05d4\u05ea\u05d0\u05d9\u05dd \u05db\u05de\u05d5\u05d9\u05d5\u05ea \u05de\u05d3\u05d5\u05d9\u05e7\u05d5\u05ea \u05d5\u05dc\u05e8\u05d0\u05d5\u05ea \u05d0\u05ea \u05d4\u05de\u05d7\u05d9\u05e8 \u05d4\u05e1\u05d5\u05e4\u05d9 \u05de\u05ea\u05e2\u05d3\u05db\u05df \u05d1\u05d6\u05de\u05df \u05d0\u05de\u05ea \u05dc\u05e4\u05d9 \u05d4\u05d1\u05d7\u05d9\u05e8\u05d5\u05ea \u05e9\u05dc\u05db\u05dd.\r\n <\/p>\r\n \r\n <button type=\"button\" class=\"btn-product\" onclick=\"window.open('${link}', '_blank')\">\r\n \u05de\u05e2\u05d1\u05e8 \u05dc\u05e8\u05db\u05d9\u05e9\u05d4 \u05d1\u05d0\u05ea\u05e8 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <\/button>\r\n\r\n <div class=\"info-note\">\r\n <i class=\"fa-solid fa-circle-info\"><\/i>\r\n <div class=\"info-note-content\">\r\n \u05d1\u05d1\u05d7\u05d9\u05e8\u05ea \u05de\u05d5\u05e6\u05e8 \u05d0\u05d7\u05d3 \u05d1\u05dc\u05d1\u05d3 - \u05e0\u05d9\u05ea\u05df \u05dc\u05d4\u05d6\u05de\u05d9\u05df \u05d9\u05e9\u05d9\u05e8\u05d5\u05ea \u05d1\u05d0\u05ea\u05e8.\r\n <br>\r\n <span class=\"manual-thickness\">\u05e8\u05d5\u05e6\u05d9\u05dd \u05d7\u05d1\u05d9\u05dc\u05d4 \u05de\u05d5\u05ea\u05d0\u05de\u05ea \u05d0\u05d9\u05e9\u05d9\u05ea?<\/span>\r\n <a href=\"javascript:void(0)\" onclick=\"prevStep()\">\u05d7\u05d6\u05e8\u05d5 \u05d0\u05d7\u05d5\u05e8\u05d4<\/a>, \u05d4\u05d5\u05e1\u05d9\u05e4\u05d5 \u05de\u05d5\u05e6\u05e8\u05d9\u05dd, \u05d5\u05e0\u05ea\u05d0\u05dd \u05dc\u05db\u05dd \u05e9\u05d9\u05d7\u05d4 \u05e2\u05dd \u05e0\u05e2\u05dd \u05db\u05d3\u05d9 \u05dc\u05d4\u05ea\u05d0\u05d9\u05dd \u05d4\u05db\u05dc \u05d1\u05d3\u05d9\u05d5\u05e7 \u05d0\u05dc\u05d9\u05db\u05dd\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n } else {\r\n \/\/ PACKAGE FLOW\r\n isSingleProduct = false;\r\n totalSteps = 8;\r\n \r\n stepTitles[6] = \"\u05e1\u05d9\u05db\u05d5\u05dd \u05d5\u05ea\u05d9\u05d0\u05d5\u05dd \u05e9\u05d9\u05d7\u05d4\";\r\n titleEl.classList.remove('font-gveret-levin'); \/\/ Remove special class\r\n titleEl.textContent = \"\u05e1\u05d9\u05db\u05d5\u05dd \u05d5\u05ea\u05d9\u05d0\u05d5\u05dd \u05e9\u05d9\u05d7\u05d4\";\r\n \r\n const total = calculateTotal();\r\n const count = products.length + (document.getElementById('product-other').checked ? 1 : 0);\r\n const discountApplied = count >= 3;\r\n const finalTotal = discountApplied ? Math.round(total * 0.9) : total;\r\n \r\n const dates = generateCallDates();\r\n const isOnlyOther = (products.length === 0 && document.getElementById('product-other').checked);\r\n \r\n \/\/ Determine if any Physical product selected\r\n \/\/ Digital IDs\r\n const digitalIds = ['product-digital', 'product-std-image', 'product-std-video', 'product-logo'];\r\n \/\/ Check if any selected product ID is NOT in digitalIds\r\n const hasPhysical = products.some(p => !digitalIds.includes(p.id));\r\n \r\n \/\/ Create Products List HTML\r\n let productsListHTML = '<ul class=\"selected-products-list\">';\r\n products.forEach(p => {\r\n let displayName = p.value;\r\n \r\n if(p.value.includes('\u05ea\u05e4\u05e8\u05d9\u05d8\u05d9\u05dd')) {\r\n const count = getGuestCountForMenus();\r\n if (count < 250) {\r\n displayName = `\u05e2\u05d3 250 \u05ea\u05e4\u05e8\u05d9\u05d8\u05d9\u05dd`;\r\n } else {\r\n displayName = `${count} \u05ea\u05e4\u05e8\u05d9\u05d8\u05d9\u05dd`;\r\n }\r\n }\r\n else if (p.value.includes('\u05d4\u05d6\u05de\u05e0\u05d5\u05ea \u05de\u05d5\u05d3\u05e4\u05e1\u05d5\u05ea')) {\r\n displayName += ' (\u05de\u05d9\u05e0\u05d9\u05de\u05d5\u05dd 20 \u05d9\u05d7\u05d9\u05d3\u05d5\u05ea)';\r\n }\r\n else if (p.value.includes('\u05db\u05d9\u05e4\u05d5\u05ea')) {\r\n displayName += ' (\u05de\u05d9\u05e0\u05d9\u05de\u05d5\u05dd 100 \u05d9\u05d7\u05d9\u05d3\u05d5\u05ea)';\r\n }\r\n \r\n productsListHTML += `<li><i class=\"fa-solid fa-check\"><\/i> ${displayName}<\/li>`;\r\n });\r\n \r\n if(document.getElementById('product-other').checked && document.getElementById('otherProduct').value) {\r\n productsListHTML += `<li><i class=\"fa-solid fa-check\"><\/i> ${document.getElementById('otherProduct').value}<\/li>`;\r\n }\r\n productsListHTML += '<\/ul>';\r\n\r\n \/\/ Price Summary Block HTML (Hidden if \"Other\" only)\r\n let priceSummaryHTML = '';\r\n if (!isOnlyOther) {\r\n \r\n let priceDisplay = `<div class=\"price-amount\">${total.toLocaleString()} <span>\u20aa<\/span><\/div>`;\r\n if (discountApplied) {\r\n priceDisplay = `\r\n <div class=\"price-amount\">\r\n <span class=\"old-price\">${total.toLocaleString()}<\/span> \r\n ${finalTotal.toLocaleString()} <span>\u20aa<\/span>\r\n <\/div>\r\n <span class=\"discount-badge\">\u05db\u05d5\u05dc\u05dc 10% \u05d4\u05e0\u05d7\u05d4 \u05dc\u05d7\u05d1\u05d9\u05dc\u05d4!<\/span>\r\n `;\r\n }\r\n\r\n \/\/ Shipping Note\r\n let shippingHTML = '';\r\n if (hasPhysical) {\r\n shippingHTML = `<div class=\"shipping-note\"><i class=\"fa-solid fa-truck-fast\"><\/i> \u05db\u05d5\u05dc\u05dc \u05de\u05e9\u05dc\u05d5\u05d7 \u05d7\u05d9\u05e0\u05dd \u05e2\u05d3 \u05d4\u05d1\u05d9\u05ea<\/div>`;\r\n }\r\n\r\n priceSummaryHTML = `\r\n <div class=\"price-summary-card\">\r\n <h3>\u05d4\u05de\u05d5\u05e6\u05e8\u05d9\u05dd \u05e9\u05d1\u05d7\u05e8\u05ea\u05dd:<\/h3>\r\n ${productsListHTML}\r\n \r\n <div style=\"margin-top:20px; padding-top:20px; border-top:1px dashed rgba(177,145,125,0.3);\">\r\n <h3 style=\"font-weight:400; font-size:1rem;\">\u05d4\u05d7\u05dc \u05de-<\/h3>\r\n ${priceDisplay}\r\n <h3 style=\"font-weight:400; font-size:1rem;\">\u05e2\u05d1\u05d5\u05e8 \u05d7\u05d1\u05d9\u05dc\u05d4 \u05d1\u05e1\u05d9\u05e1\u05d9\u05ea<\/h3>\r\n <div style=\"font-size:0.85rem; opacity:0.8; margin-top:5px; color:#777;\">\r\n *\u05d4\u05de\u05d7\u05d9\u05e8 \u05d4\u05e1\u05d5\u05e4\u05d9 \u05ea\u05dc\u05d5\u05d9 \u05d1\u05d2\u05d9\u05de\u05d5\u05e8\u05d9\u05dd \u05d5\u05d1\u05e9\u05d3\u05e8\u05d5\u05d2\u05d9\u05dd \u05e9\u05ea\u05d1\u05d7\u05e8\u05d5\r\n <\/div>\r\n ${shippingHTML}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Introduction text logic for schedule\r\n let introText = '\u05e7\u05d9\u05d1\u05dc\u05ea\u05dd \u05db\u05e2\u05ea \u05d4\u05e2\u05e8\u05db\u05d4 \u05db\u05dc\u05dc\u05d9\u05ea \u05dc\u05de\u05d7\u05d9\u05e8 \u05d4\u05d4\u05ea\u05d7\u05dc\u05ea\u05d9. \u05d0\u05e0\u05d9 \u05de\u05d6\u05de\u05d9\u05e0\u05d4 \u05d0\u05ea\u05db\u05dd \u05dc\u05e7\u05d1\u05d5\u05e2 \u05d0\u05d9\u05ea\u05d9 \u05e9\u05d9\u05d7\u05d4 \u05d0\u05d9\u05e9\u05d9\u05ea \u05d1\u05d4 \u05e0\u05d3\u05d9\u05d9\u05e7 \u05d0\u05ea \u05d4\u05d7\u05d1\u05d9\u05dc\u05d4 \u05d1\u05de\u05d9\u05d5\u05d7\u05d3 \u05d0\u05dc\u05d9\u05db\u05dd.';\r\n if (isOnlyOther) {\r\n introText = '\u05d0\u05e0\u05d9 \u05de\u05d6\u05de\u05d9\u05e0\u05d4 \u05d0\u05ea\u05db\u05dd \u05dc\u05e7\u05d1\u05d5\u05e2 \u05d0\u05d9\u05ea\u05d9 \u05e9\u05d9\u05d7\u05d4 \u05d0\u05d9\u05e9\u05d9\u05ea \u05d1\u05d4 \u05e0\u05d3\u05d9\u05d9\u05e7 \u05d0\u05ea \u05d4\u05d7\u05d1\u05d9\u05dc\u05d4 \u05d1\u05de\u05d9\u05d5\u05d7\u05d3 \u05d0\u05dc\u05d9\u05db\u05dd.';\r\n }\r\n\r\n container.innerHTML = `\r\n ${priceSummaryHTML}\r\n \r\n <!-- Bouncing Arrow to indicate next step -->\r\n <div class=\"flow-arrow\"><i class=\"fa-solid fa-chevron-down\"><\/i><\/div>\r\n\r\n <div style=\"text-align:center; margin-top:10px;\">\r\n <!-- \u05d4\u05d1\u05d4\u05e8\u05d4 \u05e9\u05d6\u05d4 \u05e2\u05dd \u05e0\u05e2\u05dd -->\r\n <h3 style=\"font-size:1.3rem; margin-bottom:10px;\">\u05de\u05ea\u05d9 \u05e0\u05d5\u05d7 \u05dc\u05db\u05dd \u05dc\u05d3\u05d1\u05e8 \u05e2\u05dd \u05e0\u05e2\u05dd?<\/h3>\r\n <p style=\"color:#666; margin-bottom:20px; max-width:550px; margin-left:auto; margin-right:auto;\">\r\n ${introText}\r\n <\/p>\r\n \r\n <div class=\"date-options\">\r\n ${dates.map(d => `\r\n <div class=\"date-option\" onclick=\"selectCallDate('${d.value}', this, ${d.isFriday})\">\r\n <div style=\"font-weight:600; margin-bottom:4px;\">${d.label}<\/div>\r\n <div class=\"day-date\">${d.display}<\/div>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n \r\n <div id=\"time-slots-container\" style=\"display:none; margin-top:20px; animation:fadeIn 0.3s;\">\r\n <div style=\"font-size:0.9rem; color:var(--primary-color); margin-bottom:10px;\">\u05e0\u05d9\u05ea\u05df \u05dc\u05d1\u05d7\u05d5\u05e8 \u05de\u05e1\u05e4\u05e8 \u05d8\u05d5\u05d5\u05d7\u05d9\u05dd<\/div>\r\n <div class=\"time-slots-grid\" id=\"time-slots-grid\">\r\n <!-- Populated dynamically -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n \/\/ Update progress bar\r\n const percent = Math.round((currentStep \/ totalSteps) * 100);\r\n const fillPercent = ((currentStep - 1) \/ (totalSteps - 1)) * 100;\r\n \r\n document.getElementById('progress-step-text').textContent = `\u05e9\u05dc\u05d1 ${currentStep} \u05de\u05ea\u05d5\u05da ${totalSteps}`;\r\n document.getElementById('progress-percentage').textContent = percent + '%';\r\n \r\n \/\/ Explicitly set the step title here after logic update\r\n document.getElementById('progress-title').textContent = stepTitles[currentStep];\r\n \r\n const fill = document.getElementById('progress-fill');\r\n fill.style.width = Math.max(fillPercent, 8) + '%';\r\n }\r\n\r\n function generateCallDates() {\r\n const dates = [];\r\n const today = new Date();\r\n let count = 0;\r\n let i = 0;\r\n \r\n while (count < 3) {\r\n const d = new Date(today);\r\n d.setDate(today.getDate() + i);\r\n const dayOfWeek = d.getDay(); \/\/ 0=Sun, 5=Fri, 6=Sat\r\n \r\n \/\/ Skip Saturday\r\n if (dayOfWeek !== 6) {\r\n let label = d.toLocaleDateString('he-IL', { weekday: 'long' });\r\n \r\n \/\/ Logic to check if \"Today\" is still valid (based on available slots)\r\n let isTodayValid = true;\r\n if (i === 0) {\r\n const currentHour = new Date().getHours();\r\n const isFriday = (dayOfWeek === 5);\r\n \/\/ Last slot starts at 17:00 (or 11:00 on Friday)\r\n const lastSlotStart = isFriday ? 11 : 17; \r\n if (currentHour >= lastSlotStart) {\r\n isTodayValid = false;\r\n }\r\n }\r\n\r\n if (isTodayValid) {\r\n if (i === 0) label = \"\u05d4\u05d9\u05d5\u05dd\";\r\n else if (i === 1) label = \"\u05de\u05d7\u05e8\";\r\n \r\n dates.push({\r\n label: label,\r\n display: d.toLocaleDateString('he-IL', { day: 'numeric', month: 'numeric' }),\r\n value: d.toISOString().split('T')[0],\r\n isFriday: (dayOfWeek === 5),\r\n isToday: (i === 0)\r\n });\r\n count++;\r\n }\r\n }\r\n i++;\r\n }\r\n return dates;\r\n }\r\n\r\n function selectCallDate(value, el, isFriday) {\r\n selectedCallDate = value;\r\n selectedTimeSlots = [];\r\n document.querySelectorAll('.date-option').forEach(d => d.classList.remove('selected'));\r\n el.classList.add('selected');\r\n \r\n const grid = document.getElementById('time-slots-grid');\r\n grid.innerHTML = '';\r\n \r\n const allSlots = [\r\n { id: '09:00 - 11:00', sort: 1 },\r\n { id: '11:00 - 13:00', sort: 2 },\r\n { id: '13:00 - 15:00', sort: 3 },\r\n { id: '15:00 - 17:00', sort: 4 },\r\n { id: '17:00 - 19:00', sort: 5 }\r\n ];\r\n \r\n const now = new Date();\r\n const isToday = (value === now.toISOString().split('T')[0]);\r\n const currentHour = now.getHours();\r\n\r\n allSlots.forEach(slot => {\r\n \/\/ Filter Friday logic (only up to 13:00)\r\n if (isFriday && slot.sort > 2) return;\r\n \r\n \/\/ Filter \"Today\" logic - passed times\r\n if (isToday) {\r\n const slotEndHour = parseInt(slot.id.split(' - ')[1].split(':')[0]);\r\n if (currentHour >= slotEndHour) return; \r\n }\r\n\r\n const div = document.createElement('div');\r\n div.className = 'time-slot';\r\n div.innerText = slot.id;\r\n div.onclick = function() { toggleTimeSlot(slot.id, this); };\r\n grid.appendChild(div);\r\n });\r\n\r\n document.getElementById('time-slots-container').style.display = 'block';\r\n }\r\n\r\n function toggleTimeSlot(time, el) {\r\n const idx = selectedTimeSlots.indexOf(time);\r\n if (idx > -1) {\r\n selectedTimeSlots.splice(idx, 1);\r\n el.classList.remove('selected');\r\n } else {\r\n selectedTimeSlots.push(time);\r\n el.classList.add('selected');\r\n }\r\n }\r\n \r\n function formatSelectedTimes(times) {\r\n if (!times || times.length === 0) return '';\r\n \r\n \/\/ Helper to parse \"09:00 - 11:00\" into numbers\r\n const parseRange = (t) => {\r\n const parts = t.split(' - ');\r\n return { start: parseInt(parts[0]), end: parseInt(parts[1]), text: t };\r\n };\r\n \r\n \/\/ Sort by start time\r\n const sorted = times.map(parseRange).sort((a, b) => a.start - b.start);\r\n \r\n \/\/ Merge logic\r\n const merged = [];\r\n let current = sorted[0];\r\n \r\n for (let i = 1; i < sorted.length; i++) {\r\n if (current.end === sorted[i].start) {\r\n \/\/ Overlap\/Touch -> Extend end\r\n current.end = sorted[i].end;\r\n } else {\r\n \/\/ No touch -> Push current and start new\r\n merged.push(current);\r\n current = sorted[i];\r\n }\r\n }\r\n merged.push(current);\r\n \r\n return merged.map(m => {\r\n const s = m.start < 10 ? '0' + m.start + ':00' : m.start + ':00';\r\n const e = m.end < 10 ? '0' + m.end + ':00' : m.end + ':00';\r\n return `${s} - ${e}`;\r\n }).join(' \/ ');\r\n }\r\n\r\n \/* --- Navigation & Validation --- *\/\r\n function validate() {\r\n switch(currentStep) {\r\n case 1:\r\n if (!document.getElementById('fullName').value.trim()) { showError('\u05e0\u05d0 \u05dc\u05d4\u05d6\u05d9\u05df \u05e9\u05dd \u05de\u05dc\u05d0'); return false; }\r\n if (!document.getElementById('email').value.includes('@')) { showError('\u05e0\u05d0 \u05dc\u05d4\u05d6\u05d9\u05df \u05de\u05d9\u05d9\u05dc \u05ea\u05e7\u05d9\u05df'); return false; }\r\n if (document.getElementById('phone').value.length < 10) { showError('\u05e0\u05d0 \u05dc\u05d4\u05d6\u05d9\u05df \u05d8\u05dc\u05e4\u05d5\u05df \u05ea\u05e7\u05d9\u05df'); return false; }\r\n if (!document.getElementById('consent-checkbox').checked) { showError('\u05d7\u05d5\u05d1\u05d4 \u05dc\u05d0\u05e9\u05e8 \u05d0\u05ea \u05ea\u05e0\u05d0\u05d9 \u05d4\u05e9\u05d9\u05de\u05d5\u05e9'); return false; }\r\n return true;\r\n case 2:\r\n if (selectedEvents.length === 0) { showError('\u05e0\u05d0 \u05dc\u05d1\u05d7\u05d5\u05e8 \u05e1\u05d5\u05d2 \u05d0\u05d9\u05e8\u05d5\u05e2'); return false; }\r\n return true;\r\n case 3:\r\n const dateOption = document.querySelector('input[name=\"hasDate\"]:checked');\r\n if (!dateOption) { showError('\u05d9\u05e9 \u05dc\u05d1\u05d7\u05d5\u05e8 \u05e1\u05d8\u05d8\u05d5\u05e1 \u05ea\u05d0\u05e8\u05d9\u05da'); return false; }\r\n \r\n \/\/ \u05d1\u05d3\u05d9\u05e7\u05d4 \u05e9\u05d0\u05dd \u05e0\u05d1\u05d7\u05e8 \"\u05d9\u05e9 \u05ea\u05d0\u05e8\u05d9\u05da\" - \u05d4\u05e9\u05d3\u05d5\u05ea \u05d0\u05db\u05df \u05de\u05dc\u05d0\u05d9\u05dd\r\n if (dateOption.value === 'yes') {\r\n let validDates = true;\r\n document.querySelectorAll('.event-date-input').forEach(input => {\r\n if (!input.value) validDates = false;\r\n });\r\n if (!validDates) { showError('\u05e0\u05d0 \u05dc\u05d4\u05d6\u05d9\u05df \u05d0\u05ea \u05d4\u05ea\u05d0\u05e8\u05d9\u05db\u05d9\u05dd \u05d4\u05de\u05d1\u05d5\u05e7\u05e9\u05d9\u05dd'); return false; }\r\n }\r\n \r\n return true;\r\n case 4:\r\n let validGuests = true;\r\n document.querySelectorAll('.guest-input').forEach(i => { if(!i.value) validGuests = false; });\r\n if(!validGuests) { showError('\u05e0\u05d0 \u05dc\u05de\u05dc\u05d0 \u05db\u05de\u05d5\u05ea \u05d0\u05d5\u05e8\u05d7\u05d9\u05dd \u05de\u05e9\u05d5\u05e2\u05e8\u05ea'); return false; }\r\n return true;\r\n case 5:\r\n if (selectedProducts.length === 0) { showError('\u05e0\u05d0 \u05dc\u05d1\u05d7\u05d5\u05e8 \u05dc\u05e4\u05d7\u05d5\u05ea \u05de\u05d5\u05e6\u05e8 \u05d0\u05d7\u05d3'); return false; }\r\n \r\n \/\/ Added validation for \"Other\" product text input\r\n if (selectedProducts.includes('product-other') && !document.getElementById('otherProduct').value.trim()) {\r\n showError('\u05e0\u05d0 \u05dc\u05e4\u05e8\u05d8 \u05d0\u05ea \u05d4\u05de\u05d5\u05e6\u05e8 \u05d4\u05de\u05d1\u05d5\u05e7\u05e9 \u05d1\u05e9\u05d3\u05d4 \"\u05e1\u05e4\u05e8\u05d5 \u05dc\u05d9 \u05de\u05d4 \u05d0\u05ea\u05dd \u05de\u05d7\u05e4\u05e9\u05d9\u05dd\"');\r\n return false;\r\n }\r\n return true;\r\n case 6:\r\n if (!isSingleProduct) {\r\n if (!selectedCallDate) { showError('\u05e0\u05d0 \u05dc\u05d1\u05d7\u05d5\u05e8 \u05d9\u05d5\u05dd \u05dc\u05e9\u05d9\u05d7\u05d4'); return false; }\r\n if (selectedTimeSlots.length === 0) { showError('\u05e0\u05d0 \u05dc\u05d1\u05d7\u05d5\u05e8 \u05e9\u05e2\u05d4 \u05dc\u05e9\u05d9\u05d7\u05d4'); return false; }\r\n }\r\n return true;\r\n default: return true;\r\n }\r\n }\r\n\r\n function nextStep() {\r\n if (!validate()) return;\r\n \r\n if (currentStep === 2) generateGuestCountFields();\r\n if (currentStep === 4) updateMenuPricing();\r\n if (currentStep === 5) generateStep6();\r\n \r\n if (isSingleProduct && currentStep === 6) return; \r\n if (currentStep === 7) submitForm(); \r\n \r\n if (currentStep < totalSteps) {\r\n currentStep++;\r\n showStep(currentStep);\r\n }\r\n }\r\n\r\n function prevStep() {\r\n if (currentStep > 1) {\r\n if (currentStep === 6 && isSingleProduct) {\r\n isSingleProduct = false;\r\n totalSteps = 8;\r\n }\r\n currentStep--;\r\n showStep(currentStep);\r\n }\r\n }\r\n\r\n function showStep(step) {\r\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\r\n document.querySelector(`.step[data-step=\"${step}\"]`)?.classList.add('active');\r\n updateProgress();\r\n \r\n const prevBtn = document.getElementById('prev-btn');\r\n const nextBtn = document.getElementById('next-btn');\r\n const nav = document.getElementById('navigation-buttons');\r\n \r\n \/\/ Default logic\r\n prevBtn.style.display = step === 1 ? 'none' : 'inline-block';\r\n nextBtn.style.display = 'inline-block';\r\n nav.style.display = 'flex';\r\n nav.style.justifyContent = 'space-between';\r\n nav.classList.remove('d-none-important'); \/\/ Ensure visible by default\r\n\r\n \/\/ Explicit logic for step 8\r\n if (step === 8) {\r\n nav.style.setProperty('display', 'none', 'important');\r\n return;\r\n }\r\n\r\n if (isSingleProduct && step === 6) {\r\n \/\/ Special case for single product\r\n nextBtn.style.display = 'none'; \r\n \/\/ Center the prev button\r\n nav.style.justifyContent = 'center';\r\n } \r\n else {\r\n nextBtn.textContent = step === 7 ? '\u05e9\u05dc\u05d9\u05d7\u05d4 \u05d5\u05e1\u05d9\u05d5\u05dd' : '\u05d4\u05de\u05e9\u05da';\r\n }\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n function submitForm() {\r\n \/\/ Populate Thank You\r\n if (selectedCallDate) {\r\n const d = new Date(selectedCallDate);\r\n document.getElementById('confirm-date').textContent = d.toLocaleDateString('he-IL', { weekday: 'long', day: 'numeric', month: 'long' });\r\n \/\/ Use merging function\r\n document.getElementById('confirm-times').textContent = formatSelectedTimes(selectedTimeSlots);\r\n }\r\n\r\n \/\/ Collect Event Dates logic\r\n const eventDates = {};\r\n document.querySelectorAll('.event-date-input').forEach(input => {\r\n if(input.value) {\r\n \/\/ Convert YYYY-MM-DD to DD.MM.YYYY\r\n const parts = input.value.split('-');\r\n if (parts.length === 3) {\r\n eventDates[input.dataset.event] = `${parts[2]}.${parts[1]}.${parts[0]}`;\r\n } else {\r\n eventDates[input.dataset.event] = input.value;\r\n }\r\n }\r\n });\r\n\r\n const data = {\r\n fullName: document.getElementById('fullName').value,\r\n email: document.getElementById('email').value,\r\n phone: document.getElementById('phone').value,\r\n events: selectedEvents,\r\n otherEvent: document.getElementById('otherEventType').value,\r\n otherProduct: document.getElementById('otherProduct').value, \/\/ Added field for Other Product description\r\n eventDates: eventDates, \/\/ <--- ADDED THIS FIELD\r\n guestCounts: {},\r\n products: getSelectedProductElements().map(p => p.value),\r\n totalPrice: calculateTotal(), \/\/ This will be raw total, you might want to send final total too or handle in backend\r\n callDate: selectedCallDate,\r\n callTimes: selectedTimeSlots,\r\n notes: document.getElementById('additionalNotes').value\r\n };\r\n \r\n document.querySelectorAll('.guest-input').forEach(input => {\r\n if(input.value) data.guestCounts[input.dataset.event] = input.value;\r\n });\r\n\r\n \/\/ Facebook Pixel Tracking\r\n if (typeof fbq === 'function') {\r\n fbq('track', 'Lead', {\r\n content_name: 'Noam Designs Form Lead',\r\n value: data.totalPrice,\r\n currency: 'ILS'\r\n });\r\n }\r\n\r\n \/\/ Send\r\n fetch(\"https:\/\/hook.eu2.make.com\/lwlx80qg42l3sfxvrm43m9qow57cpvjl\", {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify(data)\r\n }).catch(console.error);\r\n \r\n currentStep = totalSteps;\r\n showStep(currentStep);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NOAM DESIGN \u05de\u05d9\u05ea\u05d5\u05d2 \u05d5\u05e2\u05d9\u05e6\u05d5\u05d1 \u05d0\u05d9\u05e8\u05d5\u05e2\u05d9\u05dd | \u05d4\u05e4\u05e7\u05ea \u05d3\u05e4\u05d5\u05e1 | \u05d9\u05e6\u05d9\u05e8\u05ea \u05ea\u05d5\u05db\u05df \u05d8\u05d5\u05e4\u05e1 \u05d4\u05d6\u05de\u05e0\u05d4 – \u05e0\u05e2\u05dd \u05d3\u05d9\u05d6\u05d9\u05d9\u05df \u05e9\u05dc\u05d1 1 \u05de\u05ea\u05d5\u05da 8 13% \u05e4\u05e8\u05d8\u05d9\u05dd \u05d0\u05d9\u05e9\u05d9\u05d9\u05dd \u05d4\u05d5\u05e1\u05d9\u05e4\u05d5 \u05e2\u05d5\u05d3 \u05de\u05d5\u05e6\u05e8 \u05d0\u05d7\u05d3 \u05dc\u05e4\u05d7\u05d5\u05ea \u05db\u05d3\u05d9 \u05dc\u05e7\u05d1\u05dc 10% \u05d4\u05e0\u05d7\u05d4 \u05d1\u05e7\u05e0\u05d9\u05d9\u05ea 3 \u05de\u05d5\u05e6\u05e8\u05d9\u05dd \u05d5\u05de\u05e2\u05dc\u05d4! \u05d1\u05e8\u05d5\u05db\u05d9\u05dd \u05d4\u05d1\u05d0\u05d9\u05dd \u05dc\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e9\u05dc \u05e0\u05e2\u05dd \u05d3\u05d9\u05d6\u05d9\u05d9\u05df \u05d4\u05d2\u05e2\u05ea\u05dd \u05dc\u05de\u05e7\u05d5\u05dd \u05e9\u05d1\u05d5 \u05d2\u05e8\u05e4\u05d9\u05e7\u05d4, \u05d4\u05e4\u05e7\u05ea \u05d3\u05e4\u05d5\u05e1 \u05d5\u05d9\u05e6\u05d9\u05e8\u05ea \u05ea\u05d5\u05db\u05df \u05de\u05e9\u05ea\u05dc\u05d1\u05d9\u05dd \u05dc\u05d7\u05d5\u05d5\u05d9\u05d4 \u05d0\u05d7\u05ea. \u05d0\u05e0\u05d9 \u05de\u05e2\u05e0\u05d9\u05e7\u05d4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3201","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/noamdesigns.com\/he\/wp-json\/wp\/v2\/pages\/3201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noamdesigns.com\/he\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/noamdesigns.com\/he\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/noamdesigns.com\/he\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/noamdesigns.com\/he\/wp-json\/wp\/v2\/comments?post=3201"}],"version-history":[{"count":100,"href":"https:\/\/noamdesigns.com\/he\/wp-json\/wp\/v2\/pages\/3201\/revisions"}],"predecessor-version":[{"id":7409,"href":"https:\/\/noamdesigns.com\/he\/wp-json\/wp\/v2\/pages\/3201\/revisions\/7409"}],"wp:attachment":[{"href":"https:\/\/noamdesigns.com\/he\/wp-json\/wp\/v2\/media?parent=3201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}