/* Odtwarzacz slajdow (presente design). Style strony samodzielnej sa w index.html. */
.sr { position: relative; width: 100%; }
.sr:focus { outline: none; }
.sr:focus-visible .sr-view { outline: 3px solid #7159d4; outline-offset: 3px; }
.sr:fullscreen { width: 100vw; height: 100vh; background: #000; display: grid; place-items: center; }
.sr-view { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; border-radius: 12px; cursor: pointer; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.sr:fullscreen .sr-view { width: min(100vw, 100vh * 16 / 9); border-radius: 0; }
.sr-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.sr-slide { position: absolute; inset: 0; overflow: hidden; will-change: transform, opacity; }
.sr-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sr-shp { position: absolute; will-change: transform, opacity; }
.sr-shp > img { display: block; width: 100%; height: 100%; }

.sr-bar { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 12px; color: var(--sr-ink, #fff); }
.sr:fullscreen .sr-bar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .3s; }
.sr:fullscreen:hover .sr-bar { opacity: 1; }
.sr-bar button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sr-btn, rgba(255, 255, 255, .12)); color: var(--sr-ink, #fff); font-size: 20px; line-height: 1; cursor: pointer; }
.sr-bar button:hover { background: #7159d4; color: #fff; }
.sr-count { min-width: 72px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.sr .i-play { display: none; }
.sr.is-paused .i-play { display: inline; }
.sr.is-paused .i-pause { display: none; }