/* 类目树下拉（category-tree.js）的样式。
   配色全部走既有主题变量，因此明暗两套主题自动跟随，不需要另写 dark 覆盖。 */

.cat-tree{position:relative;min-width:0}
/* 原生 select 只作为数据载体保留在 DOM 里（值 / change 语义靠它），视觉上隐藏。 */
.cat-tree-native{display:none!important}

.cat-tree-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:40px;max-width:220px;padding:8px 11px;
  background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:12px;text-align:left;cursor:pointer;
}
.cat-tree-trigger:hover{border-color:var(--accent)}
.cat-tree-trigger:disabled{opacity:.6;cursor:not-allowed;border-color:var(--line)}
.cat-tree-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-tree-caret{
  flex-shrink:0;width:8px;height:8px;margin-right:3px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .16s;
}
.cat-tree[data-open="1"] .cat-tree-caret{transform:rotate(-135deg) translate(-2px,-2px)}
.cat-tree.is-locked-value .cat-tree-trigger{border-color:var(--warn)}

.cat-tree-panel{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;
  min-width:100%;width:max-content;max-width:min(430px,86vw);
  max-height:min(58vh,420px);overflow:auto;padding:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 34px rgb(5 19 29 / .18);
}

.cat-tree-group{margin:6px 4px 4px;font-size:10px;letter-spacing:.03em;color:var(--muted)}
.cat-tree-group:first-child{margin-top:2px}
.cat-tree-group-box{display:block;margin-bottom:4px}

.cat-tree-node{
  display:flex;align-items:center;gap:8px;
  min-height:34px;padding:7px 8px;border-radius:7px;
  font-size:12.5px;color:var(--text);cursor:pointer;
}
.cat-tree-node:hover{background:var(--tint)}
.cat-tree-node[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);font-weight:650}
.cat-tree-node:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cat-tree-node.is-placeholder{cursor:default;color:var(--muted);font-weight:650}
.cat-tree-node.is-placeholder:hover{background:none}

/* 展开箭头：占位固定宽度，所以有子节点 / 无子节点的行左侧对齐一致。 */
.cat-tree-toggle{position:relative;flex-shrink:0;width:16px;height:16px;padding:0;border:0;background:none;cursor:pointer}
.cat-tree-toggle::before{
  content:'';position:absolute;left:2px;top:4px;width:6px;height:6px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(-45deg);transition:transform .15s;
}
.cat-tree-node[aria-expanded="true"]>.cat-tree-toggle::before{transform:rotate(45deg) translate(-1px,-1px)}
.cat-tree-toggle:disabled{cursor:default}
.cat-tree-toggle:disabled::before{visibility:hidden}

.cat-tree-label{flex:1;min-width:0;overflow-wrap:anywhere}
.cat-tree-children{margin-left:14px;padding-left:6px;border-left:1px solid var(--line)}
.cat-tree-badge{
  flex-shrink:0;padding:2px 7px;border-radius:5px;
  font-size:10px;font-weight:600;background:var(--warn-bg);color:var(--warn);
}

/* 卖家运营页：与同排的原生 select 保持同样的宽度规则（.filters 在窄屏会变 grid）。 */
.filters .cat-tree{min-width:0}
.filters .cat-tree-trigger{max-width:220px}
@media(max-width:1100px){
  .filters .cat-tree-trigger{max-width:none}
}
@media(max-width:540px){
  .filters .cat-tree-trigger{min-height:34px;padding:6px 9px;font-size:11px}
  .cat-tree-panel{max-width:min(340px,92vw)}
}

/* 开通页 / 商店页：account.css、shop.css 里 select 是 100% 宽、44px 高的块级控件，
   这里让树触发器跟它们对齐，避免和同页其它表单控件不一致。 */
.account-page .cat-tree,.shop-page .cat-tree{display:block;width:100%}
.account-page .cat-tree-trigger,.shop-page .cat-tree-trigger{
  width:100%;max-width:none;min-height:44px;padding:11px 12px;border-radius:8px;font-size:13px;
}
.account-page .cat-tree-panel,.shop-page .cat-tree-panel{width:100%;max-width:none}