/**
 * Fancybox 自定义样式
 */

/* 基本的fancybox样式 */
.custom-fancybox .fancybox__container {
    --fancybox-bg: rgba(24, 24, 27, 0.92);
}

/* 确保缩略图显示 */
.fancybox__thumbs {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 10px !important;
}

/* 缩略图容器 */
.fancybox__thumbs .carousel__viewport {
    display: flex !important;
}

.fancybox__thumbs .carousel__track {
    display: flex !important;
    gap: 8px !important;
}

/* 单个缩略图样式 */
.fancybox__thumb {
    display: inline-block !important;
    width: 60px !important;
    height: 60px !important;
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
}

.fancybox__thumb:hover {
    border-color: #fff !important;
}

.fancybox__thumb.is-selected {
    border-color: #007bff !important;
}

.fancybox__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 图片hover效果 */
.fancybox-optimized {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.fancybox-optimized:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .fancybox__thumbs {
        padding: 5px !important;
    }
    
    .fancybox__thumb {
        width: 50px !important;
        height: 50px !important;
    }
}