/* Pływające przyciski: Kup bilet (główny) / Kamery online (dodatkowy) – desktop */
.floating-actions {
  --fa-w: 200px;
  --fa-compact: 58px;
  position: fixed;
  right: var(--edge, 24px);
  bottom: var(--edge, 24px);
  z-index: 99;
  display: none;
  flex-direction: column-reverse; /* bilet na dole, kamery nad nim */
  gap: 12px;
  align-items: flex-end;
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  transition: opacity .3s ease, transform .3s ease;
}

@media (min-width: 1280px) {
  .floating-actions { display: flex; }
}

.floating-actions__btn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--fa-w);
  height: var(--fa-compact);
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  transition: width .45s cubic-bezier(.22, 1, .36, 1), transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.floating-actions__btn:hover,
.floating-actions__btn:focus-visible { text-decoration: none; transform: translateY(-3px); }
.floating-actions__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #1d2410; }

/* --- Kup bilet: główny, większy, zielony --- */
.floating-actions__btn--ticket {
  padding: 0 14px 0 9px;
  border-radius: 29px;
  color: #17200a;
  background: linear-gradient(135deg, #c3e11a 0%, #a1c201 55%, #8bb001 100%);
  box-shadow: 0 14px 28px rgba(60, 80, 0, .38), 0 3px 8px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.floating-actions__btn--ticket:hover,
.floating-actions__btn--ticket:focus-visible {
  color: #17200a;
  background: linear-gradient(135deg, #d0ee2a 0%, #b1d305 55%, #9cc202 100%);
  box-shadow: 0 18px 34px rgba(60, 80, 0, .45), 0 4px 10px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.floating-actions__btn--ticket .floating-actions__icon { width: 40px; height: 40px; padding: 9px; background: #fff; color: #5f7a00; }
.floating-actions__btn--ticket .floating-actions__title { font-size: 17px; }
.floating-actions__btn--ticket .floating-actions__sub { font-size: 12px; }

/* delikatny puls zachęcający do kliknięcia */
.floating-actions__btn--ticket::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(161, 194, 1, .55);
  animation: fa-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes fa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(161, 194, 1, .55); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(161, 194, 1, 0); }
}

/* --- Kamery online: dodatkowy, ciemny, spokojniejszy --- */
.floating-actions__btn--camera {
  padding: 0 14px 0 9px;
  border-radius: 29px;
  color: #fff;
  background: rgba(23, 32, 10, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.floating-actions__btn--camera:hover,
.floating-actions__btn--camera:focus-visible {
  color: #fff;
  background: rgba(23, 32, 10, .97);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.floating-actions__btn--camera .floating-actions__icon { width: 40px; height: 40px; padding: 9px; background: rgba(255, 255, 255, .14); color: #fff; }
.floating-actions__btn--camera .floating-actions__title { font-size: 17px; }
.floating-actions__btn--camera .floating-actions__sub { font-size: 11px; }

/* czerwona kropka "na żywo" */
.floating-actions__btn--camera::before {
  content: '';
  position: absolute;
  left: 36px;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 2px rgba(23, 32, 10, .95);
  animation: fa-live 1.6s ease-in-out infinite;
}
@keyframes fa-live { 50% { opacity: .35; } }

/* --- wspólne --- */
.floating-actions__icon {
  flex: none;
  box-sizing: border-box;
  border-radius: 50%;
  transition: width .3s ease, height .3s ease;
}

.floating-actions__text {
  flex: 1;
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-transform: uppercase;
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.floating-actions__title { font-weight: 800; letter-spacing: .03em; }
.floating-actions__sub { font-weight: 600; letter-spacing: .09em; opacity: .8; }

/* Po przewinięciu: zwarte kółka z samą ikoną, równe */
.floating-actions.is-compact .floating-actions__btn { width: var(--fa-compact); }
.floating-actions.is-compact .floating-actions__text { opacity: 0; transform: translateX(10px); }
/* przyciski pływające zostają widoczne także przy stopce */

/* przyciski nie zasłaniają sterowania sliderem (tylko gdy ekran jest za wąski, by zmieścić je obok siebie) */

.floating-actions .floating-actions__title.is-long { font-size: 13px; letter-spacing: 0; }

/* ===== Przycisk "na górę" (lewy dolny róg) ===== */
.to-top {
  position: fixed;
  left: var(--edge, 24px);
  bottom: var(--edge, 24px);
  z-index: 99;
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #17311e;
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .14);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s, background .2s ease, box-shadow .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top svg { width: 22px; height: 22px; transition: transform .25s ease; }
.to-top:hover, .to-top:focus-visible { background: #63a322; box-shadow: 0 14px 28px rgba(0, 0, 0, .34); }
.to-top:hover svg, .to-top:focus-visible svg { transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #17311e; }
/* tablet/telefon: nad stałym dolnym paskiem (64 px) */
@media (max-width: 1279.98px) { .to-top { bottom: calc(var(--edge, 20px) + 64px); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top svg, .floating-actions { transition: none; } }