function onShadowReady(root, selector, callback) {
  const existing = root.querySelector(selector);
  if (existing) return callback(existing);

  const observer = new MutationObserver(() => {
    const el = root.querySelector(selector);
    if (el) {
      observer.disconnect();
      callback(el);
    }
  });

  observer.observe(root, { childList: true, subtree: true });
}

function jarvisGoBack() {
  if (!window.$shedulerShadowRoot) return;

  onShadowReady(
    window.$shedulerShadowRoot,
    "#app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl > div > div > div a",
    (backButton) => {
      console.log("Back button clicked by script:", backButton);
      backButton.click();
    }
  );
}

function isIOS() {
  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
}

function validateUSPhoneNumber(input) {
  if (!input) {
    return {
      valid: false,
      message: "Phone number is required."
    }
  }

  let digits = input.replace(/\D/g, '');

  if (digits.length === 11 && digits.startsWith('1')) {
    digits = digits.slice(1)
  }

  if (digits.length !== 10) {
    return {
      valid: false,
      message: "Please enter a valid 10-digit US phone number."
    }
  }

  const areaCode = digits.slice(0, 3)
  const exchangeCode = digits.slice(3, 6)

  if (!/^[2-9]/.test(areaCode)) {
    return {
      valid: false,
      message: "Invalid area code."
    }
  }

  // Exchange code must start 2–9
  if (!/^[2-9]/.test(exchangeCode)) {
    return { valid: false, message: "Invalid phone number format" };
  }

  // Block N11 exchanges (911, 411 etc)
  if (/^[2-9]11$/.test(exchangeCode)) {
    return { valid: false, message: "Invalid exchange code" };
  }

  // Optional: block obviously fake numbers
  if (/^(\d)\1{9}$/.test(digits)) {
    return { valid: false, message: "Invalid phone number" };
  }

  return {
    valid: true,
    message: "",
    normalized: digits,              // 2125551234
    formatted: `(${areaCode}) ${exchangeCode}-${digits.slice(6)}`
  }
}

function showPhoneError(message) {
  const root = window.$shedulerShadowRoot;
  if (!root) return;

  const phoneInput = root.querySelector("#mobile_phone input");
  if (!phoneInput) return;

  // Style the input
  phoneInput.style.borderColor = "red";
  phoneInput.style.borderWidth = "2px";

  // Remove existing error (avoid duplicates)
  let existingError = phoneInput.parentElement.querySelector(".phone-error-msg");
  if (existingError) {
    existingError.remove();
  }

  // Create error element
  const error = document.createElement("div");
  error.className = "phone-error-msg";
  error.textContent = message;

  // Style it (keep it subtle but clear)
  error.style.color = "#d32f2f";
  error.style.fontSize = "12px";
  error.style.marginTop = "4px";
  error.style.fontFamily = "inherit";

  // Attach below input
  phoneInput.parentElement.appendChild(error);

  // Optional: auto-clear on user input
  phoneInput.addEventListener("input", () => {
    phoneInput.style.borderColor = "";
    error.remove();
  }, { once: true });
}

var load_jarvis = () => {
  function getCommentFromURL() {
    // Get the full URL
    const url = window.location.href;

    // Create a URL object
    const urlObj = new URL(url);

    // Get the search parameters
    const searchParams = new URLSearchParams(urlObj.search);

    // Get the 'comment' parameter if it exists
    const comment = searchParams.get("comment");

    // Return the decoded comment or null if not present
    return comment ? decodeURIComponent(comment) : null;
  }

  function isBookAppointmentButton(el) {
    return el.textContent?.toLowerCase().includes("book");
  }

  var LocationName = window.jarvisConfig.officeId; // Change as needed

  var bookingForm = document.getElementById("booking-form");
  if (
    LocationName === "" ||
    LocationName === null ||
    LocationName === undefined
  ) {
    bookingForm.style.display = "block";
    var loading_icon_temp = document.getElementById("loading-spinner-tmp");
    loading_icon_temp.style.display = "none"; //hide when form shows
  } else {
    bookingForm.style.display = "none";

    try {
      /*
            const urlParams = new URLSearchParams(window.location.search);
            var commentPrefill = "";
            if (urlParams.has("comment")) {
               = urlParams.get("comment");
            }*/
      // var $shedulerShadowRoot; //now window.$shedulerShadowRoot
      var phoneNumber;
      var customerFirstName;
      var customerLastName;
      var customerEmail;

      /* intercept XHR to get submitted phone number */
      const originalXhrSend = XMLHttpRequest.prototype.send;
      const originalXhrOpen = XMLHttpRequest.prototype.open;

      // Intercept the open method to capture the URL
      XMLHttpRequest.prototype.open = function (
        method,
        url,
        async,
        user,
        password
      ) {
        this._url = url; // Store the URL for logging
        return originalXhrOpen.apply(this, arguments);
      };

      // Unified extraction logic for XHR and fetch
      function processCustomerData(inputData) {
        if (!inputData) return;
        customerFirstName = inputData.first_name || customerFirstName || "";
        customerLastName = inputData.last_name || customerLastName || "";
        customerEmail = inputData.email || document.getElementById("Booking-Email")?.value || customerEmail || "";
        phoneNumber = inputData.mobile_phone || phoneNumber || "";

        if (phoneNumber) {
          const urlObj = new URL(window.location.href);
          if (urlObj.searchParams.get("confirmation") !== "1") {
            urlObj.searchParams.delete("comment");
            urlObj.searchParams.delete("variant");
            urlObj.searchParams.set("confirmation", "1");
            window.history.pushState({}, "", urlObj.toString());
          }
        }
      }

      // Intercept the send method
      XMLHttpRequest.prototype.send = function (body) {
        if (this._url && typeof this._url === "string" && this._url.includes("schedule.jarvisanalytics.com/graphql")) {
          try {
            if (body && typeof body === "string") {
              const parsedBody = JSON.parse(body);
              if (parsedBody && parsedBody.query) {
                const inputData = parsedBody.variables?.input;
                processCustomerData(inputData);
              }
            }
          } catch (e) {
            console.log("Error parsing XHR body:", e);
          }
        }
        return originalXhrSend.apply(this, arguments);
      };

      /* Intercept fetch function */ LocationName;
      window.fetch = new Proxy(window.fetch, {
        apply: async function (target, thisArg, argumentsList) {
          const [url, options = {}] = argumentsList;
          if (url == "https://schedule.jarvisanalytics.com/graphql" && options.body) {
            try {
              const parsedBody = JSON.parse(options.body);
              const inputData = parsedBody.variables?.input;
              processCustomerData(inputData);
              // [PERF DEBUG] Log which GraphQL operation is firing
              const opName = parsedBody.operationName || parsedBody.query?.substring(0, 60) || 'unknown';
              console.log(`[PERF] GraphQL fetch START: ${opName}`, Math.round(performance.now()) + 'ms');
            } catch (e) {
              console.log("Error parsing fetch body:", e);
            }
          }

          const fetchStart = performance.now();
          const response = await target.apply(thisArg, argumentsList);
          const fetchDuration = Math.round(performance.now() - fetchStart);

          // [PERF DEBUG] Only log slow requests (>1s) to avoid noise
          if (fetchDuration > 1000) {
            console.warn(`[PERF] SLOW fetch: ${typeof url === 'string' ? url.substring(0, 80) : 'unknown'} took ${fetchDuration}ms`);
          }
          return response;
        },
      });

      const winShadowRoot = window.$shedulerShadowRoot;

      /* end of interception */
      //var canUpdatePhoneNumberListener = isThreeStepForm || false; //onThreestep form, we can update the phonenumber listener at start
      var canObservePolicyRadio = isThreeStepForm || false;
      var canUpdateComment = false;
      var hasGoneStepTwoOnce = false;
      window.jarvis = new window.JarvisAnalyticsScheduler({
        //now window.jarvis and window.JarvisAnalyticsScheduler
        token: "46138|hKPVSp7yX5m83JP4qdrNFI82ui91fp4yvJteVf3e",
        companyId: 3,
        locationId: window.jarvisConfig.officeId,
      });
      const dataLayerPush = (event) => {
        window.scrollTo(0, 0);
        (window.dataLayer || []).push(event);
        try {
          parent.postMessage(event, "*");
          setTimeout(() => {
            console.log("Attempting to prefill comment");
            const comment = getCommentFromURL();
            if (
              comment &&
              winShadowRoot
            ) {
              console.log("Comment:", comment);
              const textarea = winShadowRoot.querySelector("textarea");
              if (textarea) {
                textarea.value = `Offer: ${comment}`;
              }
            }

            // Attach
            var emailInput = document
              .querySelector("jarvis-scheduler-v2")
              .shadowRoot.querySelector("#email");

            if (emailInput) {
              console.log("Email input found");

              emailInput.addEventListener("blur", function () {
                document.getElementById("Booking-Email").value =
                  emailInput.value;

                var event = new Event("change");
                document.getElementById("Booking-Email").dispatchEvent(event);
              });
            }
          }, 1000);
        } catch (e) {
          window.console && window.console.log(e);
        }
      };
      window.jarvis.title = "";
      window.jarvis.colors.activeNavItemBackground = "#6AC64B";
      window.jarvis.colors.primaryOptionColor = "#6AC64B";
      window.jarvis.colors.primaryButtonBackground = "#6AC64B";
      window.jarvis.colors.primaryButtonBorderColor = "#6AC64B";
      window.jarvis.colors.bodyBackground = "#FBFEFF";
      window.jarvis.colors.headerBackground = "#FBFEFF";
      window.jarvis.colors.nearestCardSubtitleColor = "#B7BCC2";
      window.jarvis.colors.inactiveNavItemBackground = "#B7BCC2";
      window.jarvis.colors.samedayCardSubtitlesColor = "#B7BCC2";
      window.jarvis.colors.availabilityBackground = "#FBFEFF";
      window.jarvis.colors.availabilityPaginationBackground = "#EEF2F6";
      window.jarvis.colors.availabilityPaginationColor = "#767F87";
      window.jarvis.colors.availabilityColumnHeaderBackground = "#EEF2F6";
      window.jarvis.colors.availabilityColumnHeaderColor = "#767F87";
      window.jarvis.colors.nearestCardColumnHeaderBackground = "#EEF2F6";
      window.jarvis.colors.nearestCardColumnHeaderColor = "#767F87";
      //window.jarvis.onSubmittedhandlers.push(function () {
      //console.log("submitted");
      //});
      window.jarvis.onBookSuccesshandlers.push(function () {
        console.log('[PERF] onBookSuccess handler FIRED at', Math.round(performance.now()) + 'ms');

        // DA Team Tracking: Push a virtual pageview so analytics platforms fire
        // as if the patient landed on a real /thank-you page, without a full reload.
        document.title = "Thank You - Appointment Confirmed";
        window.history.pushState({}, "", "/thank-you");
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: 'virtual_pageview',
          page_location: window.location.origin + '/thank-you',
          page_path: '/thank-you',
          page_title: 'Thank You - Appointment Confirmed'
        });

        // Seed payload with values captured during form intercept (XHR/fetch proxy)
        const webhookData = {
          apikey: "HAuu1jpaWurNhCEHdRG1ZW4ZaDpB4Kr5Qs",
          location_id: window.jarvisConfig.jarvisId || "",
          type: "form",
          first_name: customerFirstName || "",
          last_name: customerLastName || "",
          email: customerEmail || "",
          phone: phoneNumber || "",
          date: new Date().toISOString().slice(0, 19).replace('T', ' '), // Y-m-d H:i:s
        };

        // Override with DOM values where available — shadow DOM inputs are the most reliable
        // source since the XHR-intercepted values may be captured mid-typing.
        try {
          const firstNameInput = window.$shedulerShadowRoot?.querySelector("input#first_name");
          const lastNameInput = window.$shedulerShadowRoot?.querySelector("input#last_name");
          const middleNameInput = window.$shedulerShadowRoot?.querySelector("input#middle_name");
          const appointmentDateEl = window.$shedulerShadowRoot?.querySelector("[date-picker-date]");

          if (firstNameInput?.value) webhookData.first_name = firstNameInput.value;
          if (lastNameInput?.value) webhookData.last_name = lastNameInput.value;
          if (middleNameInput?.value) webhookData.middle_name = middleNameInput.value;
          if (appointmentDateEl) webhookData.appointment_date = appointmentDateEl.getAttribute("date-picker-date");

          const comment = getCommentFromURL();
          if (comment) webhookData.comments = `Offer: ${comment}`;

          const urlParams = new URLSearchParams(window.location.search);
          ['utma', 'utmb', 'utmc', 'utmv', 'utmz', 'utmx'].forEach(param => {
            const value = urlParams.get(param);
            if (value) webhookData[param] = value;
          });

          if (document.referrer) webhookData.referrer = document.referrer;

        } catch (error) {
          console.error("Jarvis: error reading shadow DOM inputs for webhook payload:", error);
        }

        // Warn if required fields are missing — do not block the UI, the appointment
        // is already confirmed in Jarvis regardless of tracking payload completeness.
        if (!webhookData.first_name || !webhookData.last_name || !webhookData.email) {
          console.warn("Jarvis webhook: one or more required fields are empty.", webhookData);
        }


        // Snapshot the phone number before clearing — the 100ms success-modal
        // timeout below needs this value, and the global will already be empty.
        const confirmedPhone = phoneNumber;

        // Clear cached tracking variables after confirmation payload is assembled
        customerFirstName = "";
        customerLastName = "";
        customerEmail = "";
        phoneNumber = "";

        // Fire in a detached 10ms timeout so this fetch never blocks the Jarvis
        // confirmation screen transition on slow mobile connections.
        // keepalive: true guarantees delivery even if the patient closes the tab immediately.
        setTimeout(() => {
          window.fetch("https://webhooks.jarvisanalytics.com/api/v2/leads", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "Accept": "application/json"
            },
            body: JSON.stringify(webhookData),
            keepalive: true
          })
            .then(response => {
              if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
              }
              return response.json();
            })
            .then(data => {
              if (window.dataLayer) {
                window.dataLayer.push({ event: 'jarvis_webhook_success', webhookResponse: data });
              }
            })
            .catch(error => {
              console.error("Jarvis webhook error:", error);
              if (window.dataLayer) {
                window.dataLayer.push({ event: 'jarvis_webhook_error', error: error.message });
              }
            });
        }, 10);
        //console.log("booked")
        // run after 100ms just to be safe and the DOM is in place
        setTimeout(() => {
          const el = window?.$shedulerShadowRoot.querySelector(
            "#app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div"
          );

          if (el) {
            el.style.visibility = "hidden";
            el.style.margin = "64px 16px";
            el.style.maxWidth = "396px";
            el.style.width = "auto";
            window.$shedulerShadowRoot?.appendChild(el);
          }

          const p3 = window.$shedulerShadowRoot.querySelector(
            "#app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div > p:nth-child(3)"
          );
          if (p3)
            p3.textContent =
              "Confirm your appointment within the next 90 minutes to secure your spot.";

          const p4 = window.$shedulerShadowRoot.querySelector(
            "#app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div > p:nth-child(4)"
          );
          if (p4) p4.textContent = "We've sent an email and text to:";

          const h3 = window.$shedulerShadowRoot.querySelector(
            "#app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div>div>div>h3"
          );
          if (h3) h3.textContent = "Last step!";
          /* end update success modal text */

          /* update phone number in success modal */
          const phoneTarget = window.$shedulerShadowRoot.querySelector(
            "#app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div > p.text-lg.md\\:text-2xl"
          );
          if (phoneTarget) {
            phoneTarget.insertAdjacentHTML(
              "afterend",
              `<p class="phone-number text-lg md:text-2xl">${confirmedPhone}</p>`
            );
          }
          /* end update phone number in success modal */

          /* .book-an-appointment-container { padding: 0 } */
          document
            .querySelectorAll(".book-an-appointment-container")
            .forEach((el) => {
              el.style.padding = "0px 0px 0px 0px";
            });

          /* hide multiple selectors */
          document
            .querySelectorAll(
              ".book-an-appointement-container-mobile, .office-info-mobile, .white-bg-left.desktop"
            )
            .forEach((el) => {
              el.style.display = "none";
            });


          /* .book-an-appointement-bg-wrapper { padding: 0 } */
          document
            .querySelectorAll(".book-an-appointement-bg-wrapper")
            .forEach((el) => {
              el.style.padding = "0";
            });

          const targetNode = document.getElementById("insurance");

          if (targetNode) {
            const observer = new MutationObserver((mutations) => {
              mutations.forEach(() => {
                const ul = targetNode.querySelector("ul");
                if (ul) {
                  ul.style.overflow = "auto";
                  ul.style.height = "200px";
                  observer.disconnect(); // stop observing once done
                }
              });
            });

            observer.observe(targetNode, { childList: true, subtree: true });
          }

          /* hide success modal container */
          const container = window.$shedulerShadowRoot.querySelector(
            "#app > div.flex.flex-col.flex-grow.mt-6 > div.container.mx-auto"
          );
          if (container) container.style.display = "none";

          /* .book-an-appointment-main { width: 100% } */
          document
            .querySelectorAll(".book-an-appointment-main")
            .forEach((el) => {
              el.style.width = "100%";
            });

          /* make the success modal visible */
          const modal = window.$shedulerShadowRoot.querySelector(
            "#app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div"
          );
          if (modal) modal.style.visibility = "visible";
        }, 100);
      });
      window.jarvis.onloadhandlers.push(function () {
        //console.log("loaded");
      });
      window.jarvis.onNextStep(dataLayerPush);
      window.jarvis.onNextStephandlers.push(function (e) {
        console.log("Next step data:", e);
        window.$shedulerShadowRoot.addEventListener(
          "click",
          (e) => {
            const el = e.target;

            if (!el) return;

            if (isBookAppointmentButton(el)) {
              const phoneInput = window.$shedulerShadowRoot.querySelector("#mobile_phone input");

              if (!phoneInput) return;

              const validation = validateUSPhoneNumber(phoneInput.value);

              if (!validation.valid) {
                console.warn("Hard blocking before mutation is created");

                e.preventDefault();
                e.stopImmediatePropagation(); // this is well suited than stopPropagation

                showPhoneError(validation.message);

                return false;
              }
            }
          },
          true // capture phase (CRITICAL)
        );
        //canUpdatePhoneNumberListener = true;
        canObservePolicyRadio = true;
        canUpdateComment = true;
        if (!hasGoneStepTwoOnce) {
          hasGoneStepTwoOnce = true;
        }
      });

      document
        .querySelector("#wf-back-button-mobile")
        ?.setAttribute("onclick", "jarvisGoBack()");

      document
        .querySelector("#back-button-sticky-mobile")
        ?.setAttribute("onclick", "jarvisGoBack()");

      document
        .querySelector("#back-button-sticky")
        ?.setAttribute("onclick", "jarvisGoBack()");

      document
        .querySelector("#next-button-sticky")
        ?.addEventListener("click", () => {
          winShadowRoot.querySelector(".continue-btn")?.click();
        });

      window.addEventListener("load", async function () {
        try {
          const jarvis_location = document.querySelector("#jarvis-location");
          //setTimeout( function () {
          let $jarvisComponent = document.querySelector(
            "jarvis-scheduler-v2"
          );
          window.$shedulerShadowRoot = $jarvisComponent.shadowRoot;
          const shadowApp = window.$shedulerShadowRoot.querySelector("#app");
          if (shadowApp) {
            shadowApp.style.position = "relative";
          }
          const closeButton =
            window.$shedulerShadowRoot.querySelector("button");
          if (closeButton) {
            closeButton.style.display = "none";
          }
          jarvis_location.insertAdjacentElement("afterend", $jarvisComponent);
          // the lengthy css was moved to a file but we can still add additional css via the style below;
          // If we really need to override the file content, we can change, repload on webflow and replace the link, webflow natively support only txt and image files for now that's why the style is in txt format
          // Create and insert a <style> element into the shadow DOM
          const response = await fetch(
            //"https://uploads-ssl.webflow.com/66a29d804d1aff27a2f2ea9e/66bbb60b515a3aeee8c6d75e_jarvis-styles.txt"
            // "https://cdn.prod.website-files.com/66a29d804d1aff27a2f2ea9e/69b479b5f8e1f42309156af3_13-03_jarvis-styles.txt" backup
            "https://cdn.prod.website-files.com/66a29d804d1aff27a2f2ea9e/69b85fbacf49bd5d095e311a_16-03_jarvis-styles.txt"
          );
          const cssContent = await response.text();
          const style = document.createElement("style");
          style.textContent = "";
          style.textContent += cssContent;
          style.textContent += `#app.first-visit>div.flex.flex-col.flex-grow.mt-6>form>div.container.pt-6.mx-auto.sm\\:p-6.flex-grow>div>div>div:nth-child(3)>div>div>div>div:nth-child(2)>div>div:nth-child(2){display:none}`;
          style.textContent += `#app.first-visit>div.flex.flex-col.flex-grow.mt-6>form>div.container.pt-6.mx-auto.sm\\:p-6.flex-grow>div>div>div:nth-child(3)>div>div>div>div:nth-child(2)>div>div.relative.flex.items-center.justify-center.pb-2.mb-4.border-b.border-gray-300.cursor-pointer.select-none>svg path{d:path("M20 12H4")}`;
          style.textContent += `
                        @media screen and (max-width : 640px) {
                            div:has(> fieldset > div > label > input#true-insurance){
                                display: flex;
                                flex-direction: column;
                            }
                        }
                        div:has(> div > h3) > div > div:has(> div > div > div[data-location-id]) {
                            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
                        }
                        .button-color {
                            color: unset !important;
                        }
                        div:has(> label > input[type="radio"]){
                            display:flex;
                        }
                        @media (min-width: 1280px) {
                            .xl\:grid-cols-5 {
                                grid-template-columns: repeat(3, minmax(0, 1fr));
                            }
                        }
                        @media (min-width: 1024px) and (max-width: 1280px) {
                            #app>div.flex.flex-col.flex-grow.mt-6>form>div.z-50.flex-grow.py-6.mt-6.bg-color>div>div>button{
                                max-width : none;
                            }
                            .rounded:not(#app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color > div > div > button){
                                max-width : none;
                            }
                        }
                        @media all and ( 1024px > width > 991px){
                            #app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl.md\\:sticky.md\\:bottom-0.md\\:mt-24 > div > div{
                                display:flex;
                            }
                        }
                        @media all and (991px > width > 767px){
                            #app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl.md\\:sticky.md\\:bottom-0.md\\:mt-24 > div > div{
                                display : grid;
                            }
                        }
                        @media all and (min-width : 767px ){
                         #app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl.md\\:sticky.md\\:bottom-0.md\\:mt-24 > div > div{
                            grid-template-columns: repeat(3, minmax(0, 1fr));
                         }
                        }
                        #app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div:has(>svg + p ){
                        flex-direction: column;
                        }
                       #app>div.flex.flex-col.flex-grow.mt-6>form>div.container.pt-6.mx-auto>div>div>div:nth-child(3)>div>div>div>div:nth-child(2)>div>div.relative.flex.items-center.justify-center.pb-2.mb-4.border-b.border-gray-300.cursor-pointer.select-none:has(h3 + svg){
                        margin-top : -15px;
                        }
                        @media all and (min-width : 991px){
                        	#app>div.flex.flex-col.flex-grow.mt-6>form h3,
                          #app>div.flex.flex-col.flex-grow.mt-6>form>div.container>div>div>div:nth-child(1)>div>fieldset:nth-child(2)>legend{
                            font-size : 18px;
                          }}
                          #app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div>div>div>svg{
                            transform: translateX(-22px) !important;
                          }
                          #app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div>div>div>p.phone-number.text-lg.md\\:text-2xl::before {
                            content: "";
                            display: inline-block;
                            width: 28px;
                            height: 30px;
                            background: url(https://uploads-ssl.webflow.com/663a58dfb423eff3639562f6/6696de4b113ee3fa34570e3b_phone-icon.svg) no-repeat left 40%;
                            background-size: 20px;
                            transform: translateY(10px);
                          }

                          #app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div > p:nth-child(5)::before {
                            content: "";
                            display: inline-block;
                            width: 28px;
                            height: 30px;
                            background: url(https://uploads-ssl.webflow.com/663a58dfb423eff3639562f6/669032579a5afe63cc467ddf_envelope-icon.svg) no-repeat left 40%;
                            background-size: 20px;
                            transform: translateY(10px);
                          }

                          @media all and (1023px < width < 1281px){
                            .continue-btn{
                              max-width : none;
                            }
                          }
                          .separator-line-3steps-1,
                          .separator-line-3steps-2{
                            width: 75px;
                            background-color: #EEF2F6;
                            height: 2px;
                            margin-top: 15px;
                            position: absolute;
                          }
                          .separator-line-3steps-1{
                            left: 14%;
                          }
                          .separator-line-3steps-2{
                            left: 60%;
                          }
                          @media screen and (max-width: 767px) {
                            #app>div.flex.flex-col.flex-grow.mt-6>div>div>div.flex.justify-center:has(.separator-line-3steps-1) a span.text-xs.text-color{
                              text-align : left;
                              margin-left : 0px;
                            }
                          }
                          #app>div.flex.flex-col.flex-grow.mt-6>div>div:has(.separator-line-3steps-1) >div.hidden{
                            right : 135px;
                          }
                          #app>div.flex.flex-col.flex-grow.mt-6>div>div:has(.separator-line-3steps-1) button.continue-btn{
                            min-width : 128px;
                          }
                          @media screen and (max-width: 991px) {
                            #app>div.flex.flex-col.flex-grow.mt-6>div>div:has(.separator-line-3steps-1) button.continue-btn{
                              min-width : 196px;
                            }
                          }
                          
                          @media screen and (1290px > width > 767px){
                            #app>div.flex.flex-col.flex-grow.mt-6>div>div:has(.separator-line-3steps-1) >div.hidden {
                                right: 0px !important;
                                bottom: -60px;
                            }
                          }
                          @media screen and (max-width: 420px) {
                            #app>div.flex.flex-col.flex-grow.mt-6>div>div>div.flex.justify-center:has(.separator-line-3steps-1){
                              gap : 50px;
                            }    
                            .separator-line-3steps-1,
                            .separator-line-3steps-2{
                              width: 48px;
                            }
                            .separator-line-3steps-2{
                              left: 54%;
                            }
                          }
                          #app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div > p:nth-child(7){
                            display:none;
                          }
                            #app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div>div:has(iframe){
                              padding: 0px;
                              max-width: none !important;
                              width : 800px !important;
                              margin: 0 auto !important;
                          }
                          @media (max-width: 848px) {
                              #app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div>div:has(iframe){
                                  width: 600px !important;
                              }
                          }
                          @media (max-width: 640px) {
                              #app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div>div:has(iframe){
                                  width: 85vw !important;
                              }
                          }
                          #app div[role="listbox"] {
                            height: 200px;
                            overflow: auto;
                          }
                          #app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div>div>div:has(iframe){
                              padding: 32px 16px;
                              max-width: none !important;
                              margin-left: -16px;
                          }

                          #app>div.flex.flex-col.flex-grow.mt-6>div.flex.flex-col.flex-grow>div:has(iframe){
                              padding: 0px;
                              max-width: none;
                              width: 100% !important;
                          }
                          
                          /* Unbreakable fix for internal scrollbar inside cross-domain iframe */
                          #app iframe[src*="thankyou"], 
                          #app iframe[title*="Appointment"], 
                          #app iframe[aria-label*="confirmation"] {
                              /* Measured in DevTools to be the lowest safe ceiling that prevents overflow */
                              min-height: 1100px !important;
                          }
                          @media (max-width: 768px) {
                              #app iframe[src*="thankyou"], 
                              #app iframe[title*="Appointment"], 
                              #app iframe[aria-label*="confirmation"] {
                                  /* Tested the layout on phone without leaving excess whitespace */
                                  min-height: 850px !important;
                              }
                          }



                          #app #insurance ul {
                            height: 180px;
                            overflow: auto;
                          }

                        `;
          if (is_new_layout) {
            style.textContent += `
                #app>div.flex.flex-col.flex-grow.mt-6>form>div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl{
                  background-color: white;
                  box-shadow: 0 0 7px 3px #b2aea3;
                  position : fixed;
                  left : 0;
                  width : 100%;
                  bottom : 0;
                  padding : 24px;
                }

                #app>div.flex.flex-col.flex-grow.mt-6>form>div.z-50.flex-grow.py-6.mt-6.bg-color>div>div>button{
                    background-color: #6AC64B;
                    color: #FBFEFF;
                }

                #app>div.flex.flex-col.flex-grow.mt-6>form>div.z-50.flex-grow.py-6.mt-6.bg-color>div>div>button:hover{
                    background-color: #2ba900;
                }
                @media screen and (min-width : 768px){
                    #app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl.md\\:sticky.md\\:bottom-0.md\\:mt-24 > div > div{
                      display : flex;
                      flex-direction : row-reverse;
                      justify-content : space-between;
                      width : 100%;
                      max-width : 1024px;
                      margin : 0 auto;
                    }
                    
                   #app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl.md\\:sticky.md\\:bottom-0.md\\:mt-24 > div > div > div{
                        width : 100%;
                        display : flex !important;
                        max-width : 300px;
                    }
                    #app>div.flex.flex-col.flex-grow.mt-6>form>div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl>div>div>button{
                      width : 100%;
                      max-width : 300px;
                    }
                  }
              `;
            $("footer").css("padding-bottom", "110px");
          }
          window.$shedulerShadowRoot.appendChild(style);

          // var hasUpdatedText = false;
          var hasAddedContinueBtn = false;
          // var hasChangedForm1 = false;
          // var hasChangedForm2 = false;
          // var hasChangedForm3 = false;
          var hasAddedBackBtn = false;
          // var hasAddedPhoneNumber = false;
          var hasClosedAvailDropdown = false;

          const script = document.createElement("script");
          script.textContent = `
                            function continueAction(){
                                $(window.$shedulerShadowRoot.querySelector("#app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl > div > div > button")).click();
                            }
                            function refresh_page(){
                                window.location.href="/location${window.jarvisConfig.vanityUrl}"
                            }
                            `;
          window.$shedulerShadowRoot.appendChild(script);

          //if (!isIOS()) {
          const observer = new MutationObserver((mutationsList, observer) => {
            for (const mutation of mutationsList) {
              if (mutation.type === "childList") {
                const selectors = [
                  {
                    selector:
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div > div > div.flex.justify-center > a:nth-child(1) > span.text-xs.text-color",
                    text_1: "Booking Information", //text to apply on step 1
                    originalText_1: "Details", //original text on step 1 from jarvis
                    text_2: "Booking Information", //text to apply on next step
                    skip: isThreeStepForm, // skip text update if threeStepForm
                  },
                  {
                    selector:
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div > div > div.flex.justify-center > a:nth-child(2) > span.text-xs.text-color",
                    text_1: "Patient Information",
                    originalText_1: "Schedule",
                    text_2: "Patient Information",
                    skip: false,
                  },
                  {
                    selector:
                      "#app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl > div > div > div a",
                    text_1: "Back",
                    originalText_1: "BACK",
                    text_2: "Back",
                    skip: false,
                  },
                  {
                    selector:
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div > div > div.hidden > a",
                    text_1: "Back",
                    originalText_1: "< previous step",
                    text_2: "Back",
                    skip: false,
                  },
                ];

                requestAnimationFrame(() => {
                  selectors.forEach(
                    ({ selector, text_1, originalText_1, text_2, skip }) => {
                      const element =
                        window.$shedulerShadowRoot.querySelector(selector);
                      if (element && !skip) {
                        // if skip we dont want to change the text
                        let currentText = element.textContent.trim();
                        if (currentText === originalText_1) {
                          element.textContent = text_1;
                        } else {
                          element.textContent = text_2;
                        }
                      } else {
                        // console.warn(
                        //   `Element not found for selector: ${selector}`
                        // );
                      }
                    }
                  );

                  const winShadowRoot = window.$shedulerShadowRoot;

                  // CSS Injection moved to ResizeObserver

                  if (
                    !isThreeStepForm &&
                    !window.$shedulerShadowRoot.querySelector(
                      ".separator-line"
                    )
                  ) {
                    const link = winShadowRoot.querySelector(
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div > div > div.flex.justify-center > a:nth-child(1)"
                    );

                    if (link) {
                      link.insertAdjacentHTML(
                        "afterend",
                        "<div class='separator-line'></div>"
                      );
                    }
                  }

                  if (
                    isThreeStepForm &&
                    winShadowRoot.querySelector(
                      "#app>div.flex.flex-col.flex-grow.mt-6>div>div>div.flex.justify-center"
                    ) &&
                    !winShadowRoot.querySelector(".separator-line-3steps-1")
                  ) {
                    const link = winShadowRoot.querySelector(
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div > div > div.flex.justify-center > a:nth-child(2)"
                    );

                    if (link) {
                      link.insertAdjacentHTML(
                        "afterend",
                        "<div class='separator-line-3steps-2'></div>"
                      );
                      link.insertAdjacentHTML(
                        "beforebegin",
                        "<div class='separator-line-3steps-1'></div>"
                      );
                    }

                    const container = winShadowRoot.querySelector(
                      "#app>div.flex.flex-col.flex-grow.mt-6>div>div>div.flex.justify-center"
                    );
                    if (container) {
                      container.style.alignItems = "baseline";
                    }
                  }

                  if (
                    winShadowRoot.querySelector(
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div > div"
                    ) &&
                    !hasAddedContinueBtn
                  ) {
                    const container = winShadowRoot.querySelector(
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div > div"
                    );

                    if (container) {
                      container.insertAdjacentHTML(
                        "beforeend",
                        "<div class='flex items-center'><button onclick='continueAction()' class='continue-btn'>Continue</button></div>"
                      );
                    }
                    hasAddedContinueBtn = true;
                  }

                  const nextButton = winShadowRoot.querySelector(
                    "#next-button-sticky"
                  );

                  if (
                    winShadowRoot.querySelector(
                      "#app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl > div > div > button"
                    )
                  ) {
                    if (
                      winShadowRoot.querySelector(
                        "#app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl > div > div > button"
                      ).textContent == " Next "
                    ) {
                      winShadowRoot.querySelector(
                        ".continue-btn"
                      ).textContent = "Next";

                      if (nextButton) {
                        nextButton.textContent = "Next";
                      }
                    } else {
                      winShadowRoot.querySelector(
                        ".continue-btn"
                      ).textContent = isThreeStepForm
                          ? "Submit"
                          : "Book Appointment";

                      if (nextButton) {
                        nextButton.textContent = isThreeStepForm
                          ? "Submit"
                          : "Book Appointment";
                      }
                    }
                  }

                  if (
                    winShadowRoot.querySelector(
                      'form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl > div > div > button[disabled="disabled"]'
                    )
                  ) {
                    if (nextButton) {
                      const disabledInShadow = winShadowRoot.querySelector(
                        'form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl > div > div > button[disabled="disabled"]'
                      );

                      if (disabledInShadow) {
                        nextButton.style.opacity = "0.5";
                        nextButton.style.cursor = "not-allowed";
                        nextButton.disabled = true;
                      } else {
                        nextButton.style.opacity = "1";
                        nextButton.style.cursor = "pointer";
                        nextButton.disabled = false;
                      }
                    }
                  }

                  const backButton = winShadowRoot.querySelector(
                    "#app > div.flex.flex-col.flex-grow.mt-6 > form > div.z-50.flex-grow.py-6.mt-6.bg-color.shadow-2xl > div > div > div a"
                  );

                  const backStickyButtons = document.querySelectorAll(
                    "#back-button-sticky-mobile, #back-button-sticky"
                  );
                  const wfBackButton = document.querySelector(
                    "#wf-back-button-mobile"
                  );

                  if (backButton) {
                    backStickyButtons.forEach((el) => {
                      el.style.opacity = "1";
                      el.style.cursor = "pointer";
                    });
                    if (wfBackButton) wfBackButton.style.display = "";
                  } else {
                    backStickyButtons.forEach((el) => {
                      el.style.opacity = "0";
                    });
                    if (wfBackButton) wfBackButton.style.display = "none";
                  }

                  if (
                    winShadowRoot.querySelector(
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div"
                    ) &&
                    !hasAddedBackBtn
                  ) {
                    const modal = winShadowRoot.querySelector(
                      "#app > div.flex.flex-col.flex-grow.mt-6 > div.flex.flex-col.flex-grow > div > div > div"
                    );

                    if (modal) {
                      modal.insertAdjacentHTML(
                        "beforeend",
                        "<button class='back-btn-home' onclick='refresh_page()'>Back To Home</button>"
                      );
                    }
                    hasAddedBackBtn = true;
                  }

                  if (
                    winShadowRoot.querySelector("input#true-policy-holder") &&
                    canObservePolicyRadio
                  ) {
                    const falsePolicyHolder = winShadowRoot.querySelector(
                      "input#false-policy-holder"
                    );

                    if (falsePolicyHolder) {
                      falsePolicyHolder.addEventListener("change", () => {
                        const firstName = winShadowRoot.querySelector(
                          "input#policy_holders_firstname"
                        );
                        if (firstName) firstName.value = "";

                        const lastName = winShadowRoot.querySelector(
                          "input#policy_holders_lastname"
                        );
                        if (lastName) lastName.value = "";

                        setTimeout(() => {
                          const dob = winShadowRoot.querySelector(
                            "input#policy_holders_dob"
                          );
                          if (dob) dob.value = "";
                        }, 500);

                        const detachListener = (selector) => {
                          const el = winShadowRoot.querySelector(selector);
                          if (el) {
                            const newEl = el.cloneNode(true);
                            el.replaceWith(newEl);
                          }
                        };

                        detachListener("input#first_name");
                        detachListener("input#last_name");
                        detachListener("input#birth_date");
                      });
                    }

                    const truePolicyHolder = winShadowRoot.querySelector(
                      "input#true-policy-holder"
                    );

                    if (truePolicyHolder) {
                      truePolicyHolder.addEventListener("change", () => {
                        const firstNameInput =
                          winShadowRoot.querySelector("input#first_name");
                        const lastNameInput =
                          winShadowRoot.querySelector("input#last_name");
                        const birthDateInput =
                          winShadowRoot.querySelector("input#birth_date");
                        const policyFirstName = winShadowRoot.querySelector(
                          "input#policy_holders_firstname"
                        );
                        const policyLastName = winShadowRoot.querySelector(
                          "input#policy_holders_lastname"
                        );
                        const policyDob = winShadowRoot.querySelector(
                          "input#policy_holders_dob"
                        );

                        if (firstNameInput && policyFirstName)
                          policyFirstName.value = firstNameInput.value;
                        if (lastNameInput && policyLastName)
                          policyLastName.value = lastNameInput.value;
                        if (birthDateInput && policyDob)
                          policyDob.value = birthDateInput.value;

                        const sync = (source, target) => {
                          if (source && target) {
                            const handler = () => {
                              target.value = source.value;
                            };
                            source.addEventListener("change", handler);

                            source._syncHandler = handler;
                          }
                        };

                        sync(firstNameInput, policyFirstName);
                        sync(lastNameInput, policyLastName);
                        sync(birthDateInput, policyDob);
                      });
                    }

                    canObservePolicyRadio = false; // eventHandler already attached
                  }

                  if (
                    !hasGoneStepTwoOnce &&
                    winShadowRoot.querySelector(
                      "#app > div.flex.flex-col.flex-grow.mt-6 > form > div.container.pt-6.mx-auto.sm\\:p-6.flex-grow > div > div > div:has(>div>div>div>div[date-picker-date])"
                    ) == null &&
                    hasClosedAvailDropdown
                  ) {
                    hasClosedAvailDropdown = false; //if the above div dont exist and we have closed the dropdown we need to close it again
                  }



                  const dropdownDiv = winShadowRoot.querySelector(
                    "#app>div.flex.flex-col.flex-grow.mt-6>form>div.container.pt-6.mx-auto>div>div>div:nth-child(3)>div>div>div>div:nth-child(2)>div>div.relative.flex.items-center.justify-center.pb-2.mb-4.border-b.border-gray-300.cursor-pointer.select-none"
                  );
                  if (dropdownDiv && !hasClosedAvailDropdown) {
                    setTimeout(function () {
                      //check if next div if classless means it is the dropdown then we close it
                      if (
                        winShadowRoot.querySelector(
                          "#app>div.flex.flex-col.flex-grow.mt-6>form>div.container.pt-6.mx-auto>div>div>div:nth-child(3)>div>div>div>div:nth-child(2)>div>div.relative.flex.items-center.justify-center.pb-2.mb-4.border-b.border-gray-300.cursor-pointer.select-none + div"
                        ).classList.length == 0
                      ) {
                        // the dropdown container div has no class, so if the next subling of dropdown header has no class it means the dropdown is opened
                        const target = winShadowRoot.querySelector(
                          "#app>div.flex.flex-col.flex-grow.mt-6>form>div.container.pt-6.mx-auto>div>div>div:nth-child(3)>div>div>div>div:nth-child(2)>div>div.relative.flex.items-center.justify-center.pb-2.mb-4.border-b.border-gray-300.cursor-pointer.select-none"
                        );

                        if (target) {
                          target.click();
                        }
                      }
                    }, 500);
                    hasClosedAvailDropdown = true;
                  }
                });
              }
            }
          });
          const resizeObserver = new ResizeObserver(() => {
            const currentShadow = window.$shedulerShadowRoot;
            if (currentShadow) {

              // Guarantee the mobile CSS fix is injected exactly once the shadow root is live
              if (!currentShadow.querySelector('#mobile-grid-fix')) {
                const style = document.createElement('style');
                style.id = 'mobile-grid-fix';
                style.textContent = `
                  @media screen and (max-width: 767px) {
                    ul:has(> div[aria-labelledby^="date-header-"]):not([style*="display: none"]) { display: block !important; }
                    div[role="radiogroup"][aria-label="Available appointment times"] {
                      display: grid !important;
                      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                      gap: 0.5rem !important;
                    }
                  }
                `;
                currentShadow.appendChild(style);
              }

              const radioGroups = currentShadow.querySelectorAll('[role="radiogroup"][aria-label="Available appointment times"]');
              if (window.innerWidth >= 768) {
                radioGroups.forEach(group => {
                  const ul = group.closest('ul');
                  if (ul && ul.style.display === 'none') {
                    ul.dataset.wasClosedOnMobile = 'true';
                    ul.style.display = ''; // Strip 'display: none' so it falls back to Desktop layout natively
                  }
                });
              } else {
                radioGroups.forEach(group => {
                  const ul = group.closest('ul');
                  if (ul && ul.dataset.wasClosedOnMobile === 'true') {
                    ul.style.display = 'none'; // Re-apply Vue's expected closed state from memory
                    ul.dataset.wasClosedOnMobile = 'false'; // Consume the memory so it acts naturally
                  }
                });
              }
            }
          });

          const config = {
            // some DOM changes need to watch attr & subtree changes as well
            //in browserstack when we observe subtree and/or attributes IOS devices freeze, if it happens on real devices then we can conditionnaly observe both
            //based on the device OS
            //Did conditional observation just to test in browserstack but still conviced that on real device it should not freeze
            attributes: false, // Disabled: Previously caused 30-sec freezing on mobile OS
            childList: true, //the most needed
            //subtree: true, //!isIOS(),
          };

          if (winShadowRoot) {
            observer.observe(winShadowRoot, config);
          }

          // ResizeObserver cannot observe ShadowRoots (throws TypeError), so we observe the document body instead!
          if (document.body) {
            resizeObserver.observe(document.body);
          }
          //}
          //},0)
          var loading_icon_temp = document.getElementById(
            "loading-spinner-tmp"
          );
          loading_icon_temp.style.display = "none"; //hide when jarvis loads
          window.jarvis.toggle(); //toggle is the function that show the jarvis component
          window.scrollTo(0, 0); //scroll on top
        } catch (error) {
          console.error(
            "Error during the jarvis toggle or script setup:",
            error
          );
        }
      });
    } catch (error) {
      console.error("Error during the setup of the jarvis scheduler:", error);
    }
  }
};