/* REKLAME.SIG photo preview zoom. Scoped so other UI and forms remain unchanged. */
/* Consistent medium photo viewer for all preview dialogs (landscape & portrait).
   The panel never changes size when switching photos or changing zoom. */
.photozoom-modal {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: min(760px, calc(100vw - 32px)) !important;
    max-height: calc(100svh - 32px);
    min-width: 0;
}
.photozoom-stage {
    height: clamp(220px, 52svh, 480px);
    min-height: 0;
}
.photozoom-stage > .photozoom-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.photozoom-stage {
    position: relative;
    overflow: hidden;
    background: #071732;
    isolation: isolate;
}
.photozoom-image {
    display: block;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    transition: transform .14s ease-out;
    will-change: transform;
}
.photozoom-zoomed .photozoom-image { cursor: grab; touch-action: none; }
.photozoom-dragging .photozoom-image { cursor: grabbing; transition: none; }
/* Units uses the same image stage and zoom toolbar as every other preview. */
.photozoom-unit-stage { border-radius: 12px; }
.photozoom-controls {
    position: absolute;
    z-index: 8;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    color: #fff;
    background: rgba(7,23,50,.86);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.photozoom-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: white;
    cursor: pointer;
}
.photozoom-btn:not(:disabled):hover,
.photozoom-btn:not(:disabled):focus-visible { background: rgba(255,255,255,.19); }
.photozoom-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.photozoom-btn:disabled { opacity: .36; cursor: not-allowed; }
.photozoom-percentage {
    min-width: 43px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.photozoom-separator { width: 1px; height: 19px; background: rgba(255,255,255,.22); margin: 0 2px; }
@media (max-width: 520px) {
    .photozoom-modal { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
    .photozoom-stage { height: clamp(200px, 49svh, 380px); }
    .photozoom-controls { right: 8px; bottom: 8px; padding: 3px; }
    .photozoom-btn { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .photozoom-image { transition: none; } }