/*======================================================
WELCOME / LEARNING SCENE
Mishkaty
Final Unified Scene V9
======================================================*/


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

.oab-welcome{

    position:relative;

    width:100%;
    min-height:100%;

    margin:0;

    padding:18px 10px 20px;

    box-sizing:border-box;

    direction:rtl;

    background:transparent !important;

    overflow-x:hidden;
}


/*======================================================
FIXED LEARNING SCENE
التسجيل + البرامج + المستويات + بطاقة الطفل
======================================================*/

body.oab-learning-scene-active #oab-content{

    position:fixed;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #CFF2FF 0%,
            #E5F8FF 35%,
            #F9FDF3 60%,
            #FFFCE7 78%,
            #F8F3C9 100%
        );
}


/*======================================================
SKY SCENE
السحب + نقاط السماء
======================================================*/

body.oab-learning-scene-active #oab-content::before{

    content:"";

    position:fixed;

    top:var(--oab-header-height);
    left:0;
    right:0;
    bottom:0;

    z-index:0;

    pointer-events:none;

    background:

        /*==================================================
        سحب يسار
        ==================================================*/

        radial-gradient(
            ellipse 78px 28px at 5% 18%,
            rgba(255,255,255,.88) 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 50px 34px at 10% 15%,
            rgba(255,255,255,.90) 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 46px 26px at 15% 18%,
            rgba(255,255,255,.80) 0 98%,
            transparent 100%
        ),


        /* سحابة صغيرة يسار */

        radial-gradient(
            ellipse 34px 16px at 24% 29%,
            rgba(255,255,255,.58) 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 25px 14px at 27% 28%,
            rgba(255,255,255,.54) 0 98%,
            transparent 100%
        ),


        /*==================================================
        سحب يمين
        ==================================================*/

        radial-gradient(
            ellipse 76px 28px at 94% 20%,
            rgba(255,255,255,.86) 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 49px 33px at 89% 17%,
            rgba(255,255,255,.88) 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 45px 25px at 84% 20%,
            rgba(255,255,255,.78) 0 98%,
            transparent 100%
        ),


        /* سحابة صغيرة يمين */

        radial-gradient(
            ellipse 34px 16px at 76% 30%,
            rgba(255,255,255,.56) 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 25px 14px at 73% 29%,
            rgba(255,255,255,.52) 0 98%,
            transparent 100%
        ),


        /*==================================================
        نقاط ولمعات
        ==================================================*/

        radial-gradient(
            circle at 15% 10%,
            #FFD34E 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 22% 26%,
            #65C6EA 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 32% 13%,
            rgba(255,255,255,.96) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 72% 12%,
            #FFD34E 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 82% 31%,
            #FFB5CB 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 95% 35%,
            #67C8EA 0 3px,
            transparent 4px
        );
}


/* التسجيل بدون هيدر */

body.oab-learning-scene-active.oab-welcome-active
#oab-content::before{

    top:0;
}


/*======================================================
GROUND
أرضية خضراء ثابتة
======================================================*/

body.oab-learning-scene-active #oab-content::after{

    content:"";

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:78px;

    z-index:0;

    pointer-events:none;

    background:

        /*==================================================
        زهور يسار
        ==================================================*/

        radial-gradient(
            circle at 6% 54%,
            #FFD957 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 5.5% 47%,
            #FFFFFF 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 6.6% 47%,
            #FFFFFF 0 4px,
            transparent 5px
        ),


        radial-gradient(
            circle at 14% 67%,
            #FF9EBD 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 13.4% 61%,
            #FFFFFF 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 14.6% 61%,
            #FFFFFF 0 4px,
            transparent 5px
        ),


        radial-gradient(
            circle at 21% 57%,
            #9B8AF2 0 3px,
            transparent 4px
        ),


        /*==================================================
        زهور يمين
        ==================================================*/

        radial-gradient(
            circle at 86% 58%,
            #FFD957 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 85.4% 51%,
            #FFFFFF 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 86.6% 51%,
            #FFFFFF 0 4px,
            transparent 5px
        ),


        radial-gradient(
            circle at 94% 68%,
            #FF9EBD 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 92% 55%,
            #9B8AF2 0 3px,
            transparent 4px
        ),


        /*==================================================
        تلال خلفية
        ==================================================*/

        radial-gradient(
            ellipse 310px 72px at 18% 108%,
            #A5D96B 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 330px 70px at 50% 112%,
            #B8E17D 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 310px 72px at 82% 108%,
            #A0D568 0 98%,
            transparent 100%
        ),


        /*==================================================
        تلال أمامية
        ==================================================*/

        radial-gradient(
            ellipse 250px 76px at 4% 112%,
            #76C65B 0 98%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 250px 76px at 96% 112%,
            #70BF55 0 98%,
            transparent 100%
        ),


        /*==================================================
        عشب سفلي
        ==================================================*/

        linear-gradient(
            180deg,
            transparent 0%,
            transparent 52%,
            rgba(139,205,83,.34) 53%,
            rgba(111,190,70,.76) 76%,
            rgba(91,171,63,.92) 100%
        );
}


/*======================================================
CONTENT ABOVE BACKGROUND
======================================================*/

body.oab-learning-scene-active
#oab-content > section{

    position:relative;

    z-index:2;
}


/*======================================================
REGISTER CARD
======================================================*/

.oab-register-card{

    position:relative;

    z-index:2;

    width:100%;
    max-width:960px;

    margin:0 auto;

    padding:18px 24px;

    box-sizing:border-box;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;
}


/*======================================================
REGISTER BODY
======================================================*/

.oab-register-body{

    width:100%;

    margin:0;

    padding:0;

    background:transparent;
}


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

.oab-hero{

    position:relative;

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:2px;

    margin:0 0 10px;

    padding:8px 0 7px;
}


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

.oab-title{

    position:relative;

    margin:0;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    color:#168447;

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

    line-height:1.2;
}


.oab-title-text{

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

    font-size:25px !important;

    font-weight:900;

    letter-spacing:-.3px;
}


/*======================================================
HANDS
======================================================*/

.oab-hand{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    animation:
        mishkatyHand
        2.8s
        ease-in-out
        infinite;
}


.oab-hand-left{

    animation-delay:.35s;
}


@keyframes mishkatyHand{

    0%,
    80%,
    100%{
        transform:rotate(0deg);
    }

    85%{
        transform:rotate(12deg);
    }

    90%{
        transform:rotate(-8deg);
    }

    95%{
        transform:rotate(7deg);
    }
}


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

.oab-subtitle{

    margin:3px 0 0;

    color:#66757F;

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

    font-size:14px !important;

    font-weight:500;

    line-height:1.45;
}


/*======================================================
FORM
======================================================*/

.oab-form{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:9px;

    margin:0;

    padding:0;
}


/*======================================================
FIELD
======================================================*/

.oab-field{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:0;

    margin:0;
}


/*======================================================
NAME GRID
======================================================*/

.oab-name-grid{

    width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;
}


/*======================================================
WRAPPERS
======================================================*/

.oab-input-wrap,
.oab-select-wrap{

    position:relative;

    width:100%;
}


/*======================================================
FIELD ICON
======================================================*/

.oab-field-icon{

    position:absolute;

    right:12px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;
    height:22px;

    line-height:1;

    z-index:2;

    pointer-events:none;
}


.oab-field-icon-svg{

    display:flex;

    align-items:center;

    justify-content:center;
}


.oab-field-icon-svg svg{

    display:block;

    width:22px;
    height:22px;
}


/*======================================================
TYPOGRAPHY
======================================================*/

#oab-child-name,
#oab-child-last-name,
.oab-country-select,
.oab-age-select,
.oab-fiqh-select,
.oab-gender-btn,
.oab-gender-title,
.oab-start-btn,
.oab-login-area,
.oab-login-area span,
.oab-have-account-btn{

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

    font-size:14px !important;

    line-height:1.45;
}


/*======================================================
INPUTS
======================================================*/

#oab-child-name,
#oab-child-last-name{

    width:100%;

    height:46px;

    padding:0 38px 0 10px;

    box-sizing:border-box;

    border:1.5px solid #72B98A !important;

    border-radius:0 !important;

    background:#FEFDF2 !important;

    color:#23364A;

    font-weight:500;

    outline:none;

    text-align:right;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


#oab-child-name::placeholder,
#oab-child-last-name::placeholder{

    color:#98A59D;

    opacity:1;
}


/*======================================================
SELECTS
======================================================*/

.oab-country-select,
.oab-age-select,
.oab-fiqh-select{

    width:100%;

    height:46px;

    padding:0 38px 0 45px;

    box-sizing:border-box;

    border:1.5px solid #72B98A !important;

    border-radius:0 !important;

    background-color:#FEFDF2 !important;

    color:#23364A;

    font-weight:500;

    cursor:pointer;

    outline:none;

    color-scheme:light;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249653' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;

    background-repeat:no-repeat !important;

    background-position:left 14px center !important;

    background-size:18px 18px !important;
}


/*======================================================
FOCUS
======================================================*/

#oab-child-name:focus,
#oab-child-last-name:focus,
.oab-country-select:focus,
.oab-age-select:focus,
.oab-fiqh-select:focus{

    border-color:#159447 !important;

    background-color:#FEFDF2 !important;

    box-shadow:
        0 0 0 3px
        rgba(21,148,71,.10)
        !important;
}


/*======================================================
GENDER
======================================================*/

.oab-gender-grid{

    width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;
}


.oab-gender-btn,
.oab-gender-btn[data-gender="boy"],
.oab-gender-btn[data-gender="girl"]{

    width:100%;

    height:46px;

    border:1.5px solid #72B98A !important;

    border-radius:0 !important;

    background:#FEFDF2 !important;

    color:#44524A;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    font-weight:700;

    cursor:pointer;

    box-sizing:border-box;

    box-shadow:none;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}


.oab-gender-btn:hover{

    border-color:#249653 !important;

    transform:translateY(-1px);
}


.oab-gender-btn.active{

    background:#159447 !important;

    border-color:#159447 !important;

    color:#FFFFFF !important;
}


.oab-gender-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    line-height:1;
}


.oab-gender-title{

    line-height:1;
}


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

.oab-footer{

    width:100%;

    margin-top:9px;
}


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

.oab-start-btn{

    position:relative;

    overflow:hidden;

    width:100%;

    height:46px;

    border:0;

    border-radius:0 !important;

    background:
        linear-gradient(
            135deg,
            #24B95E 0%,
            #138A46 100%
        ) !important;

    color:#FFFFFF;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:
        0 7px 16px
        rgba(18,139,71,.16);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.oab-start-btn:hover{

    transform:translateY(-1px);

    box-shadow:
        0 9px 18px
        rgba(18,139,71,.20);
}


.oab-start-btn:active{

    transform:translateY(0);
}


/*======================================================
LOGIN AREA
======================================================*/

.oab-login-area{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:7px;

    margin-top:7px;

    color:#718078;

    font-weight:500;
}


.oab-have-account-btn{

    padding:0;

    border:0;

    border-radius:0 !important;

    background:transparent;

    color:#168447;

    font-weight:800;

    cursor:pointer;
}


.oab-have-account-btn:hover{

    text-decoration:underline;
}


.oab-login-separator{

    color:#9AAA9F;
}


/*======================================================
WELCOME LOGO
======================================================*/

.oab-welcome-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 8px;
}


.oab-welcome-logo-img{

    display:block;

    width:72px;

    height:auto;

    object-fit:contain;
}


/*======================================================
DESKTOP
======================================================*/

@media (min-width:769px){

    .oab-register-card{

        width:min(760px,78vw) !important;

        max-width:760px !important;

        padding-left:0 !important;

        padding-right:0 !important;
    }
}


/*======================================================
SHORT LAPTOP
======================================================*/

@media
(min-width:769px)
and
(max-height:850px){

    .oab-welcome{

        padding-top:12px;

        padding-bottom:12px;
    }


    .oab-welcome-logo-img{

        width:58px;
    }


    .oab-welcome-logo{

        margin-bottom:2px;
    }


    .oab-hero{

        margin-bottom:8px;

        padding-top:4px;

        padding-bottom:4px;
    }


    .oab-form{

        gap:6px;
    }


    #oab-child-name,
    #oab-child-last-name,
    .oab-country-select,
    .oab-age-select,
    .oab-fiqh-select,
    .oab-gender-btn,
    .oab-start-btn{

        height:40px;
    }


    .oab-footer{

        margin-top:6px;
    }
}


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

@media (max-width:768px){

    body.oab-learning-scene-active
    #oab-content .oab-welcome::after{

        top:calc(var(--oab-header-height) + 28px);

        left:8px;

        width:38px;
        height:48px;
    }


    body.oab-learning-scene-active.oab-welcome-active
    #oab-content .oab-welcome::before{

        top:16px;
    }


    body.oab-learning-scene-active.oab-welcome-active
    #oab-content .oab-welcome::after{

        top:26px;
    }


    body.oab-learning-scene-active
    #oab-content::before{

        background:

            /* سحب يسار */

            radial-gradient(
                ellipse 40px 17px
                at 3% 15%,
                rgba(255,255,255,.82)
                0 98%,
                transparent 100%
            ),

            radial-gradient(
                ellipse 31px 21px
                at 9% 13%,
                rgba(255,255,255,.84)
                0 98%,
                transparent 100%
            ),

            radial-gradient(
                ellipse 27px 14px
                at 15% 17%,
                rgba(255,255,255,.68)
                0 98%,
                transparent 100%
            ),


            /* سحب يمين */

            radial-gradient(
                ellipse 40px 17px
                at 97% 18%,
                rgba(255,255,255,.80)
                0 98%,
                transparent 100%
            ),

            radial-gradient(
                ellipse 31px 21px
                at 91% 16%,
                rgba(255,255,255,.82)
                0 98%,
                transparent 100%
            ),

            radial-gradient(
                ellipse 27px 14px
                at 85% 20%,
                rgba(255,255,255,.66)
                0 98%,
                transparent 100%
            ),


            /* نقاط */

            radial-gradient(
                circle at 16% 28%,
                #62C7EE 0 2px,
                transparent 3px
            ),

            radial-gradient(
                circle at 85% 30%,
                #FFB9CD 0 2px,
                transparent 3px
            ),

            radial-gradient(
                circle at 76% 9%,
                #FFD750 0 2px,
                transparent 3px
            );
    }


    body.oab-learning-scene-active
    #oab-content::after{

        height:58px;

        background:

            /* زهور */

            radial-gradient(
                circle at 7% 57%,
                #FFD957 0 3px,
                transparent 4px
            ),

            radial-gradient(
                circle at 15% 69%,
                #FF9EBD 0 3px,
                transparent 4px
            ),

            radial-gradient(
                circle at 85% 63%,
                #FFD957 0 3px,
                transparent 4px
            ),

            radial-gradient(
                circle at 94% 70%,
                #FF9EBD 0 3px,
                transparent 4px
            ),


            /* تلال */

            radial-gradient(
                ellipse 130px 42px
                at 10% 108%,
                #78C65A 0 98%,
                transparent 100%
            ),

            radial-gradient(
                ellipse 160px 38px
                at 50% 112%,
                #A6D96D 0 98%,
                transparent 100%
            ),

            radial-gradient(
                ellipse 130px 42px
                at 90% 108%,
                #72BF55 0 98%,
                transparent 100%
            ),

            linear-gradient(
                180deg,
                transparent 0%,
                transparent 56%,
                rgba(112,190,72,.76) 57%,
                rgba(94,173,64,.92) 100%
            );
    }


    .oab-welcome{

        width:100%;

        min-height:100%;

        padding:10px 0 14px;
    }


    .oab-register-card{

        width:90% !important;

        max-width:460px !important;

        margin:0 auto;

        padding:12px 2px 8px;
    }


    .oab-hero{

        margin:0 0 8px;

        padding-top:4px;

        padding-bottom:4px;
    }


    .oab-title{

        gap:5px;
    }


    .oab-title-text{

        font-size:25px !important;
    }


    .oab-hand{

        font-size:15px;
    }


    .oab-welcome-logo{

        margin-bottom:2px;
    }


    .oab-welcome-logo-img{

        width:60px;
    }


    .oab-form{

        gap:7px;
    }


    .oab-name-grid{

        gap:6px;
    }


    #oab-child-name,
    #oab-child-last-name,
    .oab-country-select,
    .oab-age-select,
    .oab-fiqh-select,
    .oab-gender-btn,
    .oab-start-btn{

        height:43px;
    }


    #oab-child-name,
    #oab-child-last-name{

        padding-right:36px;
    }


    .oab-country-select,
    .oab-age-select,
    .oab-fiqh-select{

        padding-right:36px;

        background-position:
            left 11px center !important;
    }


    .oab-field-icon{

        right:9px;

        width:20px;

        height:20px;
    }


    .oab-field-icon-svg svg{

        width:20px;

        height:20px;
    }


    .oab-gender-grid{

        grid-template-columns:1fr 1fr;

        gap:6px;
    }


    .oab-footer{

        margin-top:7px;
    }


    .oab-login-area{

        margin-top:5px;
    }
}


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

@media (max-width:420px){

    .oab-register-card{

        width:92% !important;
    }


    .oab-title-text{

        font-size:24px !important;
    }


    .oab-subtitle{

        font-size:13px !important;
    }


    .oab-name-grid{

        gap:5px;
    }


    #oab-child-name,
    #oab-child-last-name{

        padding-right:32px;
    }


    .oab-field-icon{

        right:7px;
    }

    body.oab-learning-scene-active
    #oab-content .oab-welcome::after{

        width:34px;
        height:43px;

        left:6px;
    }
}


/*======================================================
SCROLL PAGES
الخلفية ثابتة والمحتوى يتحرك فقط
======================================================*/

body.oab-learning-scene-active.oab-levels-active
#oab-content,

body.oab-learning-scene-active.oab-child-card-active
#oab-content{

    overflow-y:auto !important;

    overflow-x:hidden !important;
}


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

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

    .oab-hand{

        animation:none !important;
    }


    .oab-start-btn,
    .oab-gender-btn{

        transition:none !important;
    }
}

/*======================================================
LOGIN LINKS - SOFT BUTTON STYLE
======================================================*/

.oab-have-account-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:30px;

    padding:3px 13px !important;

    border:1px solid rgba(22,132,71,.25) !important;

    border-radius:9px !important;

    background:rgba(255,253,242,.82) !important;

    color:#168447 !important;

    font-weight:800 !important;

    text-decoration:none !important;

    box-shadow:
        0 3px 9px rgba(20,110,60,.08);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.oab-have-account-btn:hover{

    background:#FFFDF2 !important;

    border-color:rgba(22,132,71,.48) !important;

    transform:translateY(-1px);

    text-decoration:none !important;
}


/* الفاصل بين الرابطين */

.oab-login-separator{

    color:#7E9688 !important;

    font-weight:600;

    opacity:.75;
}


/* الهاتف */

@media(max-width:768px){

    .oab-have-account-btn{

        min-height:28px;

        padding:2px 10px !important;

        border-radius:8px !important;

    }

}

/*======================================================
START BUTTON SPACING
توحيد المسافة مع بقية الحقول
======================================================*/

.oab-footer{
    margin-top:0 !important;
}

/*======================================================
MOBILE - RAISE PROGRAMS CONTENT
======================================================*/

@media(max-width:768px){

    #oab-programs-page .oab-register-card{
        transform:translateY(-30px);
    }

}

/*======================================================
MOBILE - WIDER REGISTRATION CONTENT
توسيع حقول التسجيل والأزرار على الهاتف فقط
======================================================*/

@media (max-width:768px){

    #oab-welcome-page .oab-register-card{
        width:96% !important;
        max-width:460px !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    #oab-welcome-page .oab-form,
    #oab-welcome-page .oab-name-grid,
    #oab-welcome-page .oab-field,
    #oab-welcome-page .oab-footer,
    #oab-welcome-page .oab-start-btn,
    #oab-welcome-page .oab-login-area{
        width:100% !important;
        max-width:none !important;
    }

}

@media (max-width:420px){

    #oab-welcome-page .oab-register-card{
        width:96% !important;
    }

}