.checksn-main-holder{
  font-family: 'Roboto', sans-serif; /* Sugerowana czcionka dla Material Design */
  font-size: 16px;
  padding: 20px; /* Dodatkowy padding dla lepszej wizualizacji */
}

.checksn-form-group {
  display: flex;
  align-items: flex-end;
  gap: 16px; /* Odstęp między inputem a guzikiem */
  font-family: 'Roboto', sans-serif; /* Sugerowana czcionka dla Material Design */
}

.checksn-info{
  text-align: center;
  font-weight: bold;
  margin-bottom:1rem;
}

.checksn-input-container {
  position: relative;
  flex-grow: 1; /* Pozwala inputowi zająć dostępną przestrzeń */
}

.checksn-input-field {
  width: 100%;
  padding: 16px 12px 16px 12px; /* Większy padding góra/dół dla lepszego wyglądu */
  border: 1px solid #9e9e9e; /* Domyślna cienka obwódka */
  border-radius: 4px; /* Zaokrąglone rogi dla Material Design */
  outline: none; /* Usuń domyślny focus outline przeglądarki */
  font-size: 16px;
  color: #212121;
  background-color: transparent;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Ważne: placeholder musi być pusty lub zawierać spację, aby etykieta mogła się unosić */
.checksn-input-field::placeholder {
  color: transparent;
}

.checksn-input-field:focus {
  border-color: #1976d2; /* Kolor obwódki po focusie */
  box-shadow: 0 0 0 1px #1976d2; /* Cienka niebieska ramka po focusie */
}

/* Etykieta Material Design */
.checksn-input-label {
  position: absolute;
  top: 50%; /* Początkowo wyśrodkowana pionowo */
  left: 12px;
  transform: translateY(-50%); /* Korekta do pionowego wyśrodkowania */
  font-size: 16px;
  color: #9e9e9e;
  pointer-events: none; /* Etykieta nie blokuje klikania w input */
  background-color: #ffffff; /* Ważne: tło dla etykiety, żeby zakrywała obwódkę */
  padding: 0 4px; /* Minimalny padding dla "wycięcia" obwódki */
  transition: 0.3s ease-in-out;
  box-sizing: border-box; /* Zapewnia poprawne obliczanie rozmiaru z paddingiem */
}

/* Stan etykiety po focusie lub gdy input ma wartość */
.checksn-input-field:focus + .checksn-input-label,
.checksn-input-field:not(:placeholder-shown) + .checksn-input-label {
  top: 0; /* Uniesienie na samą górę */
  left: 8px; /* Lekkie przesunięcie w lewo */
  font-size: 12px; /* Zmniejszenie czcionki */
  color: #1976d2; /* Kolor etykiety po focusie/wypełnieniu */
  transform: translateY(-50%); /* Ponowna korekta po uniesieniu */
}

/* Styl guzika Material Design - bez zmian w stosunku do poprzedniej wersji */
.checksn-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #1976d2; /* Główny kolor Material Design */
  color: white;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  align-self: normal;
}

#repInfo .textcenter{
  display: flex;
  align-items: center;
  gap:16px;
  padding-top:16px;
}

.checksn-button:hover {
  background-color: #1565c0; /* Ciemniejszy odcień po najechaniu */
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.checksn-button:active {
  background-color: #0d47a1; /* Jeszcze ciemniejszy odcień po kliknięciu */
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}