/*
 * P‑Worker — דף המשרה, בשפה של P‑Link.
 * הבסיס (.pp, .pp-head, .pp-av, .pp-name, .pp-cat, .pp-addr, .pp-btn, .pp-sharetop, .pp-calltop, .pp-foot) מגיע מ-pxqr-page.css של P‑Link.
 * הצבעים — המשתנים --p-* מהעיצוב שבעל העסק בחר ב‑P‑Link (PXPW_Public::head). כאן רק החלקים של המשרה, באותם צבעים, פינות וצללים.
 */

/* כמו ה-<style> בראש דף ה‑P‑Link */
html, body { margin: 0; background: var(--p-bg); }
body.pxpw-body { min-height: 100vh; padding: max(36px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); box-sizing: border-box; }
main.pp.pxpw { max-width: 480px; margin: 0 auto; min-height: calc(100vh - 60px); font-family: var(--p-font); }
.pxpw-body, .pxpw button, .pxpw input, .pxpw textarea { font-family: var(--p-font); }
.pv { position: fixed; top: 0; inset-inline: 0; background: #1a1a17; color: #fff; font: 13px Heebo, system-ui, sans-serif; text-align: center; padding: 6px; z-index: 30; }
.pxpw [hidden] { display: none !important; }
.pxpw-screen { width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 96px; }
.pxpw-done { padding-bottom: 0; }

/* „מגייסים עכשיו” — גלולה כמו שורת השעות של P‑Link, נקודה ירוקה */
.pxpw-hiring { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 5px 14px; border-radius: 999px; background: rgba(127,127,127,.1); font-size: 14px; font-weight: 500; color: var(--p-text); }
.pxpw-hiring i { width: 8px; height: 8px; border-radius: 50%; background: #1e8e3e; animation: pxpw-pulse 2s ease-in-out infinite; }
@keyframes pxpw-pulse { 50% { box-shadow: 0 0 0 5px rgba(30,142,62,.18); } }
.pxpw-title { margin: 10px 0 0; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--p-text); text-align: center; text-wrap: balance; }
.pxpw-note { margin: 14px 0 0; max-width: 380px; font-size: 14px; line-height: 1.6; color: var(--p-muted); text-align: center; }

/* העובדות — אריחים בצבע הכפתורים של העסק */
.pxpw-facts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.pxpw-fact { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px; border-radius: min(var(--p-r), 18px); background: var(--p-btn); color: var(--p-btn-text); text-align: start;
	box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05); }
.pxpw-fact.wide { grid-column: span 2; }
.pxpw-fact .k { font-size: 12.5px; opacity: .7; }
.pxpw-fact b { font-size: 16px; font-weight: 700; }
.pxpw-fact .s { font-size: 12.5px; opacity: .7; }

.pxpw-sec { width: 100%; margin-top: 22px; text-align: start; }
.pxpw-sec h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--p-text); text-align: center; letter-spacing: .2px; }
.pxpw-sec .pp-about { margin: 0 auto; text-align: center; }
.pxpw-card { width: 100%; padding: 4px 16px; border-radius: min(var(--p-r), 18px); background: var(--p-btn); color: var(--p-btn-text); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05); box-sizing: border-box; }
.pxpw-shift { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; font-size: 14.5px; }
.pxpw-shift + .pxpw-shift { border-top: 1px solid rgba(127,127,127,.14); }
.pxpw-shift .m { opacity: .7; }
.pxpw-ticks { list-style: none; margin: 0 auto; padding: 0; max-width: 380px; font-size: 15px; color: var(--p-text); }
.pxpw-ticks li { display: flex; gap: 8px; padding: 3px 0; }
.pxpw-ticks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: #1e8e3e; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pxpw-ticks li.nice::before { content: "+"; width: auto; height: auto; margin-top: 0; background: none; -webkit-mask: none; mask: none; color: var(--p-accent); font-weight: 700; }
.pxpw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pxpw-chip { padding: 6px 14px; border-radius: 999px; background: var(--p-btn); color: var(--p-btn-text); font-size: 13.5px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }

.pxpw .pp-btn { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 500; font-size: 15.5px; box-sizing: border-box; }
.pxpw .pp-btn .pp-bt { padding: 0; }
.pxpw-plink { margin-top: 18px; }
/* הכפתור הראשי — בצבע ההדגשה של העסק (כמו כפתור „מודגש” ב‑P‑Link) */
.pxpw .pxpw-cta { background: var(--p-accent); color: var(--p-on-accent); font-weight: 700; font-size: 16.5px; min-height: 58px; box-shadow: 0 0 0 2px var(--p-accent), 0 6px 18px rgba(0,0,0,.14); }
.pxpw .pp-links { margin-top: 22px; }
.pxpw .pp-foot { margin-top: 28px; }

.pxpw-sticky { position: fixed; bottom: 0; inset-inline: 0; z-index: 10; padding: 12px 16px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--p-bg) 70%, transparent); }
.pxpw-sticky > * { max-width: 480px; margin: 0 auto; }

/* ───── הטופס ───── */
.pxpw-top { width: 100%; display: flex; align-items: center; gap: 10px; text-align: start; }
.pxpw-top > div { display: flex; flex-direction: column; min-width: 0; }
.pxpw-top b { font-size: 17px; color: var(--p-text); }
.pxpw-top span { font-size: 13.5px; color: var(--p-muted); }
.pxpw-back { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--p-text); }
.pxpw-back:hover { background: rgba(127,127,127,.12); }
.pxpw-back svg { width: 22px; height: 22px; }
.pxpw-prog { width: 100%; height: 4px; border-radius: 4px; background: rgba(127,127,127,.18); margin: 12px 0 4px; overflow: hidden; }
.pxpw-prog i { display: block; height: 100%; width: 0; background: var(--p-accent); transition: width .3s; }
.pxpw-form { width: 100%; text-align: start; margin-top: 14px; }
.pxpw-fld { margin-bottom: 18px; }
.pxpw-lbl { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--p-text); }
.pxpw-lbl small { font-weight: 400; color: var(--p-muted); font-size: 13px; }
.pxpw-in { width: 100%; box-sizing: border-box; min-height: 48px; border: 1px solid rgba(0,0,0,.15); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 16px; background: #fff; color: #1E1B17; }
.pxpw-in:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-accent) 30%, transparent); }
.pxpw-fld.bad .pxpw-in { border-color: #d93025; }
.pxpw-err { color: #d93025; font-size: 13px; margin-top: 5px; }
.pxpw-formerr { background: rgba(217,48,37,.08); color: #b3261e; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.pxpw-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* בלי left:-9999px — בעמוד מימין לשמאל זה מרחיב את הדף הצידה */
.pxpw-text { margin-top: 8px; min-height: 90px; }

.pxpw-avw { padding: 12px; }
.pxpw-av { display: grid; gap: 5px; font-size: 12px; text-align: center; align-items: center; }
.pxpw-av .h { opacity: .7; }
.pxpw-av .rh { text-align: start; line-height: 1.15; }
.pxpw-av .rh small { display: block; opacity: .6; font-size: 10px; }
.pxpw-av button { height: 36px; border-radius: 9px; border: 1px solid rgba(127,127,127,.3); background: transparent; cursor: pointer; padding: 0; transition: background .15s, border-color .15s; }
.pxpw-av button.on { background: var(--p-btn-text); border-color: var(--p-btn-text); } /* 0.15.1: the grid sits on a var(--p-btn) card and accent = btn in wine/graphite/sage/petrol — the card's text colour always shows */
.pxpw-av button:disabled { border-style: dashed; opacity: .35; cursor: default; }
.pxpw-av button:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 2px; }
.pxpw-alts { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.pxpw-link { background: none; border: 0; padding: 0; color: inherit; opacity: .75; text-decoration: underline; cursor: pointer; font: inherit; font-size: 13.5px; }
.pxpw-fld > .pxpw-alts .pxpw-link { color: var(--p-text); }

/* בחירה — גלולות כמו בעורך של P‑Link: לא נבחר = צבע הכפתורים, נבחר = צבע ההדגשה */
.pxpw-choices { display: flex; gap: 8px; }
.pxpw-choices button, .pxpw-yn button { flex: 1; min-height: 44px; border: 0; border-radius: var(--p-r); background: var(--p-btn); color: var(--p-btn-text); font: inherit; font-size: 14.5px; cursor: pointer;
	box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.06); transition: transform .12s ease; }
.pxpw-choices button:active, .pxpw-yn button:active { transform: scale(.97); }
/* 0.15.1: accent = btn in wine/graphite/sage/petrol, so "selected" can't be the accent: start pills turn page colour with a ring, yes/no (on a var(--p-btn) card) flip to the card's text colour */
.pxpw-choices button.is-selected { background: var(--p-bg); color: var(--p-text); font-weight: 700; box-shadow: inset 0 0 0 2px var(--p-text); }
.pxpw-yn button.on, .pxpw-card .pxpw-yn button.on { background: var(--p-btn-text); color: var(--p-btn); font-weight: 700; box-shadow: none; }
.pxpw-yn { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 14.5px; }
.pxpw-yn + .pxpw-yn { border-top: 1px solid rgba(127,127,127,.14); }
.pxpw-yn .o { display: flex; gap: 6px; flex: none; }
.pxpw-yn button { flex: none; min-width: 54px; min-height: 38px; }
.pxpw-card .pxpw-yn button { box-shadow: 0 0 0 1px rgba(127,127,127,.3); }

.pxpw-voice { border-radius: min(var(--p-r), 16px); padding: 10px 12px; background: var(--p-btn); color: var(--p-btn-text); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05); }
.pxpw-voice > button { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: start; font: inherit; color: inherit; }
.pxpw-mic { width: 42px; height: 42px; border-radius: 50%; background: rgba(127,127,127,.14); display: flex; align-items: center; justify-content: center; flex: none; font-size: 18px; }
.pxpw-voice.rec { box-shadow: 0 0 0 2px #d93025; }
.pxpw-voice.rec .pxpw-mic { background: #d93025; color: #fff; animation: pxpw-rec 1s infinite; }
@keyframes pxpw-rec { 50% { transform: scale(1.08); } }
.pxpw-voice .done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pxpw-voice audio { height: 36px; flex: 1; min-width: 160px; }
.pxpw-voice .pxpw-link { color: inherit; }
.pxpw-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--p-muted); cursor: pointer; line-height: 1.5; }
.pxpw-check input { width: 20px; height: 20px; accent-color: var(--p-accent); flex: none; margin: 1px 0 0; }
.pxpw-check a { color: inherit; }

/* תודה */
.pxpw-head-s .pp-av { width: 72px; height: 72px; font-size: 30px; }
.pxpw-head-s .pp-name { font-size: 17px; }
.pxpw-ok { width: 64px; height: 64px; margin-top: 22px; border-radius: 50%; background: #1e8e3e; color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(30,142,62,.15); }

.pxpw-toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(16px); background: #1E1B17; color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 14px; opacity: 0; pointer-events: none; transition: .3s; z-index: 30; max-width: calc(100% - 32px); }
.pxpw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .pxpw-hiring i, .pxpw-voice.rec .pxpw-mic { animation: none; } }
/* 0.8.0 — English / Russian (left to right; Arabic stays right to left): the back arrow points back, the phone sits at the start */
html[dir="ltr"] .pxpw-back svg { transform: scaleX(-1); }
html[dir="ltr"] .pxpw-in[type="tel"] { text-align: left !important; }
/* D33 (19.10.2026): centred button labels — UI-UX D33 "centre everything" (the voice-record row stays a row) */
.pxpw .pp-btn, .pxpw .pxpw-cta, .pxpw-choices button, .pxpw-yn button, .pxpw-av button { text-align: center; justify-content: center; }

/* 0.12.0 — /pwork/jobs/<p-link>/: all the business's open jobs, one card each (P-Link button look) */
.pxpw-hublist{display:grid;gap:12px;margin:18px 0 8px}
.pxpw-hubjob{display:grid;gap:6px;justify-items:center;text-align:center;padding:16px 18px;border-radius:var(--p-r);background:var(--p-btn);color:var(--p-btn-text);text-decoration:none;transition:transform .15s cubic-bezier(.2,.7,.2,1)}
.pxpw-hubjob:active{transform:scale(.98)}
.pxpw-hubjob .t{font-size:18px;font-weight:700;line-height:1.25}
.pxpw-hubjob .m{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:14px;opacity:.85}
.pxpw-hubjob .go{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:500}
.pxpw-hubjob .go svg{width:16px;height:16px}
html[dir="ltr"] .pxpw-hubjob .go svg{transform:scaleX(-1)}

/* 0.13.4: the "P‑Worker by Printix" line — no black box around it after a tap (keyboard focus keeps a soft ring) */
.pxpw .pp-bline { display: inline-block; outline: none; border: 0; border-radius: 8px; }
.pxpw .pp-bline:focus-visible { box-shadow: 0 0 0 2px var(--p-accent); }