/*======================================================
CHILD CARD
Mishkaty
Version 3.9
======================================================*/


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

.oab-child-card{

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

    margin:0 auto;

    padding:0 20px 20px;

    background:#FFFDF5;

    border:1.5px solid #178245;

    border-radius:28px 28px 0 0;

    box-sizing:border-box;

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);

    overflow:hidden;

}


/*======================================================
CHILD PROFILE
======================================================*/

.oab-child-profile{

    position:relative;

    width:calc(100% + 40px);

    min-height:178px;

    margin:
        0
        -20px
        14px;

    padding:
        14px
        20px
        0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-end;

    box-sizing:border-box;

    background:
        linear-gradient(
            135deg,
            #EAF5EA 0%,
            #C6E0CF 48%,
            #76AA8D 100%
        );

    border:
        0.5px solid
        #178245;

    border-radius:
        26px
        26px
        0
        0;

    overflow:hidden;

}


/*======================================================
PROFILE DECORATION
======================================================*/

.oab-child-profile::before{

    content:"";

    position:absolute;

    width:210px;
    height:210px;

    top:-125px;
    right:-60px;

    border-radius:50%;

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

    pointer-events:none;

}


.oab-child-profile::after{

    content:"";

    position:absolute;

    width:150px;
    height:150px;

    left:-55px;
    bottom:35px;

    border-radius:50%;

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

    pointer-events:none;

}


/*======================================================
AVATAR
======================================================*/

.oab-child-avatar{

    position:relative;

    z-index:2;

    width:120px;
    height:120px;

    flex:0 0 120px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:
        0
        0
        10px;

    background:#FFFDF5;

    border:
        4px solid
        #FFFFFF;

    border-radius:50%;

    box-sizing:border-box;

    overflow:visible;

    cursor:pointer;

    box-shadow:
        0 6px 17px rgba(0,0,0,.16),
        0 0 0 3px rgba(23,130,69,.30);

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}


.oab-child-avatar:hover{

    transform:
        translateY(-2px)
        scale(1.025);

    box-shadow:
        0 9px 21px rgba(0,0,0,.20),
        0 0 0 3px rgba(23,130,69,.42);

}


.oab-child-avatar:active{

    transform:scale(.98);

}


/*======================================================
DEFAULT AVATAR
======================================================*/

.oab-child-avatar-default{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:70px;

    line-height:1;

    border-radius:50%;

    overflow:hidden;

    user-select:none;

}


/*======================================================
UPLOADED AVATAR
======================================================*/

.oab-child-avatar-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

}


/*======================================================
CAMERA
======================================================*/

.oab-child-avatar-edit{

    position:absolute;

    right:-8px;
    bottom:-3px;

    width:28px;
    height:28px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#FFFFFF;

    border:1.5px solid #178245;

    border-radius:50%;

    font-size:13px;

    line-height:1;

    box-sizing:border-box;

    z-index:3;

    pointer-events:none;

    box-shadow:
        0 3px 7px rgba(0,0,0,.16);

}


/*======================================================
PROFILE INFO BAR
======================================================*/

.oab-child-profile-name{

    position:relative;

    z-index:2;

    width:calc(100% + 40px);

    min-height:56px;

    margin:
        0
        -20px;

    padding:
        7px
        24px;

    display:grid;

    grid-template-columns:
        minmax(150px,1fr)
        minmax(240px,1.35fr)
        minmax(150px,1fr);

    align-items:center;

    box-sizing:border-box;

    background:
        linear-gradient(
            90deg,
            #096F35 0%,
            #178245 50%,
            #096F35 100%
        );

    color:#FFFFFF;

    border-top:
        1px solid rgba(255,255,255,.18);

    text-align:center;

}


/*======================================================
PROFILE META
======================================================*/

.oab-profile-meta{

    min-width:0;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    color:#FFFFFF;

    line-height:1.2;

}


.oab-profile-meta-icon{

    flex:0 0 auto;

    font-size:20px;

    line-height:1;

}


.oab-profile-meta-label{

    color:
        rgba(255,255,255,.78);

    font-size:14px;

    font-weight:600;

}


.oab-profile-meta strong{

    color:#FFFFFF;

    font-size:17px;

    font-weight:800;

}


/*======================================================
PROFILE MAIN NAME
======================================================*/

.oab-profile-main-name{

    min-width:0;

    padding:
        0
        22px;

    border-right:
        1px solid
        rgba(255,255,255,.28);

    border-left:
        1px solid
        rgba(255,255,255,.28);

}


.oab-profile-main-name strong{

    display:block;

    color:#FFFFFF;

    font-size:25px;

    font-weight:800;

    line-height:1.3;

    overflow-wrap:anywhere;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.14);

}


/*======================================================
CHILD SERVICES
======================================================*/

.oab-child-services{

    width:100%;

    display:grid;

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

    gap:10px;

    margin:
        -4px
        0
        8px;

}


.oab-child-service-btn{

    min-width:0;
    min-height:54px;

    padding:
        8px
        14px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    box-sizing:border-box;

    background:#FFFFFF;

    border:
        1.5px solid
        #178245;

    border-radius:0;

    color:#178245;

    font-family:inherit;

    cursor:pointer;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.05);

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

}


.oab-child-service-btn:hover{

    background:#F3FAF1;

    border-color:#AFCFAC;

    transform:translateY(-1px);

    box-shadow:
        0 5px 13px
        rgba(23,130,69,.10);

}


.oab-child-service-btn:active{

    transform:scale(.985);

}


.oab-child-service-icon{

    width:30px;
    height:30px;

    flex:0 0 30px;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#178245;

}


.oab-child-service-icon svg{

    width:25px;
    height:25px;

    display:block;

}


.oab-child-service-text{

    min-width:0;

    display:block;

}


.oab-child-service-text strong{

    display:block;

    color:#178245;

    font-size:16px;

    font-weight:800;

    line-height:1.3;

    white-space:nowrap;

}



/*======================================================
GENERAL SECTIONS
======================================================*/

.oab-child-section{

    margin-bottom:16px;

    padding:14px;

    background:#FFFEF8;

    border:2px solid #F3E7B8;

    border-radius:0;

    box-sizing:border-box;

}


.oab-child-section h3{

    margin:
        0
        0
        12px;

    color:#178245;

    font-size:22px;

    font-weight:800;

    text-align:center;

    line-height:1.35;

}


/*======================================================
GENERAL CHAT
======================================================*/

.oab-general-chat-section{

    width:100%;

    margin:0 0 6px;

    padding:0;

    background:transparent;

    border:none;

}


.oab-general-chat-button{

    width:100%;

    min-height:60px;

    padding:11px 20px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    box-sizing:border-box;

    border:1.5px solid #0F6E39;

    border-radius:0;

    background:#178245;

    color:#FFFFFF;

    font-family:inherit;

    font-size:21px;

    font-weight:800;

    line-height:1.3;

    cursor:pointer;

    box-shadow:
        0 7px 16px
        rgba(23,130,69,.20);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.oab-general-chat-button
.oab-action-icon{

    font-size:28px;

    line-height:1;

}


.oab-general-chat-button:hover{

    background:#136F3B;

    transform:translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(23,130,69,.24);

}


.oab-general-chat-button:active{

    transform:scale(.985);

}


/*======================================================
LIVE STREAM
======================================================*/

.oab-live-stream-section{

    width:100%;

    margin:0 0 8px;

    padding:0;

    background:transparent;

    border:none;

}


.oab-live-stream-button{

    width:100%;

    min-height:60px;

    padding:11px 20px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    box-sizing:border-box;

    border:1.5px solid #178245;

    border-radius:0;

    background:#FFFFFF;

    color:#178245;

    font-family:inherit;

    font-size:21px;

    font-weight:800;

    line-height:1.3;

    cursor:pointer;

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

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.oab-live-stream-button
.oab-action-icon{

    font-size:28px;

    line-height:1;

}


.oab-live-stream-button:hover{

    background:#F3FAF1;

    transform:translateY(-2px);

    box-shadow:
        0 7px 17px
        rgba(23,130,69,.15);

}


.oab-live-stream-button:active{

    transform:scale(.985);

}


/*======================================================
PROGRAMS PANEL BACKGROUND
Same visual language as Levels page
======================================================*/

.oab-child-section:not(.oab-general-chat-section):not(.oab-live-stream-section):not(.oab-levels-section){

    background:
        rgba(209,228,170,.35);

    border:
        1.5px solid
        rgba(186,208,124,.60);

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

}


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

.oab-child-section:not(.oab-levels-section)
.oab-child-list{

    display:grid;

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

    gap:10px;

}


.oab-child-section:not(.oab-levels-section)
.oab-child-item{

    min-width:0;

    min-height:92px;

    padding:10px 6px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:6px;

    background:#FFFFFF;

    border:1.5px solid #178245;

    border-radius:0;

    box-shadow:
        0 3px 8px rgba(0,0,0,.04);

    box-sizing:border-box;

}


/*======================================================
PROGRAM BUTTON
======================================================*/

.oab-program-start{

    position:relative;

    width:100%;

    font-family:inherit;

    cursor:pointer;

    overflow:hidden;

    appearance:none;
    -webkit-appearance:none;

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

}


.oab-program-start:hover{

    transform:translateY(-2px);

    border-color:#BFDDBA !important;

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

}


.oab-program-start:active{

    transform:scale(.96);

}


/*======================================================
PROGRAM PRESS GLOW
======================================================*/

.oab-program-start::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:20px;
    height:20px;

    border-radius:50%;

    background:
        rgba(23,130,69,.20);

    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(.2);

    pointer-events:none;

}


.oab-program-start:active::after{

    animation:
        oabProgramGlow
        .42s
        ease-out;

}


@keyframes oabProgramGlow{

    0%{

        opacity:.7;

        transform:
            translate(-50%,-50%)
            scale(.2);

    }

    60%{

        opacity:.28;

    }

    100%{

        width:220px;
        height:220px;

        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(1);

    }

}


/*======================================================
PROGRAM ICON PRESS
======================================================*/

.oab-program-start:active
.oab-child-item-icon{

    animation:
        oabProgramIconPress
        .35s
        ease;

}


@keyframes oabProgramIconPress{

    0%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.16);
    }

    100%{
        transform:scale(1);
    }

}


.oab-child-section:not(.oab-levels-section)
.oab-child-item-icon{

    display:block;

    font-size:31px;

    line-height:1;

}


.oab-child-section:not(.oab-levels-section)
.oab-child-item strong{

    color:#178245;

    font-size:15px;

    font-weight:700;

    text-align:center;

    line-height:1.35;

}


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

.oab-child-levels-trigger{

    width:100%;

    margin:
        8px
        0
        0;

}


.oab-child-levels-button{

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

    padding:
        8px
        14px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    box-sizing:border-box;

    background:#FFFFFF;

    border:
        1.5px solid
        #178245;

    border-radius:0;

    color:#178245;

    font-family:inherit;

    font-size:16px;

    font-weight:800;

    line-height:1.3;

    cursor:pointer;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.05);

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

}


.oab-child-levels-button:hover{

    background:#F3FAF1;

    border-color:#178245;

    transform:translateY(-1px);

    box-shadow:
        0 5px 13px
        rgba(23,130,69,.10);

}


.oab-child-levels-button:active{

    transform:scale(.985);

}


.oab-child-levels-icon{

    flex:0 0 auto;

    font-size:24px;

    line-height:1;

}


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

.oab-levels-modal{

    position:fixed;

    inset:0;

    z-index:999999;

    display:none;

    align-items:center;
    justify-content:center;

    padding:18px;

    box-sizing:border-box;

    direction:rtl;

}


.oab-levels-modal.is-open{

    display:flex !important;

}


.oab-levels-modal-backdrop{

    position:absolute;

    inset:0;

    background:
        rgba(20,45,31,.56);

}


.oab-levels-modal-box{

    position:relative;

    z-index:2;

    width:100%;
    max-width:620px;
    max-height:82vh;

    padding:
        22px
        20px
        20px;

    box-sizing:border-box;

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

    background:#FFFDF5;

    border:
        1.5px solid
        #178245;

    border-radius:0;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.22);

}


.oab-levels-modal-close{

    position:absolute;

    top:10px;
    left:12px;

    width:36px;
    height:36px;

    padding:0;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#FFFFFF;

    border:
        1.5px solid
        #178245;

    border-radius:0;

    color:#178245;

    font-family:Arial,sans-serif;

    font-size:25px;

    font-weight:400;

    line-height:36px;

    text-align:center;

    cursor:pointer;

}


.oab-levels-modal-header{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    margin:
        4px
        44px
        18px;

    color:#178245;

}


.oab-levels-modal-icon{

    font-size:27px;

    line-height:1;

}


.oab-levels-modal-header h3{

    margin:0;

    color:#178245;

    font-size:23px;

    font-weight:800;

    line-height:1.3;

}


.oab-levels-modal-list{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.oab-levels-modal-item{

    width:100%;

    min-height:54px;

    padding:
        9px
        12px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    box-sizing:border-box;

    background:#FFFFFF;

    border:
        1.5px solid
        #178245;

    border-radius:0;

}


.oab-levels-modal-program{

    min-width:0;

    display:flex;

    align-items:center;

    gap:9px;

}


.oab-levels-modal-program-icon{

    flex:0 0 auto;

    font-size:24px;

    line-height:1;

}


.oab-levels-modal-program strong{

    color:#23364A;

    font-size:16px;

    font-weight:800;

    line-height:1.3;

}


.oab-levels-modal-value{

    flex:0 0 auto;

    padding:
        5px
        10px;

    background:#EDF7EA;

    border:
        1px solid
        #CFE5C8;

    border-radius:0;

    color:#178245;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

}


.oab-levels-modal-empty{

    padding:18px;

    background:#FFFFFF;

    border:
        1.5px solid
        #178245;

    color:#23364A;

    font-size:15px;

    font-weight:700;

    text-align:center;

}


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

.oab-levels-list{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.oab-level-item{

    width:100%;

    min-height:48px;

    padding:7px 10px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    background:#FFFFFF;

    border:1.5px solid #178245;

    border-radius:0;

    box-sizing:border-box;

}


.oab-level-program{

    min-width:0;

    display:flex;

    align-items:center;

    gap:8px;

}


.oab-level-program
.oab-child-item-icon{

    flex:0 0 auto;

    font-size:22px;

    line-height:1;

}


.oab-level-program strong{

    color:#23364A;

    font-size:15px;

    font-weight:700;

    line-height:1.3;

}


.oab-level-value{

    flex:0 0 auto;

    padding:5px 10px;

    background:#EDF7EA;

    border-radius:0;

    color:#178245;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

}


.oab-level-value strong{

    color:#178245;

    font-weight:800;

}


/*======================================================
ACTIONS
======================================================*/

.oab-child-actions{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

    margin-top:18px;

    direction:ltr;

}


.oab-child-actions button{

    min-height:54px;

    padding:10px 16px;

    border:none;

    border-radius:0;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    font-family:inherit;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    box-sizing:border-box;

    direction:rtl;

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

}


#oab-edit-child{

    background:#EFF8EE;

    color:#178245;

    border:1px solid #CFE5C8;

}


#oab-start-learning{

    background:#178245;

    color:#FFFFFF;

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

}


.oab-action-icon{

    font-size:21px;

    line-height:1;

}


.oab-child-actions button:hover{

    transform:translateY(-2px);

}


#oab-edit-child:hover{

    background:#E5F4E2;

}


#oab-start-learning:hover{

    background:#136F3B;

}


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

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

    overflow-y:auto !important;

    overflow-x:hidden !important;

}


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

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

    .oab-child-card{

        padding:
            0
            16px
            16px;

    }


    .oab-child-profile{

        width:
            calc(100% + 32px);

        min-height:160px;

        margin:
            0
            -16px
            12px;

        padding:
            12px
            16px
            0;

    }


    .oab-child-avatar{

        width:105px;
        height:105px;

        flex-basis:105px;

        margin-bottom:8px;

    }


    .oab-child-avatar-default{

        font-size:61px;

    }


    .oab-child-avatar-edit{

        width:29px;
        height:29px;

        font-size:14px;

    }


    .oab-child-profile-name{

        width:
            calc(100% + 32px);

        min-height:50px;

        margin:
            0
            -16px;

        padding:
            6px
            20px;

    }


    .oab-profile-main-name strong{

        font-size:22px;

    }


    .oab-profile-meta strong{

        font-size:16px;

    }


    .oab-profile-meta-label{

        font-size:13px;

    }


    .oab-child-section{

        padding:12px;

        margin-bottom:13px;

    }


    .oab-general-chat-section,
    .oab-live-stream-section{

        padding:0;

    }


    .oab-child-section:not(.oab-levels-section)
    .oab-child-item{

        min-height:80px;

    }

}


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

@media (max-width:768px){

    .oab-child-card{

        width:100%;
        max-width:100%;

        padding:
            0
            10px
            10px;

        border-radius:
            22px
            22px
            0
            0;

        box-shadow:none;

    }


    /* PROFILE */

    .oab-child-profile{

        width:
            calc(100% + 20px);

        min-height:145px;

        margin:
            0
            -10px
            9px;

        padding:
            10px
            10px
            0;

        border-radius:
            20px
            20px
            0
            0;

    }


    .oab-child-avatar{

        width:92px;
        height:92px;

        flex-basis:92px;

        margin-bottom:8px;

        border-width:3px;

    }


    .oab-child-avatar-default{

        font-size:53px;

    }


    .oab-child-avatar-edit{

        right:-6px;
        bottom:-2px;

        width:25px;
        height:25px;

        font-size:12px;

    }


    /* PROFILE BAR */

    .oab-child-profile-name{

        width:
            calc(100% + 20px);

        min-height:48px;

        margin:
            0
            -10px;

        padding:
            5px
            8px;

        grid-template-columns:
            1fr
            1.35fr
            1fr;

    }


    .oab-profile-meta{

        gap:3px;

    }


    .oab-profile-meta-icon{

        font-size:15px;

    }


    .oab-profile-meta-label{

        display:none;

    }


    .oab-profile-meta strong{

        font-size:13px;

    }


    .oab-profile-main-name{

        padding:
            0
            8px;

    }


    .oab-profile-main-name strong{

        font-size:17px;

    }


    /* CHILD SERVICES */

    .oab-child-services{

        gap:6px;

        margin:
            -2px
            0
            6px;

    }


    .oab-child-service-btn{

        min-height:46px;

        padding:
            6px
            8px;

        gap:6px;

    }


    .oab-child-service-icon{

        width:25px;
        height:25px;

        flex-basis:25px;

    }


    .oab-child-service-icon svg{

        width:21px;
        height:21px;

    }


    .oab-child-service-text strong{

        font-size:13px;

    }


    /* GENERAL CHAT */

    .oab-general-chat-section,
    .oab-live-stream-section{

        padding:0;

    }


    .oab-general-chat-button,
    .oab-live-stream-button{

        min-height:52px;

        padding:9px 12px;

        gap:8px;

        font-size:18px !important;

    }


    .oab-general-chat-button
    .oab-action-icon,
    .oab-live-stream-button
    .oab-action-icon{

        font-size:24px;

    }


    /* SECTIONS */

    .oab-child-section{

        padding:9px;

        margin-bottom:9px;

    }


    .oab-child-section h3{

        margin-bottom:8px;

        font-size:18px;

    }


    /* PROGRAMS */

    .oab-child-section:not(.oab-levels-section)
    .oab-child-list{

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

        gap:6px;

    }


    .oab-child-section:not(.oab-levels-section)
    .oab-child-item{

        min-height:74px;

        padding:6px 3px;

        gap:4px;

    }


    .oab-child-section:not(.oab-levels-section)
    .oab-child-item-icon{

        font-size:25px;

    }


    .oab-child-section:not(.oab-levels-section)
    .oab-child-item strong{

        font-size:12px;

        line-height:1.25;

    }


    /* LEVELS */

    .oab-levels-list{

        gap:5px;

    }


    .oab-level-item{

        min-height:42px;

        padding:5px 7px;

        gap:6px;

    }


    .oab-level-program{

        gap:6px;

    }


    .oab-level-program
    .oab-child-item-icon{

        font-size:19px;

    }


    .oab-level-program strong{

        font-size:13px;

    }


    .oab-level-value{

        padding:4px 7px;

        font-size:11px;

    }


    /* ACTIONS */

    .oab-child-actions{

        position:static;

        grid-template-columns:1fr;

        gap:8px;

        margin-top:9px;

        padding:0;

        background:transparent;

    }


    .oab-child-actions button{

        min-height:46px;

        padding:7px 6px;

        gap:6px;

        font-size:14px;

    }


    .oab-action-icon{

        font-size:18px;

    }

}


/*======================================================
LEVELS TRIGGER + MODAL MOBILE
======================================================*/

@media (max-width:768px){

    .oab-child-levels-trigger{

        margin-top:6px;

    }


    .oab-child-levels-button{

        min-height:46px;

        padding:
            6px
            8px;

        gap:6px;

        font-size:13px;

    }


    .oab-child-levels-icon{

        font-size:21px;

    }


    .oab-levels-modal{

        padding:10px;

    }


    .oab-levels-modal-box{

        max-height:86vh;

        padding:
            18px
            12px
            14px;

    }


    .oab-levels-modal-close{

        top:8px;
        left:8px;

        width:32px;
        height:32px;

        font-size:24px;

    }


    .oab-levels-modal-header{

        gap:6px;

        margin:
            4px
            38px
            14px;

    }


    .oab-levels-modal-icon{

        font-size:23px;

    }


    .oab-levels-modal-header h3{

        font-size:19px;

    }


    .oab-levels-modal-list{

        gap:6px;

    }


    .oab-levels-modal-item{

        min-height:48px;

        padding:
            7px
            8px;

        gap:7px;

    }


    .oab-levels-modal-program{

        gap:6px;

    }


    .oab-levels-modal-program-icon{

        font-size:20px;

    }


    .oab-levels-modal-program strong{

        font-size:13px;

    }


    .oab-levels-modal-value{

        padding:
            4px
            7px;

        font-size:11px;

    }

}


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

@media (max-width:390px){

    .oab-child-card{

        padding:
            0
            8px
            8px;

    }


    .oab-child-profile{

        width:
            calc(100% + 16px);

        min-height:135px;

        margin:
            0
            -8px
            8px;

        padding:
            9px
            8px
            0;

    }


    .oab-child-avatar{

        width:84px;
        height:84px;

        flex-basis:84px;

    }


    .oab-child-avatar-default{

        font-size:48px;

    }


    .oab-child-profile-name{

        width:
            calc(100% + 16px);

        min-height:45px;

        margin:
            0
            -8px;

    }


    .oab-profile-main-name strong{

        font-size:15px;

    }


    .oab-profile-meta strong{

        font-size:12px;

    }


    .oab-profile-meta-icon{

        font-size:14px;

    }


    .oab-child-service-btn{

        min-height:43px;

        padding:
            5px
            5px;

        gap:4px;

    }


    .oab-child-service-icon{

        width:22px;
        height:22px;

        flex-basis:22px;

    }


    .oab-child-service-icon svg{

        width:19px;
        height:19px;

    }


    .oab-child-service-text strong{

        font-size:11px;

    }


    .oab-child-avatar-edit{

        right:-5px;
        bottom:-2px;

        width:23px;
        height:23px;

        font-size:11px;

    }


    .oab-general-chat-button,
    .oab-live-stream-button{

        min-height:50px;

        font-size:17px !important;

    }


    .oab-child-section:not(.oab-levels-section)
    .oab-child-item strong{

        font-size:11px;

    }


    .oab-child-actions button{

        font-size:13px;

    }

}

/*======================================================
CHAT + LIVE STREAM ALIGNMENT
Version 3.6
======================================================*/

.oab-general-chat-section,
.oab-live-stream-section{

    width:100%;
    padding:0;

}

.oab-general-chat-section{

    margin:
        0
        0
        6px;

}

.oab-live-stream-section{

    margin:
        0
        0
        8px;

}

.oab-general-chat-button,
.oab-live-stream-button{

    width:100%;
    max-width:none;
    margin:0;

    box-sizing:border-box;

}


/* MOBILE */

@media (max-width:767px){

    .oab-general-chat-section{

        margin:
            0
            0
            5px;

    }

    .oab-live-stream-section{

        margin:
            0
            0
            6px;

    }

    .oab-general-chat-button,
    .oab-live-stream-button{

        width:100%;
        max-width:none;
        margin:0;

    }

}

/*======================================================
REWARDS BUTTON - GOLD
======================================================*/

#oab-profile.oab-child-service-btn{

    background:#FFF9E8;

    border-color:#D4A017;

    color:#B8860B;

    box-shadow:
        0 3px 10px
        rgba(212,160,23,.12);

}


#oab-profile.oab-child-service-btn
.oab-child-service-icon{

    color:#D4A017;

}


#oab-profile.oab-child-service-btn
.oab-child-service-icon svg{

    stroke:#D4A017;

}


#oab-profile.oab-child-service-btn:hover{

    background:#FFF4CE;

    border-color:#C89400;

    color:#A87900;

}

/*======================================================
CHILD CARD PROGRAMS — MATCH PROGRAMS PANEL
Version 4.0
======================================================*/

/* شبكة البرامج: دائماً في الوسط */
#oab-child-card-page
.oab-child-section:not(.oab-levels-section)
.oab-child-list{

    display:flex !important;

    flex-wrap:wrap !important;

    justify-content:center !important;

    align-items:flex-start !important;

    gap:14px !important;

}


/* بطاقة البرنامج */
#oab-child-card-page
.oab-program-start{

    flex:0 0 calc((100% - 42px) / 4) !important;

    width:calc((100% - 42px) / 4) !important;

    max-width:210px;

    min-width:0 !important;
    min-height:0 !important;

    padding:0 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:stretch !important;
    justify-content:flex-start !important;

    gap:0 !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;

}


/* لا إطار عند المرور */
#oab-child-card-page
.oab-program-start:hover{

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    transform:translateY(-2px);

}


/* إلغاء تأثير الدائرة القديمة */
#oab-child-card-page
.oab-program-start::after{

    display:none !important;

}


/* مساحة الصورة */
#oab-child-card-page
.oab-program-start
.oab-child-item-icon{

    width:100% !important;

    aspect-ratio:1 / 1;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

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

    background:transparent !important;

    border:0 !important;

    font-size:42px !important;

    line-height:1 !important;

    overflow:hidden;

    box-sizing:border-box;

}


/* الصورة المرفوعة */
#oab-child-card-page
.oab-program-start
.oab-child-item-icon > img{

    width:100% !important;
    height:100% !important;

    display:block;

    object-fit:cover;

    margin:0;
    padding:0;

    border:0;
    outline:0;

    box-shadow:none;

}


/* الأيقونة البديلة */
#oab-child-card-page
.oab-child-item-icon-fallback{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#FFFFFF;

    font-size:42px;

    line-height:1;

}


/* شريط اسم البرنامج — مطابق لشريط الألعاب */
#oab-child-card-page
.oab-program-start
.oab-child-program-title{

    width:100% !important;

    min-width:0;
    min-height:42px;

    margin:0 !important;

    padding:6px 8px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:#087a43 !important;

    color:#FFFFFF !important;

    font-size:17px !important;

    line-height:1.3 !important;

    font-weight:800 !important;

    text-align:center;

    box-shadow:
        inset 0 4px 0 rgba(255,255,255,.30),
        inset 0 -6px 0 rgba(0,0,0,.22),
        0 6px 10px rgba(0,0,0,.24);

    border:0 !important;

    border-radius:0 0 12px 12px;

    box-sizing:border-box;

}


/* المستوى المختار */
#oab-child-card-page
.oab-program-start
.oab-program-selected-level{

    width:100%;

    min-height:30px;

    margin:5px 0 0;

    padding:3px 5px;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#23364A;

    background:transparent;

    border:0;

    font-size:14px;

    line-height:1.3;

    font-weight:600;

    text-align:center;

    box-sizing:border-box;

}


/*======================================================
TABLET
======================================================*/

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

    #oab-child-card-page
    .oab-program-start{

        flex:0 0 calc((100% - 24px) / 3) !important;

        width:calc((100% - 24px) / 3) !important;

        max-width:210px;

    }

}


/*======================================================
MOBILE — 2 PROGRAMS PER ROW
======================================================*/

@media (max-width:768px){

    #oab-child-card-page
    .oab-child-section:not(.oab-levels-section)
    .oab-child-list{

        gap:8px !important;

    }


    #oab-child-card-page
    .oab-program-start{

        flex:0 0 calc((100% - 8px) / 2) !important;

        width:calc((100% - 8px) / 2) !important;

        max-width:210px;

    }


    #oab-child-card-page
    .oab-program-start
    .oab-child-program-title{

        min-height:42px;

        padding:6px 8px !important;

        font-size:17px !important;

        line-height:1.3 !important;

    }


    #oab-child-card-page
    .oab-program-start
    .oab-program-selected-level{

        min-height:27px;

        margin-top:4px;

        padding:2px 3px;

        font-size:12px;

    }

}


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

@media (max-width:420px){

    #oab-child-card-page
    .oab-child-section:not(.oab-levels-section)
    .oab-child-list{

        gap:6px !important;

    }


    #oab-child-card-page
    .oab-program-start{

        flex:0 0 calc((100% - 6px) / 2) !important;

        width:calc((100% - 6px) / 2) !important;

    }

}

/*======================================================
CHILD CARD PROGRAMS — HIDE LEVEL LABEL
اختيار المستوى يتم من النافذة المنبثقة فقط
======================================================*/

#oab-child-card-page
.oab-program-start
.oab-program-selected-level{

    display:none !important;

}

/*======================================================
CHILD CARD PROGRAMS — HIDE LEVEL LABEL
اختيار المستوى يتم من النافذة المنبثقة فقط
======================================================*/

#oab-child-card-page
.oab-program-start
.oab-program-selected-level{

    display:none !important;

}


/*======================================================
LEVEL / SECTION MODAL — CHILD FRIENDLY
Version 4.6
تحسين بصري فقط — بدون تغيير المنطق
======================================================*/

.oab-levels-modal{

    padding:20px;

}


.oab-levels-modal-backdrop{

    background:rgba(18,45,30,.62);

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

}


.oab-levels-modal-box{

    width:min(760px, 94vw);

    max-width:760px;
    max-height:82vh;

    padding:24px 24px 26px;

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

    background:#FFFDF5;

    border:2px solid #178245;

    border-radius:0;

    box-shadow:
        0 22px 55px rgba(0,0,0,.26);

    scrollbar-width:none;

}


.oab-levels-modal-box::-webkit-scrollbar{

    display:none;

}


/* زر الإغلاق */
.oab-levels-modal-close{

    top:16px;
    left:16px;

    width:44px;
    height:44px;

    padding:0;

    background:#FFFFFF;

    border:2px solid #178245;

    border-radius:0;

    color:#178245;

    font-size:28px;
    font-weight:400;

    line-height:1;

    box-shadow:
        0 4px 10px rgba(23,130,69,.10);

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;

}


.oab-levels-modal-close:hover{

    background:#178245;

    color:#FFFFFF;

    transform:scale(1.04);

}


/* رأس النافذة */
.oab-levels-modal-header{

    min-height:74px;

    margin:0 62px 18px;

    padding:0 0 16px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    border-bottom:2px solid #E4EFD8;

    color:#178245;

}


.oab-levels-modal-icon{

    flex:0 0 auto;

    font-size:34px;

    line-height:1;

}


.oab-levels-modal-header h3{

    margin:0;

    color:#178245;

    font-size:29px;

    font-weight:900;

    line-height:1.25;

    text-align:center;

}


/* قائمة المستويات / الأقسام */
.oab-levels-modal-list{

    display:grid;

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

    gap:12px;

}


/* بطاقة الاختيار */
.oab-levels-modal-item,
.oab-level-choice,
.oab-section-choice{

    width:100%;

    min-width:0;
    min-height:68px;

    margin:0;

    padding:12px 16px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    box-sizing:border-box;

    background:#FFFFFF;

    border:2px solid #C9DFC2;

    border-radius:0;

    color:#23364A;

    font-family:inherit;

    font-size:18px;

    font-weight:800;

    line-height:1.35;

    text-align:center;

    cursor:pointer;

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

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

}


.oab-levels-modal-item:hover,
.oab-level-choice:hover,
.oab-section-choice:hover{

    background:#F1F8EC;

    border-color:#178245;

    color:#087A43;

    transform:translateY(-2px);

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

}


.oab-levels-modal-item:active,
.oab-level-choice:active,
.oab-section-choice:active{

    transform:scale(.985);

}


/* المستوى المحدد */
.oab-level-choice.is-selected,
.oab-level-choice.active,
.oab-level-choice[aria-selected="true"]{

    background:#178245;

    border-color:#0F6E39;

    color:#FFFFFF;

    box-shadow:
        inset 0 4px 0 rgba(255,255,255,.22),
        inset 0 -5px 0 rgba(0,0,0,.14),
        0 7px 15px rgba(23,130,69,.20);

}


/* إن كانت القائمة تستخدم بنية البرنامج القديمة */
.oab-levels-modal-program{

    min-width:0;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

}


.oab-levels-modal-program-icon{

    flex:0 0 auto;

    font-size:25px;

    line-height:1;

}


.oab-levels-modal-program strong{

    color:inherit;

    font-size:17px;

    font-weight:800;

    line-height:1.3;

}


.oab-levels-modal-value{

    flex:0 0 auto;

    padding:5px 9px;

    background:#EDF7EA;

    border:1px solid #CFE5C8;

    border-radius:0;

    color:#178245;

    font-size:13px;

    font-weight:800;

    white-space:nowrap;

}


/* لا توجد مستويات / أقسام */
.oab-levels-modal-empty{

    grid-column:1 / -1;

    padding:20px;

    background:#FFFFFF;

    border:2px solid #C9DFC2;

    border-radius:0;

    color:#23364A;

    font-size:16px;

    font-weight:700;

    text-align:center;

}


/*======================================================
MODAL — MOBILE
======================================================*/

@media (max-width:768px){

    .oab-levels-modal{

        padding:10px;

    }


    .oab-levels-modal-box{

        width:96vw;

        max-width:96vw;
        max-height:88vh;

        padding:18px 12px 16px;

    }


    .oab-levels-modal-close{

        top:10px;
        left:10px;

        width:38px;
        height:38px;

        font-size:25px;

    }


    .oab-levels-modal-header{

        min-height:62px;

        margin:0 45px 13px;

        padding-bottom:12px;

        gap:7px;

    }


    .oab-levels-modal-icon{

        font-size:27px;

    }


    .oab-levels-modal-header h3{

        font-size:22px;

    }


    .oab-levels-modal-list{

        grid-template-columns:1fr;

        gap:8px;

    }


    .oab-levels-modal-item,
    .oab-level-choice,
    .oab-section-choice{

        min-height:54px;

        padding:9px 10px;

        font-size:15px;

    }


    .oab-levels-modal-program strong{

        font-size:14px;

    }


    .oab-levels-modal-value{

        padding:4px 7px;

        font-size:11px;

    }

}


/*======================================================
MODAL — SMALL MOBILE
======================================================*/

@media (max-width:390px){

    .oab-levels-modal-box{

        padding:
            16px
            9px
            12px;

    }


    .oab-levels-modal-header{

        margin:
            0
            40px
            10px;

    }


    .oab-levels-modal-header h3{

        font-size:20px;

    }


    .oab-levels-modal-item,
    .oab-level-choice,
    .oab-section-choice{

        min-height:50px;

        padding:8px;

        font-size:14px;

    }

}