body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
    overflow: hidden;
}

.container {
    background-image: url('templates/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.02);
    padding: 0;
    border-radius: 0;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 0 10px;
}

.header-container h1 {
    margin: 0;
    flex-grow: 1;
    text-align: center;
    color: #333;
    font-size: 1.2em;
    font-weight: normal;
}

/* 模板选择 */
.templates {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
    overflow: hidden;
}

/* 轮播指示器 */
.carousel-dots {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 100;
    transition: all 0.3s ease;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 2px;
}

.carousel-dot.active {
    background-color: #FFE4B5;
    transform: scale(1.5);
}

.template-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    display: none;
}

.template-thumb.current {
    display: block;
}

.template-thumb.active {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* Arrow Styles */
.nav-arrow {
    font-size: 2em; /* Make arrows larger */
    color: #0c70c8; /* Arrow color - matching start-over-btn */
    cursor: pointer;
    padding: 0 10px; /* Add some horizontal padding */
    user-select: none; /* Prevent text selection */
    transition: opacity 0.3s ease;
}

.nav-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Specific arrow positioning if needed, flex might handle it */
/* #prev-arrow { } */
/* #next-arrow { } */

/* section styles removed/commented as steps are now controlled by wizard logic */
/*
section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

section:last-child {
    border-bottom: none;
}
*/

/* Wizard Styles */
.wizard-step {
    display: none; /* Hide all steps by default */
    padding-bottom: 20px; /* Add some padding at the bottom */
    margin-bottom: 20px; /* Add margin below step content */
    border-bottom: 1px solid #eee; /* Optional: keep a separator */
}

.wizard-step.active-step {
    display: block; /* Show the active step */
}

/* 模板选择 */
.templates {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 增加图片间距 */
    padding: 0 20px; /* 添加两侧内边距 */
    height: 100%; /* 利用全部可用高度 */
}

/* 模板选择 */
.template-thumb {
    position: relative;
    height: 80vh;
    width: auto;
    aspect-ratio: 3/4;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 移除旧的 ::before 选中标记 */
/* .template-thumb::before { ... } */
/* .template-thumb.active::before { ... } */

/* 新的选择指示器样式 */
.select-indicator {
    position: absolute;
    top: 15px; /* 调整位置 */
    right: 15px; /* 调整位置 */
    width: 28px; /* 调整大小 */
    height: 28px; /* 调整大小 */
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%; /* 圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* 图标大小 */
    color: transparent; /* 默认不显示勾 */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 5; /* 确保在图片上 */
    opacity: 0; /* 默认隐藏 */
    pointer-events: none; /* 默认不可点击 */
}

/* 当前显示的模板上的指示器 */
.template-item.current .select-indicator {
    opacity: 1; /* 显示指示器 */
    pointer-events: auto; /* 允许点击 */
}

/* 选中状态的指示器 */
.template-item.current.selected .select-indicator {
    background-color: #007bff; /* 选中时变蓝 */
    border-color: #0056b3;
    color: white; /* 显示白色勾 */
}

/* 选中状态的指示器内容 (使用伪元素显示勾) */
.template-item.current.selected .select-indicator::before {
    content: '✓'; /* 显示勾号 */
}


/* 调整模板容器和缩略图样式以适应新结构 */
.template-item {
    position: relative; /* 为指示器提供定位基准 */
    /* 其他需要的样式，如边距等 */
}

.template-thumb {
    /* 移除 position: relative; 因为父元素有了 */
    /* 移除 border 相关的样式，如果选中效果放在 item 上 */
    border: none; /* 移除图片边框 */
    /* 其他样式保持 */
    height: 80vh;
    width: auto;
    aspect-ratio: 3/4;
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: block; /* 确保图片是块级 */
}

/* 移除旧的 active 边框效果 */
/* .template-thumb.active { ... } */

/* 可以给选中的 template-item 添加效果 */
.template-item.current {
     /* 可以添加一些视觉效果，比如轻微放大或阴影 */
     /* transform: scale(1.02); */
     /* box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); */
}

/* 照片上传 */
#upload-input {
    display: block; /* 让input独占一行 */
    margin: 10px auto; /* 居中显示 */
}

#uploaded-image-preview {
    display: block; /* 确保图片是块级元素 */
    margin: 10px auto; /* 居中显示 */
    max-height: 200px; /* 限制预览图高度 */
}


/* 海报预览 Canvas (Initially hidden in HTML, shown by JS) */
#poster-canvas {
    /* display: block; */ /* Let JS control display */
    margin: 10px auto;
    border: 1px solid #ccc;
    max-width: 100%;
    height: auto;
}

button {
    display: block;
    width: 120px;
    padding: 10px 20px;
    background-color: #0066ff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    margin: 15px auto;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

button:hover:not(:disabled) {
    background-color: #0052cc;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* 海报容器 */
.poster-wrapper {
    position: relative; /* 为绝对定位的子元素提供基准 */
    display: block; /* 或者 inline-block，取决于布局 */
    margin: 20px auto; /* 居中容器 */
    max-width: 90%; /* 限制容器最大宽度 */
}

/* 下载区域 */
#download-link {
    text-decoration: none;
    position: absolute; /* 相对于 .poster-wrapper 定位 */
    bottom: 15px; /* 距离父容器底部 15px */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    z-index: 10; /* 确保在图片之上 */
    width: auto;
    background-color: rgba(0, 102, 255, 0.85);
    color: white;
    padding: 10px 20px; /* 稍微减小一点 padding */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 增加一点阴影 */
    transition: all 0.3s ease;
    display: inline-block; /* 改为 inline-block */
}

#download-link:hover {
    background-color: rgba(0, 82, 204, 0.9);
    /* 移除 transform，避免与 translateX 冲突 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#final-poster {
    display: block; /* 确保图片是块级元素 */
    /* margin: 20px auto 80px; */ /* 外边距移到 wrapper */
    margin: 0 auto; /* 移除上下外边距，左右自动居中（如果 wrapper 是 block） */
    max-width: 100%; /* 图片宽度充满 wrapper */
    height: auto;
    /* 移除底部边距，因为按钮现在在内部 */
}

/* Navigation Buttons Styles Removed */
/*
.navigation-buttons { ... }
.navigation-buttons button { ... }
*/

/* Specific button styles */
#start-over-btn {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.2);
}
#start-over-btn:hover {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* 文件上传标签样式 */
.upload-label {
    display: block; /* 改为块级元素，方便居中 */
    width: 150px; /* 固定宽度 */
    padding: 10px 15px;
    background-color: #007bff; /* 蓝色背景 */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none; /* 移除下划线 */
    transition: background-color 0.3s ease;
    margin: 20px auto 10px; /* 上下边距，左右自动居中 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.upload-label:hover {
    background-color: #0056b3; /* 悬停时深蓝色 */
    text-decoration: none; /* 悬停时也不显示下划线 */
}

/* 确保隐藏原始的文件输入框 (虽然已用内联样式，加个保险) */
#upload-input {
    display: none;
}

/* 预览图片样式调整 */
#uploaded-image-preview {
    display: block; /* 确保图片是块级元素 */
    margin: 20px auto 10px; /* 调整上边距，与其他元素分隔 */
    max-height: 300px; /* 增加预览图最大高度 */
    max-width: 80%; /* 限制最大宽度 */
    border: 1px solid #eee; /* 添加细边框 */
    border-radius: 4px; /* 轻微圆角 */
}