/* ==========================
   Apple ID Order Form
   Version: Final
========================== */

/* ---------- Wrapper ---------- */

.aiof-wrapper{
    max-width:520px;
    margin:50px auto;
    padding:20px;
    direction:rtl;
}

/* ---------- Card ---------- */

.aiof-form-box{
    background:#fff;
    padding:40px 35px;
    border:1px solid #eee;
    border-radius:20px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

/* ---------- Title ---------- */

.aiof-form-box h2{
    margin:0 0 15px;
    text-align:center;
    color:#222;
    font-size:28px;
    font-weight:700;
}

/* ---------- Description ---------- */

.aiof-description{
    margin:0 0 35px;
    text-align:center;
    color:#555;
    font-size:15px;
    line-height:1.8;
}

/* ---------- Fields ---------- */

.aiof-field{
    margin-bottom:25px;
}

.aiof-field label{
    display:block !important;
    margin-bottom:10px;
    color:#222 !important;
    font-size:15px;
    font-weight:700;
}

/* ---------- Inputs ---------- */

.aiof-field input[type="text"],
.aiof-field input[type="email"],
.aiof-field input[type="password"],
.aiof-password-wrap input{

    display:block !important;

    width:100% !important;

    height:55px !important;

    box-sizing:border-box;

    background:#fff !important;

    border:2px solid #4837f3 !important;

    border-radius:12px !important;

    color:#222 !important;

    font-size:16px !important;

    outline:none !important;

    transition:.25s;

}

/* رمز جا برای آیکون داشته باشد */

.aiof-password-wrap input{

    padding:0 50px 0 18px !important;

}

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

.aiof-field input:not([type="password"]){

    padding:0 18px !important;

}

.aiof-field input::placeholder{
    color:#999;
}

.aiof-field input:focus,
.aiof-password-wrap input:focus{

    border-color:#872EC6 !important;

    box-shadow:0 0 0 4px rgba(72,55,243,.15);

}

/* ---------- Password ---------- */

.aiof-password-wrap{

    position:relative;

    width:100%;

}

.aiof-eye{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#777;

    font-size:18px;

    z-index:5;

    transition:.2s;

}

.aiof-eye:hover{

    color:#4837f3;

}

/* ---------- Terms ---------- */

.aiof-terms{

    margin:20px 0;

    text-align:center;

    font-size:14px;

}

.aiof-terms label{

    color:#111;

    font-weight:700;

    cursor:pointer;

    line-height:1.9;

}

.aiof-terms input{

    margin-left:6px;

    vertical-align:middle;

}

.aiof-terms a{

    color:#4837f3;

    text-decoration:none;

    font-weight:700;

}

.aiof-terms a:hover{

    text-decoration:underline;

}

/* ---------- Button ---------- */

.aiof-button{

    width:100% !important;

    height:55px !important;

    border:none !important;

    border-radius:14px !important;

    background:#4837f3 !important;

    color:#fff !important;

    font-size:17px !important;

    font-weight:700 !important;

    cursor:pointer;

    transition:.25s;

}

.aiof-button:hover:not(:disabled){

    background:#3726d8 !important;

    transform:translateY(-2px);

}

.aiof-button:disabled{

    opacity:.5;

    cursor:not-allowed;

    transform:none;

}

/* ---------- Warning ---------- */

.aiof-warning{

    display:none;

}

/* ---------- Mobile ---------- */

@media (max-width:600px){

    .aiof-wrapper{

        padding:15px;

    }

    .aiof-form-box{

        padding:30px 20px;

    }

    .aiof-form-box h2{

        font-size:24px;

    }

    .aiof-description{

        font-size:14px;

    }

}