/* 定制线缆配置器 */
.custom-cable-page { font-family: Inter, "Noto Sans SC", sans-serif; color: #232323; }

.cable-top-bar { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.cable-page-title { font-size: 28px; font-weight: 700; margin: 0; }
.cable-faq-btn { background: #f7b500; color: #fff; padding: 8px 22px; border-radius: 20px; font-size: 14px; text-decoration: none; }
.cable-faq-btn:hover { background: #e0a400; color: #fff; opacity: 1; }

.cable-process { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 30px 60px; margin: 24px 0; position: relative; background: #fff; border-radius: 6px; }
.cable-process::before { content: ""; position: absolute; left: 14%; right: 14%; top: 62px; height: 6px; background: radial-gradient(circle, #f7b500 2px, transparent 2.5px); background-size: 14px 6px; z-index: 0; }
.process-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.process-icon { width: 60px; height: 60px; line-height: 60px; border-radius: 50%; background: #f7b500; color: #fff; font-size: 30px; margin-bottom: 10px; text-align: center; }
.process-label { font-size: 14px; color: #333; font-weight: 500; white-space: nowrap; }
.process-icon > i{font-size: 30px;line-height: 30px;}

.cable-block-title { margin: 10px 0 16px; }
.cable-block-title h2 { font-size: 22px; margin: 0 0 4px; }
.cable-block-title p { font-size: 14px; color: #888; margin: 0; }

.cable-card { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 20px 24px; margin-bottom: 16px; }
.cable-row { display: flex; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #f3f3f3; }
.cable-row:last-child { border-bottom: none; }
.cable-label { width: 110px; flex: none; font-weight: 600; font-size: 15px; padding-top: 6px; }
.cable-fields { flex: 1; }

.usage-list { display: flex; flex-wrap: wrap; gap: 14px; }
.option-item { width: 110px; border: 2px solid #eee; border-radius: 6px; padding: 8px; text-align: center; cursor: pointer; background: #fff; transition: .2s; }
.option-item:hover { border-color: #f7b500; }
.option-item.active { border-color: #f7b500; box-shadow: 0 0 0 2px rgba(247,181,0,.2); }
.option-item img { width: 100%; height: 70px; object-fit: contain; }
.option-item .option-name { font-size: 13px; margin-top: 6px; color: #333; }

.design-list { display: flex; gap: 18px; }
.design-box { flex: 1; border: 2px solid #eee; border-radius: 6px; padding: 14px; text-align: center; background: #fafafa; }
.design-box.selected { border-color: #f7b500; background: #fff; }
.design-title { color: #2e8b57; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.design-img { height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #f0f0f0; border-radius: 4px; }
.design-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.img-placeholder { color: #ccc; font-size: 30px; }
.design-btn { margin-top: 12px; background: #fff; border: 1px solid #f7b500; color: #f7b500; border-radius: 4px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.design-btn:hover { background: #f7b500; color: #fff; }

.length-row { display: flex; align-items: center; gap: 10px; }
.length-label { font-weight: 600; }
.length-input { width: 120px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; }
.length-unit { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; }
.length-tip { color: #999; font-size: 12px; }

.customer-fields { display: flex; flex-wrap: wrap; gap: 16px; }
.form-group { flex: 1 1 30%; display: flex; flex-direction: column; }
.form-group.full { flex-basis: 100%; }
.form-group label { font-size: 13px; color: #555; margin-bottom: 6px; }
.form-group .req { color: #f00; }
.form-group input, .form-group textarea { border: 1px solid #ddd; border-radius: 4px; padding: 8px 10px; font-size: 14px; }
.form-group textarea { min-height: 80px; resize: vertical; }
.form-group.error input { border-color: #f00; }
.err-tip { color: #f00; font-size: 12px; margin-top: 4px; }

.cable-submit-bar { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin: 20px 0; }
.qty-box { display: flex; align-items: center; gap: 8px; }
.qty-box label { font-weight: 600; }
.qty-btn { width: 32px; height: 32px; border: 1px solid #ddd; background: #fff; border-radius: 4px; cursor: pointer; font-size: 16px; }
.qty-input { width: 60px; text-align: center; padding: 6px; border: 1px solid #ddd; border-radius: 4px; }
.submit-btn { background: #f7b500; color: #fff; border: none; border-radius: 4px; padding: 12px 40px; font-size: 16px; cursor: pointer; }
.submit-btn:hover { opacity: .9; }

.cable-footer-text { background: #f9f9f9; border-radius: 6px; padding: 24px; margin: 20px 0 40px; }
.cable-footer-text h4 { font-size: 15px; margin: 0 0 16px; font-weight: 700; }
.footer-cols { display: flex; gap: 40px; }
.footer-ol,
.footer-notice ol { flex: 1; margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.9; list-style: decimal; }
.footer-ol ul,
.footer-notice ul { padding-left: 18px; list-style: disc; }
.footer-notice { flex: 1; font-size: 13px; line-height: 1.9; }

/* 选择弹窗 */
.cable-dialog .selector-hint { font-size: 13px; color: #666; margin: -10px 0 16px; }
.cable-dialog .selector-hint a { color: #f7b500; text-decoration: underline; }
.cable-dialog .selector-grid { display: flex; flex-wrap: wrap; gap: 14px; max-height: 460px; overflow: auto; }
.cable-dialog .option-item { width: 130px; border: 1px solid #eee; border-radius: 6px; padding: 10px; }
.cable-dialog .option-item:hover { border-color: #f7b500; }
.cable-dialog .option-item img { height: 80px; }
.empty-tip { color: #999; font-size: 13px; padding: 20px; }