/**
 * Global Market Prices - Modern Design System
 * Version: 2.0 (Modern UI)
 * Author: DaazLabs
 *
 * Structure:
 * 1. CSS Variables (Light + Dark Mode)
 * 2. Base Styles & Typography
 * 3. Grid System
 * 4. Components (Cards, Charts, Tables)
 * 5. Utilities
 * 6. Dark Mode Toggle
 * 7. Responsive
 */

/* ========================================
   1. CSS VARIABLES
   ======================================== */

:root {
	/* Brand Colors */
	--gmp-primary: #f7931a;           /* Bitcoin Orange */
	--gmp-primary-dark: #d47a0f;
	--gmp-primary-light: #ffa940;
	--gmp-secondary: #627eea;         /* Ethereum Purple */
	--gmp-secondary-dark: #4e63bb;

	/* Semantic Colors */
	--gmp-success: #10b981;           /* Green */
	--gmp-danger: #ef4444;            /* Red */
	--gmp-warning: #f59e0b;
	--gmp-info: #3b82f6;

	/* Neutral Colors - Light Mode */
	--gmp-bg-primary: #ffffff;
	--gmp-bg-secondary: #f9fafb;
	--gmp-bg-tertiary: #f3f4f6;
	--gmp-text-primary: #111827;
	--gmp-text-secondary: #6b7280;
	--gmp-text-tertiary: #9ca3af;
	--gmp-border: #e5e7eb;
	--gmp-shadow: rgba(0, 0, 0, 0.1);

	/* Spacing */
	--gmp-space-xs: 0.25rem;          /* 4px */
	--gmp-space-sm: 0.5rem;           /* 8px */
	--gmp-space-md: 1rem;             /* 16px */
	--gmp-space-lg: 1.5rem;           /* 24px */
	--gmp-space-xl: 2rem;             /* 32px */
	--gmp-space-2xl: 3rem;            /* 48px */

	/* Typography */
	--gmp-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--gmp-font-mono: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
	--gmp-font-size-xs: 0.75rem;      /* 12px */
	--gmp-font-size-sm: 0.875rem;     /* 14px */
	--gmp-font-size-base: 1rem;       /* 16px */
	--gmp-font-size-lg: 1.125rem;     /* 18px */
	--gmp-font-size-xl: 1.25rem;      /* 20px */
	--gmp-font-size-2xl: 1.5rem;      /* 24px */
	--gmp-font-size-3xl: 1.875rem;    /* 30px */

	/* Border Radius */
	--gmp-radius-sm: 0.375rem;        /* 6px */
	--gmp-radius-md: 0.5rem;          /* 8px */
	--gmp-radius-lg: 0.75rem;         /* 12px */
	--gmp-radius-xl: 1rem;            /* 16px */

	/* Shadows */
	--gmp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--gmp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--gmp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--gmp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Transitions */
	--gmp-transition-fast: 150ms ease;
	--gmp-transition-base: 250ms ease;
	--gmp-transition-slow: 350ms ease;
}

/* Dark Mode Variables */
[data-gmp-theme="dark"] {
	--gmp-bg-primary: #111827;
	--gmp-bg-secondary: #1f2937;
	--gmp-bg-tertiary: #374151;
	--gmp-text-primary: #f9fafb;
	--gmp-text-secondary: #d1d5db;
	--gmp-text-tertiary: #9ca3af;
	--gmp-border: #374151;
	--gmp-shadow: rgba(0, 0, 0, 0.3);
}

/* ========================================
   2. BASE STYLES & TYPOGRAPHY
   ======================================== */

.daaz_gmp_widget,
.daaz-gmp-container {
	font-family: var(--gmp-font-sans);
	font-size: var(--gmp-font-size-base);
	color: var(--gmp-text-primary);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ========================================
   3. GRID SYSTEM
   ======================================== */

.gmp-grid {
	display: grid;
	gap: var(--gmp-space-lg);
	width: 100%;
}

.gmp-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gmp-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gmp-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gmp-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ========================================
   4. COMPONENTS
   ======================================== */

/* --- Price Cards (Modern Alternative to Tables) --- */
.gmp-card {
	background: var(--gmp-bg-primary);
	border: 1px solid var(--gmp-border);
	border-radius: var(--gmp-radius-lg);
	padding: var(--gmp-space-lg);
	box-shadow: var(--gmp-shadow-sm);
	transition: all var(--gmp-transition-base);
}

.gmp-card:hover {
	box-shadow: var(--gmp-shadow-md);
	transform: translateY(-2px);
}

.gmp-card-header {
	display: flex;
	align-items: center;
	gap: var(--gmp-space-md);
	margin-bottom: var(--gmp-space-md);
	padding-bottom: var(--gmp-space-md);
	border-bottom: 1px solid var(--gmp-border);
}

.gmp-card-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.gmp-card-title {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.gmp-card-name {
	font-size: var(--gmp-font-size-lg);
	font-weight: 600;
	color: var(--gmp-text-primary);
	margin: 0;
}

.gmp-card-symbol {
	font-size: var(--gmp-font-size-sm);
	color: var(--gmp-text-secondary);
	text-transform: uppercase;
	font-weight: 500;
}

.gmp-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--gmp-space-sm);
}

.gmp-card-price {
	font-size: var(--gmp-font-size-2xl);
	font-weight: 700;
	color: var(--gmp-text-primary);
	font-family: var(--gmp-font-mono);
}

.gmp-card-stats {
	display: flex;
	gap: var(--gmp-space-lg);
	margin-top: var(--gmp-space-sm);
}

.gmp-card-stat {
	display: flex;
	flex-direction: column;
}

.gmp-card-stat-label {
	font-size: var(--gmp-font-size-xs);
	color: var(--gmp-text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
}

.gmp-card-stat-value {
	font-size: var(--gmp-font-size-base);
	font-weight: 600;
	color: var(--gmp-text-primary);
	font-family: var(--gmp-font-mono);
	margin-top: var(--gmp-space-xs);
}

/* Price Change Badge */
.gmp-change {
	display: inline-flex;
	align-items: center;
	gap: var(--gmp-space-xs);
	padding: var(--gmp-space-xs) var(--gmp-space-sm);
	border-radius: var(--gmp-radius-sm);
	font-size: var(--gmp-font-size-sm);
	font-weight: 600;
	font-family: var(--gmp-font-mono);
}

.gmp-change.positive {
	background: rgba(16, 185, 129, 0.1);
	color: var(--gmp-success);
}

.gmp-change.negative {
	background: rgba(239, 68, 68, 0.1);
	color: var(--gmp-danger);
}

.gmp-change::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

.gmp-change.positive::before {
	border-bottom: 5px solid var(--gmp-success);
}

.gmp-change.negative::before {
	border-top: 5px solid var(--gmp-danger);
}

/* --- Chart Container --- */
.gmp-chart-container {
	background: var(--gmp-bg-primary);
	border: 1px solid var(--gmp-border);
	border-radius: var(--gmp-radius-lg);
	padding: var(--gmp-space-lg);
	box-shadow: var(--gmp-shadow-sm);
}

.gmp-chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--gmp-space-lg);
}

.gmp-chart-title {
	font-size: var(--gmp-font-size-xl);
	font-weight: 600;
	color: var(--gmp-text-primary);
	margin: 0;
}

.gmp-chart-timeframes {
	display: flex;
	gap: var(--gmp-space-xs);
	background: var(--gmp-bg-secondary);
	padding: var(--gmp-space-xs);
	border-radius: var(--gmp-radius-md);
}

.gmp-chart-timeframe-btn {
	padding: var(--gmp-space-xs) var(--gmp-space-md);
	border: none;
	background: transparent;
	color: var(--gmp-text-secondary);
	font-size: var(--gmp-font-size-sm);
	font-weight: 500;
	border-radius: var(--gmp-radius-sm);
	cursor: pointer;
	transition: all var(--gmp-transition-fast);
}

.gmp-chart-timeframe-btn:hover {
	background: var(--gmp-bg-primary);
	color: var(--gmp-text-primary);
}

.gmp-chart-timeframe-btn.active {
	background: var(--gmp-primary);
	color: white;
}

.gmp-chart-canvas {
	width: 100%;
	height: 300px;
	margin-top: var(--gmp-space-md);
}

/* --- Modern Table (Fallback/Alternative) --- */
.daaz_gmp_widget {
	margin: var(--gmp-space-xl) 0;
	overflow-x: auto;
	width: 100%;
}

.daaz_gmp_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--gmp-bg-primary);
	border-radius: var(--gmp-radius-lg);
	overflow: hidden;
	box-shadow: var(--gmp-shadow-sm);
}

.daaz_gmp_table th,
.daaz_gmp_table td {
	padding: var(--gmp-space-md);
	text-align: left;
	font-size: var(--gmp-font-size-sm);
	border-bottom: 1px solid var(--gmp-border);
}

.daaz_gmp_table thead th {
	background: var(--gmp-bg-secondary);
	font-weight: 600;
	color: var(--gmp-text-primary);
	text-transform: uppercase;
	font-size: var(--gmp-font-size-xs);
	letter-spacing: 0.05em;
}

.daaz_gmp_table tbody tr {
	transition: background var(--gmp-transition-fast);
}

.daaz_gmp_table tbody tr:hover {
	background: var(--gmp-bg-secondary);
}

.daaz_gmp_table tbody tr:last-child td {
	border-bottom: none;
}

/* --- Loading Skeleton --- */
.gmp-skeleton {
	background: linear-gradient(
		90deg,
		var(--gmp-bg-secondary) 0%,
		var(--gmp-bg-tertiary) 50%,
		var(--gmp-bg-secondary) 100%
	);
	background-size: 200% 100%;
	animation: gmp-shimmer 1.5s infinite;
	border-radius: var(--gmp-radius-sm);
}

.gmp-skeleton-card {
	height: 200px;
	border-radius: var(--gmp-radius-lg);
}

.gmp-skeleton-text {
	height: 1rem;
	margin-bottom: var(--gmp-space-sm);
}

.gmp-skeleton-text.short {
	width: 60%;
}

@keyframes gmp-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* --- Toast Notifications --- */
.gmp-toast {
	position: fixed;
	bottom: var(--gmp-space-lg);
	right: var(--gmp-space-lg);
	background: var(--gmp-bg-primary);
	border: 1px solid var(--gmp-border);
	border-radius: var(--gmp-radius-lg);
	padding: var(--gmp-space-md) var(--gmp-space-lg);
	box-shadow: var(--gmp-shadow-xl);
	display: flex;
	align-items: center;
	gap: var(--gmp-space-md);
	max-width: 400px;
	z-index: 9999;
	animation: gmp-toast-slide-in 0.3s ease;
}

.gmp-toast.success {
	border-left: 4px solid var(--gmp-success);
}

.gmp-toast.error {
	border-left: 4px solid var(--gmp-danger);
}

.gmp-toast-message {
	flex: 1;
	font-size: var(--gmp-font-size-sm);
	color: var(--gmp-text-primary);
}

@keyframes gmp-toast-slide-in {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* ========================================
   5. UTILITIES
   ======================================== */

/* Spacing */
.gmp-mt-0 { margin-top: 0; }
.gmp-mt-sm { margin-top: var(--gmp-space-sm); }
.gmp-mt-md { margin-top: var(--gmp-space-md); }
.gmp-mt-lg { margin-top: var(--gmp-space-lg); }
.gmp-mt-xl { margin-top: var(--gmp-space-xl); }

.gmp-mb-sm { margin-bottom: var(--gmp-space-sm); }
.gmp-mb-md { margin-bottom: var(--gmp-space-md); }
.gmp-mb-lg { margin-bottom: var(--gmp-space-lg); }

.gmp-p-md { padding: var(--gmp-space-md); }
.gmp-p-lg { padding: var(--gmp-space-lg); }

/* Text */
.gmp-text-center { text-align: center; }
.gmp-text-right { text-align: right; }

.gmp-font-bold { font-weight: 600; }
.gmp-font-mono { font-family: var(--gmp-font-mono); }

.gmp-text-sm { font-size: var(--gmp-font-size-sm); }
.gmp-text-lg { font-size: var(--gmp-font-size-lg); }
.gmp-text-xl { font-size: var(--gmp-font-size-xl); }

.gmp-text-primary { color: var(--gmp-text-primary); }
.gmp-text-secondary { color: var(--gmp-text-secondary); }
.gmp-text-success { color: var(--gmp-success); }
.gmp-text-danger { color: var(--gmp-danger); }

/* Flex */
.gmp-flex { display: flex; }
.gmp-flex-col { flex-direction: column; }
.gmp-flex-wrap { flex-wrap: wrap; }
.gmp-items-center { align-items: center; }
.gmp-justify-between { justify-content: space-between; }
.gmp-gap-sm { gap: var(--gmp-space-sm); }
.gmp-gap-md { gap: var(--gmp-space-md); }

/* ========================================
   6. DARK MODE TOGGLE
   ======================================== */

.gmp-theme-toggle {
	position: fixed;
	bottom: var(--gmp-space-lg);
	left: var(--gmp-space-lg);
	background: var(--gmp-bg-primary);
	border: 1px solid var(--gmp-border);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--gmp-shadow-lg);
	z-index: 9998;
	transition: all var(--gmp-transition-base);
}

.gmp-theme-toggle:hover {
	transform: scale(1.1);
	box-shadow: var(--gmp-shadow-xl);
}

.gmp-theme-toggle-icon {
	font-size: var(--gmp-font-size-xl);
}

/* ========================================
   7. RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
	.gmp-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gmp-grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.gmp-grid-cols-4,
	.gmp-grid-cols-3,
	.gmp-grid-cols-2 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.gmp-card {
		padding: var(--gmp-space-md);
	}

	.gmp-card-stats {
		flex-direction: column;
		gap: var(--gmp-space-sm);
	}

	.gmp-chart-container {
		padding: var(--gmp-space-md);
	}

	.gmp-chart-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gmp-space-md);
	}

	.gmp-chart-timeframes {
		width: 100%;
		justify-content: space-between;
	}

	.gmp-toast {
		left: var(--gmp-space-md);
		right: var(--gmp-space-md);
		bottom: var(--gmp-space-md);
		max-width: none;
	}

	/* Table to Cards on Mobile */
	.daaz_gmp_table thead {
		display: none;
	}

	.daaz_gmp_table,
	.daaz_gmp_table tbody,
	.daaz_gmp_table tr,
	.daaz_gmp_table td {
		display: block;
		width: 100%;
	}

	.daaz_gmp_table tr {
		margin-bottom: var(--gmp-space-md);
		border: 1px solid var(--gmp-border);
		border-radius: var(--gmp-radius-md);
		padding: var(--gmp-space-md);
	}

	.daaz_gmp_table td {
		text-align: right;
		padding-left: 50%;
		position: relative;
		border: none;
	}

	.daaz_gmp_table td::before {
		content: attr(data-label);
		position: absolute;
		left: var(--gmp-space-md);
		font-weight: 600;
		text-transform: uppercase;
		font-size: var(--gmp-font-size-xs);
		color: var(--gmp-text-tertiary);
	}
}

/* Sparkline wrapper */
.daaz-gmp-sparkline-wrapper {
	display: inline-block;
	vertical-align: middle;
	margin: 0 4px;
}

/* Responsive full-width wrapper */
.daaz-gmp-sparkline-wrapper.fullwidth {
	display: block;
	width: 100%;
}

/* Float helpers for small-space placement */
.daaz-gmp-sparkline-wrapper.float-left { float: left; margin-right: 8px; }
.daaz-gmp-sparkline-wrapper.float-right { float: right; margin-left: 8px; }

/* Ensure canvas fits the wrapper when fullwidth */
.daaz-gmp-sparkline-wrapper.fullwidth canvas { width: 100% !important; height: auto !important; display: block; }

/* Clearfix helper if needed */
.daaz-gmp-sparkline-wrapper::after { content: ''; display: table; clear: both; }

/* Center helper for fixed-width sparklines */
.daaz-gmp-sparkline-wrapper.center { display: block; margin-left: auto; margin-right: auto; }

/* Sparkline label */
.daaz-gmp-sparkline-label { font-size:12px; color:#222; display:inline-block; vertical-align:middle; }
.daaz-gmp-sparkline-label.top { display:block; text-align:center; margin-bottom:6px; }
.daaz-gmp-sparkline-value { color:#666; font-weight:600; margin-left:6px; font-size:12px; }

/* Ensure label and canvas align when wrapper floats */
.daaz-gmp-sparkline-wrapper.float-left .daaz-gmp-sparkline-label,
.daaz-gmp-sparkline-wrapper.float-right .daaz-gmp-sparkline-label { display:inline-block; }

.daaz-gmp-sparkline-wrapper canvas {
	display: block;
}

.daaz-gmp-sparkline-error {
	display: inline-block;
	font-size: 14px;
	color: #dc2626;
}

/* ========================================
   ETF Volumes Shortcode
   ======================================== */
.gmp-etf-tabs{list-style:none;padding:0;display:flex;gap:6px;margin-bottom:8px}
.gmp-etf-tab{cursor:pointer;padding:8px 12px;border:1px solid #ddd;border-radius:4px;background:#f7f7f7;font-weight:600}
.gmp-etf-tab.active{background:#fff;border-color:#ccc}
.gmp-etf-panel-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.gmp-etf-flow-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:640px}
.gmp-etf-flow-table th,.gmp-etf-flow-table td{border:1px solid #eee;padding:8px 6px;background:#fff;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:90px}
.gmp-etf-flow-table th{background:#fafafa;font-weight:700;text-align:center}
.gmp-etf-panel-inner table thead th{position:sticky;top:0;z-index:2}
@media(max-width:1200px){.gmp-etf-flow-table th,.gmp-etf-flow-table td{min-width:80px;padding:6px 4px}}
@media(max-width:800px){.gmp-etf-flow-table{min-width:480px}.gmp-etf-flow-table th,.gmp-etf-flow-table td{min-width:64px;padding:4px 6px;font-size:.9em}.gmp-etf-tabs{flex-wrap:wrap}}