/**
 * Wapu Loyalty — Frontend CSS
 *
 * v4.1.0: nueva file. Reemplaza inline `<style>` que vivía en
 * class-loyalty-badges.php::render_points_info y el `style="..."` inline
 * de render_catalog_badge_legacy.
 *
 * Reglas:
 *   - Solo tokens --wa-* del canon de wapu-core 5.1+.
 *   - 0 hex inline (todo via tokens).
 *   - 0 spacing fuera del grid 8px.
 *   - 0 !important.
 *   - Compatible con scheme dynamic (--wa-accent cambia con WP scheme).
 *
 * @package Wapu_Loyalty
 * @since   4.1.0
 */

/* ─────────────────────────────────────────────────────────────
 * Early Access badge — legacy shim (mientras theme no consume canon)
 * ──────────────────────────────────────────────────────────── */
.loyalty-early-access-badge {
	position: absolute;
	top: var(--wa-space-1);
	left: var(--wa-space-1);
	z-index: var(--wa-z-elevated);
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-half);
	padding: var(--wa-space-half) var(--wa-space-1);
	font-size: var(--wa-font-sm);
	font-weight: var(--wa-weight-semibold);
	font-family: var(--wa-font-sans);
	background: var(--wa-accent);
	color: var(--wa-accent-text);
	border-radius: var(--wa-radius-pill);
	line-height: var(--wa-leading-tight);
}

/* ─────────────────────────────────────────────────────────────
 * Variant del wa-badge canon (cuando theme consume el filter)
 * ──────────────────────────────────────────────────────────── */
.wa-badge--loyalty {
	background: var(--wa-a15);
	color: var(--wa-accent);
	font-weight: var(--wa-weight-bold);
}

.wa-badge--loyalty .wa-badge__icon {
	font-size: var(--wa-font-base);
}

/* ─────────────────────────────────────────────────────────────
 * Points info en single product PDP
 * ──────────────────────────────────────────────────────────── */
.loyalty-points-info {
	display: flex;
	align-items: center;
	gap: var(--wa-space-half);
	margin-top: var(--wa-space-1);
	padding: var(--wa-space-1) 0;
	font-family: var(--wa-font-sans);
	font-size: var(--wa-font-base);
	color: var(--wa-text-muted);
	line-height: var(--wa-leading-normal);
}

.loyalty-points-info__icon {
	font-size: var(--wa-font-md);
	flex-shrink: 0;
}

.loyalty-points-info__text {
	flex: 1;
}

.loyalty-points-info__amount {
	font-weight: var(--wa-weight-bold);
	color: var(--wa-accent);
}

.loyalty-points-info__multiplier {
	font-size: var(--wa-font-sm);
	color: var(--wa-success);
	font-weight: var(--wa-weight-semibold);
}

@media (max-width: 480px) {
	.loyalty-points-info {
		flex-wrap: wrap;
		font-size: var(--wa-font-sm);
	}
}