@charset "UTF-8";
/* =========================================================
   CRM报价页 专属组件
   依赖 css/styles.css（设计变量与基础组件）
   ========================================================= */

/* ---------- 价格卡片 ---------- */
.price-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;align-items:stretch;
}
.price-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 20px 24px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}

.price-featured{
  border:2px solid var(--blue);box-shadow:var(--shadow-md);
  background:linear-gradient(170deg,#F4F9FF 0%,#FFFFFF 42%);
}
.price-featured:hover{border-color:var(--blue-deep)}

.price-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;
  padding:5px 16px;border-radius:20px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(248,120,16,.32);
}

.price-head h3{font-size:19px;margin-bottom:6px}
.price-desc{font-size:13.5px;color:var(--muted);line-height:1.6;min-height:3.2em}

.price-num{
  display:flex;align-items:baseline;gap:3px;flex-wrap:wrap;
  margin:18px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.price-num .cur{font-size:20px;font-weight:700;color:var(--ink)}
.price-num .val{
  font-size:33px;font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1;
}
.price-num-text .val-text{
  font-size:29px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1;
}
.price-num .unit{
  width:100%;margin-top:10px;font-size:13px;color:var(--muted);font-weight:500;
}

.price-list{margin-top:18px;gap:10px}
.price-list li{font-size:13.5px;line-height:1.68}
.price-list strong{color:var(--accent);font-weight:700}

.price-foot{
  margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-strong);
  font-size:13px;color:var(--faint);text-align:center;
}
.price-note{margin-top:24px;font-size:13px;color:var(--faint);text-align:center}

/* ---------- 对比表 勾选 / 叉号图标 ---------- */
.ic-yes{width:18px;height:18px;color:#2E9E5B;display:inline-block}
.ic-no{width:18px;height:18px;color:#C3CDDA;display:inline-block}

/* ---------- 其他计费项 ---------- */
.addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.addon-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.addon-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.addon-ico{
  width:46px;height:46px;border-radius:12px;background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.addon-ico .ic-lg{width:24px;height:24px}
.addon-card h3{font-size:17px;margin-bottom:8px}
.addon-price{
  font-size:19px;font-weight:800;color:var(--accent);margin-bottom:10px;letter-spacing:-.01em;
}
.addon-card p:last-child{font-size:14px;color:var(--muted);line-height:1.75}

/* ---------- 买断 vs 租赁 ---------- */
.tco-layout{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tco-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 28px;
}
.tco-buy{border-top:4px solid var(--blue)}
.tco-rent{border-top:4px solid var(--line-strong)}
.tco-card h3{font-size:19px;margin-bottom:18px}
.tco-buy h3{color:var(--blue)}
.tco-rent h3{color:var(--muted)}
.tick-no li::before{
  background:#F0F3F8;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3CDDA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:9px;
}

/* ---------- 响应式 ---------- */
@media (max-width:1240px){
  .price-grid{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:1100px){
  .addon-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .tco-layout{grid-template-columns:1fr}
}
@media (max-width:640px){
  .addon-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .price-card{padding:26px 20px 22px}
  .price-num .val{font-size:32px}
  .price-desc{min-height:0}
}