.action-bar {
  background-color: var(--sidebarPrimary);
  border-bottom: 1px solid var(--border);
  /* padding: 0 16px; */
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  top: 49px;
  z-index: 10;
  align-content: center;
  height:50px;
}

.action-btn {
  font-family: "Dosis", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0px 16px 0px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--brand-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, border-color 0.15s;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: flex;
  flex-direction: row;

}



.action-btn.active {
  border-bottom-color: var(--buttonPrimary);
  opacity: 1;
  font-weight: bold;
}




/* Hide the span text and use CSS content instead */
.js-toggle-left-sidebar .action-btn-label {
  font-size: 0;
}

/* Show "Filters" by default (when closed or unset) */
.js-toggle-left-sidebar .action-btn-label::after {
  content: "Filters";
color: white;
font-family: "Dosis", sans-serif;
font-size: clamp(20px, 20px + 0.5vw, 1.7em);
font-weight: bold;
  font-family: var(--HWFont);

}

/* Show "Show Results" when opened (mobile only) */
.js-toggle-left-sidebar[data-state="opened"] .action-btn-label::after {
  content: "Show Results";
color: white;
font-family: "Dosis", sans-serif;
font-size: clamp(20px, 20px + 0.5vw, 1.7em);
font-weight: bold;
  font-family: var(--HWFont);

}

/* Hamburger dot visibility */
.js-toggle-left-sidebar[data-state="closed"] .hamburger-dot {
  opacity: 1;
}

.js-toggle-left-sidebar[data-state="opened"] .hamburger-dot {
  opacity: 0;
}


.mobile-only {
  display: flex;
}

.desktop-only {
  display: none;
}


.hamburger-dot{
 fill: white;
}

.action-btn{
  --button-color: white;
  font-size: clamp(20px, 20px + 0.5vw, 1.2em);
  font-weight: bold;
  height:100%;
  fill:white;
  color:white;
}

/* ============================================
   TABLET (768px+)
   ============================================ */

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: flex;
  }

 

  .js-toggle-left-sidebar[data-state="opened"] .action-btn-label::after {
    content: "Hide Filters";
  /* color: var(--formText); */
color: var(--backgroundPrimary);
  }
  .js-toggle-left-sidebar .action-btn-label::after {
    content: "Show Filters";
  /* color: var(--formText); */
color: var(--backgroundPrimary);
  }

  .hamburger-dot{
   /* fill: var(--formText); */
fill: var(--backgroundPrimary);
  }

  .action-btn{
  /*   --button-color: var(--formText); */
  /*   fill: var(--button-color); */
  /*  color: var(--formText); */
  /**/
  /* opacity: 0.8; */

--button-color: var(--backgroundPrimary);
fill: var(--backgroundPrimary);
color: var(--backgroundPrimary);
opacity: 0.9;
  }

  .action-btn:hover{
    --button-color: white;
fill: white;
    /* background-color:  var(--formText); */
background-color: var(--backgroundPrimary);
    color:white;
  text-decoration: none;

  }


  .action-bar{
    justify-content:space-between;
  }

.action-bar .js-toggle-left-sidebar:hover {
    /* background-color:  var(--formText); */
background-color: var(--backgroundPrimary);
  }

  .action-bar .js-toggle-left-sidebar:hover .action-btn-label::after {
    color: white;
  }

  .action-bar .js-toggle-left-sidebar:hover .hamburger-dot {
    fill: white;
  }

  .action-bar .js-toggle-left-sidebar:hover {
    --button-color: white;
  }
.action-btn.js-toggle-left-sidebar{
  opacity:1;
}
}