/*
 * RN_COLLEGE_PREDICT_FORM_V1
 *
 * تصميم فورمات العلمي والأدبي فقط
 * مستوحى من فورمة توقع التنسيق.
 *
 * لا يستهدف:
 * - فورمة الصفحة الرئيسية
 * - فورمة صفحة الطالب
 * - فورمة توقع التنسيق الأصلية
 * - أي فورمة إدارة
 */

:root{
    --rn-cpf-blue:#0b63e5;
    --rn-cpf-blue-hover:#0957ca;
    --rn-cpf-title:#10213a;
    --rn-cpf-text:#26364d;
    --rn-cpf-muted:#64748b;
    --rn-cpf-border:#d8e1ec;
    --rn-cpf-soft:#f7f9fc;
    --rn-cpf-white:#ffffff;
}

/*
 * حماية إضافية:
 * حتى لو حاول الكود القديم إنشاء الدائرة،
 * تتحول إلى حاوية عادية بدون دائرة أو حركة.
 */

html body .resulta-search-orbit{
    position:static!important;
    isolation:auto!important;

    display:block!important;

    width:100%!important;
    min-height:0!important;
    height:auto!important;

    margin:22px 0 28px!important;
    padding:0!important;

    border:0!important;
    border-radius:0!important;

    background:transparent!important;
    box-shadow:none!important;

    overflow:visible!important;

    animation:none!important;
    transform:none!important;
}

html body .resulta-search-orbit::before,
html body .resulta-search-orbit::after{
    content:none!important;
    display:none!important;

    animation:none!important;
    transform:none!important;
}

/*
 * الصندوق مثل فكرة فورمة توقع التنسيق:
 * مستطيل أبيض بسيط وواضح.
 */

html body form.rn-science-v1-filter,
html body form.rncv21-filter{
    position:static!important;
    z-index:auto!important;

    display:block!important;

    width:100%!important;
    max-width:960px!important;
    min-height:0!important;

    margin:22px auto 28px!important;
    padding:24px!important;

    border:1px solid var(--rn-cpf-border)!important;
    border-radius:16px!important;

    background:var(--rn-cpf-white)!important;

    box-shadow:
        0 8px 24px
        rgba(15,31,58,.04)!important;

    backdrop-filter:none!important;

    overflow:visible!important;

    animation:none!important;
    transform:none!important;
}

/*
 * إلغاء تأثير resulta-search-form
 * في حالة وجود نسخة مخزنة من الصفحة.
 */

html body form.rn-science-v1-filter.resulta-search-form,
html body form.rncv21-filter.resulta-search-form{
    width:100%!important;
    max-width:960px!important;

    margin:22px auto 28px!important;
    padding:24px!important;

    border:1px solid var(--rn-cpf-border)!important;
    border-radius:16px!important;

    background:var(--rn-cpf-white)!important;
    box-shadow:
        0 8px 24px
        rgba(15,31,58,.04)!important;

    animation:none!important;
}

html body form.rn-science-v1-filter::before,
html body form.rn-science-v1-filter::after,
html body form.rncv21-filter::before,
html body form.rncv21-filter::after{
    content:none!important;
    display:none!important;
}

/*
 * اختيار شعبة العلمي.
 */

html body
form.rn-science-v1-filter
.rn-science-v1-branches{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;

    gap:8px!important;

    width:100%!important;

    margin:0 0 18px!important;
    padding:0!important;

    border:0!important;

    background:transparent!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-branches legend{
    width:100%!important;

    margin:0 0 7px!important;
    padding:0!important;

    color:var(--rn-cpf-title)!important;

    font-size:12px!important;
    line-height:1.6!important;
    font-weight:800!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-branches label{
    display:block!important;

    margin:0!important;
    padding:0!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-branches input{
    position:absolute!important;

    width:1px!important;
    height:1px!important;

    opacity:0!important;
    pointer-events:none!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-branches span{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    min-height:40px!important;

    margin:0!important;
    padding:7px 15px!important;

    border:1px solid var(--rn-cpf-border)!important;
    border-radius:9px!important;

    background:var(--rn-cpf-soft)!important;
    color:var(--rn-cpf-title)!important;

    box-shadow:none!important;

    font-size:12px!important;
    line-height:1.4!important;
    font-weight:800!important;

    cursor:pointer!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-branches
input:checked + span{
    border-color:var(--rn-cpf-blue)!important;

    background:var(--rn-cpf-blue)!important;
    color:#fff!important;
}

/*
 * شبكة الحقول:
 * ثلاثة حقول ثم الزر في سطر مستقل،
 * مثل فكرة فورمة التوقع.
 */

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid,

html body
form.rncv21-filter
.rncv21-grid{
    display:grid!important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        )!important;

    align-items:end!important;

    gap:14px!important;

    width:100%!important;
}

/*
 * عنوان كل حقل.
 */

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid label,

html body
form.rncv21-filter
.rncv21-grid label{
    display:grid!important;

    gap:7px!important;

    min-width:0!important;

    margin:0!important;
    padding:0!important;

    color:var(--rn-cpf-title)!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid label > span,

html body
form.rncv21-filter
.rncv21-grid label > span{
    display:block!important;

    margin:0!important;
    padding:0!important;

    color:var(--rn-cpf-title)!important;

    font-size:12px!important;
    line-height:1.6!important;
    font-weight:800!important;
}

/*
 * الحقول والقوائم.
 */

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid input,

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid select,

html body
form.rncv21-filter
.rncv21-grid input,

html body
form.rncv21-filter
.rncv21-grid select{
    display:block!important;

    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;

    margin:0!important;
    padding:0 14px!important;

    border:1px solid var(--rn-cpf-border)!important;
    border-radius:10px!important;

    outline:none!important;

    background:var(--rn-cpf-white)!important;
    color:var(--rn-cpf-text)!important;

    box-shadow:none!important;

    font-size:14px!important;
    line-height:1.5!important;
    font-weight:600!important;

    animation:none!important;
    transform:none!important;

    transition:
        border-color .16s ease,
        box-shadow .16s ease!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid input::placeholder,

html body
form.rncv21-filter
.rncv21-grid input::placeholder{
    color:#94a3b8!important;
    opacity:1!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid input:focus,

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid select:focus,

html body
form.rncv21-filter
.rncv21-grid input:focus,

html body
form.rncv21-filter
.rncv21-grid select:focus{
    border-color:var(--rn-cpf-blue)!important;

    box-shadow:
        0 0 0 3px
        rgba(11,99,229,.10)!important;
}

/*
 * زر عرض النتائج في سطر مستقل.
 */

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid
button[type="submit"],

html body
form.rncv21-filter
.rncv21-grid
button[type="submit"]{
    grid-column:1 / -1!important;

    justify-self:start!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:min(260px,100%)!important;
    min-width:0!important;
    min-height:52px!important;

    margin:2px 0 0!important;
    padding:0 22px!important;

    border:0!important;
    border-radius:10px!important;

    background:var(--rn-cpf-blue)!important;
    color:#fff!important;

    box-shadow:none!important;

    font-size:14px!important;
    line-height:1.4!important;
    font-weight:800!important;

    cursor:pointer!important;

    animation:none!important;
    transform:none!important;

    transition:
        background .16s ease!important;
}

html body
form.rn-science-v1-filter
.rn-science-v1-filter-grid
button[type="submit"]:hover,

html body
form.rncv21-filter
.rncv21-grid
button[type="submit"]:hover{
    background:var(--rn-cpf-blue-hover)!important;
}

/*
 * التابلت.
 */

@media(max-width:900px){

    html body
    form.rn-science-v1-filter
    .rn-science-v1-filter-grid,

    html body
    form.rncv21-filter
    .rncv21-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )!important;
    }
}

/*
 * الموبايل.
 */

@media(max-width:650px){

    html body form.rn-science-v1-filter,
    html body form.rncv21-filter,
    html body form.rn-science-v1-filter.resulta-search-form,
    html body form.rncv21-filter.resulta-search-form{
        width:100%!important;
        max-width:none!important;

        margin:16px auto 24px!important;
        padding:17px!important;

        border-radius:13px!important;
    }

    html body
    form.rn-science-v1-filter
    .rn-science-v1-filter-grid,

    html body
    form.rncv21-filter
    .rncv21-grid{
        grid-template-columns:1fr!important;
        gap:12px!important;
    }

    html body
    form.rn-science-v1-filter
    .rn-science-v1-filter-grid
    button[type="submit"],

    html body
    form.rncv21-filter
    .rncv21-grid
    button[type="submit"]{
        width:100%!important;
        justify-self:stretch!important;
    }

    html body
    form.rn-science-v1-filter
    .rn-science-v1-branches{
        display:grid!important;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            )!important;

        gap:6px!important;
    }

    html body
    form.rn-science-v1-filter
    .rn-science-v1-branches legend{
        grid-column:1 / -1!important;
    }

    html body
    form.rn-science-v1-filter
    .rn-science-v1-branches span{
        width:100%!important;
        min-height:42px!important;

        padding:6px 7px!important;

        text-align:center!important;

        font-size:11px!important;
    }
}

@media(max-width:400px){

    html body
    form.rn-science-v1-filter
    .rn-science-v1-branches{
        grid-template-columns:1fr!important;
    }
}