/*
 * Live metal prices dashboard [metals_prices] + header badge [gold_usd_badge].
 * Self-contained: resets the theme (Flatsome) button/list/heading styles inside .gpd only.
 */

.gpd, .gpb {
	--gpd-accent: #f2c94c;
	--gpd-bg: #1a1a1a;
	--gpd-panel: #242424;
	--gpd-panel-line: #2f2f2f;
	--gpd-text: #f2f2f2;
	--gpd-muted: #b9b9b9;
	--gpd-line: rgba(255, 255, 255, .14);
	--gpd-grid: rgba(255, 255, 255, .08);
	--gpd-btn: #3a3a3a;
	--gpd-btn-text: #d6d6d6;
	--gpd-on-accent: #1a1a1a;
	--gpd-up: #22c55e;
	--gpd-down: #ef4444;
	--gpd-radius: 12px;
}
.gpd--light {
	--gpd-bg: #ffffff;
	--gpd-panel: #f7f5ef;
	--gpd-panel-line: #ebe6d6;
	--gpd-text: #1f1f1f;
	--gpd-muted: #5f5f5f;
	--gpd-line: rgba(0, 0, 0, .1);
	--gpd-grid: rgba(0, 0, 0, .07);
	--gpd-btn: #ecebe6;
	--gpd-btn-text: #333;
	--gpd-up: #16a34a;
	--gpd-down: #dc2626;
}
.gpd--light .gpd-list__title, .gpd--light .gpd-hl { color: color-mix(in srgb, var(--gpd-accent) 70%, #000); }

/* ---------- container + resets ---------- */
.gpd.gpd {
	container-type: inline-size;
	background: var(--gpd-bg);
	color: var(--gpd-text);
	border-radius: var(--gpd-radius);
	padding: 20px 24px 16px;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
	margin: 0 0 1.5em;
	max-width: 100%;
	overflow: hidden;
}
.gpd.gpd *, .gpd.gpd *::before, .gpd.gpd *::after { box-sizing: border-box; }
.gpd.gpd h3 { margin: 0; padding: 0; font-size: inherit; color: inherit; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.gpd.gpd ul, .gpd.gpd li { margin: 0; padding: 0; list-style: none; }
.gpd.gpd button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	font: inherit;
	white-space: nowrap;
	transition: background-color .15s, color .15s, border-color .15s;
}
.gpd.gpd button:focus-visible { outline: 2px solid var(--gpd-accent); outline-offset: 2px; }
.gpd [hidden] { display: none !important; }
.gpd bdi, .gpb bdi { unicode-bidi: isolate; }

/* ---------- countdown bar ---------- */
.gpd-bar {
	background: var(--gpd-panel);
	border: 1px solid var(--gpd-panel-line);
	border-radius: 6px;
	padding: 9px 14px;
	text-align: center;
	font-size: 14px;
	margin-bottom: 26px;
}
.gpd-hl { color: var(--gpd-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.gpd-time { margin-inline-start: 6px; direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- layout ---------- */
.gpd-grid {
	display: grid;
	grid-template-columns: minmax(230px, 265px) minmax(0, 1fr);
	gap: 20px 64px;
	align-items: start;
}
.gpd-grid--single { grid-template-columns: minmax(0, 1fr); }

/* ---------- price list ---------- */
.gpd.gpd .gpd-list__title {
	color: var(--gpd-accent);
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 6px;
}
.gpd.gpd .gpd-list__rows + .gpd-list__title { margin-top: 18px; }
.gpd.gpd .gpd-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 0 10px;
	border-bottom: 1px solid var(--gpd-line);
}
.gpd-row__label { font-size: 14px; color: var(--gpd-text); }
.gpd-row__val { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.gpd-row__val b {
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	border-radius: 4px;
	padding: 1px 3px;
	transition: background-color .6s, color .6s;
}
.gpd-row__val small { font-size: 11px; font-weight: 700; margin-inline-start: 4px; }
.gpd-row__val b.is-flash-up { background: color-mix(in srgb, var(--gpd-up) 28%, transparent); }
.gpd-row__val b.is-flash-down { background: color-mix(in srgb, var(--gpd-down) 28%, transparent); }

.gpd-arrow { display: inline-block; width: 0; height: 0; border-inline: 6px solid transparent; }
.gpd-arrow.is-up { border-bottom: 8px solid var(--gpd-up); }
.gpd-arrow.is-down { border-top: 8px solid var(--gpd-down); }
.gpd-arrow.is-flat { width: 10px; height: 2px; border: 0; background: var(--gpd-muted); }

/* ---------- chart panel ---------- */
.gpd-chart { min-width: 0; }
.gpd-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.gpd-tabs, .gpd-ranges { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.gpd-ranges--more { justify-content: flex-end; margin-top: 10px; }

.gpd.gpd .gpd-tab {
	min-width: 72px;
	padding: 6px 18px;
	border-radius: 4px;
	background: var(--gpd-btn);
	color: var(--gpd-btn-text);
	font-weight: 600;
	font-size: 14px;
}
.gpd.gpd .gpd-tab:hover { color: var(--gpd-text); }
.gpd.gpd .gpd-tab.is-active { background: var(--gpd-accent); color: var(--gpd-on-accent); }

.gpd.gpd .gpd-range {
	min-width: 52px;
	padding: 5px 12px;
	border: 1px solid var(--gpd-line);
	border-radius: 4px;
	color: var(--gpd-btn-text);
	font-size: 14px;
}
.gpd.gpd .gpd-range:hover { border-color: var(--gpd-accent); }
.gpd.gpd .gpd-range.is-active {
	border-color: var(--gpd-accent);
	color: var(--gpd-accent);
	background: color-mix(in srgb, var(--gpd-accent) 14%, transparent);
}
.gpd.gpd .gpd-more.is-open { border-color: var(--gpd-accent); }

.gpd.gpd .gpd-chart__title { text-align: center; font-weight: 700; font-size: 16px; margin: 18px 0 4px; }

.gpd-plot { position: relative; height: 340px; user-select: none; touch-action: pan-y; }
.gpd-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gpd-plot text { fill: var(--gpd-text); font-size: 11px; font-family: inherit; }
.gpd-plot .gpd-ax-title { font-size: 14px; font-weight: 500; }
.gpd-plot .gpd-gridline { stroke: var(--gpd-grid); stroke-width: 1; }
.gpd-plot .gpd-line { fill: none; stroke: var(--gpd-accent); stroke-width: 1.6; stroke-linejoin: round; }
.gpd-plot .gpd-dot { fill: var(--gpd-accent); }
.gpd-plot .gpd-cross { stroke: var(--gpd-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.gpd-plot .gpd-hover-dot { fill: var(--gpd-bg); stroke: var(--gpd-accent); stroke-width: 2; }
.gpd-plot__msg {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 0 20%;
	color: var(--gpd-muted); font-size: 13px;
	pointer-events: none;
}
.gpd-tip {
	position: absolute; top: 0; z-index: 2;
	pointer-events: none;
	background: color-mix(in srgb, var(--gpd-panel) 94%, transparent);
	border: 1px solid var(--gpd-accent);
	color: var(--gpd-text);
	border-radius: 6px;
	padding: 6px 9px;
	font-size: 12px;
	line-height: 1.35;
	white-space: nowrap;
	transform: translate(-50%, 0);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.gpd-tip b { color: var(--gpd-accent); font-size: 13px; }

/* ---------- narrow (container + media fallback) ---------- */
@container (max-width: 820px) {
	.gpd-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.gpd-chart__head { justify-content: center; }
	.gpd-ranges--more { justify-content: center; }
	.gpd-plot { height: 280px; }
}
@media (max-width: 820px) {
	.gpd-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
	.gpd-chart__head { justify-content: center; }
	.gpd-ranges--more { justify-content: center; }
	.gpd-plot { height: 280px; }
}
@container (max-width: 480px) {
	.gpd-bar { font-size: 12.5px; padding: 8px 10px; margin-bottom: 18px; }
	.gpd-tabs { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
	.gpd.gpd .gpd-tab { min-width: 0; padding: 6px 4px; }
	.gpd-ranges { gap: 6px; justify-content: center; }
	.gpd.gpd .gpd-range { min-width: 36px; padding: 4px 6px; font-size: 12.5px; }
	.gpd-plot { height: 240px; }
	.gpd-plot .gpd-ax-title { font-size: 12px; }
}
@media (max-width: 480px) {
	.gpd-bar { font-size: 12.5px; padding: 8px 10px; margin-bottom: 18px; }
	.gpd-tabs { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
	.gpd.gpd .gpd-tab { min-width: 0; padding: 6px 4px; }
	.gpd-ranges { gap: 6px; justify-content: center; }
	.gpd.gpd .gpd-range { min-width: 36px; padding: 4px 6px; font-size: 12.5px; }
	.gpd-plot { height: 240px; }
	.gpd-plot .gpd-ax-title { font-size: 12px; }
}
@media (max-width: 549px) {
	.gpd.gpd { padding: 14px 12px 10px; border-radius: min(var(--gpd-radius), 10px); }
}

/* ---------- header badge ---------- */
.gpb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--gpd-panel);
	color: var(--gpd-text);
	border-radius: 8px;
	padding: 7px 10px;
	min-width: 190px;
	line-height: 1.2;
	font-size: 12px;
	vertical-align: middle;
}
.gpb__coin {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	font-size: 7.5px; font-weight: 800; letter-spacing: .02em;
	color: #5a4300;
	background: radial-gradient(circle at 35% 30%, #fff3c4 0, #f2c94c 45%, #b8860b 100%);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.gpb__coin--silver { color: #333; background: radial-gradient(circle at 35% 30%, #fff 0, #c9ccd1 50%, #8a8f96 100%); }
.gpb__coin--platinum { color: #2b2f36; background: radial-gradient(circle at 35% 30%, #f4f6f8 0, #b7c0c9 50%, #7d8792 100%); }
.gpb__name { display: inline-flex; flex-direction: column; }
.gpb__name b { font-size: 11px; font-weight: 700; }
.gpb__name small { font-size: 10px; color: var(--gpd-muted); }
.gpb__vals { display: inline-flex; flex-direction: column; align-items: flex-end; margin-inline-start: auto; }
.gpb__vals b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gpb__vals small { font-size: 9px; font-weight: 700; }
.gpb__chg { font-size: 10px; font-variant-numeric: tabular-nums; white-space: pre; }
.gpb__chg.is-up { color: var(--gpd-up); }
.gpb__chg.is-down { color: var(--gpd-down); }
.gpb__chg.is-flat { color: var(--gpd-muted); }

@media (prefers-reduced-motion: reduce) {
	.gpd-row__val b, .gpd.gpd button { transition: none; }
}