@charset "UTF-8";
/* ==========================================================================
   cart-default.css — 魔方购物车 default 主题「向 web 主题对齐」组件层
   --------------------------------------------------------------------------
   背景：
     · themes/cart/default 是魔方原版购物车主题，配色是魔方默认蓝(#0052d9 系)
     · 该主题 theme.config 里 loggedheader/nologinheader 都是 clientarea，
       所以这些页面**复用用户中心外壳**，web-theme.css 已经加载 —— Bootstrap 4
       的按钮/表单/卡片/表格等组件本身已对齐，本文件只处理购物车自己的自定义类。
     · 各模板内联 <style> 定义在 body 内、晚于本文件加载，因此本文件统一用
       body 前缀提高一级优先级，确保能压过内联样式（个别带 !important 的除外）。

   配色令牌：web 主题 —— 主色 #5143d9 / 边框 #dfdfe3 / 正文 #747579 / 浅底 #f5f5f6
   版本：1.0.0
   ========================================================================== */

:root {
  --cd-primary: var(--wt-primary, #5143d9);
  --cd-primary-hover: var(--wt-primary-hover, #4539b8);
  --cd-primary-tint: var(--wt-primary-tint, rgba(81, 67, 217, 0.1));
  --cd-border: var(--wt-border, #dfdfe3);
  --cd-border-input: var(--wt-gray-300, #c5c5c7);
  --cd-soft: var(--wt-gray-100, #f5f5f6);
  --cd-text: var(--wt-gray-900, #0b0a12);
  --cd-text-2: var(--wt-gray-600, #747579);
  --cd-text-3: var(--wt-gray-500, #85878a);
  --cd-danger: var(--wt-danger, #d6293e);
  --cd-success: var(--wt-success, #0cbc87);
  --cd-warning: var(--wt-warning, #f7c32e);
  --cd-radius: var(--wt-radius, 0.5rem);
  --cd-radius-lg: var(--wt-radius-lg, 1rem);
  --cd-shadow: var(--wt-shadow, 0 0 40px rgba(29, 58, 83, 0.1));
  --cd-transition: var(--wt-transition, all 0.2s ease-in-out);
}

/* ==========================================================================
   1. 支付 / 选项选择卡片（viewcart 的 .checkboxDiv / .payType）
   ========================================================================== */
body .checkboxDiv {
  width: 50%;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  background: #fff;
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  transition: var(--cd-transition);
}
body .checkboxDiv:hover { border-color: var(--cd-primary); background: var(--cd-primary-tint); }
body .checkboxDiv.checkboxSelect,
body .checkboxDiv.active { border-color: var(--cd-primary); background: var(--cd-primary-tint); }
body .payType { cursor: pointer; padding: 0.5rem 0.875rem; border: 1px solid var(--cd-border); border-radius: var(--cd-radius); transition: var(--cd-transition); }
body .payType:hover,
body .payType.active { border-color: var(--cd-primary) !important; background: var(--cd-primary-tint); }
@media screen and (max-width: 755px) {
  body .checkboxDiv { width: 100%; }
}
body .addfunds-payment img { height: 20px; width: auto; }

/* ==========================================================================
   2. 购物车分类侧栏（sidebar-categories 的 .firstbox / .secondbox / .prolist）
      对齐 web 侧栏观感：浅底、圆角、选中项主色
   ========================================================================== */
body .firstbox,
body .secondbox { min-height: 560px; background: transparent; }
body .secondbox { background: var(--cd-soft); border-radius: var(--cd-radius-lg); padding: 0.5rem 0; }
body .prolist ul { padding-left: 0; margin-bottom: 0; }
body .prolist li { list-style: none; text-align: center; line-height: 1; margin: 0.125rem 0.5rem; }
body .prolist li a {
  display: block;
  padding: 0.6rem 0.75rem;
  color: var(--cd-text-2);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--cd-radius);
  text-decoration: none;
  transition: var(--cd-transition);
}
body .prolist li a:hover { color: var(--cd-primary); background: var(--cd-primary-tint); }
body .firstbox .active a,
body .secondbox .active a {
  color: var(--cd-primary) !important;
  background: var(--cd-primary-tint);
  font-weight: 600;
}
body .firstbox a,
body .secondbox a { color: var(--cd-text-2); }
@media screen and (max-width: 768px) {
  body .firstbox, body .secondbox { min-height: 200px; }
}

/* 分类区搜索框（原来做在半透明底上，这里按 web 输入框重绘） */
body .pro-search-box .rounded { border-radius: var(--cd-radius) !important; }
body .pro-search-box .bg-light,
body .pro-search-box .form-control {
  background-color: #fff !important;
  border: 1px solid var(--cd-border-input) !important;
  color: var(--cd-text);
}
body .pro-search-box input::placeholder { color: var(--cd-text-3); }

/* ==========================================================================
   3. 计费周期选择按钮（configureproduct 的 .btn-custom / .btn-custom-group）
   ========================================================================== */
body .btn-custom {
  min-width: 72px;
  height: 32px;
  padding: 0 0.75rem;
  background: #fff;
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  color: var(--cd-text-2);
  font-size: 0.8125rem;
  line-height: 1;
  transition: var(--cd-transition);
}
body .btn-custom:hover { border-color: var(--cd-primary); color: var(--cd-primary); }
body .btn-custom-group .active {
  background-color: var(--cd-primary);
  border-color: var(--cd-primary);
  color: #fff;
}
/* 周期上的折扣角标 */
body .cycle-select-discount {
  background: var(--cd-danger);
  border-radius: var(--cd-radius) var(--cd-radius) var(--cd-radius) 0;
  font-size: 0.6875rem;
  line-height: 15px;
}

/* ==========================================================================
   4. 价格区间滑条（configureproduct 的 input[type=range]）
   ========================================================================== */
body input[type='range'] {
  height: 4px;
  border-radius: 3px;
  background: var(--cd-primary) !important;
  outline: none;
  -webkit-appearance: none;
}
body input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 22px;
  background-color: #fff;
  border: 4px solid var(--cd-primary);
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-radius: 3px;
  cursor: pointer;
}
body input[type='range']::-moz-range-thumb {
  width: 3px;
  height: 14px;
  background-color: #fff;
  border: 4px solid var(--cd-primary);
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-radius: 3px;
  cursor: pointer;
}
body .range_none { background: var(--cd-border); }

/* ==========================================================================
   5. 订单摘要表（ordersummary）—— 保留无边框设计，只统一内距与文字
   ========================================================================== */
body .ordersummary td {
  border: none !important;
  padding: 0.5rem 0.5rem !important;
  color: var(--cd-text-2);
}
body .ordersummary tr:last-child td { font-weight: 700; color: var(--cd-text); }
body .ordersummary .price { color: var(--cd-primary); font-weight: 700; }

/* ==========================================================================
   6. 订单商品信息（viewcart 的 .goods_info）
   ========================================================================== */
body .goods_info { width: 100%; padding: 0.625rem 0; }
body .goods_info span { display: block; }
body .goods_info .title { text-indent: 0; color: var(--cd-primary); cursor: pointer; }
body .goods_info .title font { float: left; color: var(--cd-text-3); font-family: inherit; font-size: 0.75rem; margin-top: 1px; }
body .goods_info .info { width: 100%; color: var(--cd-text); text-indent: 1.5rem; line-height: 1.6; font-size: 0.875rem; }

/* ==========================================================================
   7. 移动端底部合计条
   ========================================================================== */
body .mobile-bottom-total {
  background: #fff;
  border-top: 1px solid var(--cd-border);
  box-shadow: 0 -4px 20px rgba(29, 58, 83, 0.08);
}
body .mobile-bottom-total .total { color: var(--cd-text); font-weight: 700; }

/* ==========================================================================
   8. 其它零散对齐
   ========================================================================== */
body .error-tip { color: var(--cd-danger); }
body .s-tip, body .com-tit { color: var(--cd-text-2); }
body .form-check { margin-left: 0; }
body .justify-content-start { flex-wrap: wrap; }
/* 占位符统一到 web 的 gray-400（内联样式里用 !important 写死了 gray-300） */
body input::-webkit-input-placeholder,
body textarea::-webkit-input-placeholder { color: var(--wt-gray-400, #96969a) !important; }
body input::placeholder,
body textarea::placeholder { color: var(--wt-gray-400, #96969a) !important; }
/* 购物车里的模态框内距与 web 一致 */
body .modal-body { box-sizing: border-box; }

/* ==========================================================================
   9. 购买须知（合规声明）
      落点：viewcart.tpl / configureproduct.tpl 的表单底部（见 purchase-notice.tpl）
      配色取自需求方设计稿：标题 #f53f3f / 正文 #86909c / 底色 #f7f8fa
      购物车页背景是 #f5f5f6，与 #f7f8fa 几乎同色，故加一条极浅边框保证边界感
   ========================================================================== */
body .purchase-notice {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
  padding: 1rem 1.25rem;
  background: #f7f8fa;
  border: 1px solid #e8e8ea;
  border-radius: var(--cd-radius-lg);
}
body .purchase-notice .purchase-notice-title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: #f53f3f;
}
body .purchase-notice p {
  margin: 0 0 0.55rem;
  font-size: 0.8125rem;
  line-height: 1.85;
  color: #86909c;
  word-break: break-word;
}
body .purchase-notice p:last-child { margin-bottom: 0; }
/* 声明里的链接（如服务协议）用主色，便于识别 */
body .purchase-notice a { color: var(--cd-primary); text-decoration: none; }
body .purchase-notice a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  body .purchase-notice { padding: 0.875rem 1rem; margin-top: 1rem; }
  body .purchase-notice .purchase-notice-title { font-size: 0.875rem; }
  body .purchase-notice p { font-size: 0.75rem; line-height: 1.8; }
}

@media (prefers-reduced-motion: reduce) {
  body .checkboxDiv, body .payType, body .prolist li a, body .btn-custom { transition: none; }
}