/* Loyalty Program — digital member card (public pages and dashboard). */
.lp-card { --lp-card-ratio: 856 / 540; }
.lp-card__stage {
	position: relative;
	aspect-ratio: var(--lp-card-ratio);
	perspective: 1600px;
}
.lp-card__face {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 4.4% / 7%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
	box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
	opacity: 0;
}
.lp-card.is-drawn .lp-card__face { opacity: 1; }
.lp-card__face--back { transform: rotateY(180deg); }
.lp-card.is-flipped .lp-card__face--front { transform: rotateY(-180deg); }
.lp-card.is-flipped .lp-card__face--back { transform: rotateY(0deg); }
.lp-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lp-card .lp-btn {
	display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
	border-radius: var(--lp-radius, 6px); border: 1px solid var(--lp-line, rgba(0,0,0,.15));
	background: transparent; color: inherit; font: 600 13px/1 var(--lp-body, inherit); cursor: pointer;
}
.lp-card .lp-btn:hover { border-color: var(--lp-accent, #2271b1); }
@media (prefers-reduced-motion: reduce) {
	.lp-card__face { transition: none; }
}