/*
 * P-Member public pages: the join page, the club terms and the web card.
 * Load public/pxpm-tokens.css first (the --pm-* tokens). The business colours arrive as --p-* (already checked for
 * 4.5:1 contrast in PXPM_Public::theme), with the house values as the default.
 *
 * House rules (UI-UX DECISIONS + PM-D30): Heebo; radius 20 (pills 999, checkbox/switch 8); controls 50px;
 * cards flat with a 1px line border; shadow only on things that float; text on sand is #111 here (public page);
 * the keyboard focus ring stays visible (IS 5568 AA); no emojis, line icons only; two speeds, one easing.
 */

/* ───── page ───── */
.pxpm-page {
	margin: 0;
	background: var(--p-bg, var(--pm-bg));
	color: var(--p-text, var(--pm-ink));
	font-family: var(--pm-font);
	font-size: var(--pm-text);
	font-weight: var(--pm-w-regular);
	line-height: var(--pm-lh);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.pxpm-page *,
.pxpm-page *::before,
.pxpm-page *::after {
	box-sizing: border-box;
}
.pxpm-page [hidden] {
	display: none !important;
}
.pxpm-page img {
	max-width: 100%;
}
.pxpm-page a {
	color: var(--p-accent, var(--pm-sand-deep));
}
.pxpm-page bdi {
	unicode-bidi: isolate;
}
.pxpm-noscroll {
	overflow: hidden;
}

.pxpm-wrap {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: var(--pm-s4) var(--pm-gutter) var(--pm-s8);
	padding-bottom: calc(var(--pm-s8) + env(safe-area-inset-bottom, 0px));
}
.pxpm-screen + .pxpm-screen {
	margin-top: 0;
}

/* preview banner (owner / admin) */
.pxpm-pv {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pm-s2);
	padding: var(--pm-s2) var(--pm-gutter);
	background: var(--pm-warn-soft);
	color: var(--pm-ink); /* warn #B4561F on its soft bg is 4.3:1 — under AA, so the text is ink and the icon carries the colour */
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
	text-align: center;
}

/* ───── header ───── */
.pxpm-head {
	text-align: center;
	padding: var(--pm-s4) 0 var(--pm-s5);
}
.pxpm-av {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--pm-r-pill);
	background: var(--pm-card);
	border: var(--pm-border);
	object-fit: cover;
	font-size: var(--pm-text-page);
	font-weight: var(--pm-w-bold);
	color: var(--pm-ink);
}
.pxpm-head-s .pxpm-av {
	width: 56px;
	height: 56px;
	font-size: var(--pm-text-title);
}
.pxpm-name {
	margin: var(--pm-s3) 0 0;
	font-size: var(--pm-text-title);
	font-weight: var(--pm-w-bold);
	line-height: var(--pm-lh-title);
}
.pxpm-product {
	margin: var(--pm-s1) 0 0;
	font-size: var(--pm-text-xs);
	font-weight: var(--pm-w-medium);
	color: var(--p-muted, var(--pm-muted));
}
.pxpm-note {
	margin: var(--pm-s2) auto 0;
	max-width: 34em;
	font-size: var(--pm-text-sm, var(--pm-text-xs));
	line-height: 1.5;
	color: var(--p-text, var(--pm-ink));
}

/* ───── cards and text ───── */
.pxpm-card {
	background: var(--pm-card);
	color: var(--pm-ink);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	padding: var(--pm-s5);
	margin: 0 0 var(--pm-s4);
}
.pxpm-center {
	text-align: center;
}
.pxpm-hero {
	margin: var(--pm-s6) 0 var(--pm-s2);
	font-size: var(--pm-text-page);
	font-weight: var(--pm-w-black);
	line-height: var(--pm-lh-title);
	letter-spacing: -.01em;
	text-align: center;
}
.pxpm-lead {
	margin: 0 0 var(--pm-s2);
	font-size: var(--pm-text-lg);
	font-weight: var(--pm-w-medium);
	text-align: center;
}
.pxpm-title {
	margin: 0 0 var(--pm-s2);
	font-size: var(--pm-text-title);
	font-weight: var(--pm-w-bold);
	line-height: var(--pm-lh-title);
}
.pxpm-sub {
	margin: 0 0 var(--pm-s3);
	font-size: var(--pm-text-lg);
	font-weight: var(--pm-w-bold);
}
.pxpm-card p {
	margin: 0 0 var(--pm-s3);
}
.pxpm-muted {
	color: var(--pm-muted);
}
.pxpm-small {
	font-size: var(--pm-text-sm);
}
.pxpm-ltr {
	direction: ltr;
	text-align: right;
}
.pxpm-inline {
	width: 18px;
	height: 18px;
	vertical-align: -3px;
}
.pxpm-lines {
	margin: 0 0 var(--pm-s3);
	padding: 0 var(--pm-s5) 0 0;
}
.pxpm-lines li {
	margin: 0 0 var(--pm-s1);
}
.pxpm-lines li::marker {
	color: var(--pm-sand);
}

/* ───── the card preview / member card ───── */
.pxpm-preview-top,
.pxpm-member-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pm-s3);
	margin-bottom: var(--pm-s4);
}
.pxpm-preview-biz {
	font-weight: var(--pm-w-bold);
}
.pxpm-preview-count {
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
	white-space: nowrap;
}
.pxpm-preview-count b {
	color: var(--pm-ink);
	font-size: var(--pm-text-lg);
}
.pxpm-preview-reward {
	display: flex;
	align-items: center;
	gap: var(--pm-s2);
	margin: var(--pm-s4) 0 0 !important;
	color: var(--pm-muted);
}
.pxpm-preview-reward .pxpm-i {
	color: var(--pm-sand-deep);
	width: 20px;
	height: 20px;
}
.pxpm-preview-reward b {
	color: var(--pm-ink);
}
.pxpm-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
	gap: var(--pm-s2);
}
.pxpm-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	max-height: 64px;
	border-radius: var(--pm-r-pill);
	color: #CFC5B9;
	transition: background-color var(--pm-slow) ease, color var(--pm-slow) ease;
}
.pxpm-slot .pxpm-i {
	width: 70%;
	height: 70%;
	max-width: 40px;
	max-height: 40px;
}
.pxpm-slot.gift {
	color: var(--pm-sand);
}
.pxpm-slot.on {
	background: var(--pm-sand-soft);
	color: var(--pm-sand-deep);
}
.pxpm-hi {
	margin: 0 !important;
	font-size: var(--pm-text-lg);
}
.pxpm-big {
	display: flex;
	align-items: baseline;
	gap: var(--pm-s1);
	margin: 0 !important;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}
.pxpm-big b {
	color: var(--pm-ink);
	font-size: var(--pm-text-page);
	font-weight: var(--pm-w-black);
	line-height: var(--pm-lh-num);
}
.pxpm-left {
	margin: var(--pm-s4) 0 0 !important;
	font-weight: var(--pm-w-medium);
	text-align: center;
}
.pxpm-rewards:not(:empty) {
	margin-top: var(--pm-s4);
}
.pxpm-rewards .pxpm-banner + .pxpm-banner {
	margin-top: var(--pm-s2);
}

/* ───── QR ───── */
.pxpm-qrcard {
	text-align: center;
}
.pxpm-qr {
	width: 100%;
	max-width: 240px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	background: #fff;
}
.pxpm-qr svg,
.pxpm-desk-qr svg {
	display: block;
	width: 100%;
	height: 100%;
}
.pxpm-code {
	margin: var(--pm-s3) 0 var(--pm-s1) !important;
	font-size: var(--pm-text-title);
	font-weight: var(--pm-w-bold);
	letter-spacing: .12em;
	font-variant-numeric: tabular-nums;
}
.pxpm-desk {
	display: flex;
	align-items: center;
	gap: var(--pm-s4);
	margin: var(--pm-s4) 0;
	padding: var(--pm-s4);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
	color: var(--pm-ink);
	text-align: start;
}
.pxpm-desk p {
	margin: 0;
	font-size: var(--pm-text-sm);
}
.pxpm-desk-qr {
	flex: none;
	width: 112px;
	height: 112px;
}

/* ───── form ───── */
.pxpm-form .pxpm-fld {
	margin: 0 0 var(--pm-s3);
}
.pxpm-lbl {
	display: block;
	margin: 0 0 var(--pm-s1);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
}
.pxpm-in {
	display: block;
	width: 100%;
	height: var(--pm-h);
	padding: 0 var(--pm-s4);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
	color: var(--pm-ink);
	font: inherit;
	font-size: var(--pm-text); /* 16: no zoom on iPhone */
	transition: border-color var(--pm-fast) var(--pm-ease), box-shadow var(--pm-fast) var(--pm-ease);
	-webkit-appearance: none;
	appearance: none;
}
.pxpm-in::placeholder {
	color: var(--pm-muted);
}
.pxpm-in:focus {
	border-color: var(--pm-sand);
	box-shadow: 0 0 0 3px var(--pm-sand-soft);
}
.pxpm-codein {
	text-align: center;
	letter-spacing: .4em;
	font-size: var(--pm-text-title);
	font-weight: var(--pm-w-bold);
	font-variant-numeric: tabular-nums;
}
.pxpm-hint {
	margin: var(--pm-s1) 0 0;
	font-size: var(--pm-text-sm);
	color: var(--pm-muted);
}
.pxpm-fld.bad .pxpm-in {
	border-color: var(--pm-error);
}
.pxpm-err,
.pxpm-formerr {
	display: flex;
	align-items: flex-start;
	gap: var(--pm-s1);
	margin: var(--pm-s1) 0 0;
	color: var(--pm-error);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
}
.pxpm-err::before,
.pxpm-formerr::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.8v5M12 16.2v.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.8v5M12 16.2v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pxpm-formerr {
	margin: 0 0 var(--pm-s3);
	padding: var(--pm-s3) var(--pm-s4);
	background: var(--pm-error-soft);
	border-radius: var(--pm-r);
}
.pxpm-hp { /* honeypot: clipped, not pushed off-screen (a negative offset scrolls sideways in RTL) */
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.pxpm-notice {
	margin: var(--pm-s4) 0 var(--pm-s2) !important;
	font-size: var(--pm-text-sm);
	line-height: 1.6;
	color: var(--pm-muted);
}
.pxpm-req {
	color: var(--pm-muted);
	font-size: var(--pm-text-xs);
	white-space: nowrap;
}

/* checkbox row: the whole 50px row is tappable; 22px box, 8px corners, sand */
.pxpm-check {
	display: flex;
	align-items: flex-start;
	gap: var(--pm-s3);
	min-height: var(--pm-h);
	padding: var(--pm-s3) 0;
	font-size: var(--pm-text-sm);
	line-height: 1.5;
	cursor: pointer;
}
.pxpm-check input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1.5px solid var(--pm-sand-deep);
	border-radius: var(--pm-r-small);
	background: var(--pm-card) center / 16px no-repeat;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color var(--pm-fast) var(--pm-ease);
}
.pxpm-check input:checked {
	background-color: var(--pm-sand);
	border-color: var(--pm-sand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4'/%3E%3C/svg%3E");
}
.pxpm-check + .pxpm-err {
	margin: -4px 0 var(--pm-s2);
}

/* ───── buttons ───── */
.pxpm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pm-s2);
	width: 100%;
	min-height: var(--pm-h);
	margin: var(--pm-s3) 0 0;
	padding: 0 var(--pm-s5);
	border: 1px solid transparent;
	border-radius: var(--pm-r);
	font: inherit;
	font-size: var(--pm-text);
	font-weight: var(--pm-w-medium);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pm-slow) ease, color var(--pm-slow) ease, border-color var(--pm-slow) ease, transform var(--pm-fast) var(--pm-ease);
	-webkit-tap-highlight-color: transparent;
}
.pxpm-btn:active {
	transform: scale(.98);
}
.pxpm-btn .pxpm-i {
	width: 20px;
	height: 20px;
}
.pxpm-primary {
	background: var(--p-btn, var(--pm-sand));
	color: var(--p-btn-text, var(--pm-on-sand));
}
.pxpm-secondary {
	background: var(--pm-card);
	color: var(--pm-ink);
	border-color: var(--pm-sand);
}
.pxpm-page a.pxpm-btn.pxpm-secondary,
.pxpm-page a.pxpm-btn.pxpm-primary {
	color: inherit;
}
.pxpm-page a.pxpm-btn.pxpm-primary {
	color: var(--p-btn-text, var(--pm-on-sand));
}
.pxpm-page a.pxpm-btn.pxpm-secondary {
	color: var(--pm-ink);
}
@media (hover: hover) {
	.pxpm-btn:hover,
	.pxpm-page a.pxpm-btn:hover {
		background: var(--pm-hover);
		color: var(--pm-on-hover);
		border-color: var(--pm-hover);
	}
}
.pxpm-btn:disabled {
	cursor: default;
}
.pxpm-btn.is-busy::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: var(--pm-r-pill);
	animation: pxpm-spin .7s linear infinite;
}
@keyframes pxpm-spin {
	to { transform: rotate(360deg); }
}
.pxpm-danger-btn {
	background: var(--pm-error) !important;
	border-color: var(--pm-error) !important;
	color: #fff !important;
}
.pxpm-link {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-s1);
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--p-accent, var(--pm-sand-deep));
	font: inherit;
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.pxpm-link .pxpm-i {
	width: 18px;
	height: 18px;
}
.pxpm-link:disabled {
	color: var(--pm-muted);
	text-decoration: none;
	cursor: default;
}
.pxpm-row {
	display: flex;
	justify-content: space-between;
	gap: var(--pm-s3);
	margin-top: var(--pm-s2);
}
.pxpm-stack {
	margin: var(--pm-s5) 0 var(--pm-s3);
}
.pxpm-pair {
	display: flex;
	gap: 10px;
	margin-top: var(--pm-s4);
}
.pxpm-pair .pxpm-btn {
	margin: 0;
}
.pxpm-pair .pxpm-secondary {
	flex: 1;
}
.pxpm-pair .pxpm-primary {
	flex: 2;
}

/* ───── status banners (D5: colour + icon + words) ───── */
.pxpm-banner {
	display: flex;
	align-items: flex-start;
	gap: var(--pm-s2);
	margin: 0 0 var(--pm-s4);
	padding: var(--pm-s3) var(--pm-s4);
	border-radius: var(--pm-r);
	font-size: var(--pm-text);
	text-align: start;
}
.pxpm-card .pxpm-banner {
	margin-bottom: 0;
}
.pxpm-banner .pxpm-i {
	width: 20px;
	height: 20px;
	margin-top: 3px;
}
.pxpm-banner small {
	display: block;
	font-size: var(--pm-text-sm);
	opacity: .9;
}
/* ok / warn text on their soft backgrounds is 4.4:1 / 4.3:1 (under AA): the words stay ink, the icon takes the colour */
.pxpm-banner.ok {
	background: var(--pm-ok-soft);
	color: var(--pm-ink);
}
.pxpm-banner.ok .pxpm-i {
	color: var(--pm-ok);
}
.pxpm-banner.warn {
	background: var(--pm-warn-soft);
	color: var(--pm-ink);
}
.pxpm-banner.warn .pxpm-i,
.pxpm-pv .pxpm-i {
	color: var(--pm-warn);
}
.pxpm-banner.error {
	background: var(--pm-error-soft);
	color: var(--pm-error);
}
.pxpm-status p {
	margin-top: var(--pm-s4);
}
.pxpm-okc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--pm-s3);
	border-radius: var(--pm-r-pill);
	background: var(--pm-sand-soft);
	color: var(--pm-sand-deep);
}
.pxpm-okc .pxpm-i {
	width: 26px;
	height: 26px;
}

/* ───── wallet badges (official artwork only) ───── */
.pxpm-wallet {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pm-s3);
	margin: var(--pm-s4) 0;
}
.pxpm-badge {
	display: inline-block;
	line-height: 0;
	border-radius: var(--pm-r-small);
}
.pxpm-badge img {
	display: block;
	height: 50px; /* at least as tall as the house buttons (PLAN 5.3) */
	width: auto;
}
/* Google Wallet from the plugin, without the official badge file: a black button in Google's style
   ("Google Wallet" in English, PLAN 5.3), at least as tall as the house buttons */
.pxpm-gbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--pm-h);
	min-width: 220px;
	padding: 0 24px;
	border-radius: var(--pm-r-pill);
	background: #000000;
	color: #FFFFFF;
	font-family: var(--pm-font);
	font-size: var(--pm-text);
	font-weight: var(--pm-w-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.pxpm-gbtn:hover,
.pxpm-gbtn:focus-visible {
	background: #1F1F1F;
	color: #FFFFFF;
}
.pxpm-gbtn[aria-busy="true"] {
	opacity: 0.7;
	cursor: progress;
}
.pxpm-gbtn-w {
	font-weight: var(--pm-w-bold);
	letter-spacing: 0.01em;
}
/* Apple Wallet from the plugin (0.5.0), without the official badge file: the same black badge shape,
   "Apple Wallet" in English, a line wallet icon (no Apple logo, no emoji) */
.pxpm-abtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--pm-h);
	min-width: 220px;
	padding: 0 24px;
	border-radius: var(--pm-r-pill);
	background: #000000;
	color: #FFFFFF;
	font-family: var(--pm-font);
	font-size: var(--pm-text);
	font-weight: var(--pm-w-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.pxpm-abtn:hover,
.pxpm-abtn:focus-visible {
	background: #1F1F1F;
	color: #FFFFFF;
}
.pxpm-abtn-i {
	width: 22px;
	height: 22px;
	margin-inline-end: 8px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pxpm-abtn-w {
	font-weight: var(--pm-w-bold);
	letter-spacing: 0.01em;
}

/* ───── add to home screen ───── */
.pxpm-a2hs {
	display: flex;
	gap: var(--pm-s3);
	align-items: flex-start;
}
.pxpm-a2hs > .pxpm-i {
	color: var(--pm-sand-deep);
	margin-top: 2px;
}
.pxpm-a2hs p {
	margin: var(--pm-s1) 0 0;
	font-size: var(--pm-text-sm);
	color: var(--pm-muted);
}

/* ───── card actions: switch + menu rows ───── */
.pxpm-switchrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pm-s4);
	min-height: var(--pm-h);
	padding: var(--pm-s2) 0;
	font-size: var(--pm-text-sm);
}
.pxpm-switch {
	position: relative;
	flex: none;
	width: 48px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--pm-r-pill);
	background: #958C80; /* off: 3.3:1 against white (non-text contrast, AA) */
	cursor: pointer;
	transition: background-color var(--pm-slow) var(--pm-ease);
}
.pxpm-switch span {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 22px;
	height: 22px;
	border-radius: var(--pm-r-pill);
	background: #fff;
	box-shadow: 0 1px 3px rgba(25, 21, 18, .25);
	transition: transform var(--pm-fast) var(--pm-ease);
}
.pxpm-switch[aria-checked="true"] {
	background: var(--pm-sand-deep); /* on: deep sand (5.9:1). Plain sand is 1.9:1 — too faint for AA on a public page */
}
.pxpm-switch[aria-checked="true"] span {
	transform: translateX(-20px);
}
.pxpm-menu {
	margin-top: var(--pm-s2);
}
.pxpm-menu hr {
	margin: var(--pm-s2) 0;
	border: 0;
	border-top: var(--pm-border);
}
.pxpm-item {
	display: flex;
	align-items: center;
	gap: var(--pm-s3);
	width: 100%;
	min-height: var(--pm-h);
	padding: 0 var(--pm-s2);
	border: 0;
	border-radius: var(--pm-r);
	background: none;
	color: var(--pm-ink);
	font: inherit;
	font-size: var(--pm-text);
	text-align: start;
	cursor: pointer;
	transition: background-color var(--pm-fast) var(--pm-ease);
}
.pxpm-item .pxpm-i {
	width: 20px;
	height: 20px;
	color: var(--pm-muted);
}
@media (hover: hover) {
	.pxpm-item:hover {
		background: var(--pm-bg);
	}
}
.pxpm-item.pxpm-danger,
.pxpm-item.pxpm-danger .pxpm-i {
	color: var(--pm-error);
}

/* ───── terms ───── */
.pxpm-terms h3 {
	margin: var(--pm-s5) 0 var(--pm-s2);
	font-size: var(--pm-text);
	font-weight: var(--pm-w-bold);
}

/* ───── footer ───── */
.pxpm-foot {
	margin-top: var(--pm-s7);
	text-align: center;
	font-size: var(--pm-text-sm);
	color: var(--p-muted, var(--pm-muted));
}
.pxpm-foot p {
	margin: 0 0 var(--pm-s2);
}
.pxpm-foot-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pm-s1) var(--pm-s4);
	margin-bottom: var(--pm-s2);
}
.pxpm-foot-links a {
	color: var(--p-text, var(--pm-ink));
	text-underline-offset: 3px;
}
.pxpm-by {
	font-size: var(--pm-text-xs);
}

/* ───── in-app browser screen ───── */
.pxpm-inapp {
	position: fixed;
	inset: 0;
	z-index: 50;
	overflow-y: auto;
	background: var(--p-bg, var(--pm-bg));
	text-align: center;
}
.pxpm-inapp .pxpm-wrap {
	padding-top: var(--pm-s8);
}

/* ───── toast (D19) ───── */
.pxpm-toast {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 70;
	max-width: min(420px, calc(100% - 32px));
	padding: var(--pm-s3) var(--pm-s4);
	border-radius: var(--pm-r);
	background: var(--pm-ink);
	color: #F7F7F7;
	box-shadow: var(--pm-shadow-float);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity var(--pm-slow) var(--pm-ease), transform var(--pm-slow) var(--pm-ease);
}
.pxpm-toast:empty {
	visibility: hidden;
}
.pxpm-toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ───── sheet (D18): bottom sheet on phones, centred box from 640px ───── */
.pxpm-sheet-bg {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(25, 21, 18, .45);
}
.pxpm-sheet {
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--pm-s6);
	padding-bottom: calc(var(--pm-s6) + env(safe-area-inset-bottom, 0px));
	border-radius: var(--pm-r) var(--pm-r) 0 0;
	background: var(--pm-card);
	color: var(--pm-ink);
	box-shadow: var(--pm-shadow-float);
	animation: pxpm-up var(--pm-slow) var(--pm-ease);
}
.pxpm-grab {
	display: block;
	width: 40px;
	height: 4px;
	margin: -8px auto var(--pm-s4);
	border-radius: var(--pm-r-pill);
	background: var(--pm-line);
}
.pxpm-sheet-text {
	margin: 0 0 var(--pm-s3);
	color: var(--pm-muted);
}
@keyframes pxpm-up {
	from { transform: translateY(12px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
@media (min-width: 640px) {
	.pxpm-sheet-bg {
		align-items: center;
	}
	.pxpm-sheet {
		max-width: 460px;
		border-radius: var(--pm-r);
		padding-bottom: var(--pm-s6);
	}
	.pxpm-grab {
		display: none;
	}
}

/* ───── bigger screens ───── */
@media (min-width: 640px) {
	.pxpm-wrap {
		padding-top: var(--pm-s7);
	}
	.pxpm-hero {
		font-size: var(--pm-text-hero);
	}
	.pxpm-name {
		font-size: var(--pm-text-page);
	}
}

/* ───── 0.1.0 review fixes ───── */

/* QR first on the web card (no scrolling at the counter): compact count above it, QR capped by the screen height */
.pxpm-qr-count {
	margin: 0 0 var(--pm-s3) !important;
	font-weight: var(--pm-w-medium);
}
.pxpm-qr-count b {
	font-weight: var(--pm-w-black);
}
.pxpm-qr {
	max-width: min(240px, 40vh);
}
.pxpm-refresh {
	min-height: 44px;
	margin-inline-start: var(--pm-s2);
	vertical-align: middle;
}
.pxpm-a2hs-in {
	margin: var(--pm-s3) 0;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}

/* Links that sit directly on the business background (not inside a white card) use --p-link (4.5:1 against the
   background, computed in PXPM_Public::theme); inside cards and sheets they keep the card accent. */
.pxpm-page .pxpm-link {
	color: var(--p-link, var(--p-accent, var(--pm-sand-deep)));
}
.pxpm-page .pxpm-card .pxpm-link,
.pxpm-page .pxpm-sheet .pxpm-link {
	color: var(--p-accent, var(--pm-sand-deep));
}
.pxpm-page .pxpm-link:disabled {
	color: var(--pm-muted);
}

/* Focus ring: at least 3:1 against the business background; cards keep #8A5A1F on white */
.pxpm-page :focus-visible {
	outline-color: var(--p-focus, var(--pm-focus));
}
.pxpm-page .pxpm-card :focus-visible,
.pxpm-page .pxpm-sheet :focus-visible {
	outline-color: var(--pm-focus);
}

/* ───── the demo club (PXPM_Demo, Phase 1.5): /pmember/demo/ and /pmember/demo/c/demo ───── */

/* the bar says "this is a sample", not a warning: sand, ink text, the icon in the deep sand */
.pxpm-demo-bar {
	background: var(--pm-sand-soft);
}
.pxpm-demo-bar .pxpm-i {
	color: var(--pm-sand-deep);
}
.pxpm-banner.info {
	background: var(--pm-sand-soft);
	color: var(--pm-ink);
}
.pxpm-banner.info .pxpm-i {
	color: var(--pm-sand-deep);
}
.pxpm-demo-note {
	margin: var(--pm-s4) 0 0;
	font-size: var(--pm-text-sm);
}
.pxpm-demo-link {
	display: flex;
	justify-content: center;
	margin-top: var(--pm-s4);
	min-height: 44px;
	align-items: center;
}
.pxpm-demo-scan {
	margin-top: var(--pm-s4);
	text-align: center;
}
.pxpm-demo-scan .pxpm-btn {
	margin-top: 0;
}
.pxpm-demo-scan p {
	margin: var(--pm-s2) 0 0 !important;
}
/* "סריקה לדוגמה": the new punch pops once */
.pxpm-slot.pop {
	animation: pxpm-pop .6s var(--pm-ease);
}
@keyframes pxpm-pop {
	0% { transform: scale(.6); background: var(--pm-ok-soft); }
	60% { transform: scale(1.12); }
	100% { transform: none; }
}

/* ───── join with Google / Apple (0.4.0, PXPM_Join::social) ─────
   Secondary buttons (white, sand border, 20px corners, 50px), above the form, then "או עם מספר טלפון".
   Hover = black like every house button. Hover / focus colours are pinned: the site theme turns every button
   pink (#c36) on hover and focus. The Google "G" keeps its colours; the Apple logo follows the text colour. */
.pxpm-social {
	margin: 0 0 var(--pm-s4);
}
.pxpm-social .pxpm-btn.pxpm-social-btn {
	margin-top: var(--pm-s3);
	background: var(--pm-card);
	color: var(--pm-ink);
	border-color: var(--pm-sand);
}
.pxpm-social .pxpm-btn.pxpm-social-btn:first-child {
	margin-top: 0;
}
.pxpm-social .pxpm-btn.pxpm-social-btn:focus,
.pxpm-social .pxpm-btn.pxpm-social-btn:active {
	background: var(--pm-card);
	color: var(--pm-ink);
	border-color: var(--pm-sand);
}
@media (hover: hover) {
	.pxpm-social .pxpm-btn.pxpm-social-btn:hover,
	.pxpm-social .pxpm-btn.pxpm-social-btn:hover:focus {
		background: var(--pm-hover);
		color: var(--pm-on-hover);
		border-color: var(--pm-hover);
	}
}
.pxpm-social-btn .pxpm-logo {
	flex: none;
	width: 20px;
	height: 20px;
}
.pxpm-social-btn .pxpm-logo-g,
.pxpm-social-btn .pxpm-logo-f {
	background: #FFFFFF; /* the G stays readable on the black hover */
	border-radius: var(--pm-r-pill);
	padding: 1px;
	box-sizing: content-box;
}
.pxpm-or {
	display: flex;
	align-items: center;
	gap: var(--pm-s3);
	margin: var(--pm-s4) 0 0;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}
.pxpm-or::before,
.pxpm-or::after {
	content: "";
	flex: 1;
	border-top: var(--pm-border);
}
.pxpm-social-note {
	margin: 0 0 var(--pm-s4);
}

/* ───── 0.10.0 (PM-D60): the join page in two steps — 1 Google / Apple, 2 the short form ───── */
.pxpm-steps {
	margin: 0 0 var(--pm-s2);
	color: var(--pm-muted);
	font-size: 14px;
	text-align: center;
}
.pxpm-stepbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pm-s3);
	margin-bottom: var(--pm-s2);
}
.pxpm-stepbar .pxpm-steps {
	margin: 0;
}
.pxpm-social .pxpm-btn.pxpm-social-btn {
	min-height: 56px;
	font-size: 16px;
}
.pxpm-social .pxpm-steps + .pxpm-btn.pxpm-social-btn {
	margin-top: 0;
}
.pxpm-phone-link {
	display: flex;
	justify-content: center;
	margin: var(--pm-s3) auto 0;
	font-size: 14px;
}
.pxpm-mailro {
	margin: 0 0 var(--pm-s3);
	color: var(--pm-muted);
}
/* chains (0.10.1, "like P-Link"): branch tabs + the selected branch's panel with P-Link-style buttons */
.pxpm-nearbtn {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-s1);
	margin: 0 0 var(--pm-s2);
}
.pxpm-brtabs {
	display: flex;
	gap: var(--pm-s2);
	overflow-x: auto;
	margin: 0 calc(-1 * var(--pm-s5)) var(--pm-s3);
	padding: 2px var(--pm-s5) var(--pm-s1);
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.pxpm-brtabs::-webkit-scrollbar {
	display: none;
}
.pxpm-brtab {
	flex: 0 0 auto;
	min-height: var(--pm-h);
	padding: 0 var(--pm-s4);
	border-radius: var(--pm-r-pill);
	border: 1px solid var(--pm-line);
	background: #fff;
	color: var(--pm-ink);
	font: var(--pm-w-medium) var(--pm-text-sm) / 1 var(--pm-font);
	white-space: nowrap;
	cursor: pointer;
	scroll-snap-align: center;
	transition: background .15s cubic-bezier(.2,.7,.2,1), border-color .15s cubic-bezier(.2,.7,.2,1);
}
.pxpm-brtab[aria-selected="true"] {
	background: var(--pm-sand);
	border-color: var(--pm-sand);
	color: var(--pm-on-sand);
}
.pxpm-brtab.pxpm-near:not([aria-selected="true"]) {
	border-color: var(--pm-sand);
}
.pxpm-brtab:focus-visible {
	outline: 3px solid var(--pm-sand-soft);
	outline-offset: 1px;
}
.pxpm-brpanel[hidden] {
	display: none;
}
.pxpm-braddr {
	display: flex;
	gap: var(--pm-s2);
	align-items: flex-start;
	margin: 0 0 var(--pm-s3);
	font-size: var(--pm-text-sm);
	color: var(--pm-muted);
}
.pxpm-braddr b {
	color: var(--pm-ink);
	font-weight: var(--pm-w-medium);
}
.pxpm-braddr .pxpm-i {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}
.pxpm-pbtns {
	display: flex;
	flex-direction: column;
	gap: var(--pm-s3);
}
.pxpm-pbtn {
	display: flex;
	align-items: center;
	gap: var(--pm-s3);
	min-height: var(--pm-h);
	padding: 0 var(--pm-s4);
	border-radius: var(--pm-r);
	border: 1px solid var(--pm-sand);
	background: #fff;
	color: var(--pm-ink);
	font: var(--pm-w-medium) var(--pm-text) / 1.25 var(--pm-font);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
	transition: background .3s cubic-bezier(.2,.7,.2,1), color .3s cubic-bezier(.2,.7,.2,1);
}
.pxpm-pbtn::-webkit-details-marker {
	display: none;
}
.pxpm-pbtn:hover {
	background: var(--pm-hover);
	color: var(--pm-on-hover);
	border-color: var(--pm-hover);
}
.pxpm-pbi,
.pxpm-pbc {
	flex: none;
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
}
.pxpm-pbi .pxpm-i,
.pxpm-pbc .pxpm-i {
	width: 20px;
	height: 20px;
}
.pxpm-pbt {
	flex: 1;
	text-align: center;
	padding-inline-end: 24px;
}
.pxpm-phrs summary .pxpm-pbt {
	padding-inline-end: 0;
}
.pxpm-phrs.is-open .pxpm-pbt {
	color: var(--pm-ok);
}
.pxpm-phrs.is-open summary:hover .pxpm-pbt {
	color: inherit;
}
.pxpm-phrs[open] .pxpm-pbc {
	transform: rotate(180deg);
}
.pxpm-week {
	width: 100%;
	margin: var(--pm-s2) 0 0;
	border-collapse: collapse;
	font-size: var(--pm-text-sm);
}
.pxpm-week th,
.pxpm-week td {
	padding: var(--pm-s1) var(--pm-s3);
	text-align: start;
	font-weight: var(--pm-w-regular);
	border-bottom: 1px solid var(--pm-line);
}
.pxpm-week td {
	text-align: end;
}
.pxpm-week tr.pxpm-today th,
.pxpm-week tr.pxpm-today td {
	font-weight: var(--pm-w-bold);
}
.pxpm-brsvc {
	margin: var(--pm-s4) 0 0;
	color: var(--pm-muted);
}
@media (prefers-reduced-motion: reduce) {
	.pxpm-brtab,
	.pxpm-pbtn {
		transition: none;
	}
}
/* 0.10.1: "תמונת המבצע" at the top of the offers block (web card) */
.pxpm-offimg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pm-r);
	margin: 0 0 var(--pm-s3);
}
.pxpm-offers .pxpm-pbtn {
	margin-top: var(--pm-s3);
}
.pxpm-chainbtn {
	margin-bottom: var(--pm-s4);
}
.pxpm-card a.pxpm-pbtn,
.pxpm-card summary.pxpm-pbtn {
	color: var(--pm-ink);
	text-decoration: none;
}
.pxpm-card a.pxpm-pbtn:hover,
.pxpm-card summary.pxpm-pbtn:hover {
	color: var(--pm-on-hover);
}

/* הטבת יום הולדת (0.10.4, PXPM_Birthday): יום + חודש זה לצד זה, בלי שנה */
.pxpm-bday-row {
	display: flex;
	gap: 8px;
}
.pxpm-bday-row .pxpm-in {
	flex: 1 1 0;
	min-width: 0;
}
.pxpm-bday-card .pxpm-form {
	margin-top: 12px;
}

/* 0.10.8: the club's P-Link page — its own button right under the join form / the wallet buttons */
.pxpm-plinkcta {
	margin: var(--pm-s4) 0;
}
.pxpm-plinkcta a.pxpm-pbtn {
	color: var(--pm-ink);
	text-decoration: none;
}
.pxpm-plinkcta a.pxpm-pbtn:hover,
.pxpm-plinkcta a.pxpm-pbtn:focus-visible {
	color: var(--pm-on-hover);
}

/* 0.10.17: the chain's customer service, one line right under the chain P-Link (replaces the branches card) */
.pxpm-svcline {
	margin: calc(-1 * var(--pm-s2)) 0 var(--pm-s4);
	text-align: center;
	font-size: var(--pm-text-sm);
	color: var(--p-muted, var(--pm-muted));
	overflow-wrap: anywhere;
}
.pxpm-svcline a {
	color: var(--p-text, var(--pm-ink));
	text-underline-offset: 3px;
}

/* 0.10.14: the chain P-Link as a small version of the page itself (PXPM_Club::mini_plink) — its own colours
   (--mpl-*), button shape and logo ring, like P-Link's pxqr-page.css at ~70%; the whole card is one link */
.pxpm-page a.pxpm-mpl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	padding: 12px 16px 0;
	border-radius: var(--pm-r);
	background: var(--mpl-bg);
	color: var(--mpl-text);
	text-decoration: none;
	box-shadow: 0 0 0 1px rgba(127, 127, 127, .28), 0 10px 28px rgba(0, 0, 0, .16);
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.pxpm-page a.pxpm-mpl:active {
	transform: scale(.985);
}
.pxpm-page a.pxpm-mpl:focus-visible {
	outline: 3px solid var(--mpl-accent);
	outline-offset: 3px;
}
.pxpm-mpl-bar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-height: 24px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .16);
	color: var(--mpl-muted);
	font-size: 12px;
	line-height: 1;
}
.pxpm-mpl-bar bdi {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pxpm-mpl-bar .pxpm-i {
	flex: none;
	width: 13px;
	height: 13px;
}
.pxpm-mpl-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 100%;
	min-width: 0;
	margin-top: 4px;
	text-align: center;
}
.pxpm-mpl-av {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 6px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--mpl-accent);
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	box-shadow: 0 0 0 3px var(--mpl-bg), 0 0 0 4px rgba(0, 0, 0, .08);
}
.pxpm-mpl.has-ring img.pxpm-mpl-av {
	background: var(--mpl-ring);
}
.pxpm-mpl.has-ring .pxpm-mpl-av {
	box-shadow: 0 0 0 3px var(--mpl-ring), 0 4px 12px rgba(0, 0, 0, .18);
}
.pxpm-mpl-name {
	max-width: 100%;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pxpm-mpl-cat {
	max-width: 100%;
	color: var(--mpl-muted);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pxpm-mpl-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.pxpm-mpl-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mpl-btn);
	color: var(--mpl-btn-text);
}
.pxpm-mpl-ic svg {
	width: 15px;
	height: 15px;
}
.pxpm-mpl-btns {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	max-width: 300px;
}
.pxpm-mpl-b {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 38px;
	padding: 0 10px;
	border-radius: var(--mpl-r);
	background: var(--mpl-btn);
	color: var(--mpl-btn-text);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(127, 127, 127, .18);
}
.pxpm-mpl.is-lined .pxpm-mpl-b,
.pxpm-mpl.is-lined .pxpm-mpl-ic {
	box-shadow: 0 0 0 1.5px var(--mpl-line);
}
.pxpm-mpl-bi,
.pxpm-mpl-bc {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}
.pxpm-mpl-bi svg,
.pxpm-mpl-bi img,
.pxpm-mpl-bc svg {
	width: 16px;
	height: 16px;
}
.pxpm-mpl-bt {
	flex: 1;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.pxpm-mpl-bl {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pxpm-mpl-n {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .2);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.pxpm-mpl-bc {
	opacity: .75;
}
/* like P-Link 1.34.3: on dark buttons the brown map pin turns sand */
.pxpm-mpl.is-darkbtn :is(.pxpm-mpl-bi, .pxpm-mpl-ic) svg [stroke="#8A5A1F" i],
.pxpm-mpl.is-darkbtn :is(.pxpm-mpl-bi, .pxpm-mpl-ic) svg[stroke="#8A5A1F" i] {
	stroke: #D5B398;
}
.pxpm-mpl-more {
	color: var(--mpl-muted);
	font-size: 12px;
	text-align: center;
}
.pxpm-mpl-go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	align-self: stretch;
	min-height: 48px;
	margin: 4px -16px 0;
	border-top: 1px solid rgba(127, 127, 127, .28);
	background: rgba(127, 127, 127, .08);
	font-size: 15px;
	font-weight: 500;
}
.pxpm-mpl-go .pxpm-i {
	width: 18px;
	height: 18px;
	transform: scaleX(-1);
}

/* 0.10.8: footer promo like the bottom of P-Link — outlined pill + "P-Member by Printix" */
.pxpm-promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: var(--pm-s5);
}
.pxpm-promo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pm-h);
	padding: 0 24px;
	border-radius: var(--pm-r);
	border: 1px solid var(--pm-sand);
	background: transparent;
	color: var(--pm-ink);
	font: var(--pm-w-medium) var(--pm-text) / 1.25 var(--pm-font);
	text-decoration: none;
	text-align: center;
	transition: background .3s cubic-bezier(.2,.7,.2,1), color .3s cubic-bezier(.2,.7,.2,1), border-color .3s cubic-bezier(.2,.7,.2,1);
}
.pxpm-promo-btn:hover,
.pxpm-promo-btn:focus-visible {
	background: var(--pm-hover);
	border-color: var(--pm-hover);
	color: var(--pm-on-hover);
}
.pxpm-promo.is-dark .pxpm-promo-btn {
	border-color: #FFFFFF;
	color: #FFFFFF;
}
.pxpm-promo.is-dark .pxpm-promo-btn:hover,
.pxpm-promo.is-dark .pxpm-promo-btn:focus-visible {
	background: var(--pm-hover);
	border-color: var(--pm-hover);
	color: var(--pm-on-hover);
}
.pxpm-bline {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-size: 14px;
	font-weight: var(--pm-w-medium);
	color: var(--p-muted, var(--pm-muted));
}
.pxpm-promo.is-dark .pxpm-bline {
	color: #FFFFFF;
}
.pxpm-bline .pxpm-bp { /* רק סימן "by Printix" — בלי ההקשר זה התנגש בעטיפת דף ההקמה /pmember/ (#pxpm-bp) והפך אותו לשורה אחת */
	display: inline-flex;
	align-items: baseline;
	font-weight: var(--pm-w-bold);
}
.pxpm-bmark {
	width: .72em;
	height: .95em;
	flex: none;
	align-self: center;
	margin-inline-end: 1px;
}
@media (prefers-reduced-motion: reduce) {
	.pxpm-promo-btn {
		transition: none;
	}
}

/* 0.11.8 (Tomer 13.10: „the join button — you can't see it, make it animated, in the club colours”): main buttons on the white
   card take --p-cta (PXPM_Public::brand: the button colour or the page colour, whichever shows on white); the join button
   breathes and shines. Reduced motion: still. */
.pxpm-card .pxpm-primary, .pxpm-page .pxpm-card a.pxpm-btn.pxpm-primary { background: var(--p-cta, var(--p-btn, var(--pm-sand))); color: var(--p-cta-text, var(--p-btn-text, var(--pm-on-sand))); }
.pxpm-go { position: relative; overflow: hidden; font-weight: var(--pm-w-bold, 700); box-shadow: 0 6px 18px color-mix(in srgb, var(--p-cta, #191512) 35%, transparent); animation: pxpm-breathe 2.6s ease-in-out infinite; }
.pxpm-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); animation: pxpm-shine 3.2s ease-in-out infinite; pointer-events: none; }
.pxpm-go.is-busy, .pxpm-go:disabled { animation: none; }
.pxpm-go.is-busy::after, .pxpm-go:disabled::after { display: none; }
@keyframes pxpm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes pxpm-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .pxpm-go, .pxpm-go::after { animation: none; } }

/* ───── 0.11.15: the punch grid as on the wallet card (PXPM_Images::grid_web — the same drawing as the Apple strip /
   Google hero: the card colour, the owner's stamp, style and shape; inline SVG, each slot carries both states) ───── */
.pxpm-wstrip {
	overflow: hidden;
	border-radius: var(--pm-r-small, 12px);
	line-height: 0;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.pxpm-wgrid {
	display: block;
	width: 100%;
	height: auto;
}
.pxpm-ws .w1,
.pxpm-ws.on .w0 {
	display: none;
}
.pxpm-ws.on .w1 {
	display: inline;
}
.pxpm-ws.pop .w1 {
	transform-box: fill-box;
	transform-origin: center;
	animation: pxpm-wpop .6s var(--pm-ease);
}
@keyframes pxpm-wpop {
	0% { transform: scale(.6); }
	60% { transform: scale(1.12); }
	100% { transform: none; }
}
.pxpm-preview-wheel {
	margin: var(--pm-s2) 0 0 !important;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}
/* 0.11.18 „תקנון העסק” בדף התקנון: אחרי „עיקרי הכללים”, לפני הפרטיות */
.pxpm-own-terms {
	margin-top: var(--pm-s6);
	padding-top: var(--pm-s5);
	border-top: 1px solid var(--pm-line);
}
.pxpm-tc h3 {
	margin: var(--pm-s5) 0 var(--pm-s2);
}
.pxpm-tc h4 {
	margin: var(--pm-s4) 0 var(--pm-s2);
	font-size: var(--pm-text);
}
.pxpm-tc p,
.pxpm-tc li {
	line-height: 1.6;
}
.pxpm-tc .pxpm-tc-n b {
	margin-inline-end: 4px;
}
.pxpm-tc ul {
	margin: var(--pm-s2) 0;
	padding-inline-start: var(--pm-s5);
}
.pxpm-locked-h {
	margin-top: var(--pm-s6) !important;
	padding-top: var(--pm-s5);
	border-top: 1px solid var(--pm-line);
}
/* 0.11.17: הכרטיס באינטרנט — שורת הגלגל החודשי מתחת להטבות */
.pxpm-member .pxpm-preview-wheel {
	display: flex;
	align-items: flex-start;
	gap: var(--pm-s2);
	color: var(--pm-ink);
}
.pxpm-member .pxpm-preview-wheel .pxpm-i {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}
.pxpm-won {
	margin-top: var(--pm-s3);
	padding: var(--pm-s3) var(--pm-s4);
	border-radius: var(--pm-r-small, 12px);
	background: var(--pm-sand-soft);
}
.pxpm-won-h {
	display: flex;
	align-items: center;
	gap: var(--pm-s2);
	margin: 0 0 var(--pm-s1) !important;
	font-weight: var(--pm-w-bold);
}
.pxpm-won-h .pxpm-i {
	width: 20px;
	height: 20px;
	color: var(--pm-sand-deep);
}
.pxpm-won ul {
	margin: 0;
	padding: 0 var(--pm-s5) 0 0;
}
@media (prefers-reduced-motion: reduce) {
	.pxpm-ws.pop .w1 { animation: none; }
}
/* 0.11.15: the offer image like the Google hero panel — a rounded frame in the card colour, the photo whole inside */
.pxpm-offbezel {
	margin: 0 0 var(--pm-s3);
	padding: 3.2%;
	border-radius: clamp(14px, 5.9%, 28px);
	background: var(--wc-bg, #D5B398);
}
.pxpm-offbezel .pxpm-offimg {
	margin: 0;
	border-radius: clamp(8px, 2.8%, 16px);
}
/* 0.11.18: „מציגים בקופה” — after a tap in a club that punches by the purchase: the code big in the middle, calm */
.pxpm-counter {
	padding-block: var(--pm-s6);
}
.pxpm-counter-line {
	margin: 0 0 var(--pm-s4) !important;
	font-size: var(--pm-text-lg, 16px);
	font-weight: var(--pm-w-bold);
	line-height: 1.5;
}
.pxpm-counter .pxpm-qr {
	max-width: min(300px, 52vh);
	padding: 12px;
	border-radius: 20px;
	box-shadow: 0 0 0 1px var(--pm-line);
}
.pxpm-counter-who {
	margin: var(--pm-s4) 0 var(--pm-s3) !important;
	font-size: var(--pm-text-lg, 16px);
}
.pxpm-counter-who .pxpm-code {
	display: inline;
	margin: 0 !important;
	font-size: inherit;
}
.pxpm-counter .pxpm-qr-count {
	margin: var(--pm-s3) 0 var(--pm-s2) !important;
}
/* 0.11.18: every offer with its own photo — the list item without the bullet, the photo above its text */.pxpm-lines li.pxpm-offer-ph {
	list-style: none;
	margin: 0 calc(-1 * var(--pm-s5)) var(--pm-s4) 0;
}
.pxpm-lines li.pxpm-offer-ph .pxpm-offbezel {
	margin: 0 0 var(--pm-s2);
}/* 0.11.15: the join page's card = the wallet card: the card colour, its text colour, the strip inside */
.pxpm-preview.pxpm-wpass {
	background: var(--wc-bg);
	color: var(--wc-fg);
	border: 1px solid color-mix(in srgb, var(--wc-fg) 22%, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.pxpm-wpass .pxpm-preview-count,
.pxpm-wpass .pxpm-preview-count b,
.pxpm-wpass .pxpm-preview-reward,
.pxpm-wpass .pxpm-preview-reward b,
.pxpm-wpass .pxpm-preview-reward .pxpm-i,
.pxpm-wpass .pxpm-preview-wheel {
	color: inherit;
}
.pxpm-wpass .pxpm-preview-count,
.pxpm-wpass .pxpm-preview-wheel {
	opacity: .85;
}
.pxpm-wpass .pxpm-wstrip {
	box-shadow: none;
	border-radius: 0;
	margin: 0 calc(var(--pm-s5) * -1);
}

/* ───── 0.13.0: language (PXPM_I18n::switcher) ─────
   One quiet row at the top of every public page: "עברית · English · العربية · Русский". The current one is bold and
   underlined. Each name is written in its own language and direction. Arabic / Cyrillic fall back to the system font
   (Heebo has neither), and the page flips to left-to-right for English and Russian (the layout uses logical sides). */
.pxpm-langs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	padding: 10px 16px 0;
	font-family: var(--pm-font);
	font-size: 13px;
	line-height: 1.6;
	color: var(--p-text, var(--pm-ink));
	opacity: .78;
}
.pxpm-langs a {
	color: inherit !important;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding: 2px 0;
}
.pxpm-langs a:hover,
.pxpm-langs a[aria-current] {
	border-bottom-color: currentColor;
}
.pxpm-langs a[aria-current] {
	font-weight: 700;
}
/* 0.13.1 (Tomer 19.10): the language is a flag at the top left, the same on every Printix screen (printix-languages flags).
   In the page flow, not fixed: the join / card pages keep their own corner buttons. */
.pxpm-langs.is-flag {
	display: block;
	position: relative;
	z-index: 50;
	width: max-content;
	margin: 6px auto 0 6px;
	padding: 0;
	opacity: 1;
	direction: ltr;
}
/* 0.13.2 (Tomer 19.10): just the flag, like the page's own icons — no bubble, no border, no chevron */
.pxpm-langs.is-flag summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.pxpm-langs.is-flag summary:hover {
	background: rgba(127, 127, 127, .14);
}
.pxpm-langs.is-flag summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}
.pxpm-langs.is-flag summary::-webkit-details-marker {
	display: none;
}
.pxpm-langs .px-flag {
	width: 24px;
	height: 16px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(25, 21, 18, .18);
	flex: none;
	display: block;
}
.pxpm-langs .pxpm-chev {
	display: none;
}
.pxpm-langs.is-flag nav {
	position: absolute;
	top: 46px;
	left: 0;
	right: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 170px;
	padding: 8px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid #E6DFD6;
	box-shadow: 0 12px 32px rgba(25, 21, 18, .14);
}
.pxpm-langs.is-flag nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 14px;
	border: 0;
	color: #191512 !important;
	font: 500 14px/1.4 var(--pm-font);
}
.pxpm-langs.is-flag nav a:hover {
	background: #FBFAF7;
}
.pxpm-langs.is-flag nav a[aria-current] {
	background: #F3F0EB;
	font-weight: 700;
}
/* 0.13.3 (Tomer 19.10): the join page's top icons, like P‑Link — call top right, share top left, the language flag next to
   share (PXPM_I18n::page puts it at <!--pxpm-flag-slot-->). Mirrored on a left-to-right page. */
.pxpm-head-icons {
	position: relative;
}
.pxpm-calltop,
.pxpm-sharetop {
	position: absolute;
	top: -8px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--p-text, var(--pm-ink));
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.pxpm-calltop {
	right: -6px;
}
.pxpm-sharetop {
	left: -6px;
}
.pxpm-calltop .pxpm-i,
.pxpm-sharetop .pxpm-i {
	width: 22px;
	height: 22px;
}
.pxpm-calltop:hover,
.pxpm-sharetop:hover {
	background: rgba(127, 127, 127, .12);
}
.pxpm-calltop:focus-visible,
.pxpm-sharetop:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}
.pxpm-head-icons .pxpm-langs.is-flag {
	position: absolute;
	top: -8px;
	left: 40px;
	margin: 0;
}
html[dir="ltr"] .pxpm-calltop {
	right: auto;
	left: -6px;
}
html[dir="ltr"] .pxpm-sharetop {
	left: auto;
	right: -6px;
}
html[dir="ltr"] .pxpm-head-icons .pxpm-langs.is-flag {
	left: auto;
	right: 40px;
}
html[dir="ltr"] .pxpm-head-icons .pxpm-langs.is-flag nav {
	left: auto;
	right: 0;
}
html[lang="ar"] .pxpm-page,
html[lang="ar"] .pxpm-page input,
html[lang="ar"] .pxpm-page button {
	font-family: "Heebo", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}

/* D33 (19.10.2026): centred button labels — icon + word together in the middle */
.pxpm-btn, .pxpm-nearbtn { justify-content: center; text-align: center; }