/* Умный ввод телефона — крем/clay под стиль страницы */

.phone-field { position: relative; }

/* строка «input + кнопка страны»: триггер центрируется по input, а не по label+input+error */
.phone-control { position: relative; display: flex; align-items: center; }
.phone-control #f-phone { flex: 1 1 auto; min-width: 0; }

#f-phone { padding-right: 100px; font-size: 16px; }

/* компактная кнопка страны/флага + chevron */
.phone-country {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 6px 4px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-small);
  line-height: 1.2;
  cursor: pointer;
}
.phone-country:focus:not(:focus-visible), .phone-country.is-pointer-focus { outline: none; box-shadow: none; }
.phone-country:hover { background: var(--color-paper-alt, #f2eee5); }
.phone-country:focus-visible:not(.is-pointer-focus) { outline: 2px solid var(--color-clay); outline-offset: 2px; }
.phone-country__chevron {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-paper-alt, #f2eee5);
}
.phone-country__chevron::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-clay);
  border-bottom: 1.5px solid var(--color-clay);
  transform: rotate(45deg);
}
.phone-country[aria-expanded="true"] .phone-country__chevron::after { top: 9px; transform: rotate(225deg); }

/* флаг или аккуратный ISO-бейдж-круг; без эмодзи и битых картинок */
.phone-flag {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-ink-20);
  background: var(--color-paper-alt, #f2eee5);
  overflow: hidden;
  color: var(--color-ink-60);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Фиксированный квадрат исключает смещение SVG по строке/внутренней сетке. */
.phone-flag img,
body.sign-page .location-detected__flag img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
}
body.sign-page .location-detected__flag { position: relative; }
/* Те же пропорции эмблем и подложки, что у утверждённых флагов каталога. */
.phone-flag:has(img[src$="/it.svg"]), .location-detected__flag:has(img[src$="/it.svg"]) { background: linear-gradient(90deg,#009246 33.33%,#fff 33.33% 66.67%,#ce2b37 66.67%); }
.phone-flag:has(img[src$="/fr.svg"]), .location-detected__flag:has(img[src$="/fr.svg"]) { background: linear-gradient(90deg,#002395 33.33%,#fff 33.33% 66.67%,#ed2939 66.67%); }
.phone-flag:has(img[src$="/ie.svg"]), .location-detected__flag:has(img[src$="/ie.svg"]) { background: linear-gradient(90deg,#169b62 33.33%,#fff 33.33% 66.67%,#ff883e 66.67%); }
.phone-flag:has(img[src$="/be.svg"]), .location-detected__flag:has(img[src$="/be.svg"]) { background: linear-gradient(90deg,#000 33.33%,#ffe936 33.33% 66.67%,#ed2939 66.67%); }
.phone-flag:has(img[src$="/ro.svg"]), .location-detected__flag:has(img[src$="/ro.svg"]) { background: linear-gradient(90deg,#002b7f 33.33%,#fcd116 33.33% 66.67%,#ce1126 66.67%); }
.phone-flag:has(img[src$="/mx.svg"]), .location-detected__flag:has(img[src$="/mx.svg"]) { background: linear-gradient(90deg,#006847 33.33%,#fff 33.33% 66.67%,#ce1126 66.67%); }
.phone-flag:has(img[src$="/ca.svg"]), .location-detected__flag:has(img[src$="/ca.svg"]) { background: linear-gradient(90deg,#d52b1e 23.45%,#fff 23.45% 76.55%,#d52b1e 76.55%); }
.phone-flag:has(img[src$="/ge.svg"]), .location-detected__flag:has(img[src$="/ge.svg"]) { background: #fff; }
.phone-flag img:is([src$="/be.svg"],[src$="/fr.svg"],[src$="/ie.svg"],[src$="/it.svg"],[src$="/ro.svg"],[src$="/mx.svg"],[src$="/ca.svg"],[src$="/ge.svg"]),
body.sign-page .location-detected__flag img:is([src$="/be.svg"],[src$="/fr.svg"],[src$="/ie.svg"],[src$="/it.svg"],[src$="/ro.svg"],[src$="/mx.svg"],[src$="/ca.svg"],[src$="/ge.svg"]) { object-fit: contain; }
.phone-flag img[src$="/cn.svg"], .phone-flag img[src$="/my.svg"], .phone-flag img[src$="/sg.svg"] { object-position: left center; }

/* выпадающий список: absolute-overlay, не расширяет форму, вписывается в viewport 360 */
.phone-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-width: 360px;
  padding: 6px;
  border: 1px solid var(--color-ink-20);
  border-radius: 14px;
  background: var(--color-paper);
  box-shadow: 0 16px 32px rgba(8, 17, 24, 0.14);
}
.phone-menu[hidden] { display: none; }
.phone-menu--up { top: auto; bottom: calc(100% + 6px); }
.phone-menu__search {
  width: 100%;
  min-height: 44px;
  margin-bottom: 4px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-ink-20);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-paper);
  outline: none;
}
.phone-menu__search:focus { border-color: var(--color-clay); }
.phone-menu__list {
  max-height: 264px;
  scroll-snap-type: y proximity;
  scroll-padding-block: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.phone-menu__option {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-small);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.phone-menu__option:hover, .phone-menu__option[aria-pressed="true"] { background: var(--color-paper-alt, #f2eee5); }
.phone-menu__option:focus-visible { outline: 2px solid var(--color-clay); outline-offset: -2px; }
.phone-menu__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-menu__dial { flex: none; color: var(--color-ink-60); font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .phone-menu { left: 0; right: 0; max-width: none; }
  #f-phone { padding-right: 108px; }
}

/* Единая маска для фона и SVG: без внутренней рамки, среза снизу и справа. */
body.sign-page .phone-flag,
body.sign-page .location-detected__flag {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  isolation: isolate;
}
body.sign-page .phone-flag img,
body.sign-page .location-detected__flag img {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
}