﻿/* ========================================
   自动生成：used_pc_estimate.asp 页面样式
   ======================================== */

.auto-style-1 {
  margin-bottom:24px !important;
}

.auto-style-2 {
  display:none;
}

.auto-style-3 {
  background:linear-gradient(135deg,#3b82f6,#2563eb);
}

.auto-style-4 {
  background:linear-gradient(135deg,#10b981,#059669);
}

.auto-style-5 {
  background:linear-gradient(135deg,#f59e0b,#d97706);
}

.auto-style-6 {
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
}

.auto-style-7 {
  background:linear-gradient(135deg,#ef4444,#dc2626);
}

.auto-style-8 {
  background:linear-gradient(135deg,#06b6d4,#0891b2);
}

.auto-style-9 {
  color:#3b82f6;
}

.auto-style-10 {
  color:#10b981;
}

.auto-style-11 {
  color:#f59e0b;
}

.auto-style-12 {
  color:#8b5cf6;
}

.auto-style-13 {
  color:#06b6d4;
}

.auto-style-14 {
  color:#ef4444;
}

.auto-style-15 {
  font-size:14px;
  color:#6b7280;
  margin-bottom:16px;
  line-height:1.7;
}

.auto-style-16 {
  overflow-x:auto;
}

.auto-style-17 {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.auto-style-18 {
  background:#f8fafc;
}

.auto-style-19 {
  padding:12px 16px;
  text-align:left;
  border-bottom:2px solid #e2e8f0;
  color:#374151;
}

.auto-style-20 {
  background:#fef3c7;
}

.auto-style-21 {
  padding:12px 16px;
  border-bottom:1px solid #f1f5f9;
}

.auto-style-22 {
  color:#d97706;
}

.auto-style-23 {
  padding:12px 16px;
  border-bottom:1px solid #f1f5f9;
  font-size:13px;
  color:#6b7280;
}

.auto-style-24 {
  color:#6b7280;
}

.auto-style-25 {
  color:#92400e;
}

.auto-style-26 {
  background:#fef2f2;
}

.auto-style-27 {
  margin-top:16px;
  padding:12px 16px;
  background:#f0f9ff;
  border-radius:8px;
  border-left:4px solid #3b82f6;
}

.auto-style-28 {
  margin:0;
  font-size:13px;
  color:#1e40af;
  line-height:1.7;
}

.auto-style-29 {
  margin-right:6px;
}

.auto-style-30 {
  grid-column:1/-1;
  padding:12px 16px;
  background:#fffbeb;
  border-radius:8px;
  border-left:4px solid #f59e0b;
  margin-top:8px;
}

.auto-style-31 {
  margin:0;
  font-size:13px;
  color:#92400e;
  line-height:1.7;
}

.auto-style-32 {
  grid-column:1/-1;
  padding:12px 16px;
  background:#f0fdf4;
  border-radius:8px;
  border-left:4px solid #10b981;
  margin-top:8px;
}

.auto-style-33 {
  margin:0;
  font-size:13px;
  color:#166534;
  line-height:1.7;
}


/* ========================================
   从ASP文件迁移的内联样式
   ======================================== */

/* FAQ样式 */
.faq-question {
  justify-content: flex-start !important;
}
.faq-q-text {
  flex: 1 !important;
  margin-left: 10px !important;
  text-align: left !important;
}

/* 表单容器美化 */
.estimate-form-container {
  max-width: 100% !important;
  width: 100% !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 表单项美化 */
.estimate-form-group {
  margin-bottom: 10px;
}

.estimate-form-label {
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
  display: flex;
  align-items: center;
}

.estimate-form-label i {
  margin-right: 8px;
  width: 20px;
  text-align: center;
}

/* 输入框和选择框美化 */
.estimate-form-input,
.estimate-form-select {
  width: 100%;
  padding: 12px 16px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #1e293b !important;
  background: #fff !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box;
}

.estimate-form-input:hover,
.estimate-form-select:hover {
  border-color: #93c5fd !important;
}

.estimate-form-input:focus,
.estimate-form-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
  outline: none !important;
}

/* 选择框箭头美化 */
.estimate-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
  cursor: pointer;
}

/* 复选框美化 */
.estimate-form-checkbox {
  margin: 24px 0;
}

.estimate-checkbox-label {
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  background: #fff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  color: #475569 !important;
}

.estimate-checkbox-label:hover {
  border-color: #93c5fd !important;
  background: #f8fafc !important;
}

.estimate-checkbox-label input[type="checkbox"]:checked + .estimate-checkbox-custom {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

/* 提交按钮美化 */
.estimate-form-submit {
  text-align: center;
  margin-top: 28px;
}

.estimate-submit-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #fff !important;
  padding: 14px 48px !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(59,130,246,0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.estimate-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(59,130,246,0.4) !important;
}

.estimate-submit-btn:active {
  transform: translateY(0) !important;
}

/* 结果展示美化 */
.estimate-result {
  margin-top: 28px;
}

.estimate-result-price {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
  border-radius: 16px !important;
  padding: 36px !important;
  text-align: center !important;
  color: #fff !important;
  box-shadow: 0 8px 30px rgba(59,130,246,0.25) !important;
  position: relative;
  overflow: hidden;
}

.estimate-result-price::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.estimate-result-label {
  font-size: 16px !important;
  opacity: 0.9 !important;
  margin-bottom: 12px !important;
  position: relative;
  z-index: 1;
}

.estimate-result-value {
  font-size: 48px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
}

.estimate-result-note {
  font-size: 14px !important;
  opacity: 0.85 !important;
  position: relative;
  z-index: 1;
}

/* 结果明细美化 */
.estimate-result-detail {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin-top: 20px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
}

.estimate-detail-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

.estimate-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.estimate-detail-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.estimate-detail-item:hover {
  background: #f1f5f9 !important;
}

.estimate-detail-label {
  font-size: 13px !important;
  color: #64748b !important;
}

.estimate-detail-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

/* CTA按钮美化 */
.estimate-result-cta {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  margin-top: 24px !important;
  flex-wrap: wrap !important;
}

.estimate-cta-btn {
  padding: 14px 32px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.estimate-cta-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(16,185,129,0.3) !important;
}

.estimate-cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16,185,129,0.4) !important;
}

.estimate-cta-phone {
  background: #fff !important;
  color: #3b82f6 !important;
  border: 2px solid #3b82f6 !important;
}

.estimate-cta-phone:hover {
  background: #eff6ff !important;
  transform: translateY(-2px) !important;
}

/* 表格美化 */
table {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

table th {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  padding: 14px 16px !important;
}

table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

table tr:hover td {
  background: #f8fafc !important;
}

/* 卡片美化 */
.estimate-factor-card,
.prep-item {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 24px !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.3s ease !important;
}

.estimate-factor-card:hover,
.prep-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  border-color: #93c5fd !important;
}

/* 响应式 */
@media (max-width: 768px) {
  .estimate-form-container {
    padding: 20px !important;
  }
  .estimate-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .estimate-result-value {
    font-size: 36px !important;
  }
  .estimate-result-price {
    padding: 24px !important;
  }
}