.contents .image-zoom-overlay {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,.8);
display: flex; align-items: center; justify-content: center;
z-index: 9999; opacity: 0; pointer-events: none;
transition: opacity .3s;
}
.contents .image-zoom-overlay.active { opacity:1; pointer-events:auto; }
.contents .image-zoom-overlay img {
max-width:100vw; max-height:78vh;
object-fit: contain;
transform: scale(1) rotate(0deg);
transition: transform .3s, box-shadow .1s;
0 auto; background: #282828;
border-radius:10px; cursor:grab;
box-shadow: 0 0 30px rgba(0,0,0,.5);
z-index:19;
}
.contents .image-zoom-overlay img.zoomed-hover {
box-shadow: 0 0 0 4px #09f, 0 0 30px #239cffcc;
outline: 1.5px solid #fff;
}
.contents .zoomable-image {position:relative; display:inline-block;}
.contents .zoom-indicator {position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;}
.contents .zoomable-image:hover .zoom-indicator {opacity:1;}
.contents .image-zoom-close {position:absolute;top:20px;right:120px;color:#fff;font-size:30px;cursor:pointer;opacity:.7;transition:opacity .2s;z-index:21;background:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.contents .image-zoom-close:hover {opacity:1;}
.contents .image-zoom-download {position:absolute;top:20px;right:162px;color:#fff;opacity:.78;background:none;border:none;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:opacity .2s;}
.contents .image-zoom-download:hover {opacity:1;}
.contents .image-zoom-top-controls {
position:absolute;top:22px;left:50%;transform:translateX(-50%);
z-index:99;display:flex;gap:13px;align-items:center;
}
.contents .image-zoom-top-controls button,
.contents .image-zoom-top-controls .image-zoom-in,
.contents .image-zoom-top-controls .image-zoom-out,
.contents .image-zoom-top-controls .image-zoom-rotate {
background:rgba(0,0,0,0.43);color:#fff;border:none;border-radius:7px;
padding:7px 16px;font-size:19px;font-weight:500;cursor:pointer;transition:background .2s, opacity .2s;opacity:0.82;
height:40px; min-width:40px; display:flex; align-items:center; justify-content:center;
}
.contents .image-zoom-top-controls button.active{background:#098cff;}
.contents .image-zoom-top-controls button:hover,
.contents .image-zoom-top-controls .image-zoom-in:hover,
.contents .image-zoom-top-controls .image-zoom-out:hover,
.contents .image-zoom-top-controls .image-zoom-rotate:hover {background:rgba(0,0,0,0.7);opacity:1;}
.contents .image-zoom-in,
.contents .image-zoom-out {
width:40px;height:40px;padding:0 0;0;font-size:27px;
}
.contents .image-zoom-rotate {
width: 60px;
height: 60px;
min-width: 60px;
font-size: 50px;
padding: 0;
}
.contents .image-zoom-rotate svg {
width:50px; height:50px; display:block;
}
.contents .image-zoom-hotkeys {width:37px;height:40px;display:flex;align-items:center;justify-content:center;font-size:23px;color:#fff;background:rgba(0,0,0,0.45);border: none;border-radius:7px;cursor:pointer;opacity:.77;7px;transition:opacity .2s;}
.contents .image-zoom-hotkeys:hover{background:rgba(0,0,0,0.77);opacity:1;}
.contents .image-zoom-hotkeys-modal {
position:absolute; top:60px; left:50%; transform:translateX(-50%);
min-width:260px; background: #1b1c23e6; color:#fff; border-radius:10px; padding:23px 31px 19px 31px;
box-shadow: 0 6px 32px #000a;
z-index: 99;
font-size: 16px; 1.62;
border:1.5px solid #1683e4;
pointer-events: auto;
}
.contents .image-zoom-hotkeys-modal strong {color:#78bfff;}
.contents .image-zoom-hotkeys-modal .c {color:#c6f;}
.contents .image-zoom-hotkeys-modal .k {color:#fa0;}
.contents .image-zoom-hotkeys-modal .r {color:#3fb;}
.contents .image-zoom-hotkeys-modal ul {9px 0 0 0;padding-left:15px;}
.contents .image-zoom-hotkeys-modal .close-modal {position:absolute;top:7px;right:10px;font-size:22px;opacity:.6;cursor:pointer;}
.contents .image-zoom-hotkeys-modal .close-modal:hover {opacity:1;}
.contents .image-zoom-hotkeys-modal code {
background: #e2e8ff; color: #2a3866; border-radius: 7px;
padding: 0 8px; font-size:15px;inherit;border:1px solid #f2f6ff;2px;
display:inline-block;
}
.contents .image-zoom-hotkeys-modal strong,
.contents .image-zoom-hotkeys-modal .c,
.contents .image-zoom-hotkeys-modal .r,
.contents .image-zoom-hotkeys-modal .k {
filter:brightness(1.09) contrast(1.1);
}
.contents .image-zoom-left,
.contents .image-zoom-right {
position: absolute;top:0;height:100%;width:90px;background:rgba(0,0,0,.15);
display:flex;align-items:center;justify-content:center;font-size:56px;color:#fff;cursor:pointer;z-index:10;border-radius:0;user-select:none;opacity:.88;transition:background .2s;
}
.contents .image-zoom-left:hover, .contents .image-zoom-right:hover { background:rgba(0,0,0,.3);}
.contents .image-zoom-left {left:0;border-top-right-radius:30px;border-bottom-right-radius:30px;}
.contents .image-zoom-right {right:0;border-top-left-radius:30px;border-bottom-left-radius:30px;}
.contents .image-zoom-counter {position:absolute;top:20px;left:32px;color:#fff; font-size:18px;background:rgba(0,0,0,.5);padding:4px 14px;border-radius:7px;user-select:none;z-index:10;}
.contents .image-zoom-thumbs-bar-outer {
position:absolute; left:0; right:0; bottom:0; width:100%; background:#181818;
padding:26px 0 22px 0; box-sizing:border-box;border-top:2px solid #222;display:flex;justify-content:center;min-height:153px;z-index:30;transition:padding .3s, min-height .3s;
}
.contents .image-zoom-thumbs-bar-outer.collapsed {
min-height:0 !important; max-height:0 !important; padding:0;border-top:0;overflow:hidden !important;
}
.contents .image-zoom-thumbs-bar {
display:flex;justify-content:center;align-items:center;gap:27px;overflow-x:auto;overflow-y:hidden;max-width:97vw;padding:0 8px;scrollbar-height:thin;transition:max-height .3s;
}
.contents .image-zoom-thumb {
flex:0 0 auto;width:189px; height:130px; display:flex;align-items:center;justify-content:center;
border:2px solid transparent;border-radius:8px;background:#222;
transition:border .15s,transform .18s,box-shadow .13s;
cursor:pointer;opacity:.78;outline:none;box-sizing:border-box;box-shadow:0 1px 8px #1118;0 .5px;
}
.contents .image-zoom-thumb img {max-width:100%;max-height:100%;object-fit:cover;pointer-events:none;user-select:none;}
.contents .image-zoom-thumb.current {
border:2.5px solid #09f;box-shadow:0 0 14px #09f7;
opacity:1 !important;z-index:2;
}
.contents .image-zoom-thumb:hover:not(.current) {border:2.5px solid #fff3;opacity:1 !important;z-index:1;}
.contents .image-zoom-thumbs-bar::-webkit-scrollbar { height:9px; background:#191919;}
.contents .image-zoom-thumbs-bar::-webkit-scrollbar-thumb { background:#333; border-radius:10px;}
.contents .image-zoom-thumbs-collapse-btn {
position: absolute; left:0; right:0; top:0; width:100%;
height:25px; display:flex; align-items:center; justify-content:center;
padding:0; font-size:21px; background: rgba(36,55,73,.63);
color: #72beff; border: none; outline: none;
cursor:pointer; border-radius:0 0 8px 8px;
box-shadow: 0 2px 8px #161e30a8;
z-index:59;
opacity:.93;
transition:background .2s, color .2s, box-shadow .2s;
}
.contents .image-zoom-thumbs-collapse-btn:hover{
background: #1d2d46;
color: #fff;
opacity:1;
box-shadow: 0 6px 18px #1e22308a;
}
.contents .image-zoom-thumbs-bar-outer.collapsed .image-zoom-thumbs-collapse-btn {
display:none;
}
/* СВЕРНУТАЯ КНОПКА — всегда видна */
.image-zoom-thumbs-collapse-btn-fixed {
/* весь прежний стиль .contents .image-zoom-thumbs-collapse-btn-fixed сюда */
position: fixed !important;
left:50%; transform:translateX(-50%);
width:202px; max-width:86vw; bottom:7px;
background: rgba(21,35,60,.73);
box-shadow: 0 4px 16px #131e2b95;
color: #6fb3f9; border-radius:14px 14px 14px 14px;
border:1.2px solid #265ea2;
font-size:21px; height:28px;
padding:0; 0;
z-index:10101;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
opacity:.93;
transition:background .16s, color .16s;
}
.image-zoom-thumbs-collapse-btn-fixed:hover {
background:#1e2958;
color:#fff;
}
.image-zoom-left.hidden, .image-zoom-right.hidden {
display: none !important;
}
.contents .image-zoom-spinner {
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); z-index:30;width:45px;height:45px;border:5px solid rgba(255,255,255,0.17);border-top:5px solid #09f; border-radius:50%;animation:spin-zoom 1s linear infinite;display:none;
}
@keyframes spin-zoom {to{transform:rotate(360deg);}}
@media (max-width: 700px) {
.contents .image-zoom-thumb { width:121px;height:83px;}
.contents .image-zoom-thumbs-bar-outer { min-height:97px;padding:7px 0;}
.contents .image-zoom-thumbs-bar { gap:11px;}
.contents .image-zoom-top-controls {top:7px;}
.contents .image-zoom-close, .contents .image-zoom-download {top:10px;right:12px;}
.contents .image-zoom-hotkeys-modal { left:0; right:0;top:48px;transform:none; }
}
