.songfinder-widget,
.songfinder-widget * {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: normal;
  list-style: none;
  text-decoration: none;
  color: inherit;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: baseline;
}
.songfinder-widget {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box !important;
  color: #1a1a1a;
  display: block;
  padding: 0 15px !important;
}
.songfinder-widget button,
.songfinder-widget select {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.songfinder-widget input {
  font-family: inherit;
  font-size: inherit;
  cursor: text;
}
.songfinder-widget svg { display: block; }

.songfinder-widget .wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 40px;
  position: relative !important;
}

/* ---- Toolbar ---- */
.songfinder-widget .sf-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px;
  margin-bottom: 18px;
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

.songfinder-widget .sf-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  flex-wrap: nowrap !important;
  position: relative !important;
}

.songfinder-widget .search-box {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 1 1 200px !important;
  max-width: 320px !important;
  min-width: 120px;
  display: flex !important;
  align-items: center !important;
  height: 42px !important;
  box-sizing: border-box !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 6px;
  background: #fff !important;
  padding: 0 8px !important;
}
.songfinder-widget .search-box:focus-within { border-color: #9ec3ee !important; }
.songfinder-widget .search-box .icon {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
  padding: 0 6px 0 4px !important;
}
.songfinder-widget .search-box .icon svg { width: 15px !important; height: 15px !important; }
.songfinder-widget .search-box input {
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  box-sizing: border-box !important;
  border: 0 !important;
  padding: 6px 4px !important;
  background: transparent !important;
  color: #1a1a1a !important;
}
.songfinder-widget .search-box input::placeholder {
  color: #999 !important;
}
.songfinder-widget .search-box input:focus { outline: none; }
.songfinder-widget .search-clear {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: transparent !important;
  border-radius: 50%;
}
.songfinder-widget .search-clear:hover { background: #eee !important; }
.songfinder-widget .search-clear[hidden] { display: none !important; }
.songfinder-widget .search-clear svg { width: 14px !important; height: 14px !important; }

.songfinder-widget .sf-pill-wrap {
  position: relative !important;
}
.songfinder-widget .sf-pill-btn {
  display: flex !important;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #d7d7d7;
  background: #fff;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.songfinder-widget .sf-pill-btn:hover {
  background: #f3f3f3;
  border-color: #c4c4c4;
}
/* The dropdown arrow is drawn purely in CSS (a bordered triangle) rather
   than relying on the inline <svg> chevron: when SlickModal clones the
   popup markup, some browsers drop the SVG namespace and render it as a
   broken "tofu" box. A CSS triangle can't break, needs no font or asset,
   and follows currentColor for light/dark automatically. */
.songfinder-widget .sf-pill-btn svg {
  display: none !important;
}
.songfinder-widget .sf-pill-btn::after {
  content: "";
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .18s ease;
}
/* "Open" state - while this pill's menu is visible. Uses :has() (supported
   in current Edge/Firefox/Safari); browsers without it simply skip the
   accent, no harm. */
.songfinder-widget .sf-pill-wrap:has(.sf-pill-menu:not([hidden])) .sf-pill-btn {
  background: #f0eaf8;
  border-color: #b9a7de;
  box-shadow: 0 0 0 3px rgba(156,124,222,0.18);
}
.songfinder-widget .sf-pill-wrap:has(.sf-pill-menu:not([hidden])) .sf-pill-btn::after {
  transform: rotate(180deg);
}
.songfinder-widget .sf-pill-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  background: #ece6f5 !important;
  color: #2a2a2a !important;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  padding: 6px;
  min-width: 0 !important;
  max-height: 260px;
  overflow-y: auto;
  z-index: 10000;
  /* Themed scrollbar so it matches the lavender menu instead of the
     browser default (which renders stark white on the light menu in
     dark mode). The menu bg is the same #ece6f5 in both themes, so one
     set of colours works for light and dark alike. */
  scrollbar-width: thin;
  scrollbar-color: #c1b2dd #ece6f5;
}
.songfinder-widget .sf-pill-menu::-webkit-scrollbar {
  width: 10px;
}
.songfinder-widget .sf-pill-menu::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
.songfinder-widget .sf-pill-menu::-webkit-scrollbar-thumb {
  background: #c1b2dd;
  border-radius: 10px;
  border: 2px solid #ece6f5;
}
.songfinder-widget .sf-pill-menu::-webkit-scrollbar-thumb:hover {
  background: #ac99d0;
}
.songfinder-widget .sf-pill-menu[hidden] { display: none !important; }
.songfinder-widget .sf-pill-item {
  display: block !important;
  width: 100%;
  text-align: left !important;
  padding: 10px 14px;
  border-radius: 8px;
  background: transparent !important;
  color: #2a2a2a !important;
  font-size: 14px;
}
.songfinder-widget .sf-pill-item:hover { background: rgba(0,0,0,0.06) !important; }
.songfinder-widget .sf-pill-item.active {
  background: rgba(0,0,0,0.1) !important;
  font-weight: 700;
}
/* The dropdown entries are plain-text <button>s. The host theme attaches a
   "selected" icon to active/focused elements via ::before/::after using its
   own icon font (e.g. .active::after { content:"\..."; font-family:icons }).
   That font isn't in effect inside our widget, so the entry showed an empty
   "tofu" box next to the active item. Strip any inherited pseudo content on
   these entries. (The pill buttons' own arrow is a ::after on .sf-pill-btn,
   which this does not touch.) */
.songfinder-widget .sf-pill-item::before,
.songfinder-widget .sf-pill-item::after,
.songfinder-widget .sf-pill-item.active::before,
.songfinder-widget .sf-pill-item.active::after,
#songfinderWidget .sf-pill-item::before,
#songfinderWidget .sf-pill-item::after,
#songfinderWidget .sf-pill-item.active::before,
#songfinderWidget .sf-pill-item.active::after {
  content: none !important;
  display: none !important;
}

/* ---- List ---- */
.songfinder-widget .sf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.songfinder-widget .sf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f6f6;
}
.songfinder-widget .sf-row:nth-child(even) { background: #fff; border: 1px solid #ececec; }
.songfinder-widget .sf-cover {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: #ddd;
  flex-shrink: 0;
}
.songfinder-widget .sf-text { flex: 1; min-width: 0; overflow: hidden; }
.songfinder-widget .sf-title {
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.songfinder-widget .sf-artist {
  font-size: 12.5px;
  color: #6b6b6b;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.songfinder-widget .sf-time {
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}
.songfinder-widget .sf-time .sf-day { font-weight: 600; color: #555; }

.songfinder-widget .sf-empty {
  text-align: center;
  padding: 40px 0;
  color: #888;
  font-size: 14px;
}

.songfinder-widget .sf-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.songfinder-widget .sf-loadmore-btn {
  padding: 10px 20px;
  border-radius: 999px;
  background: #f0f0f0 !important;
  color: #333 !important;
  font-size: 13px;
  font-weight: 600;
}
.songfinder-widget .sf-loadmore-btn:hover { background: #e4e4e4 !important; }
.songfinder-widget .sf-loadmore-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
  .songfinder-widget .sf-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  /* Search box on its own full-width row; the two pills share the next row
     and sit side by side, wrapping to stacked only when they no longer fit.
     The 15px edge gutter comes from the widget's own padding:0 15px. */
  .songfinder-widget .sf-filters {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px;
    width: 100%;
  }
  .songfinder-widget .search-box {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 42px !important;
  }
  .songfinder-widget .sf-pill-wrap {
    flex: 1 1 140px;   /* grow to fill the row, but each needs >=140px... */
    min-width: 140px;  /* ...so once two won't fit, they wrap to stacked */
  }
  .songfinder-widget .sf-pill-btn {
    width: 100% !important;
    justify-content: center;
  }
  .songfinder-widget .sf-title,
  .songfinder-widget .sf-artist { max-width: 55vw; }
}

/* ====================================================================
   ID-based overrides (higher specificity than the host page's own
   ".slickModal.contactForm .slickWindow form input.send" rule, which
   otherwise wins over our class-based rules above and forces its own
   padding/margin/color/display onto every <input> in the popup).
   ==================================================================== */
#songfinderWidget .search-box {
  display: flex !important;
  align-items: center !important;
  height: 42px !important;
  box-sizing: border-box !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 6px !important;
  background: #fff !important;
  padding: 0 8px !important;
  margin: 0 !important;
}
#songfinderWidget .search-box input {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  border: 0 !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  background: transparent !important;
  color: #1a1a1a !important;
  text-align: left !important;
  font-size: 14px !important;
}
#songfinderWidget .search-box input::placeholder {
  color: #999 !important;
}
#songfinderWidget .sf-pill-btn {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #d7d7d7 !important;
  margin: 0 !important;
}
#songfinderWidget .sf-pill-btn:hover {
  background: #f3f3f3 !important;
  border-color: #c4c4c4 !important;
}
#songfinderWidget .sf-pill-wrap:has(.sf-pill-menu:not([hidden])) .sf-pill-btn {
  background: #f0eaf8 !important;
  border-color: #b9a7de !important;
  box-shadow: 0 0 0 3px rgba(156,124,222,0.18) !important;
}

/* ====================================================================
   Dark theme (tied to the site's own Dark/Light toggle - the html
   element gets class "mdThemeIsDark" or "mdThemeIsLight" from
   themetoggler.js / page.js). Everything below only applies when the
   site is currently in dark mode.
   ==================================================================== */
html.mdThemeIsDark #songfinderWidget {
  color: #ececec;
}
html.mdThemeIsDark #songfinderWidget .sf-row {
  background: #2a2a2a;
}
html.mdThemeIsDark #songfinderWidget .sf-row:nth-child(even) {
  background: #1f1f1f;
  border: 1px solid #333;
}
html.mdThemeIsDark #songfinderWidget .sf-title {
  color: #f2f2f2;
}
html.mdThemeIsDark #songfinderWidget .sf-artist {
  color: #a8a8a8;
}
html.mdThemeIsDark #songfinderWidget .sf-time {
  color: #999;
}
html.mdThemeIsDark #songfinderWidget .sf-time .sf-day {
  color: #ccc;
}
html.mdThemeIsDark #songfinderWidget .sf-empty {
  color: #999;
}
html.mdThemeIsDark #songfinderWidget .search-box {
  background: #222 !important;
  border-color: #444 !important;
}
html.mdThemeIsDark #songfinderWidget .search-box input {
  color: #f2f2f2 !important;
}
html.mdThemeIsDark #songfinderWidget .search-box input::placeholder {
  color: #888 !important;
}
html.mdThemeIsDark #songfinderWidget .search-clear:hover {
  background: #333 !important;
}
html.mdThemeIsDark #songfinderWidget .sf-loadmore-btn {
  background: #2a2a2a !important;
  color: #ddd !important;
}
html.mdThemeIsDark #songfinderWidget .sf-loadmore-btn:hover {
  background: #383838 !important;
}
html.mdThemeIsDark #songfinderWidget .sf-pill-btn {
  background: #262626 !important;
  color: #f2f2f2 !important;
  border-color: #444 !important;
}
html.mdThemeIsDark #songfinderWidget .sf-pill-btn:hover {
  background: #303030 !important;
  border-color: #565656 !important;
}
html.mdThemeIsDark #songfinderWidget .sf-pill-wrap:has(.sf-pill-menu:not([hidden])) .sf-pill-btn {
  background: #33294a !important;
  border-color: #6f5aa0 !important;
  box-shadow: 0 0 0 3px rgba(156,124,222,0.25) !important;
}