/* Общие стили для формы с поддержкой всех браузеров */
:root {
--purple-medium: #9370db; /* Пример значения */
--purple-light: #b19cd9;
--purple-lighter: #e6e6fa;
--purple-dark: #663399;
--text-light: #ffffff;
}
.form-group {
display: -webkit-box; /* Для старых Safari */
display: -ms-flexbox; /* Для старых IE */
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
width: 100%; /* Добавлено для правильного отображения */
}

.form-group label {
font-weight: 600;
color: var(--purple-medium);
font-family: Arial, sans-serif; /* Добавлено для кросс-браузерности */
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea {
padding: 0.75rem 1rem;
border: 1px solid var(--purple-lighter);
border-radius: 6px;
font-size: 1rem;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
font-family: Arial, sans-serif; /* Добавлено для кросс-браузерности */
width: 100%; /* Добавлено для правильного отображения */
box-sizing: border-box; /* Важно для правильного расчета ширины */
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--purple-light);
-webkit-box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.2);
box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.2);
}

button {
background-color: var(--purple-medium);
color: var(--text-light);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
font-family: Arial, sans-serif; /* Добавлено для кросс-браузерности */
margin-top: 0.5rem; /* Добавлено для отступа */
}

button:hover {
background-color: var(--purple-dark);
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Добавим медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea {
padding: 0.5rem 0.75rem;
}

button {
padding: 0.5rem 1rem;
}
}
(style.css)