/*
 * Fancybox 4 老浏览器兜底
 *
 * fancybox.css 大量使用 CSS 变量（var()），iOS 8 及更早的 Safari 不支持，
 * 整条声明会被丢弃。这里先给一份普通值；支持 CSS 变量的浏览器会继续加载
 * fancybox.css，由它后面的 var() 声明覆盖。
 *
 * 加载顺序：fancybox-legacy.css -> fancybox.css
 */

.fancybox__container {
    color: #fff;
}

.fancybox__backdrop {
    background: rgba(24, 24, 27, 0.92);
}

.fancybox__content {
    color: #374151;
    background: #fff;
}

.fancybox__caption,
.fancybox__nav,
.fancybox__thumbs,
.carousel__dots,
.carousel__button.is-close {
    opacity: 1;
}

.carousel__slide {
    width: 60%;
}

.fancybox__slide {
    width: 100%;
}

.carousel__button {
    width: 48px;
    height: 48px;
    color: currentColor;
    background: transparent;
    border-radius: 50%;
    box-shadow: none;
}

.carousel__button svg {
    width: 50%;
    height: 50%;
    stroke-width: 1.5;
    filter: none;
}

.fancybox__thumbs .carousel__slide {
    width: 96px;
}

.fancybox__thumb {
    padding-top: 66.6667%;
    border-radius: 4px;
}

.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
    border-color: rgba(34, 213, 233, 0.96);
    border-radius: 4px;
}

.fancybox__toolbar {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.fancybox__progress {
    background: rgba(34, 213, 233, 0.96);
}

.fancybox__container :focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(1, 210, 232, 0.94);
}