.elementor-2818 .elementor-element.elementor-element-873b5e9{--display:flex;--min-height:1440px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:1;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2818 .elementor-element.elementor-element-873b5e9:not(.elementor-motion-effects-element-type-background), .elementor-2818 .elementor-element.elementor-element-873b5e9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.passecivique.com/wp-content/uploads/2026/02/monitor.png");background-repeat:no-repeat;background-size:100% auto;}.elementor-2818 .elementor-element.elementor-element-873b5e9::before, .elementor-2818 .elementor-element.elementor-element-873b5e9 > .elementor-background-video-container::before, .elementor-2818 .elementor-element.elementor-element-873b5e9 > .e-con-inner > .elementor-background-video-container::before, .elementor-2818 .elementor-element.elementor-element-873b5e9 > .elementor-background-slideshow::before, .elementor-2818 .elementor-element.elementor-element-873b5e9 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2818 .elementor-element.elementor-element-873b5e9 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-2818 .elementor-element.elementor-element-96a4ebc{margin:8% 0% calc(var(--kit-widget-spacing, 0px) + 5%) 0%;padding:0px 0px 0px 0px;border-style:none;}.elementor-2818 .elementor-element.elementor-element-96a4ebc.elementor-element{--align-self:center;--order:99999 /* order end hack */;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:767px){.elementor-2818 .elementor-element.elementor-element-873b5e9:not(.elementor-motion-effects-element-type-background), .elementor-2818 .elementor-element.elementor-element-873b5e9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:0px auto;}}/* Start custom CSS for shortcode, class: .elementor-element-96a4ebc *//* =========================
   WatuPRO UI - 稳定兼容版（进度条必准）
   目标：
   1) 不破坏插件 JS
   2) 兼容 Elementor/主题样式
   3) 进度条宽度严格按 style="width:xx%" 显示
   ========================= */

/* 1. 测验整体区域 */
#watupro_quiz{
  max-width: 900px !important;
  margin: 20px auto !important;
  padding: 30px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  box-sizing: border-box !important;
}

/* ===================================================
   2. 进度条：彻底隔离布局影响（关键修复）
   =================================================== */
#watupro_quiz .watupro-progress-container{
  width: 100% !important;
  height: 12px !important;
  background-color: #e2e8f0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: none !important;
  margin-bottom: 25px !important;
  display: block !important;
  position: relative !important;      /* 关键：给 bar 的 absolute 做参照 */
  box-sizing: border-box !important;
}

#watupro_quiz .watupro-progress-bar{
  background-color: #2563eb !important;
  height: 100% !important;
  border-radius: 999px !important;

  /* 关键：让插件写入的 style="width:xx%" 永远生效 */
  width: 0;                           /* 默认值，实际由 inline style 覆盖 */
  min-width: 0 !important;
  max-width: none !important;

  /* 关键：避免 flex / line-height / inline 影响宽度 */
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  flex: none !important;

  transition: width 0.3s ease !important;
  box-sizing: border-box !important;
}

/* 如果你开启了 Display percentage of completeness，百分比文字常被挤歪
   这里把它放到进度条上方居中（不影响 bar 宽度） */
#watupro_quiz .watupro-progress-container .watupro-progress-percent,
#watupro_quiz .watupro-progress-container .watupro-progress-percent span{
  position: absolute !important;
  left: 50% !important;
  top: -18px !important;
  transform: translateX(-50%) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2563eb !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* ===================================================
   3. 题目文字换行与大小
   =================================================== */
#watupro_quiz .watupro-category-header{
  font-size: 14px !important;
  color: #64748b !important;
  margin-bottom: 5px !important;
  white-space: normal !important;
}

#watupro_quiz .watupro-question-text,
#watupro_quiz .question-content > div:first-child{
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 15px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

/* ===================================================
   4. 选项区域：卡片化 + 间距
   =================================================== */
#watupro_quiz .question-choices{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#watupro_quiz .question-choices br{
  display: none !important;
}

/* 选项外层 */
#watupro_quiz .watupro-question-choice{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* 清理 label 内部样式 */
#watupro_quiz .watupro-question-choice label,
#watupro_quiz .watupro-question-choice label.answer,
#watupro_quiz .watupro-question-choice label span{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0 12px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  width: 100% !important;
  display: block !important;
}

/* 单选/多选 */
#watupro_quiz .watupro-question-choice input[type="radio"],
#watupro_quiz .watupro-question-choice input[type="checkbox"]{
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* 选中高亮（兼容性：:has() 有些环境不稳定，给你保留但不强依赖）
   如果你发现某些浏览器不生效，把这一段删掉也不影响进度条 */
#watupro_quiz .watupro-question-choice:has(input:checked){
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
}

/* ===================================================
   5. 底部按钮
   =================================================== */
#watupro_quiz .watupro_buttons{
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

#watupro_quiz #next-question input[type="button"]{
  padding: 12px 30px !important;
  background-color: #3b82f6 !important;
  color: #fff !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* ===================================================
   6. 倒计时
   =================================================== */
#timerDiv, #timerDiv span{
  color: #dc2626 !important;
}

#timerDiv{
  width: fit-content !important;
  margin: 0 auto 15px auto !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  font-weight: bold !important;
  border: 2px solid rgba(220, 38, 38, 0.7) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1) !important;
}/* End custom CSS */