/* דף החתימה של KEOSS STUDIOS (26.10.2026).
   הועתק מתצוגת "מה הלקוח רואה" בהדמיה שאושרה (mockups/kaos-sign-1.html) — אותם צבעים, מידות ורכיבים.
   ההבדל היחיד: שם הכול היה בתוך "טלפון" מדומה, וכאן זה דף אמיתי (גיליון הנוסח קבוע למסך, שוליים בטוחים).
   בלי סגנונות בתוך ה-HTML ובלי גופנים מבחוץ — ה-CSP מתיר רק קבצים מהאתר עצמו. */

@font-face { font-family: Assistant; src: url("fonts/Assistant-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Assistant; src: url("fonts/Assistant-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Assistant; src: url("fonts/Assistant-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* מיתוג KEOSS (כמו המייל ללקוח במערכת ההקלטות) */
  --k-bg: #F5F3F3; --k-card: #FFFFFF; --k-brand: #521619; --k-brand-2: #3E1013; --k-soft: #F8F4F4; --k-soft-2: #F1E9E9;
  --k-ink: #221C1C; --k-sub: #6E6767; --k-faint: #A39C9C; --k-line: #ECE7E7; --k-line-2: #DCD4D4;
  --k-ok: #1E7A4C; --k-okbg: #E8F4EE; --k-bad: #B3261E; --k-badbg: #FBECEA; --k-warn: #8A5A0B; --k-warnbg: #FBF3E3;
  --k-font: Assistant, "Segoe UI", Arial, sans-serif;
  /* בהירה בלבד, כמו המייל והמסמך */
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden], .k-hide { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.k-lock { overflow: hidden; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--k-bg); color: var(--k-ink); font-family: var(--k-font); font-size: 15px; line-height: 1.5; direction: rtl; }
button { font-family: inherit; cursor: pointer; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible, .k-text:focus-visible { outline: 2px solid var(--k-brand); outline-offset: 2px; }
h2:focus, .k-sheet:focus { outline: none; }
svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
bdi { unicode-bidi: isolate; }

/* ---------------------------------------------------------- המסגרת: עמודה אחת במרכז */
.k-page { max-width: 468px; margin: 0 auto; padding-top: max(18px, env(safe-area-inset-top, 0px)); padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) { .k-page { padding-top: 40px; } }
.k-draft { background: var(--k-warnbg); color: var(--k-warn); border: 1px dashed #E3C78F; border-radius: 10px; font-size: 12.5px; font-weight: 600; padding: 7px 11px; text-align: center; margin-bottom: 12px; line-height: 1.45; }
/* תצוגה מקדימה (שי בודק את הקישור לפני השליחה): בצבע המותג, כדי שלא יתבלבל עם פס הטיוטה */
.k-prevbar { background: var(--k-soft-2); color: var(--k-brand); border: 1px dashed #D3BCBD; border-radius: 10px; font-size: 12.5px; font-weight: 700; padding: 7px 11px; text-align: center; margin-bottom: 12px; line-height: 1.45; }
.k-card { background: var(--k-card); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,20,22,.05), 0 8px 24px rgba(60,20,22,.05); max-width: 440px; margin: 0 auto; }
.k-top { padding: 22px 22px 16px; text-align: center; border-bottom: 2px solid var(--k-brand); }
.logo { display: block; margin: 0 auto; width: 168px; height: auto; aspect-ratio: 380 / 88; }
.k-body { padding: 22px 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.k-head { text-align: center; display: grid; gap: 4px; }
.k-head h2 { margin: 0; font-size: 24px; font-weight: 700; color: var(--k-brand); text-wrap: balance; line-height: 1.3; }
.k-head p { margin: 0; color: var(--k-sub); font-size: 15px; }
.k-sec { display: grid; gap: 8px; }
.k-lbl { font-size: 15px; font-weight: 700; color: var(--k-ink); display: flex; align-items: baseline; gap: 8px; }
.k-lbl small { margin-right: auto; font-size: 13px; font-weight: 500; color: var(--k-sub); min-width: 0; overflow-wrap: anywhere; text-align: left; }
.k-rows { border-top: 1px solid var(--k-line); }
.k-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--k-line); font-size: 14.5px; }
.k-row span:first-child { color: var(--k-sub); flex-shrink: 0; }
.k-row span:last-child { margin-right: auto; text-align: left; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.k-sum { background: var(--k-soft); border-radius: 12px; padding: 12px 14px; display: grid; gap: 7px; }
.k-sum ul { margin: 0; padding: 0 16px 0 0; display: grid; gap: 5px; font-size: 14px; line-height: 1.55; color: #3F3838; }
.k-terms { width: 100%; display: flex; align-items: center; gap: 12px; text-align: right; background: var(--k-card); border: 1.5px solid var(--k-line-2); border-radius: 12px; padding: 12px 14px; min-height: 58px; font-family: var(--k-font); color: var(--k-ink); }
.k-terms .ic { width: 22px; height: 22px; color: var(--k-brand); }
.k-terms .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.k-terms .tx b { font-size: 15px; }
.k-terms .tx span { font-size: 13px; color: var(--k-sub); }
.k-terms .st { width: 24px; height: 24px; color: var(--k-faint); }
/* וי ירוק אחרי שהלקוח פתח את הנוסח המלא */
.k-terms .st-ok { display: none; }
.k-terms.read .st-go { display: none; }
.k-terms.read .st-ok { display: block; color: var(--k-ok); }

/* ---------------------------------------------------------- אזור החתימה */
.k-pad { position: relative; width: 100%; aspect-ratio: 2.4 / 1; min-height: 130px; border: 1.5px solid var(--k-line-2); border-radius: 14px; background: #FCFBFB; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.k-pad.on { border-color: var(--k-brand); box-shadow: 0 0 0 3px rgba(82,22,25,.08); }
/* touch-action:none רק על הקנבס — הדף לא זז בזמן החתימה, ובכל שאר הדף הגלילה רגילה */
.k-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.k-pad .base { position: absolute; left: 18px; right: 18px; bottom: 26%; border-bottom: 1px dashed #D8CFCF; pointer-events: none; }
.k-pad .hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--k-faint); font-size: 16px; pointer-events: none; padding: 0 16px; text-align: center; }
.k-pad .hint svg { width: 18px; height: 18px; }
.k-pad.has .hint { display: none; }
.k-pad.locked canvas { cursor: default; }
.k-pad.nope .hint { color: var(--k-bad); font-size: 14px; }
.k-pad.nope canvas { cursor: default; }
.k-tools { display: flex; gap: 6px; justify-content: space-between; margin-top: -2px; }
.k-tool { border: 0; background: none; display: inline-flex; align-items: center; gap: 6px; color: var(--k-sub); font-size: 14px; font-weight: 600; padding: 6px 4px; min-height: 36px; font-family: var(--k-font); }
.k-tool svg { width: 16px; height: 16px; }
.k-tool[disabled] { opacity: .4; cursor: default; }

/* ---------------------------------------------------------- אישור ושליחה */
.k-check { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; user-select: none; padding: 4px 0; position: relative; }
.k-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.k-box { width: 22px; height: 22px; border: 1.8px solid #BBAFAF; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; background: #fff; color: transparent; }
.k-box svg { width: 15px; height: 15px; }
.k-check input:checked + .k-box { background: var(--k-brand); border-color: var(--k-brand); color: #fff; }
.k-check input:focus-visible + .k-box { outline: 2px solid var(--k-brand); outline-offset: 2px; }
.k-check input:disabled + .k-box { opacity: .6; }
.k-btn { width: 100%; min-height: 54px; border: 0; border-radius: 30px; background: var(--k-brand); color: #fff; font-family: var(--k-font); font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; }
/* hover רק במכשירים עם עכבר — בטלפון הוא "נתקע" אחרי נגיעה */
@media (hover: hover) { .k-btn:hover { background: var(--k-brand-2); } .k-terms:hover { border-color: #C9BDBD; } }
.k-btn[aria-disabled="true"] { background: #E7E1E1; color: #A39A9A; cursor: not-allowed; }
.k-btn.busy { background: var(--k-brand); color: #fff; opacity: .85; cursor: progress; }
.k-btn svg { width: 18px; height: 18px; }
.k-btn.ghost { background: var(--k-card); color: var(--k-brand); border: 1.5px solid var(--k-brand); }
@media (hover: hover) { .k-btn.ghost:hover { background: var(--k-soft); } }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.4px solid rgba(255,255,255,.35); border-top-color: #fff; animation: sp .8s linear infinite; flex-shrink: 0; }
.spin.dk { width: 30px; height: 30px; border-width: 3px; border-color: rgba(82,22,25,.16); border-top-color: var(--k-brand); }
@keyframes sp { to { transform: rotate(360deg); } }
.k-need { text-align: center; font-size: 13.5px; color: var(--k-sub); margin-top: -8px; min-height: 20px; }
.k-need.flash { color: var(--k-bad); font-weight: 600; }
.k-err { background: var(--k-badbg); color: var(--k-bad); border-radius: 12px; padding: 11px 13px; font-size: 14px; line-height: 1.5; display: flex; gap: 9px; text-align: right; }
.k-err svg { width: 18px; height: 18px; margin-top: 2px; }
#kErr:empty, .k-slot:empty { display: none; }
.k-slot { width: 100%; }
.k-priv { font-size: 12.5px; line-height: 1.6; color: var(--k-sub); border-top: 1px solid var(--k-line); padding-top: 14px; display: flex; gap: 8px; }
.k-priv svg { width: 15px; height: 15px; margin-top: 3px; color: var(--k-faint); }
.k-foot { text-align: center; font-size: 12.5px; color: var(--k-faint); padding: 14px 0 2px; }
.k-foot a { direction: ltr; unicode-bidi: isolate; }
.k-noscript { margin: 0; text-align: center; color: var(--k-bad); font-weight: 600; }

/* ---------------------------------------------------------- מסכי סיום ומצבים */
.k-done { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 10px 0 2px; }
.k-done .big { width: 76px; height: 76px; border-radius: 50%; background: var(--k-okbg); color: var(--k-ok); display: grid; place-items: center; }
.k-done .big svg { width: 38px; height: 38px; grid-area: 1 / 1; }
.k-done .big.muted { background: var(--k-soft); color: var(--k-brand); }
.k-done h2 { margin: 2px 0 0; font-size: 24px; font-weight: 700; color: var(--k-ink); text-wrap: balance; }
.k-done p { margin: 0; color: #4A4343; font-size: 15.5px; line-height: 1.65; max-width: 30ch; }
.k-done .meta { font-size: 13px; color: var(--k-sub); }
.k-done .meta:empty { display: none; }
.k-done .meta a { direction: ltr; unicode-bidi: isolate; }
.k-done .k-btn { margin-top: 6px; }
.k-loading { padding: 34px 0 30px; gap: 14px; }
.k-loading p { color: var(--k-sub); font-size: 15px; }

/* ---------------------------------------------------------- הנוסח המלא: גיליון מלמטה */
.k-sheet-back { position: fixed; inset: 0; background: rgba(30,12,13,.35); z-index: 50; animation: k-fade .18s ease-out; }
.k-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: max(54px, calc(env(safe-area-inset-top, 0px) + 24px)); max-width: 560px; margin: 0 auto; z-index: 51; background: var(--k-card); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; font-family: var(--k-font); color: var(--k-ink); box-shadow: 0 -10px 30px rgba(30,12,13,.12); animation: k-up .22s ease-out; }
@media (min-width: 700px) { .k-sheet { top: 40px; } }
.k-sheet header { padding: 10px 18px 12px; border-bottom: 1px solid var(--k-line); display: grid; gap: 8px; }
.k-sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: #DDD5D5; justify-self: center; }
.k-sheet header div { display: flex; align-items: center; gap: 10px; }
.k-sheet header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--k-brand); flex: 1; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.k-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--k-soft); color: var(--k-ink); display: grid; place-items: center; flex-shrink: 0; padding: 0; }
.k-x svg { width: 16px; height: 16px; }
.k-text { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 8px; font-size: 15px; line-height: 1.75; color: #332C2C; }
.k-text .k-rows { margin-bottom: 14px; }
.k-text p { margin: 0 0 12px; white-space: pre-line; }
.k-text h4 { margin: 16px 0 4px; font-size: 15.5px; color: var(--k-ink); }
.k-text .ver { font-size: 12.5px; color: var(--k-sub); border-top: 1px solid var(--k-line); padding-top: 10px; margin-top: 18px; }
.k-sheet footer { padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--k-line); }
@keyframes k-up { from { transform: translateY(28px); opacity: 0; } }
@keyframes k-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation-duration: 2.4s; }
  .k-sheet, .k-sheet-back { animation: none; }
}