/* Лендинг Envoy v4: поле телефона с кнопкой страны и список стран (landing-phone-field.js, landing-country-list.js).
   Поле: одна рамка как у остальных полей, внутри слева кнопка (флаг 20×15, код, стрелка) и тонкая черта, справа номер.
   Подсказка в пустом поле светло-серым образцом номера без скобок. Список: тот же белый поповер, тень, радиус
   и анимация, что у календаря и городов (landing-cal.css), строки 44, сверху строка поиска.
   Флаг: скругление 2 и сплошная светлая обводка поверх края, чтобы белые флаги не сливались с фоном. */

.tel {
  display: flex; align-items: stretch; min-height: 52px; border-radius: var(--r-md);
  border: 1px solid var(--field-line); background: var(--sheet);
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.tel:focus-within, .tel:has(.tel-cc[aria-expanded="true"]) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tel:has(input[aria-invalid="true"]) { border-color: var(--err); }
.tel:has(input[aria-invalid="true"]):focus-within { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.f .tel input {
  flex: 1 1 auto; min-width: 0; width: auto; min-height: 50px; padding: 0 16px 0 12px;
  border: 0; border-radius: 0 var(--r-md) var(--r-md) 0; background: transparent; box-shadow: none;
  font-variant-numeric: tabular-nums;
}
.f .tel input:focus-visible { box-shadow: none; }
.tel input::placeholder { color: #A8A6A0; opacity: 1; }

.tel-cc {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 0 12px 0 16px; border: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: none;
  color: var(--ink); font: 400 17px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* тонкая черта между кнопкой и номером */
.tel-cc::after { content: ""; position: absolute; right: 0; top: 14px; bottom: 14px; width: 1px; background: #DAD7D0; }
/* подложка при наведении и фокусе с клавиатуры: скруглённая плашка внутри поля */
.tel-cc::before {
  content: ""; position: absolute; inset: 6px 4px 6px 6px; border-radius: var(--r-sm); background: rgb(29 29 31 / 0);
  transition: background-color var(--t-hover) var(--ease);
}
.tel-cc > * { position: relative; }
.tel-cc:focus-visible { outline: none; }
.tel-cc:focus-visible::before { background: rgb(29 29 31 / 0.07); box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (hover: hover) and (pointer: fine) { .tel-cc:hover::before { background: rgb(29 29 31 / 0.06); } }
.tel-cc .chev { width: 10px; height: 10px; margin-left: -2px; fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-hover) var(--ease); }
.tel-cc[aria-expanded="true"] .chev { transform: rotate(180deg); }

.flag {
  flex: none; display: block; width: 20px; height: 15px; border-radius: 2px; object-fit: cover;
  outline: 1px solid #DAD7D0; outline-offset: -1px; background: #EFEDE8;
}

/* Поповер стран: белый, как у календаря и городов */
.ccp {
  position: fixed; z-index: 60; left: 8px; top: 8px; width: 320px; display: flex; flex-direction: column;
  border-radius: var(--r-lg); color: var(--ink); background: #FFFFFF; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(29 29 31 / 0.06), 0 2px 6px -2px rgb(0 0 0 / 0.10), 0 16px 36px -12px rgb(0 0 0 / 0.26);
  transform-origin: var(--origin, top center);
  --band: #E9E6DF;
}
.ccp[hidden] { display: none; }
.ccp.enter { animation: menu-in 200ms var(--ease) both; }
.ccp.leave { animation: menu-out var(--t-state) var(--ease) both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ccp.enter, .ccp.leave, .tel-cc .chev { animation: none; transition: none; } }

.ccp-search {
  flex: none; position: relative; display: flex; align-items: center; height: 56px; padding: 6px 6px 0;
}
.ccp-search svg { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin-top: 3px; transform: translateY(-50%); fill: var(--graphite); pointer-events: none; }
.ccp-search input {
  width: 100%; height: 44px; padding: 0 12px 0 40px; border: 0; border-radius: var(--r-sm); outline: none;
  background: #F5F3EF; color: var(--ink); font: 400 16px/1.3 var(--font);
}
.ccp-search input::placeholder { color: #8E8C86; opacity: 1; }
/* фокус в поиске при открытии всегда: без тёмной рамки, только чуть темнее подложка */
.ccp-search input:focus { background: #F1EFEA; }

.ccp-list { margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.ccp-list.scroll { padding: 6px 0 6px 6px; }
.ccp-list::-webkit-scrollbar { width: 10px; background: transparent; }
.ccp-list::-webkit-scrollbar-track { background: transparent; margin: 8px 0 12px; }
.ccp-list::-webkit-scrollbar-thumb { min-height: 40px; border: 3px solid transparent; border-radius: 999px; background: rgb(29 29 31 / 0.28); background-clip: padding-box; }
.ccp-list::-webkit-scrollbar-thumb:hover { background-color: rgb(29 29 31 / 0.42); }
@supports (-moz-appearance: none) { .ccp-list { scrollbar-width: thin; scrollbar-color: rgb(29 29 31 / 0.28) transparent; } }
.ccp-list li[role="option"] {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: var(--r-sm);
  font: 400 16px/1 var(--font); color: var(--ink); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ccp-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.ccp-code { flex: none; color: var(--graphite); font-size: 15px; font-variant-numeric: tabular-nums; }
.ccp-check, .ccp-gap { flex: none; display: block; width: 16px; height: 16px; margin-left: -4px; }
.ccp-check path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ccp-list li.cur .ccp-name { font-weight: 600; }
.ccp-list li[aria-selected="true"] { background: var(--band); }
.ccp-list li.none { color: var(--graphite); cursor: default; }
.ccp-sep { height: 1px; margin: 6px 12px; background: #E6E3DC; list-style: none; }