/* MetalflowAPI WordPress plugin — front-end styles */

.mfapi-price {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}
.mfapi-price .mfapi-cur { color: var(--mfapi-muted, #6b7280); margin-right: 1px; }
.mfapi-price .mfapi-num { font-weight: 600; color: var(--mfapi-text, #111827); }
.mfapi-price .mfapi-unit { color: var(--mfapi-muted, #6b7280); font-size: 0.85em; margin-left: 4px; }

.mfapi-error {
	color: #b91c1c;
	font-style: italic;
	font-size: 0.9em;
}

/* Sample/demo data label (shown only when no API key is configured) */
.mfapi-demo-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border: 1px solid #e5b800;
	border-radius: 999px;
	background: #fff8e1;
	color: #8a6d00;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}
.mfapi-ticker .mfapi-demo-badge,
.mfapi-carat-table .mfapi-demo-badge,
.mfapi-chart .mfapi-demo-badge,
.mfapi-calc .mfapi-demo-badge {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin: 6px 0 0 auto;
}

.mfapi-branding {
	margin-top: 6px;
	font-size: 11px;
	color: #9ca3af;
	text-align: right;
	font-weight: 400;
}
.mfapi-branding a { color: #b8860b; text-decoration: none; }
.mfapi-branding a:hover { text-decoration: underline; }

/* Ticker */
.mfapi-ticker {
	display: inline-block;
	min-width: 280px;
	max-width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: #fff;
	margin: 8px 0;
}
.mfapi-ticker.mfapi-theme-dark {
	background: #1c1917;
	color: #e7e5e4;
	border-color: #292524;
}
.mfapi-ticker-head {
	background: #f9fafb;
	padding: 6px 12px;
	font-size: 11px;
	color: #6b7280;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	align-items: center;
	gap: 6px;
}
.mfapi-theme-dark .mfapi-ticker-head { background: #292524; color: #a8a29e; border-bottom-color: #1c1917; }
.mfapi-live-dot {
	width: 6px; height: 6px;
	background: #22c55e; border-radius: 50%;
	box-shadow: 0 0 6px #22c55e;
	animation: mfapi-pulse 2s infinite;
	display: inline-block;
}
@keyframes mfapi-pulse {
	0%,100% { opacity: 1; }
	50%     { opacity: 0.4; }
}
.mfapi-ticker-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.mfapi-ticker-table td {
	padding: 6px 12px;
	border-bottom: 1px solid #f3f4f6;
}
.mfapi-theme-dark .mfapi-ticker-table td { border-bottom-color: #292524; }
.mfapi-ticker-table tr:last-child td { border-bottom: 0; }
.mfapi-ticker-table .mfapi-sym { font-weight: 600; color: #b8860b; }
.mfapi-ticker-table .mfapi-name { color: #6b7280; font-weight: 400; margin-left: 4px; }
.mfapi-theme-dark .mfapi-ticker-table .mfapi-name { color: #a8a29e; }
.mfapi-ticker-table .mfapi-pr { font-weight: 600; text-align: right; }
.mfapi-ticker-table .mfapi-ch { text-align: right; font-size: 12px; }
.mfapi-ch-up   { color: #15803d; }
.mfapi-ch-down { color: #b91c1c; }
.mfapi-theme-dark .mfapi-ch-up   { color: #4ade80; }
.mfapi-theme-dark .mfapi-ch-down { color: #f87171; }

.mfapi-change.mfapi-ch-up   { color: #15803d; font-weight: 600; }
.mfapi-change.mfapi-ch-down { color: #b91c1c; font-weight: 600; }

/* Carat table */
.mfapi-carat-table {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	margin: 12px 0;
	background: #fff;
}
.mfapi-carat-table table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.mfapi-carat-table th,
.mfapi-carat-table td {
	padding: 8px 14px;
	border-bottom: 1px solid #f3f4f6;
	text-align: left;
}
.mfapi-carat-table th {
	background: #f9fafb;
	font-size: 11px;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.mfapi-carat-table .mfapi-num-col { text-align: right; }
.mfapi-carat-table tr:last-child td { border-bottom: 0; }

/* Calculator */
.mfapi-calc {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 16px;
	background: #fff;
	max-width: 360px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.mfapi-calc-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.mfapi-calc-row label {
	flex: 1;
	font-size: 13px;
	color: #4b5563;
	font-weight: 500;
}
.mfapi-calc-row select,
.mfapi-calc-row input[type="number"] {
	flex: 1;
	padding: 6px 10px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
}
.mfapi-calc-result {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #f3f4f6;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.mfapi-calc-label {
	font-size: 12px;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.mfapi-calc-value {
	font-size: 20px;
	font-weight: 700;
	color: #111827;
	font-variant-numeric: tabular-nums;
}

/* Sparkline chart */
.mfapi-chart {
	display: block;
	max-width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	padding: 12px;
	margin: 12px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mfapi-chart.mfapi-theme-dark {
	background: #0f172a;
	border-color: #1e293b;
	color: #e2e8f0;
}
.mfapi-chart-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
	font-size: 13px;
}
.mfapi-chart-title { font-weight: 600; color: #111827; }
.mfapi-chart.mfapi-theme-dark .mfapi-chart-title { color: #e2e8f0; }
.mfapi-chart-range { color: #6b7280; font-size: 11px; font-variant-numeric: tabular-nums; }
.mfapi-chart.mfapi-theme-dark .mfapi-chart-range { color: #94a3b8; }
.mfapi-chart-svg svg { display: block; width: 100%; height: auto; }
.mfapi-chart-notice {
	margin-top: 6px;
	padding: 6px 8px;
	background: #fef3c7;
	color: #92400e;
	border-radius: 4px;
	font-size: 11px;
}
.mfapi-chart.mfapi-theme-dark .mfapi-chart-notice {
	background: #422006;
	color: #fcd34d;
}