/* Vzhled všech vstupních polí */
input, textarea, select {
  background: linear-gradient(180deg, #f0f0f0, #dedddd); /* Jemný šedý přechod */
  border: 1px solid #8b8a8b; /* Tenký šedý okraj */
  border-radius: 6px; /* Zaoblené rohy */
  padding: 10px; /* Vnitřní odsazení pro lepší čitelnost */
  font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; /* Moderní písmo */
  font-size: 14px; /* Mírně větší text pro lepší čitelnost */
  color: #333; /* Tmavší text pro kontrast */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Plynulé přechody při interakci */
}

input:focus, textarea:focus, select:focus {
  border-color: #007bff; /* Zvýraznění okraje při zaostření */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Jemný modrý efekt kolem pole */
  outline: none; /* Odstranění výchozího zvýraznění */
}

textarea {
  resize: vertical; /* Povolení změny velikosti pouze vertikálně */
}

select {
  appearance: none; /* Odstranění výchozího vzhledu (prohlížeče) */
}

/* Specifické stylování pro vstupní pole s "ks" */
.input-container {
  position: relative;
  display: inline-block;
}

.styled-input {
  width: 40px; /* Nastavte šířku dle potřeby */
  padding-right: 30px; /* Rezerva pro text "ks" uvnitř rámečku */
  text-align: center;
}

.input-container::after {
  content: "ks"; /* Text "ks" uvnitř rámečku */
  position: absolute;
  top: calc(70% - 0.5em); /* Jemná korekce pro vertikální zarovnání na iOS */
  right: 10px; /* Umístění textu na pravý okraj vstupního pole */
  transform: translateY(-50%); /* Vertikální vystředění textu */
  font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif;
  font-size: inherit;
  color: #333;
}

@supports (-webkit-touch-callout: none) {
  .input-container::after {
    top: calc(67% + 1px); /* Jemná korekce pro iOS Safari a Chrome na mobilu */
    transform: translateY(-50%);
  }
}