
.sfcs-wrapper{ position:relative; display:inline-block; font-family:inherit; }

/* Button defaults: like your screenshot (no background) */
.sfcs-trigger{
  display:flex; align-items:center; gap:10px;
  background: transparent; border:0;
  padding: 0;
  cursor:pointer; color:inherit; font:inherit;
}
.sfcs-trigger:focus-visible{ outline: 2px solid rgba(0,0,0,.25); outline-offset: 3px; }

.sfcs-flag{
  width: 22px; height: 22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  overflow:hidden;
  line-height:1;
  font-size: 18px;
  background: transparent;
}
.sfcs-value{ font-weight: 600; }
.sfcs-caret{ opacity:.8; transform: translateY(1px); }

/* Dropdown: pretty by default but still styleable from Elementor */
.sfcs-dropdown{
  position:absolute; top: calc(100% + 10px); right:0;
  width: 360px; max-width: 92vw;
  background:#fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
  padding: 18px;
  display:none;
  z-index: 9999;
}
.sfcs-wrapper.active .sfcs-dropdown{ display:block; }

.sfcs-search{
  width:100%;
  box-sizing:border-box;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.15);
  background:#fff;
  color:#111;
  outline:none;
  margin: 0 0 16px 0;
}
.sfcs-search::placeholder{ color: rgba(0,0,0,.45); }

.sfcs-list{ max-height: 360px; overflow:auto; padding-right: 4px; }

.sfcs-item{
  display:flex; align-items:center; gap:12px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  cursor:pointer;
  border-radius: 12px;
}
.sfcs-item:last-child{ border-bottom: 0; }
.sfcs-item:hover{ background: rgba(0,0,0,.04); }
.sfcs-item .sfcs-item-name{ flex:1; }
.sfcs-item .sfcs-item-code{ opacity:.6; font-size:.9em; }


/* Mobile: center trigger and dropdown like a modal-ish sheet */
@media (max-width: 767px){
  .sfcs-wrapper{ display:block; text-align:center; }
  .sfcs-trigger{ margin-left:auto; margin-right:auto; justify-content:center; }

  /* Center the dropdown under the trigger and keep it within viewport */
  .sfcs-dropdown{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(92vw, 420px);
  }

  /* Ensure search input is visually centered and full width */
  .sfcs-search{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
  }
}
