/*======================================================
LEVELS
Ostad Abjad AI
Clean Centered Version
======================================================*/


/*======================================================
PAGE
======================================================*/

#oab-levels-page{

    width:100%;

    height:auto !important;

    padding:20px;

    box-sizing:border-box;

    overflow:visible !important;

    font-family:'Cairo', sans-serif;

}


/*======================================================
HERO
======================================================*/

.oab-levels-hero{

    width:100%;

    text-align:center;

    margin:0 0 18px;

    padding:0;

}


/*======================================================
MAIN TITLE
======================================================*/

#oab-levels-page h2,
#oab-levels-page .oab-levels-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:0 0 6px;

    padding:0;

    color:#178245;

    font-family:'Cairo', sans-serif;

    font-size:30px !important;

    font-weight:800;

    line-height:1.3;

    text-align:center;

}


/*======================================================
MAIN TITLE ICON
======================================================*/

.oab-levels-title-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    line-height:1;

}


/*======================================================
SUBTITLE
======================================================*/

#oab-levels-page p,
#oab-levels-page .oab-levels-subtitle{

    margin:0;

    padding:0;

    color:#66736C;

    font-family:'Cairo', sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.5;

    text-align:center;

}


/*======================================================
CONTAINER
======================================================*/

#oab-levels-container{

    width:100%;

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/*======================================================
PROGRAM CARD
======================================================*/

.oab-level-program-card{

    width:100%;

    margin:0 0 14px;

    padding:16px 18px;

    box-sizing:border-box;

    background:rgba(241,245,223,.72);

    border:1.5px solid #CBD99B;
    
    border-radius:0;

    box-shadow:
        0 4px 12px rgba(0,0,0,.035);

    animation:oabLevelShow .35s ease;

}


/*======================================================
ANIMATION
======================================================*/

@keyframes oabLevelShow{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*======================================================
PROGRAM HEADER
======================================================*/

.oab-level-program-header{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin:0 0 12px;

    padding:0;

    text-align:center;

}


/*======================================================
PROGRAM ICON
نفس أيقونات صفحة البرامج
======================================================*/

.oab-level-program-icon{

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto;

    padding:0;

    font-size:26px;

    line-height:1;

    text-align:center;

}


.oab-level-program-icon img{

    display:block;

    width:28px !important;

    height:28px !important;

    max-width:28px !important;

    max-height:28px !important;

    margin:0 auto;

    object-fit:contain;

}


/*======================================================
PROGRAM TITLE
======================================================*/

.oab-level-program-header h3,
.oab-level-program-title{

    width:100%;

    margin:0;

    padding:0;

    color:#178245;

    font-family:'Cairo', sans-serif;

    font-size:22px !important;

    font-weight:800;

    line-height:1.35;

    text-align:center;

}


/*======================================================
LEVEL OPTIONS
======================================================*/

.oab-level-options{

    width:100%;

    display:flex;

    flex-wrap:wrap;

    align-items:stretch;

    justify-content:center;

    gap:10px;

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/*======================================================
LEVEL CARD
======================================================*/

.oab-level-option{

    position:relative;

    flex:
        0 0
        calc((100% - 50px) / 6);

    width:
        calc((100% - 50px) / 6);

    min-width:0;

    height:92px;

    margin:0;

    padding:8px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:7px;

    /*
    خلفية أوضح من خلفية القسم
    */

    background:#FFFFFF;

    border:1.5px solid #72B98A;

    border-radius:0;

    color:#23364A;

    cursor:pointer;

    text-align:center;

    font-family:'Cairo', sans-serif;

    box-shadow:
        0 4px 10px rgba(36,150,83,.07);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


/*======================================================
HOVER
======================================================*/

.oab-level-option:hover{

    background:#F8FCF7;

    border-color:#249653;

    box-shadow:
        0 6px 14px rgba(36,150,83,.12);

    transform:translateY(-2px);

}


/*======================================================
RADIO
======================================================*/

.oab-level-option input{

    position:absolute !important;

    opacity:0 !important;

    pointer-events:none !important;

}


/*======================================================
LEVEL ICON
دائرة خفيفة لتمييز الأيقونة
======================================================*/

.oab-level-option-icon{

    width:36px;

    height:36px;

    min-width:36px;

    min-height:36px;

    margin:0;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 36px;

    background:#EAF7EF;

    border:1px solid #CDEBD7;

    border-radius:50%;

    font-size:20px;

    line-height:1;

    text-align:center;

    box-sizing:border-box;

}


/*======================================================
LEVEL TITLE
======================================================*/

.oab-level-option-title{

    width:100%;

    margin:0;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    color:#23364A;

    font-family:'Cairo', sans-serif;

    font-size:14px;

    font-weight:700;

    line-height:1.35;

    text-align:center;

}


/*======================================================
SELECTED LEVEL
======================================================*/

.oab-level-option:has(input:checked),
.oab-level-option.active{

    background:#178245;

    border-color:#178245;

    color:#FFFFFF;

    box-shadow:
        0 6px 14px rgba(23,130,69,.18);

}


/*======================================================
SELECTED ICON
======================================================*/

.oab-level-option:has(input:checked)
.oab-level-option-icon,
.oab-level-option.active
.oab-level-option-icon{

    background:rgba(255,255,255,.92);

    border-color:rgba(255,255,255,.95);

}


/*======================================================
SELECTED TITLE
======================================================*/

.oab-level-option:has(input:checked)
.oab-level-option-title,
.oab-level-option.active
.oab-level-option-title{

    color:#FFFFFF;

}


/*======================================================
START FOOTER
======================================================*/

.oab-levels-footer{

    width:100%;

    margin:14px 0 0;

    padding:0;

    box-sizing:border-box;

}


/*======================================================
START BUTTON
======================================================*/

#oab-save-levels{

    width:100%;

    min-height:52px;

    margin:0;

    padding:10px 16px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    border:0;

    border-radius:0;

    background:#178245;

    color:#FFFFFF;

    font-family:'Cairo', sans-serif;

    font-size:18px;

    font-weight:800;

    line-height:1.3;

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(23,130,69,.12);

}


/*======================================================
START ICON
======================================================*/

.oab-levels-start-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    line-height:1;

}


/*======================================================
LAPTOP + DESKTOP
6 LEVELS IN ONE ROW
======================================================*/

@media (min-width:769px){

    .oab-level-options{

        display:flex;

        flex-wrap:wrap;

        justify-content:center;

        gap:10px;

    }


    .oab-level-option{

        flex:
            0 0
            calc((100% - 50px) / 6);

        width:
            calc((100% - 50px) / 6);

        height:92px;

    }

}


/*======================================================
MOBILE
======================================================*/

@media (max-width:768px){


    #oab-levels-page{

        width:100%;

        padding:12px 10px;

    }

.oab-level-option:last-child:nth-child(odd){

    grid-column:1 / -1;

    width:calc(50% - 4px);

    justify-self:center;

}

    /*==============================================
    HERO
    ==============================================*/

    .oab-levels-hero{

        margin-bottom:14px;

    }


    #oab-levels-page h2,
    #oab-levels-page .oab-levels-title{

        gap:7px;

        margin-bottom:4px;

        font-size:25px !important;

    }


    .oab-levels-title-icon{

        font-size:23px;

    }


    #oab-levels-page p,
    #oab-levels-page .oab-levels-subtitle{

        font-size:14px;

    }


    /*==============================================
    PROGRAM CARD
    ==============================================*/

    .oab-level-program-card{

        margin-bottom:12px;

        padding:14px 12px;

    }


    /*==============================================
    PROGRAM HEADER
    ==============================================*/

    .oab-level-program-header{

        gap:4px;

        margin-bottom:10px;

    }


    .oab-level-program-icon{

        width:30px;

        height:30px;

        font-size:24px;

    }


    .oab-level-program-icon img{

        width:26px !important;

        height:26px !important;

        max-width:26px !important;

        max-height:26px !important;

    }


    .oab-level-program-header h3,
    .oab-level-program-title{

        font-size:20px !important;

    }


    /*==============================================
    LEVELS
    ==============================================*/

    .oab-level-options{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:8px;

}


    .oab-level-option{

        width:100%;

        height:82px;

        min-height:82px;

        padding:7px;

        gap:6px;

    }


    /*==============================================
    LEVEL ICON
    ==============================================*/

    .oab-level-option-icon{

        width:34px;

        height:34px;

        min-width:34px;

        min-height:34px;

        flex:0 0 34px;

        margin:0;

        font-size:19px;

        display:flex;

        align-items:center;

        justify-content:center;

        text-align:center;

        background:#EAF7EF;

        border:1px solid #CDEBD7;

        border-radius:50%;

    }


    /*==============================================
    LEVEL TITLE
    ==============================================*/

    .oab-level-option-title{

        width:100%;

        margin:0;

        font-size:14px;

        display:flex;

        align-items:center;

        justify-content:center;

        text-align:center;

    }


    /*==============================================
    SELECTED ICON MOBILE
    ==============================================*/

    .oab-level-option:has(input:checked)
    .oab-level-option-icon,
    .oab-level-option.active
    .oab-level-option-icon{

        background:rgba(255,255,255,.92);

        border-color:rgba(255,255,255,.95);

    }


    /*==============================================
    START BUTTON
    ==============================================*/

    .oab-levels-footer{

        margin-top:10px;

    }


    #oab-save-levels{

        min-height:50px;

        font-size:17px;

    }


    .oab-levels-start-icon{

        font-size:17px;

    }

}


/*======================================================
SMALL MOBILE
======================================================*/

@media (max-width:420px){


    #oab-levels-page{

        padding:10px 8px;

    }


    #oab-levels-page h2,
    #oab-levels-page .oab-levels-title{

        font-size:23px !important;

    }


    .oab-level-program-card{

        padding:12px 10px;

    }


    .oab-level-option{

        height:78px;

        min-height:78px;

    }


    .oab-level-option-icon{

        width:32px;

        height:32px;

        min-width:32px;

        min-height:32px;

        flex-basis:32px;

        font-size:18px;

    }


    .oab-level-option-title{

        font-size:13px;

    }

}


/*======================================================
RTL
======================================================*/

body.rtl #oab-levels-page,
body.rtl #oab-levels-page button,
body.rtl #oab-levels-page label{

    font-family:'Cairo', sans-serif;

}


/*======================================================
REDUCED MOTION
======================================================*/

@media (prefers-reduced-motion:reduce){

    .oab-level-program-card{

        animation:none !important;

    }


    .oab-level-option{

        transition:none !important;

    }

}