/* telefon.css — pole telefónu (telefon.js): predvoľba krajiny s vlajkou + národné číslo.
   Jedno CSS pre web, administráciu aj spoločnú kartu zákazníka, preto bez vlastných
   farieb: farby dáva výber (.vyber, .vyber-btn) a pole (.field input, .uc-vstup,
   admin input) hostiteľa. Načítať PO styl.css / admin.css (prebíja .vyber-btn). */
.tf-pole{position:relative;display:block;width:100%;min-width:0;box-sizing:border-box}
.tf-pole > .tf-cislo{display:block;width:100%;min-width:0;margin:0;box-sizing:border-box}
/* Predvoľba je vnútri poľa čísla: priehľadné tlačidlo vľavo s tenkým predelom (odsadenie čísla dáva telefon.js). */
.tf-pole > .tf-vyber{position:absolute;left:1px;top:1px;bottom:1px;z-index:1;display:flex;width:auto;align-items:stretch;
  margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.tf-vyber .vyber-btn{display:flex;align-items:center;gap:6px;width:auto;height:auto;min-height:0;margin:0;
  padding:0 26px 0 12px;background:none;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.tf-vyber .vyber-btn:hover,.tf-vyber .vyber-btn:focus-visible{background:none;box-shadow:none}
.tf-vyber::after{right:11px}

/* Obrázok pri možnosti výberu (vyber.js, atribút data-obrazok) – vlajka. */
.vyber-ob{flex:0 0 auto;width:20px;height:15px;object-fit:cover;border-radius:3px;
  box-shadow:0 0 0 1px var(--line)}
.vyber-polozka.vyber-oddel{position:relative;margin-top:7px}
.vyber-polozka.vyber-oddel::before{content:'';position:absolute;left:12px;right:12px;top:-4px;
  border-top:1px solid var(--line)}

/* Panel predvolieb na počítači: pod tlačidlom od jeho ľavého okraja, pevná šírka, rolovanie. */
@media(min-width:721px){
  .vyber-panel.vyber-tel.vyber-pod .vyber-okno{width:320px;max-width:calc(100vw - 16px);max-height:360px}
}

/* V dvojstĺpcovej mriežke formulára (Môj účet) má telefón celý riadok – inak je číslo úzke. */
.uc-mriezka > :has(> .tf-pole){grid-column:1/-1}