/*======================================================
LAYOUT
Ostad Abjad AI
Version 14.3
======================================================*/

:root{

    --oab-header-height:0px;

    --oab-page-width:1320px;

    --oab-radius:24px;

}


/*======================================================
ROOT
======================================================*/

html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    overflow:hidden;

}


/*======================================================
APP
======================================================*/

#oab-app{

    width:100%;

    height:100dvh;

    overflow:hidden;

}


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

#oab-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:var(--oab-header-height);

    z-index:9999;

}


/*======================================================
CONTENT
======================================================*/

#oab-content{

    position:fixed;

    top:0;

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

    overflow:hidden !important;

    padding:12px;

    box-sizing:border-box;

}


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

.oab-page{

    width:100%;

    max-width:var(--oab-page-width);

    margin:0 auto;

}


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

.oab-card{

    width:100%;

    background:#FFF;

    border-radius:var(--oab-radius);

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}


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

.oab-register-card{

    width:100%;

    max-width:var(--oab-page-width);

    margin:0 auto;

    box-sizing:border-box;

}


/*======================================================
PROGRAMS
======================================================*/

#oab-programs-page{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    overflow:hidden !important;

}


#oab-programs-page[style*="display:none"]{

    display:none !important;

}


#oab-programs-page[style*="display:block"]{

    display:flex !important;

}


/*======================================================
LEVELS ONLY SCROLL
======================================================*/

body.oab-levels-active #oab-content{

    overflow-y:auto !important;

    overflow-x:hidden !important;

}


/*======================================================
CHAT ACTIVE
======================================================*/

body.oab-chat-active #oab-content{

    display:flex;

    flex-direction:column;

    width:100%;

    height:auto;

    overflow:hidden !important;

}


/*======================================================
CHAT AREA
======================================================*/

body.oab-chat-active #oab-chat{

    display:block;

    flex:1 1 auto;

    width:100%;

    min-height:0;

    overflow-y:auto;
    overflow-x:hidden;

    box-sizing:border-box;

}


/*======================================================
CHAT INPUT
======================================================*/

body.oab-chat-active #oab-input{

    display:block;

    flex:0 0 auto;

    width:100%;

    box-sizing:border-box;

}


/*======================================================
CHAT WIDTH
======================================================*/

body.oab-chat-active #oab-chat .oab-chat-container,
body.oab-chat-active #oab-input .oab-input-card{

    width:min(92%, 1480px);

    max-width:none;

    margin-left:auto;
    margin-right:auto;

}


/*======================================================
LARGE SCREEN
======================================================*/

@media (min-width:1600px){

    body.oab-chat-active #oab-chat .oab-chat-container,
    body.oab-chat-active #oab-input .oab-input-card{

        width:min(88%, 1600px);

    }

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:768px){

    :root{

        --oab-header-height:0px;

    }


    #oab-content{

        padding:10px;

    }


    .oab-card,
    .oab-register-card{

        border-radius:20px;

    }


    /*
    ======================================================
    PROGRAMS MOBILE
    يبدأ المحتوى من أعلى الصفحة بدل التوسيط العمودي
    ======================================================
    */

    #oab-programs-page{

        align-items:flex-start !important;

        justify-content:center;

    }


    /*
     * إلغاء أي رفع يدوي سابق في programs.css
     */

    #oab-programs-page .oab-register-card{

        transform:none !important;

    }


    body.oab-chat-active #oab-content{

        display:flex;

        flex-direction:column;

        width:100%;

        height:auto;

        padding:0;

        overflow:hidden !important;

    }

}


/*======================================================
WITHOUT HEADER
إلغاء مساحة الهيدر من التطبيق بالكامل
======================================================*/

body.oab-welcome-active #oab-content{

    top:0 !important;

    padding:0 !important;

}


/*======================================================
PAGE TRANSITION
Mishkaty
======================================================*/

@keyframes oabPageEnter {

    from {

        opacity:0;

        transform:translateY(10px);

    }

    to {

        opacity:1;

        transform:translateY(0);

    }

}


/* صفحات التطبيق */

#oab-welcome-page,
#oab-programs-page,
#oab-levels-page,
#oab-child-card-page,
#oab-parent-page,
#oab-voice-chat-page{

    animation:oabPageEnter .32s ease-out both;

}


/* المحادثة */

#oab-chat{

    animation:oabPageEnter .28s ease-out both;

}


/* احترام إعداد تقليل الحركة في الجهاز */

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

    #oab-welcome-page,
    #oab-programs-page,
    #oab-levels-page,
    #oab-child-card-page,
    #oab-parent-page,
    #oab-voice-chat-page,
    #oab-chat{

        animation:none !important;

    }

}

/*======================================================
PROGRAMS MOBILE - NO HEADER GAP
======================================================*/

@media (max-width:768px){

    body.oab-learning-scene-active:not(.oab-welcome-active) #oab-content{
        top:0;
    }

}

@media (max-width:768px){

    #oab-programs-page .oab-hero{
        transform:translateY(6px);
    }

}

/*======================================================
PAGE TRANSITION LOADER
Mishkaty
======================================================*/

#oab-transition-loader{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .18s ease,
        visibility .18s ease;

}


/*======================================================
VISIBLE
======================================================*/

#oab-transition-loader.is-visible{

    opacity:1;
    visibility:visible;

    pointer-events:auto;

}


/*======================================================
LOADER BOX
======================================================*/

.oab-transition-loader-box{

    min-width:150px;

    padding:20px 24px 18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:rgba(255,253,233,.94);

    border:1.5px solid rgba(36,150,83,.24);

    border-radius:22px;

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

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

}


/*======================================================
SPINNER
======================================================*/

.oab-transition-spinner{

    position:relative;

    width:52px;
    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:4px solid rgba(36,150,83,.18);

    border-top-color:#249653;

    border-right-color:#178245;

    animation:
        oabTransitionSpin .75s linear infinite;

}


/*======================================================
STAR
======================================================*/

.oab-transition-star{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    line-height:1;

    /*
    تبقى النجمة ثابتة
    بينما الدائرة تدور
    */

    animation:
        oabTransitionStar .75s linear infinite reverse;

}


/*======================================================
TEXT
======================================================*/

.oab-transition-text{

    color:#178245;

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

    font-size:15px;

    font-weight:800;

    line-height:1.4;

    text-align:center;

    white-space:nowrap;

}


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

@keyframes oabTransitionSpin{

    to{

        transform:rotate(360deg);

    }

}


/*======================================================
KEEP STAR STRAIGHT
======================================================*/

@keyframes oabTransitionStar{

    to{

        transform:rotate(360deg);

    }

}


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

@media(max-width:768px){

    .oab-transition-loader-box{

        min-width:135px;

        padding:18px 20px 16px;

        border-radius:20px;

        gap:10px;

    }


    .oab-transition-spinner{

        width:46px;
        height:46px;

        border-width:4px;

    }


    .oab-transition-star{

        font-size:18px;

    }


    .oab-transition-text{

        font-size:14px;

    }

}


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

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

    .oab-transition-spinner,
    .oab-transition-star{

        animation:none !important;

    }

}

/*======================================================
MISHKATY GLOBAL FONT
======================================================*/

#oab-content,
#oab-content *,
#oab-content button,
#oab-content input,
#oab-content textarea,
#oab-content select{

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

}