/* TomSelect Smart Cursor Logic */
.ts-dropdown .option {
  text-align: left !important;
}

/* 
  SMART DROPDOWN:
  These styles only apply if the dropdown was initialized 
  via createSearchableDropdown() which adds the .smart-cursor-mode class.
  Ghost Input Mode:
  * This enforces the "Either Selection OR Search" logic visually.
  * We only hide the input if an item is selected (.has-items).
    If the field is empty, the input stays visible so the placeholder shows.
*/

/* STATE 1: NOT TYPING (Default) 
  The input exists (to capture keystrokes) but floats above the text 
  without taking up any physical space. This allows the selected text
  to flow naturally (even multi-line). 
*/
.ts-wrapper.smart-cursor-mode.has-items:not(.typing) .ts-control input {
  position: absolute !important;
  opacity: 0 !important; /* Completely invisible */
  width: 1px !important; /* Minimal footprint */
  height: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap;
  left: 0; /* Keep it nearby */
}

/* STATE 2: TYPING
  As soon as the JS adds the .typing class, we restore the input 
  to its normal state so the user can see what they are searching.
  (The JS simultaneously clears the Selected Item, so no conflict occurs).
*/
.ts-wrapper.smart-cursor-mode.typing .ts-control input {
  position: static !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 4px;
  caret-color: auto !important; /* Ensure cursor is visible */
}

/* 
  CUSTOM FLAG STYLING 
  Make the flags look softer and nicer in the dropdown.
*/
.fi {
  border-radius: 3px; /* Rounds the corners */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Adds a subtle depth/pop */    
  width: 1.33em !important; 
  line-height: 1em !important;
  background-size: cover; /* Ensure the flag fills the curve */
}