/* Coinbox front-end styles. Neutral palette driven by custom properties so
   themes (and the Custom CSS box) can restyle everything without !important. */

.coinbox {
	--coinbox-up: #16a34a;
	--coinbox-down: #dc2626;
	--coinbox-muted: #6b7280;
	--coinbox-border: rgba(128, 128, 128, 0.25);
	--coinbox-bg: transparent;
	--coinbox-radius: 8px;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}

.coinbox *,
.coinbox *::before,
.coinbox *::after {
	box-sizing: inherit;
}

.coinbox img {
	border-radius: 50%;
	vertical-align: middle;
}

.coinbox-pct.coinbox-up { color: var(--coinbox-up); }
.coinbox-pct.coinbox-down { color: var(--coinbox-down); }
.coinbox-pct.coinbox-flat { color: var(--coinbox-muted); }

.coinbox-spark { display: block; }
.coinbox-spark-up { color: var(--coinbox-up); }
.coinbox-spark-down { color: var(--coinbox-down); }

.coinbox-footer {
	margin-top: 0.5em;
	font-size: 0.75em;
	color: var(--coinbox-muted);
}

.coinbox-footer a {
	color: inherit;
	text-decoration: underline;
}

.coinbox-empty {
	padding: 1em;
	border: 1px dashed var(--coinbox-border);
	border-radius: var(--coinbox-radius);
	color: var(--coinbox-muted);
	font-size: 0.9em;
	text-align: center;
}

/* ------------------------------------------------------------------ ticker */

.coinbox-ticker {
	overflow: hidden;
	border-block: 1px solid var(--coinbox-border);
	padding: 0.5em 0;
}

.coinbox-ticker-track {
	display: flex;
	width: max-content;
	animation: coinbox-scroll var(--coinbox-ticker-speed, 40s) linear infinite;
}

.coinbox-ticker:hover .coinbox-ticker-track {
	animation-play-state: paused;
}

.coinbox-ticker-strip {
	display: flex;
	align-items: center;
}

.coinbox-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0 1.25em;
	white-space: nowrap;
}

.coinbox-ticker-symbol { font-weight: 600; }
.coinbox-ticker-price { color: var(--coinbox-muted); }

@keyframes coinbox-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.coinbox-ticker-track { animation: none; flex-wrap: wrap; width: auto; }
	.coinbox-ticker-strip[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------------------------- table */

.coinbox-table-wrap {
	overflow-x: auto;
}

.coinbox-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.coinbox-table th,
.coinbox-table td {
	padding: 0.6em 0.75em;
	text-align: right;
	border-bottom: 1px solid var(--coinbox-border);
	white-space: nowrap;
}

.coinbox-table th.coinbox-col-coin,
.coinbox-table td.coinbox-col-coin,
.coinbox-table th.coinbox-col-rank,
.coinbox-table td.coinbox-col-rank {
	text-align: left;
}

.coinbox-table thead th {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--coinbox-muted);
}

.coinbox-coin-name {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.coinbox-symbol {
	color: var(--coinbox-muted);
	font-size: 0.85em;
	text-transform: uppercase;
}

.coinbox-col-sparkline .coinbox-spark {
	margin-left: auto;
}

.coinbox-pagination {
	display: flex;
	gap: 0.35em;
	margin-top: 0.75em;
	flex-wrap: wrap;
}

.coinbox-page {
	padding: 0.25em 0.7em;
	border: 1px solid var(--coinbox-border);
	border-radius: var(--coinbox-radius);
	text-decoration: none;
}

.coinbox-page.current {
	font-weight: 700;
	border-color: currentColor;
}

/* -------------------------------------------------------------------- card */

.coinbox-card {
	max-width: 320px;
	padding: 1em 1.25em;
	border: 1px solid var(--coinbox-border);
	border-radius: var(--coinbox-radius);
	background: var(--coinbox-bg);
}

.coinbox-card-head {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0.6em;
}

.coinbox-card-price {
	font-size: 1.6em;
	font-weight: 700;
	margin-bottom: 0.25em;
}

.coinbox-card-stat {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.2em 0;
	font-size: 0.9em;
}

.coinbox-card-stat > span:first-child {
	color: var(--coinbox-muted);
}

.coinbox-card-spark {
	margin: 0.5em 0;
}

.coinbox-card-spark .coinbox-spark {
	width: 100%;
	height: 48px;
}

/* --------------------------------------------------------------- converter */

.coinbox-converter {
	max-width: 480px;
	padding: 1em 1.25em;
	border: 1px solid var(--coinbox-border);
	border-radius: var(--coinbox-radius);
	background: var(--coinbox-bg);
}

.coinbox-convert-row {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	align-items: center;
}

.coinbox-convert-amount {
	flex: 1 1 90px;
	min-width: 90px;
}

.coinbox-convert-from,
.coinbox-convert-to {
	flex: 2 1 130px;
	min-width: 130px;
	max-width: 100%;
}

.coinbox-convert-swap {
	flex: 0 0 auto;
	cursor: pointer;
	background: none;
	border: 1px solid var(--coinbox-border);
	border-radius: var(--coinbox-radius);
	padding: 0.3em 0.6em;
	font-size: 1em;
	line-height: 1;
}

.coinbox-convert-result {
	margin-top: 0.75em;
	font-size: 1.3em;
	font-weight: 700;
	overflow-wrap: anywhere;
}