/* Reusable Country picker (see country-picker.js) — hardcoded colors, not
   page CSS variables, so it looks the same and needs no extra wiring on
   whichever page includes it (signup, New Project modal, etc.). */
.qs-country-picker { position: relative; width: 100%; }

.qs-country-trigger {
  width: 100%; height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border: 1.5px solid #e2e8f0; border-radius: 7px;
  background: #fff; cursor: pointer; font-size: 13.5px; color: #111827;
  text-align: left; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.qs-country-trigger:hover { border-color: #94a3b8; }
.qs-country-trigger.open { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.qs-country-trigger-flag { display: inline-flex; flex-shrink: 0; }
.qs-country-trigger-flag img { display: block; border-radius: 2px; }
.qs-country-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-country-trigger-text.qs-country-placeholder { color: #9ca3af; }
.qs-country-chevron { font-size: 11px; color: #9ca3af; flex-shrink: 0; transition: transform .15s; }
.qs-country-trigger.open .qs-country-chevron { transform: rotate(180deg); }

.qs-country-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 4000;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  max-height: 280px; display: flex; flex-direction: column; overflow: hidden;
}
.qs-country-search-wrap { position: relative; padding: 8px; border-bottom: 1px solid #f0f4f8; flex-shrink: 0; }
.qs-country-search-wrap i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #9ca3af; pointer-events: none; }
.qs-country-search {
  width: 100%; height: 32px; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 0 10px 0 28px; font-size: 12.5px; outline: none; font-family: inherit;
}
.qs-country-search:focus { border-color: #2563eb; }
/* flex:1 + min-height:0 — without min-height:0 a flex child can't shrink
   below its content height, so the list overflowed the dropdown's own
   max-height instead of scrolling internally. */
.qs-country-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
.qs-country-opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px;
  cursor: pointer; font-size: 12.5px; color: #111827;
}
.qs-country-opt:hover { background: #f1f5f9; }
.qs-country-opt img { display: block; border-radius: 2px; flex-shrink: 0; }
.qs-country-empty { padding: 16px; text-align: center; color: #9ca3af; font-size: 12px; }

/* Dark theme (Dashboard shares data-theme="dark" with other pages) */
html[data-theme="dark"] .qs-country-trigger { background: var(--surface, #111214); border-color: var(--border, #232427); color: var(--text, #cfcfd3); }
html[data-theme="dark"] .qs-country-dropdown { background: var(--surface, #111214); border-color: var(--border, #232427); }
html[data-theme="dark"] .qs-country-search-wrap { border-bottom-color: var(--border-2, #1a1b1d); }
html[data-theme="dark"] .qs-country-search { background: var(--bg, #08090a); border-color: var(--border, #232427); color: var(--text, #cfcfd3); }
html[data-theme="dark"] .qs-country-opt { color: var(--text, #cfcfd3); }
html[data-theme="dark"] .qs-country-opt:hover { background: var(--border-2, #1a1b1d); }