/* עוצב עבור מכירת המקומות. הוצא מ-index.html כדי לאפשר CSP
ללא unsafe-inline על סקריפטים. */
:root {
--parchment:#f4efe4; --surface:#fffdf8; --surface-2:#faf5ea; --ink:#23262f;
--muted:#736f65; --line:#e6dece; --navy:#1b2545; --navy-2:#2a3763;
--gold:#ab8340; --gold-deep:#866227; --good:#3c7a57; --good-bg:#e8f0e9; --danger:#a2472f;
--shadow:0 24px 60px -28px rgba(27,37,69,.45),0 2px 6px rgba(27,37,69,.06);
--font-body:"Assistant","Segoe UI","Arial Hebrew","Noto Sans Hebrew",system-ui,sans-serif;
--font-display:"Frank Ruhl Libre","Narkisim","David","Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root{
--parchment:#13151b; --surface:#1e222d; --surface-2:#232834; --ink:#ece7db;
--muted:#9c988c; --line:#2d323f; --navy:#101832; --navy-2:#33427a;
--gold:#cba75f; --gold-deep:#b58f45; --good:#62a281; --good-bg:#1d2c25; --danger:#d0715a;
--shadow:0 24px 60px -30px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3);
}}
/* ⚠️ מצהיר שאנחנו מטפלים בשתי ערכות הנושא בעצמנו.
בלי זה, Chrome ב-Android מפעיל Auto Dark Theme והופך את הצבעים
בכוח — מה שהורס במיוחד את שדות הקלט. משפיע גם על פקדים מובנים
(בורר התאריך, פסי הגלילה) שיתאימו לערכה הנכונה. */
:root{color-scheme:light dark;}
/* ⚠️ מילוי אוטומטי של Chrome צובע את השדה בכחול בהיר ודורס את הרקע
שלנו — זו הסיבה הנפוצה ביותר ל"השדות מאבדים עיצוב". אי אפשר לדרוס
את זה ב-background, ולכן `box-shadow: inset` שממלא את כל השדה,
ו-`transition` ארוך שמונע את ההבזק הכחול ברגע המילוי. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
-webkit-text-fill-color:var(--ink);
-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;
box-shadow:0 0 0 1000px var(--surface-2) inset;
caret-color:var(--ink);
border-color:var(--line);
transition:background-color 100000s ease-in-out 0s;
}
/* ⚠️ חייב לבוא לפני כל כלל שמגדיר display.
ברירת המחדל של הדפדפן ל-`[hidden]` היא `display:none`, אבל היא
סגנון של סוכן המשתמש — וכל כלל של מחבר גובר עליה. `.btn` מגדיר
`display:flex`, ולכן כפתור עם `hidden` נשאר גלוי. `!important`
כאן הוא הדרך היחידה להחזיר ל-`hidden` את המשמעות שלו. */
[hidden]{display:none !important;}
*{box-sizing:border-box;} html,body{margin:0;padding:0;}
body{direction:rtl;background:radial-gradient(120% 90% at 50% -10%,color-mix(in oklab,var(--gold) 10%,var(--parchment)) 0%,var(--parchment) 55%);
color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;
display:flex;align-items:center;justify-content:center;padding:24px 14px;}
.stage{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;}
.device{width:100%;max-width:392px;background:var(--surface);border:1px solid var(--line);border-radius:34px;
box-shadow:var(--shadow);overflow:hidden;position:relative;}
.brand{background:linear-gradient(160deg,var(--navy),var(--navy-2) 130%);color:#f3ecdc;padding:20px 22px 18px;text-align:center;position:relative;}
.brand::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--gold) 75%,transparent),transparent);}
.brand__notch{width:42px;height:5px;border-radius:99px;background:rgba(243,236,220,.25);margin:0 auto 14px;}
.brand__logo{display:block;max-height:82px;width:auto;max-width:84%;margin:2px auto 8px;}
.brand__kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 3px;font-weight:600;}
.brand__title{font-family:var(--font-display);font-weight:700;font-size:25px;line-height:1.15;margin:0;color:#f7f1e4;text-wrap:balance;}
.brand__sub{margin:5px 0 0;font-size:12.5px;color:rgba(243,236,220,.68);}
.steps{display:flex;gap:6px;padding:12px 22px 0;justify-content:center;}
.steps span{height:4px;flex:1;max-width:60px;border-radius:99px;background:var(--line);transition:background .35s ease;}
.steps span.on{background:var(--gold);}
.screen{padding:20px 22px 24px;display:none;animation:fade .38s ease both;}
.screen.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
h2.screen__h{font-family:var(--font-display);font-size:21px;margin:4px 0 4px;font-weight:700;text-wrap:balance;}
p.screen__lead{margin:0 0 20px;color:var(--muted);font-size:13.5px;line-height:1.55;}
label.fld{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 7px;}
.phone-in{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:14px;padding:4px 14px;transition:border-color .2s,box-shadow .2s;}
.phone-in:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in oklab,var(--gold) 18%,transparent);}
.phone-in svg{color:var(--gold);flex:none;}
.phone-in input{-webkit-appearance:none;appearance:none;border:0;background:transparent;color:var(--ink);font-size:20px;font-weight:600;padding:12px 0;width:100%;outline:none;letter-spacing:.06em;direction:ltr;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-body);}
.phone-in input::placeholder{color:color-mix(in oklab,var(--muted) 70%,transparent);letter-spacing:normal;}
.seg{display:flex;gap:6px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:13px;padding:4px;margin-bottom:16px;}
.seg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;color:var(--muted);font-family:var(--font-body);font-weight:600;font-size:14px;padding:10px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s;}
.seg-btn.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.seg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
.hint{font-size:12px;color:var(--muted);margin:10px 2px 0;display:flex;gap:7px;align-items:flex-start;line-height:1.5;}
.hint svg{flex:none;margin-top:1px;color:var(--gold);}
.btn{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;width:100%;font-family:var(--font-body);font-weight:700;font-size:16px;padding:15px;border-radius:14px;color:#fff8ea;background:linear-gradient(160deg,var(--navy-2),var(--navy));transition:transform .12s,box-shadow .2s,opacity .2s;box-shadow:0 10px 22px -12px color-mix(in oklab,var(--navy) 80%,black);display:flex;align-items:center;justify-content:center;gap:9px;}
.btn.gold{background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#241a06;box-shadow:0 10px 22px -12px var(--gold-deep);}
.btn:hover{transform:translateY(-1px);} .btn:active{transform:translateY(0);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;font-weight:600;font-size:13.5px;padding:10px;}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.mt{margin-top:16px;}
/* ⚠️ padding ולא margin: margin בין אחים מתמוטט מול ה-margin של
הפסקה שמעל, ואז המרווח שהוגדר כאן פשוט נבלע והפעימה חופפת לטקסט.
הפעימה גדלה עד scale(1.5) — 23px מעבר לקוטר בכל כיוון — ולכן
30px למעלה ו-36px למטה משאירים אותה נקייה משני הצדדים. */
.ring-wrap{display:flex;justify-content:center;margin:0;padding:30px 0 36px;}
.ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in oklab,var(--gold) 22%,var(--surface)),var(--surface-2));color:var(--gold);position:relative;}
.ring::before,.ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in oklab,var(--gold) 60%,transparent);animation:pulse 2.2s ease-out infinite;}
.ring::after{animation-delay:1.1s;}
@keyframes pulse{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.5);opacity:0;}}
.otp{display:flex;gap:10px;justify-content:center;margin:6px 0 4px;direction:ltr;}
.otp input{-webkit-appearance:none;appearance:none;width:54px;height:64px;border-radius:13px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);
font-family:var(--font-display);font-size:28px;font-weight:700;text-align:center;outline:none;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s;}
.otp input:focus{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in oklab,var(--gold) 16%,transparent);}
.err{color:var(--danger);font-size:13px;text-align:center;margin:12px 0 0;min-height:18px;font-weight:600;}
.who{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.who__name{font-family:var(--font-display);font-size:19px;font-weight:700;}
.who__meta{font-size:12px;color:var(--muted);margin-top:1px;}
.avatar{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:linear-gradient(160deg,var(--navy-2),var(--navy));color:var(--gold);font-family:var(--font-display);font-weight:700;font-size:18px;}
.logout-btn{flex:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:color .15s,border-color .15s;}
.logout-btn:hover{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 40%,var(--line));}
.logout-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.debt{background:color-mix(in oklab,var(--danger) 10%,var(--surface));border:1.5px solid color-mix(in oklab,var(--danger) 35%,var(--line));color:var(--danger);border-radius:14px;padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:14px;display:none;}
.debt.show{display:block;}
/* באנר ההוקרה לחבר קהילה — זהה במבנה ל-`.debt`, בזהב במקום באדום:
זו בשורה טובה ולא אזהרה. מוסתר עד ש-`show` נוסף. */
.tribute{background:color-mix(in oklab,var(--gold) 12%,var(--surface));border:1.5px solid color-mix(in oklab,var(--gold) 40%,var(--line));color:var(--gold-deep);border-radius:14px;padding:11px 14px;margin-bottom:14px;display:none;gap:10px;align-items:center;}
.tribute.show{display:flex;}
.tribute svg{flex:none;}
.tribute__t{font-size:13px;font-weight:700;line-height:1.45;}
.tribute__s{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px;}
.seats{display:flex;flex-direction:column;gap:11px;}
.seat{display:flex;align-items:center;gap:13px;text-align:right;width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:16px;padding:13px 14px;cursor:pointer;transition:border-color .18s,background .18s,transform .1s;font-family:var(--font-body);color:var(--ink);}
.seat:hover{border-color:color-mix(in oklab,var(--gold) 55%,var(--line));}
.seat:active{transform:scale(.995);}
.seat.sel{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 12%,var(--surface));}
.seat.paid{cursor:default;opacity:.92;} .seat.paid:hover{border-color:var(--line);}
.seat:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.seat__ic{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--gold-deep);}
.seat__body{flex:1;min-width:0;} .seat__hall{font-weight:700;font-size:14.5px;} .seat__loc{font-size:12.5px;color:var(--muted);margin-top:2px;}
.seat__right{text-align:left;flex:none;} .seat__price{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.seat__price small{font-weight:600;font-size:11px;color:var(--muted);}
.seat__disc{margin-top:3px;font-size:11.5px;font-weight:700;color:var(--good);font-variant-numeric:tabular-nums;white-space:nowrap;}
.seat__disc small{font-weight:600;font-size:10px;}
.pill{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;}
.pill.paid{color:var(--good);background:var(--good-bg);}
.check{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;color:transparent;transition:.15s;}
.seat.sel .check{background:var(--gold);border-color:var(--gold);color:#241a06;}
/* ── פירוט הסכום, מעל שורת הסיכום ──
⚠️ המספרים מגיעים מ-/quote בשרת. ראה ההסבר ב-app.js. */
.breakdown{margin-top:16px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:16px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;padding:12px 15px 10px;}
.breakdown[hidden]{display:none;}
/* ⚠️ כשהפירוט מוצג הוא נדבק לשורת הסיכום ונראה כקופסה אחת */
.breakdown:not([hidden]) + .totalbar{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;}
.bd__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0;color:var(--muted);}
.bd__v{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);white-space:nowrap;}
.bd__row--off .bd__v{color:var(--good);}
.bd__row--sum{margin-top:7px;padding-top:8px;border-top:1px dashed var(--line);color:var(--ink);font-weight:700;}
.bd__row--sum .bd__v{font-family:var(--font-display);font-size:16px;}
.totalbar{margin-top:16px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:16px;padding:13px 15px;display:flex;align-items:center;gap:12px;}
.totalbar .lbl{font-size:12px;color:var(--muted);} .totalbar .amt{font-family:var(--font-display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;}
.totalbar .grow{flex:1;}
.center{text-align:center;color:var(--muted);font-size:14px;padding:24px 6px;}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);margin:0 auto 14px;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
/* ── אזהרת חוסר פעילות ── */
/* z-index גבוה מגיליון התשלום: אם הסשן עומד למות בזמן שהמשתמש
באמצע תשלום, האזהרה חייבת להיראות מעליו. */
.idle-back{position:fixed;inset:0;background:color-mix(in oklab,var(--navy) 86%,transparent);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:70;animation:fade .2s ease;}
.idle-back[hidden]{display:none;}
.idle-box{width:100%;max-width:330px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px 24px 20px;text-align:center;box-shadow:var(--shadow);}
.idle-ring{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;background:color-mix(in oklab,var(--gold) 16%,transparent);color:var(--gold-deep);}
.idle-title{font-family:var(--font-display);font-size:20px;font-weight:700;margin:0 0 6px;}
.idle-lead{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--muted);}
.idle-lead b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:17px;}
.idle-box .btn{margin-bottom:6px;}
.sheet-back{position:fixed;inset:0;background:color-mix(in oklab,var(--navy) 82%,transparent);backdrop-filter:blur(6px);display:none;z-index:50;}
.sheet-back.open{display:block;animation:fade .25s ease;}
.sheet{position:absolute;left:50%;bottom:0;width:100%;max-width:392px;background:var(--surface);border-radius:24px 24px 0 0;padding:10px 22px calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);border-top:1px solid var(--line);max-height:92vh;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.sheet-back.open .sheet{transform:translate(-50%,0);}
@keyframes up{from{transform:translate(-50%,100%);}to{transform:translate(-50%,0);}}
.sheet__grip{width:40px;height:4px;background:var(--line);border-radius:99px;margin:4px auto 14px;}
.sheet__pay-by{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:14px;} .sheet__pay-by b{color:var(--ink);}
.field{margin-bottom:12px;} .field input{width:100%;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:12px;padding:13px 14px;font-size:15px;font-family:var(--font-body);outline:none;direction:ltr;text-align:right;font-variant-numeric:tabular-nums;}
.field.row{display:flex;gap:10px;}
.pay-head{text-align:center;margin:2px 0 16px;}
.pay-lock{width:44px;height:44px;border-radius:50%;margin:0 auto 9px;display:grid;place-items:center;background:color-mix(in oklab,var(--gold) 16%,var(--surface));color:var(--gold-deep);border:1px solid color-mix(in oklab,var(--gold) 40%,var(--line));}
.pay-title{font-family:var(--font-display);font-size:20px;font-weight:700;margin:0;}
.pay-by{font-size:12.5px;color:var(--muted);margin:2px 0 0;} .pay-by b{color:var(--ink);}
.pay-amount-card{background:linear-gradient(160deg,var(--navy),var(--navy-2) 140%);border-radius:16px;padding:15px 16px;text-align:center;margin-bottom:15px;position:relative;overflow:hidden;}
.pay-amount-card::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--gold) 70%,transparent),transparent);}
.pay-amount-lbl{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.pay-amount{display:block;font-family:var(--font-display);font-size:31px;font-weight:700;color:#f8f2e5;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:3px;}
.pay-count{display:block;font-size:12px;color:rgba(243,236,220,.62);margin-top:1px;}
.pay-field{margin-bottom:15px;}
.pay-field-lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 7px;}
.select-wrap{position:relative;}
.select-wrap select{width:100%;-webkit-appearance:none;appearance:none;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:13px;padding:14px 14px;font-size:15px;font-weight:600;font-family:var(--font-body);outline:none;cursor:pointer;transition:border-color .15s;}
.select-wrap select:focus{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in oklab,var(--gold) 15%,transparent);}
.select-chev{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
.pay-card-box{border:1.5px solid var(--line);border-radius:14px;padding:11px 13px 5px;margin-bottom:15px;background:var(--surface-2);}
.pay-card-lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:3px;}
.success{text-align:center;padding:26px 10px 8px;display:none;} .success.on{display:block;animation:fade .3s ease;}
.success .mark{width:74px;height:74px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:var(--good-bg);color:var(--good);animation:pop .45s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes pop{from{transform:scale(.4);opacity:0;}to{transform:none;opacity:1;}}
.success h3{font-family:var(--font-display);font-size:22px;margin:0 0 6px;} .success p{color:var(--muted);font-size:13.5px;margin:0;}
.foot{font-size:11px;color:var(--muted);text-align:center;opacity:.8;line-height:1.7;} .foot b{color:var(--gold-deep);}
/* קרדיט המפתח — שורה נפרדת, שקטה יותר משורת המותג שמעליה */
.foot__by{display:block;font-size:10.5px;opacity:.75;}
.foot__by b{color:var(--muted);font-weight:600;}
.dev{font-size:11px;color:var(--muted);text-align:center;margin-top:10px;opacity:.85;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}
/* ═══════════════════ טופס רישום בני חו״ל ═══════════════════ */
/* מרחיב את הכרטיס — טופס ארוך ברוחב של מכשיר צר הוא עינוי */
.device--wide{max-width:520px;}
/* קבוצת שדות. הכותרת הממוספרת נותנת תחושת התקדמות בטופס ארוך. */
.fs{border-top:1px solid var(--line);padding-top:18px;margin-top:22px;}
.fs:first-of-type{border-top:0;padding-top:0;margin-top:6px;}
.fs__head{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
font-size:16px;font-weight:700;color:var(--ink);margin-bottom:16px;}
.fs__n{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;
border-radius:50%;background:color-mix(in oklab,var(--gold) 20%,transparent);
color:var(--gold-deep);font-family:var(--font-body);font-size:12px;font-weight:700;flex:none;}
.fld-row{margin-bottom:15px;}
/* ───── מתג השפה ───── */
.langbar{display:flex;gap:5px;justify-content:center;margin-top:12px;}
.lang-btn{border:1px solid rgba(243,236,220,.28);background:transparent;color:#cfc7b5;
font-family:var(--font-body);font-size:12.5px;font-weight:600;padding:5px 12px;
border-radius:99px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.lang-btn:hover{color:#f3ecdc;border-color:rgba(243,236,220,.5);}
.lang-btn.on{background:var(--gold);border-color:var(--gold);color:#1b2545;}
.lang-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* ───── מצב LTR (אנגלית) ─────
⚠️ `body{direction:rtl}` למעלה הוא כלל של מחבר, ותכונת `dir` על
לא גוברת עליו. לכן ההיפוך חייב להיות כלל מפורש. */
html[dir="ltr"] body{direction:ltr;}
html[dir="ltr"] .in[type="date"]::-webkit-date-and-time-value{text-align:left;}
/* השדות שנכפו ל-LTR כבר בכיוון הנכון — ההצמדה לשמאל מיותרת ויוצרת
חוסר יישור מול שאר השדות */
html[dir="ltr"] .in--ltr{text-align:inherit;}
/* ⚠️ החץ של ה-select מצויר ב-background-position, שנמדד תמיד משמאל.
ב-RTL הוא נופל בצד הריק; ב-LTR הוא נוחת בדיוק על תחילת הטקסט
("Ðay" במקום "Day"). לכן מזיזים אותו לימין, ומפנים לו מקום. */
html[dir="ltr"] select.in{
background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
padding-inline-end:30px;}
.req{color:var(--danger);font-weight:700;}
/* קישור-בתוך-טקסט. `button` ולא `a`, כדי שלא ינווט לשום מקום. */
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;
color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
/* בורר כן/לא שלא נבחר — אין לו `.in` ולכן `.in.bad` לא חל עליו */
.seg.bad{border-color:var(--danger);background:color-mix(in oklab,var(--danger) 6%,var(--surface-2));}
/* שדה קלט.
⚠️ `appearance:none` חובה: בלעדיו Chrome ו-Safari מציירים מסגרת
וצל פנימי משלהם על input/textarea, והעיצוב "נעלם".
⚠️ 16px ולא פחות: מתחת לזה iOS מזום את הדף אוטומטית בכל מיקוד. */
.in{width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;
background:var(--surface-2);border:1.5px solid var(--line);
border-radius:13px;padding:13px 14px;color:var(--ink);font-family:var(--font-body);
font-size:16px;line-height:1.3;outline:none;transition:border-color .18s,box-shadow .18s;}
/* בורר התאריך של Chrome — שומר על האייקון אבל מרכך אותו */
.in[type="date"]{min-height:48px;}
.in[type="date"]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;}
.in[type="date"]::-webkit-date-and-time-value{text-align:right;}
.in::placeholder{color:color-mix(in oklab,var(--muted) 65%,transparent);}
.in:focus{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in oklab,var(--gold) 16%,transparent);}
.in--ltr{direction:ltr;text-align:left;}
.in--area{resize:vertical;min-height:78px;line-height:1.6;}
select.in{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:14px 22px,19px 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
/* שדה שנכשל בוולידציה — אדום רק אחרי ניסיון שליחה, לא תוך כדי הקלדה */
.in.bad{border-color:var(--danger);background:color-mix(in oklab,var(--danger) 6%,var(--surface-2));}
.fld-err{color:var(--danger);font-size:12.5px;margin:6px 2px 0;min-height:0;display:none;font-weight:600;}
.fld-err.on{display:block;}
.fld-hint{font-size:12px;color:var(--muted);margin:6px 2px 0;line-height:1.5;}
.fld-hint--block{margin-bottom:14px;}
/* רמז שמסביר למה השדה חשוב — מודגש קלות */
.fld-hint--star{color:var(--gold-deep);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:82px 1fr 92px;gap:8px;}
@media (max-width:420px){.grid2{grid-template-columns:1fr;}.grid3{grid-template-columns:1fr;}}
/* גרסה קומפקטית של הסגמנט, לשימוש בתוך שדה */
.seg--sm{margin-bottom:0;padding:3px;}
.seg--sm .seg-btn{padding:8px;font-size:13.5px;}
/* מסך האישור */
.ring--ok{background:radial-gradient(circle at 50% 40%,color-mix(in oklab,var(--good) 20%,var(--surface)),var(--surface-2));color:var(--good);}
.ring--ok::before,.ring--ok::after{border-color:color-mix(in oklab,var(--good) 55%,transparent);}
.okbox{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
padding:14px 16px;text-align:center;margin-top:20px;}
.okbox__lbl{font-size:11.5px;color:var(--muted);letter-spacing:.04em;}
.okbox__val{font-size:15px;font-weight:600;color:var(--ink);direction:ltr;margin-top:4px;word-break:break-all;}
/* ── בני משפחה: אשה וילדים ── */
.member{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
padding:13px 14px;margin-bottom:10px;animation:fade .25s ease both;}
.member[hidden]{display:none;}
.member__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.member__t{font-size:12px;font-weight:700;color:var(--gold-deep);}
/* כפתור ההסרה — יעד 30px, מספיק לאצבע בלי להשתלט על השורה */
.member__x{border:0;background:transparent;color:var(--muted);cursor:pointer;
font-size:15px;line-height:1;width:30px;height:30px;border-radius:8px;flex:none;
transition:background .15s,color .15s;}
.member__x:hover{background:color-mix(in oklab,var(--danger) 12%,transparent);color:var(--danger);}
.member__x:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
/* בתוך הכרטיס הרקע כבר surface-2, אז השדות בהירים כדי להיבדל */
.member .in{background:var(--surface);}
.member .grid2{gap:10px;}
.member .in + .in{margin-top:9px;}
/* כפתור הוספה — משני, לא מתחרה בכפתור השליחה */
.btn.add{background:transparent;color:var(--gold-deep);box-shadow:none;
border:1.5px dashed color-mix(in oklab,var(--gold) 55%,transparent);
font-size:14px;font-weight:600;padding:11px;margin-bottom:16px;}
.btn.add:hover{background:color-mix(in oklab,var(--gold) 8%,transparent);transform:none;}
/* ── בורר אמצעי התשלום ──
⚠️ הלוגו הוא SVG שיורש currentColor, ולכן הוא מתחלף יחד עם
צבע הכפתור בין נבחר ללא-נבחר. גובה קבוע ולא uto — כך
קובץ אמיתי שיוחלף לא ישנה את גובה הבורר. */
.prov-btn{flex-direction:column;gap:6px;padding:12px 8px;}
/* ⚠️ **גובה קבוע ורוחב חופשי** — לא ריבוע. הלוגואים מגיעים
מהסולקים ביחסים שונים, ולוגו-מילה רחב היה נמחץ ל-26x26.
object-fit:contain שומר על היחס בכל מקרה.
⚠️ max-width קיים כדי שלוגו רחב במיוחד לא ידחוף את הטקסט
מחוץ לכפתור. */
.prov-logo{height:24px;width:auto;max-width:92px;object-fit:contain;display:block;opacity:.55;transition:opacity .15s;}
.prov-btn.on .prov-logo{opacity:1;}
.prov-btn span{font-size:13px;line-height:1;}
/* הודעת תקלה בסולק. ⚠️ מעל בורר אמצעי התשלום ומוצגת גם בלעדיו. */
.pay-notice{margin:0 0 12px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.5;background:color-mix(in oklab,var(--gold) 14%,transparent);color:var(--gold-deep);border:1px solid color-mix(in oklab,var(--gold) 38%,transparent);}