/* src/components/PhoneInput.css */
.phone-input { display: flex; align-items: stretch; gap: 6px; }
.phone-input__btn {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border, #d0d5dd);
  background: var(--surface-2, #f7f8fa);
  color: var(--text, inherit);
  font: inherit; font-size: 13px; font-weight: 600;
}
.phone-input__btn:hover { background: var(--surface-3, #eef0f3); }
.phone-input__field { flex: 1 1 auto; min-width: 0; }

.phone-input__panel {
  position: absolute; z-index: 100000; display: none;
  width: 280px; max-width: calc(100vw - 24px);
  background: var(--surface, #fff);
  color: var(--text, inherit);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  overflow: hidden;
}
.phone-input__panel.open { display: block; }
.phone-input__search {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--border, #e4e7ec);
  background: transparent; color: inherit; font: inherit; outline: none;
}
.phone-input__list { max-height: 280px; overflow-y: auto; }
.phone-input__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; cursor: pointer; font-size: 13px;
}
.phone-input__opt:hover, .phone-input__opt:focus {
  background: var(--surface-2, #f2f4f7); outline: none;
}
.phone-input__opt-name { flex: 1 1 auto; }
.phone-input__opt-dial { color: var(--text-muted, #667085); font-variant-numeric: tabular-nums; }
.phone-input__opt-iso { color: var(--text-muted, #98a2b3); font-size: 11px; letter-spacing: .04em; }
.phone-input__empty { padding: 14px 12px; color: var(--text-muted, #667085); font-size: 13px; }