/* robotatut.pl - kod kraju przy numerze telefonu. Podpiete NA KONCU listy arkuszy: kolejnosc ma znaczenie, wygrywa nizszy (patrz CLAUDE.md). Okienko z lista lezy na koncu i jest `position:fixed` - ta sama nauka, co przy menu awatara: w srodku formularza przycina je wszystko, co ma `overflow`, a dolny pasek (`tabbar.css`, z-index 1100) wychodzi mu na wierzch. */ .kraj-rzad{display:flex;align-items:center;gap:10px} .kraj-guzik{ flex:0 0 auto;display:flex;align-items:center;gap:6px; background:transparent;border:0;border-right:2px solid var(--line); padding:2px 10px 2px 0;margin:0;cursor:pointer; font-family:inherit;font-size:17px;font-weight:700;color:var(--ink); line-height:1.4; } .kraj-guzik:focus-visible{outline:2px solid var(--yl);outline-offset:2px} .kraj-flaga{font-size:19px;line-height:1} .kraj-kod{letter-spacing:.2px;white-space:nowrap} .kraj-strzalka{ width:7px;height:7px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2); transform:rotate(45deg) translate(-2px,-2px); } .kraj-numer{flex:1 1 auto;min-width:0} /* ---------------------------------------------------------- okienko */ .krajok{ position:fixed;left:0;right:0;top:0;bottom:0;z-index:1350; display:flex;align-items:flex-end;justify-content:center; background:rgba(10,9,8,.55); } .krajok[hidden]{display:none} .krajok-panel{ width:100%;max-width:520px;max-height:82vh;display:flex;flex-direction:column; background:var(--card);border:1px solid var(--line);border-bottom:0; border-radius:18px 18px 0 0;padding:14px 14px 0; } .krajok-glowa{display:flex;align-items:center;gap:10px;padding-bottom:10px} .krajok-glowa b{font-size:17px;font-weight:800;flex:1 1 auto} .krajok-zamknij{ width:34px;height:34px;flex:0 0 auto;border-radius:50%; background:transparent;border:1px solid var(--line);color:var(--ink); font-size:18px;line-height:1;cursor:pointer; } .krajok-szukaj{ width:100%;border:2px solid var(--ink);background:#fff;color:#111; padding:10px 12px;font-size:17px;font-family:inherit;margin-bottom:10px; } .krajok-lista{ flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain; margin:0 -14px;padding:0 6px 14px;list-style:none; } .krajok-lista li{margin:0} .krajok-poz{ width:100%;display:flex;align-items:center;gap:12px; background:transparent;border:0;border-radius:12px; padding:12px 8px;cursor:pointer;text-align:left; font-family:inherit;font-size:16px;color:var(--ink); } .krajok-poz:hover,.krajok-poz:focus-visible{background:rgba(212,175,55,.12);outline:0} .krajok-poz .fl{font-size:22px;line-height:1;flex:0 0 auto;width:28px} .krajok-poz .nz{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .krajok-poz .kd{flex:0 0 auto;color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums} .krajok-poz.wybrany .kd{color:var(--yl)} .krajok-kreska{height:1px;background:var(--line);margin:6px 8px} .krajok-pusto{padding:18px 8px;color:var(--ink2);font-size:15px}