/* ==========================================================================
   OAR 全站弹窗抽屉化（Drawer Conversion）
   - 所有 Bootstrap .modal 弹窗 → 右侧滑出抽屉（升降级/支付/二次验证/确认/模块面板等全部生效）
   - 主题 openModal（.modal-overlay，common.js）→ 右侧滑出抽屉（实名/安全/子账号/消息等）
   - 本文件须在 bootstrap 与主题样式之后加载（header.tpl 末尾引入），关键属性用 body 前缀提权
   ========================================================================== */

/* ================= Bootstrap modal → 右侧抽屉 ================= */
/* common-oar2.css 的裸 .modal 规则（openModal 专用：白底/scale 变换）会污染 bootstrap 弹窗容器，
   导致 fixed 抽屉以 .modal 为包含块、白底铺底 —— 此处整体还原为全屏透明容器 */
body .modal.modal {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
  transition: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
body .modal {
  overflow: hidden;
}
body .modal .modal-dialog {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  margin: 0 !important;
  width: 100%;
  max-width: min(560px, 100vw) !important;
  min-width: 0 !important;
  height: 100%;
  max-height: none;
  display: flex;
  align-items: stretch;
  float: none !important;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
}
/* 大尺寸弹窗（升降级对比表/模块面板）加宽 */
body .modal .modal-dialog.modal-lg,
body .modal .modal-dialog.modal-xl,
body .modal .modal-dialog[style*="1000px"],
body .modal .modal-dialog[style*="42%"] {
  max-width: min(880px, 96vw) !important;
}
body .modal .modal-dialog.modal-sm {
  max-width: min(420px, 100vw) !important;
}
body .modal.show .modal-dialog,
body .modal.in .modal-dialog {
  transform: translateX(0);
}
/* 干掉垂直居中 spacer（抽屉通栏） */
body .modal .modal-dialog-centered {
  align-items: stretch;
  min-height: 100%;
}
body .modal .modal-dialog-centered::before {
  display: none !important;
}
body .modal .modal-content {
  height: 100% !important;
  border: none;
  border-radius: 0 !important;
  box-shadow: -8px 0 32px rgba(11, 31, 53, .16) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body .modal .modal-header {
  flex: none;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid #EEF1F5;
}
body .modal .modal-title { font-size: 16px; font-weight: 700; color: #0B1F35; }
body .modal .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px;
}
body .modal .modal-footer {
  flex: none;
  border-top: 1px solid #EEF1F5;
  padding: 12px 22px;
}
body .modal .close { opacity: .55; }
body .modal .close:hover { opacity: 1; }
/* 移动端全屏 */
@media (max-width: 640px) {
  body .modal .modal-dialog,
  body .modal .modal-dialog.modal-lg,
  body .modal .modal-dialog.modal-xl,
  body .modal .modal-dialog[style*="1000px"],
  body .modal .modal-dialog[style*="42%"] {
    max-width: 100vw !important;
  }
}

/* ================= 主题 openModal（.modal-overlay）→ 右侧抽屉 ================= */
body .modal-overlay {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}
body .modal-overlay .modal {
  position: static !important;
  margin: 0 !important;
  height: 100% !important;
  width: min(520px, 100vw) !important;
  max-width: 100vw !important;
  border-radius: 0 !important;
  box-shadow: -8px 0 32px rgba(11, 31, 53, .16) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: oarDrawerIn .3s cubic-bezier(.4, 0, .2, 1);
}
body .modal-overlay .modal-head {
  flex: none;
}
body .modal-overlay .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: none !important;
}
body .modal-overlay .modal-foot { flex: none; }
@keyframes oarDrawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ================= 页面自定义遮罩（安全中心改密/发票抬头/子账号/优惠券转让）→ 右侧抽屉 ================= */
body .oar-pwd-mask,
body .oar-phone-mask,
body .oar-fin-mask,
body .oar-sub-mask,
body .cp-modal-mask,
body .oar-modal-mask {
  align-items: stretch !important;
  justify-content: flex-end !important;
}
body .oar-pwd-mask > div,
body .oar-phone-mask > div,
body .oar-fin-mask .oar-fin-box,
body .oar-sub-mask > div,
body .cp-modal-mask .cp-modal,
body .oar-modal-mask .oar-modal {
  width: min(480px, 100vw) !important;
  max-width: 100vw !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: oarDrawerIn .3s cubic-bezier(.4, 0, .2, 1);
}

/* ================= 升降级表单 OAR 化（抽屉内选项/滑块/表格） ================= */
/* 选项药丸：默认白底描边，选中蓝底（修复"全部蓝色"观感） */
body .configoption_form .btn-group label.btn,
body .configoption_form .btn-group-toggle label.btn {
  background: #fff !important;
  border: 1px solid #E3E7ED !important;
  color: #1D2129 !important;
  border-radius: 6px !important;
  margin: 0 10px 10px 0 !important;
  padding: 7px 18px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: none !important;
}
body .configoption_form .btn-group label.btn:hover,
body .configoption_form .btn-group-toggle label.btn:hover {
  border-color: #0052D9 !important;
  color: #0052D9 !important;
}
body .configoption_form .btn-group label.btn.active,
body .configoption_form .btn-group-toggle label.btn.active {
  background: #0052D9 !important;
  border-color: #0052D9 !important;
  color: #fff !important;
}
body .configoption_form .btn-group label.btn.disabled,
body .configoption_form .btn-group-toggle label.btn.disabled {
  background: #F5F6F8 !important;
  border-color: #EEF0F3 !important;
  color: #B2B2B2 !important;
  cursor: not-allowed;
}
body .configoption_form .form-group.row { margin-bottom: 14px; }
body .configoption_form label.col-form-label,
body .modal-body label.col-form-label { font-size: 13px; color: #5A6472; }
/* 隐藏当前配置的 hidden radio 行 */
body .modal-body .form-group.row.configureproduct[style*="display: none"] { display: none !important; }
/* 下一步/返回按钮统一 */
body .modal-body .modal-footer { border-top: 1px dashed #E1E6EC; margin-top: 6px; padding: 14px 0 2px; }
body .modal-body .modal-footer .btn { border-radius: 6px; }
/* 对比表（第二步） */
body .modal-body .table th { font-size: 12px; color: #8A94A6; white-space: nowrap; }
body .modal-body .table td h5 { margin: 0; }
/* 滑块主色对齐主题蓝（原 2948DF） */
body .modal-body input[type="range"] { background: linear-gradient(to right, #0052D9, #F1F3F8) !important; }
body .modal-body input[type="range"]::-webkit-slider-thumb { border-color: #0052D9 !important; }
body .modal-body input[type="range"]::-moz-range-thumb { border-color: #0052D9 !important; }