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

.mce-toc a{
position:relative;
transition:color .2s ease;
}

.mce-toc a.active{
color:#6ea8ff !important;
font-weight:600 !important;
}

.mce-toc a.active::before{
content:"▸";
position:absolute;
left:-14px;
color:#6ea8ff;
}


/* =================================================
   SMOOTH SCROLL
================================================= */

html{
scroll-behavior:smooth;
}


/* =================================================
   HEADER OFFSET FIX
================================================= */

.full-text h2,
.full-text h3{
scroll-margin-top:140px;
}


/* =================================================
   READING PROGRESS BAR
================================================= */

.reading-progress{

position:sticky;
top:88px;
margin-top:10px;
z-index:30;

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

background:rgba(15,17,21,0.82);

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

padding:10px 14px;

border-radius:8px;

margin-bottom:18px;

box-shadow:0 6px 18px rgba(0,0,0,0.45);

will-change:transform;
backface-visibility:hidden;

/* ახლა ყოველთვის ჩანს */

opacity:1;
max-height:60px;
transform:translateY(0);

}

/* progress text */

.progress-text{
font-size:13px;
color:#9fb3c8;
white-space:nowrap;
}


/* progress track */

.progress-bar{

flex:1;

height:6px;

background:#1f2a38;

border-radius:4px;

position:relative;

overflow:hidden;

}


/* progress fill */

.progress-bar::after{

content:"";

position:absolute;

left:0;
top:0;

height:100%;

width:var(--progress);

background:#6ea8ff;

transition:width .25s cubic-bezier(.4,0,.2,1);

}


/* =================================================
   LIGHT MODE
================================================= */

html:not(.zf-dark) .reading-progress{

background:rgba(255,255,255,0.86);

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

box-shadow:0 4px 14px rgba(0,0,0,0.12);

}

html:not(.zf-dark) .progress-bar{
background:#dde5ef;
}

html:not(.zf-dark) .progress-text{
color:#4b5a6b;
}


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

@media (max-width:768px){

.reading-progress{

top:52px;

padding:9px 12px;

border-radius:10px;

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

}

.progress-text{
font-size:12px;
}

}