/*
 * cascader.css —— 多列级联选择器（单触发，逐列展开）通用组件
 * 配合 cascader.js（$.fn.cascader）使用，可在任意页面多次引用。
 * 深色主题默认；如需浅色，覆盖下列变量/颜色即可。
 */
.cascader { position: relative; display: inline-block; }

.cascader-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-width: 220px; height: 44px; padding: 0 14px;
    background: #1B1F27; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
    color: #fff; font-family: Montserrat, Montserrat, sans-serif; font-weight: 600; font-size: 14px;
    cursor: pointer; user-select: none; transition: border-color 0.2s, background-color 0.2s;
}
.cascader-trigger:hover { border-color: rgba(64, 189, 203, 0.4); }
.cascader.open .cascader-trigger { border-color: #40BDCB; background: #14171D; }

.cascader-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cascader-label.is-placeholder { color: rgba(255, 255, 255, 0.45); }

.cascader-arrow {
    width: 0; height: 0; flex-shrink: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff;
    transition: transform 0.2s; opacity: 0.85;
}
.cascader.open .cascader-arrow { transform: rotate(180deg); }

.cascader-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    display: flex; min-width: 220px; max-width: 96vw;
    background: #14171D; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); overflow: hidden;
}

.cascader-col {
    margin: 0; padding: 6px 0; list-style: none; min-width: 180px; max-height: 320px; overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.cascader-col:last-child { border-right: none; }
.cascader-col:empty { display: none; }

.cascader-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 14px; color: rgba(255, 255, 255, 0.82); font-size: 14px; cursor: pointer;
    white-space: nowrap; transition: background-color 0.15s, color 0.15s;
}
.cascader-item:hover { background: rgba(64, 189, 203, 0.12); color: #fff; }
.cascader-item.active { background: rgba(64, 189, 203, 0.18); color: #53FECD; font-weight: 600; }
.cascader-item.selected { color: #53FECD; }

.cascader-caret {
    width: 0; height: 0; flex-shrink: 0;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .cascader, .cascader-trigger { width: 100%; min-width: 0; }
    .cascader-panel { width: 100%; }
    .cascader-col { min-width: 0; flex: 1; }
}