/* ==========================================================================
   ccib-theme.css  ·  旅保宝 H5 视觉改版主题
   仅在 首页/投保填写/投保确认/支付/支付完成 5 个页面末尾引入，
   放在 main.css / page.css / index.css 之后覆盖旧样式。
   纯视觉换肤：不改任何 Angular 绑定、id、业务逻辑。
   固定浅色主题（移动端内嵌 webview），所有颜色显式声明。
   2026-08-25
   ========================================================================== */

:root{
  --cc-ground:#e9edf4;
  --cc-surface:#ffffff;
  --cc-surface-2:#f4f6fb;
  --cc-ink:#16233a;
  --cc-ink-soft:#3d4a63;
  --cc-muted:#727e94;
  --cc-faint:#9aa4b6;
  --cc-line:#e4e8f0;
  --cc-line-strong:#d3d9e6;
  --cc-brand:#2a5bd7;
  --cc-brand-ink:#1b3f96;
  --cc-brand-wash:#eaf1ff;
  --cc-accent:#ef8118;
  --cc-accent-ink:#c9660a;
  --cc-accent-wash:#fff2e3;
  --cc-teal:#0e9f8e;
  --cc-teal-wash:#e2f6f2;
  --cc-danger:#e0454e;
  --cc-radius:14px;
  --cc-shadow:0 2px 10px -4px rgba(20,35,60,.16);
  --cc-shadow-strong:0 6px 22px -10px rgba(20,35,60,.26);
  --cc-font:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}

/* ---------- 全局底色与字体 ---------- */
html,body{
  background-color:var(--cc-ground) !important;
  color:var(--cc-ink);
  font-family:var(--cc-font);
  -webkit-font-smoothing:antialiased;
}
.wrapper{ background:transparent; }
.content{ padding-bottom:14px; }

/* ---------- 顶部标题栏 ---------- */
.header{
  background:linear-gradient(135deg,var(--cc-brand),var(--cc-brand-ink)) !important;
  color:#fff;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:0 2px 12px -6px rgba(20,35,60,.45);
}

/* ---------- 区块小标题（左侧色条） ---------- */
.period{
  position:relative;
  height:auto;
  line-height:1.3;
  color:var(--cc-ink) !important;
  font-weight:700;
  font-size:15px;
  padding:20px 16px 10px 24px;
  background:transparent;
}
.period::before{
  content:"";
  position:absolute;
  left:15px; top:21px;
  width:3px; height:15px;
  border-radius:2px;
  background:var(--cc-brand);
}

/* ---------- 卡片容器（whiteBox / infor） ---------- */
.whiteBox,
.infor{
  background:var(--cc-surface);
  border:1px solid var(--cc-line) !important;
  border-radius:var(--cc-radius);
  margin:0 12px 12px;
  width:auto;
  box-shadow:var(--cc-shadow);
  overflow:hidden;
}
.infor{ padding:0 0 0 16px; }
.infor.nobor{ border-radius:var(--cc-radius) !important; }

/* 表单行 */
.infor li{
  height:52px;
  line-height:52px;
  border-bottom:1px solid var(--cc-line);
}
.infor li:last-child{ border-bottom:none; }
.infor .cant_p{
  width:40%;
  color:var(--cc-ink) !important;
  font-weight:600;
  font-size:14px;
  line-height:1.25;
  padding-top:9px;
}
.infor .cant_p br + *,
.infor .cant_p{ font-size:14px; }
.infor li .text,
.infor li select,
.infor li .departure{
  width:60%;
  height:52px;
  line-height:52px;
  color:var(--cc-ink);
  font-size:14.5px;
  text-align:right;
  padding-right:14px;
  padding-left:6px;
  font-family:var(--cc-font);
}
.infor li select{ text-align-last:right; }
.infor li .text::placeholder{ color:var(--cc-faint); }

/* 下拉三角 → 柔和箭头 */
.selectBox:before{
  border-top-color:var(--cc-faint);
  right:12px;
}

/* 校验提示行（zwDiv + 警示） */
.infor li .zwDiv{ display:none; }
.c-EB4{ color:var(--cc-danger) !important; }

/* 被保人分组头 */
.insuranP{
  background:var(--cc-brand-wash) !important;
  color:var(--cc-brand-ink) !important;
  font-weight:700;
  font-size:14px;
  border-radius:var(--cc-radius) var(--cc-radius) 0 0;
  margin:0 12px;
  border:1px solid var(--cc-line);
  border-bottom:none;
  height:46px;
  line-height:46px;
  padding-left:16px;
}
.insuranP.on + .infor{ margin-top:0; border-radius:0 0 var(--cc-radius) var(--cc-radius); border-top:none; }
.insuranP .close:before{ border-color:var(--cc-brand-ink); }

/* 性别分段选择 */
.sexyLabel{
  border-radius:9px;
  border:1.5px solid var(--cc-line-strong);
  color:var(--cc-muted);
  font-weight:600;
}
.sexyLabel.on{
  border-color:var(--cc-brand) !important;
  background:var(--cc-brand);
  color:#fff;
}

/* 添加被保人（虚线幽灵按钮） */
.pubDiv{
  margin:0 12px 12px !important;
  width:auto !important;
  border:1.5px dashed var(--cc-brand) !important;
  border-radius:var(--cc-radius);
  background:var(--cc-brand-wash);
  padding:12px 15px !important;
}
.pubDiv .txt{ color:var(--cc-brand) !important; }

/* ---------- 通用工具色（仅本主题页面内覆盖） ---------- */
.bg-FD7,.bg-FF6,.bg-FFB{
  background:linear-gradient(135deg,var(--cc-accent),var(--cc-accent-ink)) !important;
}
.bg-008{
  background:linear-gradient(135deg,var(--cc-brand),var(--cc-brand-ink)) !important;
}
.bg-AAA{ background:#c2c9d6 !important; }
.bg-F6F,.bg-F5F{ background:var(--cc-surface) !important; }
.c-FF6,.c-FD7,.c-FF8{ color:var(--cc-accent) !important; }
.c-008{ color:var(--cc-brand) !important; }

/* ---------- 按钮 ---------- */
.commonBtn{
  height:auto;
  line-height:1.2;
  padding:15px;
  border-radius:13px;
  font-weight:700;
  letter-spacing:1px;
  box-shadow:0 8px 18px -10px rgba(239,129,24,.6);
}
.commonBtn.bg-008,
.commonBtn.bg-FF6{ box-shadow:0 8px 18px -10px rgba(42,91,215,.55); }
.commonBtn:disabled{ background:#c2c9d6 !important; box-shadow:none; }

/* ---------- 底部固定操作栏 ---------- */
.fixedBot{
  height:auto;
  background:var(--cc-surface) !important;
  border-top:1px solid var(--cc-line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
  box-shadow:0 -6px 20px -14px rgba(20,35,60,.4);
  z-index:999;
}
.fixedBot .rightSide{ width:auto; height:auto; }
.fixedBot .rightSide .nextIco,
.fixedBot .leftSide{ height:auto; line-height:1.2; }
.fixedBot .rightSide .nextIco{
  padding:14px 30px;
  border-radius:13px;
  font-weight:700;
  box-shadow:0 8px 18px -10px rgba(239,129,24,.6);
}

/* view / done 页底部双按钮 */
.bottomUl{
  height:auto;
  background:var(--cc-surface);
  border-top:1px solid var(--cc-line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
  gap:12px;
}
.bottomUl li a{
  height:auto;
  line-height:1.2;
  padding:14px;
  border-radius:13px;
  font-weight:700;
}
.bottomUl li a.c-737{
  background:var(--cc-surface-2);
  color:var(--cc-ink-soft) !important;
  border:1px solid var(--cc-line);
}

/* 新版固定底部操作栏比原 45px 更高，原页面只留了 pb45(45px) 下边距，
   会导致最后一行内容被底部栏遮住，这里加大内容底部留白。
   投保确认页(insuranceView)底栏含"保费价格+按钮"两行，留白更多。 */
.content.pb45{ padding-bottom:96px !important; }
.content.insuranceCfr.pb45{ padding-bottom:128px !important; }

/* 保费价格固定在底部按钮上方：价格行 + 按钮行组成统一固定底栏 */
.ccib-payfoot{
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--cc-surface);
  border-top:1px solid var(--cc-line);
  box-shadow:0 -6px 20px -14px rgba(20,35,60,.4);
  z-index:999;
  padding-bottom:env(safe-area-inset-bottom);
}
.ccib-payfoot-price{
  display:flex;
  align-items:baseline;
  margin:0;
  padding:11px 16px 2px;
  font-size:15px;
  font-weight:700;
  color:var(--cc-ink);
}
.ccib-payfoot-price .c-FF6{ color:var(--cc-accent) !important; }
/* 底栏已由 ccib-payfoot 统一固定，内部按钮栏不再各自 fixed */
.ccib-payfoot .bottomUl{
  position:static;
  border-top:none;
  box-shadow:none;
  padding-top:0;
}

/* ---------- 步骤进度条 ---------- */
.progressBox{
  background:var(--cc-surface) !important;
  padding:16px 12px 8px;
  border-bottom:1px solid var(--cc-line);
  margin-bottom:6px;
}
.qsuccProcess{
  width:100%;
  height:auto;
  display:flex;
  counter-reset:ccstep;
}
.qsuccProcess li,
.qsuccProcess li:first-child{
  width:auto !important;
  flex:1;
  float:none !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
/* 连接线 */
.qsuccProcess li:before,
.qsuccProcess li:after{
  content:"";
  position:absolute;
  top:13px; height:2px;
  width:50%;
  background:var(--cc-line-strong);
  z-index:1;
}
.qsuccProcess li:before{ left:0; }
.qsuccProcess li:after{ right:0; }
.qsuccProcess li:first-child:before{ display:none; }
.qsuccProcess li:last-child:after{ display:none; }
/* 圆点 + 序号 */
.qsuccProcess li i{
  width:28px; height:28px;
  margin:0;
  float:none;
  border-radius:50%;
  background:var(--cc-surface-2) !important;
  border:2px solid var(--cc-line-strong);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
}
.qsuccProcess li i:before,
.qsuccProcess li:first-child i:before,
.qsuccProcess li:nth-child(2) i:before,
.qsuccProcess li:nth-child(3) i:before{
  content:counter(ccstep) !important;
  counter-increment:ccstep;
  position:static !important;
  width:auto !important; height:auto !important;
  background:transparent !important;
  color:var(--cc-muted);
  font-size:13px; font-weight:700;
  left:auto; bottom:auto;
}
/* 已完成 / 当前步骤 */
.qsuccProcess li.hover i,
.qsuccProcess li:first-child.hover i,
.qsuccProcess li:nth-child(2).hover i,
.qsuccProcess li:nth-child(3).hover i{
  background:var(--cc-brand) !important;
  border-color:var(--cc-brand);
}
.qsuccProcess li.hover i:before,
.qsuccProcess li:nth-child(2).hover i:before,
.qsuccProcess li:nth-child(3).hover i:before{
  color:#fff;
  background:transparent !important;
}
.qsuccProcess li.hover:before,
.qsuccProcess li.hover:after{ background:var(--cc-brand); }
/* 标签文字 */
.qsuccProcess li p{
  position:static;
  right:auto; top:auto;
  width:auto;
  margin-top:7px;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:var(--cc-muted);
}
.qsuccProcess li.hover p{ color:var(--cc-ink); }

/* ---------- 支付页 ---------- */
.payWay{
  padding:0;
  background:var(--cc-surface);
}
.payWay li{
  padding:15px 16px;
  border-bottom:1px solid var(--cc-line);
  display:flex;
  align-items:center;
}
.payWay li:last-child{ border-bottom:none; }
.payWay li:empty{ display:none; }
.payWay .tit{
  width:auto;
  flex:1;
  font-size:15px;
  font-weight:600;
  color:var(--cc-ink);
}
.payWay input[type="radio"],
.payWay input.checkbox-item{
  width:20px; height:20px;
  margin:0;
  accent-color:var(--cc-brand);
}

/* 应付金额条 */
.payWay + .commonBtn,
.content > .whiteBox .c-FF6{ font-variant-numeric:tabular-nums; }

/* ---------- 支付完成页 ---------- */
.payDone{
  padding:26px 0 40px;
  background:transparent;
}
.payDone .state{ text-align:center; }
.payDone > ul{
  background:var(--cc-surface);
  border:1px solid var(--cc-line);
  border-radius:var(--cc-radius);
  box-shadow:var(--cc-shadow);
  margin:16px 12px;
  padding:6px 16px;
  list-style:none;
}
.payDone li{
  padding:11px 0;
  border-bottom:1px solid var(--cc-line);
  display:flex;
  justify-content:space-between;
  font-size:14px;
}
.payDone li:last-child{ border-bottom:none; }
.payDone li .tit{
  color:var(--cc-muted);
  width:auto;
  text-align:left;
  padding-right:0;
  font-weight:500;
}
.payDone .state img[alt="二维码"]{
  border-radius:14px;
  padding:10px;
  background:#fff;
  border:1px solid var(--cc-line);
  box-shadow:var(--cc-shadow);
}
.bottom{ background:transparent !important; }
.bottom img{ border-radius:12px; }

/* ---------- 首页 index ---------- */
.index_middle .home_list{ padding:0 12px; }
.index_middle .home_list li{ text-align:center; }
.home_img.bg-5DB{ background:var(--cc-brand) !important; }
.home_img.bg-FF5{ background:var(--cc-teal) !important; }
.home_img.bg-FFC{ background:var(--cc-accent) !important; }
.home_title{ color:var(--cc-ink); font-weight:600; }

/* 产品卡片 */
.productBox{
  border:1px solid var(--cc-line) !important;
  border-radius:var(--cc-radius) !important;
  box-shadow:var(--cc-shadow) !important;
  color:var(--cc-ink-soft) !important;
  background:var(--cc-surface) !important;
}
.productBox .ban_ul p{ color:var(--cc-ink-soft) !important; }
.productBox .ban_ul li span{ color:var(--cc-brand-ink) !important; font-weight:600; }
.productBox .ban_fon{ border-top:1px dashed var(--cc-line-strong) !important; }
.productBox .ban_fon p span{ color:var(--cc-accent) !important; }
.productBox .ban_fon .details{
  background:linear-gradient(135deg,var(--cc-accent),var(--cc-accent-ink)) !important;
  border-radius:10px !important;
  box-shadow:0 6px 14px -8px rgba(239,129,24,.6);
}
.productBox .tipRit{ background:linear-gradient(135deg,var(--cc-accent),var(--cc-accent-ink)); }

footer strong.fs16{ color:var(--cc-brand-ink); }

/* ---------- 产品详情/条款按钮小项 ---------- */
.txtUnder{ color:var(--cc-brand) !important; }
.pubNav li.hover{ color:var(--cc-brand) !important; }