/* Complice Rewards — customer-facing rewards page */
.cr-account { --cr-accent: #111; --cr-line: #e4e4e4; }

.cr-hero {
	display: flex; flex-wrap: wrap; gap: 24px;
	border: 1px solid var(--cr-line); border-radius: 6px;
	padding: 20px 24px; margin-bottom: 24px;
}
.cr-hero > div { flex: 1 1 180px; }
.cr-hero strong { display: block; font-size: 1.9em; line-height: 1.2; }
.cr-hero small { color: #767676; }
.cr-label { display: block; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: #767676; margin-bottom: 4px; }

.cr-progress { margin-bottom: 28px; }
.cr-progress-head { display: flex; justify-content: space-between; font-size: .9em; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.cr-bar { background: #f0f0f0; border-radius: 999px; height: 8px; overflow: hidden; }
.cr-bar > span { display: block; height: 100%; background: var(--cr-accent); border-radius: 999px; transition: width .4s ease; }
.cr-max { font-weight: 600; }

.cr-account h3 { margin: 32px 0 12px; }
.cr-empty { color: #767676; }

.cr-table { width: 100%; border-collapse: collapse; }
.cr-table th, .cr-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cr-line); }
.cr-table th { font-size: .8em; text-transform: uppercase; letter-spacing: .05em; color: #767676; }
.cr-code { background: #f6f6f6; padding: 4px 8px; border-radius: 4px; font-size: .95em; letter-spacing: .04em; user-select: all; }
.cr-hint { font-size: .85em; color: #767676; margin-top: 8px; }

.cr-redeem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.cr-card { border: 1px solid var(--cr-line); border-radius: 6px; padding: 18px; text-align: center; }
.cr-card.is-locked { opacity: .55; }
.cr-card-value { font-size: 1.7em; font-weight: 700; line-height: 1.1; }
.cr-card-cost { margin-top: 4px; font-size: .9em; color: #767676; }
.cr-card-min { margin-top: 6px; font-size: .8em; color: #767676; }
.cr-card form { margin: 14px 0 0; }
.cr-locked-reason { display: block; margin-top: 14px; font-size: .82em; color: #767676; }

@media (max-width: 480px) {
	.cr-hero { padding: 16px; }
	.cr-hero strong { font-size: 1.5em; }
}