/* 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 {
    /* Global website zoom/text scale. Change this value or use the helper classes below. */
    --website-text-scale: 1;
    font-size: calc(16px * var(--website-text-scale));
    --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: #d2d8f5; /*#e6eaff*/
    --shadow: 0 0.3125rem 0.625rem rgba(34,41,84,.12);
    /* Type scale */
    --fs-base: clamp(0.8125rem, 0.9vw + 0.625rem, 0.875rem);
    --fs-title: clamp(1rem, 1.2vw + 0.625rem, 1.25rem);
    --fs-badge: clamp(0.6875rem, 2.2vw, 0.875rem);
    --sat-off: .40; /* 0..1  (lower = more muted) */
    --sat-on: 1.3; /* 1 = full color */
    --panel-bg-opacity: 0;
    --shell-max: 60rem; /* pick your known width: 960/ 1200/1280/1440 */
    --shell-margin: clamp(0.5rem, 1vw, 1.25rem);
    --icon-gap: 2.1875rem;
    /* ================================
   iOS Light — Global baseline (LTR + RTL)
   ================================ */
    --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: 0.75rem;
    --ios-pad-y: .72rem;
    --ios-pad-x: .9rem;
    --ios-focus: 0 0 0 0.25rem 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;
    --radius: 0.625rem;
}

    /* Website text size presets */
    /*:root.text-size-small {
        --website-text-scale: 0.9;
    }

    :root.text-size-normal {
        --website-text-scale: 1;
    }

    :root.text-size-large {
        --website-text-scale: 1.15;
    }

    :root.text-size-xlarge {
        --website-text-scale: 1.3;
    }*/

/* Keep form controls and buttons aligned with the scaled root size */
body,
button,
input,
textarea,
select {
    font-size: 1rem;
}






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



.chat-message-time .material-symbols-outlined {
    font-size: 1.125rem !important;
    line-height: 0.9rem !important;
}

.chat-seen-icon.is-seen {
    color: var(--color-primary, #2563eb);
}

.chat-seen-icon.is-sent {
    color: #9ca3af;
}





.divMissedComList {
    display: flex;
    background-color: #ffef0036;
    border-radius: 0.9375rem;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
    gap: 0.75rem;
}

.divComCountPanel {
    display: inline-flex;
    height: 1.875rem;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.5625rem;
}

.divComCountPanelMessage {
}

.divComCountPanelMissed {
}


.spnComCount {
    margin: 0.125rem;
    background-color: #ff000024;
    padding: 0.125rem;
    min-width: 1.25rem;
    text-align: center;
    border-radius: 50%;
}

.spnComCountMessage {
}

.spnComCountMissed {
}


.spnComDate {
    font-size: 0.5rem;
    color: var(--color-text-dim);
}

.spnComDateMessage {
}

.spnComDateMissed {
}

.spnLastWasOn {
}



.divComCountPanel .material-symbols-outlined {
    font-size: 0.9375rem;
    color: red;
}





.subsList_Relative {
    position: relative;
    z-index: 9;
}


.btn-bell-icon {
    display: none;
    border-radius: 62.4375rem;
    border: none;
    background: #d6d6d663;
    padding: 0.25rem 0.375rem;
    cursor: pointer;
}

/* Parent must be positioning context */
.noti-bell {
    position: fixed;
    inset-block-end: 4.375rem; /* bottom */
    inset-inline-end: 1rem; /* end = right in LTR, left in RTL */
    z-index: 9999;
    margin-inline-start: auto;
    width: 3.125rem;
}

    .noti-bell .material-symbols-outlined {
        font-variation-settings: 'FILL' 1;
        font-size: 2rem;
    }

/* Badge floats at bottom-start */
#NotiBellBadge {
    position: absolute;
    inset-block-end: -0.3125rem; /* bottom */
    inset-inline-start: -0.375rem; /* start (left in LTR, right in RTL) */
    min-width: 1rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 62.4375rem;
    display: none;
    font-size: 0.75rem;
    line-height: 0.875rem;
    text-align: center;
    background: var(--color-error, #dc2626);
    color: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.18);
    border: 0.125rem solid #fff; /* looks cleaner on top of icon */
}

/* Optional: when there are notifications */
#NotiBellIcon.has-new .material-symbols-outlined {
    color: var(--color-error, #dc2626);
}








/*Notification Updates Page Rows*/

/* List rows */
.noti-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.noti-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.625rem 0.625rem;
    border-radius: 0.625rem;
    cursor: pointer;
}

    .noti-row:hover {
        background: #f9fafb;
    }

.noti-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.noti-row-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noti-row-preview {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noti-row-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.noti-empty {
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
}




.noti-row-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noti-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 62.4375rem;
    flex: 0 0 auto;
}

.noti-dot-online {
    background: var(--color-success, #16a34a);
}

.noti-dot-busy {
    background: #f59e0b;
}

.noti-dot-offline {
    background: #9ca3af;
}

.noti-row-time {
    font-size: 0.6875rem;
    color: #9ca3af;
    margin-top: 0.125rem;
}


/*Notification Updates Page Rows*/






















.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

.material-border {
    -webkit-text-stroke: 0.0625rem black;
    paint-order: stroke fill;
}

}


/* ---------------------------
   Global modern scrollbar
   Works in: Chrome/Edge/Safari (webkit), Firefox (native)
   Others will gracefully ignore.
---------------------------- */
/* Firefox */
* {
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: rgb(178, 178, 178, 0.45) transparent; /* thumb track */
}

    /* Chrome / Edge / Safari */
    *::-webkit-scrollbar {
        width: 0.625rem;
        height: 0.625rem;
    }




@media (max-width: 45rem) {
    /* Chrome / Edge / Safari */
    *::-webkit-scrollbar {
        width: 0.0625rem;
        height: 0.0625rem;
    }
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgb(237, 237, 237, 0.35);
    border-radius: 62.4375rem;
    border: 0.125rem solid transparent;
    background-clip: content-box;
}

    *::-webkit-scrollbar-thumb:hover {
        background: rgb(215, 215, 215, 0.55);
    }









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)
}




body {
    padding-top: env(safe-area-inset-top);
}




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

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

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

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

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





.chat_loading_element {
    position: absolute !important;
    width: min(var(--shell-max), calc(100vw - 2 * var(--shell-margin)));
    max-width: min(var(--shell-max), calc(100vw - 2 * var(--shell-margin)));
    text-align: center !important;
    overflow: hidden !important;
}


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





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

.logo {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#f7b267,var(--color-secondary));
    box-shadow: 0 0.375rem 1.125rem rgba(255,138,60,.35)
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: calc(100% - 12.5rem);
}




.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: 0.75rem;
    margin-bottom: 0.3125rem;
    margin-top: 0.1875rem;
}

.spnAccountNumTitle {
    font-weight: bold;
}

.spnAccountNumValue {
    text-decoration: initial;
}





.ringing_player {
    width: 0.625rem;
    height: 0.625rem;
    opacity: 0.1;
    position: relative;
    left: -6.25rem;
    top: -6.25rem;
}





.nav-item {
    position: relative;
    display: grid;
    flex: auto;
    grid-auto-flow: row;
    justify-items: center;
    align-items: center;
    gap: 0.0625rem;
    min-block-size: 2.8125rem;
    border-radius: 0.75rem; /* 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: 0.875rem 0.875rem; /* leave top/bottom breathing room */
        width: 0.0625rem;
        /*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-symbols-outlined, .nav-item .material-symbols-outlined {
        font-size: 1.625rem;
        line-height: 1;
        color: var(--color-text-dim);
        transition: color .12s ease;
    }

    .nav-item .lord-icon {
        font-size: 1.625rem;
        color: var(--color-text-dim);
        --lord-icon-primary: var(--color-text-dim);
        --lord-icon-secondary: var(--color-secondary);
    }

    .nav-item .label {
        font-size: 0.75rem;
        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(-0.0625rem);
    }

    .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 0.5rem 1.125rem color-mix(in srgb, var(--color-primary) 28%, transparent);
    }

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


        .nav-item.is-active .lord-icon {
            --lord-icon-primary: var(--color-text);
        }



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


    /* Badge */
    .nav-item .badge {
        position: absolute;
        inset-inline-end: 0.75rem;
        inset-block-start: 0.5rem;
        background: var(--color-secondary);
        color: #fff;
        font-size: 0.625rem;
        font-weight: 800;
        padding: 0.125rem 0.375rem;
        border-radius: 62.4375rem;
        line-height: 1;
        box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,.25);
    }


















/* Subjects block – visually similar to forced notification topics */

#SubjectsContainer {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.subject-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    background: #f9fafb;
    border: 0.0625rem solid var(--border-subtle, #e5e7eb);
}

.subject-main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.subject-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.subject-hint {
    font-size: 0.6875rem;
    color: #6b7280;
}

.subject-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* locked switch: visually disabled (but we already have input[disabled]) */
.locked-switch input[disabled] + .track {
    opacity: .7;
    cursor: default;
}

.subject-lock-icon {
    font-size: 1rem;
    color: #9ca3af;
}





























/* Notification settings shell – reuse your page/card layout around it */
.notif-page-shell {
    padding: 0.75rem;
}

/* title */
.notif-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--color-primary, #111827);
}

/* each topic row */
.notif-topic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 0.0625rem solid #e5e7eb;
}

.notif-topic-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.notif-topic-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text, #111827);
}

.notif-topic-name-en {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
}

.notif-topic-forced {
    font-size: 0.6875rem;
    color: #b91c1c;
}

/* Switch – compatible with your other toggles */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 1.5rem;
    cursor: pointer;
}

    .switch input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .switch .track {
        position: absolute;
        inset: 0;
        border-radius: 62.4375rem;
        background: #e5e7eb;
        transition: background 0.2s ease;
    }

    .switch .thumb {
        position: absolute;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 62.4375rem;
        background: #ffffff;
        box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.25);
        transition: transform 0.2s ease;
    }

    /* RTL: when checked, move thumb left */


    .switch input:checked + .track {
        background: var(--color-secondary, #16a34a);
    }

    .switch input:disabled + .track {
        opacity: 0.6;
    }

    .switch input:disabled ~ .thumb {
        opacity: 0.6;
    }

@media (max-width: 40rem) {
    .notif-topic-row {
        align-items: flex-start;
    }
}
































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

.avatar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: rgba(255,255,255,.1);
    border: 0.0625rem solid rgba(255,255,255,.25);
    padding: 0.375rem 0.5rem;
    border-radius: 0.75rem;
    cursor: pointer;
}

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

.menu-btn {
    display: none
}



.Avatat_divDisplayName {
    font-size: 0.6875rem;
    font-weight: 200;
}









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

.footer .right {
    display: none;
    overflow: visible !important;
}




/* Only on mobile */
@media (max-width: 48rem) {
    .footer .right {
        display: flex;
        overflow: visible !important;
    }



    .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(0.625rem);
        -webkit-backdrop-filter: blur(0.625rem);
        padding: 0.3125rem 0.3125rem calc(0.3125rem + 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: 0.0625rem;
        min-block-size: 2.5rem;
        border-radius: 0.75rem; /* 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: 0.125rem;
    }

        /* Fancy separators (hairline) — no borders */
        .tabbar-item::after {
            content: "";
            position: absolute;
            inset-inline-end: 0;
            inset-block: 0.375rem 0.375rem; /* leave top/bottom breathing room */
            width: 0.0625rem;
            /*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-symbols-outlined, .tabbar-item .material-symbols-outlined {
            font-size: 1.25rem;
            line-height: 1;
            color: var(--color-text-dim);
            transition: color .12s ease;
        }

        .tabbar-item .label {
            font-size: 0.625rem;
            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(-0.0625rem);
        }

        .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 0.5rem 1.125rem color-mix(in srgb, var(--color-primary) 24%, transparent);*/
        }



            .tabbar-item.is-active .material-symbols-outlined, .tabbar-item.is-active .material-symbols-outlined {
                /*color: var(--color-text);*/
                color: var(--color-primary);
                font-variation-settings: 'FILL' 1;
            }

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


        /* Badge */
        .tabbar-item .badge {
            position: absolute;
            inset-inline-end: 0.75rem;
            inset-block-start: 0.5rem;
            background: var(--color-secondary);
            color: #fff;
            font-size: 0.625rem;
            font-weight: 800;
            padding: 0.125rem 0.375rem;
            border-radius: 62.4375rem;
            line-height: 1;
            box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,.25);
        }















        /* Special center item */
        .tabbar-item.special-center {
            position: relative;
            margin-top: -1.25rem; /* lifts half above the nav */
            width: 3.5rem;
            height: 3.5rem;
            border: 0.25rem solid var(--ios-fill);
            border-radius: 50%;
            background: var(--color-primary);
            /*box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,.25);*/
            z-index: 10;
            transition: transform .2s ease, box-shadow .2s ease;
            margin-left: auto;
            margin-right: auto;
            --lord-icon-primary: #ffffff;
            --lord-icon-secondary: var(--color-secondary);
        }

            /* Make icon big inside the circle */
            .tabbar-item.special-center .material-symbols-outlined,
            .tabbar-item.special-center .material-symbols-outlined {
                font-size: 1.75rem;
                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(-0.1875rem);
                box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,.28);
            }

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



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

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

        60% {
            transform: scale(1.1) translateY(-0.3125rem);
            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: 0.3125rem;
    padding-right: 0.3125rem;
    /*padding-top: 1rem;*/
    padding-top: 0.375rem;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}

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




/* SLIDER */
.hero {
    padding-bottom: 1rem;
    /*padding-top: 1rem;*/
}

.slider-wrap {
    /*background: var(--card);
    border: 0.0625rem solid var(--stroke);
    box-shadow: var(--shadow);*/
    /*padding: 0.75rem;*/
    padding-left: 0.125rem;
    padding-right: 0.125rem;
    border-radius: 1.5rem;
    position: relative;
}

.subjects {
    display: grid;
    grid-auto-flow: column;
    --gap: 0.75rem;
    gap: var(--gap);
    padding: 0.25rem 0.0625rem 0.375rem 0.0625rem;
    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: 1.5rem;
    padding: 0;
    overflow: hidden;
    transition: transform .42s ease, box-shadow .42s ease;
    /*border: 0.0625rem solid var(--stroke);
    box-shadow: 0 0.5rem 1.125rem 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: -0.375rem;
        transform: translateX(-50%) translateY(-0.625rem);
        z-index: 2;
        padding: 0.0625rem 0.875rem;
        border-radius: 62.4375rem;
        background: #00063999;
        color: #fff;
        font-weight: 800;
        /*box-shadow: 0 0.5rem 1.25rem rgba(34,41,84,.25);*/
        font-size: var(--fs-badge);
        transition: transform .52s ease, opacity .52s ease;
    }



    .subject:hover, .subject.active {
        transform: translateY(-0.125rem);
        /*box-shadow: 0 0.5rem 1.125rem rgba(34,41,84,.10), 0 0 0 0.1875rem var(--color-secondary) inset, 0 0 0 0.0625rem var(--color-secondary);*/
    }

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


        .subject:hover .title, .subject.active .title {
            opacity: 0.1;
            transform: translateX(-50%) translateY(-1.25rem);
        }



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

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

.prev {
    left: 0.5rem
}

.next {
    right: 0.5rem
}

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

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

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

.panel_intro {
    padding: 0 !important;
    height: auto !important;
    margin-block-end: 1.125rem !important;
    overflow: hidden !important;
}


.panel-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.375rem 0.625rem 0.375rem
}

.back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.75rem;
    background: #f7f8ff;
    border: 0.0625rem solid var(--stroke);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: 0 0.375rem 0.875rem rgba(34,41,84,.06)
}

    .back svg {
        width: 1.125rem;
        height: 1.125rem
    }

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

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






.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: 2.8125rem;
    }




.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: 0.25rem;
    display: grid;
    gap: 0.75rem;
    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: 0.75rem;
    padding: 0.75rem;
    border: 0.0625rem solid var(--stroke);
    border-radius: 1rem;
    background: #fafbffe5;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease
}


@media (max-width: 45rem) {
    .sub-card, .teacher-card, .material-card {
        padding: 0.5rem;
    }
}



.sub-card:hover, .teacher-card:hover, .material-card:hover {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 1.125rem rgba(34,41,84,.08)
}

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




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




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

    border: 0.125rem 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 0.5rem 1.25rem 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-offline {
    filter: grayscale(100%);
    /*filter: grayscale(100%) blur(0.0625rem);*/
}


.img-sub-avatar {
    width: 2.1875rem;
    height: 2.1875rem;
}

.img-teacher-avatar {
    width: 2.1875rem;
    height: 2.1875rem;
}


.img-material-avatar {
    width: 2.1875rem;
    height: 2.1875rem;
}



.avatar_online_status {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background-color: gray;
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0.0625rem;
    border-radius: 50%;
    border: 0.125rem solid #ffffff;
}

.avatar_online_status_2 {
    position: unset !important;
}

.avatar_online_status_offline {
    background-color: #ff1d11;
}

.avatar_online_status_online {
    background-color: #44a241;
}

.avatar_online_status_busy {
    background-color: #f8a863;
}




/* ===== Star rating ===== */

.stars_outer_parent {
    display: inline-block;
}

.stars {
    --star-size: 0.875rem;
    --star-gap: 0.125rem;
    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(--color-secondary); /* filled color */
    width: var(--fill, 0%); /* set from inline style */
}

.rating-text {
    /*display: none;*/
    font-size: 0.7rem;
}



.stars .material-symbols-outlined {
    font-size: 0.7rem;
    font-variation-settings: 'FILL' 1;
}

.rate-item .stars .material-symbols-outlined {
    font-size: 2.0rem;
}


.btn_rate_star {
    font-variation-settings: 'FILL' 1;
    color: var(--color-secondary); /* filled color */
}



.sub-body, .teacher-body {
    flex: 1;
    display: grid;
    gap: 0.25rem
}

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


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



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




.extra-title {
    font-weight: 700;
    font-size: calc(var(--fs-title) - 0.1875rem);
    margin-bottom: 0.375rem;
}



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

.card_badge {
    padding: 0.125rem 0.5rem;
    border-radius: 62.4375rem;
    background: #eef0ff;
    border: 0.0625rem solid var(--stroke);
    font-size: calc(var(--fs-base) - 0.125rem);
    font-weight: 700;
    width: max-content
}

.ghost-btn {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid var(--stroke);
    background: #fff;
    display: grid;
    place-items: center
}

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

.meter {
    height: 0.375rem;
    border-radius: 62.4375rem;
    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;
    /*width: min(var(--shell-max), calc(100vw - 2 * var(--shell-margin)));
    margin-left: auto;
    margin-right: auto;*/
}

    .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, 23.75rem);
    background: var(--card);
    border-inline-start: 0.0625rem 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: 0.875rem;
    border-bottom: 0.0625rem solid var(--stroke)
}

.drawer-nav {
    display: grid;
    padding: 0.75rem;
    gap: 0.5rem
}

    .drawer-nav a {
        padding: 0.625rem 0.75rem;
        border-radius: 0.75rem;
        background: #f7f8ff;
        border: 0.0625rem solid var(--stroke)
    }

.drawer-close {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: #fff;
    border: 0.0625rem 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: 0.625rem;
    background: var(--color-primary-light);
    padding: 0.375rem;
    border-radius: 62.4375rem;
    border: 0.0625rem solid rgba(255,255,255,.06)
}


.chip {
    padding: 0.5rem 0.75rem;
    border-radius: 62.4375rem;
    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-light);
    }


        .chip:hover .cbtn__icon, .chip:hover .chip-icons {
            color: var(--color-text-light) !important;
        }




.right {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
}

.footer .right {
    background-color: var(--ios-fill);
    backdrop-filter: blur(0.625rem);
}


.btnSlider {
    /*opacity: 0.25;*/
    border: 0.0625rem solid #000;
    background: #ffffff7d;
    color: red;
}





@media (max-width: 48rem) {


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



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

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



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

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




    .ghost-btn {
        width: 1.5625rem;
        height: 1.5625rem;
        border-radius: 0.375rem;
    }
}



















/*#####################################################*/
/*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% - 1rem);
}

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

.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: 0.75rem;
    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: 0.75rem;
    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;
}


.tab-title-inner {
    display: flex;
    gap: 0.3125rem;
}

.is-open .tab-title-inner .material-symbols-outlined {
    color: var(--color-primary);
}

.hidden-icon-off {
    color: var(--color-secondary);
}


.hidden-icon-on {
    color: var(--color-primary);
}


/* 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: 0.0625rem solid var(--stroke);
    background: #fafbff;
    border-radius: 0.75rem;
}

    /* Inner layout */
    .teacher-extra .extra-grid {
        display: grid;
        gap: 0.75rem;
        padding: 0.125rem;
    }





.extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}



    .extra-actions .material-symbols-outlined {
        font-size: 0.9375rem;
    }



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

/* Optional: highlight open card */
.teacher-card.is-open {
    box-shadow: 0 0.375rem 1.25rem rgba(108,120,255,.12), 0 0 0 0.125rem rgba(108,120,255,.25) inset;
    border-radius: 1rem;
}


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
























/*//////////////////////////// Tabs Builder //////////////////////////*/


.tabsview {
    left: 0.9375rem;
    right: 0.9375rem;
    top: 0.0625rem;
    bottom: 0.9375rem;
    position: absolute;
    height: auto;
}



/* Tabs scaffold */
.tabs-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}

/* header top/bottom */
.tabs-pos-bottom {
    flex-direction: column;
}

    .tabs-pos-bottom .tabs-bar {
        order: 2;
    }

    .tabs-pos-bottom .tabs-panels {
        order: 1;
    }


.tabs-panels {
    overflow: hidden;
    background: var(--card);
    border: 0.0625rem solid var(--stroke);
    border-radius: 0 0 1rem 1rem;
    padding: 0.875rem;
    box-shadow: var(--shadow);
    height: 100%;
}

/* Tabs header */
.tabs-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    /*border-radius: 1rem;*/
    /*background: color-mix(in oklab, var(--color-primary) 8%, transparent);*/
    /*backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);*/
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: -0.0625rem;
}

    /* Hide scrollbar (optional) */
    .tabs-bar::-webkit-scrollbar {
        height: 0;
    }

/* Fit vs fixed sizing */
.tabs-size-fit .tabs-tab {
    flex: 1 1 0;
    min-width: 0;
}

.tabs-size-fixed .tabs-tab {
    flex: 0 0 auto;
    min-width: 5rem; /* adjust */
}

/* Tab button */
.tabs-tab {
    scroll-snap-align: start;
    appearance: none;
    border: 0;
    border-radius: 0.875rem 0.875rem 0 0;
    background: transparent;
    padding: 0.3125rem 0.3125rem;
    cursor: pointer;
    color: var(--color-text-dim);
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
    position: relative;
    user-select: none;
    height: 100%;
}


.tabs-tab-inner {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .85rem;
}

/* Active */
.tabs-tab.is-active {
    color: var(--color-text);
    background: var(--card);
    border-left: 0.0625rem solid var(--stroke);
    border-right: 0.0625rem solid var(--stroke);
    border-top: 0.0625rem solid var(--stroke);
    /*box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,.10);
    transform: translateY(-0.0625rem);*/
}

/* Focus ring (keyboard) */
.tabs-tab:focus-visible {
    outline: 0.125rem solid color-mix(in oklab, var(--color-primary) 70%, white);
    outline-offset: 0.125rem;
}

/* Panels */
.tabs-panel {
    border-radius: 1.125rem;
    height: 100%;
}

.tabs-panel-inner {
    /* keep it neutral; your card styles can live inside content */
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    /** To Hide the scroll */
    /*padding: 0.3125rem;*/
    /*padding-inline-end: 2rem !important;*/
    /*margin-inline-end: -1.875rem;*/
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

/* RTL nicety: keep scroll direction feeling natural */
[dir="rtl"] .tabs-bar {
    direction: rtl;
}







.tab-head-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.tab-head-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tab-head-title {
    font-size: 0.76rem;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.tab-head-subtitle {
    font-size: 0.55rem;
    color: var(--color-text-dim);
}





.tab-head-icon {
    width: 1.3rem;
    font-size: 1.3rem;
    flex: 0 0 auto;
    border-radius: 62.4375rem;
    color: var(--color-text-dim);
}

.tabs-tab.is-active .tab-head-icon {
    color: var(--color-primary);
}

.tabs-tab.is-active .tab-head-title {
    color: var(--color-text);
}




/*//////////////////////////// Tabs Builder //////////////////////////*/











/* //////////////////////////// ====== Call log card ====== ////////////////////////////  */

.calllog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.calllog-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 0.0625rem solid var(--border-subtle, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.calllog-header-main .card-title {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 500;
}

.calllog-header-subtitle {
    display: block;
    font-size: 0.5rem;
    color: var(--color-text-dim);
}

.calllog-refresh-btn .material-symbols-outlined {
    font-size: 1.125rem;
}

/* body + list */

.calllog-body {
    /*padding: 0.5rem 0.625rem 0.625rem 0.625rem;*/
    padding: 0.0625rem;
}

.calllog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calllog-empty {
    font-size: 0.75rem;
    color: #6b7280;
}

/* single row */

.calllog-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.25rem;
    border-radius: 0.5rem;
}

    .calllog-item + .calllog-item {
        margin-top: 0.125rem;
    }

    .calllog-item:hover {
        background: #f9fafb;
    }


/* text area */

.calllog-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.calllog-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calllog-time {
    font-size: 0.6875rem;
    color: #9ca3af;
}



/* icon */
.calllog-icon {
    flex: 0 0 auto;
    font-size: 1.125rem;
    border-radius: 62.4375rem;
}

/* colors */
.calllog-icon-outgoing {
    color: var(--color-secondary, #2563eb); /* ringing / generic outgoing */
}

.calllog-icon-incoming {
    color: var(--color-secondary, #2563eb); /* optional, used for plain 'call' incoming */
}

/* answered (any direction) => green */
.calllog-icon-answered {
    color: var(--color-success, #16a34a);
}

/* missed / rejected => red */
.calllog-icon-missed {
    color: var(--color-error, #dc2626);
}

/* cancelled / neutral */
.calllog-icon-neutral {
    color: #6b7280;
}

/* responsive */
@media (max-width: 48rem) {
    .calllog-title {
        font-size: 0.6875rem;
        font-weight: 400;
    }

    .calllog-time {
        font-size: 0.625rem;
    }



    /* icon */
    .calllog-icon {
        font-size: 0.875rem;
    }
}
/* //////////////////////////// ====== Call log card ====== ////////////////////////////  */



















/*############################# CHATING ############################################*/
.chat-page-shell {
    display: flex;
    flex-direction: column;
    /*padding: 0.125rem;*/
    height: 100%;
}

.chat-card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 10.625rem);
    /*max-height: 56.25rem;*/
    min-height: 6.25rem;
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.06);
    padding: 0.3125rem;
    box-shadow: none !important;
    border-radius: 0.3125rem !important;
}

/* Messages area */
.chat-messages-Parent {
    position: relative;
    display: flex;
    flex-direction: column;
    /*max-height: 56.25rem;*/
    min-height: 0.625rem;
    overflow: hidden;
    height: 100%;
}

.chat-messages {
    flex: 1 1 auto;
    padding: 0.35rem; /*0.75rem;*/
    overflow-y: auto;
    /*background: #f5f6fb;*/
    padding-inline-end: 2.5rem !important;
    margin-inline-end: -1.875rem;
}



/* Scroll-to-bottom arrow */
.chat-scroll-bottom {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.25);
}

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

/* typing indicator */
.chat-typing-indicator {
    padding: 0.25rem 0.875rem;
    background: #f5f5f7;
    border-top: 0.0625rem solid #e5e7eb;
    position: absolute;
    bottom: 0;
}

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

.typing-dots span {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 62.4375rem;
    background: #9ca3af;
    margin-left: 0.125rem;
    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(-0.125rem);
    }
}

/* input bar */
.chat-input-shell {
    flex: 0 0 auto;
    border-top: 0.0625rem solid #e3e6ec;
    background: #fff;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

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






/* Wrapper for input + send inside it */
.chat-input-inner {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

/* Make sure text doesn't overlap the send icon */
.chat-input-text {
    flex: 1 1 auto;
    border: 0.0625rem solid #d0d5dd;
    border-radius: 0.625rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    /*width: auto !important;*/
    padding-right: 2.5rem; /* space for send icon in LTR */


    min-height: 2.75rem;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box;
    height: 2.75rem;
}

/* RTL: move padding to the left instead */
[dir="rtl"] .chat-input-text {
    padding-right: 0.75rem;
    padding-left: 2.5rem;
}

/* Send button inside input */
.chat-input-send-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.375rem; /* default LTR */
    left: auto;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* RTL: flip side */
[dir="rtl"] .chat-input-send-btn {
    left: 0.375rem;
    right: auto;
}

/* icon sizing / colors already consistent with your existing rules */
.chat-input-send-btn .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

/* Disabled / enabled colors (reuse your existing ones if you like) */
.chat-icon-send[disabled] .material-symbols-outlined {
    color: #9ca3af;
}

.chat-icon-send:not([disabled]) .material-symbols-outlined {
    color: var(--color-secondary, #2563eb);
}






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

.chat-input-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
}

.btn-icon {
    border-radius: 62.4375rem;
    border: none;
    background: transparent;
    padding: 0.25rem 0.375rem;
    cursor: pointer;
}

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

/* messages */
.chat-message-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

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

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


.chat-icon-audio {
    background: #75ffd81f;
}

    .chat-icon-audio .material-symbols-outlined {
        color: #2563eb !important;
    }










/* avatar */
.chat-avatar-outer {
    flex: 0 0 auto;
    min-width: 0.9rem;
    min-height: 0.9rem;
}

/* bubble */
.chat-bubble-shell {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    background-color: #f6f6f69c;
    padding: 0.1875rem;
}

.chat-message-meta {
    /*display: flex;*/
    /*flex-direction: row;*/
    /*align-items: center;*/
    /*gap: 0.375rem;*/
    font-size: 0.6875rem;
    color: #6b7280;
    min-width: 11.0375rem; /*13.4375rem;*/
    position: relative;
}

.from-other .chat-message-meta {
    text-align: end;
}

.from-me .chat-message-meta {
    text-align: start;
}





.chat-react-emoji {
    display: inline-block;
    width: 0.9375rem;
    height: 0.9375rem;
    text-align: center;
    padding: 0;
    margin: 0;
    color: white;
    position: absolute;
}

.from-other .chat-react-emoji {
    /*inset-inline-start: 0.0625rem;*/
    inset-inline-start: 0;
}

.from-me .chat-react-emoji {
    /*inset-inline-end: 0.0625rem;*/
    inset-inline-end: 0;
    top: 4px;
}


.chat-react-emoji .material-symbols-outlined {
    font-size: 0.9375rem;
    color: #959595;
}


.divParentMessage_chat {
    display: none;
    min-height: 1.875rem;
    background-color: #c6cddb70;
    padding: 0.5rem;
}

.divParentMessage_close {
    margin: 0;
    background-color: #c6cddbc6;
    padding: 0;
    width: 1.875rem;
    text-align: center;
    height: 1.875rem;
    line-height: 2.6875rem;
    border-radius: 0.4375rem;
    cursor: pointer;
}





.chat-sender-name {
    font-weight: 600;
    color: #111827;
    margin-left: 0.3125rem;
    margin-right: 0.3125rem;
}

.chat-message-time {
    font-size: 0.63rem;
    color: #9ca3af;
    inset-block-end: 20px;
    display: inline-flex;
    gap: 3px;
    align-items: center;
    /*justify-content: center;*/
}

.chat-bubble {
    border-radius: 0.875rem;
    padding: 0.5rem 0.625rem;
    font-size: 1rem;
    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: 0.0625rem solid color-mix(in oklab, var(--color-secondary-light) 35%, white 0%);*/
    border-bottom-right-radius: 0.125rem;
    text-align: start;
}

/* OTHER side: left, primary tone */
.chat-bubble-other {
    /*background: color-mix(in oklab, var(--color-primary-lighter) 24%, white 0%);*/
    color: var(--color-primary);
    /*border: 0.0625rem solid color-mix(in oklab, var(--color-primary-light) 35%, white 0%);*/
    border-bottom-left-radius: 0.125rem;
    text-align: end;
}

.chat-bubble-parent {
    padding: 0.25rem 0.3125rem;
    font-size: 0.75rem;
    border: 0.125rem #adadad dashed;
    border-radius: 0.25rem;
    background-color: #ececec;
    font-style: italic;
    opacity: 0.7;
}



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

/* attachments */
.chat-attachment {
    margin-top: 0.25rem;
}

.chat-image-preview {
    max-width: 21.875rem;
    max-height: 13.75rem;
    border-radius: 0.625rem;
    display: block;
}


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

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

/* responsive */
@media (max-width: 48rem) {
    .chat-card {
        height: calc(100vh - 4.8125rem);
        padding: 0 !important;
    }

    .chat-messages {
        padding: 0;
        padding-inline-end: 0.201rem !important;
        margin-inline-end: -0.305rem;
        overflow-x: hidden;
    }

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

    .chat-image-preview {
        /*max-width: 70vw;*/
        max-width: 100%;
    }


    .chat-bubble-parent {
        font-size: 0.75rem;
    }


    .chat-bubble {
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
        line-height: 1.4;
    }
}

/* Material Icons inside chat buttons */
.chat-input-actions .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
    vertical-align: middle;
    color: #374151;
}

/* Disabled vs enabled send button */
.chat-icon-send[disabled] .material-symbols-outlined {
    color: #9ca3af;
}

.chat-icon-send:not([disabled]) .material-symbols-outlined {
    color: var(--color-secondary, #2563eb);
}

/* Tippy attach menu */
.chat-attach-menu {
    display: flex;
    flex-direction: row-reverse;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
}

.chat-attach-item {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.375rem 0.25rem;
    border-radius: 0.875rem;
    min-width: 3.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.6875rem;
    color: #374151;
    transition: background 120ms ease-out, transform 120ms ease-out;
}

    .chat-attach-item .material-symbols-outlined {
        font-size: 1.375rem;
        margin-bottom: 0.125rem;
        color: #4b5563;
    }

    .chat-attach-item:hover {
        background: rgba(37,99,235,0.08);
        transform: translateY(-0.0625rem);
    }
















/*######################## Attachments In The List #############################*/
/* ====== Video in chat ====== */
.chat-attachment-video {
    margin-top: 0.25rem;
}

.chat-video-player {
    max-width: min(16.25rem, 100%);
    max-height: 12.5rem;
    border-radius: 0.625rem;
    display: block;
    outline: none;
    background: #000;
}

/* smaller screens */
@media (max-width: 48rem) {
    .chat-video-player {
        max-width: 60vw;
        max-height: 13.75rem;
    }
}


/* ====== PDF in chat ====== */
.chat-attachment-pdf {
    margin-top: 0.25rem;
}

.chat-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    background: #f9fafb;
    border: 0.0625rem solid #e5e7eb;
    text-decoration: none;
    font-size: 0.8125rem;
    color: #111827;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .chat-pdf-link:hover {
        background: #eef2ff;
        box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.06);
    }

.chat-pdf-icon {
    font-size: 1.25rem;
    color: #ef4444; /* red-ish for PDF */
}

.chat-pdf-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11.25rem;
}


/* ====== Audio styling ====== */
.chat-attachment-audio {
    direction: ltr !important;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /*flex-flow: column;*/
}

.chat-audio-player {
    width: 11.25rem;
    max-width: 60vw;
}





/* container for button + seek + time */
.chat-attachment-audio .chat-audio-custom {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

/* play button */
.chat-audio-btn {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    margin-right: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* tweak these to match your theme */
    background-color: var(--chat-accent-bg, #4a90e2);
    color: var(--chat-accent-fg, #fff);
}

/* play icon (triangle) */
.chat-audio-icon {
    display: inline-block;
}

.chat-audio-icon-play {
    width: 0;
    height: 0;
    border-left: 0.5rem solid currentColor;
    border-top: 0.3125rem solid transparent;
    border-bottom: 0.3125rem solid transparent;
    margin-left: 0.0625rem;
}

/* pause icon ( || ) */
.chat-audio-icon-pause {
    width: 0.625rem;
    height: 0.625rem;
    box-sizing: content-box;
    border-left: 0.1875rem solid currentColor;
    border-right: 0.1875rem solid currentColor;
}

/* seek region */
.chat-audio-seek {
    flex: 1;
    width: 10rem;
    min-width: 3rem;
    max-width: 20vw;
}



.chat-audio-seek-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 0.125rem;
    background: var(--chat-accent-bg, #4a90e2);
}

/* time text: 0:00 / 0:03 */
.chat-audio-time {
    font-size: 0.6875rem;
    white-space: nowrap;
    color: #333; /* dark, visible on white bubble */
    margin-left: 0.25rem;
}

.chat-audio-time-current,
.chat-audio-time-total,
.chat-audio-time-sep {
    vertical-align: middle;
}



.chat-audio-seek-bar {
    position: relative;
    width: 100%;
    height: 0.25rem;
    border-radius: 0.125rem;
    background: #ddd;
    overflow: visible;
    cursor: pointer;
}

.chat-audio-seek-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 0.125rem;
    background: var(--chat-accent-bg, #4a90e2);
}

.chat-audio-seek-head {
    position: absolute;
    top: 50%;
    left: 0%; /* 🔹 explicit start at left */
    transform: translate(-50%, -50%);
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: #fff;
    border: 0.125rem solid var(--chat-accent-bg, #4a90e2);
}





/* Make the PDF button layout inline-flex so icon + text align nicely */
.chat-file-link.chat-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem; /* space between icon and text */
    padding: 0.25rem 0.625rem;
    overflow: hidden;
    max-width: 100%;
}

/* Generic file icon container */
.chat-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Specific PDF icon look */
.chat-file-icon-pdf {
    width: 1.25rem;
    height: 1.5rem;
    border-radius: 0.1875rem;
    background: #e53935; /* PDF red, tweak if needed */
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    position: relative;
}

    /* Small "PDF" text inside the icon */
    .chat-file-icon-pdf::after {
        content: "PDF";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Optional: label styling */
.chat-file-label {
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12.5rem; /* match your chat width */
}

















.chat-attachment-video {
    position: relative;
}

.chat-video-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    border-radius: 0.75rem;
    pointer-events: none;
}

.chat-video-loader-icon {
    font-size: 2.625rem;
    color: #fff;
}


.chat-attachment-video {
    position: relative;
}

.chat-video-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.65); /* stronger, hides native error image */
    border-radius: 0.75rem;
    pointer-events: none;
    z-index: 2;
}

.chat-video-player {
    position: relative;
    z-index: 1;
}





























.chat-audio-duration {
    font-size: 0.75rem;
    color: #6b7280;
    min-width: 2.625rem;
    text-align: center;
}



.chat-attachment-video {
    position: relative;
    margin-top: 0.25rem;
}

.chat-video-fullscreen-btn {
    position: absolute;
    bottom: 0.375rem;
    left: 0.375rem;
    border: none;
    border-radius: 62.4375rem;
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    background: rgba(0,0,0,.5);
    color: #fff;
    cursor: pointer;
}








/* Full-screen image lightbox */
.chat-image-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: auto;
}

    .chat-image-lightbox.show {
        display: flex;
    }

.chat-image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

#chatImageLightboxImg {
    position: relative;
    max-width: 96vw;
    max-height: 96vh;
    border-radius: 0.625rem;
    box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* close button */
.chat-image-lightbox-close {
    position: absolute;
    top: 0.625rem;
    inset-inline-end: 0.625rem; /* works RTL/LTR */
    width: 2rem;
    height: 2rem;
    border-radius: 62.4375rem;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

    .chat-image-lightbox-close:hover {
        background: rgba(0, 0, 0, 0.8);
    }





.chat-attachment-video {
    margin-top: 0.25rem;
}

.chat-video-player {
    max-width: min(16.25rem, 100%);
    max-height: 16.25rem;
    border-radius: 0.625rem;
    overflow: hidden;
    display: block;
}

/* friendly fallback block */
.chat-video-fallback {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    background: #111827;
    color: #f9fafb;
    font-size: 0.8125rem;
}

.chat-video-download {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    color: inherit;
}

    .chat-video-download:hover {
        text-decoration: underline;
    }

.chat-video-fallback-icon {
    font-size: 1.25rem;
}




/*######################## Attachments In The List #############################*/









/* ================= STT overlay ================ */
.stt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.stt-dialog {
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.75rem 0.875rem;
    width: min(26.25rem, 92vw);
    max-height: 80vh;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 9.375rem;
}

.stt-header {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.stt-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.stt-text {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    border-radius: 0.5rem;
    border: 0.0625rem solid #d1d5db;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

.stt-status {
    font-size: 0.75rem;
    color: #6b7280;
}

.stt-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.stt-btn {
    border-radius: 62.4375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    border: 0.0625rem solid transparent;
    cursor: pointer;
}

.stt-btn-cancel {
    background: #f3f4f6;
    color: #374151;
}

.stt-btn-confirm {
    background: var(--color-secondary, #2563eb);
    color: #fff;
}

/* ================= STT overlay ================ */




/*############################# 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: 0.875rem;
    --btn-pad-y: 0.50rem;
    --btn-pad-x: 0.30rem;
    --btn-shadow: 0 0.5rem 1.25rem 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: 0.1875rem;
    margin-bottom: 0.125rem;
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 0.0625rem 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.18rem);
    line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .3s ease;
    overflow: hidden;
    max-height: 2.8125rem;
}


    /* 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(-0.0625rem);
        box-shadow: 0 0.75rem 1.625rem rgba(108,120,255,.32);
        transform: translateY(-0.0625rem);
    }

    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 0.125rem #fff inset, 0 0 0 0.1875rem 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) - 0.125rem);
}

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

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

.divActivatorButtons {
    display: flex;
    gap: 0.125rem;
    width: 100%;
    flex-direction: row;
}

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

.cbtn-start-radious {
    border-start-start-radius: 1.5625rem;
    border-end-start-radius: 1.5625rem;
}

.cbtn-end-radious {
    border-start-end-radius: 1.5625rem;
    border-end-end-radius: 1.5625rem;
}



/* 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 0.375rem 0.875rem 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 0.5rem 1.125rem rgba(255,138,60,.35);
}

.cbtn--lighter {
    --btn-bg: var(--color-primary-lighter);
    --btn-border: var(--color-primary);
    --btn-shadow: 0 0.1875rem 0.5rem 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 0.5rem 1.125rem rgba(255,138,60,.35);
}

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

.cbtn--secondary--lighter {
    --btn-bg: var(--color-secondary-lighter);
    --btn-border: rgba(255,138,60,.35);
    --btn-shadow: 0 0.1875rem 0.5rem 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 0.375rem 0.875rem rgba(34,41,84,.06);
}



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



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






/* Optional icon slots */
.cbtn__icon {
    width: 0.9em;
    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: 5rem;
}

/* 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: 7.5rem;
    height: 7.5rem;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 50%;
    /* gradient ring using background + padding (keeps your padding idea) */
    padding: 0.375rem;
    border: 0.125rem 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 0.5rem 1.25rem 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 160ms cubic-bezier(.2,.8,.2,1) forwards; /*360ms*/
}

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

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

.view.exit-down {
    animation: exit-down 260ms cubic-bezier(.2,.8,.2,1) forwards; /*360ms*/
    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:40rem) {
    .subjects {
        grid-auto-columns: calc((100% - (var(--gap) * 5)) / 6);
    }
}


@media (min-width: 48rem) {
    .teacher-extra .extra-grid {
        grid-template-columns: 1fr 1.5fr;
    }
}



@media (max-width: 48rem) {

    .subjects {
        --gap: 0.125rem;
    }
}



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




@media (min-width: 64rem) {
    body {
        /* nice backdrop around the centered app */
        background: radial-gradient(75rem 37.5rem 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: 1.375rem;
        box-shadow: 0 1.5rem 3.75rem rgba(34,41,84,.18), 0 0 0 0.0625rem 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: 48rem) {
    .hide-on-pc {
        display: none !important;
    }

    .cbtn {
        --btn-pad-y: 0.35rem;
        --btn-pad-x: 0.95rem;
        font-size: calc(var(--fs-base) - 0.10rem);
        padding: var(--btn-pad-y) var(--btn-pad-x);
    }


    .panel-bg {
        transition: none;
    }

    .header {
        display: flex;
    }

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


@media (max-width: 48rem) {

    .profileImage {
        width: 5.9375rem;
        height: 5.9375rem;
        padding: 0.375rem;
    }


    .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: 0.125rem;
        border-radius: 0;
        background: none;
    }


    .hero {
        padding-bottom: 0.3125rem;
        /*padding-top: 0.625rem;*/
    }
}
































/* ================================
   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: 0.0625rem 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 0.0625rem 0 rgba(0,0,0,.03) inset;
    }

    input[type="search"] {
        border-radius: 62.4375rem;
    }

textarea {
    min-height: 6rem;
    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 0.25rem 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: 0.375rem 0 0.375rem;
}

.form-hint, .hint {
    display: block;
    margin-top: 0.375rem;
    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: 0.875rem;
}

: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: 1.375rem;
    block-size: 1.375rem;
    vertical-align: middle;
    margin: 0;
    border: 0.0625rem 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: 0.375rem;
}

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

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

input[type="radio"]::after {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.625rem;
    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: 4.5rem;
    --h: 1.9375rem;
    --knob: 1.6875rem;
    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: 0.0625rem solid var(--ios-hair);
        border-radius: 62.4375rem;
        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 0.09375rem 0.1875rem rgba(0,0,0,.12), 0 0 0 0.0625rem rgba(0,0,0,.05);
        transition: transform .18s ease;
    }

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

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

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

    .switch:dir(rtl) input:checked ~ .thumb {
        transform: translate(-0.125rem, -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: 0.25rem;
    padding: 0.1875rem;
    background: #e9e9ee;
    border: 0.0625rem solid var(--ios-hair);
    border-radius: 0.75rem;
}

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

        .segmented button[aria-pressed="true"] {
            background: #fff;
            border: 0.0625rem solid var(--ios-hair);
            box-shadow: 0 0.0625rem 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: 1rem 1rem;
    background-position: left .75rem center; /* LTR default */
    padding-inline-start: calc(1.2rem + 1rem);
}

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



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

    /* The input itself */
    .fa-input > input {
        width: 100%;
        height: var(--height);
        padding: 0.5625rem 0.75rem;
        padding-inline-start: calc(var(--icon-gap));
        border: 0.0625rem 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 0.25rem 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: 0.4375rem;
    }

    /* 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: 1.875rem;
    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: 1.875rem;
    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: 0.03125rem;
    }
}










































.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,26.25rem);
    padding: 0; /* iOS blocks handle their own spacing */
    border-radius: 1.25rem;
    background: var(--ios-panel);
    box-shadow: 0 0.5rem 1.875rem 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: 1.125rem 1.125rem 0.375rem;
    padding: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.swal2-html-container.ios-html {
    margin: 0 1.125rem 0.875rem;
    padding: 0;
    font-size: 0.84375rem;
    line-height: 1.55;
    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: 0.0625rem solid var(--ios-hairline);
    overflow: hidden;
    margin-top: 0.3125rem !important;
}

    /* 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: 1.5rem 0.75rem;
        font-weight: 600;
        line-height: 1.1;
    }







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


    .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: 0.0625rem;
            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: 1.5rem 0.75rem;
        font-weight: 600;
        cursor: pointer;
        opacity: 0;
        transform: translateY(0.375rem) 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(0.625rem) 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: 8.125rem !important;
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 1.125rem 1.375rem;
    border-radius: 0.625rem;
    background: #1a73e8;
    color: #fff;
    font: 600 0.875rem/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: 5rem !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(0.0625rem);
    }

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

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




.pop-actions-split {
    display: flex !important;
    flex-direction: row !important;
}

    .pop-actions-split .ios-btn {
        width: 50% !important;
    }

        .pop-actions-split .ios-btn:first-child {
            border-left: 0.0625rem var(--ios-hairline) solid !important;
        }




/* 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: 0.0625rem solid var(--ios-hairline);
}

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

/* 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(0.875rem);
        -webkit-backdrop-filter: saturate(1.1) blur(0.875rem);
    }
}

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

/* 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: 0.9375rem;
    left: 0.9375rem;
}

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





.cbtn--force--confirm {
    color: var(--color-primary) !important;
    font-size: 0.75rem;
}

.cbtn--force--cancel {
    color: var(--color-error) !important;
    font-size: 0.6875rem;
}























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












/* Invalid field highlight */
.field-invalid {
    /*outline: 0.125rem solid color-mix(in oklab, #e11d48 70%, transparent);*/
    outline-offset: 0.125rem;
    border: 0.0625rem solid #e11d48 !important;
    border-radius: var(--ios-radius) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in oklab, #e11d48 18%, transparent) !important;
}

/* Small iOS-ish nudge */
@keyframes fieldShake {
    0%,100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-0.25rem);
    }

    40% {
        transform: translateX(0.25rem);
    }

    60% {
        transform: translateX(-0.1875rem);
    }

    80% {
        transform: translateX(0.1875rem);
    }
}

.field-shake {
    animation: fieldShake 280ms ease;
}



/* Bubble background + text */
.tippy-box[data-theme~='error'],
.tippy-tooltip[data-theme~='error'] {
    background-color: #f44336;
    color: #fff;
    font-size: 0.85rem;
    border-radius: 0.25rem;
}

    /* CSS arrow (modern + old) */
    .tippy-box[data-theme~='error'][data-placement^='bottom'] > .tippy-arrow::before,
    .tippy-tooltip[data-theme~='error'][x-placement^='bottom'] .tippy-arrow {
        border-top-color: #f44336 !important;
        color: #f44336 !important;
    }

    /* In case your build uses SVG arrows */
    .tippy-box[data-theme~='error'] .tippy-svg-arrow path,
    .tippy-tooltip[data-theme~='error'] .tippy-svg-arrow path {
        fill: #f44336 !important;
    }




















/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ OTP $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/* 6-digit code UI */
/* Custom styles for the mobile number input */
.phone-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.625rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.phoneText {
    width: 18.75rem;
    height: 2.5rem;
    padding: 0.625rem;
    font-size: 1rem;
    border: 0.0625rem solid #ddd;
    border-radius: 0.25rem;
}

.error-msg, .valid-msg {
    color: red;
    display: none;
}

.valid-msg {
    color: green;
}

.iti--allow-dropdown input {
    padding-left: 3.125rem; /* Adjust this depending on the flag size */
}


.divSendCode {
    line-height: 1.875rem;
}

    .divSendCode::before {
        content: "\f232";
        font-family: "FontAwesome";
        font-size: 1.5625rem;
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
        color: #b6ff00;
    }



::placeholder {
    color: #cacaca !important;
}


.iti__country-list {
    position: absolute;
    left: 0;
}



.iti__country {
    direction: ltr;
    color: #000 !important;
}

.iti--allow-dropdown {
    width: 100%;
    margin-bottom: 0.5rem;
}




.otp6 {
    display: flex;
    gap: 0.3125rem;
    justify-content: center;
    align-items: center;
}

    .otp6 input {
        width: 2.5rem;
        height: 3.125rem;
        text-align: center;
        font-size: 1.375rem;
        font-weight: 600;
        letter-spacing: 0.0625rem;
        border: 0.0625rem solid #ddd;
        border-radius: 0.625rem;
        outline: 0;
        transition: border-color .15s, box-shadow .15s;
        background: #fff;
        color: #111;
        padding: 0.3125rem;
    }

        .otp6 input:focus {
            border-color: var(--ios-blue, #0a84ff);
            box-shadow: 0 0 0 0.25rem 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: 0.625rem;
    margin: 0.0625rem;
}

.divLangEnglish {
    display: none;
}

.divLangArabic {
    display: block;
}














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

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

.videoGrid {
    position: absolute;
    top: 0.0625rem;
    bottom: 0.0625rem;
    left: 0.0625rem;
    right: 0.0625rem;
    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% - 0.125rem);
    max-height: calc(100% - 0.125rem);
    max-width: 100%;
    top: 0;
    left: 0;
    background-color: #000000;
}

.video_local_viewer {
    width: 30vw; /* Make the child element fill the grid cell width */
    max-width: 14.375rem;
    aspect-ratio: 1 / 1;
    z-index: 10;
    box-shadow: 0 0.5rem 1.875rem rgba(0,0,0,.35);
    inset-inline-start: 0.0625rem; /* 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: 0.9375rem !important;
    transform: unset !important;
}


.divDreamNum {
    display: inline-block;
    position: absolute;
    inset-inline-start: 0.75rem;
    color: #fff;
    direction: rtl !important;
    height: 1.25rem;
    top: 0;
    line-height: 1.6875rem;
    font-size: 0.8125rem;
    text-align: start;
    z-index: 5;
}




.divChat_Outer {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1875rem;
    top: 40%;
    background-color: #ffffff97;
    color: #111111;
    padding: 0.625rem;
    overflow: hidden;
    /*margin-bottom: 2.1875rem;*/
    z-index: 50 !important;
    inset-inline-end: 5.3125rem;
    inset-inline-start: 0.0625rem;
    /* 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: 1.5rem;
    padding-right: 1.5rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.0625rem; /* Increase/Decrease this value for cross-browser compatibility */
    right: -1.0625rem; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
    direction: rtl !important;
    text-align: right !important;
    opacity: 0.9;
    margin-bottom: 4.9375rem;
}




.chat-input {
    display: flex;
    flex: 0 0 auto;
    height: 2.5rem;
    background: #40434e;
    border-top: 0.0625rem solid #2671ff;
    box-shadow: 0 0 0.25rem rgba(0,0,0,.14),0 0.25rem 0.5rem rgba(0,0,0,.28);
    position: absolute;
    bottom: 1.375rem;
    inset-inline-start: 5.3125rem;
    inset-inline-end: 5.3125rem;
    border-radius: 3.125rem;
    z-index: 51;
}

.txtSendChat {
    height: 2.4375rem !important;
    line-height: 2.5rem !important;
    outline: 0 none !important;
    border: none !important;
    width: calc(100% - 3.75rem) !important;
    color: #ffffff !important;
    text-indent: 0.625rem !important;
    font-size: 12pt !important;
    padding: 0 !important;
    padding-left: 0.3125rem !important;
    padding-right: 0.3125rem !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: 3.125rem;
    height: 2.5rem;
}

    .divSendChat .divSendChatIcon {
        display: inline-block;
        overflow: hidden;
        font-size: 1.5625rem;
        padding-top: 0.3125rem;
        padding-left: 0.3125rem;
    }





.imgSenderAvatar {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
}

.txtSenderame {
    display: inline-block;
}

.txtMessage {
    display: inline-block;
    padding-right: 0.3125rem;
}

.divMessageInfo {
    display: inline-block;
    padding-right: 0.3125rem;
}


@media (min-width: 48rem) {
    .video_remote_viewer {
        min-height: calc(100% - 0.0625rem);
        max-height: calc(100% - 0.0625rem);
    }

    .video_local_viewer {
        bottom: 0.1875rem;
    }
}


@media (max-width: 48rem) {



    .divMeetingOuter {
        /*max-width: 47.9375rem;*/
        /*height: calc(100vh - 58x);
        max-height: calc(100vh - 3.625rem);*/

        height: 100vh;
    }

    .divChat_Outer {
        bottom: 0.1875rem;
        inset-inline-end: 3.75rem;
    }

    .divChat_Inner {
        margin-bottom: 3.125rem;
    }

    .chat-input {
        bottom: 0.625rem;
        inset-inline-start: 3.75rem;
        inset-inline-end: 3.75rem;
    }

    .video_local_viewer {
        bottom: 0.1875rem;
        inset-inline-end: 3.4375rem;
    }
}




































/* Vertical tools rail */
.tools-rail {
    position: absolute;
    inset-block: 0.75rem 1.5625rem; /* top & bottom, fits height */
    inset-inline-end: 0.0625rem; /* right in LTR and RTL */
    width: 4.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem;
    /* fancy translucent background */
    background: rgba(18, 22, 40, .38);
    backdrop-filter: blur(0.375rem);
    -webkit-backdrop-filter: blur(0.375rem);
    border: 0.0625rem solid rgba(255,255,255,.15);
    border-radius: 62.4375rem; /* rounded ends */
    box-shadow: 0 1.125rem 2.5rem rgba(34,41,84,.20);
    z-index: 50;
}

    /* Make every tool fill space equally */
    .tools-rail .tool {
        flex: 1 1 0;
        min-height: 3.5rem; /* keeps tap size reasonable if lots of tools */
        display: grid;
        place-items: center;
        border-radius: 0.875rem;
        border: 0.0625rem 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(-0.0625rem);
            background: rgba(255,255,255,.10);
            box-shadow: 0 0.5rem 1.125rem rgba(34,41,84,.18);
        }

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

    /* icon sizing (Material Icons) */
    .tools-rail .material-symbols-outlined {
        font-size: 1.625rem;
        line-height: 1;
    }

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

.tool-HangOut {
    background: rgba(255, 203, 203, 0.18) !important;
}


/* “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 0.5rem 1.125rem 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;
}


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



.meeting_media_students {
    display: none !important;
}


.meeting_btnMediaCloser {
    z-index: 999;
    position: absolute;
    top: 0.625rem;
    left: 50%;
    display: none;
}




/* If you need it to move to the LEFT side later, just flip this: */
/* .tools-rail { inset-inline-start: 0.75rem; inset-inline-end: auto; } */
@media (max-width: 48rem) {
    .tools-rail {
        inset-block: 0.375rem 0.375rem; /* top & bottom, fits height */
        inset-inline-end: 0; /* right in LTR and RTL */
        width: 3.125rem;
        gap: 0.3125rem;
        padding: 0.3125rem;
    }

        .tools-rail .material-symbols-outlined {
            font-size: 1.375rem;
            line-height: 1;
        }
}














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

.videoGrid audio {
    display: none;
    width: 0.0625rem;
    height: 0.0625rem;
}



























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


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








.divVideoShareHolder {
    display: none;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 555;
    background-color: var(--color-bg);
    width: 100%;
    /*inset-inline-end: 2.5rem;
    width: calc(100% - 4.375rem);*/
}


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




.divPDFShareHolder {
    display: none;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: var(--color-bg);
    /*inset-inline-end: 2.5rem;*/
    width: 100%;
    z-index: 555;
    left: 0;
}


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





@media (max-width: 48rem) {
    .divMeetingWhitboardHolder {
        /*inset-inline-end: 1.875rem;
        width: calc(100% - 3.4375rem);*/
    }

    .divVideoShareHolder {
        /*inset-inline-end: 1.875rem;
        width: calc(100% - 3.4375rem);*/
    }


    .divPDFShareHolder {
        /*inset-inline-end: 1.875rem;
        width: calc(100% - 3.4375rem);*/
    }

    .header-wrap {
        padding: 0;
        height: 0.9375rem;
        display: none;
    }


        .header-wrap .header {
            display: none;
        }
}

























/* ===== Tabbar Auto-hide that frees layout space ===== */

/* default footer participates in layout normally */
.footer {
    display: flex;
    padding: 0.125rem;
    border-radius: 0;
    background: none;
}

/* when autohide is enabled, footer becomes overlay (no reserved height) */
.app-tabbar-overlay .footer {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 900;
    pointer-events: none; /* important: only tabbar items handle events */
    padding: 0;
}

/* keep the tabbar itself interactive */
.app-tabbar-overlay .mobile-tabbar {
    pointer-events: auto;
}

/* OPTIONAL: if you want content not covered while bar is visible */
.app-tabbar-overlay.app-tabbar-visible .content {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); /* adjust to your bar height */
}

/* When hidden, remove the padding so content uses full space */
.app-tabbar-overlay:not(.app-tabbar-visible) .content {
    padding-bottom: 0 !important;
}

/* your existing animation */
.mobile-tabbar {
    transition: transform 260ms ease, opacity 220ms ease;
    will-change: transform;
}

    /* hidden state */
    .mobile-tabbar.is-autohide-hidden {
        transform: translateY(calc(100% - var(--tabbar-fab-peek, 0.0625rem)));
    }

        /* only center visible */
        .mobile-tabbar.is-autohide-hidden .tabbar-item:not(.special-center) {
            opacity: 0;
            pointer-events: none;
        }

        /* center becomes floating FAB */
        .mobile-tabbar.is-autohide-hidden .tabbar-item.special-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
            width: var(--tabbar-fab-size, 3.875rem);
            height: var(--tabbar-fab-size, 3.875rem);
            border-radius: 62.4375rem;
            background: linear-gradient(180deg, var(--color-primary-lighter), var(--color-primary));
            box-shadow: 0 1.125rem 2.5rem rgba(0,0,0,.22);
            display: grid;
            place-items: center;
            padding: 0;
            z-index: 2;
        }

            .mobile-tabbar.is-autohide-hidden .tabbar-item.special-center .label {
                display: none;
            }

            /* subtle pulse */
            .mobile-tabbar.is-autohide-hidden .tabbar-item.special-center::after {
                content: "";
                position: absolute;
                inset: -0.625rem;
                border-radius: inherit;
                background: color-mix(in srgb, var(--color-primary) 18%, transparent);
                opacity: 0;
                animation: tabbarFabPulse 1.6s ease-in-out infinite;
                pointer-events: none;
            }

@keyframes tabbarFabPulse {
    0% {
        transform: scale(.92);
        opacity: 0;
    }

    40% {
        transform: scale(1);
        opacity: .55;
    }

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

























.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: 0.0625rem;
    display: grid;
    gap: 1rem;
    background: transparent;
}

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

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


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

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

.hero-main {
    display: grid;
    gap: 0.625rem;
}

.name-line {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.tutor-name {
    margin: 0;
    font-size: clamp(1.125rem, 1.6vw + 0.75rem, 1.75rem);
    color: var(--color-text);
}

.rating-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}


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

.hero-meta {
    display: flex;
    gap: 0.625rem;
    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: 0.375rem;
    border-radius: 62.4375rem;
    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: 0.625rem;
    flex-wrap: wrap;
}

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

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

.card {
    background: var(--card);
    border: 0.0625rem solid var(--stroke);
    border-radius: 1rem;
    padding: 0.875rem;
    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: 0.5rem;
}

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

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

/* Progress meter */


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

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

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



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

    .introvideo video {
        width: 100%;
        height: 17.5rem; /* 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: 0.4375rem;
    inset-inline-end: 0.4375rem;
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.375rem;
    border-radius: 62.4375rem;
    background: color-mix(in oklab, var(--color-surface,#171a2b) 32%, transparent);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    border: 0.0625rem solid rgba(255,255,255,.16);
    box-shadow: 0 0.625rem 1.5rem rgba(0,0,0,.35);
    width: calc(100% - 0.9375rem);
}

.ctrl-btn {
    /*width: 2.625rem;*/
    height: 2.625rem;
    border-radius: 62.4375rem;
    display: grid;
    place-items: center;
    color: #fff;
    background: color-mix(in oklab, #ffffff 8%, transparent);
    border: 0.0625rem 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(-0.0625rem);
        background: color-mix(in oklab, #ffffff 14%, transparent);
    }

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

    .ctrl-btn .ico {
        width: 1.375rem;
        height: 1.375rem;
        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 0.5rem 1.25rem 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-symbols-outlined {
    font-size: 1.375rem;
    line-height: 1;
    color: currentColor;
}







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

    .avatar-wrap {
    }

    .ctrl-btn {
        /*width: 2.625rem;*/
        height: 1.875rem;
    }
}

/* 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: 1rem;
}

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

/* Day header */
.day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    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: 0.625rem 0.875rem;
    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: 2.5rem;
}

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

.day-footer-note {
    inset-inline-start: 0.9375rem;
    position: absolute;
    color: var(--color-error);
    display: flex;
    gap: 0.5rem;
}

    .day-footer-note .material-symbols-outlined {
        font-size: 1.1875rem;
        color: #ff8f00;
        display: inline-block;
        background-color: #363636;
        width: 1.4375rem;
        height: 1.4375rem;
        text-align: center;
        padding: 0.125rem;
        border-radius: 50%;
    }

.day-footer-note-text {
    opacity: 0.5;
}



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

/* Slot card (base) */
.slot {
    display: grid;
    align-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5625rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid var(--stroke);
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 0.375rem 0.75rem rgba(34,41,84,.06);
    user-select: none;
    cursor: default;
    min-height: 3.875rem;
    text-align: center;
}

/* Inner bits */
.slot-time {
    font-size: calc(var(--fs-base) - 0.0625rem);
    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(-0.0625rem);
        box-shadow: 0 0.625rem 1.25rem 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: 0.375rem; /* clear space between stripes */
    --thickness: 0.0625rem; /* 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: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-dim);
    position: relative;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

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


.legend-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 62.4375rem;
    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: 2rem;
    height: 2rem;
}

.teacher-name-booktime {
    font-weight: 700;
    font-size: calc(var(--fs-base) - 0.125rem);
}

.teacher-meta-booktime {
    font-weight: 650;
    font-size: calc(var(--fs-base) - 0.1875rem);
}

.avatar_online_status-booktime {
    width: 0.625rem;
    height: 0.625rem;
    inset-inline-end: 0;
    border: 0.0625rem solid #ffffff;
}

.teacher-body-booktime {
    gap: 0.125rem;
}


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




@media (max-width: 48rem) {
    .day-head {
        padding: 0.0625rem 0.875rem;
        font-weight: 600;
        font-size: calc(var(--fs-base) - 0.1875rem);
    }

    .day-footer {
        padding: 0.3125rem 0.875rem;
        font-weight: 600;
        font-size: calc(var(--fs-base) - 0.1875rem);
        min-height: 1.875rem;
    }

    .slot {
        padding: 0.3125rem 0.375rem;
        min-height: 2.8125rem;
        gap: 0.1875rem;
    }

    .slot-time {
        font-size: calc(var(--fs-base) - 0.1875rem);
        font-weight: 650;
    }

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

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

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



    .img-teacher-avatar-booktime {
        width: 1.5rem;
        height: 1.5rem;
    }

    .teacher-name-booktime {
        font-weight: 600;
        font-size: calc(var(--fs-base) - 0.1875rem);
    }

    .teacher-meta-booktime {
        font-weight: 500;
        font-size: calc(var(--fs-base) - 0.3125rem);
        color: var(--color-primary-light);
    }


    .avatar_online_status-booktime {
        width: 0.625rem;
        height: 0.625rem;
        inset-inline-end: 0;
        border: 0.0625rem solid #ffffff;
    }

    .teacher-head-booktime {
        margin-top: 0.1875rem;
        margin-bottom: 0.1875rem;
    }


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










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

.lesson-head-main {
    display: grid;
    gap: 0.25rem;
}

.lesson-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block-end: 0.9375rem;
}

.lesson-title {
    display: inline-flex;
    gap: 0.3125rem;
    font-weight: 800;
    color: var(--color-text);
    font-size: 0.95rem;
}

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

.lesson-number {
    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: 0.375rem;
    font-size: 0.78rem;
}

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

.lesson-time-chip,
.lesson-teacher-chip,
.lesson-duration-chip {
    padding: 0.1875rem 0.4375rem;
    border-radius: 62.4375rem;
    background: rgba(0,0,0,0.03);
    color: var(--color-text-dim);
}

.chip-icons {
    font-size: 1rem;
}


.cbtn .chip-icons, .cbtn .material-symbols-outlined {
    font-size: 1.125rem;
}



.chip-filter .chip-icons {
    font-size: 1.25rem;
}


.chip-direct {
    color: var(--color-secondary-light);
}

.chip-by-booking {
    color: var(--color-primary-light);
}

.chip .material-symbols-outlined, .chip-filter .material-symbols-outlined {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
    line-height: 0;
}

@media (max-width: 45rem) {
    .lesson-title-row {
        gap: 0.5rem;
        padding-block-end: 0.1875rem;
    }



    .cbtn .chip-icons, .cbtn .material-symbols-outlined {
        font-size: 1rem;
        width: 1.1em;
        /*font-weight: 600;*/
    }


    .lesson-time-chip,
    .lesson-teacher-chip,
    .lesson-duration-chip {
        padding: 0.125rem 0.25rem;
        font-size: 0.6875rem;
    }


    .lesson-title {
        font-weight: 600;
        font-size: 0.85rem;
    }


    .extra-actions {
        gap: 0.1875rem;
    }


        .extra-actions .cbtn {
            gap: 0;
            --btn-pad-y: 0.35rem;
            --btn-pad-x: 0.20rem;
        }
}



.lesson-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 62.4375rem;
    font-size: 0.65rem;
    font-weight: 500;
}

.div_lessonStatus_Ratting {
    margin-inline-end: -2.25rem;
    display: inline-flex;
}


.lesson-status-dot {
    /*width: 0.5rem;*/
    height: 0.8125rem;
    /*border-radius: 62.4375rem;*/
    display: inline-block;
}

    .lesson-status-dot .material-symbols-outlined {
        font-size: 0.9375rem;
    }



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

    .lesson-status--completed .lesson-status-dot .material-symbols-outlined {
        color: #5bcc2e;
    }




.lesson-status--passed {
    background: color-mix(in oklab, var(--color-text-alert) 5%, var(--color-error) 15%);
    color: var(--color-error);
}

    .lesson-status--passed .lesson-status-dot .material-symbols-outlined {
        color: var(--color-error);
    }

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

    .lesson-status--pending .lesson-status-dot .material-symbols-outlined {
        color: #f1c40f;
    }

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

    .lesson-status--on-time .lesson-status-dot .material-symbols-outlined {
        color: #3498db;
    }

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

    .lesson-status--unknown .lesson-status-dot .material-symbols-outlined {
        color: rgba(0,0,0,0.25);
    }

/* content layout inside accordion */
.lesson-extra-grid {
    display: grid;
    gap: 0.625rem;
    padding-top: 0.375rem;
}

@media (min-width: 40rem) {
    .lesson-extra-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1.5fr);
    }
}

.lesson-extra-col .extra-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}




/* Small subject icon on lesson avatar */
.lesson-subject-pill {
    position: absolute;
    inset-inline-start: -0.25rem;
    inset-block-end: -0.25rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 62.4375rem;
    border: 0.125rem solid #fff;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.625rem 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: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

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




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




















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

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

    .plan-card:hover {
        transform: translateY(-0.0625rem);
        box-shadow: 0 0.625rem 1.25rem rgba(34,41,84,.12);
    }

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

.plan-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    overflow: hidden;
    flex: 0 0 auto;
    background: #f6f7fb;
    border: 0.0625rem 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(0.75rem, 1vw + 0.3125rem, 0.9375rem);
    color: var(--color-text);
}

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

/* Badges */
.plan-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 62.4375rem;
    background: color-mix(in oklab, var(--color-primary-lighter) 10%, white 90%);
    border: 0.0625rem 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: 0.625rem;
    padding: 0.625rem;
    border-radius: 0.75rem;
    border: 0.0625rem dashed var(--stroke);
    background: color-mix(in oklab, var(--color-primary-lighter) 8%, white 92%);
}

.price-main {
    font-weight: 900;
    font-size: clamp(1rem, 1.2vw + 0.625rem, 1.25rem);
}

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

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

    .plan-actions .cbtn {
        flex: 1 1 auto;
        min-width: 8.75rem;
    }

/* Subtle divider */
.plan-divider {
    height: 0.0625rem;
    background: var(--stroke);
    margin: 0.25rem 0;
}

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




















/*/////////////////////////////////// Bookings Page ////////////////////////////////*/
/* Shell similar to slots-shell */
.bookings-filter {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-left: var(--shell-margin);
    padding-right: var(--shell-margin);
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    flex-wrap: wrap;
    gap: 0.0625rem;
    align-items: flex-start;
}





.bookings-shell {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--shell-margin);
    display: grid;
    gap: 0.875rem;
}

/* Booking card reusing teacher-card look */
.booking-card {
    background: var(--card);
    border-radius: 1rem;
    border: 0.0625rem solid var(--stroke);
    box-shadow: var(--shadow);
    padding: 0.75rem 0.875rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem 0.375rem; /*0.625rem 0.875rem;*/
    /*align-items: stretch;*/
    align-items: stretch;
}

/* Left: subject icon */
.booking-icon-outer {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: 1rem;
    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: 0.0625rem;
    padding-inline-start: 0.3125rem;
}

.booking-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: baseline;
}

    .booking-title .badge-plan {
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.0625rem 0.375rem;
        border-radius: 62.4375rem;
        background: color-mix(in oklab, var(--color-secondary-light) 30%, white 40%);
        color: var(--color-text-dim);
    }


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

.booking-meta-name {
}



.booking-meta-footer {
    grid-column: 1 / -1;
    text-align: end;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.booking-meta-date {
    display: inline-flex;
    font-size: 0.6rem;
    margin-top: 0.375rem;
    text-align: end;
    /*font-weight: lighter;*/
    align-items: center;
    color: var(--color-text-dim);
    font-size: 0.6875rem;
    font-family: tahoma;
}

    .booking-meta-date .chip-icons {
        margin-left: 0.125rem;
        margin-right: 0.125rem;
        color: var(--color-primary);
    }



.booking-sub {
    display: inline-flex;
    font-size: 0.6rem;
    margin-top: 0.375rem;
    text-align: start;
    /*font-weight: lighter;*/
    align-items: center;
    color: var(--color-text-dim);
    font-size: 0.6875rem;
    font-family: Arial;
}

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


.booking-sub-remaining {
    /*font-size: 0.6rem;*/
    color: var(--color-primary);
}

.booking-sub-no-remaining {
    /*font-size: 0.6rem;*/
    color: var(--color-error);
}


/* 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: 0.375rem;*/
}

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

.booking-meter-bar {
    position: relative;
    inline-size: 100%;
    block-size: 0.375rem;
    border-radius: 62.4375rem;
    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: 0.25rem;
    font-size: 0.6875rem; /*0.72rem;*/
    padding: 0.125rem 0.4375rem;
    border-radius: 62.4375rem;
    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: 0.4375rem;
    block-size: 0.4375rem;
    border-radius: 62.4375rem;
    background: var(--color-primary);
}

/* Empty state */
.bookings-empty {
    padding: 1.125rem 0.875rem;
    border-radius: 1rem;
    border: 0.0625rem 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-status-pill--expired {
    background: color-mix(in oklab, var(--color-text-alert) 5%, var(--color-error) 15%);
    color: var(--color-error);
}

    .booking-status-pill--expired .booking-status-dot {
        background: var(--color-error);
    }







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

.booking-avatar-outer {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
}

.booking-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.16);
    background: #fff;
    border: 0.0625rem solid color-mix(in srgb, var(--color-text-dim) 35%, transparent);
}

    .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: -0.125rem;
    inset-block-end: -0.125rem;*/
    width: 0.75rem;
    height: 0.75rem;
}

/* small subject icon pill on avatar */
.booking-subject-pill {
    position: absolute;
    inset-inline-start: -0.375rem;
    inset-block-end: -0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 62.4375rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,.18);
    background: #fff;
    border: 0.125rem solid color-mix(in srgb, var(--color-text-dim) 45%, transparent);
}

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

/* Chips row */
.booking-chips {
    margin-top: 0.3125rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    grid-column: 1 / -1;
    /*padding-inline-start: 3.5rem;*/
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 62.4375rem;
    font-size: 0.6875rem;
    line-height: 1.1;
    border: 0.0625rem solid rgba(0,0,0,.06);
    background: color-mix(in oklab, var(--card) 80%, #fff 70%);
    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%);
}







.chip-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.3125rem;
    border-radius: 62.4375rem;
    font-size: 0.6875rem;
    line-height: 1.1;
    border: 0.0625rem solid rgba(0,0,0,.06);
    border-top-color: rgba(0, 0, 0, 0.06);
    border-right-color: rgba(0, 0, 0, 0.06);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    border-left-color: rgba(0, 0, 0, 0.06);
    background: rgba(255,255,255,.7);
    color: var(--color-text-dim);
    transition: 180ms ease;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1.5625rem;
    flex: 1 1 4.375rem; /* grow + shrink, start around 13.75rem */
    /* make long text behave nicely when shrinking */
    overflow-wrap: anywhere; /* or: word-break: break-word; */
}




.chip--normal {
    border-color: var(--color-text-dim);
    color: var(--color-text-dim);
    background: color-mix(in oklab, var(--color-surface) 5%, #fff 95%);
}

.chip--active {
    border-color: var(--color-secondary);
    color: var(--color-text);
    background: color-mix(in oklab, var(--color-secondary-lighter) 5%, #fff 95%);
}


    .chip--active .chip-icons {
        color: var(--color-secondary);
    }





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

/* MOBILE-FIRST CARD  ---------------------------------- */
.booking-header-card {
    position: relative;
    border-radius: 1.5rem;
    padding: 0.75rem 0.75rem 0.625rem;
    /*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 0.625rem 1.5rem rgba(17,24,64,.14);*/
    display: flex; /* column on mobile */
    flex-direction: column;
    gap: 0.625rem;
    overflow: hidden;
}

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

.booking-header-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    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: 0.5rem;
}

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

.booking-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.4375rem;
    border-radius: 62.4375rem;
    font-size: .7rem;
    background: color-mix(in oklab, var(--card) 95%, var(--color-surface));
    color: var(--color-text-dim);
    border: 0.0625rem solid color-mix(in oklab, var(--card) 85%, var(--color-surface));
    backdrop-filter: blur(0.375rem);
}

    .booking-chip svg {
        width: 0.6875rem;
        height: 0.6875rem;
    }


/*

    */


.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: 0.625rem;
}

/* Avatar cluster */
.booking-header-avatars {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    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;
    }


.imgBookingAvatar_popup {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 0.125rem solid #ffffff;
    margin: 0.5em auto 0.3em;
}


/* 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: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: .72rem;
}

.booking-header-progress-bar {
    position: relative;
    flex: 1;
    height: 0.25rem;
    border-radius: 6.1875rem;
    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: 40rem) {
    .booking-header-card {
        flex-direction: row;
        align-items: center;
        gap: 0.875rem;
        padding: 0.875rem 1rem;
    }

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

    .booking-header-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.375rem;
        min-width: 10.625rem;
    }

    .booking-header-avatars {
        width: 3.25rem;
        height: 3.25rem;
    }
}




@media (max-width: 45rem) {
    .booking-avatar-outer {
        width: 2.8125rem;
        height: 2.8125rem;
    }


    .chip-filter {
        font-size: 0.6875rem;
        line-height: 1.25rem;
        margin: 0.125rem;
    }




    .booking-card {
        padding: 0.625rem 0.75rem;
        gap: 0.3125rem 0.25rem; /*0.625rem 0.875rem;*/
    }




    .booking-avatar {
        box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.16);
    }

    .booking-subject-pill {
        box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,.18);
        border: 0.0625rem solid color-mix(in srgb, var(--color-text-dim) 35%, transparent);
    }
}


/*/////////////////////////////////// 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: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    border: 0.375rem solid #ccc;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
}

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











.nav-link .material-symbols-outlined {
    color: #ffffff !important;
}
















.hide_from_teachers_teachers {
    display: none !important;
}

.collapse_from_teachers_teachers {
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    padding-bottom: 0 !important;
}


.show_only_teachers_students {
    display: none !important;
}

.show_only_teachers_guest {
    display: none !important;
}



















/* ========================== "sweetalert" SWAL ALERT OVERRIDE =========================*/

.swal2-icon {
    font-size: 0.8em; /* 5em * 0.8 = 4em */
}

@media (max-width: 45rem) {
    .swal2-icon {
        font-size: 0.6em; /* 5em * 0.8 = 4em */
    }
}

/* ========================== "sweetalert" SWAL ALERT OVERRIDE =========================*/


























/*/////////////////////////////////////////// STARS SYSTEM POPUP (Student Ratting System) //////////////////////////////////////////*/
.rate-box {
    padding: 0.375rem 0.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.rate-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 0.0625rem solid var(--border-subtle, #e5e7eb);
    border-radius: 0.75rem;
    background: #fff;
}

.rate-title {
    font-size: 0.8125rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
    min-width: 33%;
}

.stars {
    display: inline-flex;
    gap: 0.25rem;
    direction: ltr;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.star {
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    color: #d1d5db; /* gray */
    transition: transform .08s ease, color .08s ease;
}

    .star:hover {
        transform: scale(1.06);
    }

    .star.is-on {
        color: #f59e0b; /* amber */
        font-variation-settings: 'FILL' 1;
    }

.rate-comment {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 0.0625rem solid var(--border-subtle, #e5e7eb);
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    outline: none;
    resize: vertical;
    min-height: 4.375rem;
    background: #fff;
}

.rate-hint {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: -0.375rem;
}

.rate-error {
    font-size: 0.75rem;
    color: var(--color-error, #dc2626);
    display: none;
}


/*/////////////////////////////////////////// STARS SYSTEM POPUP (Student Ratting System) //////////////////////////////////////////*/




















.payment-card .pay-meta-line {
    margin-top: 0.375rem;
    font-size: .82rem;
}

.pay-meta-card {
    display: flex;
    justify-content: end;
}



.payment-card .pay-meta-line .dim {
    opacity: .7;
}

.payment-card .pay-error {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.75rem;
    background: rgba(255, 0, 0, .06);
    color: rgba(180, 0, 0, .95);
    font-size: .82rem;
}



.payment-card .chip .material-symbols-outlined {
    font-size: .95rem;
}




.payment-card .pay-meta-card .material-symbols-outlined {
    font-size: 1.20rem;
    color: var(--color-error);
}


.payment-card--Success .pay-meta-card .material-symbols-outlined {
    color: #1e7d26;
}



.payment-card .pay-meta-intent {
    display: flex;
    font-size: .75rem;
    opacity: 0.4;
    justify-content: end;
}


.pay_meta_cardnumber {
}

.pay_meta_carddate {
}


.pay-meta-card-inner, .pay-meta-intent-inner {
    direction: ltr;
    display: flex;
    gap: 0.3125rem;
}
























/* Put this on the content wrapper you want to blur */
.app-blocked .ContentShell, /* change .ContentShell to your real main wrapper */
.app-blocked #ContentPlaceHolder1 /* fallback if you don’t have a wrapper */ {
    filter: blur(0.375rem) saturate(.9);
    opacity: .85;
    pointer-events: none; /* blocks all interaction */
    user-select: none; /* optional */
}

.blocked-shield {
    position: fixed;
    inset: 0;
    z-index: 999999; /* higher than modals */
    display: grid;
    place-items: center;
    padding: 1.125rem;
    background: rgba(10, 12, 18, .35);
    backdrop-filter: blur(0.375rem);
}

.blocked-card {
    width: min(32.5rem, 100%);
    border-radius: 1.375rem;
    padding: 1rem 1rem 0.875rem;
    background: var(--card, #fff);
    box-shadow: 0 1.125rem 3.125rem rgba(0,0,0,.25);
}

.blocked-title {
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 0.375rem;
}

.blocked-text {
    opacity: .85;
    font-size: .92rem;
    line-height: 1.4;
}

.blocked-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}












.driver-popover-arrow {
    display: none;
}




















/*############################## Uploader Image Editor ######################## */

@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0");

/* ---------- Material Icons ---------- */
.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 1.375rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
}

/* ---------- Overlay / Modal ---------- */
.ms-image-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.ms-image-editor-modal {
    width: min(94vw, 53.75rem);
    max-height: 92vh;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,.28);
}

/* ---------- Toolbar ---------- */
.ms-image-editor-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: #fff;
    border-bottom: 0.0625rem solid #ececec;
}

.ms-image-editor-toolbar-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .ms-image-editor-toolbar-main::-webkit-scrollbar {
        display: none;
    }

.ms-image-editor-tool-panel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.125rem;
}

    .ms-image-editor-tool-panel::-webkit-scrollbar {
        display: none;
    }

/* ---------- Icon Buttons ---------- */
.ms-image-editor-icon-btn {
    min-width: 2.625rem;
    height: 2.625rem;
    border: 0.0625rem solid #e1e1e1;
    background: #f8f8f8;
    color: #222;
    border-radius: 0.875rem;
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

    .ms-image-editor-icon-btn:active {
        transform: scale(.96);
    }

    .ms-image-editor-icon-btn.active,
    .ms-image-editor-icon-btn.draw-toggle.active,
    .ms-image-editor-btn.active {
        background: #1e73ff;
        border-color: #1e73ff;
        color: #fff;
    }

    .ms-image-editor-icon-btn.danger {
        color: #e53935;
    }

        .ms-image-editor-icon-btn.danger:active {
            background: rgba(229,57,53,.1);
        }

.ms-image-editor-btn-label {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ---------- Tool Chips ---------- */
.ms-image-editor-tool-chip,
.ms-image-editor-slider-chip {
    height: 2.625rem;
    border: 0.0625rem solid #e1e1e1;
    background: #fbfbfb;
    color: #222;
    border-radius: 0.875rem;
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.ms-image-editor-chip-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
}

/* Color input as circle */
.ms-image-editor-tool-chip input[type="color"] {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

    .ms-image-editor-tool-chip input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .ms-image-editor-tool-chip input[type="color"]::-webkit-color-swatch {
        border: 0.125rem solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 0.0625rem rgba(0,0,0,.18);
    }

/* Range sliders */
.ms-image-editor-slider-chip input[type="range"] {
    width: 7.5rem;
    accent-color: #1e73ff;
}

.ms-image-editor-slider-chip.zoom-chip input[type="range"] {
    width: 8.125rem;
}

/* Hide drawing-specific controls until draw mode */
.ms-image-editor-tool-panel .color-chip,
.ms-image-editor-tool-panel .ms-image-editor-slider-chip:not(.zoom-chip),
#msImageEditorClearDraw {
    display: none;
}

.ms-image-editor-overlay.is-draw-mode .ms-image-editor-tool-panel .color-chip,
.ms-image-editor-overlay.is-draw-mode .ms-image-editor-tool-panel .ms-image-editor-slider-chip:not(.zoom-chip),
.ms-image-editor-overlay.is-draw-mode #msImageEditorClearDraw {
    display: inline-flex;
}

/* ---------- Stage ---------- */
.ms-image-editor-stage {
    position: relative;
    min-height: 26.25rem;
    background: linear-gradient(45deg, #f4f4f4 25%, transparent 25%), linear-gradient(-45deg, #f4f4f4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f4f4f4 75%), linear-gradient(-45deg, transparent 75%, #f4f4f4 75%);
    background-size: 1.25rem 1.25rem;
    background-position: 0 0, 0 0.625rem, 0.625rem -0.625rem, -0.625rem 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    flex: 1;
}

    .ms-image-editor-stage.is-panning {
        cursor: grabbing;
    }

.ms-image-editor-image-layer {
    position: absolute;
    transform-origin: center center;
    user-select: none;
    pointer-events: none;
    z-index: 1;
}

#msImageEditorImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ---------- Drawing Layer ---------- */
.ms-image-editor-draw-canvas {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    touch-action: none;
    transform-origin: center center;
    background: transparent;
    user-select: none;
}

.ms-image-editor-overlay.is-draw-mode .ms-image-editor-draw-canvas {
    pointer-events: auto;
    cursor: crosshair;
}

.ms-image-editor-overlay.is-draw-mode .ms-image-editor-crop-box {
    pointer-events: none;
}

/* ---------- Crop Box ---------- */
.ms-image-editor-crop-box {
    position: absolute;
    border: 0.125rem solid #1e73ff;
    box-shadow: 0 0 0 6249.9375rem rgba(0,0,0,.28);
    cursor: move;
    box-sizing: border-box;
    touch-action: none;
    z-index: 5;
}

.ms-image-editor-handle {
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    background: #fff;
    border: 0.125rem solid #1e73ff;
    border-radius: 50%;
    box-sizing: border-box;
}

    /* Corners */
    .ms-image-editor-handle.nw {
        top: -0.5rem;
        left: -0.5rem;
        cursor: nwse-resize;
    }

    .ms-image-editor-handle.ne {
        top: -0.5rem;
        right: -0.5rem;
        cursor: nesw-resize;
    }

    .ms-image-editor-handle.sw {
        bottom: -0.5rem;
        left: -0.5rem;
        cursor: nesw-resize;
    }

    .ms-image-editor-handle.se {
        bottom: -0.5rem;
        right: -0.5rem;
        cursor: nwse-resize;
    }

    /* Sides */
    .ms-image-editor-handle.n {
        top: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        cursor: ns-resize;
    }

    .ms-image-editor-handle.s {
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        cursor: ns-resize;
    }

    .ms-image-editor-handle.w {
        left: -0.5rem;
        top: 50%;
        transform: translateY(-50%);
        cursor: ew-resize;
    }

    .ms-image-editor-handle.e {
        right: -0.5rem;
        top: 50%;
        transform: translateY(-50%);
        cursor: ew-resize;
    }

/* ---------- Bottom Actions ---------- */
.ms-image-editor-actions {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 0.875rem;
    background: #fff;
    border-top: 0.0625rem solid #ececec;
}

.ms-image-editor-btn {
    border: 0.0625rem solid #d6d6d6;
    background: #fff;
    color: #222;
    border-radius: 0.625rem;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    font: inherit;
    min-height: 2.5rem;
}

    .ms-image-editor-btn.primary {
        background: #1e73ff;
        border-color: #1e73ff;
        color: #fff;
    }

    .ms-image-editor-btn.alt {
        background: #f7f7f7;
    }

/* ---------- Mobile ---------- */
@media (max-width: 40rem) {
    .ms-image-editor-overlay {
        align-items: stretch;
        justify-content: stretch;
    }

    .ms-image-editor-modal {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .ms-image-editor-toolbar {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .ms-image-editor-icon-btn {
        min-width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.8125rem;
        padding: 0 0.5625rem;
    }

    .ms-image-editor-btn-label,
    .ms-image-editor-chip-text {
        display: none;
    }

    .ms-image-editor-tool-chip,
    .ms-image-editor-slider-chip {
        height: 2.5rem;
        border-radius: 0.8125rem;
        padding: 0 0.5625rem;
    }

        .ms-image-editor-slider-chip input[type="range"] {
            width: 6.5625rem;
        }

        .ms-image-editor-slider-chip.zoom-chip input[type="range"] {
            width: 7.1875rem;
        }

    .ms-image-editor-stage {
        min-height: 0;
        flex: 1;
    }

    .ms-image-editor-actions {
        padding: 0.625rem;
        gap: 0.5rem;
    }

        .ms-image-editor-actions .ms-image-editor-btn {
            flex: 1;
            min-height: 2.75rem;
            border-radius: 0.875rem;
        }
}










/* ---------- Profile / Avatar Crop Mode ---------- */

.ms-image-editor-overlay.is-profile-mode .ms-image-editor-crop-box {
    border-radius: 0;
    border-color: #1e73ff;
    background: transparent;
}

/* Hide side handles in profile mode because the crop must remain square */
.ms-image-editor-overlay.is-profile-mode .ms-image-editor-handle.n,
.ms-image-editor-overlay.is-profile-mode .ms-image-editor-handle.s,
.ms-image-editor-overlay.is-profile-mode .ms-image-editor-handle.w,
.ms-image-editor-overlay.is-profile-mode .ms-image-editor-handle.e {
    display: none;
}

/* Keep corner handles above the circle overlay */
.ms-image-editor-overlay.is-profile-mode .ms-image-editor-handle {
    z-index: 4;
}

/* Darken the square corners, leaving the circle clear */
.ms-image-editor-overlay.is-profile-mode .ms-image-editor-crop-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient( circle at center, transparent 0%, transparent 70%, rgba(0,0,0,.38) 70.5%, rgba(0,0,0,.38) 100% );
}

/* Circle guide showing exactly what profile image will display */
.ms-image-editor-overlay.is-profile-mode .ms-image-editor-crop-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 50%;
    border: 0.125rem solid rgba(255,255,255,.95);
    box-shadow: 0 0 0 0.0625rem rgba(30,115,255,.8), 0 0 1rem rgba(0,0,0,.22);
    box-sizing: border-box;
}





/*############################## Uploader Image Editor ######################## */

































/* ================================
   Amazing App Side Drawer
   Theme-matched: Light + Dark
================================ */

/* Menu button */
.app-menu-btn {
    width: 2.5rem;
    height: 2.5rem;
    max-height: none;
    margin: 0;
    padding: 0;
    /*border: 0.0625rem solid color-mix(in oklab, var(--color-text-light) 22%, transparent);*/
    outline: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    color: var(--color-text-light);
    background: color-mix(in oklab, var(--color-text-light) 12%, transparent);
    /*box-shadow: none;*/
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .app-menu-btn .material-symbols-outlined {
        font-size: 1.5rem;
        color: currentColor;
    }

    .app-menu-btn:hover {
        transform: translateY(-0.0625rem);
        background: color-mix(in oklab, var(--color-text-light) 18%, transparent);
        border-color: color-mix(in oklab, var(--color-text-light) 34%, transparent);
    }

    .app-menu-btn:active {
        transform: scale(.96);
    }

/* Footer version */
.footer .app-menu-btn {
    color: var(--color-primary);
    background: var(--ios-fill);
    /*border-color: var(--ios-hairline);
    box-shadow: 0 0.25rem 0.75rem rgba(34,41,84,.08);*/
}

html.dark-mode .footer .app-menu-btn {
    background: var(--card);
    color: var(--color-primary);
    /*border-color: var(--stroke);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.35);*/
}

/* Backdrop */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: color-mix(in oklab, var(--color-surface) 38%, transparent);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    transition: opacity .24s ease, visibility .24s ease;
}

    .drawer-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

html.dark-mode .drawer-backdrop {
    background: rgba(0,0,0,.55);
}

/* Drawer shell */
.app-drawer {
    --drawer-bg: color-mix(in oklab, var(--card) 94%, var(--color-bg) 6%);
    --drawer-bg-soft: color-mix(in oklab, var(--color-primary-lighter) 18%, var(--card) 82%);
    --drawer-item-bg: color-mix(in oklab, var(--card) 90%, var(--color-primary-lighter) 10%);
    --drawer-item-hover: color-mix(in oklab, var(--color-primary-lighter) 20%, var(--card) 80%);
    --drawer-active-bg: color-mix(in oklab, var(--color-primary) 14%, var(--card) 86%);
    --drawer-icon-bg: color-mix(in oklab, var(--color-primary) 12%, var(--card) 88%);
    --drawer-soft-border: color-mix(in oklab, var(--stroke) 82%, transparent);
    --drawer-glow-primary: color-mix(in oklab, var(--color-primary) 22%, transparent);
    --drawer-glow-secondary: color-mix(in oklab, var(--color-secondary) 18%, transparent);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    z-index: 9001;
    width: min(88vw, 24.375rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-text);
    background: radial-gradient(circle at 0 0, var(--drawer-glow-primary), transparent 38%), radial-gradient(circle at 100% 14%, var(--drawer-glow-secondary), transparent 32%), var(--drawer-bg);
    border-right: 0.0625rem solid var(--drawer-soft-border);
    border-left: 0;
    box-shadow: 1.5rem 0 3.75rem rgba(34,41,84,.20);
    transform: translateX(-105%);
    transition: transform .30s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Dark mode drawer */
html.dark-mode .app-drawer {
    --drawer-bg: color-mix(in oklab, var(--card) 92%, #000 8%);
    --drawer-bg-soft: color-mix(in oklab, var(--color-primary-lighter) 20%, var(--card) 80%);
    --drawer-item-bg: color-mix(in oklab, var(--card) 88%, var(--color-primary-lighter) 12%);
    --drawer-item-hover: color-mix(in oklab, var(--color-primary) 12%, var(--card) 88%);
    --drawer-active-bg: color-mix(in oklab, var(--color-primary) 22%, var(--card) 78%);
    --drawer-icon-bg: color-mix(in oklab, var(--color-primary) 18%, var(--card) 82%);
    --drawer-soft-border: var(--stroke);
    box-shadow: 1.625rem 0 4.375rem rgba(0,0,0,.55);
}

/* RTL drawer: fixed to the right */
html[dir="rtl"] .app-drawer,
body.rtl .app-drawer {
    left: auto;
    right: 0;
    border-left: 0.0625rem solid var(--drawer-soft-border);
    border-right: 0;
    transform: translateX(105%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    box-shadow: -1.5rem 0 3.75rem rgba(34,41,84,.20);
}

/* Dark mode RTL drawer */
html.dark-mode[dir="rtl"] .app-drawer,
html.dark-mode body.rtl .app-drawer {
    box-shadow: -1.625rem 0 4.375rem rgba(0,0,0,.55);
}

/* Open state must come after RTL closed state */
.app-drawer.open,
html[dir="rtl"] .app-drawer.open,
body.rtl .app-drawer.open {
    transform: translateX(0);
}

/* Decorative glow */
.drawer-top-glow {
    position: absolute;
    top: -8.125rem;
    inset-inline-start: -5.625rem;
    width: 16.25rem;
    height: 16.25rem;
    pointer-events: none;
    border-radius: 50%;
    background: color-mix(in oklab, var(--color-primary) 20%, transparent);
    filter: blur(1.75rem);
    opacity: .8;
}

/* Header */
.drawer-header {
    position: relative;
    z-index: 2;
    padding: calc(1rem + env(safe-area-inset-top)) 1rem 0.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.drawer-user-card {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    padding: 0.625rem;
    border-radius: 1.125rem;
    background: var(--drawer-bg-soft);
    border: 0.0625rem solid var(--drawer-soft-border);
    box-shadow: var(--shadow);
}

html.dark-mode .drawer-user-card {
    box-shadow: 0 0.5rem 1.375rem rgba(0,0,0,.28);
}

.drawer-avatar {
    width: 3.125rem;
    height: 3.125rem;
    flex: 0 0 3.125rem;
    cursor: pointer;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ios-fill);
    border: 0.125rem solid color-mix(in oklab, var(--color-primary) 45%, var(--card));
    box-shadow: 0 0.5rem 1.125rem rgba(34,41,84,.14);
}

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

.drawer-user-info {
    min-width: 0;
}

.drawer-welcome {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--color-text-dim);
    margin-bottom: 0.25rem;
}

.drawer-name {
    font-size: 0.9375rem;
    line-height: 1.25;
    font-weight: 800;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Close button */
.drawer-close {
    width: 2.375rem;
    height: 2.375rem;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0.0625rem solid var(--drawer-soft-border);
    outline: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 2.375rem;
    border-radius: 0.75rem;
    color: var(--color-text);
    background: var(--ios-fill);
    box-shadow: none;
    transition: transform .12s ease, background .12s ease, color .12s ease;
}

    .drawer-close .material-symbols-outlined {
        font-size: 1.375rem;
        color: currentColor;
    }

    .drawer-close:hover {
        background: var(--drawer-item-hover);
        color: var(--color-primary);
        transform: rotate(6deg);
    }

    .drawer-close:active {
        transform: scale(.96);
    }

/* Content */
.drawer-content {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.875rem 1rem;
    scrollbar-width: none;
}

    .drawer-content::-webkit-scrollbar {
        display: none;
    }

.drawer-section-title {
    padding: 0.625rem 0.375rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.drawer-section-spaced {
    margin-top: 0.625rem;
}

/* Navigation */
.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    padding: 0;
}

.drawer-item {
    width: 100%;
    min-height: 3.375rem;
    max-height: none;
    margin: 0;
    padding: 0.5rem 0.625rem;
    border: 0.0625rem solid var(--drawer-soft-border);
    outline: 0;
    cursor: pointer;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    border-radius: 1rem;
    text-align: start;
    background: var(--drawer-item-bg);
    box-shadow: none;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

    .drawer-item:hover {
        transform: translateX(0.1875rem);
        background: var(--drawer-item-hover);
        border-color: color-mix(in oklab, var(--color-primary) 36%, var(--stroke));
        box-shadow: 0 0.5rem 1.125rem rgba(34,41,84,.10);
    }

html[dir="rtl"] .drawer-item:hover,
body.rtl .drawer-item:hover {
    transform: translateX(-0.1875rem);
}

.drawer-item:active {
    transform: scale(.985);
}

.drawer-item.is-active {
    background: var(--drawer-active-bg);
    border-color: color-mix(in oklab, var(--color-primary) 58%, var(--stroke));
    box-shadow: 0 0.5rem 1.125rem color-mix(in oklab, var(--color-primary) 16%, transparent), inset 0 0 0 0.0625rem color-mix(in oklab, var(--color-primary) 12%, transparent);
}

.drawer-icon {
    width: 2.375rem;
    height: 2.375rem;
    flex: 0 0 2.375rem;
    display: grid !important;
    place-items: center;
    border-radius: 0.875rem;
    color: var(--color-primary);
    background: var(--drawer-icon-bg);
}

.drawer-item.is-active .drawer-icon {
    color: var(--color-text-light);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
}

.drawer-label {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 750;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-arrow {
    opacity: .38;
    font-size: 1.3125rem !important;
    color: var(--color-text-dim);
}

html[dir="rtl"] .drawer-arrow,
body.rtl .drawer-arrow {
    transform: rotate(180deg);
}

/* Quick actions */
.drawer-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.drawer-quick {
    min-height: 4.375rem;
    max-height: none;
    margin: 0;
    padding: 0.5rem;
    border: 0.0625rem solid var(--drawer-soft-border);
    outline: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    gap: 0.3125rem;
    border-radius: 1rem;
    color: var(--color-text);
    background: var(--drawer-item-bg);
    box-shadow: none;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .drawer-quick:hover {
        transform: translateY(-0.0625rem);
        background: var(--drawer-item-hover);
        border-color: color-mix(in oklab, var(--color-secondary) 40%, var(--stroke));
    }

    .drawer-quick .material-symbols-outlined {
        color: var(--color-secondary);
        font-size: 1.4375rem;
    }

    .drawer-quick span:last-child {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--color-text-dim);
    }

/* Footer */
.drawer-footer {
    position: relative;
    z-index: 2;
    padding: 0.75rem 0.875rem calc(0.875rem + env(safe-area-inset-bottom));
    border-top: 0.0625rem solid var(--drawer-soft-border);
    background: color-mix(in oklab, var(--drawer-bg) 88%, var(--color-primary-lighter) 12%);
}

.drawer-login-btn {
    width: 100%;
    min-height: 3rem;
    max-height: none;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 0.0625rem solid color-mix(in oklab, var(--color-primary-light) 50%, transparent);
    outline: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border-radius: 0.9375rem;
    color: var(--color-text-light);
    font-size: 0.875rem;
    font-weight: 800;
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
    box-shadow: 0 0.5rem 1.25rem color-mix(in oklab, var(--color-primary) 28%, transparent);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .drawer-login-btn:hover {
        transform: translateY(-0.0625rem);
        box-shadow: 0 0.75rem 1.625rem color-mix(in oklab, var(--color-primary) 34%, transparent);
    }

    .drawer-login-btn:active {
        transform: scale(.98);
    }

    .drawer-login-btn .material-symbols-outlined {
        font-size: 1.25rem;
        color: currentColor;
    }

/* Lock body scroll while drawer is open */
body.drawer-lock {
    overflow: hidden;
    touch-action: none;
}



/* Active quick buttons: selected language / active theme */
.drawer-quick.is-active {
    background: var(--drawer-active-bg);
    border-color: color-mix(in oklab, var(--color-primary) 58%, var(--stroke));
    box-shadow: 0 0.5rem 1.125rem color-mix(in oklab, var(--color-primary) 14%, transparent), inset 0 0 0 0.0625rem color-mix(in oklab, var(--color-primary) 12%, transparent);
}

    .drawer-quick.is-active .material-symbols-outlined {
        color: var(--color-primary);
        font-variation-settings: 'FILL' 1;
    }

    .drawer-quick.is-active span:last-child {
        color: var(--color-text);
    }


.drawer-quick.is-active-lang {
    display: none !important;
    visibility: collapse;
}

/* Logout button */
.drawer-logout-btn {
    color: #ffffff;
    background: linear-gradient(180deg, color-mix(in oklab, var(--color-error) 72%, #ffffff 8%), var(--color-error));
    border-color: color-mix(in oklab, var(--color-error) 55%, transparent);
    box-shadow: 0 0.5rem 1.25rem color-mix(in oklab, var(--color-error) 24%, transparent);
}

    .drawer-logout-btn:hover {
        box-shadow: 0 0.75rem 1.625rem color-mix(in oklab, var(--color-error) 30%, transparent);
    }


/* Mobile tuning */
@media (max-width: 32.5rem) {
    .app-drawer {
        width: min(92vw, 22.5rem);
        border-top-right-radius: 1.375rem;
        border-bottom-right-radius: 1.375rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    html[dir="rtl"] .app-drawer,
    body.rtl .app-drawer {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 1.375rem;
        border-bottom-left-radius: 1.375rem;
    }

    .drawer-header {
        padding-inline: 0.75rem;
    }

    .drawer-content {
        padding-inline: 0.75rem;
    }

    .drawer-item {
        min-height: 3.25rem;
        border-radius: 0.9375rem;
    }

    .drawer-icon {
        width: 2.25rem;
        height: 2.25rem;
        flex-basis: 2.25rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-drawer,
    .drawer-backdrop,
    .drawer-item,
    .drawer-quick,
    .drawer-close,
    .app-menu-btn,
    .drawer-login-btn {
        transition: none;
    }
}





.drawer-item .lord-icon {
    --lord-icon-primary: var(--color-primary);
    --lord-icon-secondary: var(--color-secondary);
}

.drawer-item .lord-icon-small {
    height: 1.3125rem;
    width: 1.3125rem;
}






.app-drawer {
    touch-action: pan-y;
}

.drawer-backdrop.show {
    touch-action: none;
}




.footer .lord-icon-small {
    /*--lord-icon-primary: var(--color-primary);*/
    --lord-icon-primary: #000000;
    --lord-icon-secondary: var(--color-secondary);
}

.footer .is-active .lord-icon-small {
    --lord-icon-primary: var(--color-primary);
    --lord-icon-secondary: var(--color-secondary);
}


.footer .lord-icon-small {
    height: 1.3125rem;
    width: 1.3125rem;
}







/* ================================
   Website Text Size Controller
================================ */

:root {
    --website-text-scale: 1;
}

    :root.text-size-small {
        --website-text-scale: 0.9;
    }

    :root.text-size-normal {
        --website-text-scale: 1;
    }

    :root.text-size-large {
        --website-text-scale: 1.15;
    }

    :root.text-size-xlarge {
        --website-text-scale: 1.3;
    }

.drawer-text-size-card {
    padding: 10px;
    border-radius: 18px;
    background: var(--drawer-item-bg);
    border: 1px solid var(--drawer-soft-border);
}

.drawer-text-size-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.drawer-text-size-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text);
}

    .drawer-text-size-title .material-symbols-outlined {
        font-size: 20px;
        color: var(--color-primary);
    }

.drawer-text-size-preview {
    font-size: calc(12px * var(--website-text-scale));
    color: var(--color-text-dim);
    font-weight: 700;
}

.drawer-text-size-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.drawer-text-size-btn {
    min-height: 54px;
    max-height: none;
    margin: 0;
    padding: 6px 4px;
    border-radius: 14px;
    border: 1px solid var(--drawer-soft-border);
    background: color-mix(in oklab, var(--card) 92%, var(--color-primary-lighter) 8%);
    color: var(--color-text-dim);
    box-shadow: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    gap: 3px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

    .drawer-text-size-btn:hover {
        transform: translateY(-1px);
        background: var(--drawer-item-hover);
        border-color: color-mix(in oklab, var(--color-primary) 35%, var(--stroke));
    }

    .drawer-text-size-btn.is-active {
        background: var(--drawer-active-bg);
        color: var(--color-primary);
        border-color: color-mix(in oklab, var(--color-primary) 58%, var(--stroke));
        box-shadow: 0 8px 18px color-mix(in oklab, var(--color-primary) 14%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 12%, transparent);
    }

.drawer-text-size-letter {
    line-height: 1;
    font-weight: 900;
}

.drawer-text-size-btn[data-size="small"] .drawer-text-size-letter {
    font-size: 13px;
}

.drawer-text-size-btn[data-size="normal"] .drawer-text-size-letter {
    font-size: 16px;
}

.drawer-text-size-btn[data-size="large"] .drawer-text-size-letter {
    font-size: 20px;
}

.drawer-text-size-btn[data-size="xlarge"] .drawer-text-size-letter {
    font-size: 24px;
}

.drawer-text-size-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-dim);
}

.drawer-text-size-btn.is-active .drawer-text-size-label {
    color: var(--color-text);
}

@media (max-width: 420px) {
    .drawer-text-size-options {
        gap: 5px;
    }

    .drawer-text-size-btn {
        min-height: 50px;
    }

    .drawer-text-size-label {
        font-size: 8px;
    }
}






































/* ==========================
   NIGHT MODE
   Add this at the END of main.css
========================== */

html.dark-mode {
    color-scheme: dark;
    --color-bg: #0b1020;
    --color-surface: #111827;
    --color-primary: #3b82f6;
    --color-primary-light: #2563eb;
    --color-primary-lighter: #1e3a8a;
    --color-secondary: #fb923c;
    --color-secondary-light: #fdba74;
    --color-secondary-lighter: #451a03;
    --color-text: #e5e7eb;
    --color-text-dim: #9ca3af;
    --color-text-light: #ffffff;
    --button-color: #111827;
    --icon-color: #d1d5db;
    --card: #111827;
    --stroke: #263244;
    --shadow: 0 0.5rem 1.5rem rgba(0,0,0,.45);
    --ios-bg: #0b1020;
    --ios-fill: #111827;
    --ios-hair: rgba(255,255,255,.14);
    --ios-hairline: rgba(255,255,255,.14);
    --ios-text: #f9fafb;
    --ios-dim: rgba(255,255,255,.62);
    /*--ios-panel: #111827;*/ /*This one effect the popup icons animation background color*/
    --color-error: #ff5a50;
    --color-text-alert: #ff3c30;
}

    /* Main background/text */
    html.dark-mode body,
    html.dark-mode .app {
        background: var(--color-bg);
        color: var(--color-text);
    }

    /* Common panels/cards */
    html.dark-mode .panel,
    html.dark-mode .tabs-panels,
    html.dark-mode .drawer,
    html.dark-mode .mobile-tabbar,
    html.dark-mode .chat-input-shell,
    html.dark-mode .stt-dialog,
    html.dark-mode .swal2-popup.ios-popup {
        background: var(--card) !important;
        color: var(--color-text) !important;
        border-color: var(--stroke) !important;
    }

    /* Inputs */
    html.dark-mode input,
    html.dark-mode textarea,
    html.dark-mode select,
    html.dark-mode .fa-input > input,
    html.dark-mode .chat-input-text {
        background: #0f172a !important;
        color: var(--color-text) !important;
        border-color: var(--stroke) !important;
    }

    html.dark-mode ::placeholder {
        color: #64748b !important;
    }

    /* Your hard-coded light cards */
    html.dark-mode .sub-card,
    html.dark-mode .teacher-card,
    html.dark-mode .material-card,
    html.dark-mode .teacher-extra,
    html.dark-mode .drawer-nav a,
    html.dark-mode .back,
    html.dark-mode .ghost-btn,
    html.dark-mode .subject-item,
    html.dark-mode .chat-bubble-shell,
    html.dark-mode .chat-pdf-link {
        background: #0f172a !important;
        color: var(--color-text) !important;
        border-color: var(--stroke) !important;
    }

    html.dark-mode .chat-bubble-parent {
        background: #363636 !important;
        color: var(--color-text) !important;
        border-color: #94bfff !important;
    }



    /* Hover states */
    html.dark-mode .noti-row:hover,
    html.dark-mode .calllog-item:hover,
    html.dark-mode .btn-icon:hover {
        background: rgba(255,255,255,.06) !important;
    }

    /* Text fixes */
    html.dark-mode .noti-row-title,
    html.dark-mode .subject-title,
    html.dark-mode .calllog-title,
    html.dark-mode .chat-sender-name,
    html.dark-mode label,
    html.dark-mode .swal2-title.ios-title,
    html.dark-mode .swal2-html-container.ios-html {
        color: var(--color-text) !important;
    }

    html.dark-mode .noti-row-preview,
    html.dark-mode .calllog-time,
    html.dark-mode .chat-message-time,
    html.dark-mode .form-hint,
    html.dark-mode .hint {
        color: var(--color-text-dim) !important;
    }


    html.dark-mode .cbtn {
        background: none;
    }

    html.dark-mode .lesson-details-card {
        background: none !important;
    }

    html.dark-mode .lesson-widget-num {
        background: rgba(255, 255, 255, 0.16) !important;
    }


    html.dark-mode .chip {
        background: none !important;
    }

    html.dark-mode .chat-msg-action-btn {
        background: #ffffff1c !important;
    }

        html.dark-mode .chat-msg-action-btn .txt {
            color: #ffffff !important;
        }

    html.dark-mode .react-symbole-REPLY {
        color: #ffffff !important;
    }

    html.dark-mode #page-loader {
        background: rgb(17, 11, 3);
    }


    html.dark-mode .chip--normal {
        background: color-mix(in oklab, var(--color-surface) 5%, #000 95%) !important;
    }

    html.dark-mode .chip--active {
        background: color-mix(in oklab, var(--color-secondary-lighter) 5%, #000 95%) !important;
    }

    html.dark-mode .bookings-empty {
        background: #292b3a !important;
    }

    html.dark-mode .ddx-panel {
        background: none !important;
    }

    html.dark-mode .badge {
        background: color-mix(in oklab, var(--color-primary-lighter) 10%, #1f2234 90%) !important;
    }

    html.dark-mode .badge--warn {
        background: color-mix(in oklab, var(--color-secondary) 12%, #343434 90%) !important;
    }

    html.dark-mode .plan-price {
        background: color-mix(in oklab, var(--color-primary-lighter) 8%, #282530 92%) !important;
    }


    html.dark-mode .chat-input-actions .material-symbols-outlined {
        color: #dee5f0 !important;
    }



    html.dark-mode .slot--open {
        background: color-mix(in oklab, var(--color-primary) 10%, black 90%) !important;
    }

    html.dark-mode .ios-btn-cancel {
        color: var(--color-error) !important;
    }

    html.dark-mode .divDateEdit {
        background-color: #5b0000;
    }


    html.dark-mode .card_badge {
        background: #2c325d;
    }










/* ==========================
   DARK MODE COMFORT FILTER
========================== */
html.dark-mode {
    --night-saturation: 0.6; /* 1 = normal, 0.7 = softer, 0.5 = very muted */
    --night-brightness: 0.85; /* 1 = normal, 0.7 = softer, 0.5 = very muted */
}

    /* Apply once to the whole app */
    html.dark-mode .app {
        /*filter: saturate(var(--night-saturation));*/
        filter: saturate(var(--night-saturation)) brightness(var(--night-brightness));
    }

    /* Optional: also soften popups/tooltips that may be outside .app */
    html.dark-mode .swal2-container,
    html.dark-mode .tippy-box,
    html.dark-mode .tippy-tooltip {
        /*filter: saturate(var(--night-saturation));*/
        filter: saturate(var(--night-saturation)) brightness(var(--night-brightness));
    }





    html.dark-mode .switch .thumb {
        background: #5d0202;
    }

    html.dark-mode .switch input:checked ~ .thumb {
        background: #000c6d;
    }




    html.dark-mode .app-menu-btn {
        color: #ffffff;
    }




    html.dark-mode .booking-title .badge-plan {
        background: none !important;
    }

    html.dark-mode .booking-status-pill--active {
        background: color-mix(in oklab, var(--color-primary) 12%, #07101e 88%) !important;
    }



    html.dark-mode .footer .lord-icon-small {
        --lord-icon-primary: #ffffff !important;
        --lord-icon-secondary: var(--color-primary) !important;
    }


    html.dark-mode .footer .is-active .lord-icon-small {
        --lord-icon-primary: var(--color-secondary) !important;
        --lord-icon-secondary: var(--color-primary) !important;
    }