{"id":6,"date":"2024-01-11T18:51:28","date_gmt":"2024-01-11T18:51:28","guid":{"rendered":"https:\/\/michellekevin.weddingessentials.pro\/?page_id=6"},"modified":"2024-01-12T18:32:07","modified_gmt":"2024-01-12T18:32:07","slug":"wedding-page","status":"publish","type":"page","link":"https:\/\/michellekevin.weddingessentials.pro\/","title":{"rendered":"Wedding Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4766f475 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"4766f475\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f16a831\" data-id=\"f16a831\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1eb7459c elementor-widget elementor-widget-image\" data-id=\"1eb7459c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-12-1024x1024.png\" class=\"attachment-large size-large wp-image-31\" alt=\"\" srcset=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-12-1024x1024.png 1024w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-12-300x300.png 300w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-12-150x150.png 150w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-12-768x768.png 768w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-12-1536x1536.png 1536w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-12.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee4e672 elementor-widget elementor-widget-text-editor\" data-id=\"ee4e672\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>invite you to join them at their wedding ceremony<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70d6b3f8 elementor-widget elementor-widget-image\" data-id=\"70d6b3f8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-33-1024x576.png\" class=\"attachment-large size-large wp-image-32\" alt=\"\" srcset=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-33-1024x576.png 1024w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-33-300x169.png 300w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-33-768x432.png 768w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-33-1536x864.png 1536w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-33.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b8e4b03 elementor-widget elementor-widget-text-editor\" data-id=\"1b8e4b03\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p class=\"cvGsUA direction-ltr align-center para-style-body\"><span class=\"OYPEnA text-decoration-none text-strikethrough-none\"><a href=\"https:\/\/maps.app.goo.gl\/mudZKAopUdtW88mAA\">Springfort Hall Hotel<\/a>, Mallow<\/span><\/p><p class=\"cvGsUA direction-ltr align-center para-style-body\"><span class=\"OYPEnA text-decoration-none text-strikethrough-none\">Co. Cork P51 YP96<\/span><\/p><p class=\"cvGsUA direction-ltr align-center para-style-body\"><span class=\"OYPEnA text-decoration-none text-strikethrough-none\">00 353 (22) 21 278<\/span><\/p>\t\t\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-51afd370 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"51afd370\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-32ff722e\" data-id=\"32ff722e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-60030b59 elementor-widget elementor-widget-image\" data-id=\"60030b59\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"666\" height=\"375\" src=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/409729096_7344584025594405_510959049892024125_n-removebg-preview.png\" class=\"attachment-large size-large wp-image-18\" alt=\"\" srcset=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/409729096_7344584025594405_510959049892024125_n-removebg-preview.png 666w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/409729096_7344584025594405_510959049892024125_n-removebg-preview-300x169.png 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48831f45 elementor-widget elementor-widget-text-editor\" data-id=\"48831f45\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Schedule<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58db8f9a elementor-widget elementor-widget-image\" data-id=\"58db8f9a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"1024\" src=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-34-512x1024.png\" class=\"attachment-large size-large wp-image-33\" alt=\"\" srcset=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-34-512x1024.png 512w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-34-150x300.png 150w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-34-768x1536.png 768w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-34-1024x2048.png 1024w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-34.png 1500w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bd75a44 elementor-widget elementor-widget-menu-anchor\" data-id=\"1bd75a44\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\nbody.elementor-page .elementor-widget-menu-anchor{margin-bottom:0}<\/style>\t\t<div id=\"rsvp\" class=\"elementor-menu-anchor\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d266d4d elementor-widget elementor-widget-image\" data-id=\"7d266d4d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-25-1024x576.png\" class=\"attachment-large size-large wp-image-20\" alt=\"\" srcset=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-25-1024x576.png 1024w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-25-300x169.png 300w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-25-768x432.png 768w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-25-1536x864.png 1536w, https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-25.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f19e9cb elementor-widget elementor-widget-text-editor\" data-id=\"7f19e9cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>RSVP<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18b0281e elementor-widget elementor-widget-text-editor\" data-id=\"18b0281e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span class=\"OYPEnA text-decoration-none text-strikethrough-none\">strictly by <\/span><strong><span class=\"OYPEnA text-decoration-none text-strikethrough-none\">March 31st, 2024<\/span><\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44ae4007 elementor-widget elementor-widget-html\" data-id=\"44ae4007\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t  <!-- Initial Step -->\r\n  <div id=\"step-1\" class=\"step\">\r\n    <div class=\"acceptance-icons-container\">\r\n        <div class=\"acceptance-icons\" title=\"Accept\" onclick=\"toggleIcon('accept')\">\r\n            <div class=\"icon\" id='icon-accept'>\r\n                <img decoding=\"async\" src=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/heart.png\">\r\n            <\/div>\r\n            <div class=\"acceptance-label\"> I WILL <br>ATTEND<\/div>\r\n        <\/div>\r\n        <div class=\"acceptance-icons\" title=\"Decline\" onclick=\"toggleIcon('deny')\">\r\n            <div class=\"icon\" id='icon-deny'>\r\n                <img decoding=\"async\" src=\"https:\/\/michellekevin.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/broken-heart.png\">\r\n            <\/div>\r\n            <div class=\"acceptance-label\">SORRY, <br>I CAN'T<\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <label for=\"name\">Name:<\/label>\r\n    <input type=\"text\" id=\"name\">\r\n    <label for=\"phone\">Phone:<\/label>\r\n    <input type=\"tel\" id=\"phone\">\r\n    <label for=\"email\">Email:<\/label>\r\n    <input type=\"email\" id=\"email\">\r\n    <label for=\"guests\">Number of Guests:<\/label>\r\n    <input type=\"number\" id=\"guests\" min=\"1\" value=\"1\">\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(1, 2)\">NEXT<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n  <!-- Guest Step -->\r\n<div id=\"step-2\" class=\"step\" style=\"display: none;\">\r\n    <div id=\"guestsInfo\"><\/div>\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(2, 1)\">BACK<\/button>\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(2, 3)\">NEXT<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n  <!-- Review Step -->\r\n<div id=\"step-3\" class=\"step\" style=\"display: none;\">\r\n    <div id=\"review\"><\/div>\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(3, 2)\">BACK<\/button>\r\n        <button id=\"submit-btn\" onclick=\"submitForm()\">SUBMIT<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n  <!-- Loading Step -->\r\n<div id=\"step-loading\" style=\"display: none;\">\r\n  <div class=\"loading\">\r\n    <div class=\"loader\"><\/div>\r\n  <\/div>\r\n  <p>Loading, please wait...<\/p>\r\n<\/div>\r\n\r\n\r\n <!-- Step Success: Display when the data has been sent successfully -->\r\n<div id=\"step-success\" style=\"display: none;\">\r\n  <h1>Thank you!<\/h1>\r\n  <p>Your information was successfully submitted.<\/p>\r\n<\/div>\r\n\r\n<!-- Step Failure: Display when there was an error sending the data -->\r\n<div id=\"step-failure\" style=\"display: none;\">\r\n  <h1>Oops!<\/h1>\r\n  <p>An error has occured. Please disable your AdBlockers and try again.<\/p>\r\n<\/div>\r\n\r\n\r\n<style>\r\n.button-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 10px; \/* Adds space between buttons *\/\r\n    margin: 15px auto; \/* Centers the container horizontally *\/\r\n}\r\n\r\n.nextPrev-btn {\r\n    width:50%;\r\n    background-color: #8C987D;\r\n    border: none;\r\n    color: white;\r\n    font-family: 'Playfair Display';\r\n    border-radius: 24px;\r\n}\r\n\r\n#submit-btn {\r\n    width: 80%;\r\n    background-color: #8C987D;\r\n    border: none;\r\n    color: white;\r\n    font-weight: bold;\r\n    font-family: 'Playfair Display';\r\n    border-radius: 24px;\r\n}\r\n\r\n\r\n.acceptance-icons-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.acceptance-icons {\r\n    display: flex;\r\n    width: 50%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    margin-right: 20px;\r\n    cursor: pointer;\r\n}\r\n\r\n.icon {\r\n    width: 64px;\r\n}\r\n\r\n.icon img {\r\n    max-width: 100%;\r\n}\r\n\r\n.acceptance-label {\r\n    text-align: center;\r\n    font-family: 20px;\r\n    font-weight: bold;\r\n    margin-top: 10px;\r\n    font-family: 'Playfair Display';\r\n}\r\n\r\n.guest-collapsible {\r\n    cursor: pointer;\r\n    border: 1px solid #f1f1f1;\r\n    margin: 10px 0;\r\n}\r\n\r\n.guest-content {\r\n    display: block;\r\n    padding: 10px;\r\n}\r\n\r\n\/* Styles for all input fields *\/\r\n.guest-content input {\r\n    width: 100%;                  \/* Make input take the full width of the container *\/\r\n    padding: 10px 15px;           \/* Add padding for better appearance *\/\r\n    border: 1px solid #ccc;       \/* Define a border *\/\r\n    border-radius: 4px;           \/* Round the corners slightly *\/\r\n    font-size: 16px;              \/* Font size *\/\r\n    background-color: white;      \/* Background color *\/\r\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); \/* Add a subtle inner shadow for depth *\/\r\n    margin-bottom: 10px;          \/* Space between input fields *\/\r\n    appearance: none;             \/* Remove browser default styling *\/\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    transition: border-color 0.2s; \/* Transition for a smooth effect on focus *\/\r\n    height: 40px;\r\n}\r\n\r\n\/* Hover state *\/\r\n.guest-content input:hover {\r\n    border-color: #aaa;           \/* Slightly darken border on hover *\/\r\n}\r\n\r\n\/* Focus state *\/\r\n.guest-content input:focus {\r\n    border-color: #007BFF;        \/* Highlight border color when input is focused *\/\r\n    outline: none;                \/* Remove the default browser outline *\/\r\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 123, 255, 0.5); \/* Enhance shadow on focus *\/\r\n}\r\n\r\n\/* Remove the default clear 'x' in IE and Edge *\/\r\n.guest-content input::-ms-clear {\r\n    display: none;\r\n}\r\n\r\n\/* Remove default spin buttons on number inputs for Firefox *\/\r\n.guest-content input[type=\"number\"]::-webkit-inner-spin-button,\r\n.guest-content input[type=\"number\"]::-webkit-outer-spin-button {\r\n    appearance: none;\r\n    margin: 0;\r\n}\r\n\r\n\/* Remove default spin buttons on number inputs for Firefox *\/\r\n.guest-content input[type=\"number\"] {\r\n    -moz-appearance: textfield;\r\n}\r\n\r\n\/* Handle styles for date pickers in Webkit browsers *\/\r\n.guest-content input[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n    background-color: rgba(0, 123, 255, 0.3);\r\n    border-radius: 4px;\r\n    padding: 5px;\r\n    color: transparent;         \/* Transparent color for the default icon *\/\r\n    cursor: pointer;            \/* Cursor style *\/\r\n}\r\n\r\n\r\n\/* CSS for reviewDiv *\/\r\n#review {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center; \/* Centers items horizontally *\/\r\n    width: 100%;\r\n    max-width: 600px; \/* Limiting the maximum width to ensure readability *\/\r\n    margin: 20px auto; \/* 20px vertical margin and auto horizontal margin to center the div *\/\r\n    padding: 20px;\r\n    border: 1px solid #e0e0e0;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); \/* Optional subtle shadow for some depth *\/\r\n    background-color: #ffffff;\r\n}\r\n\r\n#review p {\r\n    width: 100%;\r\n    text-align: left; \/* Content aligned to left within each paragraph *\/\r\n    margin-bottom: 15px;\r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n}\r\n\r\n#review h3 {\r\n    width: 100%;\r\n    margin-bottom: 10px; \/* Add some spacing below the headers *\/\r\n    font-size: 18px; \/* Adjust the font size as needed *\/\r\n    \/* Additional styling for headers as needed *\/\r\n}\r\n\r\n#step-loading, #step-success, #step-failure {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center; \/* Centers items horizontally *\/\r\n  justify-content: center; \/* Centers items vertically *\/\r\n  width: 50%; \/* Set the width to 50% *\/\r\n  margin: 0 auto; \/* Center the div on the page *\/\r\n  padding: 20px;\r\n  text-align: center; \/* Center-align the text *\/\r\n}\r\n\r\n#step-success, #step-failure {\r\n  text-align: center;\r\n  color: #333;\r\n  font-size: 18px;\r\n}\r\n\r\n#step-success h1,\r\n#step-failure h1 {\r\n  color: #aec5b3;\r\n  font-size: 24px;\r\n}\r\n\r\n.loading {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n#step-loading p {\r\n    text-align: center;\r\n    margin-top: 25px;\r\n}\r\n\r\n.loader {\r\n  border: 5px solid #f3f3f3;\r\n  border-radius: 50%;\r\n  border-top: 5px solid #3498db;\r\n  width: 50px;\r\n  height: 50px;\r\n  animation: spin 2s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}\r\n\r\n\r\n.error-message {\r\n  font-size: 16px; \r\n  color: red; \r\n  margin-top: 10px; \r\n  font-weight: bold; \r\n  display: none; \r\n}\r\n\r\nlabel {\r\n    text-transform: uppercase;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n    function toggleIcon(selectedIconType) {\r\n        \/\/ Elements for both icons\r\n        const acceptIcon = document.getElementById('icon-accept');\r\n        const denyIcon = document.getElementById('icon-deny');\r\n\r\n        \/\/ Determine which icon is clicked and which is the other icon\r\n        const clickedIcon = selectedIconType === 'accept' ? acceptIcon : denyIcon;\r\n        const otherIcon = selectedIconType === 'accept' ? denyIcon : acceptIcon;\r\n\r\n        \/\/ Toggle the 'selected' class and update the image for the clicked icon\r\n        if (clickedIcon.classList.contains('selected')) {\r\n            clickedIcon.classList.remove('selected');\r\n            clickedIcon.querySelector('img').src = clickedIcon.querySelector('img').src.replace('-selected1.png', '.png');\r\n        } else {\r\n            clickedIcon.classList.add('selected');\r\n            clickedIcon.querySelector('img').src = clickedIcon.querySelector('img').src.replace('.png', '-selected1.png');\r\n        }\r\n\r\n        \/\/ Ensure the other icon is not selected and its image is the default one\r\n        if (otherIcon.classList.contains('selected')) {\r\n            otherIcon.classList.remove('selected');\r\n            otherIcon.querySelector('img').src = otherIcon.querySelector('img').src.replace('-selected1.png', '.png');\r\n        }\r\n    } \r\n\r\n\r\n    function hideAllSteps() {\r\n        const stepDivs = document.querySelectorAll('[id^=\"step-\"]');\r\n        stepDivs.forEach(div => div.style.display = 'none');\r\n    }\r\n\r\n    function changeStep(currentStep, targetStep) {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n\r\n        if (targetStep === 1) {}\r\n\r\n        if (targetStep === 2) {\r\n            if(currentStep === 1) {\r\n                if (!verifyStep1()) {\r\n                    return;\r\n                }\r\n                else if (!isAccepted) {\r\n                    targetStep = 3;\r\n                }\r\n                else {\r\n                    createGuestInfo();\r\n                }\r\n            }\r\n\r\n            if(currentStep === 3) {\r\n                if (!isAccepted) {\r\n                    targetStep = 1;\r\n                }\r\n            }\r\n        }\r\n\r\n        if (targetStep === 3) {\r\n            if (!verifyStep2()) {\r\n                return;\r\n            }\r\n\r\n            createReview();\r\n        }\r\n\r\n        hideAllSteps();\r\n        document.getElementById('step-' + targetStep).style.display = 'block';\r\n    }\r\n\r\n\r\n    function createGuestInfo() {\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value);\r\n        const guestsInfoDiv = document.getElementById('guestsInfo');\r\n        guestsInfoDiv.innerHTML = ''; \/\/ Clear previous content\r\n\r\n        \/\/ Create options for guests\r\n        for (let j = 1; j <= numberOfGuests; j++) {\r\n            guestsInfoDiv.innerHTML += `\r\n                <div class=\"guest\">\r\n                    <h3>Guest #${j}<\/h3>\r\n                    <label>Name:<\/label>\r\n                    <input type=\"text\" class=\"guest-name\" oninput=\"updateGuestTitle(this, 'Guest', ${j})\">\r\n\r\n                    <!-- New line for further guest options  -->\r\n                    <div class=\"guest-options\">\r\n                        <label>Dietary Requirements:<\/label>\r\n                        <input type=\"text\" class=\"guest-dietary\">\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n        }\r\n    }\r\n\r\n\r\n    function updateGuestTitle(inputElement, guestType, guestNumber) {\r\n        const guestName = inputElement.value;\r\n        const guestSection = inputElement.closest('.guest');\r\n        const titleElement = guestSection.querySelector('h3');\r\n\r\n        titleElement.textContent = guestName || `${guestType} #${guestNumber}`;\r\n    }\r\n\r\n\r\n    function verifyStep1() {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const isDenied = document.getElementById('icon-deny').classList.contains('selected');\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value);\r\n        const name = document.getElementById('name').value;\r\n        const phone = document.getElementById('phone').value;\r\n        const email = document.getElementById('email').value;\r\n        const step1Div = document.getElementById('step-1');\r\n        const errorMessageDiv = step1Div.querySelector('#error-message');\r\n        errorMessageDiv.textContent = '';\r\n\r\n        \/\/ Check if either accepted or denied is selected\r\n        if (!isAccepted && !isDenied) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Please either accept or decline';\r\n            return false; \/\/ Return false indicating verification failed\r\n        }\r\n\r\n        if(numberOfGuests < 1) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Number of Guests must be at least 1';\r\n            return false; \/\/ Return false indicating verification failed \r\n        }\r\n\r\n        if(!name || !phone || !email) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Please fill out all contact fields';\r\n            return false; \/\/ Return false indicating verification failed\r\n        }\r\n\r\n        errorMessageDiv.style.display = 'none';\r\n        errorMessageDiv.textContent = '';\r\n        return true; \/\/ Return true indicating successful verification\r\n    }\r\n\r\n\r\n    function verifyStep2() {\r\n        \/\/ Get all guest names\r\n        const step2Div = document.getElementById('step-2');\r\n        const errorMessageDiv = step2Div.querySelector('#error-message');\r\n        errorMessageDiv.textContent = '';\r\n        \r\n        \/\/ Function to check if input is empty\r\n        const isInputEmpty = (input) => input.value.trim() === '';\r\n        \r\n        \/\/ Check if any guest names are empty\r\n        const guestNames = document.querySelectorAll('.guest-name');\r\n        for (const input of guestNames) {\r\n            if (isInputEmpty(input)) {\r\n                errorMessageDiv.style.display = 'block';\r\n                errorMessageDiv.textContent = 'Please fill out all guest names';\r\n                return false; \/\/ Return false indicating verification failed\r\n            }\r\n        }\r\n\r\n        \/\/ If all inputs have values\r\n        errorMessageDiv.style.display = 'none';\r\n        errorMessageDiv.textContent = '';\r\n        return true; \/\/ Return true indicating successful verification\r\n    }\r\n\r\n\r\n    function createReview() {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const acceptanceStatus = isAccepted ? 'Joyfully attend' : 'Regretfully decline';\r\n        const numberOfGuests = document.getElementById('guests').value;\r\n        const name = document.getElementById('name').value;\r\n        const phone = document.getElementById('phone').value;\r\n        const email = document.getElementById('email').value;\r\n\r\n\r\n        const reviewDiv = document.getElementById('review');\r\n        reviewDiv.innerHTML = `<h2>Review Your Information<\/h2>`;\r\n        reviewDiv.innerHTML += `<p>Acceptance Status: ${acceptanceStatus}<\/p>`;\r\n        reviewDiv.innerHTML += `<p>Name: ${name}<\/p>`;\r\n        reviewDiv.innerHTML += `<p>Phone: ${phone}<\/p>`;\r\n        reviewDiv.innerHTML += `<p>Email: ${email}<\/p>`;\r\n        reviewDiv.innerHTML += `<p>Number of Guests: ${numberOfGuests}<\/p>`;\r\n        \r\n        if(isAccepted) {\r\n            const guestNames = document.querySelectorAll('.guest-name');\r\n            const guestDietary = document.querySelectorAll('.guest-dietary');\r\n\r\n            reviewDiv.innerHTML += `<h3>Guests:<\/h3>`;\r\n            guestNames.forEach((input, index) => {\r\n                    const dietary = guestDietary[index].value ? guestDietary[index].value : 'None';\r\n                    reviewDiv.innerHTML += `<p>Guest #${index + 1}: ${input.value} - Dietary: ${dietary}<\/p>`;\r\n            });\r\n        }\r\n    }\r\n\r\n\r\n    function submitForm() {\r\n        changeStep(3, 'loading')\r\n        \r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const acceptanceStatus = isAccepted ? 'Accepted' : 'Declined';\r\n        const name = document.getElementById('name').value;\r\n        const phone = document.getElementById('phone').value;\r\n        const email = document.getElementById('email').value;\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value, 10);\r\n\r\n        const guests = [];\r\n        if (isAccepted) {\r\n            const guestSections = document.querySelectorAll('.guest-options');\r\n            guestSections.forEach((guestSection, index) => {\r\n                const guestName = guestSection.parentElement.querySelector('.guest-name').value;\r\n                \r\n                const guestDietary = guestSection.querySelector('.guest-dietary').value;\r\n                guests.push({\r\n                    id: index + 1,\r\n                    name: guestName,\r\n                    dietary: guestDietary\r\n                });\r\n            });\r\n        }\r\n\r\n\r\n        const payload = {\r\n            acceptanceStatus,\r\n            name,\r\n            phone,\r\n            email,\r\n            numberOfGuests,\r\n            guests\r\n        };\r\n\r\n\r\n        const url = 'https:\/\/europe-west3-wedding-rsvp-385418.cloudfunctions.net\/rsvp-michellekevin';\r\n\r\n        fetch(url, {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n            },\r\n            body: JSON.stringify(payload)\r\n        })\r\n        .then(response => {\r\n            \/\/ Wait for at least 1 second before switching steps\r\n            setTimeout(() => {\r\n                if (response.ok) {\r\n                    \/\/ Received 200\r\n                    changeStep(3, 'success');\r\n                } else {\r\n                    console.log('Backend error');\r\n                    changeStep(3, 'failure');\r\n                }\r\n            }, 500);  \/\/ 1000 milliseconds = 1 second\r\n        })\r\n        .catch(error => {\r\n            \/\/ Wait for at least 1 second before switching steps\r\n            setTimeout(() => {\r\n                \/\/ Error sending data\r\n                changeStep(3, 'failure');\r\n            }, 500);  \/\/ 1000 milliseconds = 1 second\r\n        });\r\n        \r\n        \r\n        const rsvpElement = document.getElementById('rsvp');\r\n        if (rsvpElement) {\r\n            rsvpElement.scrollIntoView({ behavior: 'smooth' });\r\n        }\r\n    }\r\n<\/script>\r\n\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\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-111553e8 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"111553e8\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b2ef387 elementor-widget elementor-widget-text-editor\" data-id=\"3b2ef387\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Looking forward to seeing you soon!<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-292c0b4 elementor-widget elementor-widget-eael-countdown\" data-id=\"292c0b4\" data-element_type=\"widget\" data-widget_type=\"eael-countdown.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\n\t\t<div class=\"eael-countdown-wrapper\" data-countdown-id=\"292c0b4\" data-expire-type=\"none\" data-countdown-type=\"due_date\">\n\t\t\t<div class=\"eael-countdown-container eael-countdown-label-block  eael-countdown-label-inline-mobile \">\n\t\t\t\t<ul id=\"eael-countdown-292c0b4\" class=\"eael-countdown-items\" data-date=\"Jul 19 2024 14:00:00 +0\">\n\t\t\t\t\t<li class=\"eael-countdown-item\"><div class=\"eael-countdown-days\"><span data-days class=\"eael-countdown-digits\">00<\/span><span class=\"eael-countdown-label\">Days<\/span><\/div><\/li>\t\t\t\t\t<li class=\"eael-countdown-item\"><div class=\"eael-countdown-hours\"><span data-hours class=\"eael-countdown-digits\">00<\/span><span class=\"eael-countdown-label\">Hours<\/span><\/div><\/li>\t\t\t\t<li class=\"eael-countdown-item\"><div class=\"eael-countdown-minutes\"><span data-minutes class=\"eael-countdown-digits\">00<\/span><span class=\"eael-countdown-label\">Minutes<\/span><\/div><\/li>\t\t\t\t<li class=\"eael-countdown-item\"><div class=\"eael-countdown-seconds\"><span data-seconds class=\"eael-countdown-digits\">00<\/span><span class=\"eael-countdown-label\">Seconds<\/span><\/div><\/li>\t\t\t\t<\/ul>\n                <div class=\"eael-countdown-expiry-template\" style=\"display: none;\">\n\t\t\t\t\t                <\/div>\n\t\t\t\t<div class=\"clearfix\"><\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>invite you to join them at their wedding ceremony Springfort Hall Hotel, Mallow Co. Cork P51 YP96 00 353 (22) 21 278 Schedule RSVP strictly by March 31st, 2024 I WILL ATTEND SORRY, I CAN&#8217;T Name: Phone: Email: Number of Guests: NEXT BACK NEXT BACK SUBMIT Loading, please wait&#8230; Thank you! Your information was successfully [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/michellekevin.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/6"}],"collection":[{"href":"https:\/\/michellekevin.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/michellekevin.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/michellekevin.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michellekevin.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":41,"href":"https:\/\/michellekevin.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/michellekevin.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/72"}],"wp:attachment":[{"href":"https:\/\/michellekevin.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}