/*
 * P-Member public builder (/pmember/, public/builder.php). Tomer 12.10: "All of them should basically look the same in
 * UI/UX terms, just different products" — the look of the approved /pcode generator and the /plink builder:
 * a hero (sand-soft pill, 36 title, one lead line, three check pills; after the first step only the title),
 * ONE white card with "שלב N מתוך M", the business as a pill and a sand progress bar, then "חזרה" (one third, right)
 * and "המשך" (two thirds, left) at the TOP of the card under the bar, then the step; the live preview in a sticky
 * column on the left (under the form on tablets and phones, foldable).
 * Load after pxpm-tokens.css and pxpm.css (the join page CSS: the preview uses its real classes).
 *
 * House rules: Heebo; radius 20 (pills 999, checkbox 8); controls 50px; flat cards with a 1px line; shadow only on
 * floating things; #111 on sand (PM-D30); a visible focus ring; no emojis (line icons); two speeds, one easing.
 * The business colours (--p-*) live only inside the preview frame (.pxpm-bp-pv), never on the builder itself.
 */

.pxpm-bp-page {
	background: var(--pm-bg);
	color: var(--pm-ink);
}
/* 13.10: inside the site page (under the site header) — the page block, not the whole window */
.pxpm-embed {
	padding: var(--pm-s6) 0 0;
}

.pxpm-bp {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--pm-s7) var(--pm-s6) var(--pm-s8);
}
/*
 * 0.12.2 (תומר 17.10, בטלפון אחרי "המשך עם Google": מסך לבן, הדף התרחב והכפתור בפינה — כמו ב-/pcode וב-/plink):
 * שום דבר לא מרחיב את הדף לצדדים — html ו-body חותכים לרוחב המסך (clip: בלי גלילה, הפס הקבוע בתחתית לא נפגע).
 * מחוץ ל-@media בכוונה: דף שהתרחב כבר לא "עד 640" והכלל היה כבה לבד. body ב-position:relative — אחרת אלמנט
 * במיקום מוחלט שנוסף ל-body (כמו של Google) לא נחתך, וכרום בטלפון מרחיק את התצוגה.
 */
html:has(#pxpm-bp) {
	overflow-x: hidden !important;
	overflow-x: clip !important;
}
body:has(#pxpm-bp) {
	overflow-x: hidden !important;
	overflow-x: clip !important;
	position: relative !important;
}
/* תופעת הלוואי של body ב-position:relative (תומר 17.10, ראה ב-/pcode): עד 600 וורדפרס שם את סרגל הניהול ב-absolute,
   top:0 ו-html עם margin-top:46 — עם body יחסי הסרגל יורד 46 מתחת לכותרת ונשאר פס ריק למעלה. מחזירים אותו למעלה. */
@media screen and (max-width: 600px) {
	body.admin-bar:has(#pxpm-bp) #wpadminbar {
		top: -46px !important;
	}
}

/* ───── hero (like /pcode .pcHero) ───── */
.pxpm-bp-top {
	max-width: 720px;
	margin: 0 auto var(--pm-s7);
	text-align: center;
}
.pxpm-bp-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-s2);
	height: 32px;
	margin: 0;
	padding: 0 var(--pm-s4);
	border-radius: var(--pm-r-pill);
	background: var(--pm-sand-soft);
	color: var(--pm-sand-deep);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
}
.pxpm-bp-brand bdi {
	font-weight: var(--pm-w-bold);
}
/* 15.10 (תומר): ‎.pxpm-bp‎ לפני — בתוך עמוד של האתר הכלל ‎.elementor-kit-21 h1‎ (55px) גבר, והכותרת יצאה ענקית
   (שתי שורות בטלפון). עכשיו 36 כמו /pcode ו-/plink */
.pxpm-bp .pxpm-bp-h1 {
	margin: var(--pm-s4) 0 var(--pm-s2);
	font-size: var(--pm-text-hero);
	font-weight: var(--pm-w-black);
	line-height: var(--pm-lh-title);
	letter-spacing: 0;
	text-wrap: balance;
}
.pxpm-bp-sub {
	max-width: 600px;
	margin: 0 auto;
	color: var(--pm-muted);
	font-size: var(--pm-text-lg);
	text-wrap: pretty;
}
.pxpm-bp-perks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pm-s2);
	margin: var(--pm-s5) 0 0;
	padding: 0;
	list-style: none;
}
.pxpm-bp-perks li {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-s2);
	min-height: 36px;
	padding: 0 var(--pm-s4);
	border: var(--pm-border);
	border-radius: var(--pm-r-pill);
	background: var(--pm-card);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
}
.pxpm-bp-perks .pxpm-i {
	width: 16px;
	height: 16px;
	color: var(--pm-ok);
}
/* after the first step: only the title, so the step is in front of the eyes */
.pxpm-bp:not(.is-first) .pxpm-bp-sub,
.pxpm-bp:not(.is-first) .pxpm-bp-perks {
	display: none;
}
.pxpm-bp:not(.is-first) .pxpm-bp-top {
	margin-bottom: var(--pm-s6);
}
.pxpm-bp:not(.is-first) .pxpm-bp-h1 {
	margin: var(--pm-s3) 0 0;
	font-size: var(--pm-text-page);
}

/* ───── layout: the form card on the right, the preview on the left (RTL) ───── */
.pxpm-bp-main {
	display: grid;
	gap: var(--pm-s6);
	align-items: start;
}
.pxpm-bp-body,
.pxpm-bp-stage {
	min-width: 0;
}
@media (min-width: 1024px) {
	.pxpm-bp-main {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--pm-s8);
	}
	.pxpm-bp-stage {
		position: sticky;
		top: var(--pm-s6);
	}
}

/* ───── the form card ───── */
.pxpm-bp-body {
	padding: var(--pm-s7);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
}

/* ───── step bar (like /pcode .wizbar): "שלב N מתוך M", the business pill, the progress bar ───── */
.pxpm-bp-bar {
	margin: 0 0 var(--pm-s6);
}
.pxpm-bp-bar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pm-s3);
	margin-bottom: var(--pm-s3);
}
.pxpm-bp-stept {
	margin: 0;
	min-width: 0;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
}
.pxpm-bp-dest {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-s2);
	max-width: 100%;
	min-width: 0;
	height: 32px;
	margin: 0;
	padding: 0 var(--pm-s3);
	border-radius: var(--pm-r-pill);
	background: var(--pm-sand-soft);
	color: var(--pm-sand-deep);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
	white-space: nowrap;
	overflow: hidden;
}
.pxpm-bp-dest .pxpm-i {
	width: 16px;
	height: 16px;
}
.pxpm-bp-dest bdi {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pxpm-bp-prog {
	height: 8px;
	border-radius: var(--pm-r-pill);
	background: var(--pm-sand-soft);
	overflow: hidden;
}
.pxpm-bp-prog i {
	display: block;
	width: 0;
	min-width: 8px;
	height: 100%;
	border-radius: var(--pm-r-pill);
	background: var(--pm-sand);
	transition: width var(--pm-slow) var(--pm-ease);
}

/* ───── back / next at the TOP of the card, under the bar (Tomer 12.10, like /pcode .wbNav) ───── */
.pxpm-bp-nav {
	display: flex;
	gap: 10px;
	margin: 0 0 var(--pm-s6);
	padding: 0 0 var(--pm-s5);
	border-bottom: var(--pm-border);
}
/* 13.10: on the start screen the row sits under the sign-in ("דלגו" white) */
.pxpm-bp-nav.below {
	margin: var(--pm-s6) 0 0;
	padding: var(--pm-s5) 0 0;
	border-bottom: 0;
	border-top: var(--pm-border);
}
.pxpm-bp-nav .pxpm-btn {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: var(--pm-s2) var(--pm-s4);
	line-height: var(--pm-lh-title);
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
}
#pxpm-bp-back {
	flex: 1 1 0;
	max-width: calc(33.333% - 3.333px);
}
#pxpm-bp-next {
	flex: 2 1 0;
}
.pxpm-btn:disabled:not(.is-busy) {
	opacity: .55;
}
@media (hover: hover) {
	.pxpm-btn:disabled:hover {
		background: var(--p-btn, var(--pm-sand));
		color: var(--p-btn-text, var(--pm-on-sand));
		border-color: transparent;
	}
	.pxpm-btn.pxpm-secondary:disabled:hover {
		background: var(--pm-card);
		color: var(--pm-ink);
		border-color: var(--pm-sand);
	}
}
/*
 * 15.10 (תומר): בתוך עמוד של האתר (0.11.10) ה-reset.css של התבנית צובע כל <button> בוורוד (#c36) ב-:hover וב-:focus —
 * „דלגו” / „חזרה” נשארו ורודים אחרי נגיעה או פוקוס מהמקלדת, וריחוף על קישור, לוגו או צבע נתן רקע ורוד.
 * כאן המראה הרגיל ננעל; השחור של הריחוף נשאר רק במכשיר עם עכבר (pxpm.css, ‎(hover: hover)‎).
 */
.pxpm-bp .pxpm-btn.pxpm-primary:focus:not(:hover) {
	background: var(--p-btn, var(--pm-sand));
	color: var(--p-btn-text, var(--pm-on-sand));
	border-color: transparent;
}
.pxpm-bp .pxpm-btn.pxpm-secondary:focus:not(:hover) {
	background: var(--pm-card);
	color: var(--pm-ink);
	border-color: var(--pm-sand);
}
.pxpm-bp .pxpm-link:hover,
.pxpm-bp .pxpm-link:focus {
	background: none;
}
.pxpm-bp .pxpm-bp-logo:hover,
.pxpm-bp .pxpm-bp-logo:focus,
.pxpm-bp .pxpm-bp-sw:hover,
.pxpm-bp .pxpm-bp-sw:focus {
	background: var(--pm-card);
	color: var(--pm-ink);
}
.pxpm-bp .pxpm-bp-logo[aria-checked="true"]:hover,
.pxpm-bp .pxpm-bp-logo[aria-checked="true"]:focus {
	background: var(--pm-sand-soft);
}
/*
 * 15.10 (תומר): במסכי מגע אין ריחוף — אחרי נגיעה הדפדפן משאיר :hover „דבוק” והכפתור נשאר צבוע. כמו ב-/pcode:
 * המראה הרגיל נשאר, ושחור רק בזמן הלחיצה עצמה (:active).
 */
@media (hover: none) {
	.pxpm-bp .pxpm-btn.pxpm-primary:hover {
		background: var(--p-btn, var(--pm-sand));
		color: var(--p-btn-text, var(--pm-on-sand));
		border-color: transparent;
	}
	.pxpm-bp .pxpm-btn.pxpm-secondary:hover {
		background: var(--pm-card);
		color: var(--pm-ink);
		border-color: var(--pm-sand);
	}
	.pxpm-bp .pxpm-btn.pxpm-primary:not(:disabled):active,
	.pxpm-bp .pxpm-btn.pxpm-secondary:not(:disabled):active {
		background: var(--pm-hover);
		color: var(--pm-on-hover);
		border-color: var(--pm-hover);
	}
}
/*
 * 15.10 (תומר): „כפתור ההמשך נבלע ברקע” — כשלא נוגעים במסך כמה שניות, „המשך” (החול, רק כשהוא פעיל ונראה) קופץ
 * פעמיים ומקבל טבעת חול (.nudge, pxpm-builder.js); כל נגיעה מורידה אותו. עם „הפחתת תנועה” — רק הטבעת, בלי קפיצה.
 */
@keyframes pxNudge {
	0%,
	100% {
		transform: none;
		box-shadow: 0 0 0 0 rgba(213, 179, 152, 0);
	}
	30% {
		transform: scale(1.05);
		box-shadow: 0 0 0 8px rgba(213, 179, 152, .35);
	}
	60% {
		transform: scale(.98);
	}
}
/* ה-CSS הנוסף של האתר (wp-custom-css) שם ‎box-shadow: none !important‎ על כל button, וזה גובר גם על אנימציה —
   לכן הטבעת מצוירת על ‎::after‎ (אותה טבעת, אותו קצב) */
@keyframes pxNudgeRing {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(213, 179, 152, 0);
	}
	30% {
		box-shadow: 0 0 0 8px rgba(213, 179, 152, .35);
	}
}
.pxpm-bp .pxpm-btn.nudge {
	position: relative;
	animation: pxNudge 1s ease 2;
}
.pxpm-bp .pxpm-btn.nudge::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	animation: pxNudgeRing 1s ease 2;
}
@media (prefers-reduced-motion: reduce) {
	.pxpm-bp .pxpm-btn.nudge,
	.pxpm-bp .pxpm-btn.nudge::after {
		animation: none;
	}
	.pxpm-bp .pxpm-btn.nudge::after {
		box-shadow: 0 0 0 4px rgba(213, 179, 152, .6);
	}
}

/*
 * 0.12.0 „בוחרים תוכנית” (תומר 16.10: „Pro ראשון, החינמי מתחתיו, הרבה פחות טקסט”): שני כרטיסים אחד מעל השני — כותרת,
 * שורת מחיר אחת, עד 3 נקודות, כפתור אחד. Pro במסגרת חול וכפתור חול; בסיסי לבן עם כפתור לבן.
 */
.pxpm-bp-plans {
	display: grid;
	gap: var(--pm-s3);
}
.pxpm-bp-plan {
	padding: var(--pm-s4) var(--pm-s5);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
}
.pxpm-bp-plan.is-pro {
	border: 2px solid var(--pm-sand);
	background: #FFFBF7;
}
.pxpm-bp-plan-t {
	margin: 0;
	font-size: var(--pm-text-lg);
	font-weight: var(--pm-w-bold);
	line-height: var(--pm-lh-title);
}
.pxpm-bp-plan-p {
	margin: 2px 0 var(--pm-s2);
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}
.pxpm-bp-plan.is-pro .pxpm-bp-plan-p {
	color: var(--pm-sand-deep);
	font-weight: var(--pm-w-medium);
}
.pxpm-bp-plan ul {
	display: grid;
	gap: 2px;
	margin: 0 0 var(--pm-s3);
	padding: 0;
	list-style: none;
	font-size: var(--pm-text-sm);
	line-height: 1.5;
}
.pxpm-bp-plan li {
	position: relative;
	padding-inline-start: 16px;
}
.pxpm-bp-plan li::before {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pm-sand);
}
.pxpm-bp-plan .pxpm-btn {
	width: 100%;
	margin: 0;
}
/* 0.12.1: תבנית נקודות (אטליז) — בבסיסי הכרטיס יהיה כרטיסיית ניקובים; שורה אחת מעל „ממשיכים בחינם” */
.pxpm-bp-plan-n {
	margin: calc(-1 * var(--pm-s1)) 0 var(--pm-s3);
	color: var(--pm-sand-deep);
	font-size: var(--pm-text-sm);
	line-height: 1.5;
}

/* long words wrap inside their boxes */
.pxpm-bp-step,
.pxpm-bp-step .pxpm-card,
.pxpm-bp-step .pxpm-fld {
	min-width: 0;
}
.pxpm-bp-step .pxpm-title,
.pxpm-bp-lead,
.pxpm-bp-step .pxpm-hint,
.pxpm-bp-step .pxpm-lbl,
.pxpm-bp-got-t,
.pxpm-bp-list .pxpm-btn,
.pxpm-bp-logo {
	overflow-wrap: anywhere;
	white-space: normal;
}

/* ───── a step ───── */
.pxpm-bp-step > .pxpm-title {
	margin-bottom: var(--pm-s2);
}
.pxpm-bp-step > .pxpm-title:focus {
	outline: none;
}
.pxpm-bp-lead {
	margin: 0 0 var(--pm-s6);
	color: var(--pm-muted);
	font-size: var(--pm-text);
}
/* 15.10 (תומר): הגרסה הקצרה של משפט הפתיחה — רק בטלפון (למטה, ‎≤640‎) */
.pxpm-bp-lead-sm {
	display: none;
}
.pxpm-bp-note {
	margin: var(--pm-s3) 0 0;
	color: var(--pm-muted);
	font-size: var(--pm-text-xs);
}
.pxpm-bp-msg {
	min-height: 20px;
	margin: var(--pm-s2) 0 0;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}
.pxpm-bp-msg.bad {
	color: var(--pm-error);
}
.pxpm-bp-step .pxpm-card {
	margin-bottom: var(--pm-s4);
}
.pxpm-bp-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pm-s3);
}
.pxpm-bp-select {
	padding-inline-end: var(--pm-s7);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7166' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 18px;
	cursor: pointer;
}
/* 0.14.0: in English / Russian the builder runs left to right (printix-languages sets dir="ltr" on .pxpm-bp
   data-px-builder): the form on the left, the preview on the right, the select arrow on the right */
.pxpm-bp[dir="ltr"] .pxpm-bp-select {
	background-position: right 14px center;
}
.pxpm-bp[dir="ltr"] .pxpm-ltr {
	text-align: left;
}
.pxpm-bp-fs {
	margin: 0 0 var(--pm-s4);
	padding: 0;
	border: 0;
	min-width: 0;
}
.pxpm-bp-fs:last-child {
	margin-bottom: 0;
}
.pxpm-bp-fs legend {
	padding: 0;
}
.pxpm-bp-hours {
	margin-top: 0;
}

/* ───── sign-in: PrintixSocial.buttons (Google, Apple, Facebook) draws .pxgid inside — its own Printix button style ───── */
.pxpm-bp-signin:empty {
	display: none;
}
/* 17.10: the third option under Google / Apple — the same look as the sign-in buttons (social-login .pxgid-btn), written
   out here too: the lib adds its CSS only when it draws its buttons (sign-in off / lib not loaded → the theme's pink otherwise) */
.pxpm-bp-find {
	display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin: 10px 0 0; padding: 0 18px;
	border-radius: 20px !important; border: 1px solid #D5B398 !important; background: #fff !important; color: #111 !important;
	font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: normal; box-shadow: none !important; text-transform: none;
	transition: background .3s, color .3s, border-color .3s;
}
.pxpm-bp-find:hover, .pxpm-bp-find:focus-visible {
	background: #111 !important; color: #fff !important; border-color: #111 !important;
}
.pxpm-bp-find:focus:not(:focus-visible):not(:hover) {
	background: #fff !important; color: #111 !important; border-color: #D5B398 !important;
}
@media (hover: none) {
	.pxpm-bp-find:hover { background: #fff !important; color: #111 !important; border-color: #D5B398 !important; }
	.pxpm-bp-find:active { background: #111 !important; color: #fff !important; border-color: #111 !important; }
}
.pxpm-bp-find svg {
	flex: none; background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box;
}
.pxpm-bp-find[hidden] {
	display: none !important;
}
.pxpm-bp-who {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pm-s2) var(--pm-s3);
	padding: var(--pm-s3) var(--pm-s4);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
	font-size: var(--pm-text-sm);
}
.pxpm-bp-who > .pxpm-i {
	color: var(--pm-ok);
}
.pxpm-bp-who-mail {
	color: var(--pm-muted);
}
.pxpm-bp-who .pxpm-link {
	margin-inline-start: auto;
	min-height: 32px;
}

/* ───── the business search + "picked" row ───── */
/* 0.11.18: „מצאנו את העסק שלכם” — the confirm card (P‑Link's googlePicker) */
.pxpm-bp-confirm {
	margin: 0 0 var(--pm-s4);
}
/* only the card: the search on this screen is ours (#pxpm-bp-search) */
.pxpm-bp-confirm .pxgp .pxgp-fld,
.pxpm-bp-confirm .pxgp .pxgp-list,
.pxpm-bp-confirm .pxgp .pxgp-note {
	display: none !important;
}
.pxpm-bp-confirm-h {
	margin: 0 0 var(--pm-s3) !important;
	font-weight: var(--pm-w-bold);
}
.pxpm-bp-search {
	margin: 0 0 var(--pm-s2);
}
.pxpm-bp-search .pxl gmp-place-autocomplete {
	min-height: var(--pm-h);
}
.pxpm-bp-mine {
	margin: 0 0 var(--pm-s4);
}
.pxpm-bp-mine .pxgid-auto {
	margin: 0;
}
.pxpm-bp-list {
	display: grid;
	gap: var(--pm-s2);
	margin-top: var(--pm-s2);
}
.pxpm-bp-list .pxpm-btn {
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: var(--pm-s2) var(--pm-s4);
	text-align: start;
}
.pxpm-bp-list small {
	font-size: var(--pm-text-xs);
	opacity: .8;
}
.pxpm-bp-got-row {
	display: flex;
	align-items: center;
	gap: var(--pm-s3);
	padding: var(--pm-s3) var(--pm-s4);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
}
.pxpm-bp-got-row > .pxpm-i {
	color: var(--pm-ok);
}
.pxpm-bp-got-t {
	flex: 1;
	min-width: 0;
}
.pxpm-bp-got-t b,
.pxpm-bp-got-t span {
	display: block;
}
.pxpm-bp-got-t span {
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}
.pxpm-btn.pxpm-bp-again {
	width: auto;
	margin: 0;
	flex: none;
}
.pxpm-bp-got-list {
	margin: var(--pm-s2) 0 0;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}

/*
 * ייחוס של Google לפרטי מקום שמוצגים בלי מפה (Places API policies): הטקסט „Google Maps” כמו שהוא — בלי תרגום,
 * בלי שינוי, Roboto (או Arial), 12px, אפור #5E5E5E על רקע בהיר (6.4:1). הסגנון של Google, לא של שפת העיצוב.
 */
.pxpm-gattr,
.pxpm-bp-got-t .pxpm-gattr {
	display: inline-block;
	margin-top: 2px;
	color: #5E5E5E;
	font: 400 12px/1.4 Roboto, Arial, sans-serif;
	letter-spacing: normal;
	white-space: nowrap;
}
.pxpm-bp-attr {
	margin: var(--pm-s2) 0 0;
	text-align: end;
}

/* ───── inside Instagram / Facebook / TikTok: "open in the browser" ───── */
.pxpm-bp-inapp {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pm-s2) var(--pm-s3);
	margin: 0 0 var(--pm-s4);
	padding: var(--pm-s3) var(--pm-s4);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
	font-size: var(--pm-text-sm);
}
.pxpm-bp-inapp > span {
	flex: 1 1 220px;
}
.pxpm-bp-inapp .pxpm-btn {
	width: auto;
	margin: 0;
}

/* ───── what came from Google (hours, card-back links) ───── */
.pxpm-bp-facts {
	margin: var(--pm-s2) 0 0;
	padding: var(--pm-s3) var(--pm-s4);
	border-radius: var(--pm-r);
	background: var(--pm-bg);
}
.pxpm-bp-facts .pxpm-hint {
	margin: 0 0 var(--pm-s1);
}
.pxpm-bp-facts .pxpm-hint:last-child {
	margin-bottom: 0;
}
.pxpm-bp-facts a {
	color: var(--pm-ink);
}
.pxpm-bp-warn {
	color: var(--pm-ink);
}
.pxpm-bp-check bdi {
	font-weight: var(--pm-w-bold);
	color: var(--pm-ink);
}

/* ───── logo choices ───── */
.pxpm-bp-logos {
	display: grid;
	gap: var(--pm-s2);
}
.pxpm-bp-logo {
	display: flex;
	align-items: center;
	gap: var(--pm-s3);
	width: 100%;
	min-height: var(--pm-h);
	padding: var(--pm-s2) var(--pm-s3);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
	color: var(--pm-ink);
	font: inherit;
	font-size: var(--pm-text-sm);
	text-align: start;
	cursor: pointer;
	transition: border-color var(--pm-fast) var(--pm-ease), background-color var(--pm-fast) var(--pm-ease);
}
.pxpm-bp-logo[aria-checked="true"] {
	border-color: var(--pm-sand-deep);
	background: var(--pm-sand-soft);
}
.pxpm-bp-logo:disabled {
	opacity: .55;
	cursor: default;
}
.pxpm-bp-logo .pxpm-bp-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--pm-r-pill);
	border: var(--pm-border);
	background: var(--pm-card);
	overflow: hidden;
	font-weight: var(--pm-w-bold);
}
.pxpm-bp-logo .pxpm-bp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pxpm-bp-logo small {
	display: block;
	color: var(--pm-muted);
	font-size: var(--pm-text-xs);
}

/* ───── colour swatches (like the P-Link builder's .sw) ───── */
.pxpm-bp-sws {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: var(--pm-s3);
}
.pxpm-bp-sw {
	display: block;
	min-width: 0;
	margin: 0;
	padding: var(--pm-s2);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
	color: var(--pm-ink);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--pm-slow) var(--pm-ease), box-shadow var(--pm-slow) var(--pm-ease);
}
.pxpm-bp-sw:hover {
	border-color: var(--pm-sand);
}
.pxpm-bp-sw[aria-checked="true"] {
	border-color: var(--pm-sand);
	box-shadow: 0 0 0 2px var(--pm-sand);
}
.pxpm-bp-sw > span {
	position: relative;
	display: block;
	height: 56px;
	border-radius: var(--pm-r);
	box-shadow: inset 0 0 0 1px rgba(25, 21, 18, .08);
}
.pxpm-bp-sw > span i {
	position: absolute;
	inset: auto 12px 12px 12px;
	height: 12px;
	border-radius: var(--pm-r-pill);
}
.pxpm-bp-sw small {
	display: block;
	margin-top: var(--pm-s2);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
	overflow-wrap: anywhere;
}
.pxpm-bp-own {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-s3);
	min-height: var(--pm-h);
	margin-top: var(--pm-s3);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
	cursor: pointer;
}
.pxpm-bp-own input[type="color"] {
	width: var(--pm-h);
	height: var(--pm-h);
	padding: var(--pm-s1);
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--pm-card);
	cursor: pointer;
}

/* ───── eligibility questions ───── */
.pxpm-bp-q {
	margin: 0 0 var(--pm-s4);
	padding: 0 0 var(--pm-s4);
	border: 0;
	border-bottom: var(--pm-border);
	min-width: 0;
}
.pxpm-bp-q:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}
.pxpm-bp-qt {
	padding: 0;
	margin: 0 0 var(--pm-s2);
	font-weight: var(--pm-w-medium);
}
.pxpm-bp-yn {
	display: flex;
	gap: var(--pm-s2);
}
.pxpm-bp-opt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	max-width: 160px;
	min-height: var(--pm-h);
	padding: 0 var(--pm-s4);
	border: 1px solid var(--pm-sand);
	border-radius: var(--pm-r);
	background: var(--pm-card);
	font-weight: var(--pm-w-medium);
	cursor: pointer;
	transition: background-color var(--pm-fast) var(--pm-ease), border-color var(--pm-fast) var(--pm-ease);
}
.pxpm-bp-opt input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.pxpm-bp-opt:focus-within {
	outline: 2px solid var(--pm-focus);
	outline-offset: 2px;
}
.pxpm-bp-opt.on {
	background: var(--pm-sand);
	border-color: var(--pm-sand);
	color: var(--pm-on-sand);
}
/* Google hints a likely "yes": a dashed ring and a small tag. Never pre-checked. */
.pxpm-bp-opt.likely:not(.on) {
	border-style: dashed;
	border-color: var(--pm-sand-deep);
}
.pxpm-bp-opt.likely::after {
	content: "לפי גוגל";
	position: absolute;
	top: -10px;
	inset-inline-start: 12px;
	padding: 0 var(--pm-s2);
	border-radius: var(--pm-r-pill);
	background: var(--pm-sand-soft);
	color: var(--pm-ink);
	font-size: var(--pm-text-xs);
	font-weight: var(--pm-w-medium);
	line-height: 20px;
}
.pxpm-bp-hint {
	display: flex;
	align-items: flex-start;
	gap: var(--pm-s2);
	margin: var(--pm-s2) 0 0;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
}
.pxpm-bp-hint .pxpm-i {
	width: 16px;
	height: 16px;
	margin-top: var(--pm-s1);
	color: var(--pm-sand-deep);
}

/* ───── the live preview (like /pcode .wizStage: a caption with a live dot, the frame; the real join page markup,
   the business colours only here) ───── */
.pxpm-bp-stagebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pm-s3);
	margin: 0 0 var(--pm-s4);
}
.pxpm-bp-cap {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-s2);
	min-width: 0;
	margin: 0;
	color: var(--pm-ink);
	font-size: var(--pm-text-sm);
	font-weight: var(--pm-w-medium);
}
.pxpm-bp-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: var(--pm-r-pill);
	background: var(--pm-ok);
	box-shadow: 0 0 0 4px var(--pm-ok-soft);
}
.pxpm-btn.pxpm-bp-pvtoggle {
	display: none;
}
.pxpm-bp-pv {
	border: var(--pm-border);
	border-radius: var(--pm-r);
	background: var(--p-bg, var(--pm-bg));
	color: var(--p-text, var(--pm-ink));
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	transition: background-color var(--pm-slow) var(--pm-ease), color var(--pm-slow) var(--pm-ease);
}
.pxpm-bp-pv .pxpm-wrap {
	padding-bottom: var(--pm-s5);
}
.pxpm-bp-pv img.pxpm-av {
	padding: 0;
}
.pxpm-bp-pv .pxpm-hero {
	font-size: var(--pm-text-title);
}

/* ───── done ───── */
.pxpm-bp-step[data-step="done"] .pxpm-card {
	padding: var(--pm-s7) var(--pm-s5);
}
.pxpm-bp-step[data-step="done"] .pxpm-btn {
	margin-top: var(--pm-s4);
}

/* ───── tablet and down (like /pcode): the preview under the form, in its own card, foldable ───── */
@media (max-width: 1023px) {
	.pxpm-bp-stage {
		order: 2;
		padding: var(--pm-s5);
		border: var(--pm-border);
		border-radius: var(--pm-r);
		background: var(--pm-card);
	}
	.pxpm-bp-stagebar {
		margin: 0;
	}
	.pxpm-bp-stage.open .pxpm-bp-stagebar {
		margin-bottom: var(--pm-s5);
	}
	.pxpm-btn.pxpm-bp-pvtoggle {
		display: inline-flex;
		flex: none;
		width: auto;
		min-height: var(--pm-h-compact);
		margin: 0;
		padding: 0 var(--pm-s4);
		font-size: var(--pm-text-sm);
	}
	.pxpm-bp-stage:not(.open) .pxpm-bp-pv {
		display: none;
	}
}
/* ───── phone (≤640, like /pcode): gutter 16, title 28, card padding 20 ───── */
@media (max-width: 640px) {
	.pxpm-bp {
		padding: var(--pm-s5) var(--pm-gutter) var(--pm-s7);
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* room for the site's corner help bubble */
	}
	.pxpm-bp-top {
		margin-bottom: var(--pm-s6);
	}
	.pxpm-bp .pxpm-bp-h1 {
		font-size: var(--pm-text-page);
	}
	.pxpm-bp:not(.is-first) .pxpm-bp-h1 {
		margin-top: var(--pm-s2);
		font-size: var(--pm-text-title);
	}
	.pxpm-bp-sub {
		font-size: var(--pm-text);
	}
	.pxpm-bp-body {
		padding: var(--pm-s5);
	}
	.pxpm-bp-bar {
		margin-bottom: var(--pm-s5);
	}
	.pxpm-bp-nav {
		margin-bottom: var(--pm-s5);
		padding-bottom: var(--pm-s4);
	}
	.pxpm-bp-step .pxpm-card {
		padding: var(--pm-s4);
	}
	/*
	 * 15.10 (תומר): המסך הראשון בטלפון — Google, Apple ו„דלגו — נמלא ידנית” בלי לגלול, כמו /pcode ו-/plink.
	 * השורה הארוכה בפתיח יורדת; הגלולה, הכותרת (שורה אחת), גלולות הווי וראש הכרטיס צפופים; במסך הפתיחה הכותרת
	 * 20, המשפט הקצר (.pxpm-bp-lead-sm) ו„דלגו” צמוד לכפתורי ההתחברות (pxpm-builder.js, startNav). במחשב — כמו קודם.
	 */
	.pxpm-embed {
		padding-top: 0;
	}
	.pxpm-bp {
		padding-top: 12px;
	}
	.pxpm-bp .pxpm-bp-top,
	.pxpm-bp:not(.is-first) .pxpm-bp-top {
		margin-bottom: 14px;
	}
	.pxpm-bp-brand {
		gap: 6px;
		height: 24px;
		padding: 0 12px;
		font-size: 12px;
	}
	.pxpm-bp .pxpm-bp-h1 {
		margin: 6px 0 0;
		font-size: 24px;
		line-height: 1.2;
	}
	.pxpm-bp-sub {
		display: none;
	}
	.pxpm-bp-perks {
		gap: 6px;
		margin-top: 10px;
	}
	.pxpm-bp-perks li {
		gap: 6px;
		min-height: 32px;
		padding: 0 12px;
		font-size: 13px;
	}
	.pxpm-bp-body {
		padding: 16px;
	}
	.pxpm-bp-bar {
		margin-bottom: 12px;
	}
	.pxpm-bp-bar-in {
		margin-bottom: 8px;
	}
	.pxpm-bp-step[data-step="google"] > .pxpm-title {
		margin-bottom: 4px;
		font-size: 20px;
	}
	.pxpm-bp-step[data-step="google"] .pxpm-bp-lead {
		margin-bottom: 12px;
		font-size: 14px;
		line-height: 1.5;
	}
	.pxpm-bp-step[data-step="google"] .pxpm-bp-lead-lg {
		display: none;
	}
	.pxpm-bp-step[data-step="google"] .pxpm-bp-lead-sm {
		display: inline;
	}
	/* שורת ההודעה הריקה מתחת לכפתורים לא תופסת מקום (כשיש הודעה — היא מופיעה) */
	.pxpm-bp-step[data-step="google"] .pxpm-bp-msg:empty {
		min-height: 0;
		margin: 0;
	}
	.pxpm-bp-nav.below {
		margin-top: 12px;
		padding-top: 12px;
	}
	/* בועת „צריכים עזרה?” של האתר יושבת על הכפתורים בטלפון קטן — במסך הפתיחה רק ה-„?” (כמו /plink) */
	body:has(.pxpm-bp.is-first) #pxh .pxh-tip {
		display: none !important;
	}
	/*
	 * 0.12.0 (תומר 16.10: „בטלפון בדיוק כמו P‑Code”): „חזרה” / „המשך” בפס קבוע בתחתית — מהמסך הראשון (שם הפס הוא
	 * „דלגו — נמלא ידנית”, ו„המשך לבחירת העסק” אחרי ההתחברות) ועד הנייד. שורה אחת עם הנגישות משמאל וה-„?” מימין —
	 * אותו CSS כמו .wbNav ב-/pcode ובונה ה-P‑Link. „בוחרים תוכנית” וסוף הבונה — בלי פס (הבחירה היא הכפתור שבכרטיס).
	 * מקלדת פתוחה → הפס יורד (.kbOpen, watchKeyboard ב-pxpm-builder.js) וחוזר כשהיא נסגרת.
	 */
	.pxpm-bp:not([data-step="plan"]):not([data-step="done"]) .pxpm-bp-nav,
	.pxpm-bp:not([data-step="plan"]):not([data-step="done"]) .pxpm-bp-nav.below {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		margin: 0;
		padding: 12px 76px 17px 72px;
		background: #fff;
		border: 0;
		border-top: 1px solid var(--pm-line);
		box-shadow: 0 -8px 24px rgba(25, 21, 18, .08);
	}
	.pxpm-bp:not([data-step="plan"]):not([data-step="done"]) .pxpm-bp-nav .pxpm-btn {
		min-height: var(--pm-h);
		padding: 0 10px;
		font-size: 15px;
	}
	.pxpm-bp:not([data-step="plan"]):not([data-step="done"]) {
		padding-bottom: 110px;
	}
	body:has(.pxpm-bp:not([data-step="plan"]):not([data-step="done"])) #pxh {
		bottom: 18px !important;
		right: 16px !important;
		left: auto !important;
	}
	body:has(.pxpm-bp:not([data-step="plan"]):not([data-step="done"])) #pxh .pxh-tip {
		display: none !important;
	}
	body:has(.pxpm-bp:not([data-step="plan"]):not([data-step="done"])) #pxst-cookie {
		bottom: 90px !important;
	}
	.pxpm-bp.kbOpen .pxpm-bp-nav {
		display: none !important;
	}
	body:has(.pxpm-bp.kbOpen) #pxh,
	body:has(.pxpm-bp.kbOpen) #ea11y-root {
		display: none !important;
	}
	/* „בוחרים תוכנית” בטלפון: „חזרה” לבד בראש הכרטיס, הכרטיסים צפופים */
	.pxpm-bp-plan {
		padding: 14px 16px;
	}
}
@media (max-width: 420px) {
	.pxpm-bp-two {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.pxpm-bp-got-row {
		flex-wrap: wrap;
	}
	.pxpm-btn.pxpm-bp-again {
		width: 100%;
	}
}

/* D33 (19.10.2026): centred button labels — icon + word together in the middle (the list rows in .pxpm-bp-list keep their side layout) */
.pxpm-btn:not(.pxpm-bp-list .pxpm-btn), .pxpm-btn.pxpm-bp-pvtoggle { justify-content: center; text-align: center; }