document.addEventListener("DOMContentLoaded", function() {
    const ticketHeader = document.getElementById("ticketHeader");
    const fixedTicketHeader = document.getElementById("fixedTicketHeader");

    function checkScroll() {
        const ticketHeaderRect = ticketHeader.getBoundingClientRect();
        const parentWidth = ticketHeader.parentElement.offsetWidth;

        if (ticketHeaderRect.bottom <= 0) {
            fixedTicketHeader.style.width = `${parentWidth}px`; // Set the width of the fixed header to match the parent container
            fixedTicketHeader.style.left = `${ticketHeader.parentElement.getBoundingClientRect().left}px`; // Align to the left edge of the parent
            fixedTicketHeader.style.position = 'fixed'; // Make it fixed at the top
            fixedTicketHeader.classList.remove("hidden");
            fixedTicketHeader.classList.add("top-0", "z-10");
        } else {
            fixedTicketHeader.style.width = ''; // Reset the width to default
            fixedTicketHeader.style.left = ''; // Reset the left position
            fixedTicketHeader.style.position = ''; // Reset the position to default
            fixedTicketHeader.classList.remove("top-0", "z-10");
            fixedTicketHeader.classList.add("hidden");
        }
    }

    window.addEventListener("scroll", checkScroll);
    window.addEventListener("resize", checkScroll); // Re-check on resize as well
});