* { -webkit-tap-highlight-color:transparent; box-sizing:border-box; }

body {
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 font-family:tinosregular, Arial, sans-serif;
 font-size:17px;
 color:rgb(60,60,60);
 width:320px;
 margin:0 auto;
 background:#fff;
 min-height:100vh;
}

/* --- pasek górny z logo --- */
#logo_tlo {
 position:fixed; top:0; left:0; right:0;
 height:60px; background:#fff; z-index:999;
 display:flex; align-items:center; justify-content:center;
 padding:0 12px;
}
#logo_tlo img { height:38px; width:auto; display:block; }

/* --- kontener formularza: wyśrodkowanie pionowe --- */
#login_wrap {
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 min-height:100svh;
 padding:80px 20px 40px 20px;
}

/* --- pojedyncze pole tekstowe --- */
.pole {
 width:100%;
 max-width:280px;
 margin-bottom:18px; /* zmniejszony odstęp między polami */
}

.pole label {
 display:block;
 font-size:13px;
 font-style:italic;
 color:rgb(18,168,73);
 margin-bottom:1px; /* etykieta bliżej pola */
 user-select:none;
}

.pole input[type="text"],
.pole input[type="password"] {
 width:100%;
 border:none;
 border-bottom:2px solid rgb(18,168,73);
 outline:none;
 font-family:tinosregular, Arial, sans-serif;
 font-size:17px;
 color:rgb(60,60,60);
 background:transparent;
 padding:2px 0 4px 0;
 border-radius:0;
 -webkit-appearance:none;
 transition:border-bottom-color 0.2s;
}
.pole input[type="text"]:focus,
.pole input[type="password"]:focus {
 border-bottom-color:rgba(17,194,35,1);
}

/* --- wiersz zapamiętaj mnie --- */
.pole_checkbox {
 width:100%;
 max-width:280px;
 display:flex;
 align-items:center;
 gap:10px;
 margin-top:10px;
 margin-bottom:28px;
 cursor:pointer;
}

/* natywny checkbox: niewidoczny, ale w pełni klikalny
   (opacity:0 zamiast display:none / visibility:hidden –
    przeglądarka nadal rejestruje kliknięcia z <label>) */
.pole_checkbox input[type="checkbox"] {
 position:absolute;
 opacity:0;
 width:18px;
 height:18px;
 margin:0;
 cursor:pointer;
 /* pointer-events:auto – domyślne, celowo nie ustawiamy none */
}

/* własny wizualny checkbox */
.checkbox_box {
 flex-shrink:0;
 width:18px; height:18px;
 border:2px solid rgb(18,168,73);
 border-radius:3px;
 background:#fff;
 position:relative;
 transition:background 0.15s;
 pointer-events:none; /* kliknięcia obsługuje natywny input nad spodem */
}

/* haczyk */
.checkbox_box::after {
 content:'';
 position:absolute;
 display:none;
 left:4px; top:0;
 width:6px; height:11px;
 border:2px solid #fff;
 border-top:none;
 border-left:none;
 transform:rotate(45deg);
}

/* stan zaznaczony */
.pole_checkbox input[type="checkbox"]:checked ~ .checkbox_box {
 background:rgb(18,168,73);
 border-color:rgb(18,168,73);
}
.pole_checkbox input[type="checkbox"]:checked ~ .checkbox_box::after {
 display:block;
}

.pole_checkbox span:last-child {
 font-size:14px;
 color:rgb(120,120,120);
 user-select:none;
}

/* --- przycisk logowania --- */
#btn_login {
 width:100%;
 max-width:280px;
 padding:10px;
 border:none;
 border-radius:12px;
 background:linear-gradient(90deg,rgba(41,177,91,1) 0%,rgba(7,186,102,1) 58%,rgba(17,194,35,1) 100%);
 box-shadow:2px 3px 5px #4444;
 color:#fff;
 font-family:tinosregular, Arial, sans-serif;
 font-size:18px;
 font-weight:bold;
 cursor:pointer;
 -webkit-appearance:none;
 transition:opacity 0.2s;
}
#btn_login:active   { opacity:0.8; }
#btn_login:disabled { opacity:0.5; cursor:default; }

/* --- komunikat błędu --- */
#komunikat {
 width:100%;
 max-width:280px;
 margin-top:16px;
 font-size:13px;
 color:rgb(220,50,50);
 text-align:center;
 min-height:18px;
}

/* --- ekran oczekiwania --- */
#ekran_oczekiwania {
 display:none;
 position:fixed; inset:0;
 background:rgba(255,255,255,0.8);
 z-index:2000;
 background-image:url('../obrazki/czekaj.gif');
 background-size:100px;
 background-repeat:no-repeat;
 background-position:center center;
}

#wa_wrap{ margin-bottom:1em; }
#wa_tekst{ margin:0; font-size:16px; color:#333; text-align:center; }
#wa_tekst a{ color:rgba(17,194,35,1); text-decoration:underline; cursor:pointer;}
#wa_komunikat{ font-size:13px; color:red; text-align:center; margin-top:6px;}