/* Полный экранный фон */
.registration-section {
    margin: 0;
    background: url('../assets/images/general/background.png') no-repeat center center fixed;
    background-size: cover;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Отступы для мобильных устройств */
}

/* Титульная часть регистрации */
.registration-title {
    font-size: 2.5rem;
    color: #353333;
    margin-bottom: 30px;
    text-align: center;
}

/* Контейнер с формами */
.forms-container {
    display: flex;
    flex-wrap: wrap; /* Позволяет формам переноситься на новую строку */
    justify-content: center; /* Центрируем формы */
    gap: 40px; /* Промежуток между формами */
    width: 100%;
    max-width: 2200px; /* Увеличили максимальную ширину контейнера */
    box-sizing: border-box;
    padding: 0 20px; /* Внутренние отступы */
}

/* Стили форм */
.student-form,
.parent-form {
    background-color: rgba(190, 194, 191, 0.7);
    padding: 30px;
    border-radius: 10px;
    flex: 1 1 calc(50% - 40px); /* Формы занимают около 50% ширины контейнера с учетом gap */
    box-sizing: border-box;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    min-width: 500px; /* Увеличили минимальную ширину формы */
    max-width: 1000px; /* Максимальная ширина формы */
}

/* Стилизация флажка и ссылки на соглашение */
/* ----------- ОБЩИЕ СТИЛИ ----------- */
.form-check {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.form-check-input {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.form-check-label {
    font-size: 16px;
    color: #333333;
}

.download-agreement-btn {
    color: #007BFF; /* Синий цвет для ссылки */
    text-decoration: none;
}

.download-agreement-btn:hover {
    text-decoration: underline;
    color: #0056b3;
}

.download-agreement-btn i {
    margin-right: 5px;
}

/* Заголовки форм */
h3 {
    text-align: center;
    color: #353333;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

/* Общие стили для полей ввода и селектов */
input,
select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px; /* Отступ между полями */
    border: 1px solid #ccc;
    background: #FFFAEF;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    color: #000; /* Цвет вводимого текста */
    font-family: 'Halogen', sans-serif;
}

select {
    background-image: url('../assets/images/registration/btnArrowSelectClass.png'); /* Путь к вашей иконке стрелки */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 25px;
    padding-right: 40px; /* Место для значка стрелки */
    color: #000; /* Цвет выбранного текста */
    transition: color 0.3s ease; /* Плавный переход цвета при наведении */
}

/* Изменение курсора при наведении на селект */
select:hover {
    cursor: pointer; /* Меняет курсор на "руку" при наведении */
}

/* Группа полей */
.form-group {
    margin-bottom: 15px;
}

/* Стиль кнопки регистрации */
.submit-button {
    margin-top: 20px;
    text-align: center;
}

.form-control::placeholder {
    color: #353333;
}

button {
    font-size: 20px; /* Размер шрифта */
    color: #fffff; /* Цвет текста */
    border: 3px solid #0056b3;
    background-color: transparent; /* Прозрачный фон */
    border-radius: 5px; /* Закругление углов (опционально) */
    padding: 10px 20px; /* Внутренние отступы */
    cursor: pointer; /* Курсор указывает на интерактивность */
    transition: all 0.3s ease; /* Анимация при наведении */
    border-radius: 25px;
}

button:hover {
    background-color: #0056b3;
}

/* Ссылка на страницу входа */
.login-link {
    margin-top: 10px;
    text-align: center;
    font-size: 1rem;
    color: #000000;
}

.login-link a {
    color: #000000;
    text-decoration: #FFFFFF;
}
input[readonly] {
    background-color: #e9ecef; /* Светло-серый цвет */
    color: #6c757d; /* Серый текст */
    cursor: not-allowed; /* Курсор "запрещено" */
}
.login-link a:hover {
    text-decoration: underline;
}

/* ======================================= */
/* ============== МЕДИА-ЗАПРОСЫ ========== */
/* ======================================= */

/* ========= Экраны от 3840px (4K) и выше ========= */
@media (min-width: 3840px) {
    .forms-container {
        max-width: 5100px; /* Увеличено в 1.5 раза от 3400px */
    }

    .student-form,
    .parent-form {
        flex: 1 1 calc(33.33% - 40px);
        max-width: 2250px; /* Увеличено в 1.5 раза от 1500px */
        padding: 67.5px; /* Увеличено в 1.5 раза от 45px */
        border-radius: 22.5px; /* Увеличено в 1.5 раза от 15px */
        box-shadow: 0 13.5px 27px rgba(0, 0, 0, 0.15); /* Тень масштабирована */
        min-width: 1125px; /* Увеличено в 1.5 раза от 750px */
    }

    .registration-title {
        font-size: 6.75rem; /* Увеличено в 1.5 раза от 4.5rem */
        margin-bottom: 67.5px; /* Увеличено в 1.5 раза от 45px */
    }
    .registration-title::first-letter {
        font-size: 7.2rem;
    }
    h3 {
        font-size: 4.95rem; /* Увеличено в 1.5 раза от 3.3rem */
        margin-bottom: 45px; /* Увеличено в 1.5 раза от 30px */
    }

    input,
    select {
        font-size: 2.7rem; /* Увеличено в 1.5 раза от 1.8rem */
        padding: 31.5px; /* Увеличено в 1.5 раза от 21px */
        margin-bottom: 33.75px; /* Увеличено в 1.5 раза от 22.5px */
        border-radius: 11.25px; /* Увеличено в 1.5 раза от 7.5px */
    }

    button {
        font-size: 3.375rem; /* Увеличено в 1.5 раза от 2.25rem */
        padding: 31.5px 63px; /* Увеличено в 1.5 раза от 21px 42px */
        border-radius: 56.25px; /* Увеличено в 1.5 раза от 37.5px */
    }

    /* Масштабируем чекбокс и метку */
    .form-check-input {
        margin-right: 20px;
        width: 40px;
        height: 40px;
    }

    .form-check-label {
        font-size: 2.4rem;
    }
}

/* ========= Экраны от 2560px до 3839px ========= */
@media (min-width: 2560px) and (max-width: 3839px) {
    .forms-container {
        max-width: 3600px; /* Увеличено в 1.5 раза от 2400px */
    }

    .student-form,
    .parent-form {
        max-width: 1800px; /* Увеличено в 1.5 раза от 1200px */
        padding: 45px; /* Увеличено в 1.5 раза от 30px */
        border-radius: 15px; /* Увеличено в 1.5 раза от 10px */
        box-shadow: 0 9px 18px rgba(0, 0, 0, 0.15);
        min-width: 750px; /* Увеличено в 1.5 раза от 500px */
    }

    .registration-title {
        font-size: 4.2rem; /* Увеличено в 1.5 раза от 2.8rem */
        margin-bottom: 45px; /* Увеличено в 1.5 раза от 30px */
    }
    .registration-title::first-letter {
        font-size: 4.7rem; /* Увеличено в 1.5 раза от 2.8rem */
    }
    h3 {
        font-size: 3rem; /* Увеличено в 1.5 раза от 2rem */
        margin-bottom: 30px; /* Увеличено в 1.5 раза от 20px */
    }

    input,
    select {
        font-size: 1.65rem; /* Увеличено в 1.5 раза от 1.1rem */
        padding: 21px; /* Увеличено в 1.5 раза от 14px */
        margin-bottom: 22.5px; /* Увеличено в 1.5 раза от 15px */
        border-radius: 7.5px; /* Увеличено в 1.5 раза от 5px */
    }

    button {
        font-size: 2.1rem; /* Увеличено в 1.5 раза от 1.4rem */
        padding: 24px 45px; /* Увеличено в 1.5 раза от 16px 30px */
        border-radius: 37.5px; /* Увеличено в 1.5 раза от 25px */
    }

    .form-check-input {
        margin-right: 15px;
        width: 30px;
        height: 30px;
    }

    .form-check-label {
        font-size: 1.8rem;
    }
}

/* ========= Экраны от 2201px до 2559px ========= */
@media (min-width: 2201px) and (max-width: 2559px) {
    .forms-container {
        max-width: 3000px; /* Увеличено в 1.5 раза от 2000px */
    }

    .student-form,
    .parent-form {
        max-width: 1500px; /* Увеличено в 1.5 раза от 1000px */
        padding: 37.5px; /* Увеличено в 1.5 раза от 25px */
        border-radius: 12.5px; /* Увеличено в 1.5 раза от 8.33px */
        box-shadow: 0 7.5px 15px rgba(0, 0, 0, 0.15);
        min-width: 625px; /* Увеличено в 1.5 раза от 416px */
    }

    .registration-title {
        font-size: 3.9rem; /* Увеличено в 1.5 раза от 2.6rem */
        margin-bottom: 37.5px; /* Увеличено в 1.5 раза от 25px */
    }
        .registration-title::first-letter {
        font-size: 4.7rem; /* Увеличено в 1.5 раза от 2.8rem */
    }
    h3 {
        font-size: 2.85rem; /* Увеличено в 1.5 раза от 1.9rem */
        margin-bottom: 28.5px; /* Увеличено в 1.5 раза от 19px */
    }

    input,
    select {
        font-size: 1.575rem; /* Увеличено в 1.5 раза от 1.05rem */
        padding: 19.5px; /* Увеличено в 1.5 раза от 13px */
        margin-bottom: 22.5px; /* Увеличено в 1.5 раза от 15px */
        border-radius: 7.5px; /* Увеличено в 1.5 раза от 5px */
    }

    button {
        font-size: 2.025rem; /* Увеличено в 1.5 раза от 1.35rem */
        padding: 22.5px 42px; /* Увеличено в 1.5 раза от 15px 28px */
        border-radius: 37.5px; /* Увеличено в 1.5 раза от 25px */
    }

    .form-check-input {
        margin-right: 14px;
        width: 28px;
        height: 28px;
    }

    .form-check-label {
        font-size: 1.7rem;
    }
}

/* ========= Экраны от 1601px до 2200px ========= */
@media (min-width: 1601px) and (max-width: 2200px) {
    .forms-container {
        max-width: 2400px; /* Увеличено в 1.5 раза от 1600px */
    }

    .student-form,
    .parent-form {
        max-width: 1200px; /* Увеличено в 1.5 раза от 800px */
        padding: 30px; /* Увеличено в 1.5 раза от 20px */
        border-radius: 10px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        min-width: 500px;
    }

    .registration-title {
        font-size: 3.6rem; /* Увеличено в 1.5 раза от 2.4rem */
        margin-bottom: 30px; /* Увеличено в 1.5 раза от 20px */
    }
        .registration-title::first-letter {
        font-size: 4.5rem; /* Увеличено в 1.5 раза от 2.8rem */
    }
    h3 {
        font-size: 2.7rem; /* Увеличено в 1.5 раза от 1.8rem */
        margin-bottom: 27px; /* Увеличено в 1.5 раза от 18px */
    }

    input,
    select {
        font-size: 1.5rem; /* Увеличено в 1.5 раза от 1rem */
        padding: 18px; /* Увеличено в 1.5 раза от 12px */
        margin-bottom: 22.5px; /* Увеличено в 1.5 раза от 15px */
        border-radius: 7.5px; /* Увеличено в 1.5 раза от 5px */
    }

    button {
        font-size: 1.95rem; /* Увеличено в 1.5 раза от 1.3rem */
        padding: 21px 39px; /* Увеличено в 1.5 раза от 14px 26px */
        border-radius: 37.5px; /* Увеличено в 1.5 раза от 25px */
    }

    .form-check-input {
        margin-right: 13px;
        width: 26px;
        height: 26px;
    }

    .form-check-label {
        font-size: 1.5rem;
    }
}

/* ========= Экраны от 1201px до 1600px ========= */
@media (min-width: 1201px) and (max-width: 1600px) {
    .forms-container {
        max-width: 1200px;
    }

    .student-form,
    .parent-form {
        flex: 1 1 calc(50% - 40px);
        max-width: 600px;
    }

    .registration-title {
        font-size: 2.2rem;
    }
        .registration-title::first-letter {
        font-size: 2.7rem; /* Увеличено в 1.5 раза от 2.8rem */
    }
    h3 {
        font-size: 1.7rem;
    }

    input,
    select {
        font-size: 1rem;
        padding: 12px;
    }

    button {
        font-size: 1.2rem;
        padding: 12px 24px;
    }

    .form-check-input {
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }

    .form-check-label {
        font-size: 1rem;
    }
}

/* ========= Экраны от 993px до 1200px ========= */
@media (min-width: 993px) and (max-width: 1200px) {
    .forms-container {
        max-width: 1000px;
        gap: 30px; /* Уменьшаем промежуток между формами */
    }

    .student-form,
    .parent-form {
        flex: 1 1 calc(50% - 30px);
        max-width: 500px;
    }

    .registration-title {
        font-size: 2rem;
    }
        .registration-title::first-letter {
        font-size: 2.5rem; /* Увеличено в 1.5 раза от 2.8rem */
    }
    h3 {
        font-size: 1.6rem;
    }

    input,
    select {
        font-size: 0.95rem;
        padding: 11px;
    }

    button {
        font-size: 1.1rem;
        padding: 11px 22px;
    }

    .form-check-input {
        margin-right: 8px;
        width: 18px;
        height: 18px;
    }

    .form-check-label {
        font-size: 0.95rem;
    }
}

/* ========= Экраны от 769px до 992px ========= */
@media (min-width: 769px) and (max-width: 992px) {
    .forms-container {
        flex-direction: column;
        align-items: center;
        max-width: 700px;
        gap: 30px;
    }

    .student-form,
    .parent-form {
        flex: 1 1 100%;
        min-width: 600px;
        max-width: 700px;
    }

    .registration-title {
        font-size: 1.8rem;
    }
        .registration-title::first-letter {
        font-size: 2.3rem; /* Увеличено в 1.5 раза от 2.8rem */
    }
    h3 {
        font-size: 1.5rem;
    }

    input,
    select {
        font-size: 0.9rem;
        padding: 10px;
    }

    button {
        font-size: 1rem;
        padding: 10px 20px;
    }

    .form-check-input {
        margin-right: 8px;
        width: 18px;
        height: 18px;
    }

    .form-check-label {
        font-size: 0.9rem;
    }
}

/* ========= Экраны от 577px до 768px ========= */
@media (min-width: 577px) and (max-width: 768px) {
    .forms-container {
        flex-direction: column;
        align-items: center;
        max-width: 500px;
        gap: 25px;
    }

    .student-form,
    .parent-form {
        flex: 1 1 100%;
        min-width: 450px;
        max-width: 500px;
        padding: 20px;
    }

    .registration-title {
        font-size: 1.6rem;
    }
        .registration-title::first-letter {
        font-size: 2.1rem; /* Увеличено в 1.5 раза от 2.8rem */
    }
    h3 {
        font-size: 1.4rem;
    }

    input,
    select {
        font-size: 0.85rem;
        padding: 9px;
    }

    button {
        font-size: 0.95rem;
        padding: 9px 18px;
    }

    .form-check-input {
        margin-right: 7px;
        width: 16px;
        height: 16px;
    }

    .form-check-label {
        font-size: 0.85rem;
    }
}

/* ========= Экраны до 576px ========= */
@media (max-width: 576px) {
    .forms-container {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        gap: 20px;
    }

    .student-form,
    .parent-form {
        flex: 1 1 100%;
        min-width: 250px;
        max-width: 100%;
        padding: 15px;
    }

    .registration-title {
        font-size: 1.4rem;
    }
        .registration-title::first-letter {
        font-size: 1.9rem; /* Увеличено в 1.5 раза от 2.8rem */
    }
    h3 {
        font-size: 1.2rem;
    }

    input,
    select {
        font-size: 0.8rem;
        padding: 8px;
    }

    button {
        font-size: 0.9rem;
        padding: 8px 16px;
    }

    .form-check-input {
        margin-right: 6px;
        width: 14px;
        height: 14px;
    }

    .form-check-label {
        font-size: 0.8rem;
    }
}