/* ====================================
   Bunny Lightbox Video Player
   Brand-customized for Chytrá krajina
   Accent: #00bff3 (hydro blue)
   ==================================== */

.bunny-lightbox {
  z-index: 2000;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.bunny-lightbox__calc {
  transition: transform 0.3s cubic-bezier(0.625, 0.05, 0, 1),
    opacity 0.3s linear, visibility 0.3s linear;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9) rotate(0.001deg);
}

[data-bunny-lightbox-status="active"] .bunny-lightbox__calc {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0.001deg);
}

.bunny-lightbox__dark {
  opacity: 0.95;
  pointer-events: auto;
  background-color: oklch(0.08 0.008 260);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.bunny-lightbox__close {
  z-index: 2010;
  pointer-events: auto;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  display: flex;
  position: absolute;
  top: 2.5vw;
  right: 2.5vw;
  transition: color 0.2s ease;
}

.bunny-lightbox__close:hover { color: #00bff3; }

.bunny-lightbox__close-bar {
  background-color: currentColor;
  width: 1em;
  height: 0.125em;
  position: absolute;
  transform: rotate(-45deg);
}

.bunny-lightbox__close-bar.is--duplicate { transform: rotate(45deg); }

[data-bunny-lightbox-status] .bunny-lightbox__dark,
[data-bunny-lightbox-status] .bunny-lightbox__close {
  transition: opacity 0.3s linear, visibility 0.3s linear;
  opacity: 0;
  visibility: hidden;
}

[data-bunny-lightbox-status="active"] .bunny-lightbox__dark,
[data-bunny-lightbox-status="active"] .bunny-lightbox__close {
  opacity: 1;
  visibility: visible;
}

/* ---- Player ---- */
.bunny-lightbox-player {
  pointer-events: none;
  color: #fff;
  isolation: isolate;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(#fff, #000);
  mask-image: radial-gradient(#fff, #000);
}

.bunny-lightbox-player__before { padding-top: 56.25%; }

[data-bunny-lightbox-init]
  :is(
    .bunny-lightbox-player__placeholder,
    .bunny-lightbox-player__dark,
    .bunny-lightbox-player__playpause,
    .bunny-lightbox-player__loading
  ) {
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

.bunny-lightbox-player__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__placeholder,
[data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__placeholder,
[data-bunny-lightbox-init][data-player-activated="true"][data-player-status="ready"] .bunny-lightbox-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

.bunny-lightbox-player__dark {
  opacity: 0.1;
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
}

[data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__dark,
[data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__dark {
  opacity: 0.3;
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__dark {
  opacity: 0;
}

.bunny-lightbox-player__video {
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  padding-right: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* ---- Big play/pause button ---- */
.bunny-lightbox-player__playpause {
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__playpause,
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__playpause {
  opacity: 0;
}

[data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__playpause {
  opacity: 1;
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__play-svg,
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__play-svg {
  display: none;
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__pause-svg,
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__pause-svg {
  display: block;
}

.bunny-lightbox-player__big-btn {
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
  cursor: pointer;
  background-color: rgba(100, 100, 100, 0.2);
  border: 1px solid rgba(0, 191, 243, 0.25);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  padding: 2em;
  display: flex;
  position: relative;
  box-shadow: 0 0 40px rgba(0, 191, 243, 0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bunny-lightbox-player__big-btn:hover {
  border-color: rgba(0, 191, 243, 0.5);
  box-shadow: 0 0 60px rgba(0, 191, 243, 0.25);
}

/* ---- Loading spinner ---- */
.bunny-lightbox-player__loading {
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.33);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__loading {
  opacity: 1;
  visibility: visible;
}

.bunny-lightbox-player__loading-svg { width: 6em; color: #00bff3; }

/* ---- Interface bar ---- */
.bunny-lightbox-player__interface {
  flex-flow: column;
  justify-content: flex-end;
  align-items: baseline;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__interface,
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__interface {
  opacity: 0;
  transform: translateY(1em) rotate(0.001deg);
}

[data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__interface,
[data-bunny-lightbox-init][data-player-status="loading"][data-player-hover="active"] .bunny-lightbox-player__interface {
  opacity: 1;
  transform: translateY(0em) rotate(0.001deg);
}

.bunny-lightbox-player__interface-fade {
  opacity: 0.5;
  background-image: linear-gradient(transparent, oklch(0.08 0.008 260));
  width: 100%;
  height: 25%;
  position: absolute;
  bottom: 0;
}

.bunny-lightbox-player__interface-bottom {
  gap: 1em;
  pointer-events: auto;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: min(2em, 4vw);
  display: flex;
  position: relative;
}

/* ---- Timeline ---- */
.bunny-lightbox-player__timeline {
  cursor: pointer;
  flex: 1;
  align-items: center;
  height: 1em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: flex;
  position: relative;
}

.bunny-lightbox-player__timeline-bar {
  border-radius: 1em;
  width: 100%;
  height: 30%;
  position: absolute;
  overflow: hidden;
}

.bunny-lightbox-player__timeline-bg {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
}

.bunny-lightbox-player__timeline-buffered {
  opacity: 0.2;
  pointer-events: none;
  background-color: #fff;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
}

.bunny-lightbox-player__timeline-progress {
  pointer-events: none;
  background-color: #00bff3;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
}

.bunny-lightbox-player__timeline-handle {
  transition: transform 0.15s ease-in-out;
  pointer-events: none;
  background-color: #00bff3;
  border-radius: 1em;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
}

[data-bunny-lightbox-init][data-timeline-drag="true"] .bunny-lightbox-player__timeline-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Controls ---- */
.bunny-lightbox-player__toggle-playpause,
.bunny-lightbox-player__toggle-mute,
.bunny-lightbox-player__toggle-fullscreen {
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
  transition: color 0.2s ease;
}

.bunny-lightbox-player__toggle-playpause:hover,
.bunny-lightbox-player__toggle-mute:hover,
.bunny-lightbox-player__toggle-fullscreen:hover {
  color: #00bff3;
}

.bunny-lightbox-player__interface-btns {
  gap: 0.5em;
  align-items: center;
  display: flex;
}

/* ---- Time display ---- */
.bunny-lightbox-player__time {
  gap: 0.125em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 5.75em;
  display: flex;
}

.bunny-lightbox-player__text {
  white-space: nowrap;
  margin-bottom: 0;
  font-size: 0.9375em;
  line-height: 1;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

.bunny-lightbox-player__text.is--transparent { opacity: 0.5; }

/* ---- SVG icon visibility ---- */
.bunny-lightbox-player__pause-svg { display: none; }

[data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-mute-svg { display: block; }
[data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-up-svg { display: none; }

.bunny-lightbox-player__volume-mute-svg { display: none; }
.bunny-lightbox-player__volume-up-svg { display: block; }

.bunny-lightbox-player__fullscreen-shrink-svg { display: none; }
.bunny-lightbox-player__fullscreen-scale-svg { display: block; }

[data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-shrink-svg { display: block; }
[data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-scale-svg { display: none; }