/* Custom flag-icon country code dropdown.
   Renders locally-hosted flag SVGs instead of Unicode flag emoji, which
   don't render on Windows (and some headless Linux servers) regardless
   of internet access. Wraps a real <select> (kept for form submission and
   for the existing per-page JS that reads its .value / listens for
   'change'); the select itself is hidden and this widget drives it. */

/* style.css sets .input-group { overflow: hidden; } to clip the joined
   rounded corners of a two-part field. That also clips this dropdown's
   absolutely-positioned menu to the input-group's own height, making it
   render squeezed inside the field instead of popping out below it. */
.input-group.flag-input-group {
  overflow: visible;
}

.flag-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  background-image: none !important;
  cursor: pointer;
  user-select: none;
}

.flag-select-wrapper:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  border-color: #86b7fe;
}

.flag-select-native {
  display: none;
}

.flag-select-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.flag-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.flag-select-caret {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.6;
  flex: 0 0 auto;
}

.flag-select-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}

.flag-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 1055;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  max-height: 260px;
  overflow-y: auto;
  min-width: 200px;
  padding: 4px 0;
  margin: 0;
  list-style: none;
}

.flag-select-menu.show {
  display: block;
}

.flag-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.875rem;
}

.flag-select-option:hover,
.flag-select-option.active {
  background: #f1f3f9;
}