/* ==========================================================
   FORM.CSS
   Форма заявки
   ========================================================== */

.form-section{
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

.form-wrapper{
    max-width:720px;
    margin:0 auto;
    padding:48px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
}

.application-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* ==========================================================
   Поля формы
   ========================================================== */

.application-form .form-group{
    margin-bottom:0;
}

.application-form label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--color-secondary);
}

.application-form input,
.application-form select{
    width:100%;
    height:var(--input-height);
    padding:0 16px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:#ffffff;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.application-form input::placeholder{
    color:var(--color-muted);
}

.application-form input:focus,
.application-form select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.application-form input:hover,
.application-form select:hover{
    border-color:#cbd5e1;
}

/* ==========================================================
   Honeypot
   ========================================================== */

.honeypot{
    position:absolute;
    left:-9999px;
    top:-9999px;
    opacity:0;
    pointer-events:none;
}

/* ==========================================================
   Кнопка отправки
   ========================================================== */

.form-submit{
    width:100%;
    margin-top:8px;
    font-size:1rem;
    font-weight:700;
}

.form-submit:hover{
    transform:translateY(-2px);
}

/* ==========================================================
   Сообщения
   ========================================================== */

.form-error{
    margin-bottom:24px;
    padding:16px 18px;
    border:1px solid #fecaca;
    border-radius:var(--radius-md);
    background:#fef2f2;
    color:var(--color-danger);
}

.form-success{
    margin-bottom:24px;
    padding:16px 18px;
    border:1px solid #bbf7d0;
    border-radius:var(--radius-md);
    background:#ecfdf5;
    color:var(--color-success);
}

/* ==========================================================
   Политика
   ========================================================== */

.form-policy{
    margin-top:4px;
    font-size:.9rem;
    text-align:center;
    color:var(--color-text-light);
    line-height:1.6;
}

.form-policy a{
    font-weight:600;
}

/* ==========================================================
   Анимация появления
   ========================================================== */

.form-wrapper{
    animation:formFade .6s ease;
}

@keyframes formFade{

    from{
        opacity:0;
        transform:translateY(24px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ==========================================================
   Планшеты
   ========================================================== */

@media (max-width:992px){

    .form-wrapper{
        padding:40px 32px;
    }

}

/* ==========================================================
   Телефоны
   ========================================================== */

@media (max-width:768px){

    .form-wrapper{
        padding:28px 24px;
    }

    .form-submit{
        width:100%;
    }

}

/* ==========================================================
   Маленькие экраны
   ========================================================== */

@media (max-width:480px){

    .form-wrapper{
        padding:20px;
        border-radius:var(--radius-lg);
    }

    .application-form{
        gap:20px;
    }

    .application-form input,
    .application-form select{
        font-size:16px;
    }

    .form-policy{
        font-size:.85rem;
    }

}

/* ==========================================================
   Ошибки формы
   ========================================================== */

.input-error{
    border-color:var(--color-danger)!important;
    box-shadow:0 0 0 3px rgba(220,38,38,.12)!important;
}

.field-error{
    margin-top:6px;
    font-size:.875rem;
    color:var(--color-danger);
}