/*
 * Visual flag dropdown that enhances a <select class="phone-country-select">.
 * Built as a separate widget instead of relying on flag emoji inside
 * <option> text, because native <option> content is plain-text only (no
 * CSS/images) and the emoji has no flag glyph in Windows' default font
 * stack. Flag squares here come from the flag-icons CSS library (SVG
 * background images), so they render identically on every OS/browser.
 */
.fsel { position: relative; }
.fsel-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fsel-btn {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  font-size: 14px; font-family: 'Inter', sans-serif; text-align: left;
  border: 1.5px solid var(--line, #E8E4DB); border-radius: 11px; background: #fff; color: var(--ink, #1B1B20);
  cursor: pointer; transition: border-color .15s;
}
.fsel-btn:hover { border-color: #d8d3c6; }
.fsel.open .fsel-btn, .fsel-btn:focus-visible { outline: none; border-color: var(--orange, #EA6A12); }
.fsel-btn .fi { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.fsel-btn .fsel-btn-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-btn .fsel-caret { flex: none; width: 10px; height: 10px; opacity: .55; transition: transform .15s; }
.fsel.open .fsel-caret { transform: rotate(180deg); }

.fsel-panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: max(100%, 260px);
  background: #fff; border: 1px solid var(--line, #E8E4DB); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20,16,8,.14); overflow: hidden;
  display: none;
}
.fsel.open .fsel-panel { display: block; }

.fsel-search-wrap { padding: 8px; border-bottom: 1px solid var(--line, #E8E4DB); }
.fsel-search {
  width: 100%; padding: 8px 10px; font-size: 13.5px; font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--line, #E8E4DB); border-radius: 8px; color: var(--ink, #1B1B20);
}
.fsel-search:focus { outline: none; border-color: var(--orange, #EA6A12); }

.fsel-list { list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto; }
.fsel-option {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink, #1B1B20); cursor: pointer;
}
.fsel-option .fi { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.fsel-option .fsel-option-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-option:hover, .fsel-option.active { background: #FBF3E9; }
.fsel-option[aria-selected="true"] { background: #FCEBDA; font-weight: 600; }
.fsel-empty { padding: 14px 10px; font-size: 13px; color: var(--ink-soft, #55565f); text-align: center; }

@media (max-width: 640px) {
  .fsel-panel { left: 0; right: 0; width: auto; }
}