/**
 * Styling for the [vpn_compatible] shortcode.
 *
 * Ported from the legacy TheBestVPN theme. Renders a "Compatible with:" line
 * followed by platform icons. The icons come from a single remote sprite
 * hosted on thebestvpn.com, positioned per-platform — no local image asset is
 * bundled, so nothing here points at a file that has to ship with the plugin.
 */
.vpn-compatible-with {
	margin: 20px 0;
}

.vpn-compatible-with .vc-content {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
}

.vpn-compatible-with .vc-content > span {
	margin-left: 0.75rem;
	display: inline-block;
}

.vpn-compatible-with .vc-icons {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url( 'https://thebestvpn.com/wp-content/uploads/2019/01/vpn-compatible-icons.png' ) no-repeat top left;
	background-size: 96px 16px;
	text-indent: -9999px;
	opacity: 0.7;
}

.vpn-compatible-with .vc-icons-windows {
	background-position: 0;
}

.vpn-compatible-with .vc-icons-android {
	background-position: -16px;
}

.vpn-compatible-with .vc-icons-apple {
	background-position: -32px;
}

.vpn-compatible-with .vc-icons-ios {
	background-position: -48px;
}

.vpn-compatible-with .vc-icons-linux {
	background-position: -64px;
}
