/**
 * LoyaltyDog customer-facing widget (Sprint 2 Task 7).
 *
 * Design tokens come from ld-brand.css — loaded as a WordPress
 * dependency of this handle (see
 * Plugin::enqueue_frontend_assets()), NOT via @import. The dep edge
 * gives the browser a parallel-fetchable graph instead of a
 * parse-time waterfall.
 *
 * Fade-in: driven entirely by CSS keyframes on first paint so the
 * widget stays visible even when JavaScript is disabled or fails —
 * Seer flagged JS-dependent visibility as a high-severity regression
 * during the PR #56 review. The animation is zeroed out under
 * prefers-reduced-motion (ld-brand.css's global * selector also does
 * this; the local rule is belt-and-suspenders).
 *
 * @since 2.1.0
 */

@keyframes ld-widget-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.loyaltydog-widget {
	font-family: var(--ld-font-body);
	color: var(--ld-text);
	background: var(--ld-surface);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-lg);
	padding: var(--ld-space-6);
	box-shadow: var(--ld-shadow);
	max-width: 360px;
	animation: ld-widget-fade-in var(--ld-duration) var(--ld-ease-out) both;
}

/* Balance — points + tier */
.ld-balance {
	background: linear-gradient(
		135deg,
		var(--ld-blue-subtle) 0%,
		var(--ld-surface-alt) 100%
	);
	border-radius: var(--ld-radius-md);
	padding: var(--ld-space-5);
	margin-bottom: var(--ld-space-4);
	text-align: center;
	font-size: var(--ld-fs-base);
}
.ld-points {
	display: block;
	font-family: var(--ld-font-display);
	font-weight: var(--ld-fw-display);
	font-size: var(--ld-fs-4xl);
	color: var(--ld-blue);
	line-height: var(--ld-lh-tight);
}
.ld-tier {
	display: inline-block;
	margin-top: var(--ld-space-2);
	padding: 0 var(--ld-space-2);
	border-radius: var(--ld-radius-sm);
	font-style: normal;
	font-size: var(--ld-fs-sm);
	color: var(--ld-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	/* Per-tier background/foreground colors are applied inline by
	   widget.js from the server-validated hex values in
	   project_customer_response. Inline styles win the cascade so
	   merchants whose program defines tier colors see them; merchants
	   without configured colors fall back to these neutral defaults. */
}

/* Active discount — shown when the customer has claimed an offer and
   has a discount code waiting to use at checkout. Mirrors Shopify's
   ActiveOffer card visual hierarchy: subtle highlight + monospace code. */
.ld-active-discount {
	margin-top: var(--ld-space-3);
	padding: var(--ld-space-2) var(--ld-space-3);
	background: var(--ld-surface-alt);
	border: 1px dashed var(--ld-border);
	border-radius: var(--ld-radius-md);
	font-size: var(--ld-fs-sm);
}
.ld-discount-label {
	color: var(--ld-text-muted);
}
.ld-discount-code {
	font-family: var(--ld-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-weight: 600;
	color: var(--ld-text);
	background: var(--ld-surface);
	padding: 0 var(--ld-space-1);
	border-radius: var(--ld-radius-sm);
	user-select: all;
}

/* Claimed offer name — narrates which reward the discount code came
   from, so the customer recognizes it ("Currently claimed: Free shipping"). */
.ld-claimed-offer {
	margin-top: var(--ld-space-2);
	margin-bottom: 0;
	font-size: var(--ld-fs-sm);
	color: var(--ld-text-muted);
	font-style: italic;
}

/* Transactions list */
.ld-transactions {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--ld-fs-sm);
	color: var(--ld-text-muted);
}
.ld-transactions li {
	padding: var(--ld-space-2) 0;
	border-bottom: 1px solid var(--ld-border);
}
.ld-transactions li:last-child {
	border-bottom: none;
}

/* Join-CTA fallback (shown when customer isn't enrolled) */
.ld-join-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ld-space-3);
	text-align: center;
}

/* SWE-559: layout modifiers.
   Same DOM tree, two flex-direction modes — switching is CSS-only
   so widget.js stays oblivious to the layout choice. The modifier
   is emitted on both the outer placeholder (server-rendered) and
   the inner ld-join-wrap (mirrored by widget.js), so either hook
   can be targeted. We attach the rules to the inner wrap since
   that's the element actually doing the flex layout.

   Default (no modifier) stays `column` for backward compatibility
   with sites whose CSS extends .ld-join-wrap without specifying a
   layout. The --vertical variant is therefore a no-op alias of the
   default — it exists so the class hook is always present
   (assertable from tests + DOM inspection).
*/
.ld-join-wrap--vertical {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.ld-join-wrap--horizontal {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--ld-space-4);
	text-align: left;
}
/* Horizontal: collapse to vertical on narrow viewports (sidebars,
   mobile) so the QR doesn't overflow. ~480px matches the existing
   widget breakpoint below. */
@media (max-width: 480px) {
	.ld-join-wrap--horizontal {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--ld-space-3);
	}
}
.ld-join-cta {
	margin: 0;
	color: var(--ld-text);
	font-size: var(--ld-fs-base);
	font-style: normal;
}
.ld-join-cta a {
	display: inline-block;
	padding: var(--ld-space-3) var(--ld-space-5);
	background: var(--ld-blue);
	color: var(--ld-text-on-brand);
	border-radius: var(--ld-radius);
	font-family: inherit;
	font-weight: var(--ld-fw-semibold);
	text-decoration: none;
	transition: background var(--ld-duration-fast) var(--ld-ease);
}
.ld-join-cta a:hover {
	background: var(--ld-blue-hover);
}

/* QR image inside join fallback */
.ld-qr {
	display: block;
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-sm);
	max-width: 100%;
	height: auto;
}

/* Dark mode: the balance-card gradient collapses to a very dark
   navy→near-black range via ld-brand.css's dark-block overrides.
   --ld-blue on that dark gradient falls below WCAG AA for normal
   text — rescue contrast on the big points display by switching to
   --ld-text (which flips to a light gray in dark mode). */
@media (prefers-color-scheme: dark) {
	.ld-points {
		color: var(--ld-text);
	}
}

/* Reduced motion: suppress the first-paint fade entirely. */
@media (prefers-reduced-motion: reduce) {
	.loyaltydog-widget {
		animation: none;
	}
}

/* Narrow viewports */
@media (max-width: 480px) {
	.loyaltydog-widget {
		max-width: 100%;
		padding: var(--ld-space-5);
	}
	.ld-points {
		font-size: var(--ld-fs-3xl);
	}
}