/* Minimal styles for searchable select */
.ss-root { position: relative; }
.ss-toggle { width: 100%; text-align: left; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; }
.ss-root.open .ss-toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ss-panel { position: absolute; left: 0; right: 0; z-index: 20; border: 1px solid #d1d5db; border-top: none; background: #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,.08); display: none; }
.ss-root.open .ss-panel { display: block; }
.ss-search { width: 100%; padding: 8px 10px; border: none; border-bottom: 1px solid #e5e7eb; outline: none; }
.ss-list { max-height: 240px; overflow: auto; list-style: none; margin: 0; padding: 6px 0; }
.ss-option { padding: 8px 12px; cursor: pointer; }
.ss-option:hover, .ss-option.selected { background: #f3f4f6; }


body.rtl .ss-root { direction: rtl; }
body.rtl .ss-toggle, body.rtl .ss-search, body.rtl .ss-option {
  text-align: right;
}
body.rtl .ss-list { direction: rtl; }