.fnlb-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 1rem 4.5rem;
background: rgba(12, 14, 18, 0.92);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s ease;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.fnlb-overlay.is-open {
opacity: 1;
visibility: visible;
}
.fnlb-stage {
position: relative;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.fnlb-img {
display: block;
max-width: min(92vw, 1400px);
max-height: 82vh;
width: auto;
height: auto;
border-radius: 3px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
background: #1b1e24;
transform: scale(0.97);
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.fnlb-img.is-loaded {
opacity: 1;
transform: scale(1);
} .fnlb-caption {
margin: 0.85rem auto 0;
max-width: min(92vw, 1400px);
color: #e7e9ee;
font-size: 0.9rem;
line-height: 1.5;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.fnlb-caption:empty {
display: none;
} .fnlb-btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.11);
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.fnlb-btn:hover,
.fnlb-btn:focus-visible {
background: rgba(255, 255, 255, 0.24);
}
.fnlb-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.fnlb-btn[hidden] {
display: none;
}
.fnlb-close {
top: 1rem;
right: 1rem;
font-size: 24px;
}
.fnlb-prev { left: 1rem; top: 50%; margin-top: -22px; }
.fnlb-next { right: 1rem; top: 50%; margin-top: -22px; }
.fnlb-counter {
position: absolute;
bottom: 1.4rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.72);
font-size: 0.8rem;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.fnlb-counter[hidden] {
display: none;
} .fnlb-overlay.is-loading .fnlb-stage::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
animation: fnlb-spin 0.7s linear infinite;
}
@keyframes fnlb-spin {
to { transform: rotate(360deg); }
} img[data-fnlb-full] {
cursor: zoom-in;
} html.fnlb-locked {
overflow: hidden;
}
body.fnlb-locked {
position: fixed;
width: 100%;
overflow: hidden;
}
@media (max-width: 600px) {
.fnlb-overlay { padding: 1rem 0.5rem 3.5rem; }
.fnlb-prev { left: 0.35rem; }
.fnlb-next { right: 0.35rem; }
.fnlb-close { top: 0.5rem; right: 0.5rem; }
.fnlb-img { max-height: 74vh; }
}
@media (prefers-reduced-motion: reduce) {
.fnlb-overlay,
.fnlb-img,
.fnlb-btn {
transition: none;
}
.fnlb-overlay.is-loading .fnlb-stage::after {
animation: none;
}
}