/* Searchable country picker (country-picker.js). Uses the page's colour tokens when present. */
.cp { position: relative; flex: none; min-width: 0; }
.cp-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: var(--cp-h, 40px);
  padding: 0 34px 0 12px; border: 1px solid var(--border, #e6e6ee); border-radius: var(--cp-r, 10px);
  background: var(--surface, #fff); color: var(--text, #17172a); font: inherit; font-size: inherit;
  cursor: pointer; white-space: nowrap; text-align: start; position: relative; font-variant-numeric: tabular-nums;
}
.cp-btn:hover { border-color: var(--border-strong, #d6d6e2); }
.cp-btn:focus-visible, .cp.open .cp-btn { outline: none; border-color: var(--primary, #6d5df5); box-shadow: 0 0 0 3px var(--ring, rgb(109 93 245 / 18%)); }
.cp-val { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.cp-name { overflow: hidden; text-overflow: ellipsis; }
.cp-muted { color: var(--muted, #8b8ba3); }
.cp-flag { font-size: 1.15em; line-height: 1; }
.cp-caret { position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 1.8px solid var(--muted, #8b8ba3); border-bottom: 1.8px solid var(--muted, #8b8ba3); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.cp.open .cp-caret { transform: translateY(-30%) rotate(225deg); }

.cp-pop {
  position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; width: max(100%, 300px); max-width: min(360px, calc(100vw - 24px));
  background: var(--surface, #fff); border: 1px solid var(--border, #e6e6ee); border-radius: 12px;
  box-shadow: 0 16px 40px rgb(20 20 50 / 16%), 0 2px 6px rgb(20 20 50 / 6%); overflow: hidden; animation: cp-in .12s ease-out;
}
.cp.up .cp-pop { top: auto; bottom: calc(100% + 6px); }
@keyframes cp-in { from { opacity: 0; transform: translateY(-3px); } }
.cp-search { padding: 8px; border-bottom: 1px solid var(--border, #e6e6ee); }
.cp-search input {
  width: 100%; height: 36px; padding: 0 10px 0 32px; border: 1px solid var(--border, #e6e6ee); border-radius: 8px;
  background: var(--surface-2, #f7f7fa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8ba3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px center / 15px no-repeat;
  color: var(--text, #17172a); font: inherit; font-size: 14px; min-height: 0;
}
[dir=rtl] .cp-search input { padding: 0 32px 0 10px; background-position: calc(100% - 10px) center; }
.cp-search input:focus { outline: none; border-color: var(--primary, #6d5df5); background-color: var(--surface, #fff); }
.cp-list { list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.cp-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text, #17172a); }
.cp-list li.on { background: var(--surface-2, #f4f3fe); }
.cp-list li[aria-selected=true] { color: var(--primary-text, #5746e3); font-weight: 600; }
.cp-list li[aria-selected=true]::after { content: ""; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-inline-start: 4px; flex: none; }
.cp-list .cp-name { flex: 1; min-width: 0; white-space: nowrap; }
.cp-dial { color: var(--muted, #8b8ba3); font-variant-numeric: tabular-nums; font-size: 13px; }
.cp-none { color: var(--muted, #8b8ba3); cursor: default !important; justify-content: center; padding: 18px !important; }

/* Phones: the list becomes a sheet at the bottom of the screen. */
@media (max-width: 560px) {
  .cp-pop, .cp.up .cp-pop {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: none;
    border-radius: 16px; box-shadow: 0 -8px 40px rgb(20 20 50 / 25%);
  }
  .cp-list { max-height: 55vh; }
  .cp-search input { height: 42px; font-size: 16px; }
  .cp-list li { padding: 11px 12px; font-size: 16px; }
}
.cp-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }