/* ===========================
   فرم مهفرگرافیک
=========================== */

.messageBoxElementRow{
    display:flex !important;
    flex-wrap:wrap;
    gap:22px;
    align-items:flex-start;
}

/* باکس هر فیلد */

.messageBoxElementBox{
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box;
}

/* دو ستون */

.messageBoxElementBox.col-sm-3{
    width:calc(50% - 11px) !important;
    max-width:calc(50% - 11px) !important;
    flex:0 0 calc(50% - 11px) !important;
}

/* فیلد توضیحات کل عرض */

.messageBoxElementBox:has(.messageBoxElementTextArea){
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
}

/* دکمه */

.messageBoxElementBox.col{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    text-align:center;
}

/* ورودی ها */

.messageBoxElementInput:not(textarea){

    width:100% !important;

    height:60px !important;

    border:1px solid #d9dfee !important;

    border-radius:18px !important;

    background:#fff;

    padding:0 22px !important;

    font-size:16px;

    color:#22345d;

    box-sizing:border-box;

    transition:.3s;

}

/* توضیحات */

.messageBoxElementTextArea{

    width:100% !important;

    min-height:220px !important;

    height:220px !important;

    border:1px solid #d9dfee !important;

    border-radius:18px !important;

    padding:18px 22px !important;

    line-height:2;

    resize:vertical;

    box-sizing:border-box;

}

/* فوکوس */

.messageBoxElementInput:focus{

    outline:none;

    border-color:#d32f2f !important;

    box-shadow:0 0 0 5px rgba(211,47,47,.08);

}

/* دکمه ارسال */

.messageBoxElementButton{

    display:inline-flex !important;

    align-items:center;

    justify-content:center;

    min-width:240px;

    height:58px;

    background:#d32f2f !important;

    color:#fff !important;

    border:none !important;

    border-radius:18px !important;

    font-size:18px;

    font-weight:700;

    margin:35px auto 0 !important;

    transition:.3s;

}

.messageBoxElementButton:hover{

    background:#22345d !important;

    transform:translateY(-2px);

}

/* موبایل */

@media(max-width:768px){

.messageBoxElementBox.col-sm-3{

width:100% !important;

max-width:100% !important;

flex:0 0 100% !important;

}

.messageBoxElementTextArea{

height:170px !important;

min-height:170px !important;

}

.messageBoxElementButton{

width:100%;

}

}