/* ============================================================
 * 自定义 Select 选择器组件样式（抽取自 layouts/custom_select.php）
 * ============================================================ */
/* ========== 自定义 Select 选择器 ========== */
.cs-wrap { position: relative; display: inline-block; }
.cs-wrap * { box-sizing: border-box; }
/* 隐藏原生 select，但保留在 DOM 中 */
.cs-wrap > select { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; top: 0; left: 0; }

/* 触发器 */
.cs-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-1);
  padding: 8px 12px; border: 1px solid var(--color-border, #e0e0e0); border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff); cursor: pointer; font-size: var(--font-base, 14px);
  color: var(--color-text, #333); transition: all var(--trans-fast, .15s); user-select: none;
  min-height: 36px; line-height: 1.4;
}
.cs-trigger:hover { border-color: var(--color-primary, #ff6b35); }
.cs-wrap.open .cs-trigger { border-color: var(--color-primary, #ff6b35); box-shadow: 0 0 0 2px rgba(255,107,53,0.12); }
.cs-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--trans-base, .2s); color: var(--color-text-muted, #888); }
.cs-wrap.open .cs-arrow { transform: rotate(180deg); }

/* 下拉面板 */
.cs-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #eef0f3);
  border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
  max-height: 240px; overflow-y: auto; padding: 4px; display: none;
}
.cs-wrap.open .cs-panel { display: block; animation: csSlideDown .15s ease-out; }
@keyframes csSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* dropup：翻转到触发器上方（下方空间不足时由 JS 加 .cs-dropup 类） */
.cs-wrap.cs-dropup .cs-panel {
  top: auto; bottom: calc(100% + 4px);
  animation: csSlideUp .15s ease-out;
}
@keyframes csSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* 选项 */
.cs-option {
  padding: 8px 10px; border-radius: var(--radius-sm, 6px); cursor: pointer; font-size: var(--font-base, 14px);
  color: var(--color-text-soft, #555); transition: all var(--trans-fast, .15s); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px;
}
.cs-option:hover { background: var(--color-surface-hot, #fff5f0); color: var(--color-primary, #ff6b35); }
.cs-option.active { background: var(--color-gradient, linear-gradient(135deg,#ff6b35,#f7931e)); color: #fff; font-weight: 600; }

/* 尺寸变体：对齐原有 class */
.cs-wrap.cs-sm .cs-trigger { padding: 6px 10px; font-size: var(--font-sm, 13px); min-height: 32px; }
.cs-wrap.cs-lg .cs-trigger { padding: 9px 14px; font-size: var(--font-base, 14px); min-height: 40px; }
.cs-wrap.cs-block { display: block; width: 100%; }
.cs-wrap.cs-block .cs-trigger { width: 100%; }
.cs-wrap.cs-block .cs-panel { width: 100%; }

/* form-input 样式适配（links.php 等页面用 form-input 类） */
.cs-wrap.cs-form-input .cs-trigger { padding: 9px 12px; border: 1px solid #e0e0e0; border-radius: var(--radius-md, 8px); font-size: 13px; }