.tel { position: relative; display: flex; }
.tel input { min-width: 0; }
.tel-cc {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 13px 0 16px; border: 1px solid var(--zinc-300); border-right: 0;
  background: var(--white); color: var(--zinc-950); cursor: pointer;
  font-family: var(--sans); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color .3s;
}
.tel-cc svg { color: var(--zinc-500); transition: transform .3s; }
.tel-cc:hover { border-color: var(--zinc-500); }
.tel-cc:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(237, 29, 36, .12); }
.tel-cc[aria-expanded="true"] svg { transform: rotate(180deg); }
.tel-cc-code { display: inline-block; }
.tel-cc.flip .tel-cc-code { animation: tel-drop .45s cubic-bezier(.2, .9, .3, 1); }
.tel-cc.flip { animation: tel-ring .7s ease-out; }
@keyframes tel-drop { from { transform: translateY(9px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tel-ring {
  0% { box-shadow: 0 0 0 3px rgba(237, 29, 36, .4); border-color: var(--red); }
  100% { box-shadow: 0 0 0 3px rgba(237, 29, 36, 0); }
}

.tel-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: min(380px, 100%);
  background: var(--white); border: 1px solid var(--zinc-300);
  box-shadow: 0 24px 56px rgba(9, 9, 11, .16);
}
.tel-search {
  width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--zinc-200);
  font-family: var(--sans); font-size: 16px; color: var(--zinc-950); background: var(--white);
}
.tel-search::placeholder { color: var(--zinc-500); }
.tel-search:focus { outline: none; border-bottom-color: var(--red); }
.tel-list {
  margin: 0; padding: 6px 0; list-style: none;
  max-height: 316px; overflow-y: auto; overscroll-behavior: contain;
}
.tel-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 9px 16px; font-size: 14.5px; color: var(--zinc-950); cursor: pointer;
}
.tel-list li[hidden] { display: none; }
.tel-list li:hover, .tel-list li:focus-visible { background: #f1f2f4; outline: none; }
.tel-list li[aria-selected="true"] { background: var(--zinc-950); color: var(--white); }
.tel-list li[aria-selected="true"] .tel-dial { color: var(--zinc-400); }
.tel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-dial { flex: none; color: var(--zinc-500); font-weight: 600; font-variant-numeric: tabular-nums; }
.tel-first { border-top: 1px solid var(--zinc-200); margin-top: 6px; padding-top: 15px; }
.tel-list.searching .tel-first { border-top: 0; margin-top: 0; padding-top: 9px; }