/* ============================================================
   Searchable select
   ------------------------------------------------------------
   Progressive enhancement for <select data-searchable> — the
   long, database-driven dropdowns (religion/caste, education,
   occupation, ID type, and the country/state/district/city
   cascade), where scrolling a native list of hundreds of
   options is unusable.

   The native <select> stays in the DOM and remains the single
   source of truth for the form: FormData, `required`, and
   reportValidity() all keep working untouched. It is made
   transparent rather than display:none, because a hidden
   required control makes the browser refuse to submit while
   reporting an unfocusable element — the same trap the file
   inputs on these forms hit.
   ============================================================ */

.ss-wrap { position: relative; }

/* Transparent, still focusable so validation bubbles anchor here. */
.ss-wrap > select.ss-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  margin: 0;
}

.ss-control {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.ss-control::after {
  content: '';
  margin-left: auto;
  flex: 0 0 auto;
  width: .7em; height: .7em;
  background: currentColor;
  opacity: .55;
  clip-path: polygon(50% 75%, 0 25%, 100% 25%);
}
.ss-control[aria-expanded="true"]::after { transform: rotate(180deg); }
.ss-control:disabled { cursor: not-allowed; opacity: .65; }
.ss-control .ss-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-control .ss-value.is-placeholder { opacity: .6; }

.ss-panel {
  position: absolute;
  z-index: 1060;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .15);
  padding: .5rem;
  display: none;
}
.ss-wrap.is-open .ss-panel { display: block; }

.ss-search {
  width: 100%;
  padding: .4rem .6rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .375rem;
  margin-bottom: .4rem;
  font: inherit;
}
.ss-search:focus { outline: 2px solid rgba(214, 31, 38, .35); outline-offset: 1px; }

.ss-list { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.ss-list li {
  padding: .4rem .6rem;
  border-radius: .375rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-list li[aria-selected="true"] { font-weight: 600; }
.ss-list li.is-active,
.ss-list li:hover { background: rgba(214, 31, 38, .1); }
.ss-empty { padding: .5rem .6rem; opacity: .6; }