/* Общие стили для формы с поддержкой всех браузеров */
: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%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Добавлены фолбэки для старых браузеров */
background-color: #ffffff;
color: #333333;
}

/* Фолбэк для gap в flexbox */
.form-group > *:not(:last-child) {
margin-bottom: 0.5rem;
}

.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;
/* Добавлены фолбэки для transform */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

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;
font-size: 0.9rem;
}

button {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
}

/* Фолбэки для старых браузеров, не поддерживающих CSS переменные */
.form-group label {
color: #9370db; /* фолбэк для var(--purple-medium) */
color: var(--purple-medium);
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea {
border-color: #e6e6fa; /* фолбэк для var(--purple-lighter) */
border-color: var(--purple-lighter);
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group textarea:focus {
border-color: #b19cd9; /* фолбэк для var(--purple-light) */
border-color: var(--purple-light);
}

button {
background-color: #9370db; /* фолбэк для var(--purple-medium) */
background-color: var(--purple-medium);
color: #ffffff; /* фолбэк для var(--text-light) */
color: var(--text-light);
}

button:hover {
background-color: #663399; /* фолбэк для var(--purple-dark) */
background-color: var(--purple-dark);
}