/*! Fancybox 4.0 CSS */
:root {
  --fancybox-bg: rgba(0, 0, 0, 0.85);
  --fancybox-color: #fff;
  --fancybox-btn-size: 44px;
  --fancybox-btn-color: #fff;
  --fancybox-btn-bg: rgba(0, 0, 0, 0.2);
}

.fancybox-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  background: var(--fancybox-bg);
}

.fancybox-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fancybox-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.fancybox-button {
  position: absolute;
  width: var(--fancybox-btn-size);
  height: var(--fancybox-btn-size);
  color: var(--fancybox-btn-color);
  background: var(--fancybox-btn-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.fancybox-button:hover {
  background: rgba(0, 0, 0, 0.5);
}

.fancybox-button--close {
  top: 10px;
  right: 10px;
}
.fancybox-button--prev {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.fancybox-button--next {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}