/* ==========================================
   Mobile Navbar Card
========================================== */

.mobile-navbar-card{

    width:100%;

    margin-block:16px;

    background:var(--surface-gradient);

    border:1px solid var(--border-light);

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

    box-shadow:var(--shadow-navbar);

    overflow:hidden;

}

.mobile-navbar-card:hover{

    transform:translateY(var(--lift-sm));

    box-shadow:var(--shadow-navbar-hover);

}


/* ==========================================
   Mobile Navbar
========================================== */

.mobile-navbar-card .navbar{

    background:transparent;

    padding:
        12px
        16px;

}


/* ==========================================
   Mobile Header Inner
========================================== */


.mobile-header-inner{

    display:flex;

    align-items:center;

    width:100%;

    gap:12px;

}



/* ==========================================
   Brand
========================================== */


.premium-brand{

    flex:1;

    min-width:0;

    text-decoration:none;

}


.brand-wrapper{

    display:flex;

    align-items:center;

}


.brand-content{

    display:flex;

    flex-direction:column;

    overflow:hidden;

}


.brand-main{

    font-size:1.15rem;

    font-weight:var(--fw-extrabold);

    color:var(--secondary);

    line-height:1.15;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


.brand-tagline{

    font-size:.60rem;

    color:var(--text-light);

    line-height:1.15;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* ==========================================
   Mobile Toggle Button
========================================== */


.navbar-toggler{

    border:none;

    box-shadow:none;

    padding:0;

}


.navbar-toggler:focus{

    box-shadow:none;

}


.navbar-toggler i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid var(--text-light);

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

    color:var(--secondary);

    font-size:30px;

    transition:

        transform var(--transition),

        color var(--transition);

}


.navbar-toggler:hover i{

    transform:scale(1.08);

    color:var(--primary-light);

}

/* ==========================================
   Mobile Menu Label
========================================== */


.mobile-menu-label{

    display:flex;

    align-items:center;

    gap:6px;

    flex:1;

}


.mobile-menu-label span{

    display:inline;

}



/* ==========================================
   Other Facilities Icons (Mobile)
========================================== */


.offcanvas .cf-icon-facility-lab{

    color:#6f42c1;

}


.offcanvas .cf-icon-facility-psychology{

    color:#ff6f00;

}