/**
 * Stats Card widget styles.
 *
 * One stat per card. Four presets share identical markup; only modifier
 * classes change appearance. Layout is driven by CSS custom properties and
 * logical flexbox properties so LTR/RTL and every icon-position combination
 * work without hardcoded left/right values.
 */

.dea-stats-card {
	--dea-sc-align: center;
	--dea-sc-duration: 300ms;
	--dea-sc-lift: 0px;
	--dea-sc-grad-a: #6366f1;
	--dea-sc-grad-b: #ec4899;
	--dea-sc-grad-angle: 135deg;
	--dea-sc-accent: #6366f1;

	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	transition: transform var(--dea-sc-duration) ease, box-shadow var(--dea-sc-duration) ease,
		background-color var(--dea-sc-duration) ease, border-color var(--dea-sc-duration) ease;
}

.dea-stats-card * {
	box-sizing: border-box;
}

/* Whole-card link should not look like a link by default. */
.dea-stats-card--linked {
	text-decoration: none;
	color: inherit;
}

/* Alignment is applied to both axes from a single var. In the default
   column layout, align-items controls the horizontal placement; in row
   layouts (icon start/end), justify-content controls it. Center — the
   default — looks correct in every combination, so no per-direction
   branching (and no fragile attribute selectors) is needed. */
.dea-stats-card__inner {
	display: flex;
	flex-direction: column;
	align-items: var(--dea-sc-align);
	justify-content: var(--dea-sc-align);
	gap: 16px;
	width: 100%;
}

.dea-stats-card__content {
	min-width: 0;
}

/* ── Icon ───────────────────────────────────────────── */

.dea-stats-card__icon {
	--dea-sc-icon-size: 40px;
	--dea-sc-icon-x: 0px;
	--dea-sc-icon-y: 0px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
	color: var(--dea-sc-accent);
	transform: translate(var(--dea-sc-icon-x), var(--dea-sc-icon-y));
}

.dea-stats-card__icon svg,
.dea-stats-card__icon i {
	width: var(--dea-sc-icon-size);
	height: var(--dea-sc-icon-size);
	font-size: var(--dea-sc-icon-size);
	display: block;
}

.dea-stats-card__icon i {
	width: auto;
	height: auto;
}

/* ── Number ─────────────────────────────────────────── */

.dea-stats-card__number {
	display: flex;
	align-items: baseline;
	justify-content: var(--dea-sc-align);
	flex-wrap: wrap;
	gap: 0.05em;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.1;
	color: #111827;
	margin-block-end: 8px;
}

.dea-stats-card--gradient-number .dea-stats-card__number {
	background-image: linear-gradient(var(--dea-sc-grad-angle), var(--dea-sc-grad-a), var(--dea-sc-grad-b));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.dea-stats-card--stroke-number .dea-stats-card__number {
	-webkit-text-fill-color: currentColor;
}

/* ── Title & description ────────────────────────────── */

.dea-stats-card__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: #1f2937;
}

.dea-stats-card__description {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #6b7280;
}

/* ═══════════════════════════════════════════════════════
   PRESET: MINIMAL
   ═══════════════════════════════════════════════════════ */

.dea-stats-card--minimal {
	background: transparent;
	padding: 8px;
}

/* ═══════════════════════════════════════════════════════
   PRESET: CARD
   ═══════════════════════════════════════════════════════ */

.dea-stats-card--card {
	background: #ffffff;
	border: 1px solid #eef0f4;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

.dea-stats-card--card:hover {
	box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 16px 40px rgba(16, 24, 40, 0.1);
}

/* ═══════════════════════════════════════════════════════
   PRESET: ACCENT
   ═══════════════════════════════════════════════════════ */

.dea-stats-card--accent {
	background: #ffffff;
	border: 1px solid #eef0f4;
	border-inline-start: 4px solid var(--dea-sc-accent);
	border-radius: 12px;
	padding: 26px 28px;
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
}

.dea-stats-card--accent .dea-stats-card__icon {
	color: #ffffff;
	background: var(--dea-sc-accent);
	padding: 14px;
	border-radius: 12px;
}

.dea-stats-card--accent .dea-stats-card__icon svg {
	fill: #ffffff;
}

/* ═══════════════════════════════════════════════════════
   PRESET: GLASS
   ═══════════════════════════════════════════════════════ */

.dea-stats-card--glass {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 8px 32px rgba(16, 24, 40, 0.18);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
}

.dea-stats-card--glass .dea-stats-card__number {
	color: #ffffff;
}

.dea-stats-card--glass .dea-stats-card__title {
	color: #f9fafb;
}

.dea-stats-card--glass .dea-stats-card__description {
	color: rgba(249, 250, 251, 0.78);
}

.dea-stats-card--glass .dea-stats-card__icon {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.18);
	padding: 14px;
	border-radius: 14px;
}

.dea-stats-card--glass .dea-stats-card__icon svg {
	fill: #ffffff;
}

/* ═══════════════════════════════════════════════════════
   HOVER LIFT (applies to any preset when configured)
   ═══════════════════════════════════════════════════════ */

.dea-stats-card--linked:hover,
.dea-stats-card:hover {
	transform: translateY(var(--dea-sc-lift));
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.dea-stats-card {
		transition: none;
	}
}