/* ═══ SEARCHABLE SELECT — type-to-filter dropdown replacement ═══
   Shared styles for the wrapper that `assets/scripts/searchable-
   select.js` builds around every `<select data-searchable>`. Include
   this stylesheet on any page that uses the pattern (books, packaging,
   labels …). Kept out of the calculator-specific CSS files so a new
   page can adopt the widget with one link tag. Uses the shared design
   tokens (--forest-mid / --border-light / etc.) that `base.html.twig`
   already exposes. */

.ss-wrap {
  position: relative;
}
.ss-input {
  padding-right: 1.8rem !important;
}
.ss-clear {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: none; background: none;
  color: var(--text-muted); font-size: .7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .12s, color .12s;
}
.ss-clear:hover { background: #eee; color: var(--text); }
.ss-dropdown {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 50;
  max-height: 260px; overflow-y: auto;
  background: var(--white);
  border: 1.5px solid var(--forest-mid);
  border-top: none;
  border-radius: 0 0 7px 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  scrollbar-width: thin;
}
.ss-group {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  padding: .45rem .7rem .2rem; background: #f6f8f4;
  border-top: 1px solid var(--border-light);
  position: sticky; top: 0;
}
.ss-group:first-child { border-top: none; }
.ss-option {
  padding: .38rem .7rem; font-size: .84rem; cursor: pointer;
  transition: background .08s;
}
.ss-option:hover, .ss-option.ss-active {
  background: var(--forest-light);
}
.ss-option.ss-selected {
  font-weight: 600; color: var(--forest-mid);
}
.ss-option mark {
  background: #fef08a; color: inherit;
  border-radius: 2px; padding: 0 1px;
}
.ss-empty {
  padding: .7rem; text-align: center;
  color: var(--text-muted); font-size: .82rem;
}