.viewer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4);display:none;justify-content:center;align-items:center;z-index:1000;opacity:0;transition:opacity 0.3s ease;}
.viewer-overlay.active{display:flex;opacity:1;}
.image-container{position:relative;transition:transform 0.2s ease;transform-origin:center center;display: flex;align-items: center;justify-content: center;}
.viewer-image{display:block;object-fit:contain;box-shadow:0 10px 30px rgba(0,0,0,0.3);transition:opacity 0.3s ease;}
.viewer-controls{position:absolute;bottom:20px;right:20px;width:100%;display:flex;justify-content:center;align-items:center;gap:15px;padding:10px 12px;background-color:rgba(0,0,0,0.7);border-radius:10px;margin:0 auto;width:fit-content;}
.control-btn{background-color:rgba(255,255,255,0.15);border:none;color:white;width:30px;height:30px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:center;align-items:center;}
.control-btn:hover:not(:disabled){background-color:rgba(255,255,255,0.3);}
.control-btn:disabled{opacity:0.3;cursor:not-allowed;}
.close-btn{position:absolute;top:20px;right:20px;width:40px;height:40px;background-color:rgba(0,0,0,0.4);border:none;color:white;border-radius:50%;font-size:1.4rem;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all 0.2s ease;z-index:10;}
.close-btn:hover{background-color:rgba(255,0,0,0.7);transform:rotate(90deg);}
.image-info{position:absolute;top:20px;left:20px;display:flex;flex-direction:column;gap:8px;max-width:300px;z-index:10;}
.image-counter{color:white;font-size:14px;background-color:rgba(0,0,0,0.4);padding:6px 15px;border-radius:20px;z-index:10;}
.zoom-info{color:white;font-size:0.8rem;background-color:rgba(0,0,0,0.5);padding:6px 8px;border-radius:20px;text-align:center;min-width:50px;}
.control-btnt{background-color:rgba(255,255,255,0.15);border:none;color:white;padding: 6px 0;border-radius: 20px;width: 70px;font-size:0.8rem;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:center;align-items:center;}
.control-btnt:hover:not(:disabled){background-color:rgba(255,255,255,0.3);}
.poabtn{position: absolute;width: 60px;height: 60px;background: rgba(0,0,0,0.3);}
.poabtn:hover:not(:disabled){background: rgba(0,0,0,0.4);}
.leftA{left: 20px;}
.rightA{right: 20px;}
.wpx16{width: 16px;}
.wpx18 {width: 18px;}
.wpx30{width: 30px;}