/******/ (() => { // webpackBootstrap
/*!*********************************************************!*\
  !*** ./resources/js/templates/rebel-path/rebel-path.js ***!
  \*********************************************************/
document.addEventListener("DOMContentLoaded", function () {
  // Create the placeholder only once at load time
  var placeholder = document.createElement('div');
  placeholder.id = 'sticky-placeholder';

  // Style the placeholder to ensure smooth transitions
  placeholder.style.transition = "height 0.5s ease";
  placeholder.style.overflow = "hidden"; // Critical for smooth height transitions

  // Add the placeholder to the DOM
  var stickyBar = document.querySelector('.sb-sticky-bar');
  var parentElement = stickyBar.parentNode;
  parentElement.insertBefore(placeholder, stickyBar.nextSibling);

  // Initial height update
  updatePlaceholderHeight();
  document.getElementById("close-button").addEventListener("click", function () {
    var stickyBar = document.getElementById("sticky-bar");

    // Begin by animating the height of the placeholder to 0 FIRST
    // This is the key part to prevent the white flash
    placeholder.style.height = "0";

    // Set sticky bar to fixed position during animation
    stickyBar.style.position = "fixed";
    stickyBar.style.width = "100%";
    stickyBar.style.top = "0";
    stickyBar.style.zIndex = "9999";

    // Animate the bar sliding up
    stickyBar.style.transition = "transform 0.5s ease, opacity 0.5s ease";
    stickyBar.style.transform = "translateY(-50%)";
    stickyBar.style.opacity = "0";

    // After animation completes, clean up
    setTimeout(function () {
      stickyBar.style.display = "none";
      stickyBar.style.visibility = "hidden";

      // Make sure the placeholder is completely gone
      placeholder.style.display = "none";
      var arrow = document.getElementById("show-arrow");
      arrow.style.display = "block";
    }, 1);
  });
  document.getElementById("show-arrow").addEventListener("click", function () {
    var stickyBar = document.getElementById("sticky-bar");
    var arrow = document.getElementById("show-arrow");

    // Hide arrow immediately
    arrow.style.display = "none";

    // Prepare placeholder first - display but still at 0 height
    placeholder.style.display = "block";
    placeholder.style.height = "0";

    // Reset sticky bar styles immediately
    stickyBar.style.transition = "none";
    stickyBar.style.transform = "translateY(0)";
    stickyBar.style.opacity = "1";
    stickyBar.style.display = "block";
    stickyBar.style.position = "fixed"; // Keep as fixed
    stickyBar.style.visibility = "visible";

    // Force reflow to apply changes immediately
    void stickyBar.offsetHeight;

    // Now animate the placeholder height to match the sticky bar
    // Use setTimeout to ensure it happens AFTER the sticky bar is visible
    setTimeout(function () {
      updatePlaceholderHeight();
    }, 1);
  });

  // Function to update placeholder height
  function updatePlaceholderHeight() {
    var stickyBarHeight = document.querySelector('.sb-sticky-bar').offsetHeight;
    placeholder.style.height = stickyBarHeight + 'px';
  }

  // Update on resize and content changes
  window.addEventListener('resize', updatePlaceholderHeight);

  // Monitor for changes in the sticky bar content
  var observer = new MutationObserver(updatePlaceholderHeight);
  observer.observe(document.querySelector('.sb-sticky-bar'), {
    childList: true,
    subtree: true,
    attributes: true
  });
});
/******/ })()
;