/* Customer dashboard theme. Network admins configure the base palette in General Settings. */

.kd-bonus-dashboard {
	--kd-primary-soft: color-mix(in srgb, var(--kd-primary, #2271b1) 12%, var(--kd-surface, #fff));
	--kd-secondary-soft: color-mix(in srgb, var(--kd-secondary, #0a4b78) 10%, var(--kd-surface, #fff));
	--kd-accent-soft: color-mix(in srgb, var(--kd-accent, #8c5cff) 12%, var(--kd-surface, #fff));
	color: var(--kd-text, #1d2327);
	background: var(--kd-background, #f6f7f7);
	border-radius: 12px;
	padding: 20px;
}

.kd-bonus-dashboard h2,
.kd-bonus-dashboard h3,
.kd-bonus-dashboard strong {
	color: var(--kd-text, #1d2327);
}

.kd-bonus-dashboard h2 {
	border-bottom: 3px solid var(--kd-primary, #2271b1);
	padding-bottom: 10px;
}

.kd-bonus-dashboard h3 {
	margin-top: 24px;
	color: var(--kd-secondary, #0a4b78);
}

.kd-bonus-dashboard a {
	color: var(--kd-primary, #2271b1);
}

.kd-bonus-dashboard a:hover,
.kd-bonus-dashboard a:focus {
	color: var(--kd-secondary, #0a4b78);
}

.kd-bonus-dashboard__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.kd-bonus-dashboard__card {
	padding: 16px;
	border: 1px solid var(--kd-border, #dcdcde);
	border-radius: 10px;
	background: var(--kd-surface, #fff);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--kd-text, #1d2327) 8%, transparent);
}

.kd-bonus-dashboard__card:nth-child(3n+1) {
	border-top: 4px solid var(--kd-primary, #2271b1);
}

.kd-bonus-dashboard__card:nth-child(3n+2) {
	border-top: 4px solid var(--kd-secondary, #0a4b78);
}

.kd-bonus-dashboard__card:nth-child(3n) {
	border-top: 4px solid var(--kd-accent, #8c5cff);
}

.kd-bonus-dashboard__card p {
	color: var(--kd-muted, #646970);
}

.kd-bonus-dashboard .shop_table {
	background: var(--kd-surface, #fff);
	border-color: var(--kd-border, #dcdcde);
}

.kd-bonus-dashboard .shop_table th {
	background: var(--kd-secondary-soft);
	color: var(--kd-secondary, #0a4b78);
}

.kd-bonus-dashboard .shop_table th,
.kd-bonus-dashboard .shop_table td {
	border-color: var(--kd-border, #dcdcde);
}

.kd-bonus-tier-indicator {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.kd-bonus-tier-indicator__pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 100px;
	padding: 10px 16px;
	border: 2px solid var(--kd-border, #dcdcde);
	border-radius: 24px;
	background: var(--kd-surface, #fff);
	color: var(--kd-text, #1d2327);
	text-align: center;
	font-size: 0.875rem;
	transition: border-color .15s, background .15s, transform .15s;
}

.kd-bonus-tier-indicator__pill--completed {
	border-color: var(--kd-primary, #2271b1);
	background: var(--kd-primary-soft);
	color: var(--kd-primary, #2271b1);
}

.kd-bonus-tier-indicator__pill--current {
	border-color: var(--kd-secondary, #0a4b78);
	background: var(--kd-primary, #2271b1);
	color: var(--kd-on-primary, #fff);
	font-weight: 700;
	box-shadow: 0 2px 7px color-mix(in srgb, var(--kd-primary, #2271b1) 30%, transparent);
	transform: translateY(-1px);
}

.kd-bonus-tier-indicator__pill--current .kd-bonus-tier-indicator__name,
.kd-bonus-tier-indicator__pill--current .kd-bonus-tier-indicator__meta,
.kd-bonus-tier-indicator__pill--current .kd-bonus-tier-indicator__badge {
	color: inherit;
}

.kd-bonus-tier-indicator__pill--future {
	border-color: var(--kd-border, #dcdcde);
	background: color-mix(in srgb, var(--kd-background, #f6f7f7) 72%, var(--kd-surface, #fff));
	color: var(--kd-muted, #646970);
}

.kd-bonus-tier-indicator__name {
	display: block;
	font-size: .9em;
	font-weight: 600;
}

.kd-bonus-tier-indicator__meta {
	display: block;
	font-size: .78em;
	margin-top: 4px;
	opacity: .85;
}

.kd-bonus-tier-indicator__badge {
	display: block;
	font-size: 1.1em;
	line-height: 1;
	margin-bottom: 4px;
	color: var(--kd-accent, #8c5cff);
}

.kd-bonus-dashboard button,
.kd-bonus-dashboard .button,
.kd-bonus-dashboard input[type="submit"] {
	background: var(--kd-primary, #2271b1);
	border-color: var(--kd-primary, #2271b1);
	color: var(--kd-on-primary, #fff);
}

.kd-bonus-dashboard button:hover,
.kd-bonus-dashboard .button:hover,
.kd-bonus-dashboard input[type="submit"]:hover {
	background: var(--kd-secondary, #0a4b78);
	border-color: var(--kd-secondary, #0a4b78);
	color: var(--kd-on-secondary, #fff);
}

@media (max-width: 480px) {
	.kd-bonus-dashboard {
		padding: 14px;
	}

	.kd-bonus-tier-indicator {
		flex-direction: column;
	}

	.kd-bonus-tier-indicator__pill {
		min-width: 0;
		width: 100%;
		border-radius: 10px;
	}
}