/* Farbaland - плаваюче відео (floating video) v1.1 */
.fbv {
  --fbv-gap: 16px;
  --fbv-bottom: 16px;
  --fbv-btn: 32px;
  --fbv-room-top: 24px; /* місце над відео під кнопку, що виступає за кут */
  position: fixed;
  left: calc(var(--fbv-gap) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--fbv-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
  width: 130px;
  opacity: 0;
  transform: translateY(12px);
  transition: width .32s ease, opacity .4s ease, transform .4s ease;
  box-sizing: border-box;
}
.fbv.fbv--visible { opacity: 1; transform: none; }
.fbv.fbv--expanded {
  width: min(340px, 70vw, calc((100vh - var(--fbv-bottom) - var(--fbv-gap) - var(--fbv-room-top)) * 9 / 16));
}
.fbv.fbv--landscape { width: 200px; }
.fbv.fbv--landscape.fbv--expanded {
  width: min(560px, calc(100vw - 2 * var(--fbv-gap)), calc((100vh - var(--fbv-bottom) - var(--fbv-gap) - var(--fbv-room-top)) * 16 / 9));
}

/* Рамка з відео (обрізає кути), кнопки лежать поза нею, щоб могли виступати за кут */
.fbv-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #1f2a30;
  box-shadow: 0 8px 28px rgba(20, 40, 55, .3);
}
.fbv--landscape .fbv-frame { aspect-ratio: 16 / 9; }

.fbv video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  margin: 0 !important;
  border: 0 !important;
  background: transparent;
}

/* Прозора кнопка поверх відео: тап = розгорнути / згорнути */
.fbv-hit {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  z-index: 1;
}
.fbv-hit:focus { outline: none; }
.fbv-hit:focus-visible { outline: 3px solid #2D9CDB; outline-offset: -3px; }

/* Значок play - тільки коли автоплей вимкнено (reduced motion / економія трафіку) */
.fbv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #2D9CDB;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.fbv-play svg { width: 16px; height: 16px; display: block; margin-left: 2px; }
.fbv--static:not(.fbv--expanded) .fbv-play { display: flex; }

/* Кругла кнопка на правому верхньому куті: хрестик (згорнуте) або "звузити" (розгорнуте) */
.fbv-btn {
  position: absolute !important;
  top: calc(var(--fbv-btn) / -2 + 4px);
  right: calc(var(--fbv-btn) / -2 + 4px);
  width: var(--fbv-btn) !important;
  height: var(--fbv-btn) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2b2f33 !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
}
.fbv-btn::after { content: ''; position: absolute; inset: -8px; } /* більша зона для пальця */
.fbv-btn svg { width: 14px; height: 14px; display: block; }
.fbv-btn:hover { background: #111518 !important; }
.fbv-btn:focus { outline: none; }
.fbv-btn:focus-visible { outline: 3px solid #2D9CDB; outline-offset: 2px; }
.fbv-btn--shrink { display: none; }
.fbv--expanded .fbv-btn--close { display: none; }
.fbv--expanded .fbv-btn--shrink { display: flex; }

@media (max-width: 640px) {
  .fbv { --fbv-gap: 12px; --fbv-bottom: 12px; width: clamp(96px, 27vw, 140px); }
  .fbv.fbv--landscape { width: clamp(150px, 42vw, 200px); }
  .fbv-frame { border-radius: 12px; }
}

@media print { .fbv { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .fbv { transition: none; transform: none; }
}