/**
 * Controlfy Rewards — Frontend Styles
 * Compatible con el tema oscuro Controlfy Shop.
 * Usa CSS variables del tema para maxima compatibilidad.
 */

/* ================================================================
   BASE RESET
   ================================================================ */

.cr-dashboard *,
.cr-checkout-widget *,
.cr-thankyou-points * {
	box-sizing: border-box;
}

/* ================================================================
   DASHBOARD WRAPPER
   ================================================================ */

.cr-dashboard {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ================================================================
   HEADER: BALANCE + TIER
   ================================================================ */

.cr-dashboard-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 768px) {
	.cr-dashboard-header {
		grid-template-columns: 1fr;
	}
}

/* Balance Card */
.cr-balance-card {
	background: var(--color-bg-primary, #09090b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 12px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cr-balance-card__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted, #71717a);
}

.cr-balance-card__value {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.cr-balance-number {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--color-accent, #ffffff);
}

.cr-balance-label {
	font-size: 1rem;
	color: var(--color-text-secondary, #a1a1aa);
	font-weight: 500;
}

.cr-balance-card__sub {
	font-size: 0.875rem;
	color: var(--color-text-secondary, #a1a1aa);
}

.cr-balance-card__sub strong {
	color: var(--color-success, #22c55e);
}

/* Tier Card */
.cr-tier-card {
	background: var(--color-bg-primary, #09090b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 12px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cr-tier-card__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted, #71717a);
}

.cr-tier-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	border-radius: 9999px;
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 1rem;
	background: color-mix(in srgb, var(--tier-color, #6366f1) 15%, transparent);
	color: var(--tier-color, #6366f1);
	border: 1px solid color-mix(in srgb, var(--tier-color, #6366f1) 40%, transparent);
	align-self: flex-start;
}

.cr-tier-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tier-color, #6366f1);
}

/* Progress bar */
.cr-tier-progress {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cr-tier-progress__header,
.cr-tier-progress__footer {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--color-text-secondary, #a1a1aa);
}

.cr-tier-progress-bar {
	background: var(--color-bg-elevated, #27272a);
	border-radius: 9999px;
	height: 8px;
	overflow: hidden;
}

.cr-tier-progress-fill {
	background: var(--tier-color, var(--color-accent, #ffffff));
	height: 100%;
	border-radius: 9999px;
	transition: width 0.7s ease-out;
	min-width: 4px;
}

.cr-tier-progress__footer strong {
	color: var(--color-text-primary, #fafafa);
}

.cr-tier-max {
	font-size: 0.875rem;
	color: var(--color-success, #22c55e);
}

/* Tier benefits */
.cr-tier-benefits {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-top: 0.25rem;
}

.cr-tier-benefit {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--color-text-secondary, #a1a1aa);
}

.cr-benefit-icon {
	width: 18px;
	text-align: center;
}

/* ================================================================
   STATS ROW
   ================================================================ */

.cr-stats-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.cr-stat-card {
	flex: 1;
	min-width: 120px;
	background: var(--color-bg-surface, #18181b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	text-align: center;
}

.cr-stat-card--warning {
	border-color: var(--color-warning, #f59e0b);
}

.cr-stat-value {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--color-text-primary, #fafafa);
}

.cr-stat-label {
	font-size: 0.75rem;
	color: var(--color-text-muted, #71717a);
	margin-top: 0.25rem;
}

.cr-stat-card--warning .cr-stat-value {
	color: var(--color-warning, #f59e0b);
}

/* ================================================================
   SECTIONS
   ================================================================ */

.cr-section {
	background: var(--color-bg-surface, #18181b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 12px;
	padding: 1.5rem;
}

.cr-section-title {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-text-primary, #fafafa);
	margin: 0 0 1rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-bg-elevated, #27272a);
}

/* ================================================================
   HISTORY TABLE
   ================================================================ */

.cr-history-wrap {
	overflow-x: auto;
}

.cr-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.cr-history-table th {
	text-align: left;
	color: var(--color-text-muted, #71717a);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.625rem 0.5rem;
	border-bottom: 1px solid var(--color-bg-elevated, #27272a);
	white-space: nowrap;
}

.cr-history-table td {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--color-bg-elevated, #27272a);
	color: var(--color-text-secondary, #a1a1aa);
	vertical-align: middle;
}

.cr-history-table tr:last-child td {
	border-bottom: none;
}

.cr-history-table tbody tr:hover td {
	background: var(--color-bg-elevated, #27272a);
}

.cr-date {
	white-space: nowrap;
	font-size: 0.8rem;
}

.cr-desc {
	color: var(--color-text-primary, #fafafa) !important;
}

.cr-balance-after {
	color: var(--color-text-muted, #71717a) !important;
	font-size: 0.8rem;
}

.cr-text-right {
	text-align: right !important;
}

.cr-points-positive { color: var(--color-success, #22c55e) !important; font-weight: 600; }
.cr-points-negative { color: var(--color-danger, #ef4444) !important; font-weight: 600; }
.cr-points-expired  { color: var(--color-text-muted, #71717a) !important; }

/* Pagination */
.cr-pagination {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

/* ================================================================
   ACHIEVEMENTS GRID
   ================================================================ */

.cr-achievements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.75rem;
}

.cr-achievement {
	background: var(--color-bg-primary, #09090b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 10px;
	padding: 1rem 0.75rem;
	text-align: center;
	transition: border-color 0.2s, transform 0.2s;
}

.cr-achievement:hover {
	transform: translateY(-2px);
}

.cr-achievement.unlocked {
	border-color: var(--color-accent, #ffffff);
}

.cr-achievement.locked {
	opacity: 0.4;
	filter: grayscale(1);
}

.cr-achievement__icon {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

.cr-achievement__name {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-primary, #fafafa);
	margin-bottom: 0.25rem;
}

.cr-achievement__desc {
	font-size: 0.7rem;
	color: var(--color-text-muted, #71717a);
	line-height: 1.3;
	margin-bottom: 0.25rem;
}

.cr-achievement__reward {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-success, #22c55e);
}

.cr-achievement__date {
	font-size: 0.65rem;
	color: var(--color-text-muted, #71717a);
	margin-top: 0.25rem;
}

/* ================================================================
   REFERRALS
   ================================================================ */

.cr-referral-wrap {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cr-referral-desc {
	font-size: 0.875rem;
	color: var(--color-text-secondary, #a1a1aa);
	margin: 0;
}

.cr-referral-link-wrap {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.cr-referral-link-input {
	flex: 1;
	background: var(--color-bg-primary, #09090b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 8px;
	padding: 0.625rem 0.875rem;
	color: var(--color-text-secondary, #a1a1aa);
	font-size: 0.8rem;
	font-family: monospace;
	outline: none;
}

.cr-referral-link-input:focus {
	border-color: var(--color-accent, #ffffff);
}

.cr-share-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.cr-share-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s;
}

.cr-share-btn:hover { opacity: 0.85; }

.cr-share-whatsapp {
	background: #25d366;
	color: #fff;
}

.cr-share-email {
	background: var(--color-bg-elevated, #27272a);
	color: var(--color-text-primary, #fafafa);
	border: 1px solid var(--color-bg-elevated, #27272a);
}

.cr-referral-stats {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.cr-referral-stat {
	flex: 1;
	min-width: 80px;
	background: var(--color-bg-primary, #09090b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 8px;
	padding: 0.875rem;
	text-align: center;
}

.cr-referral-stat__value {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-text-primary, #fafafa);
}

.cr-referral-stat__label {
	font-size: 0.7rem;
	color: var(--color-text-muted, #71717a);
	margin-top: 0.25rem;
}

/* Status badges */
.cr-status {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.2rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.7rem;
	font-weight: 600;
}

.cr-status--converted { background: color-mix(in srgb, var(--color-success, #22c55e) 15%, transparent); color: var(--color-success, #22c55e); }
.cr-status--registered,
.cr-status--claimed { background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent); color: var(--color-warning, #f59e0b); }
.cr-status--pending { background: var(--color-bg-elevated, #27272a); color: var(--color-text-muted, #71717a); }
.cr-status--fraud,
.cr-status--reverted { background: color-mix(in srgb, var(--color-danger, #ef4444) 12%, transparent); color: var(--color-danger, #ef4444); }

/* ================================================================
   REFERIDOS: como funciona (mini onboarding)
   ================================================================ */

.cr-referral-howto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.375rem;
	background: var(--color-bg-primary, #09090b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 10px;
	padding: 0.875rem 1rem;
}

.cr-referral-howto__step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cr-referral-howto__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-accent, #ffffff) 15%, transparent);
	color: var(--color-accent, #ffffff);
	font-size: 0.7rem;
	font-weight: 700;
}

.cr-referral-howto__text {
	font-size: 0.78rem;
	color: var(--color-text-secondary, #a1a1aa);
	white-space: nowrap;
}

.cr-referral-howto__arrow {
	color: var(--color-text-muted, #71717a);
	font-size: 0.8rem;
}

@media (max-width: 640px) {
	.cr-referral-howto {
		flex-direction: column;
		align-items: flex-start;
	}
	.cr-referral-howto__arrow { display: none; }
}

/* ================================================================
   REFERIDOS: tarjetas de la lista
   ================================================================ */

.cr-referral-list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.cr-referral-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--color-bg-primary, #09090b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 12px;
	padding: 0.85rem 1rem;
	transition: border-color 0.2s, opacity 0.3s;
}

.cr-referral-card--converted {
	border-color: color-mix(in srgb, var(--color-success, #22c55e) 35%, transparent);
}

.cr-referral-card--is-cancelled,
.cr-referral-card--reverted,
.cr-referral-card--fraud {
	opacity: 0.55;
}

.cr-referral-card__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.cr-referral-card__identity {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
}

.cr-referral-card__name {
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--color-text-primary, #fafafa);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cr-referral-card__date {
	font-size: 0.72rem;
	color: var(--color-text-muted, #71717a);
	white-space: nowrap;
	flex: 0 0 auto;
}

.cr-referral-card__hint {
	margin: 0;
	font-size: 0.78rem;
	color: var(--color-text-muted, #71717a);
}

.cr-referral-card__side {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
}

.cr-referral-card__points {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-success, #22c55e);
	white-space: nowrap;
}

@media (max-width: 560px) {
	.cr-referral-card {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}
	.cr-referral-card__side {
		justify-content: space-between;
	}
}

.cr-referral-cancel {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: color-mix(in srgb, var(--color-danger, #ef4444) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-danger, #ef4444) 45%, transparent);
	color: var(--color-danger, #ef4444);
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0.45rem 0.85rem;
	border-radius: 10px;
	line-height: 1;
	transition: background 0.16s ease, transform 0.1s ease;
}

.cr-referral-cancel:hover {
	background: color-mix(in srgb, var(--color-danger, #ef4444) 20%, transparent);
}

.cr-referral-cancel:active {
	transform: scale(0.97);
}

.cr-referral-cancel:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cr-referral-empty {
	padding: 1.5rem;
}

/* ================================================================
   EMPTY STATE
   ================================================================ */

.cr-empty-state {
	text-align: center;
	padding: 2rem;
}

.cr-empty-icon {
	font-size: 2.5rem;
	color: var(--color-text-muted, #71717a);
	margin-bottom: 0.5rem;
}

.cr-empty-state p {
	color: var(--color-text-muted, #71717a);
	font-size: 0.875rem;
}

/* ================================================================
   BUTTONS
   ================================================================ */

.cr-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent, #ffffff);
	color: var(--color-bg-primary, #09090b);
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 0.875rem;
	border-radius: var(--product-btn-radius, 10px);
	padding: 0.625rem 1.25rem;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.1s;
	text-decoration: none;
}

.cr-btn-primary:hover {
	opacity: 0.9;
	color: var(--color-bg-primary, #09090b);
}

.cr-btn-primary:active {
	transform: scale(0.98);
}

.cr-btn-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cr-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--color-text-primary, #fafafa);
	font-family: var(--font-heading, inherit);
	font-weight: 600;
	font-size: 0.875rem;
	border-radius: var(--product-btn-radius, 10px);
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--color-bg-elevated, #27272a);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	text-decoration: none;
}

.cr-btn-outline:hover {
	border-color: var(--color-accent, #ffffff);
	background: var(--color-bg-elevated, #27272a);
}

.cr-btn-sm {
	font-size: 0.75rem;
	padding: 0.5rem 1rem;
}

.cr-btn-block {
	width: 100%;
}

.cr-load-more {
	font-size: 0.8rem;
}

/* ================================================================
   TIER BADGE (global — usado en reviews, perfil, etc.)
   ================================================================ */

.cr-tier-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.2rem 0.6rem;
	border-radius: 9999px;
	font-size: 0.7rem;
	font-weight: 600;
	background: color-mix(in srgb, var(--tier-color, #6366f1) 15%, transparent);
	color: var(--tier-color, #6366f1);
	border: 1px solid color-mix(in srgb, var(--tier-color, #6366f1) 30%, transparent);
}

/* ================================================================
   CHECKOUT WIDGET
   ================================================================ */

.cr-checkout-widget {
	background: var(--color-bg-surface, #18181b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.cr-checkout-widget__header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.cr-checkout-widget__icon {
	font-size: 1.25rem;
	color: var(--color-accent, #ffffff);
	line-height: 1;
	margin-top: 2px;
}

.cr-checkout-widget__title {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.cr-checkout-widget__title strong {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-text-primary, #fafafa);
}

.cr-checkout-widget__subtitle {
	font-size: 0.8rem;
	color: var(--color-text-secondary, #a1a1aa);
}

.cr-checkout-widget__subtitle strong {
	color: var(--color-text-primary, #fafafa);
}

/* Points selector */
.cr-points-selector {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.cr-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: var(--color-bg-elevated, #27272a);
	border-radius: 9999px;
	outline: none;
	cursor: pointer;
}

.cr-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-accent, #ffffff);
	cursor: pointer;
	transition: transform 0.15s;
}

.cr-slider::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}

.cr-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-accent, #ffffff);
	cursor: pointer;
	border: none;
}

.cr-points-selector__inputs {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cr-points-input-wrap {
	display: flex;
	align-items: center;
	background: var(--color-bg-primary, #09090b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 8px;
	overflow: hidden;
}

.cr-points-input {
	background: transparent;
	border: none;
	color: var(--color-text-primary, #fafafa);
	font-size: 1rem;
	font-weight: 600;
	width: 80px;
	padding: 0.5rem 0.5rem 0.5rem 0.75rem;
	outline: none;
}

.cr-points-input::-webkit-inner-spin-button,
.cr-points-input::-webkit-outer-spin-button {
	opacity: 0.5;
}

.cr-points-input-suffix {
	padding: 0 0.75rem;
	color: var(--color-text-muted, #71717a);
	font-size: 0.8rem;
	white-space: nowrap;
}

.cr-points-value-preview {
	font-size: 0.875rem;
	color: var(--color-text-secondary, #a1a1aa);
}

.cr-points-value-preview strong,
#cr-points-value-display {
	color: var(--color-success, #22c55e);
	font-weight: 600;
}

/* Checkout actions */
.cr-checkout-widget__actions {
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
}

.cr-checkout-message {
	font-size: 0.8rem;
	padding: 0.5rem 0;
	min-height: 1.2rem;
}

.cr-checkout-message.success { color: var(--color-success, #22c55e); }
.cr-checkout-message.error   { color: var(--color-danger, #ef4444); }

.cr-checkout-earn-preview {
	font-size: 0.8rem;
	color: var(--color-text-secondary, #a1a1aa);
	text-align: center;
	padding-top: 0.5rem;
}

.cr-checkout-earn-preview strong { color: var(--color-accent, #ffffff); }

.cr-checkout-widget__body--insufficient {
	font-size: 0.875rem;
	color: var(--color-text-muted, #71717a);
}

/* ================================================================
   PRODUCT BADGE
   ================================================================ */

.cr-product-points-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: color-mix(in srgb, var(--color-accent, #ffffff) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent, #ffffff) 20%, transparent);
	border-radius: 8px;
	padding: 0.5rem 0.875rem;
	font-size: 0.8rem;
	color: var(--color-text-secondary, #a1a1aa);
	margin-bottom: 1rem;
}

.cr-product-points-icon {
	color: var(--color-accent, #ffffff);
}

.cr-product-points-text strong {
	color: var(--color-text-primary, #fafafa);
}

/* ================================================================
   CART POINTS ROW
   ================================================================ */

.cr-cart-points-row th,
.cr-cart-points-row td {
	font-size: 0.875rem;
}

.cr-cart-points {
	color: var(--color-success, #22c55e);
	font-weight: 600;
}

/* ================================================================
   THANK YOU PAGE
   ================================================================ */

.cr-thankyou-points {
	background: var(--color-bg-surface, #18181b);
	border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 30%, transparent);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.cr-thankyou-points-icon {
	font-size: 2rem;
	color: var(--color-success, #22c55e);
	line-height: 1;
}

.cr-thankyou-points-content h3 {
	margin: 0 0 0.375rem 0;
	font-family: var(--font-heading, inherit);
	font-size: 1rem;
	color: var(--color-text-primary, #fafafa);
}

.cr-thankyou-points-content p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-secondary, #a1a1aa);
}

.cr-tier-progress-hint {
	color: var(--color-text-muted, #71717a) !important;
	font-size: 0.8rem !important;
	margin-top: 0.375rem !important;
}

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */

#cr-toast-container {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
}

.cr-toast {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--color-bg-surface, #18181b);
	border: 1px solid var(--color-bg-elevated, #27272a);
	border-radius: 10px;
	padding: 0.875rem 1rem;
	min-width: 260px;
	max-width: 360px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	pointer-events: all;
	animation: cr-toast-in 0.3s ease forwards;
}

.cr-toast-success { border-color: var(--color-success, #22c55e); }
.cr-toast-error   { border-color: var(--color-danger, #ef4444); }
.cr-toast-info    { border-color: var(--color-accent, #ffffff); }

@keyframes cr-toast-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.cr-toast-message {
	font-size: 0.875rem;
	color: var(--color-text-primary, #fafafa);
	flex: 1;
}