/* ==========================================================================
   Stats Card
   ========================================================================== */

.wc-stats-card {

	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;

	padding: 1.5rem;

	background: var(--wc-color-surface);

	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);

	box-shadow: var(--wc-shadow-sm);

	transition: var(--wc-transition);

}

.wc-stats-card:hover {

	transform: translateY(-2px);

	box-shadow: var(--wc-shadow-md);

}

.wc-stats-card__content {

	flex: 1;
	min-width: 0;

}

.wc-stats-card__label {

	display: block;

	margin-bottom: .5rem;

	font-size: .875rem;
	font-weight: 500;

	color: var(--wc-color-text-light);

}

.wc-stats-card__value {

	margin: 0;

	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;

	color: var(--wc-color-text);

}

.wc-stats-card__footer {

	display: flex;
	align-items: center;
	gap: .5rem;

	flex-wrap: wrap;

	margin-top: 1rem;

	font-size: .875rem;

	color: var(--wc-color-text-light);

}

.wc-stats-card__trend {

	display: inline-flex;
	align-items: center;
	gap: .25rem;

	font-weight: 600;

}

.wc-stats-card__trend--positive {

	color: var(--wc-color-success);

}

.wc-stats-card__trend--negative {

	color: var(--wc-color-danger);

}

.wc-stats-card__trend--neutral {

	color: var(--wc-color-warning);

}

.wc-stats-card__icon {

	display: flex;
	align-items: center;
	justify-content: center;

	width: 56px;
	height: 56px;

	border-radius: var(--wc-radius-lg);

	background: rgba(184, 144, 91, .10);

	color: var(--wc-color-primary);

	flex-shrink: 0;

}

.wc-stats-card__icon svg,
.wc-stats-card__icon i {

	width: 24px;
	height: 24px;

}

/* ==========================================================================
   Compact
   ========================================================================== */

.wc-stats-card--compact {

	padding: 1.25rem;

}

.wc-stats-card--compact .wc-stats-card__value {

	font-size: 1.5rem;

}

.wc-stats-card--compact .wc-stats-card__icon {

	width: 48px;
	height: 48px;

}

/* ==========================================================================
   Large
   ========================================================================== */

.wc-stats-card--lg {

	padding: 2rem;

}

.wc-stats-card--lg .wc-stats-card__value {

	font-size: 2.5rem;

}

/* ==========================================================================
   Clickable
   ========================================================================== */

.wc-stats-card--clickable {

	cursor: pointer;

}

.wc-stats-card--clickable:hover {

	border-color: var(--wc-color-primary);

}

/* ==========================================================================
   Icon Variants
   ========================================================================== */

.wc-stats-card__icon--primary {

	background: rgba(184, 144, 91, .10);
	color: var(--wc-color-primary);

}

.wc-stats-card__icon--success {

	background: rgba(22, 163, 74, .12);
	color: var(--wc-color-success);

}

.wc-stats-card__icon--warning {

	background: rgba(245, 158, 11, .14);
	color: var(--wc-color-warning);

}

.wc-stats-card__icon--danger {

	background: rgba(220, 38, 38, .12);
	color: var(--wc-color-danger);

}

.wc-stats-card__icon--info {

	background: rgba(37, 99, 235, .12);
	color: var(--wc-color-info);

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {

	.wc-stats-card {

		padding: 1.25rem;

	}

	.wc-stats-card__value {

		font-size: 1.75rem;

	}

	.wc-stats-card__icon {

		width: 48px;
		height: 48px;

	}

	.wc-stats-card--lg {

		padding: 1.5rem;

	}

	.wc-stats-card--lg .wc-stats-card__value {

		font-size: 2rem;

	}

}