/* ============================================================================
   FADEZEN · 10-auth
   שער הכניסה: מסך מלא שחוסם את האפליקציה עד שמתחברים.
   ========================================================================= */

.auth {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 229, 255, .10), transparent 60%),
    radial-gradient(100% 70% at 50% 100%, rgba(0, 230, 118, .08), transparent 60%),
    var(--c-void, #0B0C0E);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.auth[hidden] { display: none; }

/* הקלף צף מעל שכבת הרקע החיה (.fxbg) שמוזרקת לתוך .auth */
.auth__card {
  position: relative;
  z-index: 1;
  width: min(452px, 100%);
  background: rgba(18, 19, 23, .82);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: var(--r-xl, 26px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .62), 0 2px 10px rgba(0, 0, 0, .4);
  padding: 28px 22px 22px;
  margin: auto;
  animation: auth-in .5s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}

@keyframes auth-in {
  from { opacity: 0; transform: translateY(20px) scale(.975); }
}

/* ------------------------------------------------------------------ ראש */

.auth__head { text-align: center; margin-bottom: 18px; }

/* הלוגו החי (.bzlogo) הוא ריבוע — הקנבס שלו 476×476 עם שוליים אחידים,
   ולכן רוחב וגובה זהים. הצל והזוהר מוגדרים בתוך 14-logo.css. */
.auth__mark {
  width: 96px; height: 96px;
  margin: 0 auto 10px;
}

.auth__name {
  font: 900 28px/1 var(--font-display, Rubik, sans-serif);
  letter-spacing: .10em;
  background: var(--grad-brand, linear-gradient(135deg, #00E5FF, #00E676));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth__tag {
  margin-top: 7px;
  font-size: var(--t-sm, 13px);
  color: var(--ink-3, rgba(255, 255, 255, .55));
}

/* ---------------------------------------------------------------- לשוניות */

.auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--c-surface-2, #1A1D21);
  border: 1px solid var(--line-faint, rgba(255, 255, 255, .05));
  border-radius: 12px;
  margin-bottom: 16px;
}

.auth__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3, rgba(255, 255, 255, .55));
  font: 700 14px/1 var(--font-ui, Heebo, sans-serif);
  padding: 10px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.auth__tab:hover { color: var(--ink-1, #fff); }

.auth__tab.is-on {
  background: var(--c-surface-3, #22262B);
  color: var(--ink-1, #fff);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
}

/* ------------------------------------------------------------------ שדות */

.auth__field { margin-bottom: 12px; }

.auth__label {
  display: block;
  font-size: var(--t-xs, 12px);
  font-weight: 700;
  color: var(--ink-2, rgba(255, 255, 255, .78));
  margin-bottom: 6px;
}

.auth__input {
  width: 100%;
  background: var(--c-surface-2, #1A1D21);
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: 11px;
  color: var(--ink-1, #fff);
  font: 400 15px/1.3 var(--font-ui, Heebo, sans-serif);
  padding: 12px 13px;
  transition: border-color .16s, box-shadow .16s;
}

.auth__input::placeholder { color: var(--ink-4, rgba(255, 255, 255, .34)); }

.auth__input:focus {
  outline: none;
  border-color: var(--live, #00E676);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, .16);
}

.auth__input[type="email"],
.auth__input[type="password"] { direction: ltr; text-align: right; }

.auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 380px) { .auth__row { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- בחירת חשבון */

.auth__kinds { display: grid; gap: 9px; margin-bottom: 14px; }

.auth__kind {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  background: var(--c-surface-2, #1A1D21);
  border: 1.5px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: 13px;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}

.auth__kind:hover { border-color: var(--line-strong, rgba(255, 255, 255, .18)); }

.auth__kind.is-on {
  border-color: var(--live, #00E676);
  background: rgba(0, 230, 118, .07);
}

.auth__kind input { margin-top: 3px; accent-color: var(--live, #00E676); flex: none; }

.auth__kind b {
  display: block;
  font: 700 15px/1.2 var(--font-ui, Heebo, sans-serif);
  color: var(--ink-1, #fff);
  margin-bottom: 3px;
}

.auth__kind span {
  display: block;
  font-size: var(--t-xs, 12px);
  line-height: 1.5;
  color: var(--ink-3, rgba(255, 255, 255, .55));
}

/* גלולת המחיר יושבת גם על רקע ירוק (כשהכרטיס נבחר) — ולכן צבע מלא
   ולא שכבה שקופה, אחרת הזהוב והירוק מתערבבים לזית בלתי קריא. */
.auth__price {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #2A2413;
  border: 1px solid rgba(255, 194, 70, .45);
  color: #FFD98A;
  font: 800 11.5px/1.5 var(--font-ui, Heebo, sans-serif);
}

/* המחיר החלופי — קריא, אבל לא מתחרה במחיר הראשי */
.auth__price__alt {
  display: block;
  margin-top: 2px;
  color: rgba(255, 217, 138, .72);
  font-weight: 600;
  font-size: 10.5px;
}

/* ---------------------------------------------- שדות עסקיים (מתקפלים) */

.auth__biz { display: none; }
.auth__biz.is-open { display: block; }

.auth__note {
  font-size: var(--t-xs, 12px);
  line-height: 1.6;
  color: var(--ink-3, rgba(255, 255, 255, .55));
  background: var(--c-surface-2, #1A1D21);
  border: 1px solid var(--line-faint, rgba(255, 255, 255, .05));
  border-radius: 11px;
  padding: 11px 12px;
  margin-bottom: 13px;
}

.auth__note b { color: var(--gold, #FFC700); }

/* ------------------------------------------------------------------ כפתור */

.auth__submit {
  width: 100%;
  appearance: none;
  border: 0;
  border-radius: 14px;
  background: var(--grad-brand, linear-gradient(135deg, #00E5FF, #00E676));
  color: #06120C;
  font: 900 16px/1 var(--font-ui, Heebo, sans-serif);
  padding: 16px;
  margin-top: 8px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 229, 255, .22);
  transition: filter .16s, transform .12s, box-shadow .2s;
}

.auth__submit:hover { box-shadow: 0 14px 34px rgba(0, 229, 255, .3); }

.auth__submit:hover { filter: brightness(1.07); }
.auth__submit:active { transform: translateY(1px); }
.auth__submit[disabled] { opacity: .55; cursor: progress; }

.auth__err {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 61, 61, .11);
  border: 1px solid rgba(255, 61, 61, .3);
  color: #FF8A8A;
  font-size: var(--t-sm, 13px);
  line-height: 1.5;
}

.auth__err.is-on { display: block; }

.auth__foot {
  margin-top: 15px;
  text-align: center;
  font-size: var(--t-xs, 12px);
  color: var(--ink-4, rgba(255, 255, 255, .34));
  line-height: 1.6;
}

/* ------------------------------------------------------ הסתרה לפי תפקיד
   ל-.bmode יש display:flex משלו, שגובר על ברירת המחדל של [hidden].
   בלי הכלל הזה כפתור "מצב ספר" נשאר גלוי גם ללקוחות. */

.bmode[hidden] { display: none !important; }

/* -------------------------------------------------- שורת מנוי בסרגל העליון */

/* השורה צפה מעל המפה — בלי רקע אטום שמות רחובות מבצבצים מבעד לטקסט */
/* רוחב לפי התוכן ולא על כל השורה: קודם הבאנר נמתח מקצה לקצה
   ו-margin-right:auto דחף את כפתור החידוש רחוק מהטקסט, עם שטח ריק
   ענק ביניהם. עכשיו הוא צמוד למשפט והבאנר לא תופס יותר ממה שצריך. */
.subbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-top: 8px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(46, 38, 12, .96), rgba(38, 32, 10, .96));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 194, 70, .3);
  box-shadow: var(--e-2, 0 8px 22px rgba(0, 0, 0, .42));
  color: var(--gold-ink, #FFD98A);
  font: 500 12.5px/1.4 var(--font-ui, Heebo, sans-serif);
}

.subbar[hidden] { display: none; }
.subbar b { font-weight: 900; }
.subbar__cta { flex: none; height: 30px; padding: 0 14px; font-size: 12px; }
.subbar--due {
  background: linear-gradient(180deg, rgba(52, 20, 20, .96), rgba(44, 16, 16, .96));
  border-color: rgba(255, 82, 82, .34);
  color: #FFB3B3;
}

@media (prefers-reduced-motion: reduce) {
  .auth, .auth__card { animation: none !important; transition: none !important; }
}

/* ============================================================ תפריט חשבון */

.acct__btn {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  appearance: none; cursor: pointer;
  border-radius: 50%;
  border: 1.5px solid var(--line, rgba(255, 255, 255, .09));
  background: var(--c-surface-2, #1A1D21);
  color: var(--ink-1, #fff);
  font: 900 15px/1 var(--font-ui, Heebo, sans-serif);
  transition: border-color .16s, background .16s;
}

/* display: grid גובר על ברירת המחדל של [hidden], ולכן כפתור החשבון
   נשאר גלוי למבקר בלי חשבון — עם תפריט שמציע לו "יציאה מהחשבון". */
.acct__btn[hidden] { display: none !important; }

.acct__btn:hover { border-color: var(--line-strong, rgba(255, 255, 255, .2)); }
.acct__btn.is-biz { border-color: rgba(0, 230, 118, .5); color: var(--live, #00E676); }

.acct {
  position: fixed;
  top: 68px; left: 12px;
  z-index: 620;
  width: min(280px, calc(100vw - 24px));
}

.acct[hidden] { display: none; }

.acct__card {
  background: var(--c-surface-1, #141619);
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 15px;
  box-shadow: var(--e-3, 0 24px 60px rgba(0, 0, 0, .55));
  overflow: hidden;
  animation: acct-in .16s ease-out;
}

@keyframes acct-in { from { opacity: 0; transform: translateY(-6px); } }

.acct__who {
  padding: 14px;
  border-bottom: 1px solid var(--line-faint, rgba(255, 255, 255, .06));
}

.acct__name { font: 700 15px/1.3 var(--font-ui, Heebo, sans-serif); color: var(--ink-1, #fff); }
.acct__mail { font-size: 12px; color: var(--ink-3, rgba(255, 255, 255, .55)); direction: ltr; text-align: right; margin-top: 2px; word-break: break-all; }
.acct__role { font-size: 12px; color: var(--ink-2, rgba(255, 255, 255, .78)); margin-top: 7px; }

.acct__sub {
  margin-top: 7px; padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 199, 0, .12);
  border: 1px solid rgba(255, 199, 0, .26);
  color: var(--gold, #FFC700);
  font-size: 11.5px; font-weight: 700;
}

.acct__item {
  display: block; width: 100%;
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: var(--ink-2, rgba(255, 255, 255, .78));
  font: 500 14px/1.4 var(--font-ui, Heebo, sans-serif);
  text-align: right;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-faint, rgba(255, 255, 255, .05));
  transition: background .14s, color .14s;
}

.acct__item:last-child { border-bottom: 0; }
.acct__item:hover { background: var(--c-surface-2, #1A1D21); color: var(--ink-1, #fff); }
.acct__item--out { color: #FF8A8A; }
.acct__item--out:hover { background: rgba(255, 61, 61, .1); }

/* ==================================================== אימות אמצעי תשלום */

.pv {
  position: fixed; inset: 0; z-index: 880;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(6, 8, 10, .82);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

.pv[hidden] { display: none; }

.pv__card {
  position: relative;
  width: min(440px, 100%);
  margin: auto;
  background: rgba(18, 19, 23, .9);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: var(--r-xl, 26px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .62);
  padding: 24px 20px 20px;
  animation: auth-in .44s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}

.pv__head { text-align: center; margin-bottom: 16px; }
.pv__ico { font-size: 34px; line-height: 1; margin-bottom: 8px; }

/* --------------------------------------------- עמוד ספָּרים תלת-ממדי בכותרת
   המידה קבועה ולא מונפשת. model-viewer מודד את עצמו פעם אחת כשהוא נכנס
   ל-DOM, ואם המיכל משנה גודל באמצע המדידה הקנבס הפנימי נשאר בגודל אפס
   והמודל פשוט לא מצויר. מנפישים רק שקיפות, שלא משפיעה על מדידה. */
.pv__ico--pole{
  width: 104px;
  height: 132px;
  margin: -6px auto 4px;
  position: relative;
}
/* כל עוד המודל לא נטען, האימוג'י הוא שממלא את המקום.
   is-ready נקבע ב-pole.js רק אחרי שהמודל באמת נכנס לעץ. */
.pv__ico--pole.is-ready{ font-size: 0; }
/* טעינה שנכשלה חוזרת לאימוג'י, ולא משאירה חור בכותרת */
.pv__ico--pole.is-failed{ width: auto; height: auto; margin-bottom: 8px; font-size: 34px; }
.pv__ico--pole.is-failed .polein{ display: none; }

.pv__ico--pole .polein{
  display: block;
  width: 100%; height: 100%;
  background: transparent;
  --poster-color: transparent;
  pointer-events: none;
}
.polein::part(default-progress-bar){ display: none; }

@media (prefers-reduced-motion: reduce){
  /* בלי תנועה אין יתרון לתלת-ממד — האימוג'י מספיק וחוסך 1.5MB */
  .pv__ico--pole{ width: auto; height: auto; }
  .pv__ico--pole .polein{ display: none; }
}
.pv__head h2 { margin: 0 0 5px; font: 900 20px/1.2 var(--font-display, Rubik, sans-serif); color: var(--ink-1, #fff); }
.pv__head p { margin: 0; font-size: 13px; color: var(--ink-3, rgba(255, 255, 255, .55)); }

.pv__note {
  background: rgba(0, 230, 118, .08);
  border: 1px solid rgba(0, 230, 118, .26);
  border-radius: 12px;
  padding: 12px;
  font-size: 13px; line-height: 1.6;
  color: var(--ink-2, rgba(255, 255, 255, .78));
  margin-bottom: 14px;
}
.pv__note b { color: var(--live, #00E676); }

/* ---------------------------------------------------------- קוד קופון */
.pv__coupon { display: flex; gap: 8px; margin: 0 0 14px; align-items: center; }
.pv__coupon .input { flex: 1; min-width: 0; }
.pv__coupon .btn { flex: none; }
.pv__coupon.is-ok {
  padding: 9px 12px; border-radius: var(--r-2, 12px);
  background: rgba(0, 230, 118, .10);
  border: 1px solid rgba(0, 230, 118, .38);
  color: var(--live, #00E676);
  font: 700 12.5px/1.5 var(--font-ui, Heebo, sans-serif);
  justify-content: space-between;
}
.pv__coupon__x {
  background: none; border: 0; cursor: pointer; flex: none;
  color: var(--muted, #9AA0A6); font: 600 11.5px var(--font-ui, Heebo, sans-serif);
  text-decoration: underline;
}

.pv__list { list-style: none; margin: 0 0 16px; padding: 0; }
.pv__list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; line-height: 1.6;
  color: var(--ink-2, rgba(255, 255, 255, .78));
  padding: 5px 0;
}
.pv__list span { color: var(--live, #00E676); font-weight: 900; flex: none; }

.pv__btns { min-height: 52px; }

.pv__wait {
  text-align: center; padding: 16px 10px;
  font-size: 13px; line-height: 1.6;
  color: var(--ink-3, rgba(255, 255, 255, .55));
}

.pv__err {
  display: none; margin-top: 12px; padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 61, 61, .11); border: 1px solid rgba(255, 61, 61, .3);
  color: #FF8A8A; font-size: 13px; line-height: 1.5;
}
.pv__err.is-on { display: block; }

.pv__later {
  display: block; width: 100%;
  appearance: none; cursor: pointer;
  margin-top: 14px; padding: 11px;
  background: transparent;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: 11px;
  color: var(--ink-3, rgba(255, 255, 255, .55));
  font: 500 14px var(--font-ui, Heebo, sans-serif);
}
.pv__later:hover { color: var(--ink-1, #fff); border-color: var(--line-strong, rgba(255, 255, 255, .2)); }

.pv__foot {
  margin: 10px 0 0; text-align: center;
  font-size: 11.5px; line-height: 1.6;
  color: var(--ink-4, rgba(255, 255, 255, .34));
}

/* ------------------------------------------------------- קוד אימות */

.auth__code {
  text-align: center;
  letter-spacing: .55em;
  font: 900 26px/1.2 var(--font-mono, ui-monospace, monospace);
  direction: ltr;
  padding: 15px 13px;
}

.auth__code::placeholder { letter-spacing: .55em; opacity: .3; }

.auth__link {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--live, #00E676);
  font: 700 12px var(--font-ui, Heebo, sans-serif);
  padding: 4px 2px;
  text-decoration: underline;
}
.auth__link[disabled] { opacity: .6; cursor: default; }
.auth__tag b { color: var(--ink-1, #fff); direction: ltr; unicode-bidi: embed; }

.pv__terms {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.6;
  color: var(--ink-3, rgba(255, 255, 255, .55));
  margin: 4px 0 14px; cursor: pointer;
}
.pv__terms input { margin-top: 3px; accent-color: var(--live, #00E676); flex: none; width: 16px; height: 16px; }
.pv__terms a { color: var(--live, #00E676); }
.pv__list li span { min-width: 12px; }

a.acct__item { text-decoration: none; }

/* בורר מיקום בהרשמת מספרה. מיקום מדויק הוא תנאי בשרת, ולכן המצב
   חייב להיות גלוי — ספר שלא ישים לב יקבל שגיאה רק בשליחת הטופס. */
/* ------------------------------------------- השלמת כתובות תוך כדי הקלדה */
.acbox{ position: relative; }
.acbox__list{
  position: absolute; inset-inline: 0; top: 100%; z-index: 40;
  margin-top: 4px; max-height: 264px; overflow-y: auto;
  background: var(--surface-2, #15171A);
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: var(--r-2, 12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.acbox__item{
  display: block; width: 100%; text-align: start; cursor: pointer;
  padding: 9px 12px; background: none; border: 0;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.07));
  font: 400 13px/1.35 var(--font-ui, Heebo, sans-serif);
  color: var(--ink, #fff);
}
.acbox__item:last-child{ border-bottom: 0; }
.acbox__item:hover, .acbox__item.is-on{ background: rgba(0,229,255,.12); }
.acbox__main{ display: block; font-weight: 700; }
.acbox__sub{
  display: block; margin-top: 1px;
  color: var(--ink-3, rgba(255,255,255,.5)); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.geopick{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.geopick .btn{ flex: 1 1 46%; font-size: 13px; }
.geopick__state{ flex: 1 1 100%; font-size: 12px; line-height: 1.5; }
.geopick__ok{ color: var(--live, #00E676); }
.geopick__todo{ color: var(--ink-3, rgba(255,255,255,.55)); }

/* ======================================================= עמוד ספָּרים תלת-ממדי
   קישוט בלבד. יושב מאחורי הכרטיס ולא מפריע לאף לחיצה או גלילה.

   במחשב: שני עמודים משני צדי הכרטיס.
   בטלפון: מעל ומתחת — במסך צר אין מקום בצדדים בלי לדרוס את הטופס. */

.poles {
  position: fixed;
  inset: 0;
  z-index: 0;                 /* מתחת ל-auth__card שהוא z-index:1 */
  pointer-events: none;       /* קריטי: אחרת הקנבס בולע מגע וגלילה */
  opacity: 0;
  transition: opacity .7s ease;
}
.poles.is-ready { opacity: 1; }

/* model-viewer מצייר סרגל התקדמות משלו בראש הרכיב. הוא הבזיק כפס שחור
   מעל העמודים בכל טעינה — ולקישוט אין שום סיבה להראות התקדמות. */
.pole3d::part(default-progress-bar) { display: none; }


.pole3d {
  position: absolute;
  width: 190px;
  height: 380px;
  background: transparent;
  pointer-events: none;
  --poster-color: transparent;   /* בלי ריבוע אפור בזמן הטעינה */
}

/* --- טלפון: עומדים, מעל ומתחת ---
   קודם הם היו מסובבים 90 מעלות ושוכבים לרוחב המסך. זה נראה רע: עמוד
   ספָּרים הוא עצם אנכי, ועמוד שוכב וחתוך נקרא כמו תמונה שבורה שמרחפת
   בפינה — ובמיוחד הנורה, שבלטה הצדה במקום כלפי מעלה.

   עכשיו הם נשארים עומדים ופשוט נחתכים בקצה המסך, כמו עמוד אמיתי
   שעומד ליד הכניסה וממשיך אל מחוץ לפריים. לא ממורכזים, כי עמוד
   שיושב בדיוק מעל הכרטיס נראה כמו קישוט שהודבק לכותרת. */
.pole3d {
  width: 150px;
  height: 300px;
  inset-inline-end: auto;
  transform-origin: 50% 50%;
  transform: none;
}
.pole3d--a { top: -104px; bottom: auto; inset-inline-start: 4%; }
.pole3d--b { bottom: -104px; top: auto; inset-inline-start: auto; inset-inline-end: 4%; transform: none; }

/* --- מסך רחב: לצדדים הרחוקים --- */
@media (min-width: 900px) {
  .pole3d {
    /* הרוחב נגזר מהמקום שבאמת פנוי לצד הכרטיס (452px), ולכן העמוד גדל
       ככל שהמסך רחב יותר אבל לעולם לא נכנס אל תוך הטופס. 560 ולא 452
       משאיר רווח נשימה בין העמוד לכרטיס במסכים הצרים שבטווח הזה. */
    width: min(320px, calc((100vw - 560px) / 2));
    height: min(640px, 82vh);
    inset-inline-start: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
  }
  /* צמודים לקצה המסך ולא לכרטיס — ככל שהמסך רחב יותר הם מתרחקים החוצה */
  .pole3d--a { inset-inline-start: clamp(8px, 3.5vw, 96px); inset-inline-end: auto; bottom: auto; }
  /* מאפס במפורש את סיבוב הטלפון — לא מסתמך על סדר הכתיבה בקובץ */
  .pole3d--b {
    inset-inline-end: clamp(8px, 3.5vw, 96px); inset-inline-start: auto; bottom: auto;
    transform: translateY(-50%);
  }
}

/* מסך נמוך מאוד — העמודים גונבים מקום מהטופס, מוותרים עליהם */
@media (max-height: 620px) and (max-width: 899px) {
  .poles { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .poles { display: none; }
}

/* --- יציאה מהשער ---
   קיים רק כשהאפליקציה כבר רצה מאחור (ראה wireDismiss ב-auth.js).
   בהרשמה הראשונית אין כפתור כזה — אין לאן לחזור. */
.auth__dismiss {
  position: fixed;
  z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  inset-inline-end: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--line);
  color: var(--ink-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.auth__dismiss:hover { color: var(--ink); border-color: var(--ink-3, var(--line)); transform: scale(1.06); }
.auth__dismiss:active { transform: scale(.94); }

/* ==================================================== מסך מספרה חסומה
   נראה כמו שער ההתחברות בכוונה: זה מסך שחוסם את האתר, ולא הודעה
   שאפשר לדלג עליה. */
.ban{
  position: fixed; inset: 0; z-index: 950;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,82,82,.10), transparent 60%),
    var(--c-void, #0B0C0E);
  overflow-y: auto;
}
.ban[hidden]{ display: none; }

.ban__card{
  width: min(440px, 100%);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--surface-1, #14161A);
  border: 1px solid var(--line);
  text-align: center;
}
.ban__ico{ font-size: 40px; line-height: 1; margin-bottom: var(--s-3); }
.ban__card h2{ font-family: var(--font-display); font-size: var(--t-xl); }
.ban__lead{ color: var(--ink-2); font-size: var(--t-sm); margin-top: var(--s-2); }

.ban__reason{
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--busy-dim); border: 1px solid rgba(255,82,82,.32);
  color: var(--ink-1); font-size: var(--t-md); text-align: start;
}
.ban__label{
  display: block; font-size: var(--t-2xs); font-weight: 700;
  color: var(--busy-ink); margin-bottom: 3px;
}

.ban__form{ text-align: start; margin-top: var(--s-4); }
.ban__form label{ display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s-2); }
.ban__form textarea{
  width: 100%; padding: var(--s-3); border-radius: var(--r-md);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--ink-1); font: inherit; font-size: var(--t-sm); resize: vertical;
}
.ban__form textarea:focus{ border-color: rgba(0,229,255,.55); outline: none; }
.ban__hint{ font-size: var(--t-2xs); color: var(--ink-3); margin: var(--s-2) 0 var(--s-3); }

.ban__sent{
  margin-top: var(--s-4); padding: var(--s-4);
  border-radius: var(--r-md); text-align: start;
  background: rgba(0,230,118,.10); border: 1px solid rgba(0,230,118,.32);
}
.ban__sent--no{ background: rgba(255,255,255,.05); border-color: var(--line); }
.ban__sent p{ font-size: var(--t-sm); color: var(--ink-2); margin-top: 3px; }
.ban__sent blockquote{
  margin: var(--s-3) 0 0; padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--line-strong);
  font-size: var(--t-sm); color: var(--ink-2);
}

.ban__err{ display: none; margin-top: var(--s-3); color: var(--busy-ink); font-size: var(--t-sm); }
.ban__err.is-on{ display: block; }

.ban__out{
  margin-top: var(--s-4); font-size: var(--t-sm);
  color: var(--ink-3); text-decoration: underline; cursor: pointer; background: none;
}

/* שורת המנוי: מספר ויחידה לא נשברים לשתי שורות.
   בלי זה "83 ימים" נשבר ל-83 בסוף שורה ו"ימים" בתחילת הבאה,
   ובעברית עם ספרות זה נקרא כמו רצף מספרים מבולגן. */
.u-nowrap { white-space: nowrap; }
.subbar__gift { color: var(--live-ink, #00E676); font-weight: 700; }

/* ---------------------------------------- כרטיס אמצעי התשלום הנוכחי */
.pv__method{
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 4px; padding: 13px 15px;
  border-radius: 14px;
  background: rgba(0, 230, 118, .09);
  border: 1px solid rgba(0, 230, 118, .3);
}
.pv__method__ico{ font-size: 24px; line-height: 1; flex: none; }
.pv__method__txt{ min-width: 0; }
.pv__method__txt b{
  display: block; font-size: 15px; color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv__method__txt small{ display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.pv__btns .btn--block + .btn--block{ margin-top: 8px; }

/* ------------------------------------------- אזהרת דפדפן מוטמע (in-app) */
.pv__inapp{
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 179, 0, .10);
  border: 1px solid rgba(255, 179, 0, .38);
  text-align: center;
}
.pv__inapp b{ display: block; font-size: 15px; color: #FFD27A; margin-bottom: 8px; }
.pv__inapp p{ font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 10px; }
.pv__inapp__how{ font-size: 12.5px; color: var(--ink-3); }
.pv__inapp .btn{ margin-top: 8px; }