/* =========================================================
   CityPicker 最终修正版 - 解决移动端拉伸与换行问题
   ========================================================= */

/* 1. 核心容器：强制占据全宽，防止被父级 flex 压缩 */
.city-picker-selector {
	display: flex !important;
	flex-wrap: wrap !important; /* 开启换行 */
	gap: 10px;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	align-items: flex-start !important; /* 防止子元素被拉伸高度 */
}

/* 2. 选择框单体：修复布局与高度 */
.city-picker-selector .selector-item {
	position: relative !important;
	float: none !important;
	margin: 0 !important;
	height: 40px !important;     /* 强制固定高度 */
	line-height: 38px !important; /* 留出边框位置 */
	background: #fff;
	border: 1px solid var(--c-border, #ddd);
	border-radius: 6px;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.3s, box-shadow 0.3s;
	align-self: flex-start; /* 关键：防止在 Flex 布局中被纵向拉伸 */

	/* PC端默认：一排三个 (计算间隙) */
	flex: 0 0 calc((100% - 20px) / 3) !important;
	min-width: 0; /* 允许收缩 */
}

/* 问题一修复：悬停/展开时的蓝色线条 */
.city-picker-selector .selector-item:hover,
.city-picker-selector .selector-item.selector-show {
	border-color: var(--c-blue, #2196F3) !important;
	/* 使用内阴影实现底部 2px 线条，不会改变盒子高度 */
	box-shadow: inset 0 -2px 0 0 var(--c-blue, #2196F3);
}

/* 内部文字：解决垂直居中 */
.city-picker-selector .selector-name {
	display: block;
	padding: 0 25px 0 10px;
	font-size: 14px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 100%;
}

/* 箭头美化 */
.city-picker-selector .selector-item:after {
	content: '';
	position: absolute;
	top: 16px;
	right: 10px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #999;
	transition: transform 0.4s;
}
.city-picker-selector .selector-show:after {
	transform: rotate(180deg);
	border-top-color: var(--c-blue, #2196F3);
}

/* 3. 下拉列表：修复 JS 兼容性，确保能点开 */
.city-picker-selector .selector-list {
	position: absolute !important;
	top: 100% !important;
	left: -1px;
	width: calc(100% + 2px) !important;
	z-index: 1000;
	background: #fff;
	border: 1px solid var(--c-blue, #2196F3);
	border-top: none;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 8px 16px rgba(0,0,0,0.1);

	/* 保留原插件的显示逻辑 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: all 0.3s;
}

.city-picker-selector .selector-show .selector-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 下拉项美化 */
.city-picker-selector ul {
	max-height: 200px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}
.city-picker-selector li {
	padding: 10px 12px;
	font-size: 14px;
	color: #333;
	border-top: 1px solid #f5f5f5;
	cursor: pointer;
}
.city-picker-selector li:hover {
	background: #f0f7ff;
	color: var(--c-blue, #2196F3);
}
.city-picker-selector li.caller.active {
	background: var(--c-blue, #2196F3) !important;
	color: #fff !important;
}
.city-picker-selector li strong {
	color: var(--c-blue, #2196F3);
}

/* 搜索框 */
.city-picker-selector .selector-search {
	padding: 8px;
	background: #fcfcfc;
	border-bottom: 1px solid #eee;
}
.city-picker-selector .input-search {
	width: 100%;
	height: 30px;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0 8px;
	outline: none;
	box-sizing: border-box;
}

/* =========================================================
   响应式断点：解决换行与宽度
   ========================================================= */

/* 平板端：一排两个 */
@media screen and (max-width: 1024px) {
	.city-picker-selector .selector-item {
		flex: 0 0 calc((100% - 10px) / 2) !important;
	}
}

/* 移动端：全宽，一行一个 */
@media screen and (max-width: 768px) {
	.city-picker-selector {
		flex-direction: column !important; /* 强制垂直排列 */
		gap: 8px !important;
	}

	.city-picker-selector .selector-item {
		flex: 0 0 100% !important; /* 强制占据 100% 宽度 */
		width: 100% !important;
		height: 44px !important; /* 移动端高度略高，方便点击 */
		line-height: 42px !important;
	}

	/* 修复父级可能的 Flex 干扰 */
	.filter-chips {
		display: block !important; /* 如果父级是 flex 导致挤压，这里强制改为 block */
	}
}

/* 动画保留 */
@keyframes icons {
	0% { transform: rotate(2deg) scale(1); }
	to { transform: rotate(-2deg) scale(1.1); }
}