/**
 * PXS Coin Wallet widget / shortcode.
 * Panel styling aligned with pxs-referral-widget.css (boxes, borders, radii).
 *
 * Placement hooks (root .pxs-coin-wallet):
 * - .pxs-coin-wallet--in-my-account — WooCommerce My Account tab (shortcode placement="my-account").
 * - .pxs-coin-wallet--in-elementor — Elementor PXS Coin Wallet widget.
 * - .pxs-coin-wallet--in-embed — optional shortcode placement="embed" for arbitrary pages.
 * My Account also wraps output in .pxs-my-account-endpoint--coin-wallet and sets body.pxs-account-coin-wallet.
 */

.pxs-coin-wallet {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-height: 2em;
}

/* Match .pxs-referral__heading */
.pxs-coin-wallet__heading {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.pxs-coin-wallet__heading + .pxs-coin-wallet__panel {
	margin-top: 10px;
}

/* Match .pxs-referral__panel */
.pxs-coin-wallet__panel {
	margin: 18px 0;
	padding: 14px 16px;
	border-radius: 8px;
	border: 1px solid rgba(127, 127, 127, 0.28);
	background: rgba(127, 127, 127, 0.06);
	box-sizing: border-box;
}

.pxs-coin-wallet__panel:first-child {
	margin-top: 0;
}

/* Match .pxs-referral__panel-title */
.pxs-coin-wallet__panel-title {
	margin: 0 0 10px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.88;
}

.pxs-coin-wallet__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}

.pxs-coin-wallet__text--inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	/* gap from .pxs-coin-wallet__text; Elementor slider targets same node (avoids 0.35em/0.65em tying Elementor’s gap). */
}

.pxs-coin-wallet:not(.pxs-coin-wallet--in-elementor) .pxs-coin-wallet__text--inline {
	gap: 0.35em 0.65em;
}

.pxs-coin-wallet__text--inline .pxs-coin-wallet__label {
	margin-bottom: 0;
}

.pxs-coin-wallet__text > .pxs-coin-wallet__label,
.pxs-coin-wallet__text > .pxs-coin-wallet__graphic,
.pxs-coin-wallet__text > .pxs-coin-wallet__balance {
	flex-grow: 0;
	flex-shrink: 0;
}

.pxs-coin-wallet__graphic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.pxs-coin-wallet__graphic-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 1.75em;
	object-fit: contain;
	vertical-align: middle;
}

/* Match .pxs-referral__label */
.pxs-coin-wallet__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0;
	opacity: 0.85;
}

/* Main balance figure (displayed coin total). Gold/white only outside Elementor — widget controls background via Style. */
.pxs-coin-wallet__balance {
	display: inline-block;
	padding: 8px 12px;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	border-radius: 6px;
}

.pxs-coin-wallet:not(.pxs-coin-wallet--in-elementor) .pxs-coin-wallet__balance {
	background-color: #cca848;
	color: #ffffff;
}

.pxs-coin-wallet__guest {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	opacity: 0.9;
}

.pxs-coin-wallet--guest .pxs-coin-wallet__guest {
	margin: 0;
}

.pxs-coin-wallet__panel--guest {
	margin-top: 0;
}

/* Coin activity (ticket spend → fractional coin contribution, whole coins to balance) */
.pxs-coin-wallet__activity-empty {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	opacity: 0.9;
}

.pxs-coin-wallet__activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pxs-coin-wallet__activity-item {
	display: grid;
	grid-template-columns: minmax(5.25rem, 0.75fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
	gap: 0.35rem 0.65rem;
	align-items: baseline;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(127, 127, 127, 0.22);
	font-size: 0.875rem;
	line-height: 1.35;
}

.pxs-coin-wallet__activity-item > * {
	min-width: 0;
	text-align: left;
	justify-self: start;
}

.pxs-coin-wallet__activity-item:last-child {
	border-bottom: 0;
}

.pxs-coin-wallet__activity-date {
	font-variant-numeric: tabular-nums;
	color: inherit;
	opacity: 0.88;
}

.pxs-coin-wallet__activity-order {
	font-weight: 700;
}

.pxs-coin-wallet__activity-spend .woocommerce-Price-amount {
	font-weight: 600;
}

.pxs-coin-wallet__activity-contrib {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.pxs-coin-wallet__activity-credited {
	font-size: 0.8125rem;
	opacity: 0.85;
	white-space: nowrap;
	justify-self: end;
	text-align: right;
}


.pxs-coin-wallet__activity-footnote {
	margin: 10px 0 0;
	font-size: 0.82rem;
	line-height: 1.45;
	opacity: 0.85;
}

@media (max-width: 600px) {
	.pxs-coin-wallet__activity-item {
		grid-template-columns: 1fr;
		gap: 0.2rem;
		padding: 0.65rem 0;
	}
}

/* Elementor widget: flat blocks (My Account / embed keep panel chrome above). */
.pxs-coin-wallet--in-elementor .pxs-coin-wallet__panel {
	margin: 14px 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.pxs-coin-wallet--in-elementor .pxs-coin-wallet__heading + .pxs-coin-wallet__panel {
	margin-top: 6px;
}

.pxs-coin-wallet--in-elementor .pxs-coin-wallet__activity-item {
	border-bottom: 0;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

/* My Account tab: no extra space below the PXS block. */
body.woocommerce-account .pxs-my-account-endpoint--coin-wallet {
	margin-bottom: 0;
	padding-bottom: 0;
}

body.woocommerce-account .pxs-my-account-endpoint--coin-wallet .pxs-coin-wallet--in-my-account {
	margin-bottom: 0;
}

body.woocommerce-account .pxs-my-account-endpoint--coin-wallet .pxs-coin-wallet--in-my-account > *:last-child {
	margin-bottom: 0;
}