/* =========================================================
   MOBILE TOGGLE BUTTON
========================================================= */

.kb-mobile-toggle{
display:none;

position:fixed;
bottom:24px;
left:24px;
z-index:1200;

width:56px;
height:56px;

border:none;
border-radius:18px;

background:#2563eb;

box-shadow:
0 10px 30px rgba(37,99,235,.28);

cursor:pointer;

align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;

transition:
transform .25s ease,
background .25s ease;
}

.kb-mobile-toggle:hover{
transform:translateY(-2px);
background:#1d4ed8;
}

.kb-mobile-toggle span{
display:block;
width:22px;
height:2px;
border-radius:20px;
background:#ffffff;
}

/* =========================================================
   OVERLAY
========================================================= */

.kb-sidebar-overlay{
position:fixed;
inset:0;

background:rgba(15,23,42,.55);

backdrop-filter:blur(2px);

opacity:0;
visibility:hidden;

transition:.25s ease;

z-index:1100;
}

.kb-sidebar-overlay.active{
opacity:1;
visibility:visible;
}

/* =========================================================
   SIDEBAR
========================================================= */

.kb-sidebar{
position:sticky;
top:24px;

height:calc(100vh - 40px);

overflow-y:auto;

padding-right:10px;
}

/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

.kb-sidebar::-webkit-scrollbar{
width:6px;
}

.kb-sidebar::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:20px;
}

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

.kb-sidebar-header{
display:flex;
align-items:center;
justify-content:space-between;

margin-bottom:20px;
}

.kb-sidebar-title{
font-size:15px;
font-weight:700;
color:#475569;
letter-spacing:.2px;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.kb-sidebar-close{
display:none;

width:42px;
height:42px;

border:none;
border-radius:12px;

background:#eff6ff;
color:#2563eb;

cursor:pointer;

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

transition:.2s ease;
}

.kb-sidebar-close:hover{
background:#dbeafe;
}

/* =========================================================
   CATEGORY
========================================================= */

.kb-category{
margin-bottom:12px;
border-radius:16px;
overflow:hidden;

border:1px solid transparent;

transition:
background .25s ease,
border-color .25s ease;
}

.kb-category.active{
background:#ffffff;
border-color:#dbeafe;
}

/* =========================================================
   CATEGORY TOGGLE
========================================================= */

.kb-category-toggle{
width:100%;

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

padding:14px 16px;

border:none;
background:none;

cursor:pointer;

transition:.2s ease;
}

.kb-category-toggle:hover{
background:#f8fafc;
}

/* =========================================================
   LEFT AREA
========================================================= */

.kb-category-left{
display:flex;
align-items:center;
gap:12px;
}

/* =========================================================
   ICON
========================================================= */

.kb-category-icon{
width:36px;
height:36px;

border-radius:12px;

background:#eff6ff;
color:#2563eb;

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

flex-shrink:0;
}

.kb-category-icon svg{
width:18px;
height:18px;
}

/* =========================================================
   TITLE
========================================================= */

.kb-category-name{
font-size:14px;
font-weight:700;
color:#1e293b;
}

/* =========================================================
   ARROW
========================================================= */

.kb-category-arrow{
display:flex;
align-items:center;
justify-content:center;

color:#64748b;

transition:transform .25s ease;
}

.kb-category-arrow svg{
width:18px;
height:18px;
}

.kb-category.active
.kb-category-arrow{
transform:rotate(90deg);
}

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

.kb-category-content{
max-height:0;
overflow:hidden;

transition:max-height .3s ease;
}

.kb-category.active
.kb-category-content{
max-height:700px;
}

/* =========================================================
   NAVIGATION
========================================================= */

.kb-nav{
display:flex;
flex-direction:column;

padding:
0 10px
12px
10px;

gap:4px;
}

/* =========================================================
   LINKS
========================================================= */

.kb-nav a{
position:relative;

display:flex;
align-items:center;
gap:12px;

padding:11px 14px;

border-radius:12px;

text-decoration:none;

font-size:14px;
font-weight:500;

color:#475569;

transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}

.kb-nav a:hover{
background:#f8fafc;
color:#2563eb;
transform:translateX(2px);
}

/* =========================================================
   ACTIVE LINK
========================================================= */

.kb-nav a.active{
background:#eff6ff;
color:#2563eb;
font-weight:600;
}

/* =========================================================
   ACTIVE BORDER
========================================================= */

.kb-nav a.active::before{
content:"";

position:absolute;
left:0;
top:10px;
bottom:10px;

width:3px;
border-radius:20px;

background:#2563eb;
}

/* =========================================================
   DOT
========================================================= */

.kb-nav-dot{
width:7px;
height:7px;

border-radius:50%;

background:#94a3b8;

flex-shrink:0;

transition:.2s ease;
}

.kb-nav a:hover .kb-nav-dot{
background:#2563eb;
}

.kb-nav a.active .kb-nav-dot{
background:#2563eb;
}

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

@media(max-width:1000px){

.kb-mobile-toggle{
display:flex;
}

.kb-sidebar{
position:fixed;
top:0;
left:0;

width:320px;
max-width:88%;

height:100vh;

background:#f8fafc;

padding:
22px
16px
30px;

z-index:1201;

transform:translateX(-105%);

transition:transform .3s ease;

overflow-y:auto;

box-shadow:
0 0 40px rgba(15,23,42,.16);
}

.kb-sidebar.active{
transform:translateX(0);
}

.kb-sidebar-close{
display:flex;
}

body.kb-sidebar-open{
overflow:hidden;
}

}

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

@media(max-width:768px){

.kb-sidebar{
width:300px;
padding:
20px
14px
28px;
}

.kb-mobile-toggle{
bottom:18px;
left:18px;

width:54px;
height:54px;
}

.kb-category-toggle{
padding:13px 14px;
}

.kb-nav a{
font-size:13px;
padding:10px 12px;
}

.kb-category-name{
font-size:13px;
}

}