/* Basic styling for the survey site */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
}

header {
  background: #007acc;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

nav {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

nav button {
  padding: 0.5rem 1rem;
  border: none;
  background: #fff;
  color: #007acc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

nav button:hover {
  background: #e0e0e0;
}

main {
  padding: 1rem;
}

.hidden {
  display: none;
}

section {
  margin-bottom: 2rem;
}

form > div {
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: bold;
}

form select, form input[type="radio"] {
  margin-right: 0.5rem;
}

.action {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: #007acc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.action:hover {
  background: #005b94;
}

.charts {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

#recommendation {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

/* Ensure that the emoji rating inputs on the 'after' page are laid out horizontally.
   Only labels within the after‑wear form are affected so that patient and doctor
   questionnaires keep their vertical layout. */
#section-after form label {
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: normal;
}

#after-results {
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
}

/* Кнопка для прокрутки к началу страницы */
.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #007acc;
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 1000;
}
.scroll-top:hover {
  background: #005b94;
}

/* Стили для отображения ошибок в опросе */
.error {
  border: 1px solid red;
}
.error-msg {
  color: red;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/* Стили для строк ввода (ФИО, номер карты) */
.input-row {
  margin-bottom: 1rem;
}
.input-row label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: bold;
}
.input-row input[type="text"] {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}