/**
 * X-Shortcode 样式覆盖
 * 简化版，仅保留必要样式
 */

/* 全局重置 */
.x-tabs-container *,
.x-accordion *,
.x-notice *,
.x-quote *,
.x-button {
    box-sizing: border-box !important;
}

/* 标签页覆盖样式 */
.x-tabs-container {
    margin: 20px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.x-tabs-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #ddd !important;
}

.x-tabs-nav li.x-tab-title {
    display: inline-block !important;
    padding: 10px 15px !important;
    margin: 0 2px -1px 0 !important;
    background-color: #f1f1f1 !important;
    border-radius: 4px 4px 0 0 !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    cursor: pointer !important;
}

.x-tabs-nav li.x-tab-title.active {
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-bottom-color: #fff !important;
}

.x-tabs-content {
    padding: 15px !important;
    border: 1px solid #ddd !important;
    border-top: none !important;
    background-color: #fff !important;
}

.x-tab-content {
    display: none !important;
}

.x-tab-content.active {
    display: block !important;
}

/* 折叠面板样式 - 修复版本 */
.x-accordion {
    margin: 20px 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    overflow: visible !important; /* 更改为visible，防止内容被截断 */
}

.x-accordion-item {
    border-bottom: 1px solid #ddd !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important; /* 确保内容不被截断 */
}

.x-accordion-item:last-child {
    border-bottom: none !important;
}

.x-accordion-header {
    display: block !important;
    padding: 12px 15px !important;
    background-color: #f1f1f1 !important;
    cursor: pointer !important;
    position: relative !important;
}

.x-accordion-header::after {
    content: '+' !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

.x-accordion-header.active::after {
    content: '-' !important;
}

/* 主要修复：折叠面板内容的样式 */
.x-accordion-content {
    overflow: hidden !important; /* 只在过渡时隐藏溢出 */
    height: 0;
    opacity: 0;
    will-change: height, opacity;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    margin: 0 !important;
    padding: 0 15px !important; /* 保持侧边距 */
    transition: height 350ms ease-out, opacity 350ms ease-out, padding 350ms ease-out !important;
}

/* 激活状态的样式 */
.x-accordion-header.active + .x-accordion-content {
    height: auto !important; /* 关键修复：允许内容自然高度 */
    opacity: 1 !important;
    overflow: visible !important; /* 激活后允许内容完全显示 */
    padding: 15px !important;
    transition: height 350ms ease-out, opacity 350ms ease-out, padding 350ms ease-out !important;
}

/* 确保内容在展开状态下完全可见 */
.x-accordion-content.expanded {
    height: auto !important;
    overflow: visible !important;
}

/* 移除可能导致内容截断的max-height限制 */
.x-accordion-content {
    max-height: none !important; /* 移除最大高度限制 */
}

/* 提高内容可见性 */
.x-accordion-content > * {
    opacity: inherit; /* 确保子元素继承父元素的不透明度 */
}

/* 移动设备优化 */
@media (max-width: 768px) {
    .x-accordion-header {
        padding: 15px !important;
    }
    
    .x-accordion-content {
        padding: 0 15px !important;
    }
    
    .x-accordion-header.active + .x-accordion-content {
        padding: 15px !important;
    }
}

/* 硬件加速所有转换和不透明度动画 */
.x-accordion,
.x-accordion-item,
.x-accordion-header,
.x-accordion-content,
.x-tabs-container,
.x-tabs-nav,
.x-tab-title,
.x-tab-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 下载框提取码样式 */
.x-download-box-code {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    color: #555;
}

.x-download-box-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #3498db;
    padding: 0;
    transition: all 0.2s ease;
}

.x-download-box-copy-btn:hover {
    color: #2980b9;
    transform: scale(1.1);
}

.x-download-box-copy-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* 移动设备下载框样式 */
@media (max-width: 768px) {
    .x-download-box-links {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .x-download-box-button {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .x-download-box-code {
        margin-left: 0;
        margin-top: 5px;
        width: 100%;
        justify-content: space-between;
    }
}

/**
 * 额外修复：针对折叠面板内容显示不完整的问题
 */

/* 确保所有图片和多媒体内容在折叠面板中正确显示 */
.x-accordion-content img,
.x-accordion-content video,
.x-accordion-content iframe,
.x-accordion-content embed,
.x-accordion-content object {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 10px 0 !important;
}

/* 修复在某些WordPress主题中可能存在的内容裁剪问题 */
.x-accordion-content p,
.x-accordion-content div,
.x-accordion-content ul,
.x-accordion-content ol,
.x-accordion-content blockquote {
    overflow: visible !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}

/* 确保展开状态下内容完全可见 */
.x-accordion-item.expanded .x-accordion-content,
.x-accordion-header.active + .x-accordion-content.expanded {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* 确保折叠面板在各种嵌套情况下正常工作 */
.x-shortcode-wrapper .x-accordion,
.entry-content .x-accordion,
.post-content .x-accordion,
.content-area .x-accordion,
.content .x-accordion {
    overflow: visible !important;
}

/* 修复常见主题中的兼容性问题 */
body.theme-twentytwenty .x-accordion-content,
body.theme-twentytwentyone .x-accordion-content,
body.theme-twentytwentytwo .x-accordion-content,
body.theme-astra .x-accordion-content,
body.theme-generatepress .x-accordion-content,
body.theme-oceanwp .x-accordion-content,
body.theme-divi .x-accordion-content {
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    max-height: none !important;
}

/* 确保折叠面板内的WordPress block元素正确显示 */
.x-accordion-content .wp-block-image,
.x-accordion-content .wp-block-gallery,
.x-accordion-content .wp-block-media-text,
.x-accordion-content .wp-block-cover {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
}

/* 添加专门针对问题现象的修复 */
.x-accordion-content {
    display: block !important;
    overflow-y: visible !important;
    max-height: none !important;
}