/* =============================================
   formule_mall_diy.css — 前台商城 DIY 页面覆盖样式
   基于 formule_diy.css 仅改色调：蓝色 → 红色
   布局与其他样式完全沿用后台定稿不变
   ============================================= */

:root {
    /* 主色：蓝色 → 红色 */
    --primary: #DC2626;            /* Red 600 (原 #2563EB) */
    --primary-hover: #B91C1C;      /* Red 700 (原 #1D4ED8) */
    --primary-soft: #FEE2E2;       /* Red 100 (原 #DBEAFE) */
    --primary-soft-border: #FCA5A5;/* Red 300 (原 #93C5FD) */

    --border-focus: #FCA5A5;       /* Red 300 (原 #93C5FD) */

    /* 主题色变量 */
    --theme-color: var(--primary);
    --theme-color-hover: var(--primary-hover);
    --theme-color-soft: var(--primary-soft);
    --theme-color-border: var(--primary-soft-border);
}

/* ===== 支付状态卡片 ===== */
.payment-status-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 20px;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    margin-top: 4px;
}

.payment-status-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    border-radius: 50%;
    font-size: 22px;
    color: var(--primary);
}

.payment-status-info {
    flex: 1;
    min-width: 0;
}

.payment-status-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.payment-status-desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}

.payment-qrcode-wrap {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}

#paymentQrcodeEl {
    width: 180px;
    height: 180px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#paymentQrcodeEl img {
    width: 160px;
    height: 160px;
}

.payment-status-btn {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.payment-status-done {
    text-align: center;
    padding: 16px 0;
}

/* ===== 地址下拉美化 ===== */
.freight-address-input-row select.form-control {
    height: 38px;
    padding: 0 32px 0 12px;
    font-size: 13px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #333;
    min-width: 0;
    flex: 1;
}

.freight-address-input-row select.form-control:hover {
    border-color: #ccc;
}

.freight-address-input-row select.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
    outline: none;
}

.freight-address-input-row select.form-control option {
    padding: 8px 12px;
    font-size: 13px;
}

/* 移除后台蓝色渐变背景，改为商城红色渐变 */
.formule-container {
    background: radial-gradient(circle at 0% 0%, #FEF2F2 0%, var(--bg-page) 28%, var(--bg-page) 100%) !important;
}

/* 表单控件 focus 色 */
.formule-left .form-control:focus,
.formule-left select.form-control:focus,
.formule-left input[type="text"].form-control:focus,
.formule-left input[type="number"].form-control:focus,
.formule-left .input-sm:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16) !important;
}

/* 顶部装饰条 */
.section-accent-card::before {
    background: linear-gradient(90deg, #DC2626 0%, #FCA5A5 100%) !important;
}

/* 汇总卡片边框 */
.section-summary-card {
    border-color: #FCA5A5 !important;
    border-left-color: #DC2626 !important;
    background: linear-gradient(180deg, #FEF2F2 0%, #ffffff 100%) !important;
    box-shadow: 0 12px 24px -18px rgba(220, 38, 38, 0.6) !important;
}

/* 数量预设按钮 */
.quantity-preset-btn:hover {
    border-color: #FCA5A5 !important;
    color: #DC2626 !important;
    background: #FEF2F2 !important;
}

.quantity-preset-btn.is-active {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    box-shadow: 0 6px 14px -8px rgba(220, 38, 38, 0.55) !important;
}

/* summary-info 区域 */
.summary-info {
    background: var(--primary-soft) !important;
    border-color: var(--primary-soft-border) !important;
    color: var(--primary-hover) !important;
}

/* 算价计算按钮 - 已经是 btn-danger 不用改 */

/* 一键复制按钮 */
.formule-order-summary-copy {
    border-color: #DC2626 !important;
    background: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%) !important;
    color: #B91C1C !important;
    box-shadow: 0 8px 18px -12px rgba(220, 38, 38, 0.55) !important;
}

.formule-order-summary-copy:hover {
    border-color: #B91C1C !important;
    background: linear-gradient(180deg, #FEE2E2 0%, #FCA5A5 100%) !important;
    color: #991B1B !important;
}

/* 选中态颜色（单选/复选框） */
.checkbox-tag.checked, .radio-tag.active,
.third-level-radio-group .radio-inline:has(input[type="radio"]:checked),
.checkbox-inline:has(input[type="checkbox"]:checked),
.radio-inline:has(input[type="radio"]:checked) {
    box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.32) !important;
}

/* 二级选择高亮 */
.second-level-group .card-option:has(input[type="radio"]:checked),
.second-level-group .card-option:has(input[type="checkbox"]:checked),
.second-level-group .radio-inline:has(input[type="radio"]:checked),
.second-level-group .checkbox-inline:has(input[type="checkbox"]:checked),
.second-level-group .radio-tag.active,
.second-level-group .checkbox-tag.checked {
    box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.32) !important;
}

/* 按钮色 */
.btn-primary {
    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%) !important;
    box-shadow: 0 8px 16px -8px rgba(220, 38, 38, 0.55) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%) !important;
    box-shadow: 0 12px 22px -10px rgba(220, 38, 38, 0.6) !important;
}

.btn-danger {
    background: #DC2626 !important;
}

.btn-danger:hover {
    background: #B91C1C !important;
}

/* 提交订单按钮 */
#createOrderBtn {
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.22) !important;
}

#createOrderBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.28) !important;
}

/* 支付方式选中态 */
.payment-switch-row .payment-switch .radio label:has(input[type="radio"]:checked) {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
}

/* 选中文本颜色 */
.lifted-third-level-container .radio-inline:has(input[type="radio"]:checked),
.lifted-third-level-container .checkbox-inline:has(input[type="checkbox"]:checked),
.lifted-third-level-container .card-option:has(input[type="radio"]:checked),
.lifted-third-level-container .card-option:has(input[type="checkbox"]:checked),
.lifted-third-level-container .radio-tag.active,
.lifted-third-level-container .checkbox-tag.checked,
.lifted-third-level-container .attribute-inline-option.is-active {
    border-color: #DC2626 !important;
    background: #DC2626 !important;
    box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.3) !important;
}

/* 价格底纹：更改为红色系 */
.third-level-group .price-badge,
.third-level-radio-group .price-badge,
.lifted-third-level-container .price-badge {
    background: repeating-linear-gradient(-45deg, #FEF2F2 0 6px, #FEE2E2 6px 12px) !important;
    border-color: #FCA5A5 !important;
    color: #B91C1C !important;
}

/* card-option 激活态 */
.card-option.active,
.card-option:has(input[type="radio"]:checked),
.card-option:has(input[type="checkbox"]:checked) {
    box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.25) !important;
}

/* 运费计算结果 */
.freight-calc-result .calc-item.calc-freight-label .calc-value-danger,
.calc-value-danger {
    color: #DC2626 !important;
}

#calculate-freight-btn {
    background: #DC2626 !important;
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.24) !important;
}

#calculate-freight-btn:hover {
    background: #B91C1C !important;
    box-shadow: 0 8px 15px rgba(220, 38, 38, 0.35) !important;
}

/* 地址卡片选中态 */
.formule-address-card.is-active {
    border-color: #DC2626 !important;
    background: linear-gradient(180deg, #FEF2F2 0%, #ffffff 100%) !important;
    box-shadow: 0 12px 24px -18px rgba(220, 38, 38, 0.7) !important;
}

.formule-address-card:hover {
    border-color: #FCA5A5 !important;
    box-shadow: 0 10px 18px -14px rgba(220, 38, 38, 0.55) !important;
}

.formule-address-card-badge {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
}

/* 数量预设选择器的蓝色圆点 */
.quantity-style-dot {
    background: #DC2626 !important;
}

/* 汇总金额 */
.formule-order-summary-price strong {
    color: #DC2626 !important;
}

/* 选中态高亮文本 */
.card-option:has(input[type="radio"]:checked) .card-text {
    color: #B91C1C !important;
}

/* 类别标签文本 */
.category-label {
    color: #B91C1C !important;
}

/* 按钮主色调覆盖 */
#confirm-user-selector,
#doAddressParseBtn {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
}

#confirm-user-selector:hover,
#doAddressParseBtn:hover {
    background: #B91C1C !important;
}

/* 运费选项模板 */
.freight-option-card:hover {
    border-color: #FCA5A5 !important;
    box-shadow: 0 12px 24px -18px rgba(220, 38, 38, 0.55) !important;
}

.freight-option-card.is-active {
    border-color: #DC2626 !important;
}

/* 汇总区域失效水印 */
.section-summary-card.is-pricing-dirty {
    border-color: #FCA5A5 !important;
    border-left-color: #DC2626 !important;
    background: linear-gradient(180deg, #FEF2F2 0%, #FFF5F5 100%) !important;
}

/* 选中元素 accent-color */
input[type="radio"], input[type="checkbox"] {
    accent-color: #DC2626 !important;
}

/* 地址弹窗关闭按钮 hover */
.discount-selector-close:hover {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
}

/* 全屏预览链接 hover */
.category-image-fullscreen:hover {
    color: #DC2626 !important;
}

/* ::selection 色 */
::selection {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

/* 自定义修复：确保 btn-default 在白色背景下不被主色覆盖 */
.btn-default {
    border: 1px solid #D4D4D8 !important;
}

.btn-default:hover {
    border-color: #FCA5A5 !important;
}

/* 卡片选中态边框主题色 */
.card-option:hover {
    border-color: var(--theme-color-border) !important;
}

/* 选中态第二级高亮维持白色文本 */
.second-level-group .radio-tag.active,
.second-level-group .checkbox-tag.checked,
.second-level-group .card-option:has(input[type="radio"]:checked) .card-text {
    color: #fff !important;
}

/* 确保包含 .section-submit-card 的两个按钮一行显示自适应 */
@media (max-width: 768px) {
    #createOrderBtn, #saveQuoteBtn {
        width: 100% !important;
    }
}

/* ========== 前台居中布局（恪守商城 1226px 标准） ========== */
.formule-container {
    justify-content: center !important;
}

.formule-inner {
    width: 100%;
    max-width: 1226px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* 响应式：窄屏时内层变为纵向 */
@media (max-width: 991px) {
    .formule-inner {
        flex-direction: column;
    }
    .formule-inner .formule-right {
        width: 100% !important;
        position: static !important;
    }
}

/* ========== 前台算价页面 - 精修留白与视觉升维 ========== */

/* 主容器：充足呼吸感 + 微妙的右上角光晕 */
.formule-container {
    padding: 28px 20px !important;
}

/* 内层布局 */
.formule-inner {
    gap: 28px !important;
}

.formule-left-column {
    gap: 18px !important;
}

/* 左侧面板：圆润+柔和阴影，告别扁平锐利 */
.formule-left {
    padding: 16px 20px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03) !important;
}

.formule-left-main {
    padding-bottom: 16px !important;
}

/* ===== 分类参数面板：适度间距，隐藏项不占空间 ===== */
.formule-left .panel-primary {
    margin-bottom: 0 !important;
}

.formule-left .panel-primary > .panel-body {
    padding: 0 !important;
    min-height: 0 !important;
}

.formule-left .panel-primary > .panel-heading {
    padding: 0 !important;
}

/* 面板内部 radio-group 行：当子项全部隐藏时高度可塌缩 */
.formule-left .panel-primary > .panel-heading .radio-group.row {
    min-height: 0 !important;
}

/* 空的 panel-body：无可见子元素时不占空间 */
.formule-left .panel-primary > .panel-body:has(> :not([style*="display: none"]):not(.php-hidden):not(.hidden-attribute)) {
    padding-bottom: 4px !important;
}

.formule-left .panel-primary > .panel-heading .radio-group.row:has(> :not([style*="display: none"])) {
    min-height: 28px !important;
    padding-top: 2px;
}

/* 当 radio-group 内所有子项均隐藏时，整行塌缩 */
.formule-left .panel-primary > .panel-heading .radio-group.row:not(:has(> :not([style*="display: none"]):not(.php-hidden):not(.hidden-attribute))) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.formule-left .panel-primary .category-label {
    margin-bottom: 0 !important;
    padding: 6px 0 !important;
    font-size: 13px;
}

/* 卡片式选项：舒适可点击区域 */
.formule-left .panel-primary .card-option {
    padding: 6px 14px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
}

.formule-left .panel-primary .card-option .card-text {
    margin: 0 !important;
}

/* 标签式选项：清爽间距 */
.formule-left .panel-primary .radio-inline,
.formule-left .panel-primary .checkbox-inline,
.formule-left .panel-primary .radio-tag,
.formule-left .panel-primary .checkbox-tag {
    padding: 5px 12px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
}

.formule-left .panel-primary .attribute-inline-option {
    padding: 5px 14px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
}

/* 属性输入行：微微上抬 */
.formule-left .panel-primary .float-row {
    padding: 4px 0 !important;
}

.formule-left .panel-primary .float-item-label {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.formule-left .panel-primary .float-item-input .form-control {
    height: 34px !important;
    min-height: 34px !important;
}

/* ===== 核心修复：覆盖 base CSS 的 display:flex !important，确保 jQuery .hide() 生效 ===== */
/*
 * 根因：base CSS (formule_diy.css) 中大量元素使用了 display:inline-flex/flex !important，
 * 这会覆盖 jQuery .hide() 写入的 style="display: none"，导致隐藏的元素仍然撑开空间。
 * base CSS 第606-611行已有部分兜底（card-option/radio-inline/checkbox-inline/float-item），
 * 但覆盖不全，遗漏了 second-level-group、third-level-group、radio-group.row、
 * subcategory-content 等容器。
 *
 * 修复：以同等 !important + 更高选择器特异性，强制将所有带 display:none 内联样式的
 * panel 子元素隐藏。
 */

/* === 宽泛兜底：panel 内任何带 display:none 内联样式的元素 === */
.formule-left .panel-primary [style*="display: none"],
.formule-left .panel-primary [style*="display:none"] {
    display: none !important;
}

/* === 特定容器强制塌缩 === */
.formule-left .panel-primary .subcategory-content.php-hidden,
.formule-left .panel-primary .subcategory-content.lifted-source,
.formule-left .panel-primary .second-level-group[style*="display: none"],
.formule-left .panel-primary .third-level-group[style*="display: none"],
.formule-left .panel-primary .radio-group.row[style*="display: none"],
.formule-left .panel-primary .subcategory-content[style*="display: none"] {
    display: none !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* === 二三级选择区容器：移除固定最小高度 === */
.second-level-group,
.third-level-group {
    min-height: 0 !important;
    margin-bottom: 0 !important;
}

/* === radio-group 行：所有子项隐藏时完全塌缩 === */
.formule-left .panel-primary > .panel-heading .radio-group.row:not(:has(> :not([style*="display: none"]):not([style*="display:none"]):not(.php-hidden):not(.hidden-attribute))) {
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* === panel-body：所有子内容隐藏时塌缩 === */
.formule-left .panel-primary > .panel-body:not(:has(> *:not([style*="display: none"]):not([style*="display:none"]):not(.php-hidden):not(.hidden-attribute))) {
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.second-level-group > .category-label {
    top: 4px;
}

.second-level-group > .checkbox-inline,
.second-level-group > .radio-inline {
    margin-bottom: 3px !important;
}

/* 四级属性行 */
.third-level-float-container {
    padding-bottom: 2px !important;
}

.subcategory-content .float-row {
    margin-left: 94px !important;
    width: calc(100% - 94px) !important;
    padding: 3px 0 !important;
}

.formule-left .panel-primary .lifted-third-level-container {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
}

/* ===== 左侧卡片统一定义 ===== */
.left-section-card {
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03) !important;
    transition: box-shadow 0.25s ease !important;
}

.left-section-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04) !important;
}

/* 卡片淡入上升入场动画 */
@keyframes cardFadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.left-section-card,
.formule-left .panel-primary {
    animation: cardFadeInUp 0.45s ease both;
}

.formule-left .panel-primary:nth-child(1) { animation-delay: 0.02s; }
.formule-left .panel-primary:nth-child(2) { animation-delay: 0.06s; }
.formule-left .panel-primary:nth-child(3) { animation-delay: 0.10s; }
.formule-left .panel-primary:nth-child(4) { animation-delay: 0.14s; }
.formule-left .panel-primary:nth-child(5) { animation-delay: 0.18s; }
.formule-left .panel-primary:nth-child(6) { animation-delay: 0.22s; }
.formule-left .panel-primary:nth-child(7) { animation-delay: 0.26s; }
.formule-left .panel-primary:nth-child(8) { animation-delay: 0.30s; }
.formule-left .panel-primary:nth-child(9) { animation-delay: 0.34s; }
.formule-left .panel-primary:nth-child(10) { animation-delay: 0.38s; }

.left-section-card:nth-child(1) { animation-delay: 0.04s; }
.left-section-card:nth-child(2) { animation-delay: 0.10s; }
.left-section-card:nth-child(3) { animation-delay: 0.16s; }
.left-section-card:nth-child(4) { animation-delay: 0.22s; }
.left-section-card:nth-child(5) { animation-delay: 0.28s; }

.formule-right .freight-panel {
    animation: cardFadeInUp 0.45s ease 0.32s both;
}

.formule-left-secondary .left-section-card {
    margin-bottom: 16px !important;
}

/* ========== 移除指定卡片的外框（盒型配置区边框保留不变） ========== */
.section-summary-card,
.section-quote-toolbar,
.formule-common-followup-sections .section-accent-card,
.section-submit-card {
    border: none !important;
}

/* 汇总卡片保留左侧红色强调条 */
.section-summary-card {
    border-left: 4px solid var(--primary) !important;
    border-left-color: var(--primary) !important;
}

/* ===== 右侧汇总卡片（红色强调） ===== */
.section-summary-card {
    padding: 18px 20px !important;
    border-radius: 14px !important;
    border-left-width: 4px !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.formule-order-summary-card {
    margin: 0 !important;
}

.formule-order-summary-body {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    line-height: 1.75 !important;
}

.formule-order-summary-price {
    margin-top: 14px !important;
    font-size: 28px !important;
}

.formule-order-summary-price strong {
    font-size: 32px !important;
}

/* ===== 产品算价工具栏 ===== */
.section-quote-toolbar {
    padding: 16px 20px !important;
}

.quantity-style-body {
    gap: 14px !important;
}

.quantity-preset-btn {
    height: 38px !important;
    min-width: 74px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
}

.quantity-style-custom-input {
    width: 136px !important;
    min-width: 136px !important;
    height: 38px !important;
    border-radius: 10px !important;
}

.quantity-calc-btn {
    height: 40px !important;
    padding: 0 28px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    letter-spacing: 0.5px;
}

.quantity-calc-btn i {
    font-size: 16px;
}

.left-section-card .form-group {
    margin-bottom: 10px !important;
}

/* ===== 运费计算区域 ===== */
.formule-common-followup-sections .section-accent-card {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.printing-followup-fields {
    margin-top: 0 !important;
}

.freight-panel-header {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
}

.freight-panel-header .left-section-title {
    font-size: 15px !important;
}

.freight-address-form-group,
.freight-options-form-group,
.freight-result-form-group {
    margin-bottom: 14px !important;
}

/* 地址库卡片 */
.formule-address-card {
    padding: 14px 16px !important;
    border-radius: 12px !important;
}

.formule-address-card-list {
    gap: 12px !important;
}

/* 收货信息输入行 */
.freight-address-input-row {
    gap: 10px !important;
}

.freight-address-input-row .form-control {
    border-radius: 10px !important;
}

/* 统计信息标签 */
.freight-stat-chip {
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
}

/* 运费选项卡片 */
.freight-option-card {
    padding: 16px 18px !important;
    border-radius: 12px !important;
    min-width: 240px !important;
}

/* 计算结果展示 */
.freight-result-inline .freight-calc-result {
    padding: 14px 18px !important;
    border-radius: 12px !important;
    gap: 18px !important;
}

.freight-calc-result .calc-total-value {
    font-size: 28px !important;
}

/* ===== 创建订单区域 ===== */
.section-submit-card {
    padding: 18px 20px !important;
    border-radius: 14px !important;
}

.section-submit-card .left-section-title {
    font-size: 15px !important;
    margin-bottom: 16px !important;
}

.section-submit-card .form-group {
    margin-bottom: 14px !important;
}

.section-submit-card .form-group.row {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

/* 上传按钮 */
.section-submit-card .input-group-addon .btn {
    height: 34px !important;
    font-size: 12px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
}

/* 备注文本框 */
.bill-remark-textarea {
    min-height: 80px !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
}

/* 支付方式选择 */
.payment-switch-row {
    padding: 8px 12px !important;
    border-radius: 10px !important;
}

.payment-switch-row .payment-switch .radio label {
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

/* 底部操作按钮 */
#saveQuoteBtn {
    height: 46px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: 1.5px solid #DC2626 !important;
    color: #DC2626 !important;
    background: #fff !important;
    transition: all 0.25s ease !important;
}

#saveQuoteBtn:hover {
    background: #FEF2F2 !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15) !important;
    transform: translateY(-1px) !important;
}

#createOrderBtn {
    height: 46px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25) !important;
    transition: all 0.25s ease !important;
}

#createOrderBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.35) !important;
}

/* ===== 订单状态提示卡片 ===== */
.section-order-status-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 4px solid #DC2626;
}

.section-order-status-card .left-section-title {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #333;
}

.order-status-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    width: fit-content;
}

.order-status-pending-audit {
    background: #F0F9FF;
    color: #0284C7;
}

.order-status-paid {
    background: #F0FDF4;
    color: #16A34A;
}

.order-status-unpaid {
    background: #FFFBEB;
    color: #D97706;
}

.order-status-partial {
    background: #F3F4F6;
    color: #4B5563;
}

.order-status-desc {
    font-size: 13px;
    color: #666;
}

.order-status-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* ===== 右侧图像预览面板 ===== */
.formule-right {
    width: 320px !important;
    top: 28px !important;
}

.formule-right .freight-panel {
    padding: 20px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03) !important;
    margin-bottom: 0 !important;
}

.formule-right .freight-panel h4 {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
}

.graph-placeholder {
    width: 100% !important;
    height: 260px !important;
    border-radius: 12px !important;
    border: 1.5px dashed #D4D4D8 !important;
}

#category-image {
    border-radius: 12px !important;
}

.category-image-thumbs {
    width: 100% !important;
    margin-top: 12px !important;
    gap: 10px !important;
}

.category-thumb-btn {
    flex: 0 0 calc((100% - 30px) / 4) !important;
    min-width: 60px !important;
    height: 50px !important;
    border-radius: 8px !important;
}

/* ===== 汇总字段卡片 ===== */
.formule-summary-fields-card {
    margin-top: 12px !important;
}

/* ===== 响应式调优 ===== */
@media (max-width: 991px) {
    .formule-container {
        padding: 16px 12px !important;
    }
    
    .formule-inner {
        gap: 16px !important;
    }
    
    .formule-left-column {
        gap: 14px !important;
    }
    
    .formule-left {
        padding: 12px 14px !important;
    }
    
    .formule-right {
        width: 100% !important;
        top: auto !important;
    }
    
    .graph-placeholder {
        height: 200px !important;
    }
}

@media (max-width: 767px) {
    .formule-container {
        padding: 12px 8px !important;
    }
    
    .formule-left {
        padding: 10px 12px !important;
    }
    
    .left-section-card {
        padding: 14px 14px !important;
        margin-bottom: 12px !important;
    }
    
    .quantity-style-body {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .quantity-calc-btn {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    .freight-calc-result {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .freight-address-form-group {
        flex-direction: column !important;
    }
    
    .formule-address-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 479px) {
    #saveQuoteBtn, #createOrderBtn {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    
    .section-submit-card .form-group.row > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
}