.cslp-loyalty-panel {
	--cslp-accent: #6f55d9;
	--cslp-accent-2: #8f7df0;
	--cslp-good: #2f7d59;
	--cslp-danger: #b42318;
	--cslp-line: #e7e3f4;
	--cslp-muted: #77758a;
	--cslp-soft: #f7f4ff;
	--cslp-text: #202033;
	color: var(--cslp-text);
	display: grid;
	gap: 18px;
	width: 100%;
}

.cslp-loyalty-panel--notice,
.cslp-checkout-box--notice {
	background: #fff;
	border: 1px solid var(--cslp-line, #e7e3f4);
	border-radius: 10px;
	color: var(--cslp-muted, #77758a);
	padding: 16px;
}

.cslp-loyalty-hero {
	align-items: stretch;
	background:
		linear-gradient(135deg, rgba(111, 85, 217, 0.13), rgba(143, 125, 240, 0.04)),
		#fff;
	border: 1px solid var(--cslp-line);
	border-radius: 14px;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 22px;
}

.cslp-loyalty-hero__content {
	display: grid;
	gap: 7px;
}

.cslp-loyalty-panel__label {
	color: var(--cslp-muted);
	font-size: 14px;
}

.cslp-loyalty-panel__points {
	color: var(--cslp-text);
	font-size: 44px;
	letter-spacing: 0;
	line-height: 1;
}

.cslp-loyalty-hero__hint {
	color: var(--cslp-muted);
	font-size: 14px;
	line-height: 1.45;
}

.cslp-loyalty-hero__badge {
	align-content: center;
	background: #fff;
	border: 1px solid rgba(111, 85, 217, 0.16);
	border-radius: 12px;
	display: grid;
	gap: 5px;
	min-width: 128px;
	padding: 14px 16px;
	text-align: center;
}

.cslp-loyalty-hero__badge span {
	color: var(--cslp-muted);
	font-size: 13px;
}

.cslp-loyalty-hero__badge strong {
	color: var(--cslp-accent);
	font-size: 18px;
}

.cslp-loyalty-stats {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cslp-loyalty-stat {
	background: #fff;
	border: 1px solid var(--cslp-line);
	border-radius: 12px;
	display: grid;
	gap: 7px;
	padding: 18px;
}

.cslp-loyalty-stat span {
	color: var(--cslp-muted);
	font-size: 14px;
}

.cslp-loyalty-stat strong {
	color: var(--cslp-text);
	font-size: 24px;
	line-height: 1.1;
}

.cslp-loyalty-stat small {
	color: var(--cslp-muted);
	font-size: 13px;
	line-height: 1.35;
}

.cslp-loyalty-rules {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cslp-loyalty-rules > div {
	background: var(--cslp-soft);
	border: 1px solid var(--cslp-line);
	border-radius: 12px;
	padding: 16px;
}

.cslp-loyalty-rules strong {
	display: block;
	font-size: 15px;
	margin-bottom: 6px;
}

.cslp-loyalty-rules p {
	color: var(--cslp-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.cslp-loyalty-history-summary {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cslp-loyalty-history-summary > div {
	background: #fff;
	border: 1px solid var(--cslp-line);
	border-radius: 12px;
	display: grid;
	gap: 6px;
	padding: 16px;
}

.cslp-loyalty-history-summary span {
	color: var(--cslp-muted);
	font-size: 13px;
}

.cslp-loyalty-history-summary strong {
	color: var(--cslp-text);
	font-size: 22px;
	line-height: 1.1;
}

.cslp-loyalty-panel__history {
	display: grid;
	gap: 12px;
}

.cslp-loyalty-panel__history h3 {
	font-size: 20px;
	line-height: 1.25;
	margin: 0;
}

.cslp-loyalty-timeline {
	display: grid;
	gap: 10px;
}

.cslp-loyalty-event {
	align-items: center;
	background: #fff;
	border: 1px solid var(--cslp-line);
	border-radius: 12px;
	display: grid;
	gap: 12px;
	grid-template-columns: 36px minmax(0, 1fr);
	padding: 14px;
}

.cslp-loyalty-event__mark {
	align-items: center;
	background: #eef8f2;
	border-radius: 999px;
	color: var(--cslp-good);
	display: inline-flex;
	font-size: 20px;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.cslp-loyalty-event.is-negative .cslp-loyalty-event__mark {
	background: #fff0ee;
	color: var(--cslp-danger);
}

.cslp-loyalty-event__body {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.cslp-loyalty-event__top,
.cslp-loyalty-event__meta {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.cslp-loyalty-event__top strong {
	font-size: 15px;
	line-height: 1.3;
}

.cslp-loyalty-event__top span {
	color: var(--cslp-good);
	font-size: 18px;
	font-weight: 800;
	white-space: nowrap;
}

.cslp-loyalty-event.is-negative .cslp-loyalty-event__top span {
	color: var(--cslp-danger);
}

.cslp-loyalty-event__meta {
	color: var(--cslp-muted);
	font-size: 13px;
	justify-content: flex-start;
	line-height: 1.35;
}

.cslp-loyalty-event__meta a {
	color: var(--cslp-accent);
	text-decoration: none;
}

.cslp-loyalty-empty {
	background: #fff;
	border: 1px dashed var(--cslp-line);
	border-radius: 12px;
	display: grid;
	gap: 5px;
	padding: 20px;
}

.cslp-loyalty-empty strong {
	color: var(--cslp-text);
}

.cslp-loyalty-empty span {
	color: var(--cslp-muted);
	font-size: 14px;
	line-height: 1.45;
}

.cslp-checkout-box {
	border: 1px solid #e2e5e9;
	border-radius: 8px;
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
	padding: 14px;
}

.cslp-checkout-box label {
	font-weight: 600;
	line-height: 1.35;
}

.cslp-checkout-box input {
	max-width: 180px;
}

@media (max-width: 800px) {
	.cslp-loyalty-hero,
	.cslp-loyalty-stats,
	.cslp-loyalty-rules,
	.cslp-loyalty-history-summary {
		grid-template-columns: 1fr;
	}

	.cslp-loyalty-hero__badge {
		text-align: left;
	}
}

@media (max-width: 560px) {
	.cslp-loyalty-panel__points {
		font-size: 36px;
	}

	.cslp-loyalty-event {
		align-items: flex-start;
	}

	.cslp-loyalty-event__top,
	.cslp-loyalty-event__meta {
		align-items: flex-start;
		flex-direction: column;
	}
}