/*
 * ============================================================================
 * 软件名称：招聘巴巴招聘求职管理系统 V1.0
 * 著作权人：北京约定科技集团有限公司
 * 开发完成日期：2026年04月22日
 * 软件用途：本文件为前台海报弹窗及模板选择界面的样式定义。
 * 
 * 版权所有 (C) 2026 北京约定科技集团有限公司。保留所有权利。
 * 本软件为著作权人独立开发，未经著作权人书面许可，任何单位或个人不得：
 * 1. 复制、传播、改编本软件；
 * 2. 将本软件用于商业用途；
 * 3. 修改或反向工程本软件。
 * 违反上述规定的，著作权人将依法追究其法律责任。
 * ============================================================================
 */

/* 招聘巴巴 - 海报弹窗样式
 * 功能：定义海报模板选择弹窗、预览弹窗、画板及10套模板背景的样式。
 */

/**
 * 海报弹窗样式 - 与海报选择页完全一致
 * 路径：publish/detail/css/share.css
 */

/* 弹窗遮罩 */
.poster-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: none;
    backdrop-filter: blur(4px);
}

/* 弹窗主体 */
.poster-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1100px;
    max-height: 90vh;
    background: #fff;
    border-radius: 32px;
    z-index: 10001;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
}

.poster-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.poster-modal-header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.poster-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 0 8px;
}

.poster-modal-body {
    padding: 30px 24px;
    overflow-y: auto;
    flex: 1;
}

/* 预览弹窗专用 */
.poster-modal.preview-only {
    background: transparent;
    box-shadow: none;
    max-width: 95vw;
    width: auto;
    overflow: visible;
}
.poster-modal.preview-only .poster-modal-body {
    padding: 0 !important;
    background: transparent;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    position: relative;
}
.poster-modal.preview-only .poster-modal-footer {
    background: transparent;
    border-top: none;
    padding: 12px 0 8px;
}

/* 预览图片 */
#previewImg {
    max-width: 95vw;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    margin: 0;
}

/* 预览关闭按钮（图片右上角） */
.preview-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.preview-close-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* 模板网格（PC端） */
.poster-tpl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* 移动端横向滑动 */
@media (max-width: 768px) {
    .poster-tpl-grid {
        display: flex;
        overflow-x: auto;
        padding-bottom: 8px;
        gap: 12px;
        scroll-snap-type: x mandatory;
    }
    .poster-tpl-grid .poster-tpl-item {
        flex: 0 0 180px;
        scroll-snap-align: start;
    }
}

.poster-tpl-item {
    background: #fff;
    border-radius: 24px;
    padding: 16px 12px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.poster-tpl-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.poster-tpl-item.active {
    border-color: #ff9800;
    background: #fff7ed;
}

.poster-tpl-item img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 16px;
    background: #e9ecef;
    margin-bottom: 10px;
}

.poster-tpl-name {
    font-weight: 600;
    color: #2c3e50;
    white-space: normal;
    word-break: break-word;
    font-size: 14px;
    text-align: center;
}

/* 底部操作栏 */
.poster-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #edf2f7;
    display: flex;
    justify-content: center;
}

/* 保存按钮 */
.poster-save-btn {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: #fff;
    border: none;
    border-radius: 60px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: 0 6px 18px rgba(255,152,0,0.3);
}
.poster-save-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ========== 海报画板基础 ========== */
.poster-canvas-base {
    width: 600px;
    height: 800px;
    position: relative;
    overflow: hidden;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    box-sizing: border-box;
}

/* 平台LOGO区域 - 固定左上角 */
.poster-logo-area {
    position: absolute;
    top: 40px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}
.poster-logo-img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}
.poster-site-name {
    font-size: 36px;
    font-weight: bold;
}

/* 用户头像区域 - 登录显示 右上角 */
.poster-user-avatar {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    z-index: 2;
}

/* 信息内容区域 - 居中规整排版（匹配截图） */
.poster-content {
    position: absolute;
    top: 180px;
    left: 50px;
    right: 50px;
    font-size: 26px;
    line-height: 1.8;
    white-space: pre-line;
    word-break: break-all;
    z-index: 2;
}

/* 底部信息 - 固定左下角，与二维码上下平齐、放大字体 */
.poster-footer {
    position: absolute;
    bottom: 50px;
    left: 50px;
    font-size: 22px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 164px;
    z-index: 2;
    color: inherit !important;
}

/* 二维码区域 - 固定右下角 */
.poster-qrcode-wrap {
    position: absolute;
    bottom: 50px;
    right: 50px;
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 2;
}
.poster-qrcode {
    width: 140px !important;
    height: 140px !important;
    display: block;
}
.poster-qr-tip {
    position: absolute;
    bottom: 20px;
    right: 60px;
    font-size: 16px;
    text-align: center;
    z-index: 2;
}

/* ========== 10套模板样式（个人求职+企业招聘 全部改完） ========== */
.poster-template-1{background:radial-gradient(circle at 30% 20%,#1e3c72,#0a1424);color:#fff;}

/* 清新白 */
.poster-template-2{background:#f8f9fa;color:#000 !important;}
.poster-template-2 .poster-site-name,
.poster-template-2 .poster-qr-tip{color:#000 !important;}

/* 活力橙（企业招聘）全文字黑 */
.poster-template-3{background:linear-gradient(135deg,#ff7e5f,#feb47b);color:#000 !important;}
.poster-template-3 .poster-site-name,
.poster-template-3 .poster-qr-tip{color:#000 !important;}

.poster-template-4{background:#111;color:#fff;}

/* 商务紫（企业招聘）全文字黑 */
.poster-template-5{background:linear-gradient(45deg,#a18cd1,#fbc2eb);color:#000 !important;}
.poster-template-5 .poster-site-name,
.poster-template-5 .poster-qr-tip{color:#000 !important;}

.poster-template-6{background:#ffffff;color:#000000;}

/* 梦幻粉 */
.poster-template-7{background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#000 !important;}
.poster-template-7 .poster-site-name,
.poster-template-7 .poster-qr-tip{color:#000 !important;}

/* 天空蓝 */
.poster-template-8{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#000 !important;}
.poster-template-8 .poster-site-name,
.poster-template-8 .poster-qr-tip{color:#000 !important;}

.poster-template-9{background:#2d3436;color:#fff;}

/* 优雅蓝 */
.poster-template-10{background:linear-gradient(135deg,#667eea,#764ba2);color:#000 !important;}
.poster-template-10 .poster-site-name,
.poster-template-10 .poster-qr-tip{color:#000 !important;}