/* Загальні стилі для select елементів */
select {
    width: 100%; /* Розтягуємо по ширині контейнера */
    padding: 10px 20px; /* Відступи для комфорту */
    font-size: 16px; /* Розмір шрифта */
    border-radius: 5px; /* Заокруглені кути */
    border: 1px solid #ccc; /* Легка сіренька рамка */
    background-color: #fff; /* Білий фон */
    box-sizing: border-box; /* Щоб padding і border не збільшували розміри */
    margin: 10px 0; /* Відступи між полями */
    appearance: none; /* Прибирає стандартні стилі браузера */
    -webkit-appearance: none; /* Для Safari */
    -moz-appearance: none; /* Для Firefox */
}

/* Стилізація для placeholder тексту */
select option:first-child {
    color: #888; /* Сірий колір для placeholder */
}

/* Псевдо-елемент для стрілки */
select::-ms-expand {
    display: none; /* Прибираємо стандартну стрілку в IE */
}

/* Вигляд для select при фокусі */
select:focus {
    outline: none; /* Без обводки */
    border-color: #007bff; /* Зміна кольору рамки при фокусі */
}

/* Стилі для кнопки у формі */
button {
    background-color: #007bff; /* Блакитний фон */
    color: #fff; /* Білий текст */
    padding: 12px 20px; /* Відступи */
    border-radius: 5px; /* Заокруглені кути */
    border: none; /* Без обводки */
    cursor: pointer; /* Курсор як при наведенні */
    width: 100%; /* Розтягуємо на всю ширину */
}

/* Стилі при наведенні на кнопку */
button:hover {
    background-color: #0056b3; /* Темніший відтінок синього */
}