@font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url('font/YouSheBiaoTiHei-2.ttf') format('truetype');
    /* Adjust path if your font is located elsewhere */
    font-weight: normal;
    font-style: normal;
}

/* html, Combined with .page-container but had no specific html styles. Targeting .page-container directly. */
.page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    /* Optional padding for the page container */
}

.hero-section {
    background-image: url('images/animated_gif.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 370px;
    /* 这些尺寸您可能需要根据GIF实际情况微调 */
    height: 650px;
    /* 这些尺寸您可能需要根据GIF实际情况微调 */
    display: flex;
    flex-direction: column;
    /* 关键改动：将标题推到顶部，按钮推到底部 */
    justify-content: space-between;
    align-items: center;
    /* 调整上下内边距，给标题和按钮留出空间，避免贴边 */
    padding: 50px 20px;
    /* 比如上下各50px，左右各20px，您可以根据效果调整 */
    border-radius: 15px;
    text-align: center;
    position: relative;
}

.hero-section h1 {
    color: #FBA146;
    /* 保持您指定的橘黄色填充 */
    font-size: 3.5em;
    font-weight: bold;
    /* YouSheBiaoTiHei 字体本身可能较粗，如果叠加bold过粗可以调整为 normal */
    margin: 0;

    /* 添加黑色描边 */
    -webkit-text-stroke-width: 9px;
    /* 描边宽度，可以调整如 1px, 1.5px, 2px */
    -webkit-text-stroke-color: black;
    /* 描边颜色 */
    text-stroke-width: 9px;
    /* 标准属性 - 描边宽度 */
    text-stroke-color: black;
    /* 标准属性 - 描边颜色 */
    paint-order: stroke fill;
    /* 优化描边显示，确保描边在填充之下，使文字更清晰 */
}

/* 整体结果面板的背景和字体等基础设置 */
.cos-result-panel,
.generation-setup-panel {
    background-color: #FFF9E9;
    /* 根据UI稿的淡黄色背景 */
    padding: 20px;
    font-family: 'YouSheBiaoTiHei', sans-serif;
    /* 你可以替换为项目指定的字体 */
    max-width: 600px;
    /* 控制面板最大宽度，使其居中显示 */
    margin: 20px auto;
    /* 上下边距及水平居中 */
    border-radius: 12px;
    /* 轻微的圆角 */
}

/* 标题 "秒次元相机" 的样式 */
.cos-result-panel h1 {
    color: #FBA146;
    /* 橘黄色填充 */
    font-size: 2.8em;
    /* 根据UI稿调整字体大小，原3.5em可能过大 */
    font-weight: bold;
    text-align: center;
    /* 标题居中 */
    margin-bottom: 30px;
    /* 标题和图片区域的间距 */
    /* 黑色描边 - 根据UI稿可能需要调整粗细或使用更复杂的阴影 */
    -webkit-text-stroke-width: 1.5px;
    /* 调整描边宽度 */
    -webkit-text-stroke-color: #4A4A4A;
    /* 深灰色描边可能比纯黑更柔和 */
    text-stroke-width: 1.5px;
    text-stroke-color: #4A4A4A;
    paint-order: stroke fill;
    /* 确保描边在填充之下 */
    font-family: 'YouSheBiaoTiHei', sans-serif;
}

button {
    background-color: #FDB813;
    color: #3A1D1D;
    /* 如果按钮还小，可以适当增加 padding，比如 */
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    /* 如果文字还小，可以适当增加 font-size，比如 */
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2);
    margin: 0;
    font-family: 'YouSheBiaoTiHei', sans-serif;
}

body {
    font-family: 'YouSheBiaoTiHei';
    background-color: #F4E5A9;
    /* Dark background */
    color: #333333;
    /* Light text */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Footer styles */
.customer-service-footer {
    width: 100%;
    text-align: center;
    padding: 15px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    margin-top: auto;
    /* Push footer to the bottom */
}

.customer-service-footer a {
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease;
    color: #888;
    /* Default link color from user's CSS */
}

.customer-service-footer a:hover {
    color: #6a0dad;
}

/* Customer Service Modal styles - reusing existing modal classes where possible */
#customer-service-modal .modal-content {
    max-width: 450px;
    /* Increased size for the modal */
    padding: 20px;
    background-color: #f0f0f0;
    /* Light gray background */
}

#customer-service-modal .modal-content h2 {
    margin-top: 0;
    margin-bottom: 10px;
    /* Adjusted margin for better spacing */
    color: #333;
    text-align: left;
    /* Left-align the title */
}

#customer-service-modal .wechat-qr-code {
    max-width: 250px;
    /* Increased size for the QR code image */
    height: auto;
    margin: 15px auto;
    display: block;
    /* Center the image */
    border: 1px solid #eee;
    border-radius: 4px;
}

#customer-service-modal p {
    margin: 5px 0;
    font-size: 0.95em;
    color: #555;
    line-height: 1.4;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Styles for cos_journey.html - template selection and image upload */
.template-selection {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.template-selection .tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 5px;
}

.template-selection .tabs .tab-button {
    padding: 8px 15px;
    /* background-color: #FCD989; */
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    /* For wrapping */
    cursor: pointer;
    font-size: 0.9em;
    color: #333;
    /* Ensure text color contrasts with default button state */
}

.template-selection .tabs .tab-button.active {
    background-color: #FCD989;
    /* color: white; */
    border-color: #6a0dad;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 280px;
    /* Adjusted slightly */
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 5px;
    min-height: 150px;
    /* Ensure some height, even if one row of 150px items */
}

.template-item {
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
    background-color: transparent;
}

.template-item:hover {
    border-color: #ccc;
}

.template-item.active {
    border-color: #6a0dad;
    box-shadow: 0 0 5px rgba(106, 13, 173, 0.5);
}

.user-image-upload {
    margin-bottom: 20px;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 5px;
}

#uploaded-image-preview {
    display: none;
    /* Initially hidden, JS controls this */
    width: 150px;
    /* Fixed width for the thumbnail */
    height: 150px;
    /* Fixed height for the thumbnail */
    object-fit: cover;
    /* Cover the area, might crop */
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 10px auto 0 auto;
    /* Centered with margin-top */
}

.drop-area {
    border: 2px dashed #ccc;
    padding: 30px 20px;
    /* Increased padding for better click/drop area */
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    position: relative;
    /* For the absolute positioned file input */
    background-color: #f9f9f9;
    border-radius: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.drop-area.highlight {
    /* Style for when dragging over */
    background-color: #e9e9e9;
    border-color: #6a0dad;
}

.drop-area p {
    margin: 0;
    color: #555;
}

.drop-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-tips {
    font-size: 0.85em;
    /* Slightly smaller */
    color: #666;
    margin-top: 10px;
    text-align: center;
}

#generate-btn,
#download-btn {
    margin-top: auto;
    /* Pushes button to the bottom of the left panel */
    width: 100%;
    padding: 15px;
    /* Larger button */
    font-size: 1.1em;
    /* This will override the generic button's 2em if it applies */
}

/* Styles for cos_result.html - image display */
.image-display-container {
    display: flex;
    /* 两个图片项之间的间距 */
    gap: 20px;
    /* 图片区域和按钮的间距 */
    margin-top: 15px;
    /* This was in your original, maybe intended for right-panel context */
    /* margin-bottom: 30px; /* This was from my suggestion, re-eval if needed */
    flex-grow: 1;
    /* Allow it to take available space if part of a flex column */
    align-items: center;
    /* Align items (cards) vertically to their center */
    justify-content: center;
    /* Center the group of items if container is wider */
}

/* 单个图片项（卡片）的通用样式 */
.image-display-item {
    background-color: #FFFFFF;
    /* 卡片背景白色 */
    padding: 10px;
    /* 卡片内边距 */
    border-radius: 8px;
    /* 卡片圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 卡片阴影 */
    display: flex;
    /* 用于居中内部图片 */
    justify-content: center;
    align-items: center;
    /* 移除固定的min-height，让内容决定高度，由align-items:center对齐 */
    /* flex: 1; /* 移除，让图片自身尺寸影响其容器宽度 */
}

/* 图片项内部图片的通用样式 */
.image-display-item img {
    display: block;
    /* 确保图片是块级元素，便于控制 */
    object-fit: contain;
    /* 图片缩放方式，保持宽高比并完整显示 */
    border-radius: 4px;
    /* 图片自身的轻微圆角 */
    /* max-height 根据需要设置，但通常宽度控制更直接 */
}

/* 左侧原始图片 (较小) */
#original-image-display {
    width: 160px;
    /* 根据UI稿调整，明显小于右图 */
    height: auto;
    /* 高度自动，保持宽高比 */
    /* max-height: 240px; /* 可以设置一个最大高度限制 */
}

/* 右侧融合结果图片 (较大) */
#merged-image-display {
    width: 260px;
    /* 根据UI稿调整，比左图大 */
    height: auto;
    /* 高度自动，保持宽高比 */
    /* max-height: 390px; /* 可以设置一个最大高度限制 */
}

.image-display-container .image-display-item:last-child {
    /* For QR code positioning */
    position: relative;
}

/* Kept the more specific/functional .qrcode-overlay rules */
.qrcode-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background-color: transparent;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.qrcode-overlay img {
    display: block;
    border: none !important;
    width: 80px !important;
    height: 80px !important;
}

/* --- 修改现有的 .loading-overlay 样式，使其作为全屏背景遮罩 --- */
.loading-overlay {
    display: none;
    /* JS 通过改为 'flex' 来显示 */
    position: fixed;
    /* 固定定位，覆盖整个视口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* 深色半透明背景，与支付弹窗的 .modal 背景一致 */
    z-index: 1000;
    /* 确保在顶层，与 .modal 的 z-index 一致或按需调整 */
    justify-content: center;
    /* 水平居中内部的 .loading-panel */
    align-items: center;
    /* 垂直居中内部的 .loading-panel */
    /* 如果JS是用 display:block 来显示，这里要改成 display:flex !important 或者确保JS用flex */
}

/* --- 新增 .loading-panel 的样式，使其看起来像微信支付面板 --- */
.loading-panel {
    background-color: #fefefe;
    /* 面板背景色，同 .modal-content */
    padding: 25px 30px;
    /* 内边距，同 .modal-content */
    border-radius: 8px;
    /* 圆角，同 .modal-content */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* 阴影，同 .modal-content */
    text-align: center;
    width: 90%;
    /* 宽度，同 .modal-content */
    max-width: 400px;
    /* 最大宽度，同 .modal-content */
    display: flex;
    /* 使用flex布局来排列spinner和文字 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中spinner和文字 */
}

/* --- 调整 spinner 在新面板中的样式 --- */
.loading-panel .spinner {
    /* 选择器更具体 */
    /* 原有的 spinner 样式 (border, border-left-color, border-radius, width, height, animation) 保持不变 */
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-left-color: #F4E5A9;
    /* 你可以使用主题色 */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
    /* 在spinner和文字之间增加一些间距 */
}

/* --- 调整提示文字在新面板中的样式 --- */
.loading-panel p {
    /* 选择器更具体 */
    margin-top: 0;
    /* 由于spinner有了margin-bottom，这里可以设为0或按需调整 */
    font-size: 1.1em;
    color: #333;
    font-family: 'YouSheBiaoTiHei', sans-serif;
    /* 保持字体一致性 */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error-message {
    color: #D8000C;
    background-color: #FFD2D2;
    border: 1px solid #D8000C;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    text-align: center;
    display: none;
}

.error-message p {
    margin: 0;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 25px 30px;
    border: none;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-content h1 {
    color: #FF0000;
    /* 醒目的红色 */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    /* 增加阴影效果 */
    margin-bottom: 0px;
    /* 进一步减小与h2的间隔 */
}

.modal-content h2 {
    margin-bottom: 5px;
    /* 进一步减小与二维码的间隔 */
}

.payment-tips {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Payment Modal Specific Styles */
.modal-content h1 {
    color: #FF0000; /* 醒目的红色 */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* 增加阴影效果 */
    margin-bottom: 15px; /* 标题和支付选项之间的间距 */
}

.payment-options {
    display: flex;
    justify-content: center;
    gap: 15px; /* 按钮之间的间距 */
    margin-bottom: 25px; /* 支付选项和支付内容之间的间距 */
}

.payment-option-btn {
    padding: 12px 25px;
    font-size: 1.1em;
    border-radius: 30px;
    background-color: #FCD989; /* 默认背景色 */
    color: #3A1D1D;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.payment-option-btn.active {
    background-color: #FDB813; /* 选中状态的背景色 */
    border-color: #E08D00; /* 选中状态的边框色 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.payment-option-btn:hover {
    background-color: #FDB813;
    transform: translateY(-1px);
}

.payment-section {
    display: none; /* JS controls visibility */
    text-align: center;
    margin-bottom: 20px;
}

.payment-section h2 {
    color: #3A1D1D;
    font-size: 1.8em;
    margin-bottom: 15px;
}

#qrcode-placeholder {
    width: 220px; /* 增加尺寸以确保二维码完整显示 */
    height: 220px;
    margin: 0 auto 15px auto; /* Center and add margin below */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: white;
    overflow: hidden; /* Ensure QR code fits */
    padding: 10px; /* 增加内边距，确保二维码有呼吸空间 */
}

#qrcode-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.payment-tips {
    font-size: 0.9em;
    color: #666;
    margin-top: 20px; /* 增加与二维码的间距，避免遮挡 */
    margin-bottom: 15px;
}

#paid-btn {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    /* Overrides generic button if applicable */
    margin-top: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* .main-container and .left-panel/.right-panel rules removed as they are unused */

    .templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        max-height: 200px;
    }

    .template-item {
        height: 120px;
    }

    #uploaded-image-preview {
        width: 120px;
        height: 120px;
    }

    .modal-content {
        width: 90%;
        /* This is a general modal content rule, still useful */
    }

    /* Responsive adjustments for cos_result.html images */
    .image-display-container {
        /* 移除 flex-direction: column; 以保持左右布局 */
        align-items: center;
        /* Center items when stacked */
    }

    #original-image-display {
        width: 120px;
        /* Smaller on mobile */
        margin-bottom: 15px;
        /* Space when stacked */
    }

    #merged-image-display {
        width: 200px;
        /* Smaller on mobile */
    }

    .cos-result-panel h1 {
        font-size: 2em;
        /* Adjust title size for mobile */
    }

    #download-btn {
        font-size: 1em;
        /* Adjust button font for mobile */
        padding: 10px 15px;
    }
}