/* Font Awesome (self-hosted) */
@font-face {
    font-family: "font_icons_light"; /* your custom family name */
    src: url("/Themes/fonts/Font Awesome 5 Pro-Light-300.otf") format("opentype"); /* fallback */
    font-display: swap; /* avoids FOIT */
}


@font-face {
    font-family: "font_icons_regular"; /* your custom family name */
    src: url("/Themes/fonts/Font Awesome 5 Pro-Regular-400.otf") format("opentype"); /* fallback */
    font-display: swap; /* avoids FOIT */
}

@font-face {
    font-family: "font_icons_regular2"; /* your custom family name */
    src: url("/Themes/fonts/Font Awesome 5 Brands-Regular-400.otf") format("opentype"); /* fallback */
    font-display: swap; /* avoids FOIT */
}

@font-face {
    font-family: "font_icons_solid"; /* your custom family name */
    src: url("/Themes/fonts/Font Awesome 5 Pro-Solid-900.otf") format("opentype"); /* fallback */
    font-display: swap; /* avoids FOIT */
}


@font-face {
    font-family: "font_icons_solid2"; /* your custom family name */
    src: url("/Themes/fonts/Font Awesome 5 Duotone-Solid-900.otf") format("opentype"); /* fallback */
    font-display: swap; /* avoids FOIT */
}






/* ==========================
       THEME (template-matched)
       ========================== */
:root {
    --color-bg: #f2f4ff; /* page background */
    --color-success: #51e967; /* #6c78ff;  indigo primary from mockup */
    --color-surface: #171a2b; /* cards, header */
    --color-primary: #0a84ff; /* #6c78ff;  indigo primary from mockup */
    --color-primary-light: #5daeff; /* #7480ff indigo primary from mockup */
    --color-primary-lighter: #cee6ff; /* #8da0ff indigo primary from mockup */
    --color-secondary: #ff8a3c; /* orange secondary from mockup */
    --color-secondary-light: #fca367; /* orange secondary from mockup */
    --color-secondary-lighter: #fff2e9; /* orange secondary from mockup #fbbe94 */
    --color-error: #ff0e00; /* #6c78ff;  indigo primary from mockup */
    --color-text: #1e2244;
    --color-text-dim: #6a70a0;
    --color-text-light: #ffffff;
    --color-text-alert: #ff3b30;
    --button-color: #ffffff;
    --icon-color: #c7c7c7;
    --card: #ffffff;
    --stroke: #e6eaff;
    --shadow: 0 05px 10px rgba(34,41,84,.12);
    /* Type scale */
    --fs-base: clamp(13px, 0.9vw + 10px, 14px);
    --fs-title: clamp(16px, 1.2vw + 10px, 20px);
    --fs-badge: clamp(11px, 2.2vw, 14px);
    --sat-off: .70; /* 0..1  (lower = more muted) */
    --sat-on: 1; /* 1 = full color */
    --panel-bg-opacity: 0;
    --shell-max: 960px; /* pick your known width: 960/ 1200/1280/1440 */
    --shell-margin: clamp(16px, 3vw, 40px);
    --icon-gap: 35px;
}



/* ================================
   iOS Light — Global baseline (LTR + RTL)
   ================================ */

/* --- Tokens --- */
:root {
    --ios-tint: #0a84ff;
    --ios-red: #ff3b30;
    --ios-bg: #f2f2f7;
    --ios-fill: #ffffff;
    --ios-hair: rgba(0,0,0,.12);
    --ios-text: #111111;
    --ios-dim: rgba(0,0,0,.55);
    --ios-radius: 12px;
    --ios-pad-y: .72rem;
    --ios-pad-x: .9rem;
    --ios-focus: 0 0 0 4px color-mix(in srgb, var(--ios-tint) 22%, transparent);
    font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    --ios-hairline: rgba(0,0,0,.12);
    --ios-panel: #f5f5f6;
}



*, *::before, *::after {
    box-sizing: border-box
}


html {
    direction: ltr;
}


/*#################################################################*/
/* BLOCK TEXT SELECT ------- BLOCK DRAG --------- BLOCK MOUSE MENU */


/* Put this in your global stylesheet */
html, body, * {
    -webkit-user-select: none; /* Safari/Chrome iOS/Android */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* old Edge/IE */
    user-select: none; /* modern */
    -webkit-touch-callout: none; /* iOS long-press menu */
    -webkit-tap-highlight-color: transparent; /* mobile tap glow */
}

/* Optional: also prevent dragging of images/icons */
img, svg {
    -webkit-user-drag: none; /* Safari/Chrome */
    user-drag: none; /* non-standard but used */
    /*pointer-events: none;*/ /* if you don't need to click the image itself */
}


/* Uncomment if you want to allow selecting text in form fields */
/*
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  pointer-events: auto;
}
*/


/* BLOCK TEXT SELECT ------- BLOCK DRAG --------- BLOCK MOUSE MENU */
/*#################################################################*/








html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
    background: var(--color-bg);
    color: var(--color-text);
    overflow: hidden;
    font-size: var(--fs-base)
}

a {
    color: inherit;
    text-decoration: none
}

.app {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100dvh;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

/* HEADER */
.header-wrap {
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 12px 16px 16px;
}

.header {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg,var(--color-primary-light),var(--color-primary));
    color: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.footer {
    grid-row: 3;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg,var(--color-primary-lighter),var(--color-primary-light));
    color: #fff;
    /*border-radius: 16px;*/
    box-shadow: var(--shadow);
    z-index: 999;
}





.div_is_working {
    display: none;
    position: absolute;
    padding-top: 10vh;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background-color: #e6eaff9e !important;
    z-index: 9999;
}





.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700
}

.logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#f7b267,var(--color-secondary));
    box-shadow: 0 6px 18px rgba(255,138,60,.35)
}

.nav {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 200px);
}




.div_teachers_students
{
    display: none;
}

.div_students_teachers {
    display: none;
}


.div_students_students {
    display: unset;
}

.div_teachers_teachers {
    display: unset;
}





.div_Account_Number {
    text-align: center;
    color: var(--color-text-dim);
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 3px;
}
.spnAccountNumTitle
{
    font-weight: bold;
}
.spnAccountNumValue
{
    text-decoration: initial;
}




.nav-item {
    position: relative;
    display: grid;
    flex: auto;
    grid-auto-flow: row;
    justify-items: center;
    align-items: center;
    gap: 1px;
    min-block-size: 45px;
    border-radius: 12px; /* rounded hit area, no visible border */
    background: transparent; /* no visible background by default */
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
}

    /* Fancy separators (hairline) — no borders */
.nav-item::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block: 14px 14px; /* leave top/bottom breathing room */
    width: 1px;
    /*background: linear-gradient( to bottom, transparent 0%, color-mix(in srgb, var(--ios-hairline, rgba(0,0,0,.12)) 70%, transparent) 20%, color-mix(in srgb, var(--ios-hairline, rgba(0,0,0,.12)) 70%, transparent) 80%, transparent 100% );*/
    background-color: var(--ios-hairline);
    opacity: .9;
    pointer-events: none;
}
    /* Don’t draw separator after the last tab */
.nav-item:last-child::after {
    display: none;
}

    /* Icon + label */
.nav-item .material-icons, .nav-item .material-symbols-outlined {
    font-size: 26px;
    line-height: 1;
    color: var(--color-text-dim);
    transition: color .12s ease;
}

.nav-item .label {
    font-size: 12px;
    font-weight: 700;
    opacity: .92;
    color: var(--color-text-dim);
}

    /* Hover/press (mobile-friendly; hover helps PWAs on desktop) */
.nav-item:hover {
    background: rgba(255,255,255,.06);
    transform: translateY(-1px);
}

.nav-item:active {
    transform: translateY(0);
}

    /* Active state: subtle fill + primary accent */
.nav-item.is-active {
    background: color-mix(in oklab, var(--color-primary) 18%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.nav-item.is-active .material-icons, .nav-item.is-active .material-symbols-outlined {
    color: var(--color-text);
}

.nav-item.is-active .label {
    color: var(--color-text);
}


    /* Badge */
    .nav-item .badge {
        position: absolute;
        inset-inline-end: 12px;
        inset-block-start: 8px;
        background: var(--color-secondary);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 2px 6px;
        border-radius: 999px;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
    }



































.icon-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    color: #fff;
    cursor: pointer
}

.avatar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
}

    .avatar .img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fff;
        color: var(--color-primary);
    }

.menu-btn {
    display: none
}



.Avatat_divDisplayName
{
    font-size: 11px;
    font-weight: 200;
}









/* Hidden by default (desktop/tablet) */
/* Hidden by default (desktop/tablet) */
.mobile-tabbar {
    display: none;
}

/* Only on mobile */
@media (max-width: 768px) {
    .mobile-tabbar {
        width: 100%;
        /*position: fixed;*/
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 90;
        /* translucent, uses your tokens */
        /*background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 66%, transparent), color-mix(in oklab, var(--color-primary) 92%, transparent));*/
        background-color: var(--ios-fill);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0; /* separators will be drawn via pseudo not gaps */
    }

    /* Ensure content isn’t covered by the bar */


    .tabbar-item {
        position: relative;
        display: grid;
        grid-auto-flow: row;
        justify-items: center;
        align-items: center;
        gap: 1px;
        min-block-size: 40px;
        border-radius: 12px; /* rounded hit area, no visible border */
        background: transparent; /* no visible background by default */
        cursor: pointer;
        user-select: none;
        transition: transform .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
        padding-top: 2px;
    }

        /* Fancy separators (hairline) — no borders */
        .tabbar-item::after {
            content: "";
            position: absolute;
            inset-inline-end: 0;
            inset-block: 6px 6px; /* leave top/bottom breathing room */
            width: 1px;
            /*background: linear-gradient( to bottom, transparent 0%, color-mix(in srgb, var(--ios-hairline, rgba(0,0,0,.12)) 70%, transparent) 20%, color-mix(in srgb, var(--ios-hairline, rgba(0,0,0,.12)) 70%, transparent) 80%, transparent 100% );*/
            /*background-color: var(--ios-hairline);*/
            opacity: .9;
            pointer-events: none;
        }
        /* Don’t draw separator after the last tab */
        .tabbar-item:last-child::after {
            display: none;
        }

        /* Icon + label */
        .tabbar-item .material-icons, .tabbar-item .material-symbols-outlined {
            font-size: 20px;
            line-height: 1;
            color: var(--color-text-dim);
            transition: color .12s ease;
        }

        .tabbar-item .label {
            font-size: 10px;
            font-weight: 500;
            opacity: .92;
            color: var(--color-text-dim);
        }

        /* Hover/press (mobile-friendly; hover helps PWAs on desktop) */
        .tabbar-item:hover {
            background: rgba(255,255,255,.06);
            transform: translateY(-1px);
        }

        .tabbar-item:active {
            transform: translateY(0);
        }

        /* Active state: subtle fill + primary accent */
        .tabbar-item.is-active {
            /*background: color-mix(in oklab, var(--color-primary) 10%, transparent);
            box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 24%, transparent);*/
        }



            .tabbar-item.is-active .material-icons, .tabbar-item.is-active .material-symbols-outlined {
                /*color: var(--color-text);*/
                color: var(--color-primary);
            }

            .tabbar-item.is-active .label {
                /*color: var(--color-text);*/
                color: var(--color-primary);
            }


        /* Badge */
        .tabbar-item .badge {
            position: absolute;
            inset-inline-end: 12px;
            inset-block-start: 8px;
            background: var(--color-secondary);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 999px;
            line-height: 1;
            box-shadow: 0 2px 6px rgba(0,0,0,.25);
        }















        /* Special center item */
        .tabbar-item.special-center {
            position: relative;
            margin-top: -20px; /* lifts half above the nav */
            width: 56px;
            height: 56px;
            border: 4px solid var(--ios-fill);
            border-radius: 50%;
            background: var(--color-primary);
            /*box-shadow: 0 6px 18px rgba(0,0,0,.25);*/
            z-index: 10;
            transition: transform .2s ease, box-shadow .2s ease;
            margin-left: auto;
            margin-right: auto;
        }

            /* Make icon big inside the circle */
            .tabbar-item.special-center .material-icons,
            .tabbar-item.special-center .material-symbols-outlined {
                font-size: 28px;
                color: #fff !important;
            }

            .tabbar-item.special-center .label {
                display: none; /* optional — circle looks cleaner without text */
            }

            /* Hover / Active Effects */
            .tabbar-item.special-center:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 22px rgba(0,0,0,.28);
            }

            .tabbar-item.special-center.is-active {
                background: color-mix(in oklab, var(--color-primary) 90%, white 10%);
            }



        .tabbar-item.special-center {
            animation: centerPulse 0.6s ease-out 1;
        }

    @keyframes centerPulse {
        0% {
            transform: scale(.7) translateY(10px);
            opacity: 0;
        }

        60% {
            transform: scale(1.1) translateY(-5px);
            opacity: 1;
        }

        100% {
            transform: scale(1) translateY(0);
        }
    }





}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tabbar-item {
        transition: none;
    }
}
































































/* LAYOUT (content area) */
.content {
    grid-row: 2;
    min-height: 0;
    padding-left: 5px;
    padding-right: 5px;
    /*padding-top: 16px;*/
    padding-top: 6px;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.default_Content {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
}




/* SLIDER */
.hero {
    padding-bottom: 16px;
    /*padding-top: 16px;*/
}

.slider-wrap {
    /*background: var(--card);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);*/
    /*padding: 12px;*/
    padding-left: 12px;
    padding-right: 12px;
    
    border-radius: 24px;
    position: relative;
}

.subjects {
    display: grid;
    grid-auto-flow: column;
    --gap: 12px;
    gap: var(--gap);
    padding: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    grid-auto-columns: calc((100% - (var(--gap) * 2)) / 3);
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    cursor: grab;
}


.subjects--dragging {
    cursor: grabbing;
    scroll-snap-type: none !important;
}



.subject {
    position: relative;
    scroll-snap-align: start;
    aspect-ratio: 1/1;
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    transition: transform .42s ease, box-shadow .42s ease;
    /*border: 1px solid var(--stroke);
    box-shadow: 0 8px 18px rgba(34,41,84,.10)*/
}

    .subject img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(var(--sat-off));
        transition: filter .24s ease, transform .24s ease, box-shadow .24s ease;
    }

    .subject::after {
        content: "";
        position: absolute;
        inset: 0;
        /*background: linear-gradient(180deg,rgba(0,0,0,.0) 55%, rgba(10,12,40,.85) 100%)*/
    }

    .subject .title {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%) translateY(-10px);
        z-index: 2;
        padding: 8px 14px;
        border-radius: 999px;
        background: #6f7fff23;
        color: #fff;
        font-weight: 800;
        box-shadow: 0 8px 20px rgba(34,41,84,.25);
        font-size: var(--fs-badge);
        transition: transform .52s ease, background .52s ease;
    }



    .subject:hover
    ,.subject.active {
        transform: translateY(-2px);
        /*box-shadow: 0 8px 18px rgba(34,41,84,.10), 0 0 0 3px var(--color-secondary) inset, 0 0 0 1px var(--color-secondary);*/
    }

        .subject:hover img
        , .subject.active img        {
            filter: saturate(var(--sat-on));
        }


        .subject:hover .title
        , .subject.active .title {
            background: #6f7fff8c;
            transform: translateX(-50%) translateY(-20px);
        }



.slider-ctrl {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10
}

.ctrl {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--stroke);
    background: var(--card);
    box-shadow: var(--shadow);
    display: grid;
    place-items: center;
    cursor: pointer
}

.prev {
    left: 8px
}

.next {
    right: 8px
}

/* PANEL: Sub‑subjects ↔ Teachers (swipe) */
.below {
    /*padding: 16px;*/
    padding-top: 16px;
    /*padding-bottom: 16px;*/

    display: grid;
    grid-template-rows: minmax(0,1fr);
    gap: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
}

.panel {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 12px;
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
    height: 100%;
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 10px 6px
}

.back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f7f8ff;
    border: 1px solid var(--stroke);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(34,41,84,.06)
}

    .back svg {
        width: 18px;
        height: 18px
    }

    .back.hidden {
        visibility: hidden;
        opacity: 0;
        pointer-events: none
    }

.panel-title {
    font-weight: 700;
    font-size: calc(var(--fs-title) - 1px)
}






.panel-swiper {
    display: grid;
    grid-template-columns: 100% 100%;
    overflow: hidden;
    height: 100%;
}

.panel-swiper .list {
    transition: transform .28s ease;
}

    .panel-swiper .List_outer {
        transition: transform .28s ease;
    }

    .panel-swiper.show-teachers .List_outer {
        transform: translateX(-100%);
    }


    .panel-swiper .List_outer {
        margin-bottom: 45px;
    }




.List_outer {
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


.drawer-nav-outer {
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}






.list {
    padding: 4px;
    display: grid;
    gap: 12px;
    overflow: auto
}

    .list::-webkit-scrollbar {
        width: 0;
        height: 0
    }

.list {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.sub-card, .teacher-card, .material-card{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: #fafbffe5;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease
}

    .sub-card:hover, .teacher-card:hover, .material-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(34,41,84,.08)
    }

    .sub-card.is-active, .teacher-card.is-active, .material-card.is-active {
        box-shadow: 0 0 0 2px var(--color-primary) inset
    }




.teacher-avatar-outer {
    overflow: hidden;
    position: relative;
}




.sub-avatar, .teacher-avatar, .material-avatar {
    position: relative;
    /*width: 46px;
    height: 46px;*/
    /*I commented the above size to let it come from the inner image and fit it*/
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    /* gradient ring using background + padding (keeps your padding idea) */
    /*padding: 6px;*/

    border: 2px solid transparent;
    background: radial-gradient(closest-side,#fff 98%,transparent) padding-box, conic-gradient(from var(--ring-angle), #0a84ff, #34c759, #ff9f0a, #0a84ff) border-box;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    z-index: 0; /* ensure ring appears behind content if needed */
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    overflow: hidden;
}



/* animated “story” variant */
    .teacher-avatar.story, .material-avatar.story, .sub-avatar.story {
        --ring-angle: 0deg;
        /*animation: ringSpinHome 5s linear infinite;*/
    }

/* (optional) pause on reduced motion */
@media (prefers-reduced-motion: reduce) {
    .profileImage.story {
        animation: none;
    }
}

@keyframes ringSpinHome {
    to {
        --ring-angle: 360deg;
    }
}









.img-avatar-false {
    filter: grayscale(100%);
    /*filter: grayscale(100%) blur(1px);*/
}


.img-sub-avatar {
    width: 46px;
    height: 46px;
}

.img-teacher-avatar {
    width: 46px;
    height: 46px;
}

.avatar_online_status {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: gray;
    position: absolute;
    inset-inline-end: 1px;
    bottom: 1px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.avatar_online_status_false
{
    background-color: #ff3b30;
}
.avatar_online_status_true {
    background-color: #44a241;
}




/* ===== Star rating ===== */
.stars {
    --star-size: 14px;
    --star-gap: 2px;
    position: relative;
    display: inline-block;
    font-size: var(--star-size);
    line-height: 1;
    letter-spacing: var(--star-gap); /* spacing between stars */
}

.stars__base {
    color: #e6eaff;
}
/* empty stars */
.stars__fill {
    position: absolute;
    inset: 0 0 auto 0;
    white-space: nowrap;
    overflow: hidden;
    color: var(--accent-orange); /* filled color */
    width: var(--fill, 0%); /* set from inline style */
}

.rating-text
{
    display: none;
}





.sub-body, .teacher-body {
    flex: 1;
    display: grid;
    gap: 4px
}

.sub-title, .teacher-name {
    font-weight: 700;
    font-size: calc(var(--fs-title) - 3px);
    position: relative;
}


.txtMeta-Head-Time {
    font-weight: 400;
    font-size: calc(var(--fs-title) - 6px);
    color: color-mix(in oklab, var(--color-text-dim) 100%, #666);
    position: absolute;
    inset-inline-end: 15px;
    /*inset-block-end: 0px;
    margin-inline-end: 0px;
    padding-inline-end: 0px;*/
}



.sub-meta, .teacher-meta {
    color: var(--color-text-dim);
    font-size: calc(var(--fs-base) - 1px);
}




.extra-title {
    font-weight: 700;
    font-size: calc(var(--fs-title) - 3px);
    margin-bottom: 6px;
}



.extra-text {
    font-size: calc(var(--fs-base) - 1px);
    color: var(--text-600);
    margin: 0;
}

.card_badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef0ff;
    border: 1px solid var(--stroke);
    font-size: calc(var(--fs-base) - 2px);
    font-weight: 700;
    width: max-content
}

.ghost-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: #fff;
    display: grid;
    place-items: center
}

    .ghost-btn .svg-down {
        transform: rotate(90deg);
    }

.meter {
    height: 6px;
    border-radius: 999px;
    background: #e7e9ff;
    overflow: hidden
}

    .meter > i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,var(--color-secondary),var(--color-primary))
    }

/* Drawer */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: none;
    z-index: 80
}

    .drawer-backdrop.show {
        display: block
    }

.drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0; /* right in LTR */
    inset-inline-start: auto;
    width: min(86vw, 380px);
    background: var(--card);
    border-inline-start: 1px solid rgba(255,255,255,.08);
    border-inline-end: 0;
    transform: translateX(100%); /* off-screen to inline-end */
    transition: transform .22s ease;
    z-index: 99;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

    .drawer.open {
        transform: translateX(0)
    }

.drawer-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-bottom: 1px solid var(--stroke)
}

.drawer-nav {
    display: grid;
    padding: 12px;
    gap: 8px
}

    .drawer-nav a {
        padding: 10px 12px;
        border-radius: 12px;
        background: #f7f8ff;
        border: 1px solid var(--stroke)
    }

.drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--stroke);
    display: grid;
    place-items: center;
    cursor: pointer
}

/* Hide rails */
.subjects::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent
}

.subjects {
    scrollbar-width: none;
    -ms-overflow-style: none
}



.nav {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-primary-light);
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.06)
}


.chip {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--color-text-dim);
    transition: 180ms ease;
    white-space: nowrap
}

    .chip[aria-current="page"]
    , .chip:hover {
        background-color: color-mix(in srgb,var(--color-primary) 90%, transparent);
        color: var(--color-text);

    }


.right {
    display: flex;
    align-items: center;
    gap: 8px
}


.btnSlider
{
    opacity: 0.25;
}




@media (max-width: 768px){


    .panel-title {
        font-weight: 650;
        font-size: calc(var(--fs-title) - 1px)
    }



    .sub-title, .teacher-name {
        font-weight: 650;
        font-size: calc(var(--fs-title) - 3px)
    }

    .sub-meta, .teacher-meta {
        font-size: calc(var(--fs-base) - 3px);
    }



    .extra-title {
        font-weight: 650;
        font-size: calc(var(--fs-title) - 3px);
    }

    .extra-text {
        font-size: calc(var(--fs-base) - 2px);
    }




    .ghost-btn {
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }

}



















/*#####################################################*/
/*panelSection fancy, readable background on the panel*/
/* Panel gets a dynamic background image via CSS var */


/* Panel gets a dynamic background from a CSS var */

#panelSection {
    position: relative;
    overflow: hidden;
    height: calc(100% - 16px);
}

#homeSection {
    /*position: relative;*/
    overflow: hidden;
    /*margin-left: calc(var(--shell-margin) * .6);
    margin-right: calc(var(--shell-margin) * .6);*/
    height: calc(100% - 16px);
}

.panel-bg {
    position: absolute !important;
    inset: -10%; /* to move the borders outside the view*/
    background-size: cover;
    background-position: center;
    filter: saturate(.55);
    opacity: 0;
    transition: opacity .22s ease;
    z-index: 0;
}

    .panel-bg.is-visible {
        opacity: 0.15;
    }

#panelSection > * {
    position: relative;
    z-index: 1;
}



/*panelSection fancy, readable background on the panel*/
/*#####################################################*/







.material-card {
    display: flex; /* keep your existing card look */
    flex-direction: column; /* <— key change */
    align-items: stretch; /* let children fill width */
    gap: 0; /* header and panel control their own spacing */
}

/* Header remains a horizontal row */
.material-head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer; /* only this area toggles */
}



/*########################################################*/
/* TEACHERS CARDS WITH EXTRA PANEL*/
/* Your existing arrow: points down by default */
/* Header row is the toggle target */


/* Stack card vertically so the extra panel is BELOW the header */
.teacher-card {
    display: flex; /* keep your existing card look */
    flex-direction: column; /* <— key change */
    align-items: stretch; /* let children fill width */
    gap: 0; /* header and panel control their own spacing */
}

/* Header remains a horizontal row */
.teacher-head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer; /* only this area toggles */
}

/* Make sure the expanding panel takes full width */
.teacher-extra {
    width: 100%;
}



.profile_slots
{
    display: none;
}


.profile_slots_teachers {
    display: flex;
}



.accordion .item, .accordion .item .title {
    display: none !important;
    visibility: collapse !important;
}




/* Existing arrow points down by default */
.ghost-btn .svg-down {
    transform: rotate(90deg);
    transition: transform .22s ease;
}

/* When open, flip arrow up */
.teacher-card.is-open .ghost-btn .svg-down {
    transform: rotate(-90deg);
}

/* Collapsible panel (closed) */
.teacher-extra {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    /*transition: max-height 260ms ease, opacity 200ms ease, margin-top 200ms ease;*/
    transition: max-height 160ms ease, opacity 150ms ease;
    border-top: 1px solid var(--stroke);
    background: #fafbff;
    border-radius: 12px;
}

    /* Inner layout */
    .teacher-extra .extra-grid {
        display: grid;
        gap: 12px;
        padding: 2px;
    }





.extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Open state */
.teacher-card.is-open .teacher-extra {
    opacity: 1;
    margin-top: 10px;
}

/* Optional: highlight open card */
.teacher-card.is-open {
    box-shadow: 0 6px 20px rgba(108,120,255,.12), 0 0 0 2px rgba(108,120,255,.25) inset;
    border-radius: 16px;
}


/* TEACHERS CARDS WITH EXTRA PANEL*/
/*########################################################*/





























/*############################# CHATING ############################################*/
.chat-page-shell {
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.chat-card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 170px);
    max-height: 900px;
    min-height: 100px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}


.chat-messages-Parent {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 900px;
    min-height: 10px;
    overflow: hidden;
    height: 100%;
}

.chat-messages {
    flex: 1 1 auto;
    padding: 12px;
    overflow-y: auto;
    background: #f5f6fb;
    padding-left: 30px !important;
    margin-left: -30px;
}


/* Scroll-to-bottom arrow */
.chat-scroll-bottom {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: none; /* hidden by default */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

    .chat-scroll-bottom.show {
        display: flex;
    }





/* typing indicator */
.chat-typing-indicator {
    padding: 4px 14px;
    background: #f5f5f7;
    border-top: 1px solid #e5e7eb;
    position: absolute;
    bottom: 0;
}

.typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

.typing-dots span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #9ca3af;
    margin-left: 2px;
    animation: typingBlink 1.1s infinite ease-in-out;
}

    .typing-dots span:nth-child(2) {
        animation-delay: .15s;
    }

    .typing-dots span:nth-child(3) {
        animation-delay: .3s;
    }

@keyframes typingBlink {
    0%, 60%, 100% {
        opacity: .3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* input bar */

.chat-input-shell {
    flex: 0 0 auto;
    border-top: 1px solid #e3e6ec;
    background: #fff;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-input-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.chat-input-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.chat-input-text {
    flex: 1 1 auto;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
}

    .chat-input-text:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 1px rgba(37,99,235,0.17);
    }

.chat-send-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-inline: 12px;
    border-radius: 999px;
    font-size: 13px;
}

.btn-icon {
    border-radius: 999px;
    border: none;
    background: transparent;
    padding: 4px 6px;
    cursor: pointer;
}

    .btn-icon:hover {
        background: rgba(0,0,0,0.05);
    }

/* messages */

.chat-message-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

    .chat-message-row.from-me {
        justify-content: flex-start;
    }

    .chat-message-row.from-other {
        justify-content: flex-end;
    }

/* avatar: reuse teacher-avatar-outer etc */
.chat-avatar-outer {
    flex: 0 0 auto;
}

/* bubble */

.chat-bubble-shell {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-message-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6b7280;
}

.chat-sender-name {
    font-weight: 600;
    color: #111827;
}

.chat-message-time {
    font-size: 11px;
    color: #9ca3af;
}

.chat-bubble {
    border-radius: 14px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    word-break: break-word;
}

/* MY side: right, blue */
.chat-bubble-me {
    background: color-mix(in oklab, var(--color-secondary-lighter) 24%, white 0%);
    color: var(--color-secondary);
    border: 1px solid color-mix(in oklab, var(--color-secondary-light) 35%, white 0%);
    border-bottom-right-radius: 2px;
}

/* OTHER side: left, grey */
.chat-bubble-other {
    background: color-mix(in oklab, var(--color-primary-lighter) 24%, white 0%);
    color: var(--color-primary);
    border: 1px solid color-mix(in oklab, var(--color-primary-light) 35%, white 0%);
    border-bottom-left-radius: 2px;
}

.chat-text-body {
    white-space: pre-wrap;
}

.chat-attachment {
    margin-top: 4px;
}

.chat-image-preview {
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    display: block;
}

.chat-audio-player {
    width: 180px;
}

.chat-file-link {
    font-size: 13px;
    text-decoration: none;
    color: #2563eb;
}

    .chat-file-link:hover {
        text-decoration: underline;
    }

/* responsive */

@media (max-width: 768px) {
    .chat-card {
        height: calc(100vh - 120px);
    }

    .chat-bubble-shell {
        max-width: 90%;
    }

    .chat-image-preview {
        max-width: 70vw;
    }
}

/*############################# CHATING ############################################*/





























/*########################################################*/
/* FANCY BUTTON */

/* Base “div button” */
button, .cbtn {
    /* per-button tokens (override inline if needed) */
    --btn-bg: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
    --btn-text: #fff;
    --btn-border: rgba(255,255,255,.18);
    --btn-radius: 14px;
    --btn-pad-y: 0.50rem;
    --btn-pad-x: 0.30rem;
    --btn-shadow: 0 8px 20px rgba(108,120,255,.25);
    --font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    margin-top: 3px;
    margin-bottom: 2px;
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    isolation: isolate;
    font-weight: var(--font-weight);
    /*font-size: var(--fs-badge);*/
    font-size: calc(var(--fs-base) - 0.16rem);
    line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .3s ease;
    overflow: hidden;
}


    /* subtle shine on hover */
    .cbtn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
        transform: translateX(-120%);
        opacity: 0;
        pointer-events: none;
        transition: transform .55s ease, opacity .2s ease;
    }

    .cbtn:hover::after {
        opacity: 1;
        transform: translateX(120%);
    }

    /* interactions */
button:hover, .cbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(108,120,255,.32);
    transform: translateY(-1px);
}

button:active, .cbtn:active {
    transform: translateY(0) scale(.98);
    filter: saturate(.98);
}

button:focus-visible, .cbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px var(--color-primary);
}

    /* Disabled */
    .cbtn[aria-disabled="true"], .cbtn.is-disabled {
        opacity: .6;
        cursor: not-allowed;
        filter: grayscale(.06) saturate(.9);
    }

/* Size variants */
.cbtn--sm {
    --btn-pad-y: .45rem;
    --btn-pad-x: .75rem;
    font-size: calc(var(--fs-base) - 2px);
}

.cbtn--lg {
    --btn-pad-y: .8rem;
    --btn-pad-x: 1.25rem;
    font-size: calc(var(--fs-base) + 1px);
}

/* Layout variants */
.cbtn--full {
    width: 100%;
}

.divActivatorButtons {
    display: flex;
    gap: 2px;
    width: 100%;
    flex-direction: row;
}

.cbtn--flex {
    /*width: 100%;*/
    display: inline-flex;
    border-radius: 0px;
    border-color: #d5d5d5 !important;
    font-weight: 300;
    padding-left: 2px !important;
    padding-right: 2px !important;
    flex: auto;
}

.cbtn-start-radious {
    border-start-start-radius: 25px;
    border-end-start-radius: 25px;
}

.cbtn-end-radious {
    border-start-end-radius: 25px;
    border-end-end-radius: 25px;
}



/* Color variants (keep theme-able) */
.cbtn--flat {
    --btn-bg: var(--color-primary-lighter);
    --btn-text: var(--color-text-light);
    --btn-border: var(--stroke);
    --btn-shadow: 0 6px 14px rgba(34,41,84,.06);
    color: var(--color-primary);
}


.cbtn--light {
    --btn-bg: var(--color-primary-light);
    --btn-border: var(--color-primary);
    --btn-shadow: 0 8px 18px rgba(255,138,60,.35);
}

.cbtn--lighter {
    --btn-bg: var(--color-primary-lighter);
    --btn-border: var(--color-primary);
    --btn-shadow: 0 3px 8px rgba(255,138,60,.15);
    color: var(--color-primary);
}


.cbtn--secondary {
    --btn-bg: var(--color-secondary);
    --btn-border: rgba(255,138,60,.35);
    --btn-shadow: 0 8px 18px rgba(255,138,60,.35);
}

.cbtn--secondary--light {
    --btn-bg: var(--color-secondary-light);
    --btn-border: rgba(255,138,60,.35);
    --btn-shadow: 0 8px 18px rgba(255,138,60,.35);
}

.cbtn--secondary--lighter {
    --btn-bg: var(--color-secondary-lighter);
    --btn-border: rgba(255,138,60,.35);
    --btn-shadow: 0 3px 8px rgba(255,138,60,.15);
    color: var(--color-secondary);
}

.cbtn--soft {
    --btn-bg: #f7f8ff;
    --btn-text: var(--color-text);
    --btn-border: var(--stroke);
    --btn-shadow: 0 6px 14px rgba(34,41,84,.06);
}



.cbtn--ghost {
    background: transparent;
    color: var(--ios-tint);
    border: 1px solid color-mix(in srgb, var(--ios-tint) 28%, transparent);
    box-shadow: none;
}



.cbtn--outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary-light);
    box-shadow: none;
}

/* Optional icon slots */
.cbtn__icon {
    width: 1.1em;
    height: 1.1em;
    display: inline-grid;
    place-items: center;
}

.cbtn__icon--right {
    margin-inline-start: .10rem;
}

.cbtn__icon--left {
    margin-inline-end: .10rem;
}

.cbtn--alert {
    color: var(--color-text-alert);
}


.cbtn-float
{
    position:fixed;
    left: 0;
    bottom: 80px;
}

/* FANCY BUTTON */
/*########################################################*/













/* tell the browser this custom property is an angle so it can animate it */
@property --ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}


/* Base: soft ring, subtle shadow, gentle hover */
.profileImage {
    position: relative; /* keep your existing styles too */
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 50%;
    /* gradient ring using background + padding (keeps your padding idea) */
    padding: 6px;
    border: 2px solid transparent;
    background: radial-gradient(closest-side,#fff 98%,transparent) padding-box, conic-gradient(from var(--ring-angle), #0a84ff, #34c759, #ff9f0a, #0a84ff) border-box;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    z-index: 0; /* ensure ring appears behind content if needed */
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}



    /* animated “story” variant */
    .profileImage.story {
        --ring-angle: 0deg;
        animation: ringSpin 6s linear infinite;
    }

/* (optional) pause on reduced motion */
@media (prefers-reduced-motion: reduce) {
    .profileImage.story {
        animation: none;
    }
}

/* hover speed-up (optional) */
.profileImage.story:hover {
    animation-duration: 3s;
}

@keyframes ringSpin {
    to {
        --ring-angle: 360deg;
    }
}


















































/* Stack the two views and animate between them */
.view-stack {
    position: relative;
    overflow: hidden; /* no page scroll while sliding */
    block-size: 100%; /* let parent control the height */
}

.view {
    position: absolute;
    inset: 0;
    overflow: auto; /* each view scrolls internally if needed */
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Enter/exit animations */
@keyframes enter-up {
    from {
        transform: translateY(100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes exit-up {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(-8%);
        opacity: 0
    }
}

@keyframes enter-down {
    from {
        transform: translateY(-8%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes exit-down {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(100%);
        opacity: 0
    }
}

.view.enter-up {
    animation: enter-up 360ms cubic-bezier(.2,.8,.2,1) forwards;
}

.view.exit-up {
    animation: exit-up 360ms cubic-bezier(.2,.8,.2,1) forwards;
    pointer-events: none;
}

.view.enter-down {
    animation: enter-down 360ms cubic-bezier(.2,.8,.2,1) forwards;
}

.view.exit-down {
    animation: exit-down 360ms cubic-bezier(.2,.8,.2,1) forwards;
    pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .view.enter-up, .view.exit-up, .view.enter-down, .view.exit-down {
        animation-duration: 1ms;
    }
}

/* Optional: ensure panel internals sit above its bg */
#panelSection > *:not(.panel-bg) {
    position: relative;
    z-index: 1;
}









/* Desktop: center in a fixed shell with rounded corners */

@media(min-width:640px) {
    .subjects {
        grid-auto-columns: calc((100% - (var(--gap) * 3)) / 6);
    }
}


@media (min-width: 768px) {
    .teacher-extra .extra-grid {
        grid-template-columns: 1fr 1fr;
    }
}



@media(min-width:900px) {
    .subjects {
        grid-auto-columns: calc((100% - (var(--gap) * 4)) / 7);
    }
}




@media (min-width: 1024px) {
    body {
        /* nice backdrop around the centered app */
        background: radial-gradient(1200px 600px at 50% -10%, rgba(108,120,255,.08), transparent 60%), var(--color-bg);
    }

    .app {
        width: min(var(--shell-max), calc(100vw - 2 * var(--shell-margin)));
        margin-inline: auto;
        border-radius: 22px;
        box-shadow: 0 24px 60px rgba(34,41,84,.18), 0 0 0 1px var(--stroke);
        overflow: hidden; /* keep header/slider corners clean */
    }

    /* make inner sections breathe a bit on desktop */
    .header-wrap,
    .hero,
    .below,
    footer {
        /*padding-left: calc(var(--shell-margin) * .6);
        padding-right: calc(var(--shell-margin) * .6);*/
    }
}




@media (min-width: 768px) {
    .hide-on-pc {
        display: none !important;
    }

    .cbtn {
        --btn-pad-y: 0.70rem;
        --btn-pad-x: 0.40rem;
        font-size: calc(var(--fs-base) - 0.05rem);
        padding: var(--btn-pad-y) var(--btn-pad-x);
    }


    .panel-bg {
        transition: none;
    }

    .header {
        display: flex;
    }

    .footer {
        /*display: none;*/
        display: flex;
    }

}


@media (max-width: 768px) {

    .profileImage {
        width: 95px;
        height: 95px;
        padding: 6px;
    }


    .hide-on-mobile {
        display: none !important;
    }

    .nav {
        display: none
    }

    .menu-btn {
        display: grid;
    }

    .avatar .name {
        display: none
    }


    .menu-btn {
        display: grid
    }


    .header {
        display: none;
    }

    .footer {
        display: flex;
        padding: 2px;
        border-radius: 0;
        background: none;
    }


    .hero {
        padding-bottom: 5px;
        padding-top: 10px;
    }



}
































/* ================================
   iOS Light — Global baseline (LTR + RTL)
   ================================ */


/* Re-enable selection for controls if app disables it globally */
.fa-input,
input, textarea, select, button, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    pointer-events: auto;
    -webkit-touch-callout: default;
}

/* --- Base controls --- */
.fa-input,
input, select, textarea, button {
    font: inherit;
    color: var(--color-text, var(--ios-text));
    -webkit-appearance: none;
    appearance: none;
    background: var(--ios-fill);
    border: 1px solid var(--ios-hair);
    border-radius: var(--ios-radius);
    outline: 0;
    transition: box-shadow .16s ease, border-color .16s ease, transform .06s ease, filter .12s ease;
}

    /* Textual inputs */
    .fa-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea {
        display: block;
        width: 100%;
        padding-block: var(--ios-pad-y);
        padding-inline: var(--ios-pad-x);
        background: #fff;
        box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
    }

    input[type="search"] {
        border-radius: 999px;
    }

textarea {
    min-height: 96px;
    resize: vertical;
}

::placeholder {
    color: color-mix(in srgb, var(--ios-text) 50%, transparent);
    opacity: .9;
}

/* Focus halo */
input:focus, select:focus, textarea:focus {
    border-color: color-mix(in srgb, var(--ios-tint) 72%, transparent);
    box-shadow: var(--ios-focus);
}

/* Disabled */
input:disabled, select:disabled, textarea:disabled, button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Validation state */
.is-invalid,
input:invalid, select:invalid, textarea:invalid {
    border-color: color-mix(in srgb, var(--ios-red) 70%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ios-red) 18%, transparent);
}

/* Labels & hints */
label {
    display: inline-block;
    font-weight: 600;
    font-size: .92rem;
    color: var(--color-text, var(--ios-text));
    margin: 6px 0 6px;
}

.form-hint, .hint {
    display: block;
    margin-top: 6px;
    font-size: .85rem;
    color: var(--color-text-dim, var(--ios-dim));
}



/* --- Select with chevron (RTL-aware) --- */
select {
    display: block;
    width: 100%;
    padding-block: var(--ios-pad-y);
    padding-inline: var(--ios-pad-x) calc(var(--ios-pad-x) * 1.8);
    background: #fff url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat;
    background-position: right .8rem center;
    background-size: 14px;
}

:root:dir(rtl) select {
    padding-inline: calc(var(--ios-pad-x) * 1.8) var(--ios-pad-x);
    background-position: left .8rem center;
    direction: rtl;
}

/* --- Checkboxes & Radios (clean iOS look) --- */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 22px;
    block-size: 22px;
    vertical-align: middle;
    margin: 0;
    border: 1px solid var(--ios-hair);
    background: #fff;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

input[type="checkbox"] {
    border-radius: 6px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]::after {
    content: "";
    inline-size: 12px;
    block-size: 12px;
    border-radius: 3px;
    background: var(--ios-tint);
    transform: scale(0);
    transition: transform .12s ease;
}

input[type="radio"]::after {
    content: "";
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--ios-tint);
    transform: scale(0);
    transition: transform .12s ease;
}

input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
    transform: scale(1);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    box-shadow: var(--ios-focus);
}

/* --- iOS Switch (uses element's computed direction) ---
Markup:
<label class="switch">
  <input type="checkbox">
  <i class="track"></i>
  <i class="thumb"></i>
</label>
*/
.switch {
    --w: 72px;
    --h: 31px;
    --knob: 27px;
    position: relative;
    inline-size: var(--w);
    block-size: var(--h);
    display: inline-block;
}

    .switch input {
        position: absolute;
        inset: 0;
        opacity: 0;
    }

    .switch .track {
        position: absolute;
        inset: 0;
        background: #e9e9ee;
        border: 1px solid var(--ios-hair);
        border-radius: 999px;
        transition: background .18s ease, border-color .18s ease;
    }

    .switch .thumb {
        position: absolute;
        inset-block-start: 50%;
        inline-size: var(--knob);
        block-size: var(--knob);
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1.5px 3px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
        transition: transform .18s ease;
    }

    /* LTR behavior (OFF = left, ON = right) */
    .switch:dir(ltr) .thumb {
        transform: translate(3px, -50%);
    }

    .switch:dir(ltr) input:checked ~ .thumb {
        transform: translate(calc(var(--w) - var(--knob) - 2px), -51%);
    }

    /* RTL behavior (OFF = right, ON = left) */
    .switch:dir(rtl) .thumb {
        /*transform: translate(calc(var(--w) - var(--knob) - 6px), -50%);*/
        transform: translate(calc(-1 * calc(var(--w) - var(--knob) - 3px)), -50%);
    }

    .switch:dir(rtl) input:checked ~ .thumb {
        transform: translate(-2px, -50%);
    }

    /* ON tint (shared) */
    .switch input:checked ~ .track {
        background: var(--ios-tint);
        border-color: color-mix(in srgb, var(--ios-tint) 35%, transparent);
    }

/* --- Segmented control --- */
.segmented {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: #e9e9ee;
    border: 1px solid var(--ios-hair);
    border-radius: 12px;
}

    .segmented button {
        -webkit-appearance: none;
        appearance: none;
        border: none;
        background: transparent;
        color: var(--ios-text);
        padding: .5rem .8rem;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
    }

        .segmented button[aria-pressed="true"] {
            background: #fff;
            border: 1px solid var(--ios-hair);
            box-shadow: 0 1px 0 rgba(0,0,0,.02);
        }

/* --- Iconified inputs (no wrapper, via data-icon) --- */
input[data-icon] {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: left .75rem center; /* LTR default */
    padding-inline-start: calc(1.2rem + 16px);
}

:root:dir(rtl) input[data-icon] {
    background-position: right .75rem center;
    /*padding-inline-start: .9rem;
    padding-inline-end: calc(1.2rem + 16px);*/
}



/* Wrapper that paints the FA icon */
.fa-input {
    position: relative;

    padding: 0;

}

    /* The input itself */
    .fa-input > input {
        width: 100%;
        height: var(--height);
        padding: 9px 12px;
        padding-inline-start: calc(var(--icon-gap));
        border: 1px solid var(--hairline);
        border-radius: var(--radius);
        background: var(--input-bg);
        color: #111;
        outline: 0;
        transition: border-color .15s, box-shadow .15s;
    }

        .fa-input > input::placeholder {
            color: #b0b0b4;
        }

        /* Focus style */
        .fa-input > input:focus {
            border-color: var(--ios-blue);
            box-shadow: 0 0 0 4px rgba(10,132,255,.15);
        }

    /* The icon (Font Awesome glyph) */
    .fa-input::before {
        content: ""; /* will be set per data-icon below */
        position: absolute;
        inset-inline-start: var(--pad-x);
        top: 50%;
        transform: translateY(-50%);
        font-size: var(--icon-size);
        color: var(--icon-color);
        pointer-events: none;
        line-height: 1;
        padding: 7px;
    }

    /* Color sync on focus (optional) */
    .fa-input:has(input:focus)::before {
        color: var(--ios-blue);
    }

/* RTL support */
:root:dir(rtl) .fa-input > input {
    padding-inline-start: 30px;
    padding-inline-end: calc(var(--icon-gap));
}

:root:dir(rtl) .fa-input::before {
    inset-inline-start: auto;
    inset-inline-end: var(--pad-x);
}

/* Right-side icon variant, if needed: <label class="fa-input right" ...> */
.fa-input.right > input {
    padding-inline-start: 30px;
    padding-inline-end: calc(var(--icon-gap));
}

.fa-input.right::before {
    inset-inline-start: auto;
    inset-inline-end: var(--pad-x);
}

/* ===== Map your data-icon values to FA glyphs (Free Solid) ===== */
/* ===== Map data-icon → Font Awesome 6 Free (Solid) glyphs ===== */
.fa-input[data-icon="mail"]::before,
.fa-input[data-icon="email"]::before {
    content: "\f0e0";
}
/* envelope */
.fa-input[data-icon="user"]::before,
.fa-input[data-icon="person"]::before {
    content: "\f007";
}
/* user */
.fa-input[data-icon="lock"]::before,
.fa-input[data-icon="password"]::before {
    content: "\f023";
}
/* lock */
.fa-input[data-icon="key"]::before {
    content: "\f084";
}
/* key (e.g., confirm password) */
.fa-input[data-icon="phone"]::before,
.fa-input[data-icon="mobile"]::before {
    content: "\f095";
}
/* phone */
.fa-input[data-icon="search"]::before {
    content: "\f002";
}
/* magnifying-glass */

.fa-input[data-icon="eye"]::before {
    content: "\f06e";
}
/* eye (show) */
.fa-input[data-icon="eye-slash"]::before {
    content: "\f070";
}
/* eye-slash (hide) */

.fa-input[data-icon="calendar"]::before {
    content: "\f073";
}
/* calendar */
.fa-input[data-icon="id-card"]::before {
    content: "\f2c2";
}
/* id-card */
.fa-input[data-icon="location"]::before,
.fa-input[data-icon="map-marker"]::before {
    content: "\f3c5";
}
/* location-dot */
.fa-input[data-icon="globe"]::before {
    content: "\f0ac";
}
/* globe */
.fa-input[data-icon="flag"]::before {
    content: "\f024";
}
/* flag */

.fa-input[data-icon="home"]::before {
    content: "\f015";
}
/* home */
.fa-input[data-icon="building"]::before {
    content: "\f1ad";
}
/* building/company */

.fa-input[data-icon="link"]::before {
    content: "\f0c1";
}
/* link */
.fa-input[data-icon="paperclip"]::before {
    content: "\f0c6";
}
/* attachment */
.fa-input[data-icon="image"]::before {
    content: "\f03e";
}
/* image */
.fa-input[data-icon="camera"]::before {
    content: "\f030";
}
/* camera */
.fa-input[data-icon="upload"]::before {
    content: "\f093";
}
/* upload */
.fa-input[data-icon="download"]::before {
    content: "\f019";
}
/* download */

.fa-input[data-icon="credit-card"]::before {
    content: "\f09d";
}
/* credit-card */
.fa-input[data-icon="at"]::before {
    content: "\f1fa";
}
/* @ */
.fa-input[data-icon="hashtag"]::before {
    content: "\f292";
}
/* # */

.fa-input[data-icon="check"]::before {
    content: "\f00c";
}
/* check */
.fa-input[data-icon="circle-check"]::before {
    content: "\f058";
}
/* circle-check */
.fa-input[data-icon="circle-x"]::before,
.fa-input[data-icon="times-circle"]::before {
    content: "\f057";
}
/* circle-xmark */
.fa-input[data-icon="warning"]::before,
.fa-input[data-icon="alert"]::before {
    content: "\f071";
}
/* triangle-exclamation */
.fa-input[data-icon="info"]::before {
    content: "\f05a";
}
/* circle-info */


.fa-span-solid {
    font-family: "font_icons_solid"; /* FA6 Free */
    font-weight: 200; /* Solid set */
}

.fa-span-solid2 {
    font-family: "font_icons_solid2"; /* FA6 Free */
    font-weight: 200; /* Solid set */
}

.fa-span-regular {
    font-family: "font_icons_regular"; /* FA6 Free */
    font-weight: 100; /* Solid set */
}

.fa-span-regular2 {
    font-family: "font_icons_regular2"; /* FA6 Free */
    font-weight: 100; /* Solid set */
}

.fa-span-light {
    font-family: "font_icons_light"; /* FA6 Free */
    font-weight: 100; /* Solid set */
}


.fa-input-solid::before {
    font-family: "font_icons_solid"; /* FA6 Free */
    font-weight: 200; /* Solid set */
}

.fa-input-solid2::before {
    font-family: "font_icons_solid2"; /* FA6 Free */
    font-weight: 200; /* Solid set */
}

.fa-input-regular::before {
    font-family: "font_icons_regular"; /* FA6 Free */
    font-weight: 100; /* Solid set */
}

.fa-input-regular2::before {
    font-family: "font_icons_regular2"; /* FA6 Free */
    font-weight: 100; /* Solid set */
}

.fa-input-light::before {
    font-family: "font_icons_light"; /* FA6 Free */
    font-weight: 100; /* Solid set */
}



.fas, .fa {
    font-family: "font_icons_regular"; /* FA6 Free */
    font-weight: 100; /* Solid set */
}



/* Retina-crisp hairlines */
@media (min-resolution: 2dppx) {
    select, input, textarea {
        border-width: .5px;
    }
}










































.swal2-success-circular-line-left
, .swal2-success-circular-line-right
, .swal2-success-fix {
    background-color: var(--ios-panel) !important;
    background: var(--ios-panel) !important;
}



/* Panel */
.swal2-popup.ios-popup {
    width: min(90vw,420px);
    padding: 0; /* iOS blocks handle their own spacing */
    border-radius: 20px;
    background: var(--ios-panel);
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    color: #111;
    font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    overflow: hidden !important;
}

/* Title & message */
.swal2-title.ios-title {
    margin: 18px 18px 6px;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
}

.swal2-html-container.ios-html {
    margin: 0 18px 14px;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: #111;
    opacity: .85;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE & Edge (legacy) */
}

.swal2-html-container.ios-html::-webkit-scrollbar {
    display: none;
}



/* Hairline divider above actions */
.ios-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--ios-hairline);
    overflow: hidden;
}

    /* Buttons as full-width rows */
    .ios-actions .swal2-styled {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        text-shadow: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 14px 12px;
        font-weight: 600;
        line-height: 1.1;
    }







/* Base container & button styles (yours – unchanged) */
.ios-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--ios-hairline);
    overflow: hidden;
}

    .ios-actions .ios-btn {
        position: relative; /* needed for the separator pseudo */
    }

        /* Centered fading separator between buttons */
    .ios-actions .ios-btn:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 70%; /* length of the separator (adjust if you like) */
        height: 1px;
        pointer-events: none;
        background: linear-gradient( to right, rgba(0, 0, 0, 0), /* fully transparent at far left */
        var(--ios-hairline), /* visible in the center */
        rgba(0, 0, 0, 0) /* fully transparent at far right */
        );
        opacity: 0.7;
    }




    /* Base look */
    .ios-actions .ios-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100%;
        padding: 14px 12px;
        font-weight: 600;
        cursor: pointer;
        opacity: 0;
        transform: translateY(6px) scale(0.97);
    }

        /* Animation only runs when class is added at popup open */
        .ios-actions .ios-btn.animate-in {
            animation: iosButtonAppear 260ms cubic-bezier(.21,.98,.35,1.01) forwards;
        }

        /* Second button slightly delayed (JS sets delay) */

        /* Active interaction feedback */
        .ios-actions .ios-btn:active {
            transform: scale(0.95);
            background: rgba(240,240,240,0.9) !important;
        }

/* iOS slide + fade + micro bounce */
@keyframes iosButtonAppear {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    60% {
        opacity: 1;
        transform: translateY(0) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}






















.ios-actions-split {
    display: block !important; /* keep your existing card look */
}

/* The button */
.Pop_Login_Button {
    width: 50% !important;
    height: 130px !important;
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 18px 22px;
    border-radius: 10px;
    background: #1a73e8;
    color: #fff;
    font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    cursor: pointer;
    user-select: none;
    /* Enable container query sizing */
    container-type: inline-size;
    /* Optional: tune once, use everywhere */
    --icon-size: clamp(4.1em, 14cqw, 5.6em); /* min, scales with button width, max */
    padding-top: 80px !important;
}

    /* Centered overlay icon */
    .Pop_Login_Button::before {
        font-family: "Material Symbols Outlined";
        font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
        position: absolute;
        inset: 25% auto auto 50%;
        transform: translate(-50%, -50%);
        font-size: var(--icon-size); /* ← scales with the element */
        line-height: 1;
        opacity: .9;
        pointer-events: none; /* don’t block clicks */
    }

    /* (Optional) small polish */
    .Pop_Login_Button:hover {
        filter: brightness(1.05);
    }

    .Pop_Login_Button:active {
        transform: translateY(1px);
    }

.Students_Login_Button::before {
    content: "school";
}

.Teachers_Login_Button::before {
    content: "co_present";
}






/* Per-role styling */
.ios-btn-primary {
    color: var(--ios-blue) !important;
    font-weight: 500 !important;
}

.ios-btn-cancel {
    color: #111 !important;
    font-weight: 300 !important;
}

.ios-btn-destructive {
    color: var(--ios-red) !important;
}
/* (optional if you ever add a destructive button) */

/* Hairline between stacked buttons */
.ios-actions .swal2-styled + .swal2-styled {
    border-top: 1px solid var(--ios-hairline);
}

/* Icon tweaks (optional) */
.swal2-icon.ios-icon {
    margin-top: 16px;
}

/* Hide SweetAlert2 default spacing we don’t need */
.swal2-actions.ios-actions > .swal2-loader {
    /*display: none !important;*/
    margin-left: auto;
    margin-right: auto;
}


/* Performance-friendly defaults */
.swal2-container.ios-container {
    background: rgba(0,0,0,.45) !important; /* keep the dim */
    /* remove the heavy blur by default */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: opacity; /* small perf hint */
}

/* Keep iOS blur on mobile/tablet (coarse pointer, no hover) */
@media (hover: none) and (pointer: coarse) {
    .swal2-container.ios-container {
        /* lighter blur still looks iOS-y and costs less */
        backdrop-filter: saturate(1.1) blur(14px);
        -webkit-backdrop-filter: saturate(1.1) blur(14px);
    }
}

/* Optional: allow blur on smaller windows even on desktop */
@media (max-width: 900px) {
    .swal2-container.ios-container {
        backdrop-filter: saturate(1.1) blur(12px);
        -webkit-backdrop-filter: saturate(1.1) blur(12px);
    }
}

/* Popup perf hints */
.swal2-popup.ios-popup {
    will-change: transform, opacity;
    /* keep your existing styles (radius, box-shadow, etc.) */
}

/* Your iOS popup skin already exists; add this line to the popup class you applied */
.swal2-popup.ios-popup {
    overflow: visible;
}
/* intl-tel-input dropdown: */
.iti__country-list {
    z-index: 2147483647; /* safely above SweetAlert2 */
}

div:where(.swal2-container) .swal2-timer-progress-bar-container {
    right: 15px;
    left: 15px;
}
div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
    height: 0.18em; /*0.25*/
}


























/*/////// LOADER ///////*/
/* Base spinner */
.loader-spinner {
    direction: ltr !important;
    box-sizing: unset;
    margin-top: 50px;
    margin-bottom: 50px;
}
/*/////// LOADER ///////*/























/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ OTP $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/* 6-digit code UI */
.otp6 {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

    .otp6 input {
        width: 44px;
        height: 52px;
        text-align: center;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 1px;
        border: 1px solid #ddd;
        border-radius: 10px;
        outline: 0;
        transition: border-color .15s, box-shadow .15s;
        background: #fff;
        color: #111;
    }

        .otp6 input:focus {
            border-color: var(--ios-blue, #0a84ff);
            box-shadow: 0 0 0 4px rgba(10,132,255,.15);
        }

        .otp6 input::-webkit-outer-spin-button,
        .otp6 input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        /* Firefox numeric spin removal if you switch to type=number */
        .otp6 input[type=number] {
            -moz-appearance: textfield;
        }










.divLangChange {
    border-radius: 50%;
    padding: 10px;
    margin: 1px;
}

.divLangEnglish {
    display: none;
}

.divLangArabic {
    display: block;
}














/*############################ Video Call ##############################*/

.divMeetingOuter {
    /*max-width: 767px;*/
    height: calc(100vh - 57px);
    max-height: calc(100vh - 57px);
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

.videoGrid {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    display: block;
}


.video-frame-container {
    position: absolute;
    overflow: hidden;    
}

.video_remote_viewer {
    height: 100vw; /* Make the child element fill the grid cell width */
    width: 100vw; /* Make the child element fill the grid cell width */
    min-height: calc(100% - 2px);
    max-height: calc(100% - 2px);
    max-width: 100%;
    top: 0px;
    left: 0px;
    background-color: #000000;
}

.video_local_viewer {
    width: 30vw; /* Make the child element fill the grid cell width */
    max-width: 230px;
    aspect-ratio: 1 / 1;
    z-index: 10;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
    inset-inline-start: 1px; /* right in LTR and RTL */
    
    background-color: #91abdb;
}

.video-frame {
    width: 100%;
    height: 100%;
    object-position: center; /* where to crop from */
    background: #000; /* in case video isn’t ready */
    
    /* default = crop edges to fill */
    /*object-fit: cover;*/


    /* Toggle to show entire frame (letterbox) */
    object-fit: contain;
    /* Optional: bias the crop upward to keep faces in frame */
    object-position: 50% 35%;

}


.video_local_viewer .video-frame {
    /* Mirror local camera (common for self-view) */
    transform: scaleX(-1);
}





.divPname {
    display: block;
    transform: unset !important;
    color: #e6eaff;
    width: 80%;
    left: 10% !important;
    top: 3% !important;
    text-align: center;
    position: absolute;
}


.canv_Audio_Level {
    position: absolute !important;
    top: 15% !important;
    inset-inline-start: 5% !important;
    bottom: unset !important;
    width: 15px !important;
    transform: unset !important;
}


.divDreamNum {
    display: inline-block;
    position: absolute;
    inset-inline-start: 12px;
    color: #fff;
    direction: rtl !important;
    height: 20px;
    top: 0;
    line-height: 27px;
    font-size: 13px;
    text-align: start;
    z-index: 5;
}




.divChat_Outer {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    top: 40%;
    background-color: #ffffff97;
    color: #111111;
    padding: 10px;
    overflow: hidden;
    /*margin-bottom: 35px;*/
    z-index: 50 !important;
    inset-inline-end: 85px;
    inset-inline-start: 1px;
    /* background-image: -moz-linear-gradient(top, transparent, #000000);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000000));
    background-image: -webkit-linear-gradient(top, transparent, #000000);
    background-image: -o-linear-gradient(top, transparent, #000000);
    background-image: linear-gradient(to bottom, transparent, #000000 25%, #000000 80%, transparent);
    background-repeat: repeat-x;*/
}

.divChat_Inner {
    padding-left: 24px;
    padding-right: 24px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
    direction: rtl !important;
    text-align: right !important;
    opacity: 0.9;
    margin-bottom: 79px;
}




.chat-input {
    display: flex;
    flex: 0 0 auto;
    height: 40px;
    background: #40434e;
    border-top: 1px solid #2671ff;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    position: absolute;
    bottom: 22px;
    inset-inline-start: 85px;
    inset-inline-end: 85px;
    border-radius: 50px;
    z-index: 51;
}

.txtSendChat {
    height: 39px !important;
    line-height: 40px !important;
    outline: 0 none !important;
    border: none !important;
    width: calc(100% - 60px) !important;
    color: #ffffff !important;
    text-indent: 10px !important;
    font-size: 12pt !important;
    padding: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background: #40434e !important;
    margin-top: 0 !important;
    text-align: right;
}

.divSendChat {
    display: inline-block;
    color: #eaffa4;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    overflow: hidden;
    width: 50px;
    height: 40px;
}

    .divSendChat .divSendChatIcon {
        display: inline-block;
        overflow: hidden;
        font-size: 25px;
        padding-top: 5px;
        padding-left: 5px;
    }





.imgSenderAvatar {
    display: inline-block;
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.txtSenderame {
    display: inline-block;
}

.txtMessage {
    display: inline-block;
    padding-right: 5px;
}

.divMessageInfo {
    display: inline-block;
    padding-right: 5px;
}


@media (min-width: 768px) {
    .video_remote_viewer {
        min-height: calc(100% - 1px);
        max-height: calc(100% - 1px);
    }

    .video_local_viewer {
        bottom: 3px;
    }

}


@media (max-width: 768px) {



    .divMeetingOuter {
        /*max-width: 767px;*/
        height: calc(100vh - 58x);
        max-height: calc(100vh - 58px);
    }

    .divChat_Outer {
        bottom: 3px;
        inset-inline-end: 60px;
    }

    .divChat_Inner {
        margin-bottom: 50px;
    }

    .chat-input {
        bottom: 10px;
        inset-inline-start: 60px;
        inset-inline-end: 60px;
    }

    .video_local_viewer {
        bottom: 3px;
        inset-inline-end: 55px;
    }



}




































/* Vertical tools rail */
.tools-rail {
    position: absolute;
    inset-block: 12px 25px; /* top & bottom, fits height */
    inset-inline-end: 1px; /* right in LTR and RTL */
    width: 68px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    /* fancy translucent background */
    background: rgba(18, 22, 40, .38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px; /* rounded ends */
    box-shadow: 0 18px 40px rgba(34,41,84,.20);
    z-index: 50;
}

    /* Make every tool fill space equally */
    .tools-rail .tool {
        flex: 1 1 0;
        min-height: 56px; /* keeps tap size reasonable if lots of tools */
        display: grid;
        place-items: center;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.18);
        color: #fff;
        background: rgba(255,255,255,.06);
        user-select: none;
        cursor: pointer;
        transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }

        /* hover/active */
        .tools-rail .tool:hover {
            transform: translateY(-1px);
            background: rgba(255,255,255,.10);
            box-shadow: 0 8px 18px rgba(34,41,84,.18);
        }

        .tools-rail .tool:active {
            transform: translateY(0);
        }

    /* icon sizing (Material Icons) */
    .tools-rail .material-icons {
        font-size: 26px;
        line-height: 1;
    }

/* “outline” style variant (for normal tools) */
.tool--outline {
    background: rgba(255,255,255,.06);
}

/* “danger” style for End Call */
.tool--danger {
    background: rgba(212,58,58,.18);
    border-color: rgba(212,58,58,.45);
}

    .tool--danger:hover {
        background: rgba(212,58,58,.28);
        box-shadow: 0 8px 18px rgba(212,58,58,.35);
    }

/* Toggle ‘on’ state */
.tool.is-on {
    background: rgba(116,128,255,.22);
    border-color: rgba(116,128,255,.45);
}


.btn_meetin_tools
{
    background-color: transparent;
}
/* If you need it to move to the LEFT side later, just flip this: */
/* .tools-rail { inset-inline-start: 12px; inset-inline-end: auto; } */


@media (max-width: 768px) {
    .tools-rail {
        inset-block: 6px 6px; /* top & bottom, fits height */
        inset-inline-end: 0px; /* right in LTR and RTL */
        width: 50px;
        gap: 5px;
        padding: 5px;
    }

        .tools-rail .material-icons {
            font-size: 22px;
            line-height: 1;
        }
}














[hidden] {
    display: none !important;
    visibility: hidden !important;
}

.videoGrid audio
{
    display: none;
    width: 1px;
    height: 1px;
}



























.divMeetingWhitboardHolder {
    display: none;
    height: calc(100% + 40px);
    margin-top: -40px; /*This is to move the ifram up and hide the top menu*/
    margin-left: auto;
    margin-right: auto;
    position: relative;
    inset-inline-end: 40px;
    width: calc(100% - 70px);
    z-index: 555;
}


.divMeetingWhitboardHolder_iFrame {
    height: 100%;
    width: 100%;
}








.divVideoShareHolder {
    display: none;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    inset-inline-end: 40px;
    width: calc(100% - 70px);
    z-index: 555;
}


.divVideoShareHolder_iFrame {
    height: 100%;
    width: 100%;
}












.divPDFShareHolder {
    display: none;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /*inset-inline-end: 40px;*/
    width: 100%;
    z-index: 10;
    left: 0;
}


.divPDFShareHolder_iFrame {
    height: 100%;
    width: 100%;
}





@media (max-width: 768px) {
    .divMeetingWhitboardHolder {
        inset-inline-end: 30px;
        width: calc(100% - 55px);
    }

    .divVideoShareHolder {
        inset-inline-end: 30px;
        width: calc(100% - 55px);
    }


    .divPDFShareHolder {
        /*inset-inline-end: 30px;
        width: calc(100% - 55px);*/
    }

    .header-wrap
    {
        display: none;
    }
}







.panel-head.hidden
{
    display: none;
}





.profile_guest_guest
{
    display: none !important;
}

.profile_login
{
    visibility: collapse;
}

.profile_login_guest {
    visibility: visible;
}






































/* Shell */
.tutor-shell {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--shell-margin);
    padding-top: 1px;
    display: grid;
    gap: 16px;
    background: transparent;
}

/* HERO */
.tutor-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.avatar-wrap {
    position: relative;
    aspect-ratio: 1/1;
}


.online-dot {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-end: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #9aa0a6;
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}

    .online-dot.is-online {
        background: #2ecc71;
    }

.hero-main {
    display: grid;
    gap: 10px;
}

.name-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tutor-name {
    margin: 0;
    font-size: clamp(18px, 1.6vw + 12px, 28px);
    color: var(--color-text);
}

.rating-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.rating-text {
    font-weight: 700;
    color: var(--color-text-dim);
}

.hero-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.profile_badge {
    padding: .35em .65em;
    font-size: .75em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-weight: 300;
}


.profile_badge_true {
    background: color-mix(in oklab, var(--color-primary) 54%, white 0%);
    color: var(--color-text-light);
}


.profile_badge_false {
    background: color-mix(in oklab, var(--color-secondary-lighter) 54%, white 0%);
    color: var(--color-text-alert);    
}






.dim {
    color: var(--color-text-dim);
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* BODY LAYOUT */
.tutor-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-height: 0; /* allow children to shrink if needed */
}

.pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0; /* important for nested scrolling */
}

.card {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow);
}

/* Cards fit their content by default */
.pane > .card {
    flex: 0 0 auto; /* content height */
}

    /* The LAST card fills the remaining space */
    .pane > .card:last-child {
        flex: 1 1 auto; /* grow to consume leftover */
        min-height: 0; /* allow inner scroll if content taller */
        overflow: auto; /* optional: scroll inside the last card */
    }



.card-title {
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 8px;
}

    .card-title span
    {
        font-weight: 300;
    }

    .card-text {
        color: var(--color-text);
    }

/* Progress meter */


/* Video frame */
.video-frame-page {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

    .video-frame-page video {
        width: 100%;
        height: 280px;
        object-fit: cover;
    }

.no-video {
    padding: 24px;
    text-align: center;
    color: var(--color-text-dim);
}



.introvideo {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

    .introvideo video {
        width: 100%;
        height: 280px; /* adjust as needed */
        object-fit: cover;
        display: block;
        outline: none;
    }

/* control cluster bottom inline-end (RTL/LTR safe) */
.vid-ctrls {
    position: absolute;
    inset-block-end: 7px;
    inset-inline-end: 7px;
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--color-surface,#171a2b) 32%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    width: calc(100% - 15px);
}

.ctrl-btn {
    /*width: 42px;*/
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: color-mix(in oklab, #ffffff 8%, transparent);
    border: 1px solid rgba(255,255,255,.18);
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
    flex: auto;
}

    .ctrl-btn:hover {
        transform: translateY(-1px);
        background: color-mix(in oklab, #ffffff 14%, transparent);
    }

    .ctrl-btn:active {
        transform: translateY(0);
    }

    .ctrl-btn .ico {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

    .ctrl-btn.is-primary {
        background: color-mix(in oklab, var(--color-primary,#0a84ff) 85%, white 0%);
        border-color: color-mix(in oklab, var(--color-primary,#0a84ff) 65%, transparent);
        box-shadow: 0 8px 20px color-mix(in oklab, var(--color-primary,#0a84ff) 35%, transparent);
    }

/* hide native controls completely */
#introVideo::-webkit-media-controls {
    display: none !important;
}

#introVideo {
    controls: none;
}

.ctrl-btn .material-icons {
    font-size: 22px;
    line-height: 1;
    color: currentColor;
}







/* Responsive */
@media (max-width: 900px) {
    .tutor-body {
        grid-template-columns: 1fr;
    }

    .avatar-wrap {
        
    }

    .ctrl-btn {
        /*width: 42px;*/
        height: 30px;
    }
}

/* RTL/LTR safe: rely on logical properties already used above */






































/*THE TEACHERS SLOTS RESERVATION PAGE*/
/* Shell */
.slots-shell {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--shell-margin);
    display: grid;
    gap: 16px;
}

/* One day group */
.day-group {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Day header */
.day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: color-mix(in oklab, var(--color-primary-lighter) 18%, white 0%);
    color: var(--color-text);
    font-weight: 800;
}


.day-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: color-mix(in oklab, var(--color-primary-lighter) 10%, white 0%);
    color: color-mix(in oklab, var(--color-text-dim) 60%, white 0%);
    font-weight: 600;
    position: relative;
    min-height: 40px;
}

.day-footer-timezone {
    inset-inline-end: 15px;
    /*inset-block-end: 0px;
    margin-inline-end: 0px;
    padding-inline-end: 0px;*/
    position: absolute;
}


/* Slots grid */
.day-body {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(160px, 1fr) );
    gap: 10px;
}

/* Slot card (base) */
.slot {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 10px 9px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 6px 12px rgba(34,41,84,.06);
    user-select: none;
    cursor: default;
    min-height: 62px;
    text-align: center;
}

/* Inner bits */
.slot-time {
    font-size: calc(var(--fs-base) - 1px);
    font-weight: 650;
}

.slot-meta {
    font-size: var(--fs-badge);
    color: var(--color-text-dim);
}

/* Interactive “Open” slots look clickable */
.slot[role="button"] {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

    .slot[role="button"]:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(34,41,84,.12);
    }

    .slot[role="button"]:active {
        transform: translateY(0);
    }

/* Status variants (customize freely) */
.slot--open {
    border-color: color-mix(in oklab, var(--color-primary) 45%, transparent);
    background: color-mix(in oklab, var(--color-primary) 10%, white 90%);
}

.slot--booked {
    /*border-color: color-mix(in oklab, var(--color-secondary) 35%, transparent);
    background: color-mix(in oklab, var(--color-secondary-light) 15%, white 90%);*/
    border-color: color-mix(in oklab, var(--color-text) 55%, transparent);
    border-style: dashed;
    background: color-mix(in oklab, var(--color-text) 10%, transparent);
    color: color-mix(in oklab, var(--color-text-dim) 100%, #666);
}

.slot--off {
    --angle: 40deg; /* change to -45deg if you like */
    --gap: 6px; /* clear space between stripes */
    --thickness: 1px; /* stripe thickness */
    border-color: color-mix(in oklab, var(--color-secondary) 55%, transparent);
    background: repeating-linear-gradient( var(--angle)
    , transparent 0
    , transparent var(--gap)
    , color-mix(in oklab, var(--color-secondary) 45%, transparent) var(--gap)
    , color-mix(in oklab, var(--color-secondary) 45%, transparent) calc(var(--gap) + var(--thickness)) );
}


.slot--booked--for--you {
    border-color: color-mix(in oklab, var(--color-surface) 45%, transparent);
    background: color-mix(in oklab, var(--color-success) 10%, white 90%);
}


.slot--booked--reschadual {
    border-color: color-mix(in oklab, var(--color-surface) 45%, transparent);
    background: color-mix(in oklab, var(--color-success) 10%, white 90%);
}



.slot--completed {
    border-style: dashed;
    color: color-mix(in oklab, var(--color-text) 70%, #3f3f3f);
    background: #fafbff;
}

.slot--closed {
    background: #f6f7fb;
    color: color-mix(in oklab, var(--color-text-dim) 100%, #666);
    min-height: 0;
}






.slot--unavailable {
    background: #f6f7fb;
    color: color-mix(in oklab, var(--color-text-dim) 100%, #666);
    opacity: .7;
    min-height: 0;
    /*max-height: 0;
    height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
    gap: 0;*/
}

.slot--unavailable .slot-time{
    /*display: none;*/
    font-size: var(--fs-badge);
    text-decoration-line: line-through;
    font-weight: 600;
}

    .slot--unavailable .slot-meta {
        display: none;
    }


/* Tiny legend (optional) */
.slots-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-dim);
    position: relative;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-timezone {
    inset-inline-end: 5px;
    /*inset-block-end: 0px;
    margin-inline-end: 0px;
    padding-inline-end: 0px;*/
    position: absolute;
}


.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.legend-open .legend-dot {
    background: color-mix(in oklab, var(--color-primary) 70%, white 0%);
}

.legend-booked .legend-dot {
    background: var(--color-secondary);
}

.legend-booked--for--you .legend-dot {
    background: var(--color-success);
}

.legend-completed .legend-dot {
    background: #9aa0a6;
}

.legend-closed .legend-dot,
.legend-unavailable .legend-dot {
    background: #c8ccd9;
}

.day-head-Saturday
{

}
.day-head-Sunday
{

}
.day-head-Monday
{

}
.day-head-Tuesday
{

}
.day-head-Wednesday {

}
.day-head-Thursday {

}
.day-head-Friday {

}


.img-teacher-avatar-booktime {
    width: 32px;
    height: 32px;
}
.teacher-name-booktime {
    font-weight: 700;
    font-size: calc(var(--fs-base) - 2px);
}
.teacher-meta-booktime {
    font-weight: 650;
    font-size: calc(var(--fs-base) - 3px);
}

.avatar_online_status-booktime {
    width: 12px;
    height: 12px;
    inset-inline-end: 0px;
    border: 1px solid #ffffff;
}

.teacher-body-booktime {
    gap: 2px;
}


.teacher-avatar-booktime {
    border: 0.5px solid var(--color-surface);
    background: none;
}




@media (max-width: 768px) {
    .day-head {
        padding: 1px 14px;
        font-weight: 600;
        font-size: calc(var(--fs-base) - 3px);
    }

    .day-footer {
        padding: 5px 14px;
        font-weight: 600;
        font-size: calc(var(--fs-base) - 3px);
        min-height: 30px;
    }

    .slot {
        padding: 5px 6px;
        min-height: 45px;
        gap: 3px;
    }
    .slot-time {
        font-size: calc(var(--fs-base) - 3px);
        font-weight: 650;
    }

    .slot-meta {
        font-size: calc(var(--fs-badge) - 1px);
        color: var(--color-text-dim);
    }

    .slot--unavailable {
        min-height: 0;
    }
    .slot--closed {
        min-height: 0;
    }



    .img-teacher-avatar-booktime {
        width: 24px;
        height: 24px;
    }

    .teacher-name-booktime {
        font-weight: 600;
        font-size: calc(var(--fs-base) - 3px);
    }
    .teacher-meta-booktime {
        font-weight: 500;
        font-size: calc(var(--fs-base) - 5px);
        color: var(--color-primary-light);
    }


    .avatar_online_status-booktime {
        width: 10px;
        height: 10px;
        inset-inline-end: 0px;
        border: 1px solid #ffffff;
    }

    .teacher-head-booktime {
        margin-top: 3px;
        margin-bottom: 3px;
    }


    .teacher-body-booktime {
        gap: 0px;
    }


}










/*///////////////////////// Lessons List ////////////////////////////////////*/
.lesson-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.lesson-head-main {
    display: grid;
    gap: 4px;
}

.lesson-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lesson-title {
    font-weight: 800;
    color: var(--color-text);
    font-size: 0.95rem;
}

.lesson-level {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--color-text-dim);
}

.lesson-meta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.78rem;
}

.lesson-meta-left,
.lesson-meta-right {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.lesson-time-chip,
.lesson-teacher-chip,
.lesson-duration-chip {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,0.03);
    color: var(--color-text-dim);
}

.lesson-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.lesson-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

/* Variants */
.lesson-status--completed {
    background: rgb(46, 204, 49, 0.12);
    color: #1e7d26;
}

    .lesson-status--completed .lesson-status-dot {
        background: #5bcc2e;
    }




.lesson-status--passed {
    background: rgb(204, 46, 46, 0.12);
    color: #7d1e1e;
}

    .lesson-status--passed .lesson-status-dot {
        background: #cc2e2e;
    }

.lesson-status--pending {
    background: rgba(241, 196, 15, 0.12);
    color: #9a7b00;
}

    .lesson-status--pending .lesson-status-dot {
        background: #f1c40f;
    }

.lesson-status--on-time {
    background: rgba(52, 152, 219, 0.12);
    color: #1b6fa5;
}

    .lesson-status--on-time .lesson-status-dot {
        background: #3498db;
    }

.lesson-status--unknown {
    background: rgba(0,0,0,0.05);
    color: var(--color-text-dim);
}

    .lesson-status--unknown .lesson-status-dot {
        background: rgba(0,0,0,0.25);
    }

/* content layout inside accordion */
.lesson-extra-grid {
    display: grid;
    gap: 10px;
    padding-top: 6px;
}

@media (min-width: 640px) {
    .lesson-extra-grid {
        grid-template-columns: minmax(0,2fr) minmax(0,1.5fr);
    }
}

.lesson-extra-col .extra-title {
    font-weight: 700;
    margin-bottom: 4px;
}




/* Small subject icon on lesson avatar */
.lesson-subject-pill {
    position: absolute;
    inset-inline-start: -4px;
    inset-block-end: -4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid #fff;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

    .lesson-subject-pill img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Chips row under lesson header */
.lesson-chips {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* You already use .chip in bookings; reuse same styles */




/*///////////////////////// Lessons List ////////////////////////////////////*/




















/*######################################*/
/************************** PLANS LIST */
/* Grid */
.plans-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    width: 100%;
}

/* Card */
.plan-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 12px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .plan-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(34,41,84,.12);
    }

/* Header row */
.plan-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 auto;
    background: #f6f7fb;
    border: 1px solid var(--stroke);
}

    .plan-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Titles */
.plan-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.plan-name {
    font-weight: 800;
    font-size: clamp(14px, 1vw + 10px, 18px);
    color: var(--color-text);
}

.plan-sub {
    font-size: 12px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badges */
.plan-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--color-primary-lighter) 10%, white 90%);
    border: 1px solid color-mix(in oklab, var(--color-primary-light) 40%, transparent);
    color: var(--color-text);
}

.badge--prime {
    background: color-mix(in oklab, var(--color-primary) 10%, white 90%);
    border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
}


.badge--warn {
    background: color-mix(in oklab, var(--color-secondary) 12%, white 90%);
    border-color: color-mix(in oklab, var(--color-secondary) 40%, transparent);
}

/* Price block */
.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px dashed var(--stroke);
    background: color-mix(in oklab, var(--color-primary-lighter) 8%, white 92%);
}

.price-main {
    font-weight: 900;
    font-size: clamp(16px, 1.2vw + 10px, 20px);
}

.price-sub {
    font-size: 12px;
    color: var(--color-text-dim);
}

/* Actions */
.plan-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

    .plan-actions .cbtn {
        flex: 1 1 auto;
        min-width: 140px;
    }

/* Subtle divider */
.plan-divider {
    height: 1px;
    background: var(--stroke);
    margin: 4px 0;
}

/* RTL niceties */
html[dir="rtl"] .plan-sub {
    text-align: right;
}
/************************** PLANS LIST */
/*######################################*/




















/*/////////////////////////////////// Bookings Page ////////////////////////////////*/
/* Shell similar to slots-shell */
.bookings-shell {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--shell-margin);
    display: grid;
    gap: 14px;
}

/* Booking card reusing teacher-card look */
.booking-card {
    background: var(--card);
    border-radius: 16px;
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

/* Left: subject icon */
.booking-icon-outer {
    inline-size: 52px;
    block-size: 52px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: color-mix(in oklab, var(--color-primary-light) 10%, white 90%);
}

    .booking-icon-outer img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        display: block;
    }

/* Middle: texts */
.booking-main {
    display: grid;
    gap: 4px;
}

.booking-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
}

    .booking-title .badge-plan {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 999px;
        background: color-mix(in oklab, var(--color-secondary-light) 40%, white 60%);
        color: #fff;
    }

.booking-sub {
    font-size: 0.8rem;
    color: var(--color-text-dim);
}

    .booking-sub span + span::before {
        content: "•";
        margin: 0 4px;
        opacity: .6;
    }

/* Right: lessons summary */
.booking-side {
    text-align: end;
    font-size: 0.78rem;
    color: var(--color-text-dim);
}

    .booking-side strong {
        font-size: 0.9rem;
        color: var(--color-text);
    }

/* Progress meter (reuse style similar to your existing .meter) */
.booking-meter {
    grid-column: 1 / -1;
    margin-top: 6px;
}

.booking-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-text-dim);
    margin-bottom: 3px;
}

.booking-meter-bar {
    position: relative;
    inline-size: 100%;
    block-size: 6px;
    border-radius: 999px;
    background: #e3e6ff;
    overflow: hidden;
}

    .booking-meter-bar i {
        display: block;
        block-size: 100%;
        inline-size: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
        transition: inline-size 0.22s ease;
    }

/* Status pill */
.booking-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f3f4fa;
}

.booking-status-pill--active {
    background: color-mix(in oklab, var(--color-primary) 12%, #e7f0ff 88%);
    color: var(--color-text);
}

.booking-status-dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 999px;
    background: var(--color-primary);
}

/* Empty state */
.bookings-empty {
    padding: 18px 14px;
    border-radius: 16px;
    border: 1px dashed var(--stroke);
    background: #f8f9ff;
    font-size: 0.9rem;
    color: var(--color-text-dim);
    text-align: center;
}




.booking-status-pill--completed {
    background: #eaeaea;
    color: #666;
}

    .booking-status-pill--completed .booking-status-dot {
        background: #999;
    }






.booking-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px 14px;
    align-items: stretch;
}

/* Avatar block */
.booking-leading {
    display: flex;
    align-items: center;
}

.booking-avatar-outer {
    position: relative;
    width: 52px;
    height: 52px;
}

.booking-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,.16);
    background: #fff;
}

    .booking-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* reuse your online dot style */
.booking-avatar-outer .avatar_online_status {
    position: absolute;
    inset-inline-end: -2px;
    inset-block-end: -2px;
}

/* small subject icon pill on avatar */
.booking-subject-pill {
    position: absolute;
    inset-inline-start: -6px;
    inset-block-end: -4px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid #fff;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

    .booking-subject-pill img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Chips row */
.booking-chips {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.1;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.7);
    color: var(--color-text-dim);
}

/* variations */
.chip--direct {
    border-color: color-mix(in oklab, var(--color-secondary) 40%, transparent);
    background: color-mix(in oklab, var(--color-secondary-lighter) 30%, #fff 70%);
}

.chip--slot {
    border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
}

.chip--online {
    border-color: color-mix(in oklab, var(--color-primary) 35%, transparent);
    background: color-mix(in oklab, var(--color-primary-lighter) 15%, #fff 85%);
}

.chip--expiry {
    border-style: dashed;
}

.chip--expiry-expired {
    border-color: var(--color-text-alert);
    color: var(--color-text-alert);
    background: color-mix(in oklab, var(--color-text-alert) 5%, #fff 95%);
}





/* --- Shell stays the same --- */
.booking-header-shell {
    max-width: var(--shell-max);
    margin-inline: auto;
    margin-block: 8px 16px;
    padding-inline: var(--shell-margin);
}

/* MOBILE-FIRST CARD  ---------------------------------- */
.booking-header-card {
    position: relative;
    border-radius: 24px;
    padding: 12px 12px 10px;
    background: radial-gradient(circle at 0 0, rgba(116,152,255,.18) 0, rgba(116,152,255,0) 50%), radial-gradient(circle at 100% 0, rgba(255,180,200,.20) 0, rgba(255,180,200,0) 55%), var(--card, #f7f8ff);
    box-shadow: 0 10px 24px rgba(17,24,64,.14);
    display: flex; /* column on mobile */
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

/* LEFT / MAIN TEXT ------------------------------------ */
.booking-header-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-header-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    font-size: .95rem;
    color: var(--color-text);
}

    .booking-header-title-row span.level {
        font-weight: 500;
        font-size: .8rem;
        opacity: .75;
    }

/* Meta line (teacher / student + created date) */
.booking-header-meta {
    font-size: .78rem;
    color: var(--color-text-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chips row */
.booking-header-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.booking-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .7rem;
    background: rgba(255,255,255,.9);
    color: var(--color-text-dim);
    border: 1px solid rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
}

    .booking-chip svg {
        width: 11px;
        height: 11px;
    }


    /*

    */


.booking-chip--direct {
    background: color-mix(in oklab, var(--color-primary) 14%, #fff);
}

.booking-chip--online {
    background: color-mix(in oklab, var(--color-secondary) 10%, #fff);
}

.booking-chip--expires {
    background: #fff;
}

/* RIGHT SIDE (avatars + counts) ----------------------- */
.booking-header-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Avatar cluster */
.booking-header-avatars {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

    /* If you keep teacher-avatar-outer inside, make sure it fills */
    .booking-header-avatars .teacher-avatar-outer,
    .booking-header-avatars .person-icon {
        position: absolute;
        inset: 0;
    }


/* Counts */
.booking-header-counts {
    text-align: end;
    min-width: 0;
    font-size: .75rem;
    color: var(--color-text-dim);
}

    .booking-header-counts strong {
        font-size: .9rem;
        color: var(--color-text);
    }

.booking-header-progress {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
}

.booking-header-progress-bar {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: rgba(255,255,255,.7);
    overflow: hidden;
}

    .booking-header-progress-bar i {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        border-radius: inherit;
        background: linear-gradient( 90deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 50%, var(--color-secondary)) );
    }

/* --- DESKTOP / TABLET UPGRADE ------------------------ */
@media (min-width: 640px) {
    .booking-header-card {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
    }

    .booking-header-main {
        flex: 1;
    }

    .booking-header-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        min-width: 170px;
    }

    .booking-header-avatars {
        width: 52px;
        height: 52px;
    }
}


/*/////////////////////////////////// Bookings Page ////////////////////////////////*/















/*///////////////////////////// Page Navigation Spinner //////////////////////////////////*/
/* Full page overlay */
#page-loader {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999999;
}

/* Simple CSS spinner */
.spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 6px solid #ccc;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/*///////////////////////////// Page Navigation Spinner //////////////////////////////////*/