/* Compare panel (图1) */
.optics-compare-panel{
  position: fixed;
  right: 70px;           /* 避开你右侧 quickbar */
  bottom: 120px;
  width: 360px;
  background: #fff;
  border: 2px solid #e40000;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 9999;
  display: none;
}

.optics-compare-panel.is-open{ display:block; }

.optics-compare-panel .ocp-inner{ padding: 12px; }

.optics-compare-panel .ocp-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding: 10px 8px;
  border-bottom: 1px solid #eee;
}

.optics-compare-panel .ocp-title{
  display:flex;
  flex-direction:column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.25;
  max-width: 260px;
}

.optics-compare-panel .ocp-sku{
  color:#c00;
  font-weight:700;
}

.optics-compare-panel .ocp-name{
  color:#333;
}

.optics-compare-panel .ocp-meta{
  display:flex;
  align-items:center;
  gap: 8px;
}

.optics-compare-panel .ocp-price{
  color:#c00;
  font-weight:700;
  font-size: 13px;
}

.optics-compare-panel .ocp-remove{
  border:0;
  background: transparent;
  cursor:pointer;
  font-size: 16px;
}

.optics-compare-panel .ocp-actions{
  display:flex;
  gap: 12px;
  margin-top: 12px;
}

.optics-compare-panel .ocp-btn{
  flex:1;
  height: 40px;
  border:0;
  cursor:pointer;
  font-weight:700;
}

.optics-compare-panel .ocp-close{
  background:#999;
  color:#fff;
}

.optics-compare-panel .ocp-go{
  background:#e40000;
  color:#fff;
}

.optics-compare-panel .ocp-empty{
  padding: 12px;
  color:#666;
}

/* 报价弹窗 */
.optics-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.optics-modal-card{
  width: 520px;
  max-width: calc(100vw - 24px);
  background:#fff;
  border-radius: 6px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.optics-modal-hd{
  padding: 12px 14px;
  background:#f3f3f3;
  font-weight:700;
}
.optics-modal-bd{padding: 14px;}
.optics-form-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.optics-form-row label{
  width: 90px;
  color:#333;
  font-size: 13px;
}
.optics-form-row input{
  flex:1;
  height: 34px;
  padding: 0 10px;
  border:1px solid #ddd;
}
.optics-modal-ft{
  padding: 12px 14px;
  display:flex;
  justify-content:center;
  gap: 20px;
  border-top: 1px solid #eee;
}
/* =========================
   Quote Modal (optics-quote-modal)
   ========================= */

/* 遮罩层 */
.optics-quote-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;            /* 默认隐藏，JS 打开时加 .is-open */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  padding: 24px;
}

/* 打开状态 */
.optics-quote-modal.is-open {
  display: flex;
}

/* 弹窗主体 */
.optics-quote-modal .oqm-panel {
  width: 720px;
  max-width: 96vw;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
  font-size: 14px;
}

/* 顶部标题栏 */
.optics-quote-modal .oqm-hd {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #e6e6e6;
}

.optics-quote-modal .oqm-title {
  font-weight: 600;
  color: #222;
}

.optics-quote-modal .oqm-close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 28px;
  color: #666;
}
.optics-quote-modal .oqm-close:hover { color: #111; }

/* 内容区 */
.optics-quote-modal .oqm-bd {
  padding: 18px 18px 8px;
}

/* 表单行 */
.optics-quote-modal .oqm-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.optics-quote-modal .oqm-label {
  width: 120px;
  color: #333;
}

.optics-quote-modal .oqm-label .req {
  color: #d11;
  margin-right: 4px;
}

.optics-quote-modal .oqm-input {
  flex: 1;
}

.optics-quote-modal input[type="text"],
.optics-quote-modal input[type="tel"],
.optics-quote-modal input[type="email"]{
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #dcdcdc;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
}
.optics-quote-modal input:focus{
  border-color: #c40000;
  box-shadow: 0 0 0 2px rgba(196,0,0,.08);
}

/* 底部按钮 */
.optics-quote-modal .oqm-ft {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 14px 16px 18px;
  border-top: 1px solid #eee;
}

.optics-quote-modal .oqm-btn {
  min-width: 140px;
  height: 40px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
}

.optics-quote-modal .oqm-btn.primary {
  background: #c40000;
  color: #fff;
}
.optics-quote-modal .oqm-btn.primary:hover {
  filter: brightness(.95);
}

.optics-quote-modal .oqm-btn.gray {
  background: #9f9f9f;
  color: #fff;
}
.optics-quote-modal .oqm-btn.gray:hover {
  filter: brightness(.95);
}

/* 移动端适配 */
@media (max-width: 520px) {
  .optics-quote-modal { padding: 12px; }
  .optics-quote-modal .oqm-panel { width: 96vw; }
  .optics-quote-modal .oqm-row { display: block; }
  .optics-quote-modal .oqm-label { width: auto; margin-bottom: 6px; }
}

/* ===== Compare Panel (basic) ===== */
.optics-compare-panel{
  position:fixed;
  right:16px;
  bottom:16px;
  width:360px;
  max-width:calc(100vw - 32px);
  z-index:9999;
  display:none;
}
.optics-compare-panel.is-open{ display:block; }

.optics-compare-panel .ocp-inner{
  background:#fff;
  border:1px solid #e6e6e6;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  border-radius:10px;
  overflow:hidden;
}

.optics-compare-panel .ocp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:#f4f4f4;
  font-weight:700;
}

.optics-compare-panel .ocp-list{
  max-height:55vh;
  overflow:auto;
  padding:10px 12px;
}

.optics-compare-panel .ocp-item{
  border:1px solid #eee;
  border-radius:10px;
  padding:10px;
  margin-bottom:10px;
}

.optics-compare-panel .ocp-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.optics-compare-panel .ocp-sku{
  display:inline-block;
  font-size:12px;
  color:#888;
  margin-right:6px;
}
.optics-compare-panel .ocp-name{
  font-size:13px;
  font-weight:700;
  color:#222;
}

.optics-compare-panel .ocp-remove{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:16px;
}

.optics-compare-panel .ocp-attrs{
  margin-top:10px;
  border-top:1px dashed #eee;
  padding-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.optics-compare-panel .ocp-attr{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  font-size:12px;
}
.optics-compare-panel .ocp-attr-k{ color:#666; }
.optics-compare-panel .ocp-attr-v{ color:#111; font-weight:600; text-align:right; }

.optics-compare-panel .ocp-actions{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid #eee;
  background:#fff;
}
.optics-compare-panel .ocp-btn{
  height:36px;
  padding:0 14px;
  border:1px solid #e6e6e6;
  background:#fff;
  cursor:pointer;
  border-radius:8px;
}
.optics-compare-panel .ocp-btn.ocp-go{
  border-color:#d92323;
  background:#d92323;
  color:#fff;
}
/* ===== compare panel refined ===== */
.optics-compare-panel .ocp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:#f4f4f4;
  font-weight:700;
}

.optics-compare-panel .ocp-list{
  max-height:60vh;
  overflow:auto;
  padding:10px 12px;
}

.optics-compare-panel .ocp-item{
  border:1px solid #eee;
  border-radius:10px;
  padding:10px;
  margin-bottom:10px;
}

/* ✅ 每行头部：左信息 + 右删除 */
.optics-compare-panel .ocp-rowhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.optics-compare-panel .ocp-sku{
  font-size:14px;
  font-weight:800;
  color:#d92323;
  line-height:1.2;
}
.optics-compare-panel .ocp-name{
  margin-top:2px;
  font-size:12px;
  color:#777;
}

/* ✅ 删除按钮固定右侧 */
.optics-compare-panel .ocp-remove{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:4px;
  opacity:.9;
}
.optics-compare-panel .ocp-remove:hover{ opacity:1; }

/* ✅ 属性：灰色、单独一行、放在型号下面 */
.optics-compare-panel .ocp-attrs{
  margin-top:10px;
  border-top:1px dashed #eee;
  padding-top:8px;
}
.optics-compare-panel .ocp-attrline{
  font-size:12px;
  color:#8a8a8a;            /* 灰色 */
  line-height:1.7;
  margin:4px 0;
  word-break:break-word;
}
.optics-compare-panel .ocp-attrkey{
  font-weight:600;
  color:#7a7a7a;
}
.optics-compare-panel .ocp-attrval{
  font-weight:600;
  color:#8a8a8a;
}

/* 底部按钮 */
.optics-compare-panel .ocp-actions{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid #eee;
  background:#fff;
}
.optics-compare-panel .ocp-btn{
  height:36px;
  padding:0 14px;
  border:1px solid #e6e6e6;
  background:#f4f4f4;
  cursor:pointer;
  border-radius:8px;
  flex:1;
}
.optics-compare-panel .ocp-btn.ocp-go{
  border-color:#d92323;
  background:#d92323;
  color:#fff;
}
/* =========================
   Compare Panel - Mobile Fix
   ========================= */
@media (max-width: 900px){
  /* 面板变成“左右留边”底部浮层，避免挡住右侧 */
  .optics-compare-panel{
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 默认折叠态：不显示列表，只留标题+按钮 */
  .optics-compare-panel.is-mini .ocp-list{
    display:none !important;
  }

  /* 折叠态更矮一些 */
  .optics-compare-panel.is-mini .ocp-actions{
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .optics-compare-panel.is-mini .ocp-btn{
    height: 34px !important;
  }

  /* 给标题栏一个“可点”的感觉 */
  .optics-compare-panel .ocp-head{
    cursor: pointer;
  }
}