/* ===== Общие настройки ===== */

/* Основной контейнер одного блока конвертации */
.container {
  max-width: 400px;                /* Ограничиваем максимальную ширину */
  margin: 0 auto;                  /* Центрируем по горизонтали */
  padding: 10px;                   /* Внутренние отступы */
  font-family: sans-serif;         /* Базовый шрифт */
  background-color: #f2f2f2;       /* Светло-серый фон */
  margin-bottom: 10px;             /* Отступ между контейнерами */
  border-radius: 15px;             /* Скруглённые углы */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); /* Лёгкая тень */
}

/* ===== Заголовки блоков ===== */

.title {
  text-align: center;             /* Выравнивание по центру */
  margin-bottom: 5px;             /* Отступ снизу */
  margin-top: 5px;                /* Отступ сверху */
  font-size: 18px;                /* Размер текста заголовка */
}

/* ===== Подписи над полями ===== */

.input-label {
  display: block;                 /* Отображение как блочный элемент */
  margin-bottom: 5px;             /* Отступ от следующего блока */
  color: #333;                    /* Тёмно-серый цвет */
  font-size: 14px;                /* Размер текста */
}

/* ===== Блок предупреждения (ошибки валидации) ===== */

.converter-warning {
  color: red;                     /* Цвет текста — красный */
  font-size: 13px;                /* Немного меньше стандартного текста */
  margin-bottom: 10px;            /* Отступ снизу */
  font-weight: normal;            /* Обычный вес шрифта */
  text-align: left;               /* Выравнивание по левому краю */
  min-height: 16px;               /* Резервируем высоту даже когда текста нет */
}

/* ===== Строка с полем ввода и кнопкой ===== */

.input-row {
  display: flex;                  /* Горизонтальное расположение */
  gap: 5px;                       /* Промежуток между полем и кнопкой */
  margin-bottom: 10px;           /* Отступ снизу */
  width: 100%;                    /* Растягиваем на всю ширину */
  box-sizing: border-box;         /* Учитываем padding и border */
}

/* Унифицированная высота и вертикальное выравнивание */
.input-row .input,
.input-row .btn.convert {
  height: 35px;                   /* Жёстко заданная высота */
  font-size: 16px;                /* Размер текста */
  box-sizing: border-box;         /* Включаем padding и border в ширину */
  display: flex;                  /* Используем flex для выравнивания */
  align-items: center;            /* Вертикальное выравнивание текста */
}

/* Поле ввода */
.input-row .input {
  flex: 2;                        /* 2/3 ширины строки */
  padding: 0 10px;                /* Внутренние отступы слева и справа */
}

/* Кнопка конвертации */
.input-row .btn.convert {
  flex: 1;                        /* 1/3 ширины строки */
  padding: 1;                     /* Убираем внутренние отступы */
  justify-content: center;       /* Центрирование текста по горизонтали */
  white-space: nowrap;           /* Запрещаем перенос текста */
  background-color: #ff8800;     /* Оранжевый фон */
  color: white;                  /* Белый текст */
  border: none;                  /* Без рамки */
  border-radius: 15px;           /* Скругления */
  cursor: pointer;               /* Курсор-рука при наведении */
  font-weight: bold;             /* Жирный текст */
  text-align: center;            /* Центровка текста */
  font-size: 16px;
}

/* ===== Поле результата (textarea, 2 строки, авторазмер) ===== */
/* ===== Поле результата (textarea) ===== */
.output {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  font-family: "Segoe UI", system-ui, sans-serif; /* 👈 читаемый системный шрифт */
  background-color: #ffffcc;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 0px;
  text-align: left;
  resize: none;              /* 🔒 запрещаем ручное растягивание */
  overflow: hidden;          /* 🔒 скрываем прокрутку */
  white-space: pre-wrap;     /* 🔁 перенос строк */
  word-wrap: break-word;     /* 🔁 перенос слов */
  line-height: 0.9;          /* 🔠 высота строки */
  min-height: 22px;          /* 👈 начальная высота = 1 строка */
  max-height: 100px;         /* 🔝 максимум при авторазмере */
}



/* ===== Кнопка копирования ===== */

.btn.copy {
  width: auto;                   /* Относительно контейнера */
  height: 35px;                  /* Такая же высота */
  background-color: #1ca600;     /* Ярко-зелёный фон */
  color: white;                  /* Белый текст */
  font-size: 16px;               /* Размер текста */
  font-weight: bold;             /* Жирный шрифт */
  border: none;                  /* Без рамки */
  border-radius: 15px;           /* Скруглённые углы */
  cursor: pointer;               /* Курсор при наведении */
  margin: 0 auto 5px;                /* Центрирование */
  display: block;                /* Чтобы margin auto сработал */
}