/**
 * 评论 IP 属地 — 前端样式
 *
 * 设计原则
 * --------
 * 1. 完全复用 ZAXU 主题的 CSS 变量（--txt-color-*、--background-color-*），
 *    因此浅色与深色模式会自动跟随，无需为本插件单独维护两套配色。
 * 2. 所有数值都提供 fallback，在非 ZAXU 主题下同样可读。
 * 3. 圆角 .4rem、字号 1.2rem 与主题自身的 .comment-author-tag、
 *    .comment-reply-link 保持一致，视觉上属于同一套语言。
 *
 * @package Comment_Geo
 */

.cgeo-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	margin: 0.2rem 0 0.6rem;
	padding: 0.3rem 0.7rem;
	border-radius: 0.4rem;
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--txt-color-50, rgba(51, 51, 51, 0.5));
	background-color: var(--txt-color-05, rgba(51, 51, 51, 0.05));
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	-webkit-user-select: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.cgeo-badge:hover {
	color: var(--txt-color-65, rgba(51, 51, 51, 0.65));
	background-color: var(--txt-color-10, rgba(51, 51, 51, 0.1));
}

.cgeo-badge-icon {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	opacity: 0.55;
}

.cgeo-badge:hover .cgeo-badge-icon {
	opacity: 0.75;
}

.cgeo-badge-label {
	color: var(--txt-color-35, rgba(51, 51, 51, 0.35));
}

.cgeo-badge-place {
	font-weight: 500;
}

.cgeo-badge-isp::before {
	content: "·";
	margin-right: 0.35rem;
	color: var(--txt-color-25, rgba(51, 51, 51, 0.25));
}

.cgeo-badge-ip {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	opacity: 0.8;
}

.cgeo-badge-ip::before {
	content: "·";
	margin-right: 0.35rem;
	font-family: inherit;
	color: var(--txt-color-25, rgba(51, 51, 51, 0.25));
	opacity: 1;
}

/* 深色模式兜底：主题变量缺失时仍保证可读 */
@media (prefers-color-scheme: dark) {
	.cgeo-badge {
		color: var(--txt-color-50, rgba(255, 255, 255, 0.5));
		background-color: var(--txt-color-05, rgba(255, 255, 255, 0.06));
	}

	.cgeo-badge:hover {
		color: var(--txt-color-65, rgba(255, 255, 255, 0.65));
		background-color: var(--txt-color-10, rgba(255, 255, 255, 0.12));
	}

	.cgeo-badge-label,
	.cgeo-badge-isp::before,
	.cgeo-badge-ip::before {
		color: var(--txt-color-35, rgba(255, 255, 255, 0.35));
	}
}

/* 窄屏下允许换行，避免长地区名加脱敏 IP 撑破侧边栏 */
@media screen and (max-width: 480px) {
	.cgeo-badge {
		white-space: normal;
	}
}