/* overlay.css -- fullscreen image overlay (camera icon in trades table) */

#img-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 90; display: none; align-items: center; justify-content: center; }
#img-overlay.is-open { display: flex; }
#ov-img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 0.25rem; box-shadow: 0 8px 40px rgba(0,0,0,0.8); cursor: grab; user-select: none; transform-origin: center; display: block; }
#ov-prev, #ov-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.75rem; cursor: pointer; display: none; align-items: center; justify-content: center; }
#ov-prev.visible, #ov-next.visible { display: flex; }
#ov-prev { left: 1rem; }
#ov-next { right: 1rem; }
#ov-close { position: absolute; top: 1rem; right: 1rem; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.15); color: #fff; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.375rem; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
#ov-counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.875rem; pointer-events: none; }
.ov-zoom-controls { position: absolute; bottom: 1rem; right: 1rem; display: flex; gap: 0.375rem; }
#ov-zoom-in, #ov-zoom-out, #ov-reset { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 2rem; height: 2rem; border-radius: 0.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#ov-zoom-in, #ov-zoom-out { font-size: 1.25rem; }
#ov-reset { font-size: 0.75rem; }
.ov-btn:hover { background: rgba(255,255,255,0.15); }