/* uzytak.com/<lang>/upscale-plugin/: before / after slider. On top of photopack.css + materials-plugin/plugin.css. */
.up-compare { position: relative; max-width: 1000px; margin-top: 26px; border-radius: 16px; overflow: hidden; line-height: 0; background: #0b1533; box-shadow: 0 30px 60px -30px rgba(11, 21, 51, .55); }
.up-compare img { display: block; width: 100%; height: auto; }
.up-compare .before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.up-compare .before-wrap img { height: 100%; object-fit: fill; image-rendering: auto; }
.up-compare .before-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--pos) - 2px); width: 3px; background: #fff; }
.up-compare .lbl { position: absolute; top: 12px; background: rgba(11, 21, 51, .75); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; padding: 4px 10px; border-radius: 6px; }
.up-compare .lbl.l { left: 12px; }
.up-compare .lbl.r { right: 12px; }
.up-compare input[type=range] { position: absolute; left: 16px; right: 16px; bottom: 14px; width: calc(100% - 32px); margin: 0; accent-color: #18b8b5; }