{"id":36904,"date":"2025-10-06T11:10:36","date_gmt":"2025-10-06T11:10:36","guid":{"rendered":"https:\/\/mysagedental.com\/?page_id=36904"},"modified":"2026-04-27T03:56:17","modified_gmt":"2026-04-27T07:56:17","slug":"book-an-appointment","status":"publish","type":"page","link":"https:\/\/simpleseogroup.co\/sage\/book-an-appointment\/","title":{"rendered":"Book An Appointment"},"content":{"rendered":"<h3>personalize your <strong>appointment<\/strong> options<\/h3>\n<script>\n    \/\/ Store from_curae in sessionStorage if present in URL\n    if (window.location.search.includes('from_curae=1')) {\n        sessionStorage.setItem('from_curae', '1');\n    }\n<\/script>\n<style>\n    \/* Hide header sections when coming from CuraeChoice (checks both URL and sessionStorage) *\/\n    body[data-hide-header=\"true\"] header.main-new-header .nav_links,\n    body[data-hide-header=\"true\"] header.main-new-header .main-btn,\n    body[data-hide-header=\"true\"] header.main-new-header .mobile-toggle-main {\n        display: none !important;\n    }\n<\/style>\n<script>\n    \/\/ Apply data attribute based on URL param or sessionStorage\n    (function () {\n        var fromCurae = window.location.search.includes('from_curae=1') ||\n            sessionStorage.getItem('from_curae') === '1';\n        if (fromCurae) {\n            document.body.setAttribute('data-hide-header', 'true');\n        }\n    })();\n<\/script>\n\n<div class=\"book-an-appointmen-new\" id=\"sage-form\">\n    <div class=\"title-heading\">\n        <div class=\"step-header-first\">\n            <h3 tabindex=\"0\">Let's Book Your Dental <strong>Appointment<\/strong><\/h3>\n        <\/div>\n        <div class=\"step-header-second\">\n            <h3 tabindex=\"0\">Let\u2019s find a <strong>time<\/strong> that works for you<\/h3>\n        <\/div>\n    <\/div>\n\n    <!-- Step Indicator -->\n    <div class=\"indicator-s-main\">\n        <div class=\"step-indicator\">\n            <div class=\"step-item active step-1-1\" data-step=\"1\">\n                <div class=\"step-number\">1<\/div>\n                <div class=\"svg-after-active\">\n                    <svg width=\"29\" height=\"29\" viewBox=\"0 0 29 29\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect width=\"29\" height=\"29\" rx=\"5\" fill=\"white\" \/>\n                        <path d=\"M21.5314 9.16562L11.8627 18.8344L7.46777 14.4395\" stroke=\"#6DBB69\" stroke-width=\"2\"\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                    <\/svg>\n                <\/div>\n                <div class=\"step-label\" tabindex=\"0\">Your Information<\/div>\n            <\/div>\n\n            <div class=\"step-item\" data-step=\"2\">\n                <div class=\"step-number\">2<\/div>\n                <div class=\"step-label\" tabindex=\"0\">Appointment Options<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- STEP 1: Patient Information -->\n    <div class=\"step active\" id=\"step-1\">\n        <div class=\"patient-form\">\n                        <p>We just need a few details to find you the most conveinent appointment options.<\/p>\n\n            <div class=\"form-grid\">\n                <div class=\"form-group label-input-wrap\">\n                    <label for=\"first_name\">First Name<\/label>\n                    <input type=\"text\" id=\"first_name\" placeholder=\"Enter First Name\">\n                <\/div>\n\n                <div class=\"form-group label-input-wrap\">\n                    <label for=\"last_name\">Last Name<\/label>\n                    <input type=\"text\" id=\"last_name\" placeholder=\"Enter Last Name\">\n                <\/div>\n\n                <div class=\"form-group label-input-wrap\">\n                    <label for=\"email\">Your Email Address<\/label>\n                    <input type=\"email\" id=\"email\" placeholder=\"Enter Email Address\">\n                <\/div>\n\n                <div class=\"form-group label-input-wrap\">\n                    <label for=\"phone\">Your Phone<\/label>\n                    <input type=\"tel\" id=\"phone\" placeholder=\"Enter Phone Number\">\n                <\/div>\n\n                <div class=\"form-group label-input-wrap\">\n                    <label for=\"dob\">Date of Birth<\/label>\n                    <input type=\"text\" id=\"dob\" placeholder=\"MM\/DD\/YYYY\">\n                <\/div>\n\n                <div class=\"form-group label-input-wrap\">\n                    <label for=\"zip\">Zip Code<\/label>\n                    <input type=\"text\" id=\"zip\" placeholder=\"Enter Zip Code\">\n                <\/div>\n            <\/div>\n\n            <div class=\"consent-checkbox check-box-wap\">\n                <input type=\"checkbox\" id=\"consent\" name=\"consent\">\n                <label for=\"consent\">\n                    I agree to receive emails and SMS notifications and marketing messages from Sage Dental.\n                <\/label>\n            <\/div>\n\n            <div id=\"form-error-message\" class=\"error-message\"><\/div>\n            <button id=\"check-availability\" class=\"primary-btn\">\n                CHECK AVAILABILITY <svg width=\"23\" height=\"15\" viewBox=\"0 0 23 15\" fill=\"none\"\n                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path\n                        d=\"M22.496 8.07106C22.8865 7.68054 22.8865 7.04737 22.496 6.65685L16.132 0.292885C15.7415 -0.0976396 15.1083 -0.0976396 14.7178 0.292885C14.3273 0.683409 14.3273 1.31657 14.7178 1.7071L20.3747 7.36395L14.7178 13.0208C14.3273 13.4113 14.3273 14.0445 14.7178 14.435C15.1083 14.8255 15.7415 14.8255 16.132 14.435L22.496 8.07106ZM0 7.36395V8.36395H21.7889V7.36395V6.36395H0V7.36395Z\"\n                        fill=\"white\" \/>\n                <\/svg>\n            <\/button>\n        <\/div>\n        <div class=\"img-wrap-appointment\">\n                            <img decoding=\"async\" src=\"https:\/\/simpleseogroup.co\/sage\/wp-content\/uploads\/2026\/03\/Dedicated-to-Supporting-You-in-Practice-and-in-Life.-1-1-1.jpg\" class=\"img-fluid\" alt=\"Live\">\n                    <\/div>\n    <\/div>\n\n    <!-- Guarantor Form -->\n    <div class=\"step\" id=\"guarantor-form\" style=\"display: none;\">\n\n        <div class=\"appointment-age-form\">\n            <div class=\"patient-form\">\n\n                <!--****** Parent Guardian form update , 14 April 2026-->\n                <div class=\"step-header\">\n                    <!--<h2 class=\"mb-3\">Parent\/Guardian Information Required<\/h2>-->\n                    <!--<p>This patient is under 18. Please enter parent or guardian information.<\/p>-->\n                    <h2 class=\"mb-3\">Parent\/Guardian's Information Requested, Patient Is Under 18.<\/h2>\n\n                    <div id=\"patient-info-summary\" class=\"patient-summary-box\"\n                        style=\"display: none; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 15px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); max-width: 600px;\">\n                        <div\n                            style=\"font-weight: 700; color: #004a26; margin-bottom: 10px; font-size: 15px; border-bottom: 1px solid #f0f0f0; padding-bottom: 5px; display: flex; align-items: center; gap: 8px;\">\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\n                                <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n                            <\/svg>\n                            Patient Information\n                        <\/div>\n                        <div\n                            style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px; font-size: 13px; color: #444; word-break: break-word; overflow-wrap: break-word;\">\n                            <div><strong\n                                    style=\"color: #888; font-size: 10px; text-transform: uppercase; display: block;\">First\n                                    Name<\/strong> <span id=\"summary-patient-display-firstname\"\n                                    style=\"font-weight: 500;\"><\/span><\/div>\n                            <div><strong\n                                    style=\"color: #888; font-size: 10px; text-transform: uppercase; display: block;\">Last\n                                    Name<\/strong> <span id=\"summary-patient-display-lastname\"\n                                    style=\"font-weight: 500;\"><\/span><\/div>\n                            <div><strong\n                                    style=\"color: #888; font-size: 10px; text-transform: uppercase; display: block;\">Email\n                                    Address<\/strong> <span id=\"summary-patient-display-email\"\n                                    style=\"font-weight: 500;\"><\/span><\/div>\n                            <div><strong\n                                    style=\"color: #888; font-size: 10px; text-transform: uppercase; display: block;\">Phone\n                                    Number<\/strong> <span id=\"summary-patient-display-phone\"\n                                    style=\"font-weight: 500;\"><\/span><\/div>\n                            <div><strong\n                                    style=\"color: #888; font-size: 10px; text-transform: uppercase; display: block;\">Date\n                                    of Birth<\/strong> <span id=\"summary-patient-display-dob\"\n                                    style=\"font-weight: 500;\"><\/span><\/div>\n                            <div><strong\n                                    style=\"color: #888; font-size: 10px; text-transform: uppercase; display: block;\">Zip\n                                    Code<\/strong> <span id=\"summary-patient-display-zipcode\"\n                                    style=\"font-weight: 500;\"><\/span><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <!--*****-->\n\n                <!-- Parent\/Guardian Details , 14 April 2026 ***** -->\n                <div class=\"guardian-details-header\"\n                    style=\"font-weight: 700; color: #000000; margin-bottom: 25px; font-size: 22px; border-bottom: 2px solid #cccaca; padding-bottom: 12px; display: flex; align-items: center; gap: 12px; max-width: 600px;\">\n                    <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path>\n                        <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\n                        <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path>\n                        <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\n                    <\/svg>\n                    Parent\/Guardian Details\n                <\/div>\n                <!-- ***** -->\n\n                <div class=\"form-grid\">\n                    <div class=\"form-group\">\n                        <label for=\"guarantor_first_name\">First Name<\/label>\n                        <input type=\"text\" id=\"guarantor_first_name\" placeholder=\"First Name\">\n                    <\/div>\n\n                    <div class=\"form-group\">\n                        <label for=\"guarantor_last_name\">Last Name<\/label>\n                        <input type=\"text\" id=\"guarantor_last_name\" placeholder=\"Last Name\">\n                    <\/div>\n\n                    <div class=\"form-group\">\n                        <label for=\"guarantor_email\">Your Email Address<\/label>\n                        <input type=\"email\" id=\"guarantor_email\" placeholder=\"Email Address\">\n                    <\/div>\n\n                    <div class=\"form-group\">\n                        <label for=\"guarantor_phone\">Your Phone<\/label>\n                        <input type=\"tel\" id=\"guarantor_phone\" placeholder=\"Phone Number\">\n                    <\/div>\n\n                    <div class=\"form-group\">\n                        <label for=\"guarantor_dob\">Date of Birth<\/label>\n                        <input type=\"text\" id=\"guarantor_dob\" placeholder=\"Date of Birth (MM\/DD\/YYYY)\">\n                    <\/div>\n\n                    <div class=\"form-group\">\n                        <label for=\"guarantor_zip\">Zip Code<\/label>\n                        <input type=\"text\" id=\"guarantor_zip\" placeholder=\"Zip Code\">\n                    <\/div>\n                <\/div>\n                <div class=\"consent-checkbox check-box-wap\">\n                    <input type=\"checkbox\" id=\"consent\" name=\"consent\">\n                    <label for=\"consent\">\n                        I agree to receive emails and SMS notifications and marketing messages from Sage Dental.\n                    <\/label>\n                <\/div>\n                <div id=\"guarantor-error-message\" class=\"error-message\"><\/div>\n\n                <button id=\"submit-guarantor\" class=\"primary-btn animate-btn-main\">\n                    CONTINUE <i class=\"fa fa-arrow-right\"><\/i>\n                <\/button>\n            <\/div>\n            <div class=\"img-wrap-appointment\">\n                <img decoding=\"async\" src=\"https:\/\/simpleseogroup.co\/sage\/wp-content\/uploads\/2026\/03\/Dedicated-to-Supporting-You-in-Practice-and-in-Life.-1-1-1.jpg\" class=\"img-fluid\" alt=\"Live\" data-category=\"necessary\">\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- STEP 2: Date & Time Selection -->\n    <div class=\"step\" id=\"step-2\" style=\"display:none;\">\n        <div class=\"scheduling-layout\">\n            <!-- Left: Calendar Section (Visible by default on desktop) -->\n            <!--<div class=\"calendar-section\">-->\n            <!--    <div id=\"fc-calendar\" class=\"wrap-map-append\"><\/div>-->\n\n            <!--    <div class=\"checkbox-group\">-->\n            <!--        <label class=\"checkbox-label\">-->\n            <!--            <input type=\"checkbox\" id=\"available\" disabled>-->\n            <!--            Available-->\n            <!--        <\/label>-->\n\n            <!--        <label class=\"checkbox-label\">-->\n            <!--            <input type=\"checkbox\" id=\"not-available\" disabled>-->\n            <!--            Not-Available-->\n            <!--        <\/label>-->\n            <!--    <\/div>-->\n            <!--<\/div>-->\n            <div class=\"calendar-section\">\n\n                <div id=\"fc-calendar\" class=\"wrap-map-append\"><\/div>\n\n                <div class=\"checkbox-group\">\n\n                    <label class=\"checkbox-label\">\n\n                        <input type=\"checkbox\" id=\"available\" disabled>\n\n                        Available\n\n                    <\/label>\n\n\n\n                    <label class=\"checkbox-label\">\n                        <input type=\"checkbox\" id=\"not-available\" disabled> Not-Available<\/label>\n\n                    <a href=\"#\" id=\"back-button\" class=\"secondary-btn\">Back to Step 1<\/a>\n\n                <\/div>\n\n            <\/div>\n\n            <!-- Right: Selection Panel -->\n            <div class=\"selection-panel\">\n                <div class=\"wrap-first-data\">\n                    <!-- Location Selection -->\n                    <div class=\"panel-section\">\n                        <!--<div class=\"section-header\">-->\n                        <!--    <h3>Choose Location<\/h3>-->\n                        <!--    <div class=\"toggle-section\">-->\n                        <!--        <span>Show nearby appointments within the next 3 days<\/span>-->\n                        <!--        <label class=\"switch\">-->\n                        <!--            <input type=\"checkbox\" id=\"nearby-toggle\" checked>-->\n                        <!--            <span class=\"slider\"><\/span>-->\n                        <!--        <\/label>-->\n                        <!--    <\/div>-->\n                        <!--<\/div>-->\n                        <label for=\"clinic-select\">Select a Sage Dental Location<\/label>\n                        <select id=\"clinic-select\" class=\"dropdown-select dropdown-appointment\">\n                            <option value=\"\">Select a clinic...<\/option>\n                        <\/select>\n                        <div id=\"no-appointments-message\" class=\"error-message\" role=\"alert\" style=\"min-width: auto !important; display:none;\">\n                        <\/div>\n\n                        <div id=\"clinic-error\" class=\"field-error error-message\"\n                            style=\"display:none; color:red; margin-top:5px;\"\n                            aria-label=\"Please select a clinic location\" role=\"alert\">\n                            Please select a clinic location\n                        <\/div>\n\n                        <div id=\"clinic-info\" class=\"clinic-details\" style=\"display:none;\">\n                            <h4 id=\"clinic-name\"><\/h4>\n                            <p id=\"clinic-address\"><\/p>\n                            <p id=\"clinic-phone\"><\/p>\n                            <p id=\"clinic-distance\"><\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Date Selection with Calendar Icon -->\n                    <div class=\"panel-section date-selection-wrapper\">\n                        <!--<label for=\"selected-date\">Appointment Date<\/label>-->\n                        <label id=\"date-label\" for=\"selected-date\">Appointment Date<\/label>\n                        <!--<div class=\"date-input-wrapper\" tabindex=\"0\" id=\"date-input-wrapper\" role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-label=\"Date selection dropdown\">-->\n                        <!-- <input type=\"text\" id=\"selected-date\" placeholder=\"MM\/DD\/YY\" readonly> -->\n                        <!--    <select id=\"selected-date\" class=\"dropdown-select\">-->\n                        <!--        <option value=\"\">MM\/DD\/YY<\/option>-->\n                        <!--    <\/select>-->\n                        <div class=\"date-input-wrapper\" tabindex=\"0\" id=\"date-input-wrapper\" role=\"combobox\"\n                            aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-labelledby=\"date-label\">\n                            <select id=\"selected-date\" class=\"dropdown-select\" aria-hidden=\"true\" tabindex=\"-1\">\n                                <option value=\"\">MM\/DD\/YY<\/option>\n                            <\/select>\n                            <!--<div class=\"calendar-icon\" id=\"open-calendar\">-->\n                            <div class=\"calendar-icon\" id=\"open-calendar\" role=\"button\" aria-label=\"Open calendar\"\n                                tabindex=\"0\">\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6.66667 1.66666V4.16666\" stroke=\"#6DBB69\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" \/>\n                                    <path d=\"M13.3333 1.66666V4.16666\" stroke=\"#6DBB69\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" \/>\n                                    <rect x=\"3.33334\" y=\"3.33334\" width=\"13.3333\" height=\"13.3333\" rx=\"2\"\n                                        stroke=\"#6DBB69\" stroke-width=\"1.5\" \/>\n                                    <path d=\"M3.33334 8.33334H16.6667\" stroke=\"#6DBB69\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" \/>\n                                    <path d=\"M8.33334 11.6667H5\" stroke=\"#6DBB69\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" \/>\n                                    <path d=\"M15 11.6667H11.6667\" stroke=\"#6DBB69\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" \/>\n                                    <path d=\"M8.33334 15H5\" stroke=\"#6DBB69\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" \/>\n                                    <path d=\"M15 15H11.6667\" stroke=\"#6DBB69\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" \/>\n                                <\/svg>\n                            <\/div>\n                        <\/div>\n                        <!--<div id=\"date-error\" class=\"field-error error-message\" style=\"display:none; color:red; margin-top:5px;width:100%;min-width:700px\" aria-label=\"Please select a date\">-->\n                        <div id=\"date-error\" class=\"field-error error-message\"\n                            style=\"display:none; color:red; margin-top:5px;;width:100%;min-width:700px\" role=\"alert\">\n                            Please select a date\n                        <\/div>\n                    <\/div>\n\n                    <!-- Time Slots -->\n                    <!--<div class=\"panel-section\">-->\n                    <!--    <label for =\"time-slots\">Appointment Time<\/label>-->\n                    <!--    <div id=\"time-slots\" class=\"time-grid\">-->\n                    <!-- Time slots will appear here -->\n                    <!--    <\/div>-->\n                    <!--    <div id=\"no-slots\" style=\"display:none;\" role=\"alert\">No slots available<\/div>-->\n                    <!--    <div id=\"time-error\" role=\"alert\" class=\"field-error error-message\" style=\"display:none; color:red; margin-top:5px;width:100%;min-width:710px\" aria-label=\"Please select a time slot\">-->\n                    <!--        Please select a time slot-->\n                    <!--    <\/div>-->\n                    <!--<\/div>-->\n\n                    <div class=\"panel-section\">\n                        <label id=\"time-label\" class=\"label-text\">Appointment Time<\/label>\n                        <div id=\"time-slots\" class=\"time-grid\" role=\"radiogroup\" aria-labelledby=\"time-label\">\n                            <!-- Time slots will be rendered as radio buttons or buttons -->\n                        <\/div>\n                        <div id=\"no-slots\" style=\"display:none;\" role=\"alert\">No slots available<\/div>\n                        <div id=\"time-error\" role=\"alert\" class=\"field-error error-message\"\n                            style=\"display:none; color:red; margin-top:5px;width:100%;min-width:710px\">\n                            Please select a time slot\n                        <\/div>\n                    <\/div>\n\n                    <!-- Service Selection -->\n                    <div class=\"panel-section\">\n                        <label for=\"service-select\">Type of Service<\/label>\n                        <select id=\"service-select\" class=\"dropdown-select\">\n                            <option value=\"\">Select service...<\/option>\n                        <\/select>\n                        <div id=\"service-error\" role=\"alert\" class=\"field-error error-message\"\n                            style=\"display:none; color:red; margin-top:5px;width:100%;min-width:710px\"\n                            aria-label=\"Please select a service type\">\n                            Please select a service type\n                        <\/div>\n                    <\/div>\n\n                    <!-- Provider Selection -->\n                    <div class=\"panel-section\">\n                        <label for=\"provider-select\">Provider Selection<\/label>\n                        <select id=\"provider-select\" class=\"dropdown-select\">\n                            <option value=\"\">No Preference<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <!-- Error Message -->\n                    <div id=\"step2-error\" class=\"error-message\" role=\"alert\"><\/div>\n\n\n                    <!-- Action Buttons -->\n                    <div class=\"wrap-btn-action\">\n                        <div class=\"action-buttons\">\n                            <!--<button id=\"back-button\" class=\"secondary-btn\">-->\n                            <!--    <svg style=\"transform: rotate(180deg);\" width=\"23\" height=\"15\" viewBox=\"0 0 23 15\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">-->\n                            <!--        <path d=\"M22.496 8.07106C22.8865 7.68054 22.8865 7.04737 22.496 6.65685L16.132 0.292885C15.7415 -0.0976396 15.1083 -0.0976396 14.7178 0.292885C14.3273 0.683409 14.3273 1.31657 14.7178 1.7071L20.3747 7.36395L14.7178 13.0208C14.3273 13.4113 14.3273 14.0445 14.7178 14.435C15.1083 14.8255 15.7415 14.8255 16.132 14.435L22.496 8.07106ZM0 7.36395V8.36395H21.7889V7.36395V6.36395H0V7.36395Z\" fill=\"white\"\/>-->\n                            <!--    <\/svg> Back to Step 1-->\n                            <!--<\/button>-->\n                            <button id=\"book-now\" class=\"primary-btn\">\n                                BOOK NOW <svg width=\"23\" height=\"15\" viewBox=\"0 0 23 15\" fill=\"none\"\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path\n                                        d=\"M22.496 8.07106C22.8865 7.68054 22.8865 7.04737 22.496 6.65685L16.132 0.292885C15.7415 -0.0976396 15.1083 -0.0976396 14.7178 0.292885C14.3273 0.683409 14.3273 1.31657 14.7178 1.7071L20.3747 7.36395L14.7178 13.0208C14.3273 13.4113 14.3273 14.0445 14.7178 14.435C15.1083 14.8255 15.7415 14.8255 16.132 14.435L22.496 8.07106ZM0 7.36395V8.36395H21.7889V7.36395V6.36395H0V7.36395Z\"\n                                        fill=\"white\" \/>\n                                <\/svg>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Confirmation -->\n    <div class=\"step\" id=\"confirmation-step\" style=\"display:none;\">\n        <div class=\"confirmation-container\">\n            <div class=\"confirmation-content\" tabindex=\"0\">\n                <h1>Appointment Confirmed!<\/h1>\n                <h2 id=\"confirmed-datetime\"><\/h2>\n                <p>If you need to change this, call us at <span id=\"confirmed-phone\"><\/span>.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Hidden Inputs -->\n    <input type=\"hidden\" id=\"patient_key\">\n    <input type=\"hidden\" id=\"patient_type\">\n    <input type=\"hidden\" id=\"is_hygiene\">\n    <input type=\"hidden\" id=\"preselected_office_key\" value=\"\">\n    <input type=\"hidden\" id=\"selected_service\">\n    <input type=\"hidden\" id=\"selected_slot_key\">\n    <input type=\"hidden\" id=\"selected_type_key\">\n\n    <!-- Loading -->\n    <div id=\"loading\" style=\"display:none;\">\n        <div class=\"loading-spinner\"><span class=\"spin-loading\">Loading...<\/span><img decoding=\"async\"\n                src=\"https:\/\/mysagedental.com\/wp-includes\/images\/spinner.gif\" aria-hidden=\"true\"\n                alt=\"https:\/\/mysagedental.com\/wp-includes\/alt\" data-category=\"necessary\"> <\/div>\n    <\/div>\n\n    <!-- Emergency Popup -->\n    <div id=\"emergency-modal\" class=\"modal\" style=\"display:none;\">\n        <div class=\"modal-content\">\n            <h2 tabindex=\"0\">Please Call Us to Schedule<\/h2>\n            <p tabindex=\"0\">For emergency care, please call (855) 546-1884<\/p>\n            <button id=\"close-modal\" tabindex=\"0\">OK<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"calendar-overlay\"><\/div>\n\n\n\n<style>\n    .step-header-second {\n        display: none;\n    }\n\n    .fc .fc-scrollgrid-section-body table tbody {\n        background: #fff;\n    }\n\n    .step-item.active .svg-after-active {\n        display: none;\n    }\n\n    .step-item.external-step-class .svg-after-active {\n        display: block;\n    }\n\n    .step-item.external-step-class .step-number {\n        display: none;\n    }\n\n\n\n    .main-wrapper .form-wrapper.iner-pages .title-heading h3 {\n        text-align: center;\n        font-size: 45px !important;\n        line-height: 68px !important;\n        color: #000 !important;\n        font-weight: 300 !important;\n        text-transform: capitalize;\n    }\n\n    .main-wrapper .form-wrapper.iner-pages .title-heading h3 strong {\n        font-weight: 600 !important;\n    }\n\n    .indicator-s-main {\n        display: flex;\n        justify-content: center;\n        margin-bottom: 64px;\n        position: relative;\n    }\n\n    .indicator-s-main::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 1px;\n        background-color: rgba(109, 187, 105, 1);\n        top: 50%;\n        z-index: -99;\n        transform: translateY(-50%);\n    }\n\n    .step-indicator {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border: 1px solid rgba(109, 187, 105, 1);\n        border-radius: 10px;\n        overflow: hidden;\n        flex-wrap: wrap;\n    }\n\n    .step-item {\n        display: flex;\n        padding: 6px 30px;\n        gap: 12px;\n        min-width: 272px;\n        align-items: center;\n        transition: 0.8s;\n        background: #fff;\n    }\n\n\n    .step-indicator .step-number {\n        width: 30px;\n        height: 30px;\n        background: rgba(109, 187, 105, 0.29);\n        border-radius: 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: rgba(109, 187, 105, 1);\n        font-size: 18px;\n    }\n\n    ul.slick-dots {\n        display: none;\n    }\n\n    .step-indicator .step-label {\n        color: rgba(173, 224, 170, 1);\n    }\n\n\n    .step-indicator .step-item.active {\n        background: rgba(109, 187, 105, 1);\n    }\n\n\n    .step-indicator .step-item.active .step-label {\n        color: rgb(255, 255, 255);\n    }\n\n    .step-indicator .step-item.active .step-number {\n        background: rgb(102 173 98 \/ 70%);\n        color: rgb(255, 255, 255);\n    }\n\n    .calendar-section .fc-daygrid-day-frame.fc-scrollgrid-sync-inner {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .calendar-section td.selected-day {\n        background: rgba(109, 187, 105, 1) !important;\n    }\n\n    .calendar-section td.available-day {\n        background: rgb(109 187 105 \/ 15%);\n    }\n\n    .calendar-section td.selected-day a {\n        color: #fff !important;\n    }\n\n\n\n\n\n    .form-grid {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 28px 20px;\n        margin-bottom: 20px;\n    }\n\n    .form-grid label {\n        font-size: 20px;\n        font-weight: 500;\n        margin-bottom: 4px;\n        color: #000;\n    }\n\n\n    #sage-form input {\n        border: 1px solid #e5e5e5;\n        border-radius: 10px;\n        padding: 16px 20px;\n        transition: all .3s;\n        font-size: 16px;\n        color: #000;\n        background: rgba(248, 248, 248, 1);\n        font-weight: 400;\n        width: 100%;\n        box-shadow: none;\n    }\n\n    .img-wrap-appointment img {\n        border-radius: 25px;\n        width: 100%;\n    }\n\n    .patient-form h4 {\n        font-size: 30px;\n        margin-bottom: 30px;\n        font-weight: 500;\n        color: #000;\n    }\n\n    .consent-checkbox {\n        display: flex;\n        gap: 10px;\n        margin: 28px 0;\n        align-items: center;\n    }\n\n    .consent-checkbox.check-box-wap input {\n        width: 20px !important;\n        height: 20px;\n    }\n\n    .consent-checkbox label {\n        font-size: 20px;\n        color: #000000;\n        font-weight: 400;\n    }\n\n    button#check-availability {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 14px 20px;\n        color: #fff;\n        line-height: 1;\n        font-size: 20px;\n        border-radius: 10px;\n        transition: all ease 0.6s;\n        background: #fff;\n        font-weight: 500;\n        border: none;\n        min-height: auto;\n        width: 100%;\n        margin-top: 0px;\n        gap: 0;\n        border: 2px solid #1C689C;\n        color: #1C689C;\n    }\n\n    button#check-availability svg {\n        width: 0;\n        opacity: 0;\n        visibility: hidden;\n    }\n\n    button#check-availability:hover {\n        background: linear-gradient(90deg, #1c689c 0%, #1c689c 100%);\n        color: #fff;\n        gap: 40px;\n    }\n\n    button#check-availability:hover svg {\n        width: auto;\n        opacity: 1;\n        visibility: visible;\n    }\n\n    .slick-track {\n        gap: 16px;\n        display: flex;\n    }\n\n\n    .calendar-section .checkbox-group {\n        margin-top: 40px;\n        display: flex;\n        align-items: center;\n        gap: 26px;\n    }\n\n    .calendar-section .checkbox-group label {\n        display: flex;\n        gap: 6px;\n    }\n\n    .calendar-section .checkbox-group label input {\n        width: 17px !important;\n    }\n\n\n    .wrap-btn-action button {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        padding: 14px 40px !important;\n        color: #fff !important;\n        background: #002E12 !important;\n        line-height: 1;\n        font-size: 20px !important;\n        border-radius: 10px !important;\n        transition: all ease 0.3s;\n        background: white !important;\n        font-weight: 500 !important;\n        border: none !important;\n        min-height: auto !important;\n        width: fit-content !important;\n        margin-top: 0px !important;\n        gap: 45px !important;\n        min-width: 278px !important;\n        text-transform: uppercase;\n        border: 2px solid #1C689C !important;\n        color: #1C689C !important;\n    }\n\n    .wrap-btn-action button {\n        background: linear-gradient(90deg, #1c689c 0%, #1c689c 100%) !important;\n        color: #fff !important;\n    }\n\n    .wrap-btn-action button:hover {\n        background: #fff !important;\n        color: #1C689C !important;\n    }\n\n    .wrap-btn-action button:hover svg path {\n        fill: #1C689C;\n    }\n\n    .calendar-section button {\n        min-width: auto !important;\n        width: 50px;\n        height: 50px;\n        justify-content: center !important;\n        border-radius: 8px !important;\n        min-height: auto !important;\n        background: linear-gradient(80.44deg, #6caa4336 2.48%, #257ce161 123.23%) !important;\n        border: none !important;\n        margin-top: 0px !important;\n        box-shadow: none !important;\n        transition: 0.6s;\n    }\n\n    .calendar-section button:hover {\n        background: linear-gradient(80.44deg, #6CAA43 2.48%, #257CE1 123.23%) !important;\n\n    }\n\n    .calendar-section button .fc-icon {\n        color: #000;\n    }\n\n    .calendar-section button[title=\"This month\"] {\n        display: none !important;\n    }\n\n    .calendar-section .fc-daygrid-day-top {\n        justify-content: center;\n    }\n\n    .calendar-section h2.fc-toolbar-title {\n        font-size: 25px;\n    }\n\n    .calendar-section th a {\n        text-transform: uppercase;\n        color: #000;\n    }\n\n\n    .calendar-section .fc-daygrid-day-top a {\n        color: #000;\n        opacity: 1;\n    }\n\n\n\n    .secondary-btn {\n\n        background: white;\n\n        color: #1a5fb4;\n\n        border: 2px solid #1a5fb4;\n\n        padding: 12px 25px;\n\n        border-radius: 4px;\n\n        font-size: 16px;\n\n        cursor: pointer;\n\n        display: flex;\n\n        align-items: center;\n\n        gap: 8px;\n\n    }\n\n    .error-message {\n\n        color: red;\n\n        margin: 10px 0;\n\n        padding: 10px;\n\n        background: #ffe6e6;\n\n        border-radius: 4px;\n\n        display: none;\n\n        grid-column: span 2;\n\n    }\n\n    .field-error {\n        grid-column: span 2;\n        min-width: 0 !important;\n        width: 100% !important;\n    }\n\n    \/* Step 2 Layout *\/\n    .scheduling-layout {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n    }\n\n    .panel-section div#clinic-info {\n\n        display: none !important;\n\n    }\n\n    .panel-section:not(:first-child) {\n        display: grid;\n        grid-template-columns: 190px 1fr;\n        align-items: center;\n    }\n\n    .calendar-section .wrap-map-append {\n\n        background: white;\n\n        padding: 20px;\n\n        border-radius: 8px;\n\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n\n    }\n\n\n\n    .selection-panel .wrap-first-data {\n        background: white;\n        padding: 20px;\n        border-radius: 0 15px 15px 0px;\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n        min-height: 650px;\n    }\n\n\n\n    .panel-section {\n        margin-bottom: 26px;\n        border-bottom: 1px solid rgba(219, 219, 219, 1);\n        padding-bottom: 26px;\n    }\n\n\n    .panel-section label {\n        color: #000000;\n        font-style: italic;\n    }\n\n    .panel-section button {\n        padding: 0px !important;\n        background: none !important;\n        min-height: auto !important;\n        border: none !important;\n        margin-top: 0px !important;\n        min-width: auto !important;\n    }\n\n\n\n    .dropdown-select {\n\n        padding: 12px 75px 12px 22px;\n        border: 1px solid #E8E8E8;\n        border-radius: 10px;\n        font-size: 19px;\n        background-color: #F5F5F5;\n        background-image: url(https:\/\/mysagedental.com\/sage\/wp-content\/uploads\/2026\/01\/Polygon-6.png);\n        background-repeat: no-repeat;\n        background-position: right 45px center;\n        background-size: 15px auto;\n        appearance: none;\n        -webkit-appearance: none;\n        color: #000;\n        height: 52px;\n        transition: all 0.3s;\n\n    }\n\n    .dropdown-select.error {\n        border-color: red !important;\n    }\n\n\n\n    #selected-date {\n\n        width: 100%;\n\n        padding: 12px;\n\n        border: 1px solid #ddd;\n\n        border-radius: 4px;\n\n        font-size: 16px;\n\n        background: white;\n\n        cursor: pointer;\n\n    }\n\n\n\n    .time-grid {\n        display: grid;\n        grid-template-columns: 10px 1fr 10px;\n        gap: 14px;\n        margin-top: 10px;\n    }\n\n    .time-slot {\n        padding: 10px;\n        border: 1px solid rgba(219, 219, 219, 1);\n        border-radius: 10px;\n        text-align: center;\n        cursor: pointer;\n    }\n\n    .time-slot.selected {\n        background: linear-gradient(90deg, #0D9DCD 0%, #1C689C 100%) !important;\n        color: white;\n        border-color: #1a5fb400;\n    }\n\n\n    .action-buttons {\n        display: flex;\n        gap: 15px;\n        margin-top: 30px;\n        flex-wrap: wrap;\n        justify-content: flex-end;\n    }\n\n\n\n    \/* Toggle Switch *\/\n\n    .switch {\n\n        position: relative;\n\n        display: inline-block;\n\n        width: 50px;\n\n        height: 24px;\n\n    }\n\n\n\n    .switch input {\n\n        opacity: 0;\n\n        width: 0;\n\n        height: 0;\n\n    }\n\n\n\n    .slider {\n\n        position: absolute;\n\n        cursor: pointer;\n\n        top: 0;\n\n        left: 0;\n\n        right: 0;\n\n        bottom: 0;\n\n        background-color: #ccc;\n\n        transition: .4s;\n\n        border-radius: 24px;\n\n    }\n\n\n\n    .slider:before {\n\n        position: absolute;\n\n        content: \"\";\n\n        height: 16px;\n\n        width: 16px;\n\n        left: 4px;\n\n        bottom: 4px;\n\n        background-color: white;\n\n        transition: .4s;\n\n        border-radius: 50%;\n\n    }\n\n\n\n    input:checked+.slider {\n\n        background-color: #6DBB69;\n\n    }\n\n\n\n    input:checked+.slider:before {\n\n        transform: translateX(26px);\n\n    }\n\n\n\n    .toggle-section {\n\n        display: flex;\n\n        align-items: center;\n\n        gap: 10px;\n\n        font-size: 14px;\n\n        color: #666;\n\n    }\n\n\n\n    \/* Loading *\/\n\n    #loading {\n\n        position: fixed;\n\n        top: 0;\n\n        left: 0;\n\n        right: 0;\n\n        bottom: 0;\n\n        background: rgba(255, 255, 255, 0.8);\n\n        display: flex;\n\n        align-items: center;\n\n        justify-content: center;\n\n        z-index: 9999;\n\n    }\n\n\n\n    \/* Modal *\/\n\n    .modal {\n\n        position: fixed;\n\n        top: 0;\n\n        left: 0;\n\n        right: 0;\n\n        bottom: 0;\n\n        background: rgba(0, 0, 0, 0.5);\n\n        display: flex;\n\n        align-items: center;\n\n        justify-content: center;\n\n        z-index: 10000;\n\n    }\n\n\n\n    .modal-content {\n\n        background: white;\n\n        padding: 30px;\n\n        border-radius: 8px;\n\n        text-align: center;\n\n        max-width: 400px;\n\n    }\n\n\n\n    \/* Confirmation *\/\n\n    .confirmation-container {\n\n        text-align: center;\n\n        padding: 40px;\n\n    }\n\n\n\n    .confirmation-content h1 {\n\n        color: #1a5fb4;\n\n        margin-bottom: 20px;\n\n    }\n\n    div#step-1 {\n        display: grid;\n        gap: 46px;\n        grid-template-columns: 1fr 39%;\n    }\n\n\n\n    div#step-1 .patient-form h3 {\n\n        font-size: 50px;\n\n        line-height: 60px;\n\n        color: var(--green-color);\n\n        font-weight: 500;\n\n    }\n\n    .panel-section .section-header {\n        display: flex;\n        gap: 40px;\n        flex-wrap: wrap;\n        align-items: center;\n        margin-bottom: 10px;\n    }\n\n    .panel-section .section-header h3 {\n        font-weight: 500;\n        font-size: 22px;\n        line-height: 100%;\n        letter-spacing: 0px;\n        font-style: italic;\n        margin-bottom: 0px;\n    }\n\n    .toggle-section label.switch {\n        order: 1;\n    }\n\n    .toggle-section span {\n\n        order: 2;\n\n    }\n\n    #sage-form select {\n\n        background-image: url(https:\/\/mysagedental.com\/sage\/wp-content\/uploads\/2026\/01\/Polygon-6.png);\n\n    }\n\n    #sage-form select {\n\n        border: 1px solid #E8E8E8;\n\n        border-radius: 10px;\n\n        padding: 12px 22px;\n\n        -webkit-transition: all .3s;\n\n        transition: all .3s;\n\n        background-color: #F5F5F5;\n\n        font-size: 19px;\n\n        color: #000;\n\n        width: 100%;\n\n        max-width: 100%;\n\n        -webkit-appearance: none;\n\n        appearance: none;\n\n    }\n\n    @media (max-width: 1600px) {\n        #sage-form select {\n            font-size: 15px !important;\n            padding: 12px 35px 12px 10px !important;\n        }\n    }\n\n    @media (max-width: 1265px) {\n        .panel-section .section-header {\n            gap: 14px;\n        }\n\n    }\n\n    @media (max-width: 992px) {\n        .scheduling-layout {\n            grid-template-columns: 1fr;\n        }\n\n    }\n\n    @media (max-width: 820px) {\n        div#step-1 {\n            display: grid;\n            gap: 30px;\n            grid-template-columns: 1fr;\n        }\n\n        .indicator-s-main {\n            margin-bottom: 34px;\n        }\n    }\n\n\n    @media (max-width: 576px) {\n        .step-item {\n            min-width: 100%;\n        }\n\n    }\n\n    @media (max-width: 480px) {\n        .form-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 20px 20px;\n            margin-bottom: 20px;\n        }\n    }\n\n\n    div#step-2 .checkbox-group input#available {\n        appearance: none;\n        -webkit-appearance: none;\n        background-color: #E9F5E9;\n        border: 1px solid #6DBB69;\n        width: 10px !important;\n        height: 10px;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 4px;\n    }\n\n\n    .calendar-section .checkbox-group label input#not-available {\n        height: 20px;\n        width: 20px;\n    }\n\n\n\n    \/* checked state *\/\n    div#step-2 .checkbox-group input#available:checked {\n        background-color: #6DBB69;\n        border-color: #D2D2D2;\n    }\n\n    \/* checkmark *\/\n    div#step-2 .checkbox-group input#available:checked::after {\n        content: \"\u2713\";\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #fff;\n        font-size: 14px;\n    }\n\n\n    \/* Calendar Icon Styles *\/\n    .date-selection-wrapper {\n        position: relative;\n    }\n\n    .date-input-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n\n    .date-input-wrapper input {\n        padding-right: 50px !important;\n        cursor: pointer;\n        background-color: #F8F8F8 !important;\n    }\n\n    .calendar-icon {\n        position: absolute;\n        right: 12px;\n        cursor: pointer;\n        background: #f8f8f8;\n        padding: 8px;\n        border-radius: 5px;\n        border: 1px solid #e5e5e5;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 10;\n        transition: all 0.3s ease;\n    }\n\n    .calendar-icon:hover {\n        background: #e9f5e9;\n        transform: scale(1.05);\n    }\n\n    .calendar-icon svg {\n        width: 20px;\n        height: 20px;\n    }\n\n    \/* Calendar Toggle for Mobile *\/\n    @media (max-width: 992px) {\n        .calendar-section {\n            display: none !important;\n        }\n\n        .calendar-section.show-calendar {\n            display: block !important;\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background: white;\n            z-index: 1000;\n            padding: 20px;\n            border-radius: 10px;\n            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n            max-width: 90%;\n            max-height: 90vh;\n            overflow: auto;\n        }\n\n        .calendar-section.show-calendar .checkbox-group {\n            display: none;\n        }\n\n        \/* Overlay for mobile calendar *\/\n        .calendar-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0, 0, 0, 0.5);\n            z-index: 999;\n            display: none;\n        }\n\n        .calendar-overlay.active {\n            display: block;\n        }\n    }\n\n    \/************* Ui chages , 14 April 2025 *\/\n\n\n    .step-header .patient-summary-box {\n        max-width: 100% !important;\n    }\n\n    .step-header .patient-summary-box>div {\n        font-size: 18px !important;\n        color: #000 !important;\n    }\n\n    .step-header strong {\n        font-size: 12px !important;\n    }\n\n    .appointment-age-form .img-wrap-appointment img {\n        object-position: 80% 100%;\n    }\n\n    .step-header>h2 {\n        font-size: 24px;\n        color: #000;\n        font-weight: 500;\n    }\n\n    .dropdown-select {\n        height: 46px !important;\n        border: none !important;\n    }\n\n    \/*******************\/\n<\/style>\n\n<script>\n    jQuery(document).ready(function ($) {\n\n        \/\/ Step 1 default\n        $('.step-header-first').show();\n        $('.step-header-second').hide();\n\n        $('#check-availability').on('click', function () {\n            $('.step-header-first').hide();\n            $('.step-header-second').show();\n        });\n\n        $('#back-button').on('click', function () {\n            $('.step-header-second').hide();\n            $('.step-header-first').show();\n        });\n\n    });\n\n    jQuery(function ($) {\n\n        \/\/ Event delegation\n        $(document).on('mouseenter', '.external-step-class', function () {\n            $(this).css('cursor', 'pointer');\n        });\n\n        $(document).on('click', '.external-step-class', function () {\n            $('#back-button').trigger('click');\n        });\n\n    });\n\n\n    \/\/ Change In Date 08-6-2026 ADA Compliance Changes \n\n\n\n    \/\/ Time Slot\n\n    document.addEventListener('click', function (e) {\n        const slot = e.target.closest('.time-slot');\n        if (!slot) return;\n\n        selectTime(slot);\n    });\n\n    document.addEventListener('keydown', function (e) {\n        const slot = e.target.closest('.time-slot');\n        if (!slot) return;\n\n        if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            selectTime(slot);\n        }\n    });\n\n    function selectTime(el) {\n\n        document.querySelectorAll('.time-slot').forEach(s => {\n            s.classList.remove('selected');\n            s.setAttribute('aria-selected', 'false');\n        });\n\n        el.classList.add('selected');\n        el.setAttribute('aria-selected', 'true');\n\n        console.log('Selected time:', el.dataset.time);\n    }\n\n\n\n\n    jQuery(document).ready(function () {\n        \/\/ Close dropdown when clicking outside\n        jQuery(document).on('click', function (e) {\n            if (!jQuery(e.target).closest('#date-input-wrapper').length) {\n                jQuery('#figma-date-dropdown-list').hide();\n            }\n        });\n\n        \/\/ Open dropdown on Enter or Space\n        jQuery('#date-input-wrapper').on('keydown', function (e) {\n            if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                jQuery('#figma-date-dropdown-list').show();\n                return false;\n            }\n        });\n\n\n\n        \/\/ Handle keyboard navigation and selection for dropdown items\n        jQuery(document).on('keydown', function (e) {\n            var $dropdown = jQuery('#figma-date-dropdown-list');\n            var $items = jQuery('#figma-date-dropdown-list li');\n\n            \/\/ Only handle if dropdown is visible\n            if (!$dropdown.is(':visible')) {\n                return;\n            }\n\n            \/\/     jQuery('#figma-date-dropdown-list').on('keydown', 'li', function(e) {\n            \/\/     if (e.key === 'Enter') {\n            \/\/         e.preventDefault();\n            \/\/         var val = jQuery(this).attr('data-value');\n            \/\/         jQuery('.custom-date-display').val(val);\n            \/\/         jQuery('#figma-date-dropdown-list').hide();\n            \/\/         \/\/alert('Selected: ' + val);\n            \/\/     }\n            \/\/ });\n\n            \/\/ Get currently focused or highlighted item\n            var $focused = jQuery(document.activeElement);\n            var currentIndex = $items.index($focused);\n\n            \/\/ Also check for highlighted class\n            if (currentIndex === -1) {\n                var $highlighted = $items.filter('.highlighted');\n                currentIndex = $items.index($highlighted);\n                if (currentIndex !== -1) {\n                    $focused = $highlighted;\n                }\n            }\n\n            \/\/ Arrow Down\n            if (e.key === 'ArrowDown') {\n                e.preventDefault();\n                var newIndex = (currentIndex + 1) % $items.length;\n                $items.removeClass('highlighted');\n                $items.eq(newIndex).addClass('highlighted').focus();\n                return false;\n            }\n\n            \/\/ Arrow Up\n            if (e.key === 'ArrowUp') {\n                e.preventDefault();\n                var newIndex = currentIndex - 1;\n                if (newIndex < 0) newIndex = $items.length - 1;\n                $items.removeClass('highlighted');\n                $items.eq(newIndex).addClass('highlighted').focus();\n                return false;\n            }\n\n            \/\/ Enter or Space to select\n            if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                e.stopPropagation();\n\n                \/\/ Find which item is selected\/highlighted\n                var $selectedItem = $items.filter('.highlighted');\n                if ($selectedItem.length === 0 && currentIndex !== -1) {\n                    $selectedItem = $items.eq(currentIndex);\n                }\n                if ($selectedItem.length === 0) {\n                    $selectedItem = $items.first();\n                }\n\n                \/\/ Get the value and set it\n                var selectedValue = $selectedItem.attr('data-value');\n                var selectedText = $selectedItem.text();\n\n                \/\/ Set the input value (adjust selector as needed)\n                jQuery('#date-input-wrapper').val(selectedText);\n                \/\/ Or if you have an input inside wrapper:\n                \/\/ jQuery('#date-input-wrapper input').val(selectedText);\n\n                \/\/ Trigger change event\n                jQuery('#date-input-wrapper').trigger('change');\n\n                \/\/ Hide dropdown\n                $dropdown.hide();\n\n                console.log('Selected:', selectedValue, selectedText); \/\/ Debug\n\n                return false;\n            }\n\n            \/\/ Escape to close\n            if (e.key === 'Escape') {\n                e.preventDefault();\n                $dropdown.hide();\n                jQuery('#date-input-wrapper').focus();\n                return false;\n            }\n        });\n\n        \/\/ Handle click selection on dropdown items\n        jQuery('#figma-date-dropdown-list li').on('click', function () {\n            var selectedValue = jQuery(this).attr('data-value');\n            var selectedText = jQuery(this).text();\n\n            \/\/ Set the input value\n            jQuery('#date-input-wrapper').val(selectedText);\n            \/\/ Or if you have an input inside wrapper:\n            \/\/ jQuery('#date-input-wrapper input').val(selectedText);\n\n            \/\/ Trigger change event\n            jQuery('#date-input-wrapper').trigger('change');\n\n            \/\/ Hide dropdown\n            jQuery('#figma-date-dropdown-list').hide();\n\n            console.log('Clicked:', selectedValue, selectedText);\n        });\n\n        \/\/ Set initial highlighted item (first item)\n        jQuery('#figma-date-dropdown-list li').first().addClass('highlighted');\n    });\n\n\n    document.addEventListener('keydown', function (e) {\n\n        if (\n            e.key === 'Enter' &&\n            document.activeElement &&\n            document.activeElement.matches('#figma-date-dropdown-list li')\n        ) {\n\n            e.preventDefault();\n            e.stopPropagation();\n\n            const li = document.activeElement;\n\n            const selectedText = li.textContent;\n            const selectedDate = li.getAttribute('data-value');\n            \/\/ IMPORTANT: must be like \"2026-06-09\"\n\n            \/\/ 1. Set input value\n            document.querySelector('.custom-date-display').value = selectedText;\n\n            \/\/ 2. Hide dropdown\n            document.getElementById('figma-date-dropdown-list').style.display = 'none';\n\n            console.log('Selected:', selectedText, selectedDate);\n\n            \/\/ 3. REMOVE OLD SELECTED CLASS FROM CALENDAR\n            document.querySelectorAll('.fc-day.selected-day')\n                .forEach(el => el.classList.remove('selected-day'));\n\n            \/\/ 4. ADD CLASS TO MATCHING DATE CELL\n            const cell = document.querySelector(\n                `.fc-day[data-date=\"${selectedDate}\"]`\n            );\n\n            if (cell) {\n                cell.classList.add('selected-day');\n\n                \/\/ optional: scroll into view\n                cell.scrollIntoView({ behavior: 'smooth', block: 'center' });\n            }\n\n        }\n\n    }, true);\n\n\n\n\n\n<\/script>\n    \n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>personalize your appointment options &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-find-locations.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-36904","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.7 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Book A Dental Appointment | Sage Dental<\/title>\n<meta name=\"description\" content=\"Ready to schedule? Book your dental appointment online with Sage Dental. Fast, easy scheduling for new and existing patients.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Book An Appointment\" \/>\n<meta property=\"og:description\" content=\"Ready to schedule? Book your dental appointment online with Sage Dental. Fast, easy scheduling for new and existing patients.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/simpleseogroup.co\/sage\/book-an-appointment\/\" \/>\n<meta property=\"og:site_name\" content=\"Sage Dental\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mysagedental\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-27T07:56:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@MySageDental\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/book-an-appointment\\\/\",\"url\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/book-an-appointment\\\/\",\"name\":\"Book A Dental Appointment | Sage Dental\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/#website\"},\"datePublished\":\"2025-10-06T11:10:36+00:00\",\"dateModified\":\"2026-04-27T07:56:17+00:00\",\"description\":\"Ready to schedule? Book your dental appointment online with Sage Dental. Fast, easy scheduling for new and existing patients.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/book-an-appointment\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/book-an-appointment\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/book-an-appointment\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Book An Appointment\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/#website\",\"url\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/\",\"name\":\"Sage Dental\",\"description\":\"We Want You to Love Your Smile\",\"publisher\":{\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/#organization\",\"name\":\"Sage Dental\",\"url\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mysagedental.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/sage-dental-logo-signature.png\",\"contentUrl\":\"https:\\\/\\\/mysagedental.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/sage-dental-logo-signature.png\",\"width\":400,\"height\":400,\"caption\":\"Sage Dental\"},\"image\":{\"@id\":\"https:\\\/\\\/simpleseogroup.co\\\/sage\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/mysagedental\",\"https:\\\/\\\/x.com\\\/MySageDental\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Book A Dental Appointment | Sage Dental","description":"Ready to schedule? Book your dental appointment online with Sage Dental. Fast, easy scheduling for new and existing patients.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Book An Appointment","og_description":"Ready to schedule? Book your dental appointment online with Sage Dental. Fast, easy scheduling for new and existing patients.","og_url":"https:\/\/simpleseogroup.co\/sage\/book-an-appointment\/","og_site_name":"Sage Dental","article_publisher":"https:\/\/www.facebook.com\/mysagedental","article_modified_time":"2026-04-27T07:56:17+00:00","twitter_card":"summary_large_image","twitter_site":"@MySageDental","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/simpleseogroup.co\/sage\/book-an-appointment\/","url":"https:\/\/simpleseogroup.co\/sage\/book-an-appointment\/","name":"Book A Dental Appointment | Sage Dental","isPartOf":{"@id":"https:\/\/simpleseogroup.co\/sage\/#website"},"datePublished":"2025-10-06T11:10:36+00:00","dateModified":"2026-04-27T07:56:17+00:00","description":"Ready to schedule? Book your dental appointment online with Sage Dental. Fast, easy scheduling for new and existing patients.","breadcrumb":{"@id":"https:\/\/simpleseogroup.co\/sage\/book-an-appointment\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/simpleseogroup.co\/sage\/book-an-appointment\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/simpleseogroup.co\/sage\/book-an-appointment\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/simpleseogroup.co\/sage\/"},{"@type":"ListItem","position":2,"name":"Book An Appointment"}]},{"@type":"WebSite","@id":"https:\/\/simpleseogroup.co\/sage\/#website","url":"https:\/\/simpleseogroup.co\/sage\/","name":"Sage Dental","description":"We Want You to Love Your Smile","publisher":{"@id":"https:\/\/simpleseogroup.co\/sage\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/simpleseogroup.co\/sage\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/simpleseogroup.co\/sage\/#organization","name":"Sage Dental","url":"https:\/\/simpleseogroup.co\/sage\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/simpleseogroup.co\/sage\/#\/schema\/logo\/image\/","url":"https:\/\/mysagedental.com\/wp-content\/uploads\/2025\/11\/sage-dental-logo-signature.png","contentUrl":"https:\/\/mysagedental.com\/wp-content\/uploads\/2025\/11\/sage-dental-logo-signature.png","width":400,"height":400,"caption":"Sage Dental"},"image":{"@id":"https:\/\/simpleseogroup.co\/sage\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/mysagedental","https:\/\/x.com\/MySageDental"]}]}},"_links":{"self":[{"href":"https:\/\/simpleseogroup.co\/sage\/wp-json\/wp\/v2\/pages\/36904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simpleseogroup.co\/sage\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simpleseogroup.co\/sage\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simpleseogroup.co\/sage\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simpleseogroup.co\/sage\/wp-json\/wp\/v2\/comments?post=36904"}],"version-history":[{"count":21,"href":"https:\/\/simpleseogroup.co\/sage\/wp-json\/wp\/v2\/pages\/36904\/revisions"}],"predecessor-version":[{"id":45815,"href":"https:\/\/simpleseogroup.co\/sage\/wp-json\/wp\/v2\/pages\/36904\/revisions\/45815"}],"wp:attachment":[{"href":"https:\/\/simpleseogroup.co\/sage\/wp-json\/wp\/v2\/media?parent=36904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}