/*
 * DaazMarkets PRO — Market Bar
 * Compact horizontal tile bar, always dark-coloured regardless of page theme.
 * Green tiles = up, Red tiles = down, Slate tiles = no change data.
 */

/* ── Outer wrapper (scrollable) ───────────────────────────────────────────── */
.daaz-mbar-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #64748b transparent;
}

.daaz-mbar-wrap::-webkit-scrollbar {
	height: 3px;
}
.daaz-mbar-wrap::-webkit-scrollbar-track {
	background: transparent;
}
.daaz-mbar-wrap::-webkit-scrollbar-thumb {
	background: #64748b;
	border-radius: 2px;
}

/* ── Inner flex row ───────────────────────────────────────────────────────── */
.daaz-mbar {
	display: flex;
	gap: 2px;
	min-width: max-content;
	font-family: var(--gmp-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
	line-height: 1.25;
}

/* ── Individual tile ─────────────────────────────────────────────────────── */
.daaz-mbar-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 140px;
	padding: 8px 12px;
	background: #374151; /* gray-700 — neutral default */
	color: #f9fafb;
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
	transition: filter 0.15s ease;
}
.daaz-mbar-tile:hover {
	filter: brightness(1.1);
}

/* Up — emerald-600 */
.daaz-mbar-tile.daaz-mbar-up {
	background: #059669;
	color: #ffffff;
}

/* Down — red */
.daaz-mbar-tile.daaz-mbar-down {
	background: #ce2b2b;
	color: #ffffff;
}

/* ── Top row: label (left) + price (right) ────────────────────────────────── */
.daaz-mbar-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.daaz-mbar-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.9;
	white-space: nowrap;
}

.daaz-mbar-price {
	font-size: 0.96rem;
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: -0.01em;
}

/* ── Subtitle ─────────────────────────────────────────────────────────────── */
.daaz-mbar-sub {
	font-size: 0.64rem;
	opacity: 0.6;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
	margin-top: 2px;
}

/* ── Bottom row: arrow + change % ────────────────────────────────────────── */
.daaz-mbar-bottom {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-top: 4px;
}

.daaz-mbar-arrow {
	font-size: 0.9rem;
	line-height: 1;
}

.daaz-mbar-chg {
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.daaz-mbar-chg.daaz-mbar-na {
	opacity: 0.45;
	font-weight: 400;
}

/* ── Respect prefers-reduced-motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.daaz-mbar-tile {
		transition: none;
	}
}