/* ===== Desktop / tablet: one row, search dominant, filters tucked small ===== */
@media (min-width: 769px) {
  /* An earlier customization on this page paints the grey background on the
     <header> wrapper, which extends past the bottom of the controls and shows
     again as a thin line beneath the empty top-bar strip. Paint the grey on
     the bar itself instead, evenly padded on all four sides. The selector has
     to out-specify "header.tribe-events-header.tribe-events-header--has-event-search". */
  body header.tribe-events-header.tribe-events-header--has-event-search {
    background: transparent !important;
  }
  .tribe-events-header__events-bar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8f8f8 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important;
  }

  /* search field + SEARCH button are the primary control */
  .tribe-events-c-events-bar__search-container {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 300px !important;
    height: 46px !important;
  }
  .tribe-events-c-search.tribe-events-c-events-bar__search-form {
    width: 100% !important;
    height: 46px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .tribe-events-c-search__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 46px !important;
    box-sizing: border-box !important;
    padding: 0 14px 0 40px !important;
    font-size: 15px !important;
  }
  .tribe-events-c-search__button {
    flex: 0 0 150px !important;
    width: 150px !important;
    height: 46px !important;
    box-sizing: border-box !important;
    margin-left: 10px !important;
    padding: 0 !important;
    font-size: 13px !important;
  }

  /* the three secondary controls: same height, same padding, same type,
     sized as a matched set and kept small so they don't compete */
  .tribe-events-c-events-bar__filter-button-container,
  .ncbf-past-events-toggle,
  .tribe-events-c-events-bar__views {
    height: 46px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* The advanced-filter panel is rendered inside the filter button container,
     so that container's intrinsic width is around 768px. Left to size itself
     it crushes the search field to nothing, so pin it to an explicit width. */
  .tribe-events-c-events-bar__filter-button-container {
    flex: 0 0 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    margin-left: 10px !important;
  }
  .ncbf-past-events-toggle,
  .tribe-events-c-events-bar__views {
    flex: 0 0 auto !important;
    max-width: 170px !important;
  }

  .tribe-events-c-events-bar__filter-button-container,
  .ncbf-past-events-toggle,
  .tribe-events-c-view-selector__button {
    border: 1px solid #dcdcdc !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tribe-events-c-view-selector,
  .tribe-events-c-view-selector__button {
    width: 100% !important;
    height: 46px !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
    margin: 0 !important;
  }
  .tribe-events-c-events-bar__filter-button {
    width: 100% !important;
    height: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  .ncbf-past-events-toggle {
    padding: 0 4px !important;
    gap: 5px !important;
  }

  .tribe-events-c-events-bar__filter-button,
  .tribe-events-c-events-bar__filter-button-text,
  .tribe-events-c-view-selector__button,
  .tribe-events-c-view-selector__button-text,
  .ncbf-past-events-toggle,
  .ncbf-past-events-toggle-label {
    font-family: "Avenir", sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #4a4a4a !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* TEC ships a ~19px margin on the filter label, which pushed the chip's
     contents wider than the chip itself; zero it so all three centre evenly */
  .tribe-events-c-events-bar__filter-button-text,
  .tribe-events-c-view-selector__button-text,
  .ncbf-past-events-toggle-label {
    margin: 0 !important;
    padding: 0 !important;
  }

  .tribe-events-c-events-bar__filter-button-icon,
  .tribe-events-c-events-bar__filter-button svg,
  .ncbf-past-events-toggle img {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  .tribe-events-c-view-selector__content,
  .tribe-events-c-view-selector__list { min-width: 170px !important; }
  .tribe-events-c-view-selector__list-item-text { white-space: nowrap !important; }
}

/* At full desktop width hold the 60 / 40 split exactly, with the three
   secondary controls as equal thirds of the 40. */
@media (min-width: 1300px) {
  .tribe-events-c-events-bar__search-container {
    flex: 0 1 60% !important;
    max-width: 60% !important;
  }
  /* basis is each chip's own content, then they grow to fill the 40%, so a
     browser that renders the label wider (Firefox does) still has room */
  .tribe-events-c-events-bar__filter-button-container,
  .ncbf-past-events-toggle,
  .tribe-events-c-events-bar__views {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Search field: visible lift/contrast from the page at all widths */
.tribe-events-c-search__input {
  background: #ffffff !important;
  border: 1px solid #d6d6d6 !important;
}
.tribe-events-c-search__input:focus {
  border-color: #E73D7A !important;
  outline: none !important;
}

/* ===== Past events toggle: base ===== */
.ncbf-past-events-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  color: #4a4a4a;
  white-space: nowrap;
}
.ncbf-past-events-toggle:hover { opacity: 0.7; }
.ncbf-past-events-toggle img { width: 20px; height: 20px; display: block; }
.ncbf-past-events-toggle.is-active,
.ncbf-past-events-toggle.is-active .ncbf-past-events-toggle-label {
  color: #E73D7A !important;
}

/* ===== Mobile: match the site's existing compact icon-over-label buttons
   (Search / Filter already look like this) instead of a bordered chip,
   and use a short label instead of "Show/Hide Past Events" ===== */
@media (max-width: 768px) {
  .ncbf-past-events-toggle {
    flex-direction: column;
    gap: 6px;
    padding: 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    border: none !important;
    background: transparent !important;
    /* the view-type button's "Display" label overflows its own box by
       ~12-15px on the left, so give this element breathing room on its
       right edge to keep the two labels from visually colliding */
    margin-right: 18px !important;
  }
  .ncbf-past-events-toggle img { width: 20px; height: 20px; }
}