/* D190 (Klient.dc.html, P-KL_{M,T,K}_element-klient-stany, E0-21_*_telefon-zajety-blokada): the element
   „Klient” (the phone first) and the block of a taken number in the customer form. */
.fjn-kl { display: flex; flex-direction: column; gap: 6px; }
.fjn-kl__label { font-size: 15px; font-weight: 700; }
.fjn-kl__field {
  position: relative; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 6px; box-sizing: border-box;
  border: 1px solid #AEB5BE; border-radius: 8px; background: var(--fjn-surface);
}
.fjn-kl__field.is-on, .fjn-kl__field:focus-within { border: 2px solid var(--fjn-brand-600); padding: 0 5px; }
.fjn-kl__field.is-error { border: 2px solid #B3261E; padding: 0 5px; }
.fjn-kl__cc > summary {
  height: 44px; padding: 0 8px; border-radius: 6px; background: #F4F5F6; display: flex; align-items: center; gap: 6px;
  list-style: none; cursor: pointer; font: 400 15px var(--fjn-font-mono); color: var(--fjn-text);
}
.fjn-kl__cc > summary::-webkit-details-marker { display: none; }
.fjn-kl__cc > summary b { font-size: 12px; color: #454D57; }
.fjn-kl__list {
  position: absolute; left: 0; top: 60px; z-index: 20; width: min(360px, 100%); max-height: 320px; overflow-y: auto;
  border: 1px solid #AEB5BE; border-radius: 10px; background: var(--fjn-surface); box-shadow: 0 6px 18px rgba(21, 24, 28, .14);
}
.fjn-kl__search { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid #EDEFF1; }
.fjn-kl__search input { flex: 1; min-width: 0; border: 0; outline: 0; font: 15px var(--fjn-font); background: none; }
.fjn-kl__country { height: 48px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #F1F2F4; cursor: pointer; }
.fjn-kl__country input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fjn-kl__country:has(input:checked) {  /* 4.34.1: only the checked country */ background: #F1F5FB; font-weight: 700; }
.fjn-kl__country[hidden] { display: none; }
.fjn-kl__iso { width: 28px; font: 700 12px var(--fjn-font-mono); color: #454D57; }
.fjn-kl__cname { flex: 1; font-size: 15px; }
.fjn-kl__dial { font: 400 15px var(--fjn-font-mono); }
.fjn-kl__input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; font: 700 17px var(--fjn-font-mono); color: var(--fjn-text); }
.fjn-kl__input::placeholder { font-weight: 400; font-size: 16px; color: #6B737D; }
.fjn-kl__input:focus, .fjn-kl__input:focus-visible { outline: none; box-shadow: none; }  /* the frame of the field shows the focus */
.fjn-kl__x { width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; color: var(--fjn-text); cursor: pointer; flex: none; }
.fjn-kl__hint { margin: 0; font-size: 13px; color: #454D57; }
.fjn-kl__error { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #B3261E; }
.fjn-kl__card {
  min-height: 64px; padding: 8px 6px 8px 12px; display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  border: 2px solid var(--fjn-brand-600); border-radius: 10px; background: #F1F5FB;
}
.fjn-kl__ini { width: 44px; height: 44px; border-radius: 22px; background: #E3ECF7; color: #173F6F; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.fjn-kl__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fjn-kl__who b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fjn-kl__who small { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1B6B41; }
.fjn-kl__remove { width: 56px; height: 56px; border: 0; border-radius: 8px; background: none; display: flex; align-items: center; justify-content: center; color: var(--fjn-text); cursor: pointer; flex: none; }
.fjn-kl__new { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid #D8DCE1; border-radius: 10px; }
.fjn-kl__newhead { display: flex; flex-direction: column; gap: 2px; }
.fjn-kl__newhead b { font-size: 16px; }
.fjn-kl__newhead span { font-size: 13px; color: #454D57; }
.fjn-kl__seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.fjn-kl__kind { height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #D8DCE1; border-radius: 8px; background: var(--fjn-surface); font: 16px var(--fjn-font); color: var(--fjn-text); cursor: pointer; }
.fjn-kl__kind.is-on { background: var(--fjn-brand-600); border-color: var(--fjn-brand-600); color: #fff; font-weight: 700; }
.fjn-kl__company { display: block; }  /* D192: the fragment „NIP + Pobierz z GUS” over the whole width */
.fjn-kl .fjn-input { height: 56px; font-size: 16px; }
.fjn-tbk__banner--err { background: #FBE3E1; color: #8C1D18; gap: 10px; padding: 10px 14px; }
.fjn-tbk__banner--err p { color: #8C1D18; }
@media (max-width: 767px) { .fjn-kl__seg { max-width: none; } }
/* E0-21: the number of another customer */
.fjn-phone-taken { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--fjn-danger-100); color: #8C1D18; font-size: 13px; line-height: 18px; }
.fjn-phone-taken > .fjn-icon { flex: none; margin-top: 1px; }
.fjn-phone-taken div { display: flex; flex-direction: column; gap: 4px; }
.fjn-phone-taken b { font-weight: 700; }
.fjn-phone-taken a { color: #8C1D18; font-weight: 700; text-decoration: underline; }
.fjn-kl__search input:focus, .fjn-kl__search input:focus-visible { outline: none; box-shadow: none; }
.fjn-kl__search input::-webkit-search-cancel-button { display: none; }
.fjn-kl__pair { display: flex; flex-direction: column; gap: inherit; }
@media (min-width: 768px) { .fjn-kl__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* D245 the box „Nowy klient” of the intake step 1: the label red on an error, the message of D190
   (a taken number, zrzut 15), „Pobierz z GUS” under the NIP on T, „Kod pocztowy” 160 px (M: 140 px) */
.fjn-kl--intake .fjn-kl__label.is-error { color: #B3261E; }
.fjn-kl--intake .fjn-kl__new { padding: 0; border: 0; border-radius: 0; }  /* in the box itself, no frame */
.fjn-kl__taken { margin: 0; font-size: 13px; font-weight: 700; line-height: 18px; color: #B3261E; }
.fjn-kl__taken a { color: inherit; text-decoration: underline; }
.fjn-kl--intake .fjn-ng__fields { grid-template-columns: 140px minmax(0, 1fr); }
@media (min-width: 768px) { .fjn-kl--intake .fjn-ng__fields { grid-template-columns: 160px minmax(0, 1fr); } }
@media (min-width: 768px) and (max-width: 1279px) {
  .fjn-kl--intake .fjn-ng__row { flex-direction: column; }
  .fjn-kl--intake .fjn-ng__nipin { flex: none; }
}
/* D245 M: the NIP of 10 digits visible in full beside „Pobierz z GUS” (zrzut M_13) */
@media (max-width: 767px) {
  .fjn-kl--intake .fjn-ng__btn { padding: 0 8px; }
  .fjn-kl--intake .fjn-ng__nipin { padding: 0 8px; }
  .fjn-kl--intake .fjn-ng__nipin:not(:placeholder-shown), .fjn-kl--intake .fjn-ng__nipin:focus,
  .fjn-kl--intake .fjn-ng__nipin[aria-invalid="true"] { padding: 0 7px; }
}