/* Поле телефона: код страны в нативном select под декоративной подписью.
   Дублирует правила из sections.css (которые видит только BaseLayout) —
   этот файл подключён и в BaseLayout, и в TemplateLayout, поэтому стилизованное
   поле телефона выглядит одинаково на всех страницах, а не только на
   главной/контактах. */
.phone-field{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:8px}
.phone-country-display{display:flex;align-items:center;gap:6px;padding:0 12px;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.05)}
/* Настоящий select лежит поверх подписи: видна наша типографика, а браузеру
   достаётся нативный контрол с доступностью и мобильным пикером. */
.phone-country-select{position:absolute;inset:0 auto 0 0;width:var(--phone-country-width,7.5em);
  opacity:0;cursor:pointer;font:inherit}
/* Base look for the national number input itself — outside the lead-dialog
   modal there is no ambient `input[type=tel]` rule to pick up, so it must be
   fully self-styled rather than relying on a surrounding form's defaults. */
.phone-national-input{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:13px;
  border:1px solid rgba(255,255,255,.16);background:rgba(2,8,14,.45);color:#f4faff;
  font:400 16px/1.4 Inter,system-ui,sans-serif;outline:none}
.phone-national-input::placeholder{color:#7890a3}
.phone-national-input:focus{border-color:rgba(120,190,255,.55)}
/* Кольцо фокуса рисуется на контейнере: у прозрачного select собственное
   кольцо не видно, и клавиатурный пользователь терял бы позицию. */
.phone-field:focus-within{outline:2px solid rgba(120,190,255,.75);outline-offset:2px;border-radius:16px}
.phone-field:focus-within .phone-country-display{border-color:rgba(120,190,255,.55)}