/* ==========================================================================
   app.css - עיצוב האפליקציה והעמוד.

   עיקרון: הטופס עצמו הוא הממשק. השדות שקופים ברובם, ומה שנראה הוא הטופס
   המקורי עם הטקסט שהוזן. אין קישוטים גרפיים מיותרים מעל הטופס - רק סימון
   עדין של השדות כדי שיהיה ברור איפה אפשר להקליד.
   ========================================================================== */

:root {
  --ink: rgb(0 0 90);
  /* כחול המותג, נדגם מקובץ הלוגו של אורן לוי רואה חשבון */
  --brand: #06539a;
  --brand-dark: #04406f;
  --text: #1c2733;
  --muted: #5b6b7a;
  --line: #d8e0e6;
  --bg: #f5f7f9;
  --panel: #ffffff;
  --danger: #a4262c;
  --warn: #8a5a00;
  --focus: #0b7fd4;
  --radius: 8px;
  --font: "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
}

@font-face {
  font-family: "Form821Hebrew";
  src: url("../assets/fonts/form821-hebrew.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }

/* כללי display מפורשים גוברים על תכונת hidden של הדפדפן - צריך להחזיר אותה. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { line-height: 1.3; color: var(--brand-dark); }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 8px; }
h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h3 { font-size: 1.05rem; }

.site-header { background: var(--panel); border-bottom: 1px solid var(--line); padding: 14px 0 20px; }
.lede { margin: 0; color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------- שורת המיתוג */

.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-logo {
  height: 52px;
  width: auto;
  flex: none;
  display: block;
}

.brand-text {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.brand-kicker { font-size: 0.72rem; color: var(--muted); }
.brand-name { font-size: 1.05rem; font-weight: 700; color: var(--brand); }
.brand-role { font-size: 0.85rem; color: var(--muted); }

.brand-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 44px;            /* יעד מגע נוח בנייד */
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.brand-phone:hover { border-color: var(--brand); background: #f1f6fb; }
.brand-phone:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.brand-phone-icon { width: 17px; height: 17px; flex: none; }
/* המספר נשאר LTR גם בתוך עמוד RTL */
.brand-phone-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.content { padding: 28px 0; }
.content p, .content li { max-width: 72ch; }
.content-cta { background: var(--panel); border-block: 1px solid var(--line); }

.site-footer {
  padding: 20px 0 40px;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer p { margin: 0 0 8px; }
.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--text);
}
.footer-tel { color: var(--brand); direction: ltr; unicode-bidi: isolate; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}
.footer-links a, .footer-tel { color: var(--brand); }
/* יעד לחיצה נוח גם בקישורי הפוטר */
.footer-links a, .footer-brand a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
}
.site-footer a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------ סרגל כלים */

.app { padding: 20px 0 8px; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  padding: 10px 0 14px;
}
.toolbar-group { display: flex; gap: 8px; align-items: center; }
.toolbar-zoom { margin-inline-start: auto; }

.btn {
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 16px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { border-color: var(--brand); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: default; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-dark); }
.btn-quiet { color: var(--muted); }
.btn-icon { min-width: 44px; padding: 9px 12px; font-size: 1.2rem; line-height: 1; }

.status {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #eef6ec;
  border: 1px solid #cfe3ca;
}
.status.is-error { background: #fdf0f0; border-color: #f0c8c8; color: var(--danger); }

/* ------------------------------------------------- פרטיות ואישור */

/* מוסתר חזותית אך זמין לקוראי מסך. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.consent {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--radius);
}

.consent-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--text);
  max-width: 78ch;
}
.consent-icon { width: 19px; height: 19px; flex: none; color: var(--brand); margin-top: 1px; }

.consent-row { display: flex; align-items: flex-start; gap: 10px; }

/* יעד מגע נוח (WCAG 2.5.8) בלי לשנות את מראה התיבה. */
.consent-check {
  width: 22px; height: 22px;
  flex: none;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.consent-check:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.consent-label {
  font-size: 0.92rem;
  line-height: 1.5;
  cursor: pointer;
  /* הטקסט לא נשבר באמצע הקישור במסכים צרים */
  text-wrap: pretty;
}
.consent-label a { color: var(--brand); }
.consent-label a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* שגיאת האישור: מסומנת בסימן, במסגרת ובמשקל טקסט - לא בצבע בלבד. */
.consent-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #7a1d22;
  background: #fdf2f2;
  border: 1px solid #d99a9e;
  border-radius: var(--radius);
}
.consent-error-mark {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #a4262c;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.consent-check[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }

/* ------------------------------------------------------------- שגיאות */

.issues {
  margin: 0 0 14px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--danger);
  border-radius: var(--radius);
}
.issues h3 { margin: 8px 0 6px; font-size: 0.98rem; }
.issues ul { margin: 0; padding-inline-start: 20px; }
.issues li { margin: 3px 0; }
.issues-missing { color: var(--warn); }
.issue-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: start;
  cursor: pointer;
  text-decoration: underline dotted;
}
.issue-link:hover { text-decoration: underline; }

/* --------------------------------------------------------- פריסת האזור */

.app-body { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }

.field-index-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
}
.field-index-panel h3 { margin: 0 0 4px; }
.field-index-panel .hint { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); }
#field-index details { border-top: 1px solid var(--line); padding: 6px 0; }
#field-index summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
#field-index ul { list-style: none; margin: 6px 0 4px; padding: 0; }
#field-index li button {
  font: inherit;
  font-size: 0.88rem;
  background: none;
  border: 0;
  color: var(--brand);
  padding: 5px 2px;
  cursor: pointer;
  text-align: start;
  width: 100%;
}
#field-index li button:hover { text-decoration: underline; }

/* ------------------------------------------------------------- הבמה */

.stage-area { min-width: 0; }

.form-stage {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stage-viewport {
  overflow: auto;
  max-height: min(82vh, 1100px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
}

.stage {
  position: relative;
  margin: 0 auto;
  background: #fff;
  /* --scale מתעדכן מ-JS: פיקסלים של מסך לכל px של 300dpi. */
  --scale: 0.5;
}

.stage-bg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* -------------------------------------------------- שדות מעל הטופס */

.f-text,
.f-digits,
.f-mark {
  position: absolute;
  margin: 0;
}

.f-text {
  border: 0;
  background: rgb(11 127 212 / 6%);
  border-radius: 2px;
  color: var(--ink);
  font-family: "Form821Hebrew", "Arial Hebrew", Arial, sans-serif;
  font-size: calc(var(--scale) * var(--fs) * 1px);
  line-height: 1;
  padding: 0;
  outline: 0;
  min-width: 0;
}
.f-text::placeholder { color: rgb(0 0 90 / 32%); }
.f-text:hover { background: rgb(11 127 212 / 12%); }
.f-text:focus {
  background: rgb(255 244 190 / 65%);
  box-shadow: 0 0 0 2px var(--focus);
}
.f-text.is-tight { background: rgb(164 38 44 / 12%); }

/* משבצות ספרות */

.f-digits { background: rgb(11 127 212 / 6%); border-radius: 2px; }
.f-digits:hover { background: rgb(11 127 212 / 12%); }
.f-digits.is-active { background: rgb(255 244 190 / 65%); box-shadow: 0 0 0 2px var(--focus); }

.f-digit-cell {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: "Form821Hebrew", "Arial Hebrew", Arial, sans-serif;
  font-size: calc(var(--scale) * var(--fs) * 1px);
  line-height: 1;
  pointer-events: none;
}
.f-digit-cell.is-next { background: rgb(11 127 212 / 18%); border-radius: 2px; }

.f-digits-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px; /* מונע הגדלה אוטומטית של iOS בעת מיקוד */
  padding: 0;
  outline: 0;
}

/* תיבות סימון */

.f-mark { display: block; cursor: pointer; }
.f-mark input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.f-mark-x {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgb(11 127 212 / 10%);
}
.f-mark:hover .f-mark-x { background: rgb(11 127 212 / 20%); }
.f-mark input:focus-visible ~ .f-mark-x { box-shadow: 0 0 0 2px var(--focus); }
/* סימון = שני קווים אלכסוניים, כמו ב-PDF (ולא התו "X" מפונט).
   הריווח 22% מכל צד ועובי הקו נגזרים מאותם יחסים שב-layout.js. */
.f-mark input:checked ~ .f-mark-x::before,
.f-mark input:checked ~ .f-mark-x::after {
  content: "";
  position: absolute;
  inset: 22%;
  background: var(--ink);
  clip-path: polygon(0 0, 14% 0, 100% 86%, 100% 100%, 86% 100%, 0 14%);
}
.f-mark input:checked ~ .f-mark-x::after {
  clip-path: polygon(100% 0, 100% 14%, 14% 100%, 0 100%, 0 86%, 86% 0);
}

.has-issue { box-shadow: 0 0 0 2px var(--danger) !important; }
.is-hidden { display: none !important; }

/* ------------------------------------------------------ רמז לשדה פעיל */

.field-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field-hint-text { flex: 1; min-width: 0; font-size: 0.9rem; }
.field-hint-label { display: block; }
.field-hint-help { color: var(--muted); font-size: 0.85rem; }

.privacy-note {
  margin: 16px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 80ch;
}

/* ------------------------------------------------- תצוגה מקדימה */

.preview-dialog {
  width: min(96vw, 900px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}
.preview-dialog::backdrop { background: rgb(16 26 34 / 60%); }
.preview-dialog { display: none; }
.preview-dialog[open] { display: flex; flex-direction: column; }

.preview-head { padding: 16px 20px 8px; }
.preview-head h2 { margin: 0 0 4px; }
.preview-head p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.preview-scroll { flex: 1; overflow: auto; padding: 12px 20px; background: #e9edf0; }
#preview-canvas { display: block; margin: 0 auto; box-shadow: 0 2px 12px rgb(0 0 0 / 18%); }

.preview-notes {
  padding: 10px 20px;
  background: #fff7e6;
  border-top: 1px solid #f0dfb8;
  font-size: 0.88rem;
}
.preview-notes ul { margin: 6px 0 0; padding-inline-start: 20px; }

.preview-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.is-busy { cursor: progress; }

/* ---------------------------------------------------------- נייד */

/* ---------------------------------------------- מיתוג במסכים צרים */

@media (max-width: 560px) {
  .site-header { padding: 12px 0 16px; }
  .brand-bar { padding-bottom: 10px; margin-bottom: 12px; gap: 8px 10px; }
  .brand { gap: 9px; }
  .brand-logo { height: 42px; }
  .brand-name { font-size: 0.98rem; }
  .brand-role { font-size: 0.8rem; }
  .brand-phone { padding: 8px 11px; font-size: 0.92rem; gap: 6px; }
  .brand-phone-icon { width: 15px; height: 15px; }
}

/* במסכים הצרים ביותר (עד 359px) הכול עדיין נכנס לשורה אחת אחרי הקטנה קלה.
   כך שורת המיתוג נשארת נמוכה ולא דוחפת את הטופס מטה, והמשפט "מוגש על ידי"
   נשאר גלוי גם כאן. */
@media (max-width: 359px) {
  .brand-logo { height: 36px; }
  .brand { gap: 8px; }
  .brand-kicker { font-size: 0.66rem; }
  .brand-name { font-size: 0.92rem; }
  .brand-role { font-size: 0.76rem; }
  .brand-phone { padding: 8px 9px; font-size: 0.86rem; gap: 5px; }
  .brand-phone-icon { width: 14px; height: 14px; }
}

@media (max-width: 560px) {
  .consent { padding: 11px 13px; }
  .consent-note { font-size: 0.86rem; }
  .consent-label { font-size: 0.88rem; }
}

@media (max-width: 900px) {
  .app-body { grid-template-columns: 1fr; }

  .field-index-panel {
    position: static;
    max-height: none;
    order: 2;
  }
  .field-index-panel h3 { font-size: 0.98rem; }

  .stage-viewport { max-height: 68vh; }

  .toolbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-top: 8px; }
  .toolbar-zoom { margin-inline-start: 0; }
  .btn { flex: 1 1 auto; }
  .toolbar-group { flex: 1 1 100%; }

  /* סרגל הניווט בין השדות נצמד לתחתית - זמין תוך כדי הקלדה. */
  .field-hint {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-top: 8px;
    box-shadow: 0 -2px 10px rgb(0 0 0 / 8%);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}