/**
 * Gallery Carousel Shortcode Styles
 * 商城风格轮播图样式 - 增强版，确保鲁棒性
 */

/* 使用更高的特异性确保样式不被覆盖 */
div.gallery-carousel-container {
    margin: 20px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 确保主容器在所有情况下都可见 */
div.gallery-carousel-container * {
    box-sizing: border-box !important;
}

/* 主显示区域 - 使用更强选择器 */
div.gallery-carousel-container .gallery-carousel-main {
    position: relative !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 400px !important;
    width: 100% !important;
    height: 400px !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* 显示区域 - 确保绝对定位正确 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-display {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: block !important;
}

/* 显示项 - 关键修复，确保大图显示 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-display .gallery-display-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-display .gallery-display-item.active {
    opacity: 1 !important;
    z-index: 2 !important;
    position: relative !important;
}

/* 图片样式 - 确保图片正确显示 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-display .gallery-display-item .gallery-image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    display: block !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 视频样式 - 确保视频正确显示 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-display .gallery-display-item .gallery-video {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    border-radius: 4px !important;
    background: #000 !important;
    display: block !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    outline: none !important;
}

/* 确保视频控件可见 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-display .gallery-display-item .gallery-video::-webkit-media-controls {
    display: flex !important;
    opacity: 1 !important;
}

/* 左右切换按钮 - 增强选择器优先级 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev,
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
    font-size: 24px !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
}

div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev {
    left: 15px !important;
}

div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next {
    right: 15px !important;
}

div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev:hover,
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #0073aa !important;
    color: #0073aa !important;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3) !important;
}

div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev .gallery-nav-icon,
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next .gallery-nav-icon {
    font-weight: bold !important;
    line-height: 1 !important;
    user-select: none !important;
}

/* 缩略图容器 - 增强鲁棒性 */
div.gallery-carousel-container .gallery-carousel-thumbnails {
    position: relative !important;
    background: #fff !important;
    padding: 15px 0 !important;
    border-top: 1px solid #e0e0e0 !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track {
    position: relative !important;
    margin: 0 45px !important;
    overflow: hidden !important;
    width: auto !important;
    height: 80px !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list {
    display: flex !important;
    transition: transform 0.3s ease !important;
    gap: 8px !important;
    height: 80px !important;
    width: auto !important;
    white-space: nowrap !important;
}

/* 缩略图项 - 确保正确显示 */
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item {
    flex: 0 0 auto !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f8f9fa !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item:hover {
    border-color: #0073aa !important;
    transform: scale(1.05) !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item.active {
    border-color: #0073aa !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2) !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.2s ease !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item:hover .thumbnail-image {
    transform: scale(1.1) !important;
}

/* 视频缩略图占位符 */
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-video-placeholder {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: block !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-video-placeholder .video-play-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 12px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* 使用特色图的视频缩略图 - 增强标识 */
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-video-placeholder.uses-featured-thumbnail {
    position: relative !important;
    border: 2px solid #0073aa !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-video-placeholder.uses-featured-thumbnail .video-play-icon {
    background: rgba(0, 115, 170, 0.8) !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border: 2px solid white !important;
}

/* 特色图标识徽章 */
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-video-placeholder.uses-featured-thumbnail .featured-thumbnail-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: rgba(0, 115, 170, 0.9) !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    z-index: 3 !important;
    pointer-events: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3) !important;
}

/* 悬停效果 - 使用特色图的视频缩略图 */
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-video-placeholder.uses-featured-thumbnail:hover {
    border-color: #0056b3 !important;
    transform: scale(1.05) !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-video-placeholder.uses-featured-thumbnail:hover .video-play-icon {
    background: rgba(0, 86, 179, 0.9) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* 缩略图左右滚动按钮 */
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev,
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    width: 30px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
    font-size: 16px !important;
    color: #666 !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev {
    left: 10px !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next {
    right: 10px !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev:hover,
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next:hover {
    background: #0073aa !important;
    color: white !important;
    border-color: #0073aa !important;
}

/* 禁用状态 */
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev.disabled,
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev.disabled:hover,
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next.disabled:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #666 !important;
    border-color: #e0e0e0 !important;
}

/* 加载动画 - 增强鲁棒性 */
div.gallery-carousel-container .gallery-carousel-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 200px !important;
    color: #666 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

div.gallery-carousel-container .gallery-carousel-loading::after {
    content: '' !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #ddd !important;
    border-top: 2px solid #0073aa !important;
    border-radius: 50% !important;
    animation: gcs-spin 1s linear infinite !important;
    margin-left: 10px !important;
    display: block !important;
}

@keyframes gcs-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 错误和无项目状态 - 增强优先级 */
div.gallery-carousel-container .gcs-error,
div.gallery-carousel-container .gcs-no-items {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #666 !important;
    background: #f8f9fa !important;
    border-radius: 6px !important;
    border: 1px dashed #ddd !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

/* 响应式设计 - 增强选择器 */
@media (max-width: 768px) {
    div.gallery-carousel-container .gallery-carousel-main {
        min-height: 300px !important;
        height: 300px !important;
    }

    div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev,
    div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev {
        left: 10px !important;
    }

    div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next {
        right: 10px !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item {
        width: 60px !important;
        height: 60px !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track {
        margin: 0 35px !important;
        height: 60px !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev,
    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next {
        width: 25px !important;
        height: 50px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    div.gallery-carousel-container .gallery-carousel-main {
        min-height: 250px !important;
        height: 250px !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item {
        width: 50px !important;
        height: 50px !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track {
        height: 50px !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list {
        gap: 6px !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item .thumbnail-video-placeholder .video-play-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }
}

/* 深色模式支持 - 增强优先级 */
@media (prefers-color-scheme: dark) {
    div.gallery-carousel-container {
        background: #2d3748 !important;
        color: #e2e8f0 !important;
    }

    div.gallery-carousel-container .gallery-carousel-main {
        background: #1a202c !important;
    }

    div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev,
    div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next {
        background: rgba(45, 55, 72, 0.9) !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }

    div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev:hover,
    div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next:hover {
        background: rgba(45, 55, 72, 1) !important;
        border-color: #63b3ed !important;
        color: #63b3ed !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails {
        background: #2d3748 !important;
        border-top-color: #4a5568 !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev,
    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next {
        background: rgba(45, 55, 72, 0.9) !important;
        border-color: #4a5568 !important;
        color: #a0aec0 !important;
    }

    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev:hover,
    div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next:hover {
        background: #2b6cb1 !important;
        border-color: #2b6cb1 !important;
        color: white !important;
    }

    div.gallery-carousel-container .gcs-error,
    div.gallery-carousel-container .gcs-no-items {
        background: #2d3748 !important;
        color: #a0aec0 !important;
        border-color: #4a5568 !important;
    }
}

/* 焦点状态 - 增强优先级 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-prev:focus,
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-next:focus,
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-prev:focus,
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-next:focus,
div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item:focus {
    outline: 2px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* 选择禁用 - 增强优先级 */
div.gallery-carousel-container {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

div.gallery-carousel-container .gallery-carousel-thumbnails .gallery-thumbnails-track .gallery-thumbnails-list .gallery-thumbnail-item {
    user-select: none !important;
}

/* 防止浮动和其他布局干扰 */
div.gallery-carousel-container:before,
div.gallery-carousel-container:after {
    content: " " !important;
    display: table !important;
    clear: both !important;
}

div.gallery-carousel-container:after {
    clear: both !important;
}

/* 确保在所有布局模式下都能正常显示 */
div.gallery-carousel-container {
    float: none !important;
    clear: both !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 关键修复：确保主显示项始终可见 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-display .gallery-display-item.active {
    position: relative !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    z-index: 10 !important;
}

/* 确保非激活项隐藏 */
div.gallery-carousel-container .gallery-carousel-main .gallery-carousel-display .gallery-display-item:not(.active) {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
    pointer-events: none !important;
}