/* Основной стиль фона для формы, чтобы соответствовать фону design.png */
body {
  background-color: #4B3F72; /* Цвет фона из файла design.png */
  color: #fff; /* Цвет текста */
  font-family: 'Arial', sans-serif; /* Шрифт, подходящий к дизайну */
}

form {
    max-width: 80%;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type=submit] {
  background-image: linear-gradient(to top, #65799b, #5e2563); /* Градиентный фон, цвета могут быть другими */
  border: 0; /* Отсутствие границы */
  border-radius: 30px; /* Закругленные края */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25); /* Тень под кнопкой */
  color: white; /* Белый цвет текста */
  cursor: pointer; /* Курсор в виде руки при наведении */
  font-size: 18px; /* Размер шрифта */
  font-weight: bold; /* Жирный текст */
  outline: none; /* Убрать контур при фокусе */
  padding: 15px 30px; /* Внутренние отступы */
  text-transform: uppercase; /* Текст в верхнем регистре */
  transition: background-image 0.3s, box-shadow 0.3s; /* Плавный переход для градиента и тени */
  text-align: center; /* Выравнивание текста по центру */
  -webkit-appearance: none; /* Убрать стандартный внешний вид для Webkit-браузеров */
  -moz-appearance: none; /* Убрать стандартный внешний вид для Firefox */
  appearance: none; /* Убрать стандартный внешний вид для современных браузеров */
}

input[type=submit]:hover {
  background-image: linear-gradient(to top, #767ab6, #6e2c77); /* Изменение градиента при наведении */
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3); /* Увеличение тени при наведении */
}

input[type=submit]:active {
  background-image: linear-gradient(to bottom, #65799b, #5e2563); /* Градиент при нажатии */
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); /* Уменьшение тени при нажатии */
}


select {
  background-color: #ffffff; /* Белый фон, чтобы выделить select на темном фоне */
  border: 2px solid #a3a3a3; /* Добавляем границу для более четкого видимого контура */
  border-radius: 4px; /* Скругление углов */
  display: block; /* Занимать полную доступную ширину */
  font-size: 16px; /* Размер шрифта для лучшей видимости */
  padding: 10px; /* Внутренний отступ для удобства чтения и выбора */
  width: 100%; /* Ширина для соответствия контейнеру */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Слабая тень для объемного эффекта */
  margin-bottom: 10px; /* Отступ снизу для отделения от других элементов формы */
  cursor: pointer; /* Курсор в виде руки при наведении для индикации интерактивности */
  -webkit-appearance: none; /* Убираем стандартный внешний вид в Webkit-браузерах */
  -moz-appearance: none; /* Убираем стандартный внешний вид в Firefox */
  appearance: none; /* Убираем стандартный внешний вид в современных браузерах */
}

/* Стилизация для стрелки выпадающего списка */
select::-ms-expand {
  display: none; /* Скрываем стрелку в IE/Edge */
}

select::-webkit-scrollbar {
  width: 12px; /* Ширина полосы прокрутки для Webkit-браузеров */
}

/* Стилизация для полосы прокрутки выпадающего списка */
select::-webkit-scrollbar-track {
  background: #f1f1f1; /* Цвет фона полосы прокрутки */
}

select::-webkit-scrollbar-thumb {
  background: #888; /* Цвет ползунка полосы прокрутки */
}

select::-webkit-scrollbar-thumb:hover {
  background: #555; /* Цвет ползунка полосы прокрутки при наведении */
}

/* Стилизация элементов формы */
input[type=text], input[type=email], textarea {
  background-color: #fff; /* Белый фон для полей ввода */
  border: none; /* Убрать стандартные границы */
  border-radius: 4px; /* Скруглить углы */
  padding: 10px; /* Добавить внутренние отступы */
  margin-bottom: 10px; /* Добавить отступ снизу */
  width: calc(100% - 20px); /* Ширина на 100% от родительского элемента, учитывая padding */
}

/* Кнопка должна сочетаться с дизайном */
button {
  background-color: #806DBF; /* Цвет кнопки, схожий с фоном */
  color: #fff; /* Белый цвет текста */
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer; /* Курсор в виде руки при наведении */
  margin-top: 10px; /* Отступ сверху */
}

/* Когда курсор наведён на кнопку, сделать её немного светлее */
button:hover {
  background-color: #957DD1;
}

/* Стилизация меток для лучшей видимости */
label {
  display: block; /* Сделать метки блочными элементами */
  margin-bottom: 5px; /* Отступ снизу для меток */
}

/* Стилизация контейнера формы */
.form-container {
  max-width: 600px; /* Максимальная ширина контейнера */
  margin: auto; /* Центрировать форму на странице */
  padding: 20px; /* Внутренний отступ для контейнера */
}