/* ==========================================================================
   Bory Home — pole telefonu z wyborem kraju (komponent `bh-phone`)
   Osobny arkusz, bo komponent żyje w trzech miejscach o różnych zestawach
   stylów: w formularzach motywu (karta modelu, konfigurator, kontakt),
   w czacie asystenta AI i na stronach ofert, które nie ładują `components.css`
   — tam 7 IX 2026 przełącznik kraju wypadł nad pole zamiast siedzieć w nim.
   Ładowany po `components.css` w serwisie i po tokenach na ofertach.
   ========================================================================== */

/* --- Pole telefonu z wyborem kraju ---------------------------------------- */

/* Przełącznik siedzi *wewnątrz* ramki pola tekstowego, a nie obok niej: ramkę,
   tło, promień i podświetlenie fokusa rysuje ten sam arkusz co pozostałe pola
   formularza, więc komponent wygląda u siebie i w karcie modelu, i w
   konfiguratorze, bez powielania stylów pod każdy z nich. Miejsce na przycisk
   robi dopełnienie z lewej — skrypt dopasowuje je do szerokości kierunkowego
   (`+48` jest węższe niż `+380`), a wartość niżej jest tym, co widać, zanim
   skrypt policzy pierwszy raz. */
/* Komponent bywa poza `base.css` (czat na stronach ofert) — własne resety. */
:where(.bh-phone, .bh-phone *, .bh-phone *::before, .bh-phone *::after) { box-sizing: border-box; }
:where(.bh-phone) :where(button, input) { font: inherit; color: inherit; margin: 0; }
.bh-phone { position: relative; --bh-phone-w: 82px; }
/* Zapis z dwiema klasami wygrywa z `.bh-lead__input` i `.bh-cfg__field input`
   bez `!important` — te arkusze ładują się później i ustawiają dopełnienie
   ze wszystkich stron. */
.bh-phone .bh-phone__number { padding-left: var(--bh-phone-w); }

.bh-phone__pick {
  position: absolute;
  left: 1px; top: 1px; bottom: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 0 10px;
  background: none;
  border: 0;
  border-right: 1px solid var(--bh-border-strong);
  /* Odrobinę mniej niż ramka pola (11–12 px), bo przycisk siedzi o piksel
     w środku. */
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  font: 500 13px/1 var(--bh-font);
  color: var(--bh-text-3);
}
.bh-phone__pick:hover { color: var(--bh-ink); }
.bh-phone__pick:focus-visible { outline: 2px solid var(--bh-accent-strong); outline-offset: -2px; }

/* Flaga: prostokąt 20×14 z delikatną obwódką, żeby biel (Polska, Szwajcaria)
   nie zlewała się z tłem pola. */
.bh-phone__flag {
  flex: none;
  display: block;
  width: 20px; height: 14px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(12, 26, 34, .12);
}
.bh-phone__flag svg { display: block; width: 100%; height: 100%; }

.bh-phone__dial { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bh-phone__caret {
  flex: none;
  width: 7px; height: 5px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: .55;
  transition: transform var(--bh-t-base);
}
.bh-phone__pick[aria-expanded="true"] .bh-phone__caret { transform: rotate(180deg); }

/* --- Lista krajów --- */

.bh-phone__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 246px;
  max-width: 92vw;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-md);
  box-shadow: var(--bh-shadow-menu);
  padding: 8px;
}
/* Pole telefonu bywa ostatnie w wierszu (konfigurator) — wtedy lista rozwija
   się w lewo, żeby nie wychodziła poza kartę formularza. */
.bh-phone--end .bh-phone__menu { left: auto; right: 0; }

/* Formularz stoi nisko w karcie, a karta przycina zawartość — przy ciasnym
   dole skrypt rozwija listę w górę (patrz `place()` w assets/js/phone.js). */
.bh-phone--up .bh-phone__menu { top: auto; bottom: calc(100% + 6px); }

.bh-phone__search { display: block; margin: 0 0 6px; }
/* Dwie klasy, bo konfigurator styluje `.bh-cfg__field input` i ładuje się
   po tym arkuszu — bez tego wyszukiwarka krajów dostałaby wygląd pola
   formularza. */
.bh-phone .bh-phone__search input {
  width: 100%;
  box-sizing: border-box;
  font: 400 13px/1 var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-surface-alt);
  border: 1px solid var(--bh-border);
  border-radius: 9px;
  padding: 9px 10px;
}
.bh-phone .bh-phone__search input:focus { border-color: var(--bh-accent); outline: none; }

.bh-phone__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bh-phone__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: 400 13px/1.2 var(--bh-font);
  color: var(--bh-ink);
}
.bh-phone__opt:hover { background: var(--bh-surface-alt); }
.bh-phone__opt:focus-visible { outline: 2px solid var(--bh-accent-strong); outline-offset: -2px; }
.bh-phone__opt[aria-selected="true"] { background: var(--bh-accent-bg); font-weight: 600; }
.bh-phone__name { flex: 1; min-width: 0; }
.bh-phone__code { flex: none; color: var(--bh-text-2); font-variant-numeric: tabular-nums; }

.bh-phone__empty { font: 400 12.5px/1.4 var(--bh-font); color: var(--bh-text-2); margin: 0; padding: 8px; }

/* Na telefonie 16 px w wyszukiwarce krajów — poniżej iOS przybliża stronę
   przy wejściu w pole (ta sama reguła stoi w mobile.css dla całego serwisu). */
@media (max-width: 720px) {
  .bh-phone .bh-phone__search input { font-size: 16px; padding: 9px 10px; }
}