/*
 * La Galga Gris · loyalty-widget.css
 * FAB bottom-right + card desplegable. Sticky pero no invasivo.
 */

.lgg-loyalty {
	position: fixed;
	right: var(--sp-4);
	bottom: var(--sp-4);
	z-index: calc(var(--z-toast) - 1);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--sp-3);
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity var(--dur-slow) var(--ease-emphasized),
				transform var(--dur-slow) var(--ease-emphasized);
}
.lgg-loyalty[data-state="visible"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.lgg-loyalty { transition: none; }
}

/* ── FAB ────────────────────────────────────────────────────────── */
.lgg-loyalty__fab {
	position: relative;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--color-ink-primary);
	color: var(--color-ink-inverse);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 0;
	box-shadow: var(--shadow-lg);
	transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
	order: 2;
}
.lgg-loyalty__fab:hover { transform: scale(1.05); background: #000; }

.lgg-loyalty__fab-pulse {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.35;
	animation: lgg-loyalty-pulse 2.4s ease-out infinite;
}
@keyframes lgg-loyalty-pulse {
	0%   { transform: scale(0.85); opacity: 0.45; }
	70%  { transform: scale(1.25); opacity: 0; }
	100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.lgg-loyalty__fab-pulse { animation: none; opacity: 0; }
}

.lgg-loyalty__fab-icon { color: var(--color-accent); }

.lgg-loyalty__fab-badge {
	position: absolute;
	top: -6px; right: -10px;
	background: var(--color-accent);
	color: var(--color-ink-inverse);
	border-radius: var(--radius-pill);
	padding: 2px 8px;
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	border: 2px solid var(--color-bg-base);
}

/* ── Card ───────────────────────────────────────────────────────── */
.lgg-loyalty__card {
	position: relative;
	width: min(320px, calc(100vw - 2 * var(--sp-4)));
	background: var(--color-bg-card);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-5);
	color: var(--color-ink-primary);
	transform: scale(0.92) translateY(8px);
	transform-origin: bottom right;
	opacity: 0;
	transition: transform var(--dur-base) var(--ease-emphasized),
				opacity var(--dur-fast) var(--ease-standard);
	order: 1;
}
.lgg-loyalty[data-open="true"] .lgg-loyalty__card {
	opacity: 1;
	transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.lgg-loyalty__card { transition: none; }
}

.lgg-loyalty__close {
	position: absolute;
	top: var(--sp-3); right: var(--sp-3);
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	color: var(--color-ink-secondary);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.lgg-loyalty__close:hover { background: var(--color-bg-subtle); }

.lgg-loyalty__card-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.lgg-loyalty__card-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: var(--fw-medium);
	line-height: 1.15;
}
.lgg-loyalty__card-sub {
	margin: 0;
	color: var(--color-ink-secondary);
	font-size: var(--fz-small);
	line-height: 1.5;
}

.lgg-loyalty__perks {
	list-style: none;
	margin: var(--sp-2) 0 var(--sp-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	font-size: var(--fz-small);
	color: var(--color-ink-primary);
}
.lgg-loyalty__perks li {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.lgg-loyalty__perks svg { color: var(--color-success); flex: 0 0 auto; }

.lgg-loyalty__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}
.lgg-loyalty__actions .lgg-btn { width: 100%; }
.lgg-loyalty__more {
	font-size: var(--fz-small);
	align-self: center;
}