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
      // Global cache for robust date/time extraction
      window.jarvisBookingCache = { date: "", day: "", time: "", location: "" };

      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 || "";

        // Strategy 1: Extract Date/Time from the API payload directly
        try {
             let rawStart = inputData.start_time || inputData.appointment_date || "";
             if (!rawStart) {
                 const jsonStr = JSON.stringify(inputData);
                 const isoMatch = jsonStr.match(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/);
                 if (isoMatch) rawStart = isoMatch[0];
             }
             if (rawStart) {
                 const d = new Date(rawStart);
                 if (!isNaN(d.getTime())) {
                     window.jarvisBookingCache.date = d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
                     window.jarvisBookingCache.day = d.toLocaleDateString("en-US", { weekday: "long" });
                     const tMatch = rawStart.match(/T(\d{2}):(\d{2})/);
                     if (tMatch && !rawStart.includes("Z") && !rawStart.match(/[+-]\d{2}:\d{2}$/)) {
                         let hrs = parseInt(tMatch[1], 10);
                         const ampm = hrs >= 12 ? 'PM' : 'AM';
                         hrs = hrs % 12 || 12;
                         window.jarvisBookingCache.time = `${hrs}:${tMatch[2]} ${ampm}`;
                     } else {
                         window.jarvisBookingCache.time = d.toLocaleTimeString("en-US", { hour: 'numeric', minute: '2-digit' });
                     }
                 }
             }
        } catch(e) {}

        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);
            } catch (e) {
              console.log("Error parsing fetch body:", e);
            }
          }

          // You can also log the response by handling the promise
          const response = await target.apply(thisArg, argumentsList);
          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.nearestCardColumnHeaderColor = "#767F87";
      //window.jarvis.onSubmittedhandlers.push(function () {
      //console.log("submitted");
      //});

      setInterval(() => {
          try {
              const shadow = window.$shedulerShadowRoot;
              if (!shadow) return;
              
              // Strategy 2: Scan the DOM for the confirmation text (e.g. "Tuesday, May 14 at 10:00 AM")
              if (!window.jarvisBookingCache.time) {
                  const allTextNodes = shadow.querySelectorAll("h1, h2, h3, h4, p, span, div");
                  for (let el of allTextNodes) {
                      if (el.children.length > 0) continue; // Only check leaf nodes to avoid duplicate scanning
                      const text = el.textContent.trim();
                      const timeMatch = text.match(/at\s+(\d{1,2}:\d{2}\s*(?:AM|PM))/i);
                      if (timeMatch && text.match(/monday|tuesday|wednesday|thursday|friday|saturday|sunday/i)) {
                          window.jarvisBookingCache.time = timeMatch[1].trim();
                          const datePart = text.split(/at/i)[0].trim(); // "Tuesday, May 14"
                          const d = new Date(datePart);
                          if (!isNaN(d.getTime())) {
                              window.jarvisBookingCache.date = d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
                              window.jarvisBookingCache.day = d.toLocaleDateString("en-US", { weekday: "long" });
                          }
                          break;
                      }
                  }
              }

              // Strategy 3: Find the checked radio button in the Jarvis date picker (e.g. <input type="radio" aria-label="8:00 am on May 15, 2026">)
              const selectedTimeRadio = shadow.querySelector('input[type="radio"]:checked');
              if (selectedTimeRadio && selectedTimeRadio.id && selectedTimeRadio.id.startsWith("time-")) {
                  const ariaLabel = selectedTimeRadio.getAttribute("aria-label"); 
                  if (ariaLabel && ariaLabel.includes(" on ")) {
                      const parts = ariaLabel.split(" on ");
                      
                      // Safely update the cache ONLY if it's not already set to avoid overwriting with empties
                      const parsedTime = parts[0].trim().replace(/(am|pm)/i, ' $1').toUpperCase().replace("  ", " ");
                      if (parsedTime) window.jarvisBookingCache.time = parsedTime;
                      
                      const d = new Date(parts[1].trim());
                      if (!isNaN(d.getTime())) {
                          window.jarvisBookingCache.date = d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
                          window.jarvisBookingCache.day = d.toLocaleDateString("en-US", { weekday: "long" });
                      }
                  }
              }

              // Extract Location Name from the selected card
              const activeLocEl = shadow.querySelector("[data-location-id]");
              if (activeLocEl) {
                   const locTitleEl = activeLocEl.parentElement.querySelector("h3");
                   if (locTitleEl) window.jarvisBookingCache.location = locTitleEl.textContent.trim();
              }
          } catch(e) {}
      }, 500);

      window.jarvis.onBookSuccesshandlers.push(function () {
        // Hide the Jarvis widget immediately to prevent the native success screen from flashing
        if (window.$shedulerShadowRoot) {
            const container = window.$shedulerShadowRoot.querySelector("#app");
            if (container) {
                container.style.opacity = "0";
                container.style.pointerEvents = "none";
            }
        }

        // Extract booking details for the Thank You page
        try {
            const shadow = window.$shedulerShadowRoot;
            
            // 1. Extract Location Name (from Cache or Fallback)
            let locName = window.jarvisBookingCache.location;
            if (!locName) {
                const h1El = document.querySelector('h1');
                if (h1El && h1El.textContent && h1El.textContent.trim() !== "Book an Appointment") {
                    locName = h1El.textContent.trim().replace(/Book an Appointment at:\s*/, "").replace(/Dentist in |Orthodontist in /, "");
                } else if (window.jarvisConfig && window.jarvisConfig.officeName) {
                    locName = window.jarvisConfig.officeName;
                }
            }

            // 2. Extract Date, Day & Time (from our interval cache)
            let dateStr = window.jarvisBookingCache.date;
            let dayStr = window.jarvisBookingCache.day;
            let timeStr = window.jarvisBookingCache.time;

            // 4. Extract Phone (from header link href, NOT textContent)
            const phoneEl = document.querySelector('a[href^="tel:"]');
            let phoneStr = "";
            if (phoneEl) {
                const href = phoneEl.getAttribute("href");
                let digits = href.replace(/[^0-9]/g, "");
                if (digits.length === 11 && digits.startsWith("1")) digits = digits.slice(1);
                if (digits.length === 10) {
                    phoneStr = `(${digits.slice(0,3)}) ${digits.slice(3,6)}-${digits.slice(6)}`;
                } else {
                    phoneStr = href.replace("tel:", "").trim();
                }
            }

            // 5. Extract Location URL (for insurance link)
            let locationUrl = window.location.pathname;
            if (locationUrl.includes("/book-appointment") && window.jarvisConfig && window.jarvisConfig.vanityUrl) {
                locationUrl = window.jarvisConfig.vanityUrl.startsWith("/") 
                    ? window.jarvisConfig.vanityUrl 
                    : "/" + window.jarvisConfig.vanityUrl;
            }

            const bookingDetails = {
                location: locName,
                date: dateStr,
                day: dayStr,
                time: timeStr,
                phone: phoneStr,
                url: locationUrl
            };
            sessionStorage.setItem("jarvis_booking_details", JSON.stringify(bookingDetails));
        } catch (e) {
            console.error("Jarvis: error extracting booking details for thank you page", e);
        }

        // Tracking: The webhook below will fire, and then the page will redirect to /thank-you
        // 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 = "";

        let redirected = false;
        const doRedirect = () => {
            if (!redirected) {
                redirected = true;
                window.location.href = "/thank-you";
            }
        };

        // Guarantee delivery by waiting for fetch, with a max timeout fallback
        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 });
                }
            })
            .finally(() => {
                doRedirect();
            });
        }, 10);

        // Fallback in case fetch hangs (increased to 5000ms to allow slow webhooks to finish)
        setTimeout(doRedirect, 5000);
      });
      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;
          
          // Strategy 4: Intercept clicks on the time slot BEFORE Vue destroys the DOM (Capture Phase)
          window.$shedulerShadowRoot.addEventListener("click", (e) => {
              const label = e.target.closest("label");
              if (label && label.getAttribute("for") && label.getAttribute("for").startsWith("time-")) {
                  const ariaLabel = label.getAttribute("aria-label"); // e.g. "8:00 am on May 15, 2026"
                  if (ariaLabel && ariaLabel.includes(" on ")) {
                      const parts = ariaLabel.split(" on ");
                      const parsedTime = parts[0].trim().replace(/(am|pm)/i, ' $1').toUpperCase().replace("  ", " ");
                      if (parsedTime) window.jarvisBookingCache.time = parsedTime;
                      
                      const d = new Date(parts[1].trim());
                      if (!isNaN(d.getTime())) {
                          window.jarvisBookingCache.date = d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
                          window.jarvisBookingCache.day = d.toLocaleDateString("en-US", { weekday: "long" });
                      }
                  }
              }
              
              // Also try to intercept nearest availability card clicks OR mobile list items
              const card = e.target.closest(".availability-card, [data-operatory]");
              if (card) {
                  // Strategy for mobile list items (<li>08:00am</li>)
                  if (card.tagName.toLowerCase() === 'li') {
                      const timeText = card.textContent.trim();
                      if (timeText) {
                          window.jarvisBookingCache.time = timeText.replace(/(am|pm)/i, ' $1').toUpperCase().replace("  ", " ");
                      }
                      
                      // Try to find the date span in the mobile carousel
                      const carouselCell = card.closest('.carousel-cell');
                      if (carouselCell) {
                          const dateSpan = carouselCell.querySelector('span.table-pagination') || carouselCell.querySelector('.date-header');
                          if (dateSpan) {
                              let dateText = dateSpan.textContent.trim();
                              // e.g. "Thu, May 21" -> add year
                              if (!/\d{4}/.test(dateText)) {
                                  dateText += ", " + new Date().getFullYear();
                              }
                              const d = new Date(dateText);
                              if (!isNaN(d.getTime())) {
                                  window.jarvisBookingCache.date = d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
                                  window.jarvisBookingCache.day = d.toLocaleDateString("en-US", { weekday: "long" });
                              }
                          }
                      }
                  } else {
                      // Strategy for nearest availability cards
                      const text = card.textContent || "";
                      const timeMatch = text.match(/(\d{1,2}:\d{2}\s*(?:AM|PM))/i);
                      if (timeMatch && text.match(/monday|tuesday|wednesday|thursday|friday|saturday|sunday/i)) {
                           window.jarvisBookingCache.time = timeMatch[1].trim().toUpperCase();
                           const dateMatch = text.match(/(?:january|february|march|april|may|june|july|august|september|october|november|december)\s+\d{1,2}/i);
                           if (dateMatch) {
                                const d = new Date(dateMatch[0] + ", " + new Date().getFullYear());
                                if (!isNaN(d.getTime())) {
                                    window.jarvisBookingCache.date = d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
                                    window.jarvisBookingCache.day = d.toLocaleDateString("en-US", { weekday: "long" });
                                }
                           }
                      }
                  }
              }
          }, true); // use capture phase so we intercept before Vue destroys the element!

          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);
    }
  }
};