/* Conk region selector — pills with flag + country + code.
   Sized for the header (small) but flexible enough to drop in a hero. */

.conk-region-selector {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.conk-region-pill {
	appearance: none;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 13px;
	line-height: 1;
	opacity: 0.65;
	padding: 6px 10px;
	transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.conk-region-pill:hover,
.conk-region-pill:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.conk-region-pill--active {
	opacity: 1;
	background: currentColor;
}

.conk-region-pill--active .conk-region-pill__country,
.conk-region-pill--active .conk-region-pill__code {
	color: var(--conk-region-pill-active-text, #fff);
	mix-blend-mode: difference;
}

.conk-region-pill__flag {
	font-size: 14px;
}

.conk-region-pill__country {
	white-space: nowrap;
}

.conk-region-pill__code {
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
	display: none;
}

/* When the wrapper is set to a compact mode (e.g. mobile header), hide
   the country name and only show the flag + code. */
.conk-region-selector--compact .conk-region-pill__country {
	display: none;
}