/* ========================================
   产品下单页面样式 - Product Order Form
   参考 https://wcmyks.com 的紧凑行内布局
   非响应式，PC专用
   ======================================== */

/* 页面主体 */
.product-body {
    background-color: #f0f5f9;
    padding: 20px 0 40px;
    min-height: calc(100vh - 200px);
}

.product-container {
    width: 1200px;
    margin: 0 auto;
}

/* 页面标题 */
.product-page-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px 0;
}

.product-page-header h2 {
    font-size: 24px;
    color: #333;
    font-weight: bold;
    letter-spacing: 2px;
}

/* 认证提示 */
.auth-notice {
    background-color: #e8f4fd;
    border: 1px solid #b3d8f7;
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.auth-notice p {
    color: #31708f;
    font-size: 13px;
    line-height: 1.6;
}

.auth-notice-sub {
    color: #777;
    font-size: 12px;
    margin-top: 5px;
}

/* 表单容器 */
.product-form-wrap {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* ========== 左侧标签切换 ========== */
.product-form-layout {
    display: flex;
    min-height: 400px;
}

.product-type-tabs {
    width: 50px;
    background: #00a8e8;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.type-tab {
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 20px 10px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    letter-spacing: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    transition: background 0.3s;
}

.type-tab:hover {
    background: rgba(255,255,255,0.15);
}

.type-tab.active {
    background: #0088c6;
}

/* 表单内容区 */
.product-form-content {
    flex: 1;
    padding: 15px 20px;
}

/* ========== 行内表单行 ========== */
.form-row-inline {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 12px;
    min-height: 36px;
}

.form-row-inline:last-child {
    margin-bottom: 0;
}

/* 行内表单组 */
.form-group-inline {
    display: flex;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.form-group-inline:last-child {
    margin-right: 0;
}

/* 标签 */
.form-label-inline {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    margin-right: 6px;
    flex-shrink: 0;
}

/* 输入框统一样式 */
.form-group-inline .layui-input,
.form-group-inline .layui-select,
.form-group-inline select {
    height: 32px !important;
    line-height: 30px !important;
    border-radius: 3px;
    border: 1px solid #ccc;
    font-size: 13px;
    padding: 0 8px;
}

.form-group-inline .layui-form-select dl dd.layui-this {
    background-color: #00a8e8;
}

/* 小输入框 - 数字类 */
.input-small {
    width: 60px !important;
    text-align: center;
}

/* 中输入框 */
.input-medium {
    width: 120px !important;
}

/* 备注输入框 */
.input-remark {
    width: 200px !important;
}

/* 单位标签 */
.unit-label {
    font-size: 12px;
    color: #888;
    margin-left: 4px;
    white-space: nowrap;
}

/* 文件名显示 */
.filename-group {
    flex: 1;
    min-width: 120px;
}

.filename-text {
    font-size: 12px;
    color: #333;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 清除按钮 */
.clear-group {
    margin-left: auto;
}

#clearBtn {
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    background: #00a8e8;
    border: none;
}

#clearBtn:hover {
    background: #0088c6;
}

/* 文件上传按钮 */
#uploadFileBtn {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    background: #00a8e8;
    border: none;
}

#uploadFileBtn:hover {
    background: #0088c6;
}

/* 文件提示 */
.file-tip-group {
    flex: 1;
}

.file-tip {
    font-size: 12px;
    color: #e74c3c;
    white-space: nowrap;
}

/* 复选框组 */
.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group .layui-form-checkbox {
    margin-top: 0;
}

/* 材料选择框宽度 */
#cailiaoSelect + .layui-form-select,
#cailiaoSelect {
    width: 110px !important;
}

/* 厚度选择框 */
#houduSelect + .layui-form-select,
#houduSelect {
    width: 100px !important;
}

/* 胶水选择框 */
#jiaoshuiSelect + .layui-form-select,
#jiaoshuiSelect {
    width: 140px !important;
}

/* 颜色选择框 */
select[name="yanse"] + .layui-form-select,
select[name="yanse"] {
    width: 110px !important;
}

/* 表面选择框 */
select[name="biaomian"] + .layui-form-select,
select[name="biaomian"] {
    width: 110px !important;
}

/* 模切选择框 */
select[name="moqie"] + .layui-form-select,
select[name="moqie"] {
    width: 130px !important;
}

/* 边距选择框 */
select[name="bianju"] + .layui-form-select,
select[name="bianju"] {
    width: 100px !important;
}

/* 跳距选择框 */
select[name="tiaoju"] + .layui-form-select,
select[name="tiaoju"] {
    width: 100px !important;
}

/* 可变信息选择框 */
select[name="kebian_type"] + .layui-form-select,
select[name="kebian_type"] {
    width: 100px !important;
}

/* 业务员选择框 */
select[name="yewu"] + .layui-form-select,
select[name="yewu"] {
    width: 110px !important;
}

/* 公司选择框 */
select[name="gongsi"] + .layui-form-select,
select[name="gongsi"] {
    width: 110px !important;
}

/* 交货日期 */
#jiaohuoDate {
    width: 100px !important;
}

/* ========== 底部操作按钮 ========== */
.product-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.product-actions .layui-btn {
    height: 38px;
    line-height: 38px;
    padding: 0 25px;
    border-radius: 4px;
    font-size: 14px;
}

#quoteBtn {
    background: #00a8e8;
    border: none;
}

#quoteBtn:hover {
    background: #0088c6;
}

#addOrderBtn {
    background: #00a8e8;
    border: none;
}

#addOrderBtn:hover {
    background: #0088c6;
}

#certBtn {
    background: #00a8e8;
    border: none;
}

#certBtn:hover {
    background: #0088c6;
}

/* LayUI 复选框样式微调 */
.layui-form-checkbox[lay-skin="primary"] {
    margin-top: 0;
    padding-left: 20px;
}

.layui-form-checkbox[lay-skin="primary"] span {
    font-size: 12px;
}

/* ========================================
   印刷图文批量上传区域样式
   ======================================== */
.yinshua-upload-row {
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px dashed #ddd;
}

.yinshua-upload-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* UEditor上传按钮样式美化 */
#yinshuaUploader {
    display: none;
}

#yinshuaUploader .edui-default .edui-toolbar {
    border: none;
    background: transparent;
    padding: 0;
}

#yinshuaUploader .edui-default .edui-editor {
    border: none;
    background: transparent;
}

#yinshuaUploader .edui-default .edui-editor-bottomContainer {
    display: none;
}

#yinshuaUploader .edui-default .edui-editor-toolbarbox {
    border: none;
    box-shadow: none;
}

#yinshuaUploader .edui-for-attachment .edui-icon {
    width: 100px;
    height: 32px;
    background: #00a8e8 url('/static/ueditor/themes/default/images/attachment.png') no-repeat 8px center !important;
    background-size: 16px 16px !important;
    border-radius: 4px;
    cursor: pointer;
}

#yinshuaUploader .edui-for-attachment .edui-icon:after {
    content: '选择文件';
    display: inline-block;
    margin-left: 28px;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
}

#yinshuaUploader .edui-for-attachment .edui-state-hover .edui-icon {
    background-color: #0088c6 !important;
}

/* 已上传文件列表 */
.yinshua-file-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 150px;
    overflow-y: auto;
}

.yinshua-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background: #f5f5f5;
    border-radius: 3px;
    font-size: 12px;
}

.yinshua-file-item .file-name {
    flex: 1;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.yinshua-file-item .file-view {
    color: #00a8e8;
    text-decoration: none;
}

.yinshua-file-item .file-view:hover {
    text-decoration: underline;
}

.yinshua-file-item .file-del {
    color: #ff4d4f;
    cursor: pointer;
}

.yinshua-file-item .file-del:hover {
    text-decoration: underline;
}

/* 上传提示文字 */
.yinshua-hint {
    font-size: 12px;
    color: #999;
}