.elementor-804 .elementor-element.elementor-element-df30cbb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:91px;--padding-bottom:125px;--padding-left:0px;--padding-right:0px;}.elementor-804 .elementor-element.elementor-element-df30cbb:not(.elementor-motion-effects-element-type-background), .elementor-804 .elementor-element.elementor-element-df30cbb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#001104;}/* Start custom CSS for html, class: .elementor-element-9b1bbfe */<script>
document.addEventListener('DOMContentLoaded', function() {

  const guideWrapper = document.querySelector('.pi-guide-wrapper');
  if (!guideWrapper) return; // Exit if the main container isn't found

  // --- Main Click Handler for the entire tool ---
  guideWrapper.addEventListener('click', function(event) {
    
    // --- Logic for Drug Cards ---
    const navCard = event.target.closest('.pi-nav-card');
    if (navCard) {
      const sectionId = navCard.dataset.sectionId;
      const categoryClass = navCard.dataset.categoryClass;
      showSection(sectionId, categoryClass);
      return; // Stop further checks
    }

    // --- Logic for Filter Buttons ---
    const filterBtn = event.target.closest('.pi-filter-btn');
    if (filterBtn) {
      const category = filterBtn.dataset.category;
      filterCards(category, filterBtn);
      return;
    }

    // --- Logic for Back Buttons ---
    const backBtn = event.target.closest('.pi-back-btn');
    if (backBtn) {
      showNavigation();
      return;
    }

    // --- Logic for Tabs ---
    const tabLink = event.target.closest('.pi-tab-link');
    if (tabLink) {
      const tabName = tabLink.dataset.tabName;
      openTab(tabName, tabLink);
      return;
    }
  });

  // --- All the functions are now defined here, safely ---

  function showSection(sectionId, categoryClass) {
    const navGrid = document.getElementById('navigation');
    const targetSection = document.getElementById(sectionId);

    if (navGrid) navGrid.style.display = 'none';
    
    document.querySelectorAll('.pi-content-section.active').forEach(s => s.classList.remove('active'));
    
    if (targetSection) {
      targetSection.classList.add('active');
      
      const categoryClasses = ['cat-blue', 'cat-slate', 'cat-gold', 'cat-teal'];
      categoryClasses.forEach(c => targetSection.classList.remove(c));
      if (categoryClass) {
        targetSection.classList.add(categoryClass);
      }
      
      targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }

  function showNavigation() {
    document.querySelectorAll('.pi-content-section').forEach(s => s.classList.remove('active'));
    const navGrid = document.getElementById('navigation');
    if (navGrid) navGrid.style.display = 'grid';
  }

  function openTab(tabName, clickedTab) {
    const parentSection = clickedTab.closest('.pi-content-section');
    if (!parentSection) return;

    parentSection.querySelectorAll('.pi-tab-content').forEach(tab => tab.style.display = "none");
    parentSection.querySelectorAll('.pi-tab-link').forEach(link => link.classList.remove('active'));

    const targetTab = parentSection.querySelector('#' + tabName);
    if (targetTab) targetTab.style.display = "block";
    
    clickedTab.classList.add('active');
  }

  function filterCards(category, clickedButton) {
    document.querySelectorAll('.pi-filter-btn').forEach(btn => btn.classList.remove('active'));
    clickedButton.classList.add('active');

    document.querySelectorAll('.pi-nav-card').forEach(card => {
      if (category === 'all' || card.getAttribute('data-category') === category) {
        card.classList.remove('filtered-out');
      } else {
        card.classList.add('filtered-out');
      }
    });
  }

});
</script>/* End custom CSS */