/* ==========================================================================
 * 真工厂 · 城市选择器样式   v1.3.2 CityPick
 * --------------------------------------------------------------------------
 * 一份样式同时服务两个体系：
 *   · 前台发布页 —— :root 令牌 --paper/--paper-2/--t1/--t3/--line-2/--g-*
 *   · 会员中心   —— .mc 作用域令牌 --mc-panel/--mc-tx/--mc-line/--mc-brand-*
 * 变量用「前台优先、会员中心兜底」的双向 fallback 串起来：谁在祖先作用域里
 * 定义了就用谁的，两边都自适应；会员中心切深色时由 .mc.adm.dark 重映射
 * --mc-* 令牌，本组件无需额外深色规则便跟着变。
 * ========================================================================== */
.cpk{
  --cpk-bg:    var(--paper,    var(--mc-panel,   #fff));
  --cpk-bg2:   var(--paper-2,  var(--mc-bg,      #f6f7f9));
  --cpk-tx:    var(--t1,       var(--mc-tx,      #1e293b));
  --cpk-tx2:   var(--t3,       var(--mc-tx3,     #94a3b8));
  --cpk-bd:    var(--line-2,   var(--mc-line,    #e6ebf1));
  --cpk-hl:    var(--g-50,     var(--mc-brand-soft, #e6fbf4));
  --cpk-brand: var(--g-500,    var(--mc-brand,   #02dba3));
  --cpk-ink:   var(--g-800,    var(--mc-brand-ink, #046A55));
  --cpk-r:     var(--r-md,     var(--mc-r-s,     12px));
  position:relative;
}

/* 右侧留出放大镜的位置，避免长城市名压到图标上 */
.cpk .cpk-in{width:100%;padding-right:32px}

.cpk-ico{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  color:var(--cpk-tx2);opacity:.65;pointer-events:none;
}

.cpk-pop{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:70;
  max-height:268px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--cpk-bg);
  border:1px solid var(--cpk-bd);border-radius:var(--cpk-r);
  box-shadow:0 12px 32px rgba(6,26,20,.16);
  padding:5px;
  scrollbar-width:thin;
}
.cpk-pop[hidden]{display:none}
.cpk-pop::-webkit-scrollbar{width:8px}
.cpk-pop::-webkit-scrollbar-thumb{background:var(--cpk-bd);border-radius:4px}
.cpk-pop::-webkit-scrollbar-track{background:transparent}

.cpk-it{
  padding:8px 11px;border-radius:8px;
  font-size:13.5px;line-height:1.4;color:var(--cpk-tx);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cpk-it:hover{background:var(--cpk-bg2)}
.cpk-it.cur{background:var(--cpk-hl);color:var(--cpk-ink)}
.cpk-it mark{background:none;color:var(--cpk-brand);font-weight:600}

/* 自定义地点：与标准城市在视觉上分开，避免误当成列表里的一项 */
.cpk-it.custom{
  margin-top:4px;padding-top:9px;
  border-top:1px dashed var(--cpk-bd);border-radius:0 0 8px 8px;
  color:var(--cpk-tx2);font-size:13px;
}
.cpk-it.custom b{color:var(--cpk-tx);font-weight:500}

.cpk-none{padding:11px;font-size:13px;color:var(--cpk-tx2)}

/* 控件下方的说明文字（模板里用 <span class="cpk-hint"> 挂） */
.cpk-hint{display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--cpk-tx2)}