/* Shipping Details 容器样式 */
.html-content-wrapper {
    width: 100vw; /* 页面宽度 */
    height: auto; /* 高度根据内容调整 */
    margin: 0; /* 无外边距 */
    padding: 0; /* 无内边距 */
    background: none; /* 移除背景色 */
    border: none; /* 无边框 */
    box-shadow: none; /* 无阴影 */
    position: relative; /* 保持布局 */
}

/* iframe 容器样式 */
.iframe-container {
    width: 100%; /* 跟随外部容器宽度 */
    height: 600px; /* 高度固定 */
    border: none; /* 无边框 */
    background: none; /* 无背景色 */
}

/* 确保父容器与其他区域一致 */
#htmlContent {
    width: 100vw; /* 页面宽度 */
    max-width: 100%; /* 确保没有宽度限制 */
    overflow: visible; /* 确保内容可见 */
    margin: 0; /* 无外边距 */
    padding: 0; /* 无内边距 */
}

/* Shipping Details 内部容器样式 */
#htmlContent .order-details-container {
    width: 100%;
    background: none; /* 透明背景 */
    padding: 0;
    margin: 0;
    box-shadow: none; /* 无阴影 */
}

/* Shipping Details 标题样式 */
#htmlContent .section-title {
    width: 100%;
    position: relative;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    margin: 0;
    padding: 15px 20px;
}

/* iframe内部样式（通过JavaScript动态注入） */
.iframe-styles {
    /* 这些样式将通过JavaScript注入到iframe中 */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #343a40;

    /* 基础样式 */
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}


/* 打印样式优化 */
@media print {
    body {
        background: none;
        color: #000;
    }

    .content {
        padding: 0;
    }

    .dynamic-section {
        box-shadow: none;
        margin: 10px 0;
        page-break-inside: avoid;
    }

    .section-title:after {
        display: none;
    }

    .timeline-table {
        page-break-inside: auto;
    }

    .timeline-table tr {
        page-break-inside: avoid;
    }

    .iframe-container {
        height: auto;
        overflow: visible;
    }

    .loading-overlay,
    .error-container {
        display: none !important;
    }
}

/* 动态内容展示样式 */
.dynamic-section {
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    width: 100%;
    display: none;
}

/* 动态区域内容显示时 */
.dynamic-section.visible {
    display: block;
}

/* 图片展示区域样式 */
#imageDisplay {
    margin: 20px auto; /* 上下外边距，保持与其他区域一致 */
    background: rgba(255, 255, 255, 0.95); /* 背景颜色设置为白色，并带有透明度 */
    color: #333; /* 文本颜色 */
    border-radius: 8px; /* 圆角样式 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    width: 100%; /* 宽度铺满页面 */
    max-width: 100%; /* 确保不会超过页面宽度 */
    display: none; /* 默认不显示 */
}

/* 图片展示区域内容显示时 */
#imageDisplay.visible {
    display: block; /* 显示该区域 */
}


/* URL展示区域的容器样式 */
#urlDisplay {
    margin: 20px auto; /* 上下居中显示 */
    padding: 20px; /* 内边距 */
    max-width: 900px; /* 最大宽度 */
    width: 100%; /* 自适应宽度 */
    background: rgba(250, 250, 250, 0.95); /* 浅灰色背景，带透明效果 */
    border: 1px solid #ddd; /* 灰色边框 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    text-align: left; /* 左对齐文本 */
    display: none; /* 默认隐藏 */
    font-family: Arial, sans-serif; /* 字体设置 */
    color: #333; /* 主文本颜色 */
}

/* 固定文本的样式 */
#urlDisplay #urlText {
    font-size: 16px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    margin-bottom: 10px; /* 与 URL 的间距 */
    color: #444; /* 深灰色字体 */
}

/* URL 链接文字的样式 */
#urlDisplay #urlLink {
    font-size: 16px; /* 字体大小 */
    color: #007bff; /* 蓝色链接文字 */
    font-weight: normal; /* 正常权重 */
    word-break: break-word; /* 如果 URL 太长，允许换行 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
}

#urlDisplay #urlLink:hover {
    color: #0056b3; /* 鼠标悬停时深蓝色 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}