/* VortexCodex Crypto Widgets Pro */

/* Sparklines */

.vcxpro-sparkline {
	display: block;
	width: 100%;
	height: 36px;
	margin-top: 10px;
}

.vcxpro-spark-line {
	fill: none;
	stroke-width: 1.6;
	vector-effect: non-scaling-stroke;
}

.vcxpro-spark-area {
	stroke: none;
	opacity: 0.12;
}

.vcxpro-spark-up .vcxpro-spark-line { stroke: var(--vortexcodex-accent, #16c784); }
.vcxpro-spark-up .vcxpro-spark-area { fill: var(--vortexcodex-accent, #16c784); }
.vcxpro-spark-down .vcxpro-spark-line { stroke: var(--vortexcodex-down-color, #ea3943); }
.vcxpro-spark-down .vcxpro-spark-area { fill: var(--vortexcodex-down-color, #ea3943); }

/* Chart */

.vcxpro-chart {
	border: 1px solid var(--vortexcodex-border, rgba(128, 128, 128, 0.25));
	border-radius: 12px;
	padding: 16px;
}

.vcxpro-chart svg {
	display: block;
	width: 100%;
	height: auto;
}

.vcxpro-chart__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.vcxpro-chart__price {
	font-size: 1.25em;
	margin-left: 8px;
}

.vcxpro-chart__period {
	margin-left: auto;
	font-size: 0.85em;
	opacity: 0.65;
}

.vcxpro-chart__range {
	display: flex;
	justify-content: space-between;
	font-size: 0.8em;
	opacity: 0.7;
	margin-top: 8px;
}

/* Currency switcher */

.vcxpro-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.vcxpro-tab {
	border: 1px solid var(--vortexcodex-border, rgba(128, 128, 128, 0.25));
	background: transparent;
	color: inherit;
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
	letter-spacing: 0.04em;
}

.vcxpro-tab.vcxpro-active {
	background: var(--vortexcodex-accent, #16c784);
	border-color: var(--vortexcodex-accent, #16c784);
	color: #fff;
}

.vcxpro-panel {
	display: none;
}

.vcxpro-panel.vcxpro-active {
	display: block;
}

/* Converter */

.vcxpro-converter {
	border: 1px solid var(--vortexcodex-border, rgba(128, 128, 128, 0.25));
	border-radius: 12px;
	padding: 16px;
	max-width: 420px;
}

.vcxpro-converter__row {
	display: flex;
	gap: 8px;
}

.vcxpro-converter__amount {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--vortexcodex-border, rgba(128, 128, 128, 0.25));
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.vcxpro-converter__coin {
	flex: 1.4;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--vortexcodex-border, rgba(128, 128, 128, 0.25));
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.vcxpro-converter__result {
	margin-top: 12px;
	font-size: 1.5em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}